diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/EnableEnvironmentDialog/EnableEnvironmentDialog.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/EnableEnvironmentDialog/EnableEnvironmentDialog.tsx index a11623974c..378c67d128 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/EnableEnvironmentDialog/EnableEnvironmentDialog.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/EnableEnvironmentDialog/EnableEnvironmentDialog.tsx @@ -1,10 +1,15 @@ import { FC } from 'react'; -import { Typography } from '@mui/material'; +import { Typography, styled } from '@mui/material'; import { Dialogue } from 'component/common/Dialogue/Dialogue'; import { useRequiredPathParam } from 'hooks/useRequiredPathParam'; import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; + +const StyledList = styled('ul')(({ theme }) => ({ + margin: theme.spacing(1), + paddingLeft: theme.spacing(2), +})); interface IEnableEnvironmentDialogProps { isOpen: boolean; @@ -12,8 +17,8 @@ interface IEnableEnvironmentDialogProps { onAddDefaultStrategy: () => void; onClose: () => void; environment?: string; + featureId: string; showBanner?: boolean; - disabledStrategiesCount?: number; } export const EnableEnvironmentDialog: FC = ({ @@ -22,10 +27,22 @@ export const EnableEnvironmentDialog: FC = ({ onActivateDisabledStrategies, onClose, environment, - disabledStrategiesCount, + featureId, }) => { const projectId = useRequiredPathParam('projectId'); + const { feature } = useFeature(projectId, featureId); + + const disabledStrategiesCount = feature.environments + ?.find(({ name }) => name === environment) + ?.strategies?.filter(({ disabled }) => disabled).length; + + const disabledStrategiesText = disabledStrategiesCount + ? disabledStrategiesCount === 1 + ? '1 disabled strategy' + : `${disabledStrategiesCount} disabled strategies` + : 'disabled strategies'; + return ( = ({ <> = ({ = ({ } onClose={onClose} - title='Enable feature toggle' + title={`Enable feature toggle in ${environment}`} fullWidth > - theme.spacing(2) }} - > - - The feature toggle has {disabledStrategiesCount}{' '} - disabled - {disabledStrategiesCount === 1 - ? ' strategy' - : ' strategies'} - . - - } - elseShow={'The feature toggle has disabled strategies.'} - /> + theme.spacing(3) }}> + A feature toggle cannot be enabled without an enabled strategy. - - You can choose to enable all the disabled strategies or you can - add the default strategy to enable this feature toggle. + + To enable this feature toggle you can choose to: + +
  • + + Add the default strategy + +
  • +
  • + + Enable all the disabled strategies{' '} + (this feature toggle has {disabledStrategiesText}) + +
  • +
    ); }; diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx index 7f8248f21e..bcb769207d 100644 --- a/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx +++ b/frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/useFeatureToggleSwitch.tsx @@ -46,6 +46,7 @@ export const useFeatureToggleSwitch: UseFeatureToggleSwitchType = ( useState>({ isOpen: false, environment: '', + featureId: '', onClose: () => {}, onActivateDisabledStrategies: () => {}, onAddDefaultStrategy: () => {}, @@ -107,6 +108,7 @@ export const useFeatureToggleSwitch: UseFeatureToggleSwitchType = ( setEnableEnvironmentDialogState({ isOpen: true, environment: config.environmentName, + featureId: config.featureId, onClose: () => { setEnableEnvironmentDialogState((prev) => ({ ...prev,