Merge pull request #495 from Unleash/fix/revive-archived-feature

Fix/revive archived feature

frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { Link } from 'react-router-dom';
-import { Chip, IconButton, ListItem, Tooltip } from '@material-ui/core';
+import { Chip, ListItem, Tooltip } from '@material-ui/core';
 import { Undo } from '@material-ui/icons';
 
 import TimeAgo from 'react-timeago';
@@ -17,6 +17,8 @@ import { useStyles } from './styles';
 import { getTogglePath } from '../../../../utils/route-path-helpers';
 import FeatureStatus from '../../FeatureView2/FeatureStatus/FeatureStatus';
 import FeatureType from '../../FeatureView2/FeatureType/FeatureType';
+import useProjects from '../../../../hooks/api/getters/useProjects/useProjects';
+import PermissionIconButton from '../../../common/PermissionIconButton/PermissionIconButton';
 
 const FeatureToggleListItem = ({
     feature,
@@ -31,11 +33,25 @@ const FeatureToggleListItem = ({
 }) => {
     const styles = useStyles();
 
+    const { projects } = useProjects();
     const isArchive = !!revive;
 
     const { name, description, type, stale, createdAt, project, lastSeenAt } =
         feature;
 
+    const projectExists = () => {
+        let projectExist = projects.find(proj => proj.id === project);
+        if (projectExist) {
+            return true;
+        }
+        return false;
+    };
+
+    const reviveFeature = () => {
+        if (projectExists()) {
+            revive(feature.name);
+        }
+    };
     return (
         <ListItem
             {...rest}
@@ -83,7 +99,7 @@ const FeatureToggleListItem = ({
                         <>
                             <Tooltip title={description}>
                                 <span className={commonStyles.toggleName}>
-                                    {name}&nbsp; z{' '}
+                                    {name}&nbsp;{' '}
                                 </span>
                             </Tooltip>
                             <span className={styles.listItemToggle}></span>
@@ -109,12 +125,15 @@ const FeatureToggleListItem = ({
                 <Link
                     to={`/projects/${project}`}
                     style={{ textDecoration: 'none' }}
+                    className={classnames({
+                        [`${styles.disabledLink}`]: !projectExists(),
+                    })}
                 >
                     <Chip
                         color="primary"
                         variant="outlined"
                         className={styles.typeChip}
-                        style={{ marginLeft: '8px' }}
+                        style={{ marginLeft: '8px', cursor: 'pointer' }}
                         title={`Project: ${project}`}
                         label={project}
                     />
@@ -123,15 +142,14 @@ const FeatureToggleListItem = ({
             <ConditionallyRender
                 condition={revive}
                 show={
-                    <ConditionallyRender
-                        condition={hasAccess(UPDATE_FEATURE, project)}
-                        show={
-                            <IconButton onClick={() => revive(feature.name)}>
-                                <Undo />
-                            </IconButton>
-                        }
-                        elseShow={<span style={{ width: '48px ' }} />}
-                    />
+                    <PermissionIconButton
+                        permission={UPDATE_FEATURE}
+                        projectId={project}
+                        disabled={!projectExists()}
+                        onClick={reviveFeature}
+                    >
+                        <Undo />
+                    </PermissionIconButton>
                 }
             />
         </ListItem>

frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.js

@@ -29,4 +29,7 @@ export const useStyles = makeStyles(theme => ({
     listItemStrategies: {
         marginLeft: 'auto',
     },
+    disabledLink:{
+        pointerEvents: 'none'
+    },
 }));

frontend/src/component/feature/FeatureToggleList/__tests__/__snapshots__/feature-list-item-component-test.jsx.snap

@@ -10,7 +10,7 @@ exports[`renders correctly with one feature 1`] = `
   >
     <div
       aria-describedby={null}
-      className="makeStyles-container-7"
+      className="makeStyles-container-8"
       onBlur={[Function]}
       onFocus={[Function]}
       onMouseLeave={[Function]}
@@ -42,7 +42,7 @@ exports[`renders correctly with one feature 1`] = `
     <svg
       aria-describedby={null}
       aria-hidden={true}
-      className="MuiSvgIcon-root makeStyles-icon-8"
+      className="MuiSvgIcon-root makeStyles-icon-9"
       data-loading={true}
       focusable="false"
       onBlur={[Function]}
@@ -105,6 +105,7 @@ exports[`renders correctly with one feature 1`] = `
     className="makeStyles-listItemStrategies-6 hideLt920"
   >
     <a
+      className="makeStyles-disabledLink-7"
       href="/projects/default"
       onClick={[Function]}
       style={
@@ -119,6 +120,7 @@ exports[`renders correctly with one feature 1`] = `
         onKeyUp={[Function]}
         style={
           Object {
+            "cursor": "pointer",
             "marginLeft": "8px",
           }
         }
@@ -145,7 +147,7 @@ exports[`renders correctly with one feature without permission 1`] = `
   >
     <div
       aria-describedby={null}
-      className="makeStyles-container-7"
+      className="makeStyles-container-8"
       onBlur={[Function]}
       onFocus={[Function]}
       onMouseLeave={[Function]}
@@ -177,7 +179,7 @@ exports[`renders correctly with one feature without permission 1`] = `
     <svg
       aria-describedby={null}
       aria-hidden={true}
-      className="MuiSvgIcon-root makeStyles-icon-8"
+      className="MuiSvgIcon-root makeStyles-icon-9"
       data-loading={true}
       focusable="false"
       onBlur={[Function]}
@@ -240,6 +242,7 @@ exports[`renders correctly with one feature without permission 1`] = `
     className="makeStyles-listItemStrategies-6 hideLt920"
   >
     <a
+      className="makeStyles-disabledLink-7"
       href="/projects/undefined"
       onClick={[Function]}
       style={
@@ -254,6 +257,7 @@ exports[`renders correctly with one feature without permission 1`] = `
         onKeyUp={[Function]}
         style={
           Object {
+            "cursor": "pointer",
             "marginLeft": "8px",
           }
         }

frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx

@@ -93,7 +93,7 @@ const ProjectFeatureToggles = ({
                             condition={hasAccess(CREATE_FEATURE, id)}
                             show={
                                 <Link
-                                    to={getCreateTogglePath(id)}
+                                    to={getCreateTogglePath(id, uiConfig.flags.E)}
                                     className={styles.link}
                                     data-loading
                                 >