From b5072928b3945fe70f5144bc26b6659020fce862 Mon Sep 17 00:00:00 2001
From: Youssef <khedher.youssef@hotmail.fr>
Date: Fri, 15 Oct 2021 10:52:35 +0100
Subject: [PATCH] fix:handle non-existing feature toggle

---
 frontend/src/component/App.tsx                |  37 ++--
 .../feature/FeatureView2/FeatureView2.tsx     | 176 ++++++++++--------
 2 files changed, 126 insertions(+), 87 deletions(-)

diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
index f6499be5a2..9ed8fce469 100644
--- a/frontend/src/component/App.tsx
+++ b/frontend/src/component/App.tsx
@@ -75,17 +75,32 @@ const App = ({ location, user, fetchUiBootstrap, feedback }: IAppProps) => {
     };
 
     return (
-        <SWRConfig value={{
-            onError: (error) => {
-                if (!isUnauthorized()) {
-                    setToastData({
-                        show: true,
-                        type: 'error',
-                        text: error.message,
-                    });
-                }
-            },
-        }}>
+        <SWRConfig
+            value={{
+                onErrorRetry: (
+                    error,
+                    _key,
+                    _config,
+                    revalidate,
+                    { retryCount }
+                ) => {
+                    // Never retry on 404.
+                    if (error.status === 404) {
+                        return error;
+                    }
+                    setTimeout(() => revalidate({ retryCount }), 5000);
+                },
+                onError: error => {
+                    if (!isUnauthorized()) {
+                        setToastData({
+                            show: true,
+                            type: 'error',
+                            text: error.message,
+                        });
+                    }
+                },
+            }}
+        >
             <div className={styles.container}>
                 <LayoutPicker location={location}>
                     <Switch>
diff --git a/frontend/src/component/feature/FeatureView2/FeatureView2.tsx b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
index 28715ba501..5db9e05518 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureView2.tsx
@@ -18,10 +18,12 @@ import FeatureVariants from './FeatureVariants/FeatureVariants';
 import { useStyles } from './FeatureView2.styles';
 import FeatureSettings from './FeatureSettings/FeatureSettings';
 import useLoading from '../../../hooks/useLoading';
+import ConditionallyRender from '../../common/ConditionallyRender';
+import { getCreateTogglePath } from '../../../utils/route-path-helpers';
 
 const FeatureView2 = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const { feature, loading } = useFeature(projectId, featureId);
+    const { feature, loading, error } = useFeature(projectId, featureId);
     const { a11yProps } = useTabs(0);
     const { archiveFeatureToggle } = useFeatureApi();
     const { toast, setToastData } = useToast();
@@ -97,82 +99,104 @@ const FeatureView2 = () => {
         });
     };
 
-    return (
-        <div ref={ref}>
-            <div className={styles.header}>
-                <div className={styles.innerContainer}>
-                    <h2 className={styles.featureViewHeader} data-loading>
-                        {feature.name}
-                    </h2>
-                    <div className={styles.actions}>
-                        <PermissionIconButton
-                            permission={UPDATE_FEATURE}
-                            tooltip="Copy"
-                            data-loading
-                            component={Link}
-                            to={`/projects/${projectId}/features2/${featureId}/strategies/copy`}
-                        >
-                            <FileCopy />
-                        </PermissionIconButton>
-                        <PermissionIconButton
-                            permission={UPDATE_FEATURE}
-                            tooltip="Archive feature toggle"
-                            data-loading
-                            onClick={() => setShowDelDialog(true)}
-                        >
-                            <Archive />
-                        </PermissionIconButton>
-                    </div>
-                </div>
-                <div className={styles.separator} />
-                <div className={styles.tabContainer}>
-                    <Tabs
-                        value={history.location.pathname}
-                        indicatorColor="primary"
-                        textColor="primary"
-                        className={styles.tabNavigation}
-                    >
-                        {renderTabs()}
-                    </Tabs>
-                </div>
+    const renderFeatureNotExist = () => {
+        return (
+            <div>
+                <p>
+                    The feature <strong>{featureId} </strong>does not exist. Do
+                    you want to &nbsp;
+                    <Link to={getCreateTogglePath(projectId)}>create it</Link>
+                    &nbsp;?
+                </p>
             </div>
-            <Route
-                exact
-                path={`/projects/:projectId/features2/:featureId`}
-                component={FeatureOverview}
-            />
-            <Route
-                path={`/projects/:projectId/features2/:featureId/strategies`}
-                component={FeatureStrategies}
-            />
-            <Route
-                path={`/projects/:projectId/features2/:featureId/metrics`}
-                component={FeatureMetrics}
-            />
-            <Route
-                path={`/projects/:projectId/features2/:featureId/logs`}
-                component={FeatureLog}
-            />
-            <Route
-                path={`/projects/:projectId/features2/:featureId/variants`}
-                component={FeatureVariants}
-            />
-            <Route
-                path={`/projects/:projectId/features2/:featureId/settings`}
-                component={FeatureSettings}
-            />
-            <Dialogue
-                onClick={() => archiveToggle()}
-                open={showDelDialog}
-                onClose={handleCancel}
-                primaryButtonText="Archive toggle"
-                secondaryButtonText="Cancel"
-                title="Archive feature toggle"
-            >
-                Are you sure you want to archive this feature toggle?
-            </Dialogue>
-            {toast}
-        </div>
+        );
+    };
+
+    return (
+        <ConditionallyRender
+            condition={error === undefined}
+            show={
+                <div ref={ref}>
+                    <div className={styles.header}>
+                        <div className={styles.innerContainer}>
+                            <h2
+                                className={styles.featureViewHeader}
+                                data-loading
+                            >
+                                {feature.name}
+                            </h2>
+                            <div className={styles.actions}>
+                                <PermissionIconButton
+                                    permission={UPDATE_FEATURE}
+                                    tooltip="Copy"
+                                    data-loading
+                                    component={Link}
+                                    to={`/projects/${projectId}/features2/${featureId}/strategies/copy`}
+                                >
+                                    <FileCopy />
+                                </PermissionIconButton>
+                                <PermissionIconButton
+                                    permission={UPDATE_FEATURE}
+                                    tooltip="Archive feature toggle"
+                                    data-loading
+                                    onClick={() => setShowDelDialog(true)}
+                                >
+                                    <Archive />
+                                </PermissionIconButton>
+                            </div>
+                        </div>
+                        <div className={styles.separator} />
+                        <div className={styles.tabContainer}>
+                            <Tabs
+                                value={history.location.pathname}
+                                indicatorColor="primary"
+                                textColor="primary"
+                                className={styles.tabNavigation}
+                            >
+                                {renderTabs()}
+                            </Tabs>
+                        </div>
+                    </div>
+                    <Route
+                        exact
+                        path={`/projects/:projectId/features2/:featureId`}
+                        component={FeatureOverview}
+                    />
+                    <Route
+                        path={`/projects/:projectId/features2/:featureId/strategies`}
+                        component={FeatureStrategies}
+                    />
+                    <Route
+                        path={`/projects/:projectId/features2/:featureId/metrics`}
+                        component={FeatureMetrics}
+                    />
+                    <Route
+                        path={`/projects/:projectId/features2/:featureId/logs`}
+                        component={FeatureLog}
+                    />
+                    <Route
+                        path={`/projects/:projectId/features2/:featureId/variants`}
+                        component={FeatureVariants}
+                    />
+                    <Route
+                        path={`/projects/:projectId/features2/:featureId/settings`}
+                        component={FeatureSettings}
+                    />
+                    <Dialogue
+                        onClick={() => archiveToggle()}
+                        open={showDelDialog}
+                        onClose={handleCancel}
+                        primaryButtonText="Archive toggle"
+                        secondaryButtonText="Cancel"
+                        title="Archive feature toggle"
+                    >
+                        Are you sure you want to archive this feature toggle?
+                    </Dialogue>
+                    {toast}
+                </div>
+            }
+            elseShow={renderFeatureNotExist()}
+        />
     );
 };