chore: add flag, show single button if enabled

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -21,6 +21,7 @@ import { formatUnknownError } from 'utils/formatUnknownError';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ReleasePlanReviewDialog } from '../../FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx';
 import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -160,6 +161,24 @@ export const FeatureStrategyMenu = ({
 
     return (
         <StyledStrategyMenu onClick={(event) => event.stopPropagation()}>
+            {newStrategyModalEnabled ? (
+                <PermissionButton
+                    data-testid='ADD_STRATEGY_BUTTON'
+                    permission={CREATE_FEATURE_STRATEGY}
+                    projectId={projectId}
+                    environmentId={environmentId}
+                    onClick={openMoreStrategies}
+                    aria-labelledby={dialogId}
+                    variant={variant}
+                    sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
+                    disabled={Boolean(disableReason)}
+                    tooltipProps={{
+                        title: disableReason ? disableReason : undefined,
+                    }}
+                >
+                    Add strategy
+                </PermissionButton>
+            ) : (
                 <>
                     {displayReleasePlanButton ? (
                         <PermissionButton
@@ -173,7 +192,9 @@ export const FeatureStrategyMenu = ({
                             sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
                             disabled={Boolean(disableReason)}
                             tooltipProps={{
-                            title: disableReason ? disableReason : undefined,
+                                title: disableReason
+                                    ? disableReason
+                                    : undefined,
                             }}
                         >
                             Use template
@@ -214,6 +235,7 @@ export const FeatureStrategyMenu = ({
                         <MoreVert />
                     </StyledAdditionalMenuButton>
                 </>
+            )}
             <Dialog
                 open={isStrategyMenuDialogOpen}
                 onClose={onClose}

frontend/src/interfaces/uiConfig.ts

@@ -87,6 +87,7 @@ export type UiFlags = {
     customMetrics?: boolean;
     impactMetrics?: boolean;
     lifecycleGraphs?: boolean;
+    newStrategyModal?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/types/experimental.ts

@@ -57,7 +57,8 @@ export type IFlagKey =
     | 'lifecycleGraphs'
     | 'etagByEnv'
     | 'fetchMode'
-    | 'optimizeLifecycle';
+    | 'optimizeLifecycle'
+    | 'newStrategyModal';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -263,6 +264,10 @@ const flags: IFlags = {
             false,
         ),
     },
+    newStrategyModal: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_NEW_STRATEGY_MODAL,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

src/server-dev.ts

@@ -53,6 +53,7 @@ process.nextTick(async () => {
                         customMetrics: true,
                         impactMetrics: true,
                         lifecycleGraphs: true,
+                        newStrategyModal: true,
                     },
                 },
                 authentication: {