From 92ffc387f3869aa41c8416338f054d635bef8865 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 18 May 2023 12:24:31 +0200
Subject: [PATCH] feat: Bulk enable hints (#3802)

---
 .../FeatureToggleList/BulkDisableDialog.tsx   | 40 +++++++++++++++++--
 .../FeatureToggleList/BulkEnableDialog.tsx    | 40 +++++++++++++++++--
 2 files changed, 72 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx b/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx
index 41f213b69b4..18c5ec986ea 100644
--- a/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/BulkDisableDialog.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Box, styled, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { Alert, Box, styled, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import useToast from 'hooks/useToast';
@@ -11,10 +11,11 @@ import useProject from 'hooks/api/getters/useProject/useProject';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IExportDialogProps {
     showExportDialog: boolean;
-    data: Pick<FeatureSchema, 'name'>[];
+    data: Pick<FeatureSchema, 'name' | 'environments'>[];
     onClose: () => void;
     onConfirm?: () => void;
     environments: string[];
@@ -22,8 +23,13 @@ interface IExportDialogProps {
 }
 
 const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
-    minWidth: '250px',
+    minWidth: '450px',
     marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1.5),
+}));
+
+const SpacedAlert = styled(Alert)(({ theme }) => ({
+    marginBottom: theme.spacing(1.5),
 }));
 
 export const BulkDisableDialog = ({
@@ -42,6 +48,12 @@ export const BulkDisableDialog = ({
     const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(projectId);
+    const alreadyDisabledCount = data.filter(
+        feature =>
+            feature.environments?.find(
+                environment => selected === environment.name
+            )?.enabled === false
+    ).length;
 
     const getOptions = () =>
         environments.map(env => ({
@@ -113,6 +125,26 @@ export const BulkDisableDialog = ({
                     value={selected}
                     onChange={(option: string) => setSelected(option)}
                 />
+                <ConditionallyRender
+                    condition={isChangeRequestConfigured(selected)}
+                    show={
+                        <SpacedAlert severity="warning">
+                            Change requests are enabled for this environment.
+                        </SpacedAlert>
+                    }
+                />
+                <ConditionallyRender
+                    condition={alreadyDisabledCount > 0}
+                    show={
+                        <SpacedAlert severity="info">
+                            {alreadyDisabledCount} feature{' '}
+                            {alreadyDisabledCount > 1
+                                ? 'toggles are '
+                                : 'toggle is '}
+                            already disabled.
+                        </SpacedAlert>
+                    }
+                />
             </Box>
         </Dialogue>
     );
diff --git a/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx b/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx
index d3dca03de12..9a98ab5f04d 100644
--- a/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/BulkEnableDialog.tsx
@@ -1,5 +1,5 @@
-import { useState } from 'react';
-import { Box, styled, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { Alert, Box, styled, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import useToast from 'hooks/useToast';
@@ -11,10 +11,11 @@ import useProject from 'hooks/api/getters/useProject/useProject';
 import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IExportDialogProps {
     showExportDialog: boolean;
-    data: Pick<FeatureSchema, 'name'>[];
+    data: Pick<FeatureSchema, 'name' | 'environments'>[];
     onClose: () => void;
     onConfirm?: () => void;
     environments: string[];
@@ -22,8 +23,13 @@ interface IExportDialogProps {
 }
 
 const StyledSelect = styled(GeneralSelect)(({ theme }) => ({
-    minWidth: '250px',
+    minWidth: '450px',
     marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(1.5),
+}));
+
+const SpacedAlert = styled(Alert)(({ theme }) => ({
+    marginBottom: theme.spacing(1.5),
 }));
 
 export const BulkEnableDialog = ({
@@ -42,6 +48,12 @@ export const BulkEnableDialog = ({
     const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
     const { refetch: refetchChangeRequests } =
         usePendingChangeRequests(projectId);
+    const alreadyEnabledCount = data.filter(
+        feature =>
+            feature.environments?.find(
+                environment => selected === environment.name
+            )?.enabled === true
+    ).length;
 
     const getOptions = () =>
         environments.map(env => ({
@@ -114,6 +126,26 @@ export const BulkEnableDialog = ({
                     value={selected}
                     onChange={(option: string) => setSelected(option)}
                 />
+                <ConditionallyRender
+                    condition={isChangeRequestConfigured(selected)}
+                    show={
+                        <SpacedAlert severity="warning">
+                            Change requests are enabled for this environment.
+                        </SpacedAlert>
+                    }
+                />
+                <ConditionallyRender
+                    condition={alreadyEnabledCount > 0}
+                    show={
+                        <SpacedAlert severity="info">
+                            {alreadyEnabledCount} feature{' '}
+                            {alreadyEnabledCount > 1
+                                ? 'toggles are '
+                                : 'toggle is '}
+                            already enabled.
+                        </SpacedAlert>
+                    }
+                />
             </Box>
         </Dialogue>
     );