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" />
2025-09-19 17:52:45 +02:00 · 2025-09-12 10:14:21 +01:00 · 2025-09-12 10:14:21 +01:00 · af0b3529b7
commit af0b3529b7
parent f9267d9cb4
8 changed files with 450 additions and 175 deletions
--- a/frontend/src/component/common/Truncator/Truncator.tsx
+++ b/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}
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/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';
-
-interface IFeatureStrategyMenuCardProps {
-    projectId: string;
-    featureId: string;
-    environmentId: string;
-    strategy: Pick<IStrategy, 'name' | 'displayName' | 'description'> &
-        Partial<IStrategy>;
-    defaultStrategy?: boolean;
-    onClose: () => void;
-}
+import type { ReactNode } from 'react';

 const StyledIcon = styled('div')(({ theme }) => ({
-    width: theme.spacing(3),
+    display: 'flex',
+    alignItems: 'center',
    '& > svg': {
-        width: theme.spacing(2.25),
-        height: theme.spacing(2.25),
+        width: theme.spacing(3.5),
+        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': {
-        borderColor: theme.palette.primary.main,
+    position: 'relative',
+    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',
-    alignItems: 'center',
-    width: '100%',
+    transition: 'opacity 0.2s ease-in-out',
+    gap: theme.spacing(2),
 }));

+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,
-    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}
+    name,
+    description,
+    icon,
+    isDefault,
+    children,
+}: IFeatureStrategyMenuCardProps) => (
+    <StyledCard isDefault={isDefault}>
+        <StyledCardContent className='cardContent'>
+            <StyledIcon>{icon}</StyledIcon>
+            <StyledCardDescription>
+                <StyledName lines={1} title={name} arrow>
+                    {name}
+                </StyledName>
+                {description && (
+                    <Truncator lines={2} title={description} arrow>
+                        {description}
                    </Truncator>
+                )}
+            </StyledCardDescription>
+        </StyledCardContent>
+        <StyledCardActions className='cardActions'>
+            {children}
+        </StyledCardActions>
    </StyledCard>
 );
-};
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCardAction.tsx
+++ b/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>
+);
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
+++ b/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={
-                                            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.
-                                                </>
-                                            )
-                                        }
+                                        tooltip={projectDefaultTooltip}
                                        size='16px'
                                    />
                                </StyledStrategyModalSectionHeader>
@ -215,28 +256,16 @@ export const FeatureStrategyMenuCards = ({
                        </FeatureStrategyMenuCardsSection>
                        <FeatureStrategyMenuCardsSection>
                            {shouldRender('default') && (
-                                <FeatureStrategyMenuCard
+                                <FeatureStrategyMenuCardsDefaultStrategy
                                    projectId={projectId}
-                                    featureId={featureId}
                                    environmentId={environmentId}
-                                    strategy={defaultStrategy}
-                                    defaultStrategy
+                                    featureId={featureId}
+                                    onConfigure={onConfigure}
                                    onClose={onClose}
                                />
                            )}
                            {shouldRender('standard') && (
-                                <>
-                                    {standardStrategies.map((strategy) => (
-                                        <FeatureStrategyMenuCard
-                                            key={strategy.name}
-                                            projectId={projectId}
-                                            featureId={featureId}
-                                            environmentId={environmentId}
-                                            strategy={strategy}
-                                            onClose={onClose}
-                                        />
-                                    ))}
-                                </>
+                                <>{standardStrategies.map(renderStrategy)}</>
                            )}
                        </FeatureStrategyMenuCardsSection>
                    </Box>
@ -253,30 +282,12 @@ export const FeatureStrategyMenuCards = ({
                    <>
                        {advancedStrategies.length > 0 && (
                            <FeatureStrategyMenuCardsSection title='Advanced strategies'>
-                                {advancedStrategies.map((strategy) => (
-                                    <FeatureStrategyMenuCard
-                                        key={strategy.name}
-                                        projectId={projectId}
-                                        featureId={featureId}
-                                        environmentId={environmentId}
-                                        strategy={strategy}
-                                        onClose={onClose}
-                                    />
-                                ))}
+                                {advancedStrategies.map(renderStrategy)}
                            </FeatureStrategyMenuCardsSection>
                        )}
                        {customStrategies.length > 0 && (
                            <FeatureStrategyMenuCardsSection title='Custom strategies'>
-                                {customStrategies.map((strategy) => (
-                                    <FeatureStrategyMenuCard
-                                        key={strategy.name}
-                                        projectId={projectId}
-                                        featureId={featureId}
-                                        environmentId={environmentId}
-                                        strategy={strategy}
-                                        onClose={onClose}
-                                    />
-                                ))}
+                                {customStrategies.map(renderStrategy)}
                            </FeatureStrategyMenuCardsSection>
                        )}
                    </>
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsDefaultStrategy.tsx
+++ b/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>
+    );
+};
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCardsReleaseTemplates.tsx
+++ b/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}
+                            description={template.description}
+                            icon={<Icon />}
+                        >
+                            <FeatureStrategyMenuCardAction
+                                onClick={() => onReviewReleasePlan(template)}
+                            >
+                                Preview
+                            </FeatureStrategyMenuCardAction>
+                            <FeatureStrategyMenuCardAction
                                onClick={() => onAddReleasePlan(template)}
-                            onPreviewClick={() => onReviewReleasePlan(template)}
-                        />
+                            >
+                                Apply
+                            </FeatureStrategyMenuCardAction>
+                        </FeatureStrategyMenuCard>
                    ))}
                    {slicedTemplates.length < templates.length &&
                        templates.length > RELEASE_TEMPLATE_DISPLAY_LIMIT && (
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx
+++ b/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>
+    );
+};
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx
+++ b/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={