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 (
-
-
-
-
-
-
-
-
- theme.typography.caption.fontSize,
- fontWeight: (theme) =>
- theme.typography.fontWeightRegular,
- width: '100%',
- }}
- >
- {description}
-
-
-
-
-
-
-
-
- );
-};
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 &
- Partial;
- 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 (
-
-
-
-
-
-
-
- theme.typography.caption.fontSize,
- width: '100%',
- }}
- >
- {strategy.description}
-
-
- );
-};
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 (
-
-
-
- Release templates
-
-
-
- {!templates.length ? (
-
-
-
-
-
- Create your own release templates
-
-
- Standardize your rollouts and save time by reusing
- predefined strategies. Find release templates in the
- side menu under{' '}
- navigate('/release-templates')}
- >
- Configure > Release templates
-
-
-
- ) : (
-
- {templates.map((template) => (
-
- onAddReleasePlan(template)}
- onPreviewClick={() =>
- onReviewReleasePlan(template)
- }
- />
-
- ))}
-
- )}
-
- );
- };
-
- return (
-
-
-
- {onlyReleasePlans ? 'Select template' : 'Add configuration'}
-
-
-
-
-
-
- {onlyReleasePlans ? (
- renderReleasePlanTemplates()
- ) : (
- <>
-
-
-
- Standard strategies
-
-
-
-
-
-
-
- {standardStrategies.map((strategy) => (
-
-
-
- ))}
-
-
- {renderReleasePlanTemplates()}
- {advancedAndCustomStrategies.length > 0 && (
-
-
-
- Custom and advanced strategies
-
-
-
-
- {advancedAndCustomStrategies.map(
- (strategy) => (
-
-
-
- ),
- )}
-
-
- )}
- >
- )}
-
-
- );
-};
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>;
- 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 (
-
-
-
-
-
-
- Go back
-
-
-
-
-
-
-
- {activeReleasePlan && (
-
- This feature environment currently has{' '}
- {activeReleasePlan.name} -{' '}
- {activeReleasePlan.milestones[0].name}
- {environmentEnabled ? ' running' : ' paused'}. Adding a
- new release plan will replace the existing release plan.
-
- )}
-
-
-
- {crProtected && (
-
- Adding release template{' '}
- {template?.name} to{' '}
- {featureName} in{' '}
- {environment}.
-
- )}
-
-
-
-
-
- );
-};