diff --git a/frontend/src/component/common/StrategySeparator/LegacyStrategySeparator.tsx b/frontend/src/component/common/StrategySeparator/LegacyStrategySeparator.tsx
deleted file mode 100644
index 6a1e8bc431..0000000000
--- a/frontend/src/component/common/StrategySeparator/LegacyStrategySeparator.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-// deprecated; remove with the `flagOverviewRedesign` flag
-import { Box, styled, useTheme } from '@mui/material';
-import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender.tsx';
-
-interface IStrategySeparatorProps {
- text: 'AND' | 'OR';
-}
-
-const StyledContent = styled('div')(({ theme }) => ({
- padding: theme.spacing(0.75, 1),
- color: theme.palette.text.primary,
- fontSize: theme.fontSizes.smallerBody,
- backgroundColor: theme.palette.background.elevation2,
- borderRadius: theme.shape.borderRadius,
- position: 'absolute',
- zIndex: theme.zIndex.fab,
- top: '50%',
- left: theme.spacing(2),
- transform: 'translateY(-50%)',
- lineHeight: 1,
-}));
-
-const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- backgroundColor: theme.palette.seen.primary,
- borderRadius: theme.shape.borderRadiusLarge,
- padding: theme.spacing(0.75, 1.5),
-}));
-
-/**
- * @deprecated remove with 'flagOverviewRedesign' flag. This pollutes a lot of places in the codebase 😞
- */
-export const StrategySeparator = ({ text }: IStrategySeparatorProps) => {
- const theme = useTheme();
-
- return (
-
- {text}}
- elseShow={() => (
- {text}
- )}
- />
-
- );
-};
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
deleted file mode 100644
index 2e60919674..0000000000
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Fragment } from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator';
-import type { ISegment } from 'interfaces/segment';
-import { SegmentItem } from 'component/common/SegmentItem/SegmentItem';
-
-interface IFeatureOverviewSegmentProps {
- segments?: ISegment[];
- disabled?: boolean | null;
-}
-
-export const FeatureOverviewSegment = ({
- segments,
- disabled = false,
-}: IFeatureOverviewSegmentProps) => {
- if (!segments || segments.length === 0) {
- return null;
- }
-
- return (
- <>
- {segments.map((segment, index) => (
-
- 0}
- show={}
- />
-
-
- ))}
- >
- );
-};
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx
deleted file mode 100644
index b3f0f8acf7..0000000000
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { Box, styled, Typography, useTheme } from '@mui/material';
-import CancelOutlined from '@mui/icons-material/CancelOutlined';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-
-interface ICustomParameterItem {
- text: string;
- input?: string | null;
- isRequired?: boolean;
-}
-
-const StyledWrapper = styled(Box)(({ theme }) => ({
- width: '100%',
- padding: theme.spacing(2, 3),
- borderRadius: theme.shape.borderRadiusMedium,
- border: `1px solid ${theme.palette.divider}`,
- display: 'flex',
- flexDirection: 'row',
- alignItems: 'center',
- gap: 2,
-}));
-
-export const CustomParameterItem = ({
- text,
- input = null,
- isRequired = false,
-}: ICustomParameterItem) => {
- const theme = useTheme();
-
- const color = input === null ? 'error' : 'neutral';
- const requiredError = isRequired && input === null;
-
- return (
-
-
- {`${input === null ? 'no value' : input}`}
-
-
-
-
-
- {' required parameter '}
-
-
-
- {' is not set '}
-
- >
- }
- elseShow={
- <>
-
- {' set on parameter '}
-
-
- >
- }
- />
-
-
- }
- elseShow={}
- />
-
- );
-};
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
deleted file mode 100644
index 7fe1c1119d..0000000000
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Fragment, type VFC } from 'react';
-import {
- parseParameterNumber,
- parseParameterString,
- parseParameterStrings,
-} from 'utils/parseParameter';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator';
-import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
-import { CustomParameterItem } from './CustomParameterItem/CustomParameterItem.tsx';
-
-interface ICustomStrategyProps {
- parameters: { [key: string]: string };
- strategyName: string;
-}
-
-export const CustomStrategyParams: VFC = ({
- strategyName,
- parameters,
-}) => {
- const { strategies } = useStrategies();
- const definition = strategies.find((strategyDefinition) => {
- return strategyDefinition.name === strategyName;
- });
-
- if (!definition?.editable) {
- return null;
- }
-
- const items = definition?.parameters.map((param) => {
- const paramValue = parameters[param.name];
- const isRequired = param.required;
-
- switch (param?.type) {
- case 'list': {
- const values = parseParameterStrings(paramValue);
- return (
- 0 ? values.join(', ') : null}
- />
- );
- }
- case 'percentage': {
- const percentage = parseParameterNumber(paramValue);
- const correctPercentage = !(
- paramValue === undefined ||
- paramValue === '' ||
- percentage < 0 ||
- percentage > 100
- );
- return (
-
- );
- }
- case 'boolean': {
- const bool = ['true', 'false'].includes(paramValue)
- ? paramValue
- : undefined;
- return (
-
- );
- }
- case 'string': {
- const value = parseParameterString(paramValue);
- return (
-
- );
- }
- case 'number': {
- const isCorrect = !(
- paramValue === undefined || paramValue === ''
- );
- const number = parseParameterNumber(paramValue);
- return (
-
- );
- }
- case 'default':
- return null;
- }
- return null;
- });
-
- return (
- <>
- {items.map((item, index) => (
-
- 0}
- show={}
- />
- {item}
-
- ))}
- >
- );
-};
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/DisabledStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/DisabledStrategyExecution.tsx
deleted file mode 100644
index 6184bf2851..0000000000
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/DisabledStrategyExecution.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { Fragment, type VFC } from 'react';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator';
-import { styled } from '@mui/material';
-import type {
- PlaygroundRequestSchema,
- PlaygroundStrategySchema,
-} from 'openapi';
-import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecutionParameters/StrategyExecutionParameters.tsx';
-import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams.tsx';
-import { formattedStrategyNames } from 'utils/strategyNames';
-import { StyledBoxSummary } from './StrategyExecution.styles';
-import { Badge } from 'component/common/Badge/Badge';
-import { ConstraintExecutionWithoutResults } from './ConstraintExecution/ConstraintExecutionWithoutResults.tsx';
-import { SegmentExecutionWithoutResult } from './SegmentExecution/SegmentExecutionWithoutResult.tsx';
-
-interface IDisabledStrategyExecutionProps {
- strategyResult: PlaygroundStrategySchema;
- percentageFill?: string;
- input?: PlaygroundRequestSchema;
-}
-
-const StyledStrategyExecutionWrapper = styled('div')(({ theme }) => ({
- padding: theme.spacing(0),
-}));
-
-export const DisabledStrategyExecution: VFC<
- IDisabledStrategyExecutionProps
-> = ({ strategyResult, input, percentageFill }) => {
- const { name, constraints, segments, parameters } = strategyResult;
-
- const hasSegments = Boolean(segments && segments.length > 0);
- const hasConstraints = Boolean(constraints && constraints?.length > 0);
- const hasExecutionParameters =
- name !== 'default' &&
- Object.keys(formattedStrategyNames).includes(name);
- const hasCustomStrategyParameters =
- Object.keys(parameters).length > 0 &&
- strategyResult.result.evaluationStatus === 'incomplete'; // Use of custom strategy can be more explicit from the API
-
- if (!parameters) {
- return null;
- }
-
- const items = [
- hasSegments && ,
- hasConstraints && (
-
- ),
- hasExecutionParameters && (
-
- ),
- hasCustomStrategyParameters && (
-
- ),
- name === 'default' && (
- ({
- width: '100%',
- color: theme.palette.text.secondary,
- })}
- >
- The standard strategy is ON{' '}
- for all users.
-
- ),
- ].filter(Boolean);
-
- return (
-
- {items.map((item, index) => (
-
- 0 &&
- (strategyResult.name === 'flexibleRollout'
- ? index < items.length
- : index < items.length - 1)
- }
- show={}
- />
- {item}
-
- ))}
-
- );
-};
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyDraggableItem.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyDraggableItem.tsx
deleted file mode 100644
index 4c6dd58c15..0000000000
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyDraggableItem.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import type { IReleasePlanMilestoneStrategy } from 'interfaces/releasePlans';
-import { type DragEventHandler, type RefObject, useRef } from 'react';
-import { Box, IconButton } from '@mui/material';
-import Edit from '@mui/icons-material/Edit';
-import Delete from '@mui/icons-material/DeleteOutlined';
-import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator';
-import { MilestoneStrategyItem } from './MilestoneStrategyItem.tsx';
-
-interface IMilestoneStrategyDraggableItemProps {
- strategy: Omit;
- index: number;
- isDragging?: boolean;
- onDragStartRef: (
- ref: RefObject,
- index: number,
- ) => DragEventHandler;
- onDragOver: (
- ref: RefObject,
- index: number,
- ) => DragEventHandler;
- onDragEnd: () => void;
- onDeleteClick: () => void;
- onEditClick: () => void;
-}
-
-export const MilestoneStrategyDraggableItem = ({
- strategy,
- index,
- isDragging,
- onDragStartRef,
- onDragOver,
- onDragEnd,
- onDeleteClick,
- onEditClick,
-}: IMilestoneStrategyDraggableItemProps) => {
- const ref = useRef(null);
- return (
-
- {index > 0 && }
-
-
-
-
-
-
-
- >
- }
- />
-
- );
-};
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx
deleted file mode 100644
index cc568894fb..0000000000
--- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Box, IconButton, styled } from '@mui/material';
-import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview';
-import {
- formatStrategyName,
- getFeatureStrategyIcon,
-} from 'utils/strategyNames';
-import type { IFeatureStrategy } from 'interfaces/strategy';
-import { StrategyExecution } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution';
-import type { DragEventHandler, ReactNode } from 'react';
-import DragIndicator from '@mui/icons-material/DragIndicator';
-
-const StyledStrategy = styled('div')(({ theme }) => ({
- background: theme.palette.background.paper,
-}));
-
-const DragIcon = styled(IconButton)({
- padding: 0,
- cursor: 'inherit',
- transition: 'color 0.2s ease-in-out',
-});
-
-const StyledHeader = styled('div', {
- shouldForwardProp: (prop) => prop !== 'draggable',
-})<{ draggable: boolean }>(({ theme, draggable }) => ({
- display: 'flex',
- padding: theme.spacing(2),
- gap: theme.spacing(1),
- alignItems: 'center',
- color: theme.palette.text.primary,
- '& > svg': {
- fill: theme.palette.action.disabled,
- },
- borderBottom: `1px solid ${theme.palette.divider}`,
-}));
-
-const StyledStrategyExecution = styled('div')(({ theme }) => ({
- padding: theme.spacing(2),
-}));
-
-interface IReleasePlanMilestoneStrategyProps {
- strategy: IFeatureStrategy;
- onDragStart?: DragEventHandler;
- onDragEnd?: DragEventHandler;
- actions?: ReactNode;
-}
-
-export const MilestoneStrategyItem = ({
- strategy,
- onDragStart,
- onDragEnd,
- actions,
-}: IReleasePlanMilestoneStrategyProps) => {
- const Icon = getFeatureStrategyIcon(strategy.strategyName);
-
- return (
-
-
-
-
-
-
- {`${formatStrategyName(String(strategy.strategyName))}${strategy.title ? `: ${strategy.title}` : ''}`}
- theme.spacing(6),
- alignItems: 'center',
- }}
- >
- {actions}
-
-
-
-
- {strategy.variants &&
- strategy.variants.length > 0 &&
- (strategy.disabled ? (
-
-
-
- ) : (
-
- ))}
-
-
- );
-};