From b66cff9af585702e5868d731db34287938bfddf8 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Fri, 13 Jun 2025 12:06:48 +0200 Subject: [PATCH] Chore(1-3825)/remove legacy strategy separator (#10137) Deletes the legacy strategy separator and removes all references to it. Luckily, all references to the separator were in dangling files that could themselves be deleted directly. --- .../LegacyStrategySeparator.tsx | 55 --------- .../FeatureOverviewSegment.tsx | 33 ----- .../CustomParameterItem.tsx | 97 --------------- .../CustomStrategyParams.tsx | 115 ------------------ .../DisabledStrategyExecution.tsx | 92 -------------- .../MilestoneStrategyDraggableItem.tsx | 65 ---------- .../MilestoneCard/MilestoneStrategyItem.tsx | 101 --------------- 7 files changed, 558 deletions(-) delete mode 100644 frontend/src/component/common/StrategySeparator/LegacyStrategySeparator.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx delete mode 100644 frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/DisabledStrategyExecution.tsx delete mode 100644 frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyDraggableItem.tsx delete mode 100644 frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx 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 ? ( - - - - ) : ( - - ))} - - - ); -};