feat: add hasStrategies and hasEnabledStrategies on feature environme…

…nts (#5012)
Unleash · Oct 20, 2023 · 6fab663 · 6fab663
1 parent 249b9e5
commit 6fab663
Show file tree

Hide file tree

Showing 21 changed files with 1,482 additions and 321 deletions.
diff --git a/...c/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx b/...c/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
@@ -1,9 +1,10 @@
+import { useState } from 'react';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { Alert } from '@mui/material';
 import { Checkbox, FormControlLabel } from '@mui/material';
 import { PRODUCTION } from 'constants/environmentTypes';
 import { IFeatureToggle } from 'interfaces/featureToggle';
-import { createPersistentGlobalStateHook } from 'hooks/usePersistentGlobalState';
+import { createLocalStorage } from 'utils/createLocalStorage';
 
 interface IFeatureStrategyProdGuardProps {
     open: boolean;
@@ -24,10 +25,13 @@ export const FeatureStrategyProdGuard = ({
     label,
     loading,
 }: IFeatureStrategyProdGuardProps) => {
-    const [settings, setSettings] = useFeatureStrategyProdGuardSettings();
+    const { value: settings, setValue: setSettings } =
+        getFeatureStrategyProdGuardSettings();
+    const [hide, setHide] = useState(settings.hide);
 
     const toggleHideSetting = () => {
         setSettings((prev) => ({ hide: !prev.hide }));
+        setHide((prev) => !prev);
     };
 
     return (
@@ -50,10 +54,7 @@ export const FeatureStrategyProdGuard = ({
             <FormControlLabel
                 label="Don't show again"
                 control={
-                    <Checkbox
-                        checked={settings.hide}
-                        onChange={toggleHideSetting}
-                    />
+                    <Checkbox checked={hide} onChange={toggleHideSetting} />
                 }
             />
         </Dialogue>
@@ -62,27 +63,35 @@ export const FeatureStrategyProdGuard = ({
 
 // Check if the prod guard dialog should be enabled.
 export const useFeatureStrategyProdGuard = (
-    feature: IFeatureToggle,
-    environmentId: string,
+    featureOrType: string | IFeatureToggle,
+    environmentId?: string,
 ): boolean => {
-    const [settings] = useFeatureStrategyProdGuardSettings();
-
-    const environment = feature.environments.find((environment) => {
-        return environment.name === environmentId;
-    });
+    const { value: settings } = getFeatureStrategyProdGuardSettings();
 
     if (settings.hide) {
         return false;
     }
 
-    return environment?.type === PRODUCTION;
+    if (typeof featureOrType === 'string') {
+        return featureOrType === PRODUCTION;
+    }
+
+    return featureOrType?.environments?.some(
+        (environment) =>
+            environment.name === environmentId &&
+            environment.type === PRODUCTION,
+    );
 };
 
 // Store the "always hide" prod guard dialog setting in localStorage.
 const localStorageKey = 'useFeatureStrategyProdGuardSettings:v2';
 
-const useFeatureStrategyProdGuardSettings =
-    createPersistentGlobalStateHook<IFeatureStrategyProdGuardSettings>(
-        localStorageKey,
-        { hide: false },
-    );
+const getFeatureStrategyProdGuardSettings = () =>
+    createLocalStorage<IFeatureStrategyProdGuardSettings>(localStorageKey, {
+        hide: false,
+    });
+
+export const isProdGuardEnabled = (type: string) => {
+    const { value: settings } = getFeatureStrategyProdGuardSettings();
+    return type === PRODUCTION && !settings.hide;
+};
diff --git a/...tureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/ChildrenTooltip.tsx b/...tureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelDetails/ChildrenTooltip.tsx
@@ -10,7 +10,10 @@ export const ChildrenTooltip: FC<{
         tooltip={
             <>
                 {childFeatures.map((child) => (
-                    <StyledLink to={`/projects/${project}/features/${child}`}>
+                    <StyledLink
+                        key={`${project}-${child}`}
+                        to={`/projects/${project}/features/${child}`}
+                    >
                         <div>{child}</div>
                     </StyledLink>
                 ))}

diff --git a/...s/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx b/...s/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentSwitch.tsx
@@ -4,7 +4,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { styled } from '@mui/material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { FeatureOverviewSidePanelEnvironmentHider } from './FeatureOverviewSidePanelEnvironmentHider';
-import { FeatureToggleSwitch } from 'component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/FeatureToggleSwitch';
+import { FeatureToggleSwitch } from 'component/project/Project/ProjectFeatureToggles/FeatureToggleSwitch/LegacyFeatureToggleSwitch';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     marginLeft: theme.spacing(-1.5),

diff --git a/...ronmentSwitch/EnableEnvironmentDialog.tsx → ...ronmentDialog/EnableEnvironmentDialog.tsx b/...ronmentSwitch/EnableEnvironmentDialog.tsx → ...ronmentDialog/EnableEnvironmentDialog.tsx
@@ -4,6 +4,7 @@ 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';
 
 interface IEnableEnvironmentDialogProps {
     isOpen: boolean;
@@ -12,7 +13,7 @@ interface IEnableEnvironmentDialogProps {
     onClose: () => void;
     environment?: string;
     showBanner?: boolean;
-    disabledStrategiesCount: number;
+    disabledStrategiesCount?: number;
 }
 
 export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
@@ -21,7 +22,7 @@ export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
     onActivateDisabledStrategies,
     onClose,
     environment,
-    disabledStrategiesCount = 0,
+    disabledStrategiesCount,
 }) => {
     const projectId = useRequiredPathParam('projectId');
 
@@ -61,8 +62,20 @@ export const EnableEnvironmentDialog: FC<IEnableEnvironmentDialogProps> = ({
                 color='text.primary'
                 sx={{ mb: (theme) => theme.spacing(2) }}
             >
-                The feature toggle has {disabledStrategiesCount} disabled
-                {disabledStrategiesCount === 1 ? ' strategy' : ' strategies'}.
+                <ConditionallyRender
+                    condition={disabledStrategiesCount !== undefined}
+                    show={
+                        <>
+                            The feature toggle has {disabledStrategiesCount}{' '}
+                            disabled
+                            {disabledStrategiesCount === 1
+                                ? ' strategy'
+                                : ' strategies'}
+                            .
+                        </>
+                    }
+                    elseShow={'The feature toggle has disabled strategies.'}
+                />
             </Typography>
             <Typography variant='body1' color='text.primary'>
                 You can choose to enable all the disabled strategies or you can