Feat: add prod guard when toggling envs (#4774)

Adds the prod guard dialog when enabling/disabling production
environment

Closes # [1-1386]
(https://linear.app/unleash/issue/1-1386/production-guard-modal-for-enablingdisabling-environment-is-gone)



https://github.com/Unleash/unleash/assets/104830839/0041bfc8-872b-455c-b4fa-e03cc160c3e9

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>

frontend/package.json

@@ -20,7 +20,7 @@
     "start:demo": "UNLEASH_BASE_PATH=/demo/ UNLEASH_API=https://app.unleash-hosted.com/ yarn run start",
     "test": "tsc && NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest run",
     "test:snapshot": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" yarn test -u",
-    "test:watch": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest watch",
+    "test:watch": "NODE_OPTIONS=\"${NODE_OPTIONS} --no-experimental-fetch\" vitest watch FeatureToggleSwitch",
     "lint": "eslint --fix ./src",
     "lint:check": "eslint ./src",
     "fmt": "prettier src --write --loglevel warn",

frontend/src/component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch.tsx

@@ -1,4 +1,4 @@
-import { useState, VFC } from 'react';
+import React, { useState, VFC } from 'react';
 import { Box, styled } from '@mui/material';
 import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
 import { UPDATE_FEATURE_ENVIRONMENT } from 'component/providers/AccessProvider/permissions';
@@ -14,6 +14,10 @@ import { useChangeRequestToggle } from 'hooks/useChangeRequestToggle';
 import { EnableEnvironmentDialog } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/EnableEnvironmentDialog';
 import { UpdateEnabledMessage } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestMessages/UpdateEnabledMessage';
 import { ChangeRequestDialogue } from 'component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog';
+import {
+    FeatureStrategyProdGuard,
+    useFeatureStrategyProdGuard,
+} from '../../../../feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard';
 
 const StyledBoxContainer = styled(Box)<{ 'data-testid': string }>(() => ({
     mx: 'auto',
@@ -42,7 +46,7 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
     onToggle,
     onError,
 }) => {
-    const { toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
+    const { loading, toggleFeatureEnvironmentOn, toggleFeatureEnvironmentOff } =
         useFeatureApi();
     const { setToastData, setToastApiError } = useToast();
     const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
@@ -57,6 +61,11 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
 
     const [showEnabledDialog, setShowEnabledDialog] = useState(false);
     const { feature } = useFeature(projectId, featureId);
+    const enableProdGuard = useFeatureStrategyProdGuard(
+        feature,
+        environmentName
+    );
+    const [showProdGuard, setShowProdGuard] = useState(false);
 
     const disabledStrategiesCount =
         feature?.environments
@@ -113,9 +122,9 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
         }
     };
 
-    const onClick = async (e: React.MouseEvent) => {
+    const handleClick = async () => {
+        setShowProdGuard(false);
         if (isChangeRequestConfigured(environmentName)) {
-            e.preventDefault();
             if (featureHasOnlyDisabledStrategies()) {
                 setShowEnabledDialog(true);
             } else {
@@ -140,6 +149,18 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
         }
     };
 
+    const onClick = async () => {
+        console.log('*********');
+        console.log(enableProdGuard);
+        console.log(isChangeRequestConfigured(environmentName));
+        console.log('*********');
+        if (enableProdGuard && !isChangeRequestConfigured(environmentName)) {
+            setShowProdGuard(true);
+        } else {
+            await handleClick();
+        }
+    };
+
     const onActivateStrategies = async () => {
         if (isChangeRequestConfigured(environmentName)) {
             onChangeRequestToggle(
@@ -199,6 +220,7 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
                     permission={UPDATE_FEATURE_ENVIRONMENT}
                     inputProps={{ 'aria-label': environmentName }}
                     onClick={onClick}
+                    data-testId={'permission-switch'}
                 />
             </StyledBoxContainer>
             <EnableEnvironmentDialog
@@ -222,6 +244,13 @@ export const FeatureToggleSwitch: VFC<IFeatureToggleSwitchProps> = ({
                     />
                 }
             />
+            <FeatureStrategyProdGuard
+                open={showProdGuard}
+                onClose={() => setShowProdGuard(false)}
+                onClick={handleClick}
+                loading={loading}
+                label={`${isChecked ? 'Disable' : 'Enable'} Environment`}
+            />
         </>
     );
 };