From 33e16a2536567947dcf260b161a23f13f18485cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Thu, 21 Jan 2021 19:35:59 +0100
Subject: [PATCH] fix: tweak deprecated strategies view

---
 .../list-component-test.jsx.snap              | 54 +++++++++-------
 .../component/strategies/list-component.jsx   | 61 +++++++++++++------
 .../strategies/strategies.module.scss         |  7 +++
 3 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/frontend/src/component/strategies/__tests__/__snapshots__/list-component-test.jsx.snap b/frontend/src/component/strategies/__tests__/__snapshots__/list-component-test.jsx.snap
index 0f0e06bf6d..7a85c48e0e 100644
--- a/frontend/src/component/strategies/__tests__/__snapshots__/list-component-test.jsx.snap
+++ b/frontend/src/component/strategies/__tests__/__snapshots__/list-component-test.jsx.snap
@@ -55,6 +55,7 @@ exports[`renders correctly with one strategy 1`] = `
   </div>
   <react-mdl-List>
     <react-mdl-ListItem
+      className=""
       twoLine={true}
     >
       <react-mdl-ListItemContent
@@ -64,24 +65,27 @@ exports[`renders correctly with one strategy 1`] = `
         <a
           href="/strategies/view/Another"
           onClick={[Function]}
+          title=""
         >
           <strong>
             Another
-             
-            
           </strong>
         </a>
       </react-mdl-ListItemContent>
-      <react-mdl-Button
-        name="remove"
-        onClick={[Function]}
-      >
-        Deprecate
-      </react-mdl-Button>
-      <react-mdl-IconButton
-        name="delete"
-        onClick={[Function]}
-      />
+      <span>
+        <react-mdl-IconButton
+          color="#"
+          disabled={false}
+          name="visibility_off"
+          onClick={[Function]}
+          title="Deprecate acitvation strategy"
+        />
+        <react-mdl-IconButton
+          name="delete"
+          onClick={[Function]}
+          title="Delete acitvation strategy"
+        />
+      </span>
     </react-mdl-ListItem>
   </react-mdl-List>
 </react-mdl-Card>
@@ -128,6 +132,7 @@ exports[`renders correctly with one strategy without permissions 1`] = `
   </div>
   <react-mdl-List>
     <react-mdl-ListItem
+      className=""
       twoLine={true}
     >
       <react-mdl-ListItemContent
@@ -137,21 +142,28 @@ exports[`renders correctly with one strategy without permissions 1`] = `
         <a
           href="/strategies/view/Another"
           onClick={[Function]}
+          title=""
         >
           <strong>
             Another
-             
-            
           </strong>
         </a>
       </react-mdl-ListItemContent>
-      <react-mdl-Button
-        name="remove"
-        onClick={[Function]}
-      >
-        Deprecate
-      </react-mdl-Button>
-      
+      <span>
+        <react-mdl-IconButton
+          color="#"
+          disabled={false}
+          name="visibility_off"
+          onClick={[Function]}
+          title="Deprecate acitvation strategy"
+        />
+        <react-mdl-IconButton
+          disabled={true}
+          name="delete"
+          onClick={[Function]}
+          title="You can not delete a built-in strategy"
+        />
+      </span>
     </react-mdl-ListItem>
   </react-mdl-List>
 </react-mdl-Card>
diff --git a/frontend/src/component/strategies/list-component.jsx b/frontend/src/component/strategies/list-component.jsx
index aaf2e0d09f..9fb9a337d9 100644
--- a/frontend/src/component/strategies/list-component.jsx
+++ b/frontend/src/component/strategies/list-component.jsx
@@ -2,10 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 
-import { List, ListItem, ListItemContent, IconButton, Card, Button } from 'react-mdl';
+import { List, ListItem, ListItemContent, IconButton, Card } from 'react-mdl';
 import { HeaderTitle, styles as commonStyles } from '../common';
 import { CREATE_STRATEGY, DELETE_STRATEGY } from '../../permissions';
 
+import styles from './strategies.module.scss';
+
 class StrategiesListComponent extends Component {
     static propTypes = {
         strategies: PropTypes.array.isRequired,
@@ -44,28 +46,47 @@ class StrategiesListComponent extends Component {
                 <List>
                     {strategies.length > 0 ? (
                         strategies.map((strategy, i) => (
-                            <ListItem key={i} twoLine>
+                            <ListItem key={i} twoLine className={strategy.deprecated ? styles.deprecated : ''}>
                                 <ListItemContent icon="extension" subtitle={strategy.description}>
-                                    <Link to={`/strategies/view/${strategy.name}`}>
-                                        <strong>
-                                            {strategy.name} {strategy.deprecated ? <span>- Deprecated</span> : ''}
-                                        </strong>
+                                    <Link
+                                        to={`/strategies/view/${strategy.name}`}
+                                        title={strategy.deprecated ? 'Deprecated' : ''}
+                                    >
+                                        <strong>{strategy.name}</strong>
+                                        {strategy.deprecated ? <small> (Deprecated)</small> : null}
                                     </Link>
                                 </ListItemContent>
-                                {strategy.deprecated ? (
-                                    <Button name="add" onClick={() => reactivateStrategy(strategy)}>
-                                        Reactivate
-                                    </Button>
-                                ) : (
-                                    <Button name="remove" onClick={() => deprecateStrategy(strategy)}>
-                                        Deprecate
-                                    </Button>
-                                )}
-                                {strategy.editable === false || !hasPermission(DELETE_STRATEGY) ? (
-                                    ''
-                                ) : (
-                                    <IconButton name="delete" onClick={() => removeStrategy(strategy)} />
-                                )}
+                                <span>
+                                    {strategy.deprecated ? (
+                                        <IconButton
+                                            name="visibility"
+                                            title="Reactivate acitvation strategy"
+                                            onClick={() => reactivateStrategy(strategy)}
+                                        />
+                                    ) : (
+                                        <IconButton
+                                            name="visibility_off"
+                                            title="Deprecate acitvation strategy"
+                                            disabled={strategy.name === 'default'}
+                                            color="#"
+                                            onClick={() => deprecateStrategy(strategy)}
+                                        />
+                                    )}
+                                    {strategy.editable === false || !hasPermission(DELETE_STRATEGY) ? (
+                                        <IconButton
+                                            name="delete"
+                                            title="You can not delete a built-in strategy"
+                                            disabled
+                                            onClick={() => {}}
+                                        />
+                                    ) : (
+                                        <IconButton
+                                            name="delete"
+                                            title="Delete acitvation strategy"
+                                            onClick={() => removeStrategy(strategy)}
+                                        />
+                                    )}
+                                </span>
                             </ListItem>
                         ))
                     ) : (
diff --git a/frontend/src/component/strategies/strategies.module.scss b/frontend/src/component/strategies/strategies.module.scss
index 544d25fa08..3ab4ad4f05 100644
--- a/frontend/src/component/strategies/strategies.module.scss
+++ b/frontend/src/component/strategies/strategies.module.scss
@@ -6,3 +6,10 @@
     padding: 0;
     margin: 0;
 }
+
+.deprecated {
+    a {
+        color: #1d1818;
+    }
+    
+}
\ No newline at end of file