From 47e214d96f24990fdc3dc52669e0779b1d2c21b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Fri, 24 Nov 2023 14:57:03 +0000
Subject: [PATCH] fix: enable toggle with disabled strategies dialog (#5416)

https://linear.app/unleash/issue/UNL-283/improve-dialog-when-there-are-disabled-strategies-and-we-want-to

Improves the "enable toggle when there are disabled strategies" dialog.
Also implements passing in the missing `disabledStrategiesCount`
property to the dialog.


![image](https://github.com/Unleash/unleash/assets/14320932/95d9110e-8c1c-47ce-8e1b-389607115a54)
---
 .../EnableEnvironmentDialog.tsx               | 69 +++++++++++--------
 .../useFeatureToggleSwitch.tsx                |  2 +
 2 files changed, 43 insertions(+), 28 deletions(-)

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<IEnableEnvironmentDialogProps> = ({
@@ -22,10 +27,22 @@ export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
     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 (
         <Dialogue
             open={isOpen}
@@ -34,6 +51,7 @@ export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
                 <>
                     <PermissionButton
                         type='button'
+                        variant='outlined'
                         permission={UPDATE_FEATURE}
                         projectId={projectId}
                         environmentId={environment}
@@ -43,7 +61,7 @@ export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
                     </PermissionButton>
                     <PermissionButton
                         type='button'
-                        variant={'text'}
+                        variant='outlined'
                         permission={UPDATE_FEATURE}
                         projectId={projectId}
                         environmentId={environment}
@@ -54,33 +72,28 @@ export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
                 </>
             }
             onClose={onClose}
-            title='Enable feature toggle'
+            title={`Enable feature toggle in ${environment}`}
             fullWidth
         >
-            <Typography
-                variant='body1'
-                color='text.primary'
-                sx={{ mb: (theme) => theme.spacing(2) }}
-            >
-                <ConditionallyRender
-                    condition={disabledStrategiesCount !== undefined}
-                    show={
-                        <>
-                            The feature toggle has {disabledStrategiesCount}{' '}
-                            disabled
-                            {disabledStrategiesCount === 1
-                                ? ' strategy'
-                                : ' strategies'}
-                            .
-                        </>
-                    }
-                    elseShow={'The feature toggle has disabled strategies.'}
-                />
+            <Typography sx={{ mb: (theme) => theme.spacing(3) }}>
+                A feature toggle cannot be enabled without an enabled strategy.
             </Typography>
-            <Typography variant='body1' color='text.primary'>
-                You can choose to enable all the disabled strategies or you can
-                add the default strategy to enable this feature toggle.
+            <Typography>
+                To enable this feature toggle you can choose to:
             </Typography>
+            <StyledList>
+                <li>
+                    <Typography>
+                        <strong>Add the default strategy</strong>
+                    </Typography>
+                </li>
+                <li>
+                    <Typography>
+                        <strong>Enable all the disabled strategies</strong>{' '}
+                        (this feature toggle has {disabledStrategiesText})
+                    </Typography>
+                </li>
+            </StyledList>
         </Dialogue>
     );
 };
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<ComponentProps<typeof EnableEnvironmentDialog>>({
             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,