Splitted strategy button (#4025)

## About the changes

![image](https://github.com/Unleash/unleash/assets/2625371/afaaaedf-4539-4a0b-a0fb-916d858ac6d3)


https://linear.app/unleash/issue/1-1038/strategy-creation-split-into-two-buttons

frontend/src/component/common/PermissionButton/PermissionButton.tsx

@@ -20,6 +20,7 @@ export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
     projectId?: string;
     environmentId?: string;
     tooltipProps?: Omit<ITooltipResolverProps, 'children'>;
+    hideLockIcon?: boolean;
 }
 
 interface IPermissionBaseButtonProps extends IPermissionButtonProps {
@@ -68,6 +69,7 @@ const BasePermissionButton: React.FC<IPermissionBaseButtonProps> =
                 projectId,
                 environmentId,
                 tooltipProps,
+                hideLockIcon,
                 ...rest
             },
             ref
@@ -92,7 +94,7 @@ const BasePermissionButton: React.FC<IPermissionBaseButtonProps> =
                             endIcon={
                                 <>
                                     <ConditionallyRender
-                                        condition={!access}
+                                        condition={!access && !hideLockIcon}
                                         show={<Lock titleAccess="Locked" />}
                                         elseShow={
                                             Boolean(rest.endIcon) &&

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

@@ -15,6 +15,8 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { getFeatureStrategyIcon } from 'utils/strategyNames';
 import { AddFromTemplateCard } from './AddFromTemplateCard/AddFromTemplateCard';
 import { FeatureStrategyMenu } from '../FeatureStrategyMenu/FeatureStrategyMenu';
+import { LegacyFeatureStrategyMenu } from '../FeatureStrategyMenu/LegacyFeatureStrategyMenu';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IFeatureStrategyEmptyProps {
     projectId: string;
@@ -76,6 +78,9 @@ export const FeatureStrategyEmpty = ({
         onChangeRequestAddStrategyClose,
     } = useChangeRequestAddStrategy(projectId, featureId, 'addStrategy');
 
+    const { uiConfig } = useUiConfig();
+    const strategySplittedButton = uiConfig?.flags?.strategySplittedButton;
+
     const onAfterAddStrategy = (multiple = false) => {
         refetchFeature();
         refetchFeatureImmutable();
@@ -166,12 +171,26 @@ export const FeatureStrategyEmpty = ({
                         justifyContent: 'center',
                     }}
                 >
-                    <FeatureStrategyMenu
+                    <ConditionallyRender
-                        label="Add your first strategy"
+                        condition={Boolean(strategySplittedButton)}
-                        projectId={projectId}
+                        show={
-                        featureId={featureId}
+                            <FeatureStrategyMenu
-                        environmentId={environmentId}
+                                label="Add your first strategy"
-                        matchWidth={canCopyFromOtherEnvironment}
+                                projectId={projectId}
+                                featureId={featureId}
+                                environmentId={environmentId}
+                                matchWidth={canCopyFromOtherEnvironment}
+                            />
+                        }
+                        elseShow={
+                            <LegacyFeatureStrategyMenu
+                                label="Add your first strategy"
+                                projectId={projectId}
+                                featureId={featureId}
+                                environmentId={environmentId}
+                                matchWidth={canCopyFromOtherEnvironment}
+                            />
+                        }
                     />
                     <ConditionallyRender
                         condition={canCopyFromOtherEnvironment}
@@ -186,55 +205,67 @@ export const FeatureStrategyEmpty = ({
                         }
                     />
                 </Box>
-                <Box sx={{ width: '100%', mt: 3 }}>
+                <ConditionallyRender
-                    <SectionSeparator>
+                    condition={strategySplittedButton === false}
-                        Or use a strategy template
+                    show={
-                    </SectionSeparator>
+                        <>
-                </Box>
+                            <Box sx={{ width: '100%', mt: 3 }}>
-                <Box
+                                <SectionSeparator>
-                    sx={{
+                                    Or use a strategy template
-                        display: 'grid',
+                                </SectionSeparator>
-                        width: '100%',
+                            </Box>
-                        gap: 2,
+                            <Box
-                        gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
+                                sx={{
-                    }}
+                                    display: 'grid',
-                >
+                                    width: '100%',
-                    <AddFromTemplateCard
+                                    gap: 2,
-                        title="Standard strategy"
+                                    gridTemplateColumns: {
-                        projectId={projectId}
+                                        xs: '1fr',
-                        featureId={featureId}
+                                        sm: '1fr 1fr',
-                        environmentId={environmentId}
+                                    },
-                        onAfterAddStrategy={onAfterAddStrategy}
+                                }}
-                        Icon={getFeatureStrategyIcon('default')}
+                            >
-                        strategy={{
+                                <AddFromTemplateCard
-                            name: 'default',
+                                    title="Standard strategy"
-                            parameters: {},
+                                    projectId={projectId}
-                            constraints: [],
+                                    featureId={featureId}
-                        }}
+                                    environmentId={environmentId}
-                    >
+                                    onAfterAddStrategy={onAfterAddStrategy}
-                        The standard strategy is strictly on/off for your entire
+                                    Icon={getFeatureStrategyIcon('default')}
-                        userbase.
+                                    strategy={{
-                    </AddFromTemplateCard>
+                                        name: 'default',
-                    <AddFromTemplateCard
+                                        parameters: {},
-                        title="Gradual rollout"
+                                        constraints: [],
-                        projectId={projectId}
+                                    }}
-                        featureId={featureId}
+                                >
-                        environmentId={environmentId}
+                                    The standard strategy is strictly on/off for
-                        onAfterAddStrategy={onAfterAddStrategy}
+                                    your entire userbase.
-                        Icon={getFeatureStrategyIcon('flexibleRollout')}
+                                </AddFromTemplateCard>
-                        strategy={{
+                                <AddFromTemplateCard
-                            name: 'flexibleRollout',
+                                    title="Gradual rollout"
-                            parameters: {
+                                    projectId={projectId}
-                                rollout: '50',
+                                    featureId={featureId}
-                                stickiness: 'default',
+                                    environmentId={environmentId}
-                                groupId: feature.name,
+                                    onAfterAddStrategy={onAfterAddStrategy}
-                            },
+                                    Icon={getFeatureStrategyIcon(
-                            constraints: [],
+                                        'flexibleRollout'
-                        }}
+                                    )}
-                    >
+                                    strategy={{
-                        Roll out to a percentage of your userbase.
+                                        name: 'flexibleRollout',
-                    </AddFromTemplateCard>
+                                        parameters: {
-                </Box>
+                                            rollout: '50',
+                                            stickiness: 'default',
+                                            groupId: feature.name,
+                                        },
+                                        constraints: [],
+                                    }}
+                                >
+                                    Roll out to a percentage of your userbase.
+                                </AddFromTemplateCard>
+                            </Box>
+                        </>
+                    }
+                />
             </StyledContainer>
         </>
     );

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

@@ -1,10 +1,13 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import PermissionButton, {
     IPermissionButtonProps,
 } from 'component/common/PermissionButton/PermissionButton';
 import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
-import { Popover } from '@mui/material';
+import { Popover, styled } from '@mui/material';
 import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards';
+import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate';
+import { MoreVert } from '@mui/icons-material';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -13,17 +16,30 @@ interface IFeatureStrategyMenuProps {
     environmentId: string;
     variant?: IPermissionButtonProps['variant'];
     matchWidth?: boolean;
+    size?: IPermissionButtonProps['size'];
 }
 
+const StyledAdditionalMenuButton = styled(PermissionButton)(({ theme }) => ({
+    minWidth: 0,
+    width: theme.spacing(4.5),
+    alignItems: 'center',
+    justifyContent: 'center',
+    align: 'center',
+    flexDirection: 'column',
+    marginLeft: theme.spacing(1),
+}));
+
 export const FeatureStrategyMenu = ({
     label,
     projectId,
     featureId,
     environmentId,
     variant,
+    size,
     matchWidth,
 }: IFeatureStrategyMenuProps) => {
     const [anchor, setAnchor] = useState<Element>();
+    const navigate = useNavigate();
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
 
@@ -35,25 +51,55 @@ export const FeatureStrategyMenu = ({
         setAnchor(event.currentTarget);
     };
 
+    const createStrategyPath = formatCreateStrategyPath(
+        projectId,
+        featureId,
+        environmentId,
+        'flexibleRollout',
+        true
+    );
+
     return (
         <div onClick={event => event.stopPropagation()}>
             <PermissionButton
                 permission={CREATE_FEATURE_STRATEGY}
                 projectId={projectId}
                 environmentId={environmentId}
-                onClick={onClick}
+                onClick={() => navigate(createStrategyPath)}
                 aria-labelledby={popoverId}
                 variant={variant}
+                size={size}
                 sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
             >
                 {label}
             </PermissionButton>
+
+            <StyledAdditionalMenuButton
+                permission={CREATE_FEATURE_STRATEGY}
+                projectId={projectId}
+                environmentId={environmentId}
+                onClick={onClick}
+                aria-labelledby={popoverId}
+                variant="outlined"
+                size={size}
+                hideLockIcon
+                tooltipProps={{
+                    title: 'More strategies',
+                }}
+            >
+                <MoreVert sx={theme => ({ margin: theme.spacing(0.25, 0) })} />
+            </StyledAdditionalMenuButton>
             <Popover
                 id={popoverId}
                 open={isPopoverOpen}
                 anchorEl={anchor}
                 onClose={onClose}
                 onClick={onClose}
+                PaperProps={{
+                    sx: theme => ({
+                        paddingBottom: theme.spacing(1),
+                    }),
+                }}
             >
                 <FeatureStrategyMenuCards
                     projectId={projectId}

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

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import PermissionButton, {
+    IPermissionButtonProps,
+} from 'component/common/PermissionButton/PermissionButton';
+import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
+import { Popover } from '@mui/material';
+import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards';
+
+interface IFeatureStrategyMenuProps {
+    label: string;
+    projectId: string;
+    featureId: string;
+    environmentId: string;
+    variant?: IPermissionButtonProps['variant'];
+    matchWidth?: boolean;
+}
+
+/**
+ * Remove when removing feature flag strategySplittedButton
+ * @deprecated
+ */
+export const LegacyFeatureStrategyMenu = ({
+    label,
+    projectId,
+    featureId,
+    environmentId,
+    variant,
+    matchWidth,
+}: IFeatureStrategyMenuProps) => {
+    const [anchor, setAnchor] = useState<Element>();
+    const isPopoverOpen = Boolean(anchor);
+    const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
+
+    const onClose = () => {
+        setAnchor(undefined);
+    };
+
+    const onClick = (event: React.SyntheticEvent) => {
+        setAnchor(event.currentTarget);
+    };
+
+    return (
+        <div onClick={event => event.stopPropagation()}>
+            <PermissionButton
+                permission={CREATE_FEATURE_STRATEGY}
+                projectId={projectId}
+                environmentId={environmentId}
+                onClick={onClick}
+                aria-labelledby={popoverId}
+                variant={variant}
+                sx={{ minWidth: matchWidth ? '282px' : 'auto' }}
+            >
+                {label}
+            </PermissionButton>
+            <Popover
+                id={popoverId}
+                open={isPopoverOpen}
+                anchorEl={anchor}
+                onClose={onClose}
+                onClick={onClose}
+            >
+                <FeatureStrategyMenuCards
+                    projectId={projectId}
+                    featureId={featureId}
+                    environmentId={environmentId}
+                />
+            </Popover>
+        </div>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx

@@ -17,11 +17,13 @@ import EnvironmentAccordionBody from './EnvironmentAccordionBody/EnvironmentAcco
 import { EnvironmentFooter } from './EnvironmentFooter/EnvironmentFooter';
 import FeatureOverviewEnvironmentMetrics from './FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics';
 import { FeatureStrategyMenu } from 'component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu';
+import { LegacyFeatureStrategyMenu } from 'component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenu';
 import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
 import { Badge } from 'component/common/Badge/Badge';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 interface IFeatureOverviewEnvironmentProps {
     env: IFeatureEnvironment;
@@ -104,7 +106,10 @@ const StyledStringTruncator = styled(StringTruncator)(({ theme }) => ({
     },
 }));
 
-const StyledContainer = styled('div')(({ theme }) => ({
+/**
+ * @deprecated
+ */
+const LegacyStyledButtonContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     marginLeft: '1.8rem',
@@ -114,6 +119,15 @@ const StyledContainer = styled('div')(({ theme }) => ({
     },
 }));
 
+const StyledButtonContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: theme.spacing(2),
+    [theme.breakpoints.down(560)]: {
+        flexDirection: 'column',
+    },
+}));
+
 const FeatureOverviewEnvironment = ({
     env,
 }: IFeatureOverviewEnvironmentProps) => {
@@ -122,6 +136,8 @@ const FeatureOverviewEnvironment = ({
     const { metrics } = useFeatureMetrics(projectId, featureId);
     const { feature } = useFeature(projectId, featureId);
     const { value: globalStore } = useGlobalLocalStorage();
+    const { uiConfig } = useUiConfig();
+    const strategySplittedButton = uiConfig?.flags?.strategySplittedButton;
 
     const featureMetrics = getFeatureMetrics(feature?.environments, metrics);
     const environmentMetric = featureMetrics.find(
@@ -171,20 +187,37 @@ const FeatureOverviewEnvironment = ({
                                         }
                                     />
                                 </StyledHeaderTitle>
-                                <StyledContainer>
+                                <ConditionallyRender
-                                    <FeatureStrategyMenu
+                                    condition={Boolean(strategySplittedButton)}
-                                        label="Add strategy"
+                                    show={
-                                        projectId={projectId}
+                                        <StyledButtonContainer>
-                                        featureId={featureId}
+                                            <FeatureStrategyMenu
-                                        environmentId={env.name}
+                                                label="Add strategy"
-                                        variant="text"
+                                                projectId={projectId}
-                                    />
+                                                featureId={featureId}
-                                    <FeatureStrategyIcons
+                                                environmentId={env.name}
-                                        strategies={
+                                                variant="outlined"
-                                            featureEnvironment?.strategies
+                                                size="small"
-                                        }
+                                            />
-                                    />
+                                        </StyledButtonContainer>
-                                </StyledContainer>
+                                    }
+                                    elseShow={
+                                        <LegacyStyledButtonContainer>
+                                            <LegacyFeatureStrategyMenu
+                                                label="Add strategy"
+                                                projectId={projectId}
+                                                featureId={featureId}
+                                                environmentId={env.name}
+                                                variant="text"
+                                            />
+                                            <FeatureStrategyIcons
+                                                strategies={
+                                                    featureEnvironment?.strategies
+                                                }
+                                            />
+                                        </LegacyStyledButtonContainer>
+                                    }
+                                />
                             </StyledHeader>
 
                             <FeatureOverviewEnvironmentMetrics
@@ -215,11 +248,26 @@ const FeatureOverviewEnvironment = ({
                                                 py: 1,
                                             }}
                                         >
-                                            <FeatureStrategyMenu
+                                            <ConditionallyRender
-                                                label="Add strategy"
+                                                condition={Boolean(
-                                                projectId={projectId}
+                                                    strategySplittedButton
-                                                featureId={featureId}
+                                                )}
-                                                environmentId={env.name}
+                                                show={
+                                                    <FeatureStrategyMenu
+                                                        label="Add strategy"
+                                                        projectId={projectId}
+                                                        featureId={featureId}
+                                                        environmentId={env.name}
+                                                    />
+                                                }
+                                                elseShow={
+                                                    <LegacyFeatureStrategyMenu
+                                                        label="Add strategy"
+                                                        projectId={projectId}
+                                                        featureId={featureId}
+                                                        environmentId={env.name}
+                                                    />
+                                                }
                                             />
                                         </Box>
                                         <EnvironmentFooter

frontend/src/interfaces/uiConfig.ts

@@ -54,6 +54,7 @@ export interface IFlags {
     disableNotifications?: boolean;
     advancedPlayground?: boolean;
     customRootRoles?: boolean;
+    strategySplittedButton?: boolean;
 }
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -96,6 +96,7 @@ exports[`should create default config 1`] = `
       "responseTimeWithAppNameKillSwitch": false,
       "segmentContextFieldUsage": false,
       "strategyImprovements": false,
+      "strategySplittedButton": false,
       "strictSchemaValidation": false,
     },
   },
@@ -130,6 +131,7 @@ exports[`should create default config 1`] = `
       "responseTimeWithAppNameKillSwitch": false,
       "segmentContextFieldUsage": false,
       "strategyImprovements": false,
+      "strategySplittedButton": false,
       "strictSchemaValidation": false,
     },
     "externalResolver": {

src/lib/types/experimental.ts

@@ -25,7 +25,8 @@ export type IFlagKey =
     | 'segmentContextFieldUsage'
     | 'disableNotifications'
     | 'advancedPlayground'
-    | 'customRootRoles';
+    | 'customRootRoles'
+    | 'strategySplittedButton';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -90,6 +91,10 @@ const flags: IFlags = {
         process.env.UNLEASH_STRATEGY_IMPROVEMENTS,
         false,
     ),
+    strategySplittedButton: parseEnvVarBoolean(
+        process.env.UNLEASH_STRATEGY_SPLITTED_BUTTON,
+        false,
+    ),
     googleAuthEnabled: parseEnvVarBoolean(
         process.env.GOOGLE_AUTH_ENABLED,
         false,