feat: Bulk enable hints (#3802)

Unleash · May 18, 2023 · 92ffc38 · 92ffc38
1 parent 980332a
commit 92ffc38
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 8 deletions.
diff --git 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,19 +11,25 @@ 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[];
     projectId: string;
 }
 
 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
@@ -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,19 +11,25 @@ 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[];
     projectId: string;
 }
 
 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>
     );