chore: update strategy cards in new add strategy modal (#10659)

https://linear.app/unleash/issue/2-3867/update-strategy-cards

Updates the new "add strategy" modal strategy cards.

Followed the same logic as before where I took a snapshot of existing
components and prefixed them with `Legacy`.

Does not include the new icons.

<img width="979" height="562" alt="image"
src="https://github.com/user-attachments/assets/8cb45c78-ad67-41f2-a6e2-db48fefbabdb"
/>

<img width="317" height="108" alt="image"
src="https://github.com/user-attachments/assets/fb692ebc-26ad-4331-813a-baaf56d0df7e"
/>

frontend/src/component/common/Truncator/Truncator.tsx

@@ -32,6 +32,7 @@ export type TruncatorProps = {
     tooltipProps?: OverridableTooltipProps;
     children: React.ReactNode;
     onSetTruncated?: (isTruncated: boolean) => void;
+    wordBreak?: CSSProperties['wordBreak'];
 } & BoxProps;
 
 export const Truncator = ({
@@ -42,6 +43,7 @@ export const Truncator = ({
     children,
     component = 'span',
     onSetTruncated,
+    wordBreak,
     ...props
 }: TruncatorProps) => {
     const [isTruncated, setIsTruncated] = useState(false);
@@ -73,12 +75,15 @@ export const Truncator = ({
     const { title: tooltipTitle, ...otherTooltipProps } =
         overridableTooltipProps;
 
+    const defaultWordBreak = lines === 1 ? 'break-all' : 'break-word';
+
     return (
         <Tooltip title={isTruncated ? tooltipTitle : ''} {...otherTooltipProps}>
             <StyledTruncatorContainer
                 ref={ref}
                 lines={lines}
                 component={component}
+                wordBreak={wordBreak || defaultWordBreak}
                 {...props}
             >
                 {children}

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

@@ -1,47 +1,30 @@
-import type { IStrategy } from 'interfaces/strategy';
-import { Link } from 'react-router-dom';
-import {
-    getFeatureStrategyIcon,
-    formatStrategyName,
-} from 'utils/strategyNames';
-import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { styled } from '@mui/material';
-import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { Truncator } from 'component/common/Truncator/Truncator';
-
+import type { ReactNode } from 'react';
-interface IFeatureStrategyMenuCardProps {
-    projectId: string;
-    featureId: string;
-    environmentId: string;
-    strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
-        Partial<IStrategy>;
-    defaultStrategy?: boolean;
-    onClose: () => void;
-}
 
 const StyledIcon = styled('div')(({ theme }) => ({
-    width: theme.spacing(3),
+    display: 'flex',
+    alignItems: 'center',
     '& > svg': {
-        width: theme.spacing(2.25),
+        width: theme.spacing(3.5),
-        height: theme.spacing(2.25),
+        height: theme.spacing(3.5),
         fill: theme.palette.primary.main,
     },
 }));
 
-const StyledName = styled(StringTruncator)(({ theme }) => ({
+const StyledName = styled(Truncator)(({ theme }) => ({
     fontWeight: theme.typography.fontWeightBold,
-    fontSize: theme.typography.caption.fontSize,
-    display: 'block',
-    marginBottom: theme.spacing(0.5),
 }));
 
-const StyledCard = styled(Link)(({ theme }) => ({
+const StyledCard = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'isDefault',
+})<{ isDefault?: boolean }>(({ theme, isDefault }) => ({
     display: 'flex',
-    flexDirection: 'column',
+    alignItems: 'center',
     width: '100%',
+    height: '100%',
     maxWidth: '30rem',
-    padding: theme.spacing(1.5, 2),
+    padding: theme.spacing(2),
     color: 'inherit',
     textDecoration: 'inherit',
     lineHeight: 1.25,
@@ -49,71 +32,79 @@ const StyledCard = styled(Link)(({ theme }) => ({
     borderStyle: 'solid',
     borderColor: theme.palette.divider,
     borderRadius: theme.spacing(1),
+    textAlign: 'left',
     overflow: 'hidden',
-    '&:hover, &:focus': {
+    position: 'relative',
-        borderColor: theme.palette.primary.main,
+    fontSize: theme.typography.caption.fontSize,
+    '&:hover .cardContent, &:focus-within .cardContent': {
+        opacity: 0.4,
     },
+    '&:hover .cardActions, &:focus-within .cardActions': {
+        opacity: 1,
+    },
+    ...(isDefault && {
+        backgroundColor: theme.palette.secondary.light,
+        borderColor: theme.palette.secondary.border,
+    }),
+    userSelect: 'none',
 }));
 
-const StyledTopRow = styled('div')(({ theme }) => ({
+const StyledCardContent = styled('div')(({ theme }) => ({
     display: 'flex',
-    flexDirection: 'row',
+    transition: 'opacity 0.2s ease-in-out',
-    alignItems: 'center',
+    gap: theme.spacing(2),
-    width: '100%',
 }));
 
+const StyledCardDescription = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    gap: theme.spacing(0.5),
+}));
+
+const StyledCardActions = styled('div')(({ theme }) => ({
+    position: 'absolute',
+    display: 'flex',
+    alignItems: 'center',
+    top: theme.spacing(0),
+    bottom: theme.spacing(0),
+    right: theme.spacing(2),
+    gap: theme.spacing(1),
+    opacity: 0,
+    transition: 'opacity 0.1s ease-in-out',
+}));
+
+interface IFeatureStrategyMenuCardProps {
+    name: string;
+    description: string;
+    icon: ReactNode;
+    isDefault?: boolean;
+    children: ReactNode;
+}
+
 export const FeatureStrategyMenuCard = ({
-    projectId,
+    name,
-    featureId,
+    description,
-    environmentId,
+    icon,
-    strategy,
+    isDefault,
-    defaultStrategy,
+    children,
-    onClose,
+}: IFeatureStrategyMenuCardProps) => (
-}: IFeatureStrategyMenuCardProps) => {
+    <StyledCard isDefault={isDefault}>
-    const StrategyIcon = getFeatureStrategyIcon(strategy.name);
+        <StyledCardContent className='cardContent'>
-    const strategyName = formatStrategyName(strategy.name);
+            <StyledIcon>{icon}</StyledIcon>
-    const { trackEvent } = usePlausibleTracker();
+            <StyledCardDescription>
-
+                <StyledName lines={1} title={name} arrow>
-    const createStrategyPath = formatCreateStrategyPath(
+                    {name}
-        projectId,
+                </StyledName>
-        featureId,
+                {description && (
-        environmentId,
+                    <Truncator lines={2} title={description} arrow>
-        strategy.name,
+                        {description}
-        defaultStrategy,
+                    </Truncator>
-    );
+                )}
-
+            </StyledCardDescription>
-    const openStrategyCreationModal = () => {
+        </StyledCardContent>
-        trackEvent('strategy-add', {
+        <StyledCardActions className='cardActions'>
-            props: {
+            {children}
-                buttonTitle: strategy.displayName || strategyName,
+        </StyledCardActions>
-            },
+    </StyledCard>
-        });
+);
-        onClose();
-    };
-
-    return (
-        <StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
-            <StyledTopRow>
-                <StyledIcon>
-                    <StrategyIcon />
-                </StyledIcon>
-                <StyledName
-                    text={strategy.displayName || strategyName}
-                    maxWidth='200'
-                    maxLength={25}
-                />
-            </StyledTopRow>
-            <Truncator
-                lines={1}
-                title={strategy.description}
-                arrow
-                sx={{
-                    fontSize: (theme) => theme.typography.caption.fontSize,
-                    width: '100%',
-                }}
-            >
-                {strategy.description}
-            </Truncator>
-        </StyledCard>
-    );
-};

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

@@ -0,0 +1,11 @@
+import { Button, styled, type ButtonProps } from '@mui/material';
+
+const StyledActionContainer = styled('div')(({ theme }) => ({
+    background: theme.palette.background.paper,
+}));
+
+export const FeatureStrategyMenuCardAction = (props: ButtonProps) => (
+    <StyledActionContainer>
+        <Button variant='outlined' size='small' {...props} />
+    </StyledActionContainer>
+);

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

@@ -2,11 +2,10 @@ import { styled, Typography, Box, IconButton } from '@mui/material';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import CloseIcon from '@mui/icons-material/Close';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig.ts';
 import { HelpIcon } from 'component/common/HelpIcon/HelpIcon.tsx';
-import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview.ts';
 import { useContext, useMemo, useState } from 'react';
 import {
     FeatureStrategyMenuCardsSection,
@@ -20,6 +19,15 @@ import {
     UPDATE_PROJECT,
 } from 'component/providers/AccessProvider/permissions.ts';
 import AccessContext from 'contexts/AccessContext.ts';
+import {
+    formatStrategyName,
+    getFeatureStrategyIcon,
+} from 'utils/strategyNames.tsx';
+import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
+import { formatCreateStrategyPath } from '../../FeatureStrategyCreate/FeatureStrategyCreate.tsx';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker.ts';
+import { FeatureStrategyMenuCardsDefaultStrategy } from './FeatureStrategyMenuCardsDefaultStrategy.tsx';
+import type { IStrategy } from 'interfaces/strategy.ts';
 
 const FILTERS = [
     { label: 'All', value: null },
@@ -42,7 +50,7 @@ const StyledScrollableContent = styled(Box)(({ theme }) => ({
     height: theme.spacing(52),
     overflowY: 'auto',
     padding: theme.spacing(4),
-    paddingTop: theme.spacing(1),
+    paddingTop: theme.spacing(2),
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(5),
@@ -57,7 +65,7 @@ const StyledHeader = styled(Box)(({ theme }) => ({
 
 const StyledFiltersContainer = styled(Box)(({ theme }) => ({
     display: 'flex',
-    padding: theme.spacing(0, 4, 5, 4),
+    padding: theme.spacing(0, 4, 3, 4),
 }));
 
 const StyledLink = styled(RouterLink)({
@@ -86,9 +94,10 @@ export const FeatureStrategyMenuCards = ({
 }: IFeatureStrategyMenuCardsProps) => {
     const { isEnterprise } = useUiConfig();
     const { hasAccess } = useContext(AccessContext);
+    const { trackEvent } = usePlausibleTracker();
+    const navigate = useNavigate();
 
     const { strategies } = useStrategies();
-    const { project } = useProjectOverview(projectId);
 
     const [filter, setFilter] = useState<StrategyFilterValue>(null);
 
@@ -108,21 +117,6 @@ export const FeatureStrategyMenuCards = ({
         (strategy) => strategy.editable,
     );
 
-    const projectDefaultStrategy = project?.environments?.find(
-        (env) => env.environment === environmentId,
-    )?.defaultStrategy || {
-        name: 'flexibleRollout',
-        title: '100% of all users',
-    };
-
-    const defaultStrategy = {
-        name: projectDefaultStrategy.name || 'flexibleRollout',
-        displayName: 'Default strategy',
-        description:
-            projectDefaultStrategy.title ||
-            'This is the default strategy defined for this environment in the project',
-    };
-
     const availableFilters = useMemo(
         () =>
             FILTERS.filter(({ value }) => {
@@ -150,6 +144,72 @@ export const FeatureStrategyMenuCards = ({
         projectId,
     );
 
+    const projectDefaultTooltip = hasAccessToDefaultStrategyConfig ? (
+        <>
+            This is set per project, per environment, and can be configured{' '}
+            <StyledLink to={`/projects/${projectId}/settings/default-strategy`}>
+                here
+            </StyledLink>
+        </>
+    ) : (
+        <>
+            This is set per project, per environment. Contact project owner to
+            change it.
+        </>
+    );
+
+    const renderStrategy = (strategy: IStrategy) => {
+        const name = strategy.displayName || formatStrategyName(strategy.name);
+        const Icon = getFeatureStrategyIcon(strategy.name);
+
+        return (
+            <FeatureStrategyMenuCard
+                key={strategy.name}
+                name={name}
+                description={strategy.description}
+                icon={<Icon />}
+            >
+                <FeatureStrategyMenuCardAction
+                    onClick={() =>
+                        onConfigure({
+                            strategyName: strategy.name,
+                            strategyDisplayName: name,
+                        })
+                    }
+                >
+                    Configure
+                </FeatureStrategyMenuCardAction>
+            </FeatureStrategyMenuCard>
+        );
+    };
+
+    const onConfigure = ({
+        strategyName,
+        strategyDisplayName,
+        isDefault,
+    }: {
+        strategyName: string;
+        strategyDisplayName?: string;
+        isDefault?: boolean;
+    }) => {
+        const createStrategyPath = formatCreateStrategyPath(
+            projectId,
+            featureId,
+            environmentId,
+            strategyName,
+            isDefault,
+        );
+
+        trackEvent('strategy-add', {
+            props: {
+                buttonTitle: strategyDisplayName || strategyName,
+            },
+        });
+
+        navigate(createStrategyPath);
+        onClose();
+    };
+
     return (
         <StyledContainer>
             <StyledHeader>
@@ -181,26 +241,7 @@ export const FeatureStrategyMenuCards = ({
                                     </Typography>
                                     <HelpIcon
                                         htmlTooltip
-                                        tooltip={
+                                        tooltip={projectDefaultTooltip}
-                                            hasAccessToDefaultStrategyConfig ? (
-                                                <>
-                                                    This is set per project, per
-                                                    environment, and can be
-                                                    configured{' '}
-                                                    <StyledLink
-                                                        to={`/projects/${projectId}/settings/default-strategy`}
-                                                    >
-                                                        here
-                                                    </StyledLink>
-                                                </>
-                                            ) : (
-                                                <>
-                                                    This is set per project, per
-                                                    environment. Contact project
-                                                    owner to change it.
-                                                </>
-                                            )
-                                        }
                                         size='16px'
                                     />
                                 </StyledStrategyModalSectionHeader>
@@ -215,28 +256,16 @@ export const FeatureStrategyMenuCards = ({
                         </FeatureStrategyMenuCardsSection>
                         <FeatureStrategyMenuCardsSection>
                             {shouldRender('default') && (
-                                <FeatureStrategyMenuCard
+                                <FeatureStrategyMenuCardsDefaultStrategy
                                     projectId={projectId}
-                                    featureId={featureId}
                                     environmentId={environmentId}
-                                    strategy={defaultStrategy}
+                                    featureId={featureId}
-                                    defaultStrategy
+                                    onConfigure={onConfigure}
                                     onClose={onClose}
                                 />
                             )}
                             {shouldRender('standard') && (
-                                <>
+                                <>{standardStrategies.map(renderStrategy)}</>
-                                    {standardStrategies.map((strategy) => (
-                                        <FeatureStrategyMenuCard
-                                            key={strategy.name}
-                                            projectId={projectId}
-                                            featureId={featureId}
-                                            environmentId={environmentId}
-                                            strategy={strategy}
-                                            onClose={onClose}
-                                        />
-                                    ))}
-                                </>
                             )}
                         </FeatureStrategyMenuCardsSection>
                     </Box>
@@ -253,30 +282,12 @@ export const FeatureStrategyMenuCards = ({
                     <>
                         {advancedStrategies.length > 0 && (
                             <FeatureStrategyMenuCardsSection title='Advanced strategies'>
-                                {advancedStrategies.map((strategy) => (
+                                {advancedStrategies.map(renderStrategy)}
-                                    <FeatureStrategyMenuCard
-                                        key={strategy.name}
-                                        projectId={projectId}
-                                        featureId={featureId}
-                                        environmentId={environmentId}
-                                        strategy={strategy}
-                                        onClose={onClose}
-                                    />
-                                ))}
                             </FeatureStrategyMenuCardsSection>
                         )}
                         {customStrategies.length > 0 && (
                             <FeatureStrategyMenuCardsSection title='Custom strategies'>
-                                {customStrategies.map((strategy) => (
+                                {customStrategies.map(renderStrategy)}
-                                    <FeatureStrategyMenuCard
-                                        key={strategy.name}
-                                        projectId={projectId}
-                                        featureId={featureId}
-                                        environmentId={environmentId}
-                                        strategy={strategy}
-                                        onClose={onClose}
-                                    />
-                                ))}
                             </FeatureStrategyMenuCardsSection>
                         )}
                     </>

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

@@ -0,0 +1,123 @@
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled.ts';
+import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests.ts';
+import { useFeature } from 'hooks/api/getters/useFeature/useFeature.ts';
+import useFeatureStrategyApi from 'hooks/api/actions/useFeatureStrategyApi/useFeatureStrategyApi.ts';
+import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts';
+import useToast from 'hooks/useToast.tsx';
+import useProjectOverview from 'hooks/api/getters/useProjectOverview/useProjectOverview';
+import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
+import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
+import { getFeatureStrategyIcon } from 'utils/strategyNames.tsx';
+
+interface IFeatureStrategyMenuCardsDefaultStrategyProps {
+    projectId: string;
+    featureId: string;
+    environmentId: string;
+    onConfigure: ({
+        strategyName,
+        strategyDisplayName,
+        isDefault,
+    }: {
+        strategyName: string;
+        strategyDisplayName?: string;
+        isDefault: boolean;
+    }) => void;
+    onClose: () => void;
+}
+
+export const FeatureStrategyMenuCardsDefaultStrategy = ({
+    projectId,
+    environmentId,
+    featureId,
+    onConfigure,
+    onClose,
+}: IFeatureStrategyMenuCardsDefaultStrategyProps) => {
+    const { project } = useProjectOverview(projectId);
+    const { addStrategyToFeature } = useFeatureStrategyApi();
+    const { addChange } = useChangeRequestApi();
+    const { setToastData } = useToast();
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
+    const { refetch: refetchChangeRequests } =
+        usePendingChangeRequests(projectId);
+    const { refetchFeature } = useFeature(projectId, featureId);
+
+    const projectDefaultStrategy = project?.environments?.find(
+        (env) => env.environment === environmentId,
+    )?.defaultStrategy || {
+        name: 'flexibleRollout',
+        title: '100% of all users',
+    };
+
+    const onApply = async () => {
+        const payload = {
+            name: projectDefaultStrategy.name,
+            title: projectDefaultStrategy.title ?? '',
+            constraints: projectDefaultStrategy.constraints ?? [],
+            parameters: projectDefaultStrategy.parameters ?? {},
+            variants: projectDefaultStrategy.variants ?? [],
+            segments: projectDefaultStrategy.segments ?? [],
+            disabled: projectDefaultStrategy.disabled ?? false,
+        };
+
+        if (isChangeRequestConfigured(environmentId)) {
+            await addChange(projectId, environmentId, {
+                action: 'addStrategy',
+                feature: featureId,
+                payload,
+            });
+
+            setToastData({
+                text: 'Strategy added to draft',
+                type: 'success',
+            });
+            refetchChangeRequests();
+        } else {
+            await addStrategyToFeature(
+                projectId,
+                featureId,
+                environmentId,
+                payload,
+            );
+
+            setToastData({
+                text: 'Strategy applied',
+                type: 'success',
+            });
+        }
+        refetchFeature();
+
+        onClose();
+    };
+
+    const strategyName = projectDefaultStrategy.name || 'flexibleRollout';
+    const strategyDisplayName = 'Default strategy';
+    const description =
+        projectDefaultStrategy.title ||
+        'This is the default strategy defined for this environment in the project';
+
+    const Icon = getFeatureStrategyIcon(strategyName);
+
+    return (
+        <FeatureStrategyMenuCard
+            name={strategyDisplayName}
+            description={description}
+            icon={<Icon />}
+            isDefault
+        >
+            <FeatureStrategyMenuCardAction
+                onClick={() =>
+                    onConfigure({
+                        strategyName,
+                        strategyDisplayName,
+                        isDefault: true,
+                    })
+                }
+            >
+                Configure
+            </FeatureStrategyMenuCardAction>
+            <FeatureStrategyMenuCardAction onClick={onApply}>
+                Apply
+            </FeatureStrategyMenuCardAction>
+        </FeatureStrategyMenuCard>
+    );
+};

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

@@ -1,7 +1,6 @@
 import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ReactComponent as ReleaseTemplateIcon } from 'assets/img/releaseTemplates.svg';
-import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard.tsx';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans.ts';
 import { Box, Button, styled } from '@mui/material';
 import type { StrategyFilterValue } from './FeatureStrategyMenuCards.tsx';
@@ -11,6 +10,9 @@ import {
     FeatureStrategyMenuCardsSection,
     StyledStrategyModalSectionHeader,
 } from './FeatureStrategyMenuCardsSection.tsx';
+import { getFeatureStrategyIcon } from 'utils/strategyNames.tsx';
+import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
+import { FeatureStrategyMenuCardAction } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx';
 
 const RELEASE_TEMPLATE_DISPLAY_LIMIT = 5;
 
@@ -113,6 +115,8 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({
         ? templates
         : templates.slice(0, RELEASE_TEMPLATE_DISPLAY_LIMIT);
 
+    const Icon = getFeatureStrategyIcon('releasePlanTemplate');
+
     return (
         <Box>
             {shouldShowHeader && (
@@ -150,12 +154,23 @@ export const FeatureStrategyMenuCardsReleaseTemplates = ({
             ) : (
                 <FeatureStrategyMenuCardsSection>
                     {slicedTemplates.map((template) => (
-                        <FeatureReleasePlanCard
+                        <FeatureStrategyMenuCard
                             key={template.id}
-                            template={template}
+                            name={template.name}
-                            onClick={() => onAddReleasePlan(template)}
+                            description={template.description}
-                            onPreviewClick={() => onReviewReleasePlan(template)}
+                            icon={<Icon />}
-                        />
+                        >
+                            <FeatureStrategyMenuCardAction
+                                onClick={() => onReviewReleasePlan(template)}
+                            >
+                                Preview
+                            </FeatureStrategyMenuCardAction>
+                            <FeatureStrategyMenuCardAction
+                                onClick={() => onAddReleasePlan(template)}
+                            >
+                                Apply
+                            </FeatureStrategyMenuCardAction>
+                        </FeatureStrategyMenuCard>
                     ))}
                     {slicedTemplates.length < templates.length &&
                         templates.length > RELEASE_TEMPLATE_DISPLAY_LIMIT && (

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

@@ -0,0 +1,119 @@
+import type { IStrategy } from 'interfaces/strategy';
+import { Link } from 'react-router-dom';
+import {
+    getFeatureStrategyIcon,
+    formatStrategyName,
+} from 'utils/strategyNames';
+import { formatCreateStrategyPath } from 'component/feature/FeatureStrategy/FeatureStrategyCreate/FeatureStrategyCreate';
+import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { styled } from '@mui/material';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
+import { Truncator } from 'component/common/Truncator/Truncator';
+
+interface IFeatureStrategyMenuCardProps {
+    projectId: string;
+    featureId: string;
+    environmentId: string;
+    strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
+        Partial<IStrategy>;
+    defaultStrategy?: boolean;
+    onClose: () => void;
+}
+
+const StyledIcon = styled('div')(({ theme }) => ({
+    width: theme.spacing(3),
+    '& > svg': {
+        width: theme.spacing(2.25),
+        height: theme.spacing(2.25),
+        fill: theme.palette.primary.main,
+    },
+}));
+
+const StyledName = styled(StringTruncator)(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+    fontSize: theme.typography.caption.fontSize,
+    display: 'block',
+    marginBottom: theme.spacing(0.5),
+}));
+
+const StyledCard = styled(Link)(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    maxWidth: '30rem',
+    padding: theme.spacing(1.5, 2),
+    color: 'inherit',
+    textDecoration: 'inherit',
+    lineHeight: 1.25,
+    borderWidth: '1px',
+    borderStyle: 'solid',
+    borderColor: theme.palette.divider,
+    borderRadius: theme.spacing(1),
+    overflow: 'hidden',
+    '&:hover, &:focus': {
+        borderColor: theme.palette.primary.main,
+    },
+}));
+
+const StyledTopRow = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+}));
+
+export const LegacyFeatureStrategyMenuCard = ({
+    projectId,
+    featureId,
+    environmentId,
+    strategy,
+    defaultStrategy,
+    onClose,
+}: IFeatureStrategyMenuCardProps) => {
+    const StrategyIcon = getFeatureStrategyIcon(strategy.name);
+    const strategyName = formatStrategyName(strategy.name);
+    const { trackEvent } = usePlausibleTracker();
+
+    const createStrategyPath = formatCreateStrategyPath(
+        projectId,
+        featureId,
+        environmentId,
+        strategy.name,
+        defaultStrategy,
+    );
+
+    const openStrategyCreationModal = () => {
+        trackEvent('strategy-add', {
+            props: {
+                buttonTitle: strategy.displayName || strategyName,
+            },
+        });
+        onClose();
+    };
+
+    return (
+        <StyledCard to={createStrategyPath} onClick={openStrategyCreationModal}>
+            <StyledTopRow>
+                <StyledIcon>
+                    <StrategyIcon />
+                </StyledIcon>
+                <StyledName
+                    text={strategy.displayName || strategyName}
+                    maxWidth='200'
+                    maxLength={25}
+                />
+            </StyledTopRow>
+            <Truncator
+                lines={1}
+                title={strategy.description}
+                arrow
+                sx={{
+                    fontSize: (theme) => theme.typography.caption.fontSize,
+                    width: '100%',
+                }}
+            >
+                {strategy.description}
+            </Truncator>
+        </StyledCard>
+    );
+};

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

@@ -1,6 +1,6 @@
 import { Link, styled, Typography, Box, IconButton } from '@mui/material';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
-import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx';
+import { LegacyFeatureStrategyMenuCard } from '../LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx';
 import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
 import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard.tsx';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
@@ -233,7 +233,7 @@ export const LegacyFeatureStrategyMenuCards = ({
                             </SectionTitle>
                             <GridSection>
                                 <CardWrapper key={defaultStrategy.name}>
-                                    <FeatureStrategyMenuCard
+                                    <LegacyFeatureStrategyMenuCard
                                         projectId={projectId}
                                         featureId={featureId}
                                         environmentId={environmentId}
@@ -244,7 +244,7 @@ export const LegacyFeatureStrategyMenuCards = ({
                                 </CardWrapper>
                                 {standardStrategies.map((strategy) => (
                                     <CardWrapper key={strategy.name}>
-                                        <FeatureStrategyMenuCard
+                                        <LegacyFeatureStrategyMenuCard
                                             projectId={projectId}
                                             featureId={featureId}
                                             environmentId={environmentId}
@@ -271,7 +271,7 @@ export const LegacyFeatureStrategyMenuCards = ({
                                     {advancedAndCustomStrategies.map(
                                         (strategy) => (
                                             <CardWrapper key={strategy.name}>
-                                                <FeatureStrategyMenuCard
+                                                <LegacyFeatureStrategyMenuCard
                                                     projectId={projectId}
                                                     featureId={featureId}
                                                     environmentId={