refactor: improve feature not found page (#774)

* refactor: improve feature not found page

* refactor: fix feature cache mutation mismatch

frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    featureId: {
+        wordBreak: 'break-all',
+    },
+}));

frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { getCreateTogglePath } from 'utils/route-path-helpers';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { useStyles } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound.styles';
+import { IFeatureViewParams } from 'interfaces/params';
+import { useFeaturesArchive } from 'hooks/api/getters/useFeaturesArchive/useFeaturesArchive';
+
+export const FeatureNotFound = () => {
+    const { projectId, featureId } = useParams<IFeatureViewParams>();
+    const { archivedFeatures } = useFeaturesArchive();
+    const styles = useStyles();
+    const { uiConfig } = useUiConfig();
+
+    const createFeatureTogglePath = getCreateTogglePath(
+        projectId,
+        uiConfig.flags.E,
+        { name: featureId }
+    );
+
+    const isArchived = archivedFeatures.some(archivedFeature => {
+        return archivedFeature.name === featureId;
+    });
+
+    if (isArchived) {
+        return (
+            <p>
+                The feature{' '}
+                <strong className={styles.featureId}>{featureId}</strong> has
+                been archived. You can find it on the{' '}
+                <Link to={'/archive'}>archive page</Link>.
+            </p>
+        );
+    }
+
+    return (
+        <p>
+            The feature{' '}
+            <strong className={styles.featureId}>{featureId}</strong> does not
+            exist. Would you like to{' '}
+            <Link to={createFeatureTogglePath}>create it</Link>?
+        </p>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx

@@ -29,13 +29,12 @@ import { updateWeight } from '../../../../common/util';
 import cloneDeep from 'lodash.clonedeep';
 import useDeleteVariantMarkup from './FeatureVariantsListItem/useDeleteVariantMarkup';
 import PermissionButton from '../../../../common/PermissionButton/PermissionButton';
-import { mutate } from 'swr';
 import { formatUnknownError } from '../../../../../utils/format-unknown-error';
 
 const FeatureOverviewVariants = () => {
     const { hasAccess } = useContext(AccessContext);
     const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const { feature, featureCacheKey } = useFeature(projectId, featureId);
+    const { feature, refetchFeature } = useFeature(projectId, featureId);
     const [variants, setVariants] = useState<IFeatureVariant[]>([]);
     const [editing, setEditing] = useState(false);
     const { context } = useUnleashContext();
@@ -153,9 +152,8 @@ const FeatureOverviewVariants = () => {
         if (patch.length === 0) return;
 
         try {
-            const res = await patchFeatureVariants(projectId, featureId, patch);
+            await patchFeatureVariants(projectId, featureId, patch);
-            const { variants } = await res.json();
+            refetchFeature();
-            mutate(featureCacheKey, { ...feature, variants }, false);
             setToastData({
                 title: 'Updated variant',
                 confetti: true,
@@ -209,9 +207,8 @@ const FeatureOverviewVariants = () => {
 
         if (patch.length === 0) return;
         try {
-            const res = await patchFeatureVariants(projectId, featureId, patch);
+            await patchFeatureVariants(projectId, featureId, patch);
-            const { variants } = await res.json();
+            refetchFeature();
-            mutate(featureCacheKey, { ...feature, variants }, false);
             setToastData({
                 title: 'Updated variant',
                 type: 'success',

frontend/src/component/feature/FeatureView/FeatureView.styles.ts

@@ -44,7 +44,4 @@ export const useStyles = makeStyles(theme => ({
             flexDirection: 'column',
         },
     },
-    featureId: {
-        wordBreak: 'break-all',
-    },
 }));

frontend/src/component/feature/FeatureView/FeatureView.tsx

@@ -3,11 +3,11 @@ import React, { useState } from 'react';
 import { Archive, FileCopy, Label, WatchLater } from '@material-ui/icons';
 import { Link, Route, useHistory, useParams, Switch } from 'react-router-dom';
 import useFeatureApi from '../../../hooks/api/actions/useFeatureApi/useFeatureApi';
-import { useFeature } from '../../../hooks/api/getters/useFeature/useFeature';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import useProject from '../../../hooks/api/getters/useProject/useProject';
 import useTabs from '../../../hooks/useTabs';
 import useToast from '../../../hooks/useToast';
-import { IFeatureViewParams } from '../../../interfaces/params';
+import { IFeatureViewParams } from 'interfaces/params';
 import {
     CREATE_FEATURE,
     DELETE_FEATURE,
@@ -23,16 +23,14 @@ import { useStyles } from './FeatureView.styles';
 import { FeatureSettings } from './FeatureSettings/FeatureSettings';
 import useLoading from '../../../hooks/useLoading';
 import ConditionallyRender from '../../common/ConditionallyRender';
-import { getCreateTogglePath } from '../../../utils/route-path-helpers';
-import useUiConfig from '../../../hooks/api/getters/useUiConfig/useUiConfig';
 import StaleDialog from './FeatureOverview/StaleDialog/StaleDialog';
 import AddTagDialog from './FeatureOverview/AddTagDialog/AddTagDialog';
 import StatusChip from '../../common/StatusChip/StatusChip';
-import { formatUnknownError } from '../../../utils/format-unknown-error';
+import { formatUnknownError } from 'utils/format-unknown-error';
+import { FeatureNotFound } from 'component/feature/FeatureView/FeatureNotFound/FeatureNotFound';
 
 export const FeatureView = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const { feature, loading, error } = useFeature(projectId, featureId);
     const { refetch: projectRefetch } = useProject(projectId);
     const [openTagDialog, setOpenTagDialog] = useState(false);
     const { a11yProps } = useTabs(0);
@@ -42,10 +40,14 @@ export const FeatureView = () => {
     const [openStaleDialog, setOpenStaleDialog] = useState(false);
     const smallScreen = useMediaQuery(`(max-width:${500}px)`);
 
+    const { feature, loading, error, status } = useFeature(
+        projectId,
+        featureId
+    );
+
     const styles = useStyles();
     const history = useHistory();
     const ref = useLoading(loading);
-    const { uiConfig } = useUiConfig();
 
     const basePath = `/projects/${projectId}/features/${featureId}`;
 
@@ -110,25 +112,9 @@ export const FeatureView = () => {
         });
     };
 
-    const renderFeatureNotExist = () => {
+    if (status === 404) {
-        return (
+        return <FeatureNotFound />;
-            <div>
+    }
-                <p>
-                    The feature{' '}
-                    <strong className={styles.featureId}>{featureId}</strong>{' '}
-                    does not exist. Do you want to &nbsp;
-                    <Link
-                        to={getCreateTogglePath(projectId, uiConfig.flags.E, {
-                            name: featureId,
-                        })}
-                    >
-                        create it
-                    </Link>
-                    &nbsp;?
-                </p>
-            </div>
-        );
-    };
 
     return (
         <ConditionallyRender
@@ -242,7 +228,6 @@ export const FeatureView = () => {
                     />
                 </div>
             }
-            elseShow={renderFeatureNotExist()}
         />
     );
 };

frontend/src/hooks/api/getters/useFeature/useFeature.ts

@@ -1,18 +1,23 @@
 import useSWR, { mutate, SWRConfiguration } from 'swr';
 import { useCallback } from 'react';
-import { IFeatureToggle } from '../../../../interfaces/featureToggle';
 import { emptyFeature } from './emptyFeature';
 import handleErrorResponses from '../httpErrorResponseHandler';
-import { formatApiPath } from '../../../../utils/format-path';
+import { formatApiPath } from 'utils/format-path';
+import { IFeatureToggle } from 'interfaces/featureToggle';
 
 interface IUseFeatureOutput {
     feature: IFeatureToggle;
-    featureCacheKey: string;
     refetchFeature: () => void;
     loading: boolean;
+    status?: number;
     error?: Error;
 }
 
+interface IFeatureResponse {
+    status: number;
+    body?: IFeatureToggle;
+}
+
 export const useFeature = (
     projectId: string,
     featureId: string,
@@ -22,7 +27,7 @@ export const useFeature = (
         `api/admin/projects/${projectId}/features/${featureId}`
     );
 
-    const { data, error } = useSWR<IFeatureToggle>(
+    const { data, error } = useSWR<IFeatureResponse>(
         path,
         () => fetcher(path),
         options
@@ -33,16 +38,27 @@ export const useFeature = (
     }, [path]);
 
     return {
-        feature: data || emptyFeature,
+        feature: data?.body || emptyFeature,
-        featureCacheKey: path,
         refetchFeature,
         loading: !error && !data,
+        status: data?.status,
         error,
     };
 };
 
-const fetcher = async (path: string) => {
+const fetcher = async (path: string): Promise<IFeatureResponse> => {
-    return fetch(path)
+    const res = await fetch(path);
-        .then(handleErrorResponses('Feature toggle data'))
+
-        .then(res => res.json());
+    if (res.status === 404) {
+        return { status: 404 };
+    }
+
+    if (!res.ok) {
+        await handleErrorResponses('Feature toggle data')(res);
+    }
+
+    return {
+        status: res.status,
+        body: await res.json(),
+    };
 };