chore: add newStrategyModal flag

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

@@ -6,7 +6,7 @@ import PermissionButton, {
 } from 'component/common/PermissionButton/PermissionButton';
 import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 import { Dialog, styled } from '@mui/material';
-import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx';
+import { LegacyFeatureStrategyMenuCards } from './LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx';
 import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate.tsx';
 import MoreVert from '@mui/icons-material/MoreVert';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
@@ -20,6 +20,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 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';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -77,6 +78,7 @@ export const FeatureStrategyMenu = ({
     const { isEnterprise } = useUiConfig();
     const displayReleasePlanButton = isEnterprise();
     const crProtected = isChangeRequestConfigured(environmentId);
+    const newStrategyModalEnabled = useUiFlag('newStrategyModal');
 
     const onClose = () => {
         setIsStrategyMenuDialogOpen(false);
@@ -222,22 +224,41 @@ export const FeatureStrategyMenu = ({
                     },
                 }}
             >
-                <FeatureStrategyMenuCards
+                {newStrategyModalEnabled ? (
-                    projectId={projectId}
+                    <FeatureStrategyMenuCards
-                    featureId={featureId}
+                        projectId={projectId}
-                    environmentId={environmentId}
+                        featureId={featureId}
-                    onlyReleasePlans={onlyReleasePlans}
+                        environmentId={environmentId}
-                    onAddReleasePlan={(template) => {
+                        onlyReleasePlans={onlyReleasePlans}
-                        setSelectedTemplate(template);
+                        onAddReleasePlan={(template) => {
-                        addReleasePlan(template);
+                            setSelectedTemplate(template);
-                    }}
+                            addReleasePlan(template);
-                    onReviewReleasePlan={(template) => {
+                        }}
-                        setSelectedTemplate(template);
+                        onReviewReleasePlan={(template) => {
-                        setAddReleasePlanOpen(true);
+                            setSelectedTemplate(template);
-                        onClose();
+                            setAddReleasePlanOpen(true);
-                    }}
+                            onClose();
-                    onClose={onClose}
+                        }}
-                />
+                        onClose={onClose}
+                    />
+                ) : (
+                    <LegacyFeatureStrategyMenuCards
+                        projectId={projectId}
+                        featureId={featureId}
+                        environmentId={environmentId}
+                        onlyReleasePlans={onlyReleasePlans}
+                        onAddReleasePlan={(template) => {
+                            setSelectedTemplate(template);
+                            addReleasePlan(template);
+                        }}
+                        onReviewReleasePlan={(template) => {
+                            setSelectedTemplate(template);
+                            setAddReleasePlanOpen(true);
+                            onClose();
+                        }}
+                        onClose={onClose}
+                    />
+                )}
             </Dialog>
             {selectedTemplate && (
                 <ReleasePlanReviewDialog

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

@@ -204,9 +204,7 @@ export const FeatureStrategyMenuCards = ({
     return (
         <GridContainer>
             <TitleRow>
-                <TitleText variant='h2'>
+                <TitleText variant='h2'>Add strategy</TitleText>
-                    {onlyReleasePlans ? 'Select template' : 'Add configuration'}
-                </TitleText>
                 <IconButton
                     size='small'
                     onClick={onClose}

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

@@ -0,0 +1,294 @@
+import { Link, styled, Typography, Box, IconButton } from '@mui/material';
+import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
+import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
+import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
+import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard.tsx';
+import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
+import { useNavigate } from 'react-router-dom';
+import CloseIcon from '@mui/icons-material/Close';
+import FactCheckOutlinedIcon from '@mui/icons-material/FactCheckOutlined';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.tsx';
+
+interface IFeatureStrategyMenuCardsProps {
+    projectId: string;
+    featureId: string;
+    environmentId: string;
+    onlyReleasePlans: boolean;
+    onAddReleasePlan: (template: IReleasePlanTemplate) => void;
+    onReviewReleasePlan: (template: IReleasePlanTemplate) => void;
+    onClose: () => void;
+}
+
+const GridContainer = styled(Box)(() => ({
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+}));
+
+const ScrollableContent = styled(Box)(({ theme }) => ({
+    width: '100%',
+    maxHeight: '70vh',
+    overflowY: 'auto',
+    padding: theme.spacing(4),
+    paddingTop: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(3),
+}));
+
+const GridSection = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2, 1fr)',
+    gap: theme.spacing(1.5),
+    width: '100%',
+}));
+
+const CardWrapper = styled(Box)(() => ({
+    width: '100%',
+    minWidth: 0,
+}));
+
+const TitleRow = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: theme.spacing(4, 4, 2, 4),
+}));
+
+const TitleText = styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.body1.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    margin: 0,
+}));
+
+const SectionTitle = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+    marginBottom: theme.spacing(1),
+    width: '100%',
+}));
+
+const StyledIcon = styled('span')(({ theme }) => ({
+    width: theme.spacing(3),
+    '& > svg': {
+        fill: theme.palette.primary.main,
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
+    },
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const EmptyStateContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+    backgroundColor: theme.palette.neutral.light,
+    borderRadius: theme.shape.borderRadiusMedium,
+    padding: theme.spacing(3),
+    width: 'auto',
+}));
+
+const EmptyStateTitle = styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.caption.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    marginBottom: theme.spacing(1),
+    display: 'flex',
+    alignItems: 'center',
+}));
+
+const EmptyStateDescription = styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.caption.fontSize,
+    color: theme.palette.text.secondary,
+}));
+
+const ClickableBoldText = styled(Link)(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+    cursor: 'pointer',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+}));
+
+export const LegacyFeatureStrategyMenuCards = ({
+    projectId,
+    featureId,
+    environmentId,
+    onlyReleasePlans,
+    onAddReleasePlan,
+    onReviewReleasePlan,
+    onClose,
+}: IFeatureStrategyMenuCardsProps) => {
+    const { isEnterprise } = useUiConfig();
+
+    const { strategies } = useStrategies();
+    const { templates } = useReleasePlanTemplates();
+    const navigate = useNavigate();
+
+    const activeStrategies = strategies.filter(
+        (strategy) => !strategy.deprecated,
+    );
+
+    const standardStrategies = activeStrategies.filter(
+        (strategy) => !strategy.advanced && !strategy.editable,
+    );
+
+    const advancedAndCustomStrategies = activeStrategies.filter(
+        (strategy) => strategy.editable || strategy.advanced,
+    );
+
+    const defaultStrategy = {
+        name: 'flexibleRollout',
+        displayName: 'Default strategy',
+        description:
+            'This is the default strategy defined for this environment in the project',
+    };
+
+    const renderReleasePlanTemplates = () => {
+        if (!isEnterprise()) {
+            return null;
+        }
+
+        return (
+            <Box>
+                <SectionTitle>
+                    <Typography color='inherit' variant='body2'>
+                        Release templates
+                    </Typography>
+                    <HelpIcon
+                        tooltip='Use a predefined template to roll out features to users'
+                        size='16px'
+                    />
+                </SectionTitle>
+                {!templates.length ? (
+                    <EmptyStateContainer>
+                        <EmptyStateTitle>
+                            <StyledIcon>
+                                <FactCheckOutlinedIcon />
+                            </StyledIcon>
+                            Create your own release templates
+                        </EmptyStateTitle>
+                        <EmptyStateDescription>
+                            Standardize your rollouts and save time by reusing
+                            predefined strategies. Find release templates in the
+                            side menu under{' '}
+                            <ClickableBoldText
+                                onClick={() => navigate('/release-templates')}
+                            >
+                                Configure &gt; Release templates
+                            </ClickableBoldText>
+                        </EmptyStateDescription>
+                    </EmptyStateContainer>
+                ) : (
+                    <GridSection>
+                        {templates.map((template) => (
+                            <CardWrapper key={template.id}>
+                                <FeatureReleasePlanCard
+                                    template={template}
+                                    onClick={() => onAddReleasePlan(template)}
+                                    onPreviewClick={() =>
+                                        onReviewReleasePlan(template)
+                                    }
+                                />
+                            </CardWrapper>
+                        ))}
+                    </GridSection>
+                )}
+            </Box>
+        );
+    };
+
+    return (
+        <GridContainer>
+            <TitleRow>
+                <TitleText variant='h2'>
+                    {onlyReleasePlans ? 'Select template' : 'Add configuration'}
+                </TitleText>
+                <IconButton
+                    size='small'
+                    onClick={onClose}
+                    edge='end'
+                    aria-label='close'
+                >
+                    <CloseIcon fontSize='small' />
+                </IconButton>
+            </TitleRow>
+            <ScrollableContent>
+                {onlyReleasePlans ? (
+                    renderReleasePlanTemplates()
+                ) : (
+                    <>
+                        <Box>
+                            <SectionTitle>
+                                <Typography color='inherit' variant='body2'>
+                                    Standard strategies
+                                </Typography>
+                                <HelpIcon
+                                    tooltip='Standard strategies let you enable a feature only for a specified audience. Select a starting setup, then customize your strategy with targeting and variants.'
+                                    size='16px'
+                                />
+                            </SectionTitle>
+                            <GridSection>
+                                <CardWrapper key={defaultStrategy.name}>
+                                    <FeatureStrategyMenuCard
+                                        projectId={projectId}
+                                        featureId={featureId}
+                                        environmentId={environmentId}
+                                        strategy={defaultStrategy}
+                                        defaultStrategy
+                                        onClose={onClose}
+                                    />
+                                </CardWrapper>
+                                {standardStrategies.map((strategy) => (
+                                    <CardWrapper key={strategy.name}>
+                                        <FeatureStrategyMenuCard
+                                            projectId={projectId}
+                                            featureId={featureId}
+                                            environmentId={environmentId}
+                                            strategy={strategy}
+                                            onClose={onClose}
+                                        />
+                                    </CardWrapper>
+                                ))}
+                            </GridSection>
+                        </Box>
+                        {renderReleasePlanTemplates()}
+                        {advancedAndCustomStrategies.length > 0 && (
+                            <Box>
+                                <SectionTitle>
+                                    <Typography color='inherit' variant='body2'>
+                                        Custom and advanced strategies
+                                    </Typography>
+                                    <HelpIcon
+                                        tooltip='Advanced strategies let you target based on specific properties. Custom activation strategies let you define your own activation strategies to use with Unleash.'
+                                        size='16px'
+                                    />
+                                </SectionTitle>
+                                <GridSection>
+                                    {advancedAndCustomStrategies.map(
+                                        (strategy) => (
+                                            <CardWrapper key={strategy.name}>
+                                                <FeatureStrategyMenuCard
+                                                    projectId={projectId}
+                                                    featureId={featureId}
+                                                    environmentId={
+                                                        environmentId
+                                                    }
+                                                    strategy={strategy}
+                                                    onClose={onClose}
+                                                />
+                                            </CardWrapper>
+                                        ),
+                                    )}
+                                </GridSection>
+                            </Box>
+                        )}
+                    </>
+                )}
+            </ScrollableContent>
+        </GridContainer>
+    );
+};