feat: add dont show again when update prod env (#588)

* feat: add dont show again when update prod env

* fix: remove unused dependency

* fix: update key

Co-authored-by: Fredrik Oseberg <fredrik.no@gmail.com>

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesConfigure/FeatureStrategiesConfigure.tsx

@@ -9,7 +9,9 @@ import FeatureStrategyAccordion from '../../FeatureStrategyAccordion/FeatureStra
 import useFeatureStrategyApi from '../../../../../../hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi';
 
 import { useStyles } from './FeatureStrategiesConfigure.styles';
-import FeatureStrategiesProductionGuard from '../FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard';
+import FeatureStrategiesProductionGuard, {
+    FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING,
+} from '../FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard';
 import { IFeatureViewParams } from '../../../../../../interfaces/params';
 import cloneDeep from 'lodash.clonedeep';
 import { PRODUCTION } from '../../../../../../constants/environmentTypes';
@@ -26,7 +28,10 @@ const FeatureStrategiesConfigure = () => {
     const { refetch } = useFeature(projectId, featureId);
 
     const [productionGuard, setProductionGuard] = useState(false);
-
+    const dontShow = JSON.parse(
+        localStorage.getItem(FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING) ||
+            'false'
+    );
     const styles = useStyles();
     const {
         activeEnvironment,
@@ -51,7 +56,7 @@ const FeatureStrategiesConfigure = () => {
     };
 
     const resolveSubmit = () => {
-        if (activeEnvironment.type === PRODUCTION) {
+        if (activeEnvironment.type === PRODUCTION && !dontShow) {
             setProductionGuard(true);
             return;
         }

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesEnvironmentList/FeatureStrategiesEnvironmentList.tsx

@@ -17,6 +17,7 @@ import { getStrategyObject } from '../../../../../../utils/get-strategy-object';
 
 import { useStyles } from './FeatureStrategiesEnvironmentList.styles';
 import FeatureOverviewEnvSwitch from '../../../FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch';
+import { FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING } from '../FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard';
 
 interface IFeatureStrategiesEnvironmentListProps {
     strategies: IFeatureStrategy[];
@@ -31,6 +32,10 @@ const FeatureStrategiesEnvironmentList = ({
 }: IFeatureStrategiesEnvironmentListProps) => {
     const styles = useStyles();
     const { strategies: selectableStrategies } = useStrategies();
+    const dontShow = JSON.parse(
+        localStorage.getItem(FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING) ||
+            'false'
+    );
 
     const {
         activeEnvironmentsRef,
@@ -94,7 +99,7 @@ const FeatureStrategiesEnvironmentList = ({
     });
 
     const resolveUpdateStrategy = (strategy: IFeatureStrategy, callback) => {
-        if (activeEnvironmentsRef?.current?.type === PRODUCTION) {
+        if (activeEnvironmentsRef?.current?.type === PRODUCTION && !dontShow) {
             setProductionGuard({ show: true, strategy, callback });
             return;
         }

frontend/src/component/feature/FeatureView2/FeatureStrategies/FeatureStrategiesEnvironments/FeatureStrategiesProductionGuard/FeatureStrategiesProductionGuard.tsx

@@ -1,6 +1,11 @@
+import { Checkbox, FormControlLabel } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
+import { useState } from 'react';
 import Dialogue from '../../../../../common/Dialogue';
 
+export const FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING =
+    'FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING';
+
 interface IFeatureStrategiesProductionGuard {
     show: boolean;
     onClick: () => void;
@@ -16,6 +21,19 @@ const FeatureStrategiesProductionGuard = ({
     primaryButtonText,
     loading,
 }: IFeatureStrategiesProductionGuard) => {
+    const [checked, setIsChecked] = useState(
+        JSON.parse(
+            localStorage.getItem(FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING) ||
+                'false'
+        )
+    );
+    const handleOnchange = () => {
+        setIsChecked(!checked);
+        localStorage.setItem(
+            FEATURE_STRATEGY_PRODUCTION_GUARD_SETTING,
+            (!checked).toString()
+        );
+    };
     return (
         <Dialogue
             title="Changing production environment!"
@@ -30,10 +48,15 @@ const FeatureStrategiesProductionGuard = ({
                 WARNING. You are about to make changes to a production
                 environment. These changes will affect your customers.
             </Alert>
-
             <p style={{ marginTop: '1rem' }}>
                 Are you sure you want to proceed?
             </p>
+            <FormControlLabel
+                label="Don't show again"
+                control={
+                    <Checkbox checked={checked} onChange={handleOnchange} />
+                }
+            />
         </Dialogue>
     );
 };