add strategy link to environment strategy dialog component

frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts

@@ -0,0 +1,15 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+export const useStyles = makeStyles(theme => ({
+    envName: {
+        display: 'inline-block',
+        width: '90px',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+    },
+    infoText: {
+        marginBottom: '10px',
+        fontSize: theme.fontSizes.bodySize,
+    },
+}));

frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import Dialogue from '../Dialogue';
+import { useStyles } from './EnvironmentStrategyDialog.styles';
+
+interface IEnvironmentStrategyDialogProps {
+    open: boolean;
+    featureId: string;
+    projectId: string;
+    onClose: () => void;
+    environmentName?: string;
+}
+const EnvironmentStrategyDialog = ({
+    open,
+    environmentName,
+    featureId,
+    projectId,
+    onClose,
+}: IEnvironmentStrategyDialogProps) => {
+    const styles = useStyles();
+    const history = useHistory();
+    const strategiesLink = `/projects/${projectId}/features2/${featureId}/strategies?environment=${environmentName}&addStrategy=true`;
+
+    return (
+        <Dialogue
+            open={open}
+            maxWidth="sm"
+            onClick={() => history.push(strategiesLink)}
+            onClose={() => onClose()}
+            title="You need to add a strategy to your toggle"
+            primaryButtonText="Take me directly to add strategy"
+            secondaryButtonText="Cancel"
+        >
+            <p className={styles.infoText}>
+                Before you can enable the toggle in the environment, you need to
+                add an execution strategy.
+            </p>
+            <p className={styles.infoText}>
+                You can add the execution strategy by selecting the toggle, open
+                the environment accordion and add the execution strategy.
+            </p>
+        </Dialogue>
+    );
+};
+
+export default EnvironmentStrategyDialog;

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

@@ -48,15 +48,4 @@ export const useStyles = makeStyles(theme => ({
         textDecoration: 'none',
         color: 'inherit',
     },
-    envName: {
-        display: 'inline-block',
-        width: '90px',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-    },
-    infoText:{
-        marginBottom: '10px',
-        fontSize: theme.fontSizes.bodySize,
-    },
 }));

frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx

@@ -17,7 +17,8 @@ import useProject from '../../../../hooks/api/getters/useProject/useProject';
 import { UPDATE_FEATURE } from '../../../providers/AccessProvider/permissions';
 import PermissionSwitch from '../../../common/PermissionSwitch/PermissionSwitch';
 import { Link } from 'react-router-dom';
-import Dialogue from '../../../common/Dialogue';
+import { ENVIRONMENT_STRATEGY_ERROR } from '../../../../constants/apiErrors';
+import EnvironmentStrategyDialog from '../../../common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 
 interface IFeatureToggleListNewItemProps {
     name: string;
@@ -48,6 +49,11 @@ const FeatureToggleListNewItem = ({
     const history = useHistory();
     const ref = useRef(null);
     const [showInfoBox, setShowInfoBox] = useState(false);
+    const [environmentName, setEnvironmentName] = useState('');
+
+    const closeInfoBox = () => {
+        setShowInfoBox(false);
+    };
 
     const onClick = (e: SyntheticEvent) => {
         if (!ref.current?.contains(e.target)) {
@@ -66,12 +72,16 @@ const FeatureToggleListNewItem = ({
                 refetch();
             })
             .catch(e => {
-                setShowInfoBox(true);
+                if (e.message === ENVIRONMENT_STRATEGY_ERROR) {
-                setToastData({
+                    setEnvironmentName(env.name);
-                    show: true,
+                    setShowInfoBox(true);
-                    type: 'error',
+                } else {
-                    text: e.message,
+                    setToastData({
-                });
+                        show: true,
+                        type: 'error',
+                        text: e.message,
+                    });
+                }
             });
     };
 
@@ -148,26 +158,13 @@ const FeatureToggleListNewItem = ({
                 })}
             </TableRow>
             {toast}
-
+            <EnvironmentStrategyDialog
-            <Dialogue
                 open={showInfoBox}
-                maxWidth="sm"
+                onClose={closeInfoBox}
-                onClick={() => console.log('hi')}
+                projectId={projectId}
-                onClose={() => setShowInfoBox(false)}
+                featureId={name}
-                title="You need to add a strategy to your toggle"
+                environmentName={environmentName}
-                primaryButtonText="Take me directly to add strategy"
+            />
-                secondaryButtonText="Cancel"
-            >
-                <p className={styles.infoText}>
-                    Before you can enable the toggle in the environment, you
-                    need to add an execution strategy.
-                </p>
-                <p className={styles.infoText}>
-                    You can add the execution strategy by selecting the toggle,
-                    open the environment accordion and add the execution
-                    strategy.
-                </p>
-            </Dialogue>
         </>
     );
 };

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx

@@ -1,4 +1,5 @@
 import { useParams } from 'react-router';
+import { ENVIRONMENT_STRATEGY_ERROR } from '../../../../../../constants/apiErrors';
 import useFeatureApi from '../../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
 import useFeature from '../../../../../../hooks/api/getters/useFeature/useFeature';
 import { TSetToastData } from '../../../../../../hooks/useToast';
@@ -13,6 +14,7 @@ interface IFeatureOverviewEnvSwitchProps {
     setToastData: TSetToastData;
     callback?: () => void;
     text?: string;
+    showInfoBox?: () => void;
 }
 
 const FeatureOverviewEnvSwitch = ({
@@ -20,6 +22,7 @@ const FeatureOverviewEnvSwitch = ({
     setToastData,
     callback,
     text,
+    showInfoBox,
 }: IFeatureOverviewEnvSwitchProps) => {
     const { featureId, projectId } = useParams<IFeatureViewParams>();
     const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
@@ -39,11 +42,15 @@ const FeatureOverviewEnvSwitch = ({
                 callback();
             }
         } catch (e: any) {
-            setToastData({
+            if (e.message === ENVIRONMENT_STRATEGY_ERROR) {
-                show: true,
+                showInfoBox(true);
-                type: 'error',
+            } else {
-                text: e.toString(),
+                setToastData({
-            });
+                    show: true,
+                    type: 'error',
+                    text: e.message,
+                });
+            }
         }
     };
 

frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx

@@ -1,9 +1,11 @@
 import { Tooltip } from '@material-ui/core';
+import { useState } from 'react';
 import { useParams } from 'react-router';
 import useFeatureApi from '../../../../../hooks/api/actions/useFeatureApi/useFeatureApi';
 import useFeature from '../../../../../hooks/api/getters/useFeature/useFeature';
 import useToast from '../../../../../hooks/useToast';
 import { IFeatureViewParams } from '../../../../../interfaces/params';
+import EnvironmentStrategyDialog from '../../../../common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog';
 import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch';
 import { useStyles } from './FeatureOverviewEnvSwitches.styles';
 
@@ -13,6 +15,12 @@ const FeatureOverviewEnvSwitches = () => {
     useFeatureApi();
     const { feature } = useFeature(projectId, featureId);
     const { toast, setToastData } = useToast();
+    const [showInfoBox, setShowInfoBox] = useState(false);
+    const [environmentName, setEnvironmentName] = useState('');
+
+    const closeInfoBox = () => {
+        setShowInfoBox(false);
+    };
 
     const renderEnvironmentSwitches = () => {
         return feature?.environments.map(env => {
@@ -21,6 +29,10 @@ const FeatureOverviewEnvSwitches = () => {
                     key={env.name}
                     env={env}
                     setToastData={setToastData}
+                    showInfoBox={() => {
+                        setEnvironmentName(env.name);
+                        setShowInfoBox(true);
+                    }}
                 />
             );
         });
@@ -38,6 +50,13 @@ const FeatureOverviewEnvSwitches = () => {
             </Tooltip>
             {renderEnvironmentSwitches()}
             {toast}
+            <EnvironmentStrategyDialog
+                open={showInfoBox}
+                onClose={closeInfoBox}
+                projectId={projectId}
+                featureId={featureId}
+                environmentName={environmentName}
+            />
         </div>
     );
 };

frontend/src/constants/apiErrors.ts

@@ -0,0 +1 @@
+export const ENVIRONMENT_STRATEGY_ERROR = 'You can not enable the environment before it has strategies';