From 9e7f68abc3f2bfb1c15f0f943f8f1e0afef78953 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 6 Nov 2025 08:48:01 +0000
Subject: [PATCH] refactor: clean up dead code after removing newStrategyModal
 flag (#10926)

https://linear.app/unleash/issue/2-3885/clean-up-legacy-code

Cleans up dead code after removing the `newStrategyModal` feature flag.
---
 .../FeatureReleasePlanCard.tsx                | 138 --------
 .../LegacyFeatureStrategyMenuCard.tsx         | 119 -------
 .../LegacyFeatureStrategyMenuCards.tsx        | 294 ------------------
 .../LegacyReleasePlanReviewDialog.tsx         | 148 ---------
 4 files changed, 699 deletions(-)
 delete mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
 delete mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx
 delete mode 100644 frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx
 delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx

diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
deleted file mode 100644
index c38dbc5891..0000000000
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import { getFeatureStrategyIcon } from 'utils/strategyNames';
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { Button, styled } from '@mui/material';
-import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
-import { Truncator } from 'component/common/Truncator/Truncator';
-
-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 CardContent = styled('div')(({ theme }) => ({
-    width: '100%',
-    transition: 'opacity 0.2s ease-in-out',
-}));
-
-const HoverButtonsContainer = styled('div')(({ theme }) => ({
-    position: 'absolute',
-    background: theme.palette.background.paper,
-    padding: theme.spacing(1),
-    top: theme.spacing(1),
-    right: theme.spacing(1),
-    display: 'flex',
-    gap: theme.spacing(1),
-    opacity: 0,
-    transition: 'opacity 0.1s ease-in-out',
-}));
-
-const StyledCard = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '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),
-    textAlign: 'left',
-    overflow: 'hidden',
-    position: 'relative',
-    '&:hover .cardContent, &:focus-within .cardContent': {
-        opacity: 0.5,
-    },
-    '&:hover .buttonContainer, &:focus-within .buttonContainer': {
-        opacity: 1,
-    },
-}));
-
-const StyledTopRow = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-}));
-
-interface IFeatureReleasePlanCardProps {
-    template: IReleasePlanTemplate;
-    onClick: () => void;
-    onPreviewClick: (e: React.MouseEvent) => void;
-}
-
-export const FeatureReleasePlanCard = ({
-    template: { name, description },
-    onClick,
-    onPreviewClick,
-}: IFeatureReleasePlanCardProps) => {
-    const Icon = getFeatureStrategyIcon('releasePlanTemplate');
-
-    const handleUseClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onClick();
-    };
-
-    const handlePreviewClick = (e: React.MouseEvent) => {
-        e.stopPropagation();
-        onPreviewClick(e);
-    };
-
-    return (
-        <StyledCard>
-            <CardContent className='cardContent'>
-                <StyledTopRow>
-                    <StyledIcon>
-                        <Icon />
-                    </StyledIcon>
-                    <StyledName text={name} maxWidth='200' maxLength={25} />
-                </StyledTopRow>
-                <Truncator
-                    lines={1}
-                    title={description}
-                    arrow
-                    sx={{
-                        fontSize: (theme) => theme.typography.caption.fontSize,
-                        fontWeight: (theme) =>
-                            theme.typography.fontWeightRegular,
-                        width: '100%',
-                    }}
-                >
-                    {description}
-                </Truncator>
-            </CardContent>
-
-            <HoverButtonsContainer className='buttonContainer'>
-                <Button
-                    variant='contained'
-                    size='small'
-                    onClick={handleUseClick}
-                    tabIndex={0}
-                >
-                    Use
-                </Button>
-                <Button
-                    variant='outlined'
-                    size='small'
-                    onClick={handlePreviewClick}
-                >
-                    Preview
-                </Button>
-            </HoverButtonsContainer>
-        </StyledCard>
-    );
-};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx
deleted file mode 100644
index 44b159c7a7..0000000000
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCard/LegacyFeatureStrategyMenuCard.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-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>
-    );
-};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx
deleted file mode 100644
index f8e78eb71c..0000000000
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/LegacyFeatureStrategyMenuCards/LegacyFeatureStrategyMenuCards.tsx
+++ /dev/null
@@ -1,294 +0,0 @@
-import { Link, styled, Typography, Box, IconButton } from '@mui/material';
-import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
-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';
-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}>
-                                    <LegacyFeatureStrategyMenuCard
-                                        projectId={projectId}
-                                        featureId={featureId}
-                                        environmentId={environmentId}
-                                        strategy={defaultStrategy}
-                                        defaultStrategy
-                                        onClose={onClose}
-                                    />
-                                </CardWrapper>
-                                {standardStrategies.map((strategy) => (
-                                    <CardWrapper key={strategy.name}>
-                                        <LegacyFeatureStrategyMenuCard
-                                            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}>
-                                                <LegacyFeatureStrategyMenuCard
-                                                    projectId={projectId}
-                                                    featureId={featureId}
-                                                    environmentId={
-                                                        environmentId
-                                                    }
-                                                    strategy={strategy}
-                                                    onClose={onClose}
-                                                />
-                                            </CardWrapper>
-                                        ),
-                                    )}
-                                </GridSection>
-                            </Box>
-                        )}
-                    </>
-                )}
-            </ScrollableContent>
-        </GridContainer>
-    );
-};
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx
deleted file mode 100644
index 4642537e6b..0000000000
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
-import { ReleasePlan } from './ReleasePlan.tsx';
-import { useReleasePlanPreview } from 'hooks/useReleasePlanPreview';
-import {
-    styled,
-    Typography,
-    Alert,
-    Box,
-    IconButton,
-    Dialog,
-    DialogContent,
-    DialogActions,
-    Button,
-} from '@mui/material';
-import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
-import { useFeatureReleasePlans } from 'hooks/api/getters/useFeatureReleasePlans/useFeatureReleasePlans';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import CloseIcon from '@mui/icons-material/Close';
-
-const StyledDialog = styled(Dialog)(({ theme }) => ({
-    '& .MuiDialog-paper': {
-        borderRadius: theme.shape.borderRadiusLarge,
-        maxWidth: theme.spacing(85),
-    },
-}));
-
-const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
-    padding: theme.spacing(2, 4, 4),
-}));
-
-const TopRow = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: theme.spacing(2),
-}));
-
-const BackButton = styled(Box)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-}));
-
-const StyledBackIcon = styled(ArrowBackIcon)(({ theme }) => ({
-    marginRight: theme.spacing(1),
-    color: theme.palette.primary.main,
-    display: 'flex',
-    alignSelf: 'center',
-}));
-
-const BackText = styled(Typography)(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightMedium,
-    display: 'flex',
-    alignItems: 'center',
-    lineHeight: 1,
-}));
-
-interface IReleasePlanAddDialogProps {
-    open: boolean;
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-    onConfirm: () => void;
-    template: IReleasePlanTemplate;
-    projectId: string;
-    featureName: string;
-    environment: string;
-    crProtected?: boolean;
-}
-
-export const LegacyReleasePlanReviewDialog = ({
-    open,
-    setOpen,
-    onConfirm,
-    template,
-    projectId,
-    featureName,
-    environment,
-    crProtected,
-}: IReleasePlanAddDialogProps) => {
-    const { feature } = useFeature(projectId, featureName);
-    const { releasePlans } = useFeatureReleasePlans(
-        projectId,
-        featureName,
-        environment,
-    );
-
-    const activeReleasePlan = releasePlans[0];
-
-    const environmentData = feature?.environments.find(
-        ({ name }) => name === environment,
-    );
-    const environmentEnabled = environmentData?.enabled;
-
-    const planPreview = useReleasePlanPreview(
-        template.id,
-        featureName,
-        environment,
-    );
-
-    const handleClose = () => setOpen(false);
-
-    return (
-        <StyledDialog open={open} onClose={handleClose} fullWidth maxWidth='md'>
-            <DialogContent>
-                <TopRow>
-                    <BackButton onClick={handleClose}>
-                        <StyledBackIcon />
-                        <BackText variant='body2' color='primary'>
-                            Go back
-                        </BackText>
-                    </BackButton>
-                    <IconButton
-                        size='small'
-                        onClick={handleClose}
-                        edge='end'
-                        aria-label='close'
-                    >
-                        <CloseIcon fontSize='small' />
-                    </IconButton>
-                </TopRow>
-
-                {activeReleasePlan && (
-                    <Alert severity='error' sx={{ mb: 1 }}>
-                        This feature environment currently has{' '}
-                        <strong>{activeReleasePlan.name}</strong> -{' '}
-                        <strong>{activeReleasePlan.milestones[0].name}</strong>
-                        {environmentEnabled ? ' running' : ' paused'}. Adding a
-                        new release plan will replace the existing release plan.
-                    </Alert>
-                )}
-                <div>
-                    <ReleasePlan plan={planPreview} readonly />
-                </div>
-                {crProtected && (
-                    <Typography sx={{ mt: 4 }}>
-                        <strong>Adding</strong> release template{' '}
-                        <strong>{template?.name}</strong> to{' '}
-                        <strong>{featureName}</strong> in{' '}
-                        <strong>{environment}</strong>.
-                    </Typography>
-                )}
-            </DialogContent>
-            <StyledDialogActions>
-                <Button variant='contained' color='primary' onClick={onConfirm}>
-                    {crProtected ? 'Add suggestion to draft' : 'Use template'}
-                </Button>
-            </StyledDialogActions>
-        </StyledDialog>
-    );
-};