From 580c22805a6d064c5f524ddbfd8690fadc645a2c Mon Sep 17 00:00:00 2001 From: Youssef Date: Mon, 6 Dec 2021 22:13:04 +0100 Subject: [PATCH] add strategy link to environment strategy dialog component --- .../EnvironmentStrategyDialog.styles.ts | 15 ++++++ .../EnvironmentStrategyDialog.tsx | 46 +++++++++++++++++ .../FeatureToggleListNew.styles.ts | 11 ----- .../FeatureToggleListNewItem.tsx | 49 +++++++++---------- .../FeatureOverviewEnvSwitch.tsx | 17 +++++-- .../FeatureOverviewEnvSwitches.tsx | 19 +++++++ frontend/src/constants/apiErrors.ts | 1 + 7 files changed, 116 insertions(+), 42 deletions(-) create mode 100644 frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts create mode 100644 frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx create mode 100644 frontend/src/constants/apiErrors.ts diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts new file mode 100644 index 0000000000..a5d0cdf0fa --- /dev/null +++ b/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, + }, +})); diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx new file mode 100644 index 0000000000..3907a2de81 --- /dev/null +++ b/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 ( + history.push(strategiesLink)} + onClose={() => onClose()} + title="You need to add a strategy to your toggle" + primaryButtonText="Take me directly to add strategy" + secondaryButtonText="Cancel" + > +

+ Before you can enable the toggle in the environment, you need to + add an execution strategy. +

+

+ You can add the execution strategy by selecting the toggle, open + the environment accordion and add the execution strategy. +

+ + ); +}; + +export default EnvironmentStrategyDialog; diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts index df4e0c3981..9834c942ab 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts +++ b/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, - }, })); diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx index 1beb3bb482..f97ee56a3b 100644 --- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx +++ b/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); - setToastData({ - show: true, - type: 'error', - text: e.message, - }); + if (e.message === ENVIRONMENT_STRATEGY_ERROR) { + setEnvironmentName(env.name); + setShowInfoBox(true); + } else { + setToastData({ + show: true, + type: 'error', + text: e.message, + }); + } }); }; @@ -148,26 +158,13 @@ const FeatureToggleListNewItem = ({ })} {toast} - - console.log('hi')} - onClose={() => setShowInfoBox(false)} - title="You need to add a strategy to your toggle" - primaryButtonText="Take me directly to add strategy" - secondaryButtonText="Cancel" - > -

- Before you can enable the toggle in the environment, you - need to add an execution strategy. -

-

- You can add the execution strategy by selecting the toggle, - open the environment accordion and add the execution - strategy. -

- + onClose={closeInfoBox} + projectId={projectId} + featureId={name} + environmentName={environmentName} + /> ); }; diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx index a3e7ca0d77..703c763630 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx +++ b/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(); const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } = @@ -39,11 +42,15 @@ const FeatureOverviewEnvSwitch = ({ callback(); } } catch (e: any) { - setToastData({ - show: true, - type: 'error', - text: e.toString(), - }); + if (e.message === ENVIRONMENT_STRATEGY_ERROR) { + showInfoBox(true); + } else { + setToastData({ + show: true, + type: 'error', + text: e.message, + }); + } } }; diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx index 01449a993a..a5f2f71613 100644 --- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx +++ b/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 = () => { {renderEnvironmentSwitches()} {toast} + ); }; diff --git a/frontend/src/constants/apiErrors.ts b/frontend/src/constants/apiErrors.ts new file mode 100644 index 0000000000..8703fabfbf --- /dev/null +++ b/frontend/src/constants/apiErrors.ts @@ -0,0 +1 @@ +export const ENVIRONMENT_STRATEGY_ERROR = 'You can not enable the environment before it has strategies';