From cb35d73135ba2f0724b562e2ece0a01f171462dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Tue, 12 Oct 2021 14:18:10 +0200
Subject: [PATCH] fix: archive should not allow viewing additional details
 about toggle

---
 .../FeatureToggleListActions.jsx              |  2 +-
 .../FeatureToggleListItem.jsx                 | 73 ++++++++++++-------
 .../feature-list-item-component-test.jsx.snap | 38 +++++++++-
 .../feature/FeatureToggleList/index.jsx       |  4 +-
 4 files changed, 84 insertions(+), 33 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
index 541400d159..0bf508d053 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.jsx
@@ -19,7 +19,7 @@ const sortingOptions = [
     { type: 'stale', displayName: 'Stale' },
     { type: 'created', displayName: 'Created' },
     { type: 'Last seen', displayName: 'Last seen' },
-    { type: 'strategies', displayName: 'Strategies' },
+    { type: 'project', displayName: 'Project' },
     { type: 'metrics', displayName: 'Metrics' },
 ];
 
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
index 950e5cc16d..1d1e418be3 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { Link } from 'react-router-dom';
-import { IconButton, ListItem } from '@material-ui/core';
+import { Chip, IconButton, ListItem } from '@material-ui/core';
 import { Undo } from '@material-ui/icons';
 
 import TimeAgo from 'react-timeago';
 import Status from '../../status-component';
-import FeatureToggleListItemChip from './FeatureToggleListItemChip';
 import ConditionallyRender from '../../../common/ConditionallyRender/ConditionallyRender';
 
 import { UPDATE_FEATURE } from '../../../AccessProvider/permissions';
@@ -33,14 +32,11 @@ const FeatureToggleListItem = ({
 }) => {
     const styles = useStyles();
 
+    const isArchive = !!revive;
+
     const { name, description, type, stale, createdAt, project, lastSeenAt } =
         feature;
    
-    const featureUrl =
-        toggleFeature === undefined
-            ? `/projects/${feature.project}/archived/${name}/metrics`
-            : getTogglePath(feature.project, name);
-
     return (
         <ListItem
             {...rest}
@@ -53,27 +49,48 @@ const FeatureToggleListItem = ({
                 <FeatureType type={type} />
             </span>
             <span className={classnames(styles.listItemLink)}>
-                <Link
-                    to={featureUrl}
-                    className={classnames(
-                        commonStyles.listLink,
-                        commonStyles.truncate
-                    )}
-                >
-                    <span className={commonStyles.toggleName}>
-                        {name}&nbsp;
-                    </span>
-                    <span className={styles.listItemToggle}>
-                    </span>
-                    <small>
-                        <TimeAgo date={createdAt} live={false} />
-                    </small>
-                    <div>
-                        <span className={commonStyles.truncate}>
-                            <small>{description}</small>
+                <ConditionallyRender condition={!isArchive} show={
+                    <Link
+                        to={getTogglePath(feature.project, name)}
+                        className={classnames(
+                            commonStyles.listLink,
+                            commonStyles.truncate
+                        )}
+                    >
+                        <span className={commonStyles.toggleName}>
+                            {name}&nbsp;
                         </span>
-                    </div>
-                </Link>
+                        <span className={styles.listItemToggle}>
+                        </span>
+                        <small>
+                            <TimeAgo date={createdAt} live={false} />
+                        </small>
+                        <div>
+                            <span className={commonStyles.truncate}>
+                                <small>{description}</small>
+                            </span>
+                        </div>
+                    </Link>
+                } elseShow={
+                    <>
+                        <span className={commonStyles.toggleName}>
+                            {name}&nbsp;
+                        </span>
+                        <span className={styles.listItemToggle}>
+                        </span>
+                        <small>
+                            <TimeAgo date={createdAt} live={false} />
+                        </small>
+                        <div>
+                            <span className={commonStyles.truncate}>
+                                <small>{description}</small>
+                            </span>
+                        </div>
+                    </>
+                }/>
+
+
+                
             </span>
             <span
                 className={classnames(
@@ -82,7 +99,7 @@ const FeatureToggleListItem = ({
                 )}
             >
                 <Status stale={stale} showActive={false} />
-                <FeatureToggleListItemChip type={type} />
+                <Chip color="primary" variant="outlined" className={styles.typeChip} style={{marginLeft: '8px'}} title={`Project: ${project}`} label={project}/>
             </span>
             <ConditionallyRender
                 condition={revive}
diff --git a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
index 6bb02340d6..bbf66a980d 100644
--- a/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
+++ b/frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap
@@ -95,7 +95,25 @@ exports[`renders correctly with one feature 1`] = `
   </span>
   <span
     className="makeStyles-listItemStrategies-6 hideLt920"
-  />
+  >
+    <div
+      className="MuiChip-root MuiChip-colorPrimary MuiChip-outlined MuiChip-outlinedPrimary"
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      style={
+        Object {
+          "marginLeft": "8px",
+        }
+      }
+      title="Project: default"
+    >
+      <span
+        className="MuiChip-label"
+      >
+        default
+      </span>
+    </div>
+  </span>
 </li>
 `;
 
@@ -194,6 +212,22 @@ exports[`renders correctly with one feature without permission 1`] = `
   </span>
   <span
     className="makeStyles-listItemStrategies-6 hideLt920"
-  />
+  >
+    <div
+      className="MuiChip-root MuiChip-colorPrimary MuiChip-outlined MuiChip-outlinedPrimary"
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      style={
+        Object {
+          "marginLeft": "8px",
+        }
+      }
+      title="Project: undefined"
+    >
+      <span
+        className="MuiChip-label"
+      />
+    </div>
+  </span>
 </li>
 `;
diff --git a/frontend/src/component/feature/FeatureToggleList/index.jsx b/frontend/src/component/feature/FeatureToggleList/index.jsx
index 0aee4c8d4e..ca3bc71419 100644
--- a/frontend/src/component/feature/FeatureToggleList/index.jsx
+++ b/frontend/src/component/feature/FeatureToggleList/index.jsx
@@ -92,9 +92,9 @@ export const mapStateToPropsConfigurable = isFeature => state => {
             }
             return 0;
         });
-    } else if (settings.sort === 'strategies') {
+    } else if (settings.sort === 'project') {
         features = features.sort((a, b) =>
-            a.strategies.length > b.strategies.length ? -1 : 1
+            a.project.length > b.project.length ? -1 : 1
         );
     } else if (settings.sort === 'type') {
         features = features.sort((a, b) => {