From 0e2f7374e561009eaac6cbab25dcc6e6ab6cd588 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 24 Apr 2025 16:01:35 +0200 Subject: [PATCH] Feat: update variants placement (#9832) --- .../StrategyEvaluationItem.tsx | 13 +- .../SplitPreviewTooltip.tsx | 97 ++++++++ .../VariantsSplitPreview.tsx | 145 ++++++++++++ .../StrategyItem/LegacyStrategyItem.tsx | 6 +- .../RolloutParameter/RolloutParameter.tsx | 9 +- .../RolloutVariants/RolloutVariants.tsx | 71 ------ .../RolloutVariants/RolloutVariants.tsx | 40 ++++ .../StrategyExecution/StrategyExecution.tsx | 35 +-- .../hooks/useStrategyParameters.tsx | 1 - .../ReleasePlanMilestoneStrategy.tsx | 6 +- .../StrategyTypes/NewStrategyVariants.tsx | 12 +- .../SplitPreviewSlider/SplitPreviewSlider.tsx | 214 ------------------ .../StrategyTypes/StrategyVariants.tsx | 12 +- .../StrategyItem/FeatureStrategyItem.tsx | 7 +- .../LegacyFeatureStrategyItem.tsx | 4 +- .../ConstraintError/LegacyConstraintError.tsx | 0 .../ConstraintExecution.tsx | 0 .../ConstraintExecutionWithoutResults.tsx | 0 .../ConstraintOk/LegacyConstraintOk.tsx | 0 .../LegacyConstraintExecution.tsx | 0 .../CustomParameterItem.tsx | 0 .../CustomStrategyParams.tsx | 0 .../DisabledStrategyExecution.tsx | 0 .../LegacyStrategyExecution.tsx | 0 .../PlaygroundParameterItem.tsx | 0 .../PlaygroundStrategyExecution.tsx} | 19 +- .../LegacySegmentExecution.tsx | 0 .../SegmentExecution.styles.ts | 0 .../SegmentExecution/SegmentExecution.tsx | 0 .../SegmentExecutionWithoutResult.tsx | 0 .../StrategyExecution.styles.tsx | 0 .../StrategyExecutionParameters.tsx | 0 .../helpers.ts | 0 ...egacyProjectEnvironmentDefaultStrategy.tsx | 4 +- .../MilestoneCard/MilestoneStrategyItem.tsx | 8 +- .../MilestoneStrategyVariants.tsx | 4 +- 36 files changed, 367 insertions(+), 340 deletions(-) create mode 100644 frontend/src/component/common/VariantsSplitPreview/SplitPreviewTooltip/SplitPreviewTooltip.tsx create mode 100644 frontend/src/component/common/VariantsSplitPreview/VariantsSplitPreview.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutVariants/RolloutVariants.tsx create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutVariants/RolloutVariants.tsx delete mode 100644 frontend/src/component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider.tsx rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/ConstraintExecution/ConstraintError/LegacyConstraintError.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/ConstraintExecution/ConstraintExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/ConstraintExecution/ConstraintExecutionWithoutResults.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/ConstraintExecution/ConstraintOk/LegacyConstraintOk.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/ConstraintExecution/LegacyConstraintExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/CustomStrategyParams/CustomStrategyParams.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/DisabledStrategyExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/LegacyStrategyExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/PlaygroundParameterItem/PlaygroundParameterItem.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution/StrategyExecution.tsx => PlaygroundStrategyExecution/PlaygroundStrategyExecution.tsx} (80%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/SegmentExecution/LegacySegmentExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/SegmentExecution/SegmentExecution.styles.ts (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/SegmentExecution/SegmentExecution.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/SegmentExecution/SegmentExecutionWithoutResult.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/StrategyExecution.styles.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/StrategyExecutionParameters/StrategyExecutionParameters.tsx (100%) rename frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/{StrategyExecution => PlaygroundStrategyExecution}/helpers.ts (100%) diff --git a/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx index d1772b6f8c..553d1cb6a7 100644 --- a/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx +++ b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx @@ -5,6 +5,7 @@ import { disabledStrategyClassName } from 'component/common/StrategyItemContaine export type StrategyEvaluationItemProps = { type?: ReactNode; children?: ReactNode; + alignType?: 'center' | 'top'; }; const StyledContainer = styled('div')(({ theme }) => ({ @@ -22,6 +23,8 @@ const StyledContent = styled('div')(({ theme }) => ({ display: 'flex', gap: theme.spacing(1), alignItems: 'center', + flexGrow: 1, + position: 'relative', [`.${disabledStrategyClassName} &`]: { filter: 'grayscale(1)', color: theme.palette.text.secondary, @@ -31,7 +34,9 @@ const StyledContent = styled('div')(({ theme }) => ({ }, })); -const StyledType = styled('span')(({ theme }) => ({ +const StyledType = styled('span')<{ + align?: 'top' | 'center'; +}>(({ theme, align }) => ({ display: 'block', flexShrink: 0, fontSize: theme.fontSizes.smallerBody, @@ -41,6 +46,9 @@ const StyledType = styled('span')(({ theme }) => ({ [theme.breakpoints.down('sm')]: { width: '100%', }, + ...(align === 'top' && { + alignSelf: 'flex-start', + }), })); /** @@ -49,10 +57,11 @@ const StyledType = styled('span')(({ theme }) => ({ export const StrategyEvaluationItem: FC = ({ type, children, + alignType, }) => { return ( - {type} + {type} {children} ); diff --git a/frontend/src/component/common/VariantsSplitPreview/SplitPreviewTooltip/SplitPreviewTooltip.tsx b/frontend/src/component/common/VariantsSplitPreview/SplitPreviewTooltip/SplitPreviewTooltip.tsx new file mode 100644 index 0000000000..f89c82240a --- /dev/null +++ b/frontend/src/component/common/VariantsSplitPreview/SplitPreviewTooltip/SplitPreviewTooltip.tsx @@ -0,0 +1,97 @@ +import { Box, styled, Typography } from '@mui/material'; +import type { StrategyVariantSchema } from 'openapi'; + +const StyledTooltipContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', +})); + +const StyledVariantContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + minWidth: '250px', + gap: theme.spacing(1), +})); + +const StyledPayloadContainer = styled(Box)(({ theme }) => ({ + padding: theme.spacing(1, 0, 0.75, 0), + flexDirection: 'column', +})); + +const StyledPayloadLabel = styled('span')(({ theme }) => ({ + marginBottom: theme.spacing(1), + fontSize: theme.typography.body2.fontSize, +})); + +const StyledVariantBox = styled(Box, { + shouldForwardProp: (prop) => prop !== 'index', +})<{ index: number }>(({ theme, index }) => ({ + display: 'flex', + alignItems: 'center', + figure: { + margin: 0, + padding: 0, + width: theme.spacing(1.6), + height: theme.spacing(1.6), + borderRadius: '50%', + background: + theme.palette.variants[index % theme.palette.variants.length], + }, +})); + +const StyledVariantType = styled('span')(({ theme }) => ({ + display: 'inline-block', + background: theme.palette.background.elevation2, + borderRadius: theme.shape.borderRadiusLarge, + padding: theme.spacing(0.25, 1), + align: 'center', + fontSize: theme.fontSizes.smallBody, +})); + +const StyledVariantPayload = styled('code')(({ theme }) => ({ + display: 'inline-block', + background: theme.palette.background.elevation2, + borderRadius: theme.shape.borderRadiusLarge, + padding: theme.spacing(0.25, 1), + fontSize: theme.fontSizes.smallerBody, +})); + +type SplitPreviewTooltipProps = { + variant: StrategyVariantSchema; + index: number; + selected?: boolean; +}; + +export const SplitPreviewTooltip = ({ + variant: { name, weight, payload }, + index, + selected, +}: SplitPreviewTooltipProps) => ( + + + +
+ + + + {weight / 10}% - {name} + + + + {payload ? ( + + + {payload.type} + {' payload: '} + + {payload.value} + + ) : null} + +); diff --git a/frontend/src/component/common/VariantsSplitPreview/VariantsSplitPreview.tsx b/frontend/src/component/common/VariantsSplitPreview/VariantsSplitPreview.tsx new file mode 100644 index 0000000000..13df270018 --- /dev/null +++ b/frontend/src/component/common/VariantsSplitPreview/VariantsSplitPreview.tsx @@ -0,0 +1,145 @@ +import { Box, Typography, styled } from '@mui/material'; +import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; +import { Truncator } from 'component/common/Truncator/Truncator'; +import type { StrategyVariantSchema } from 'openapi'; +import { SplitPreviewTooltip } from './SplitPreviewTooltip/SplitPreviewTooltip'; + +const StyledContainer = styled(Box)(() => ({ + display: 'flex', + width: '100%', + position: 'relative', +})); + +const StyledVariantItem = styled(Box)<{ selected?: boolean }>( + ({ theme, selected }) => ({ + position: 'relative', + fontSize: theme.fontSizes.smallerBody, + ...(selected + ? { + fontWeight: theme.typography.fontWeightBold, + } + : {}), + }), +); + +const StyledVariantItemTrack = styled(Box)<{ + index: number; + hasError?: boolean; + isFirst?: boolean; + isLast?: boolean; +}>(({ theme, index, hasError, isFirst, isLast }) => ({ + height: theme.spacing(2), + width: '100%', + position: 'relative', + color: hasError ? theme.palette.error.main : 'inherit', + background: theme.palette.variants[index % theme.palette.variants.length], + ...(isFirst + ? { + borderTopLeftRadius: theme.shape.borderRadius, + borderBottomLeftRadius: theme.shape.borderRadius, + } + : {}), + ...(isLast + ? { + borderTopRightRadius: theme.shape.borderRadius, + borderBottomRightRadius: theme.shape.borderRadius, + } + : {}), +})); + +const StyledTrackPercentage = styled(Box)(({ theme }) => ({ + padding: theme.spacing(0.25, 0.25), + lineHeight: 1, +})); + +const StyledVariantItemInfo = styled(Box)(({ theme }) => ({ + padding: theme.spacing(0.125, 0.25, 0), + overflow: 'hidden', + color: theme.palette.text.secondary, +})); + +const StyledHeaderContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(1), +})); + +const StyledTypography = styled(Typography)(({ theme }) => ({ + marginY: theme.spacing(1), +})); + +type VariantsSplitPreviewProps = { + variants: StrategyVariantSchema[]; + weightsError?: boolean; + header?: boolean; + selected?: string; +}; + +export const VariantsSplitPreview = ({ + variants, + weightsError, + header = true, + selected, +}: VariantsSplitPreviewProps) => { + if (variants.length < 1) { + return null; + } + + return ( + ({ marginTop: theme.spacing(header ? 2 : 0) })}> + {header ? ( + + + Flag variants ({variants.length}) + + + ) : null} + + {variants.map((variant, index) => { + const value = variant.weight / 10; + if (value === 0) { + return null; + } + return ( + e.preventDefault()} + titleComponent={ + + } + > + + + + + {`${value}%`} + + + + + + {variant.name} + + + + + ); + })} + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/LegacyStrategyItem.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/LegacyStrategyItem.tsx index cae14a3ee8..c2b8786467 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/LegacyStrategyItem.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/LegacyStrategyItem.tsx @@ -13,7 +13,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import { CopyStrategyIconMenu } from './CopyStrategyIconMenu/CopyStrategyIconMenu'; import { StrategyItemContainer } from 'component/common/StrategyItemContainer/LegacyStrategyItemContainer'; import MenuStrategyRemove from './MenuStrategyRemove/MenuStrategyRemove'; -import SplitPreviewSlider from 'component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; import { Box } from '@mui/material'; interface IStrategyItemProps { environmentId: string; @@ -93,10 +93,10 @@ export const StrategyItem: FC = ({ strategy.variants.length > 0 && (strategy.disabled ? ( - + ) : ( - + ))} ); diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutParameter.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutParameter.tsx index f71443579a..56c5560b88 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutParameter.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutParameter.tsx @@ -1,17 +1,15 @@ +import type { FC } from 'react'; import { StrategyEvaluationChip } from 'component/common/ConstraintsList/StrategyEvaluationChip/StrategyEvaluationChip'; import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; -import type { ParametersSchema, StrategyVariantSchema } from 'openapi'; -import type { FC } from 'react'; +import type { ParametersSchema } from 'openapi'; import { parseParameterNumber } from 'utils/parseParameter'; -import { RolloutVariants } from './RolloutVariants/RolloutVariants'; export const RolloutParameter: FC<{ value: string; parameters?: ParametersSchema; hasConstraints?: boolean; - variants?: StrategyVariantSchema[]; displayGroupId?: boolean; -}> = ({ value, parameters, hasConstraints, variants, displayGroupId }) => { +}> = ({ value, parameters, hasConstraints, displayGroupId }) => { const percentage = parseParameterNumber(value); const explainStickiness = @@ -43,7 +41,6 @@ export const RolloutParameter: FC<{ ) : null}

- ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutVariants/RolloutVariants.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutVariants/RolloutVariants.tsx deleted file mode 100644 index b4389b48de..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutParameter/RolloutVariants/RolloutVariants.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import { styled } from '@mui/material'; -import { StrategyEvaluationChip } from 'component/common/ConstraintsList/StrategyEvaluationChip/StrategyEvaluationChip'; -import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; -import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip'; -import type { StrategyVariantSchema } from 'openapi'; -import type { FC } from 'react'; - -const StyledVariantChip = styled(StrategyEvaluationChip)<{ order: number }>( - ({ theme, order }) => ({ - borderRadius: theme.shape.borderRadiusExtraLarge, - border: 'none', - color: theme.palette.text.primary, - background: - theme.palette.variants[order % theme.palette.variants.length], - fontWeight: theme.typography.fontWeightRegular, - }), -); - -const StyledPayloadHeader = styled('div')(({ theme }) => ({ - fontSize: theme.typography.body2.fontSize, - marginBottom: theme.spacing(1), -})); - -const StyledValuesContainer = styled('div')(({ theme }) => ({ - display: 'flex', - gap: theme.spacing(0.75, 0.5), - flexWrap: 'wrap', -})); - -export const RolloutVariants: FC<{ - variants?: StrategyVariantSchema[]; -}> = ({ variants }) => { - if (!variants?.length) { - return null; - } - - return ( - - - {variants.map((variant, i) => ( - - - Payload: - - {variant.payload?.value} - - ) : null - } - key={variant.name} - > - - - {variant.weight / 10}% – {variant.name} - - - } - /> - - ))} - - - ); -}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutVariants/RolloutVariants.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutVariants/RolloutVariants.tsx new file mode 100644 index 0000000000..fd0f6354bd --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutVariants/RolloutVariants.tsx @@ -0,0 +1,40 @@ +import { styled } from '@mui/material'; +import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; +import type { StrategyVariantSchema } from 'openapi'; +import type { FC } from 'react'; + +const StyledContainer = styled('div')(({ theme }) => ({ + padding: theme.spacing(3.5, 2, 0.5), +})); + +const StyledTrack = styled('div')(() => ({ + width: '100%', + position: 'relative', +})); + +export const RolloutVariants: FC<{ + variants?: StrategyVariantSchema[]; + selected?: StrategyVariantSchema['name']; +}> = ({ variants, selected }) => { + if (!variants?.length) { + return null; + } + + return ( + + + + + + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx index 97d60875e0..6a75941a71 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx @@ -14,6 +14,7 @@ import { ConstraintListItem, ConstraintsList, } from 'component/common/ConstraintsList/ConstraintsList'; +import { RolloutVariants } from './RolloutVariants/RolloutVariants'; type StrategyExecutionProps = { strategy: IFeatureStrategyPayload | FeatureStrategySchema; @@ -48,21 +49,25 @@ export const StrategyExecution: FC = ({ } return ( - - {strategySegments?.map((segment) => ( - - ))} - {constraints?.map((constraint, index) => ( - - ))} - {(isCustomStrategy ? customStrategyItems : strategyParameters).map( - (item, index) => ( + <> + + {strategySegments?.map((segment) => ( + + ))} + {constraints?.map((constraint, index) => ( + + ))} + {(isCustomStrategy + ? customStrategyItems + : strategyParameters + ).map((item, index) => ( {item} - ), - )} - + ))} + + + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters.tsx index ba081d8cd8..96a337cbf6 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters.tsx @@ -30,7 +30,6 @@ export const useStrategyParameters = ( parameters={parameters} hasConstraints={hasConstraints} displayGroupId={displayGroupId} - variants={variants} /> ); } diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx index d7168636b1..d60e03c62e 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStrategy.tsx @@ -1,7 +1,7 @@ // deprecated; remove with `flagOverviewRedesign` flag import { Box, styled } from '@mui/material'; import { StrategyExecution } from '../../FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution'; -import SplitPreviewSlider from 'component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; import { formatStrategyName, getFeatureStrategyIcon, @@ -46,10 +46,10 @@ export const ReleasePlanMilestoneStrategy = ({ strategy.variants.length > 0 && (strategy.disabled ? ( - + ) : ( - + ))} ); diff --git a/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx index add4389fa1..2ff4ee2fe5 100644 --- a/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx +++ b/frontend/src/component/feature/StrategyTypes/NewStrategyVariants.tsx @@ -1,17 +1,17 @@ import { VariantForm } from '../FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm'; -import { updateWeightEdit } from '../../common/util'; +import { updateWeightEdit } from 'component/common/util'; import type React from 'react'; import { type FC, useEffect, useState } from 'react'; import type { IFeatureVariantEdit } from '../FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/EnvironmentVariantsModal'; -import PermissionButton from '../../common/PermissionButton/PermissionButton'; +import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from '../../providers/AccessProvider/permissions'; import { v4 as uuidv4 } from 'uuid'; import { WeightType } from '../../../constants/variantTypes'; import { Box, styled, Typography, useTheme } from '@mui/material'; import type { IFeatureStrategy } from 'interfaces/strategy'; -import SplitPreviewSlider from './SplitPreviewSlider/SplitPreviewSlider'; -import { HelpIcon } from '../../common/HelpIcon/HelpIcon'; -import { StrategyVariantsUpgradeAlert } from '../../common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; +import { StrategyVariantsUpgradeAlert } from 'component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import Add from '@mui/icons-material/Add'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; @@ -199,7 +199,7 @@ export const NewStrategyVariants: FC<{ > Add variant - diff --git a/frontend/src/component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider.tsx b/frontend/src/component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider.tsx deleted file mode 100644 index b164b2bef7..0000000000 --- a/frontend/src/component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { Box, Typography, styled } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver'; -import type { IFeatureVariant } from 'interfaces/featureToggle'; - -const StyledContainer = styled(Box)(() => ({ - display: 'flex', - width: '100%', - position: 'relative', -})); - -const StyledTrack = styled(Box)(({ theme }) => ({ - position: 'absolute', - height: theme.spacing(3), - width: '100%', - display: 'flex', - overflow: 'hidden', -})); - -const StyledSegment = styled(Box)(() => ({ - height: '100%', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: '100%', -})); - -const StyledSegmentTrack = styled(Box, { - shouldForwardProp: (prop) => prop !== 'index', -})<{ index: number }>(({ theme, index }) => ({ - height: theme.spacing(1.8), - width: '100%', - position: 'relative', - background: theme.palette.variants[index % theme.palette.variants.length], -})); - -const StyledHeaderContainer = styled(Box)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - marginBottom: theme.spacing(1), -})); - -const StyledTypography = styled(Typography)(({ theme }) => ({ - marginY: theme.spacing(1), -})); - -const StyledVariantBoxContainer = styled(Box)(() => ({ - display: 'flex', - alignItems: 'center', - marginLeft: 'auto', - flexWrap: 'wrap', -})); - -const StyledVariantBox = styled(Box, { - shouldForwardProp: (prop) => prop !== 'index', -})<{ index: number }>(({ theme, index }) => ({ - display: 'flex', - alignItems: 'center', - marginRight: theme.spacing(2), - '& div': { - width: theme.spacing(1.6), - height: theme.spacing(1.6), - borderRadius: '50%', - marginRight: theme.spacing(1), - background: - theme.palette.variants[index % theme.palette.variants.length], - }, -})); - -const StyledTypographySubtitle = styled(Typography)(({ theme }) => ({ - marginTop: theme.spacing(1), -})); - -interface ISplitPreviewSliderProps { - variants: IFeatureVariant[]; - weightsError?: boolean; -} - -const SplitPreviewSlider = ({ - variants, - weightsError, -}: ISplitPreviewSliderProps) => { - if (variants.length < 1) { - return null; - } - - return ( - ({ marginTop: theme.spacing(2) })}> - - - - - {variants.map((variant, index) => { - const value = variant.weight / 10; - return ( - e.preventDefault()} - titleComponent={ - - } - > - - {' '} - - - - {value}% - - - - - ); - })} - - - ); -}; - -const SplitPreviewHeader = ({ variants }: ISplitPreviewSliderProps) => { - return ( - - - Feature variants ({variants.length}) - - - {variants.map((variant, index) => ( - - - - {variant.name} - - - ))} - - - ); -}; - -interface ISplitPreviewTooltip { - variant: IFeatureVariant; - index: number; -} - -const StyledTooltipContainer = styled(Box)(() => ({ - display: 'flex', - flexDirection: 'column', -})); - -const StyledVariantContainer = styled(Box)(() => ({ - display: 'flex', - alignItems: 'center', - minWidth: '250px', -})); - -const StyledPayloadContainer = styled(Box)(({ theme }) => ({ - marginTop: theme.spacing(1), - display: 'flex', - flexDirection: 'column', -})); - -const StyledPayloadLabel = styled(Typography)(({ theme }) => ({ - marginBottom: theme.spacing(1), -})); - -const SplitPreviewTooltip = ({ variant, index }: ISplitPreviewTooltip) => { - return ( - - - - - - - - {variant.weight / 10}% - {variant.name} - - - - {variant.payload ? ( - - - Payload - - - {variant.payload.value}} - elseShow={ - - {variant.payload.value} - - } - /> - - ) : null} - - ); -}; - -export default SplitPreviewSlider; diff --git a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx index 33cd56e7df..9985c868a5 100644 --- a/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx +++ b/frontend/src/component/feature/StrategyTypes/StrategyVariants.tsx @@ -1,17 +1,17 @@ import { VariantForm } from '../FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/VariantForm/VariantForm'; -import { updateWeightEdit } from '../../common/util'; +import { updateWeightEdit } from 'component/common/util'; import type React from 'react'; import { type FC, useEffect, useState } from 'react'; import type { IFeatureVariantEdit } from '../FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsModal/EnvironmentVariantsModal'; -import PermissionButton from '../../common/PermissionButton/PermissionButton'; +import PermissionButton from 'component/common/PermissionButton/PermissionButton'; import { UPDATE_FEATURE_ENVIRONMENT_VARIANTS } from '../../providers/AccessProvider/permissions'; import { v4 as uuidv4 } from 'uuid'; import { WeightType } from '../../../constants/variantTypes'; import { Link, styled, Typography, useTheme } from '@mui/material'; import type { IFeatureStrategy } from 'interfaces/strategy'; -import SplitPreviewSlider from './SplitPreviewSlider/SplitPreviewSlider'; -import { HelpIcon } from '../../common/HelpIcon/HelpIcon'; -import { StrategyVariantsUpgradeAlert } from '../../common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; +import { HelpIcon } from 'component/common/HelpIcon/HelpIcon'; +import { StrategyVariantsUpgradeAlert } from 'component/common/StrategyVariantsUpgradeAlert/StrategyVariantsUpgradeAlert'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledVariantForms = styled('div')({ @@ -168,7 +168,7 @@ export const StrategyVariants: FC<{ > Add variant - + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx index e1aeff16ef..40b49dd691 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx @@ -5,7 +5,7 @@ import type { } from 'openapi'; import { objectId } from 'utils/objectId'; import { StrategyItemContainer } from 'component/common/StrategyItemContainer/StrategyItemContainer'; -import { StrategyExecution } from './StrategyExecution/StrategyExecution'; +import { PlaygroundStrategyExecution } from './PlaygroundStrategyExecution/PlaygroundStrategyExecution'; interface IFeatureStrategyItemProps { strategy: PlaygroundStrategySchema; @@ -42,7 +42,10 @@ export const FeatureStrategyItem = ({ ) } > - + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx index 8607e9305c..ca0e77a358 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/LegacyFeatureStrategyItem.tsx @@ -4,10 +4,10 @@ import type { PlaygroundStrategySchema, PlaygroundRequestSchema, } from 'openapi'; -import { StrategyExecution } from './StrategyExecution/LegacyStrategyExecution'; +import { StrategyExecution } from './PlaygroundStrategyExecution/LegacyStrategyExecution'; import { objectId } from 'utils/objectId'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { DisabledStrategyExecution } from './StrategyExecution/DisabledStrategyExecution'; +import { DisabledStrategyExecution } from './PlaygroundStrategyExecution/DisabledStrategyExecution'; import { StrategyItemContainer } from 'component/common/StrategyItemContainer/LegacyStrategyItemContainer'; interface IFeatureStrategyItemProps { diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintError/LegacyConstraintError.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintError/LegacyConstraintError.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintError/LegacyConstraintError.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintError/LegacyConstraintError.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintOk/LegacyConstraintOk.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintOk/LegacyConstraintOk.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/ConstraintOk/LegacyConstraintOk.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintOk/LegacyConstraintOk.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/LegacyConstraintExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/LegacyConstraintExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/ConstraintExecution/LegacyConstraintExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/LegacyConstraintExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/CustomStrategyParams/CustomStrategyParams.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/DisabledStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/DisabledStrategyExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/DisabledStrategyExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/DisabledStrategyExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/LegacyStrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/LegacyStrategyExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/LegacyStrategyExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/LegacyStrategyExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/PlaygroundStrategyExecution.tsx similarity index 80% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/PlaygroundStrategyExecution.tsx index ac3ec80bf7..f9466c6bda 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/PlaygroundStrategyExecution.tsx @@ -1,6 +1,8 @@ import type { + PlaygroundFeatureSchemaVariant, PlaygroundRequestSchema, PlaygroundStrategySchema, + StrategyVariantSchema, } from 'openapi'; import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution'; import { formattedStrategyNames } from 'utils/strategyNames'; @@ -16,6 +18,7 @@ import { SegmentExecution } from './SegmentExecution/SegmentExecution'; import { useStrategyParameters } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useStrategyParameters'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; import { useCustomStrategyParameters } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters'; +import { RolloutVariants } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/RolloutVariants/RolloutVariants'; type StrategyExecutionProps = { strategyResult: PlaygroundStrategySchema; @@ -23,7 +26,7 @@ type StrategyExecutionProps = { input?: PlaygroundRequestSchema; }; -export const StrategyExecution: FC = ({ +export const PlaygroundStrategyExecution: FC = ({ strategyResult, input, }) => { @@ -79,5 +82,17 @@ export const StrategyExecution: FC = ({ ), ].filter(Boolean); - return {items}; + const { variant, variants } = strategyResult.result as unknown as Partial<{ + variant: PlaygroundFeatureSchemaVariant; + variants: StrategyVariantSchema[]; + }>; + + return ( + <> + {items} + {variants?.length ? ( + + ) : null} + + ); }; diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/LegacySegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/LegacySegmentExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/LegacySegmentExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/LegacySegmentExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecution.styles.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.styles.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecution.styles.ts diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecution.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecution.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecution.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/StrategyExecution.styles.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/StrategyExecution.styles.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/helpers.ts similarity index 100% rename from frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/helpers.ts rename to frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/helpers.ts diff --git a/frontend/src/component/project/Project/ProjectSettings/ProjectDefaultStrategySettings/ProjectEnvironment/ProjectEnvironmentDefaultStrategy/LegacyProjectEnvironmentDefaultStrategy.tsx b/frontend/src/component/project/Project/ProjectSettings/ProjectDefaultStrategySettings/ProjectEnvironment/ProjectEnvironmentDefaultStrategy/LegacyProjectEnvironmentDefaultStrategy.tsx index 6618227d21..3a893bb2b5 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ProjectDefaultStrategySettings/ProjectEnvironment/ProjectEnvironmentDefaultStrategy/LegacyProjectEnvironmentDefaultStrategy.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ProjectDefaultStrategySettings/ProjectEnvironment/ProjectEnvironmentDefaultStrategy/LegacyProjectEnvironmentDefaultStrategy.tsx @@ -10,7 +10,7 @@ import { PROJECT_DEFAULT_STRATEGY_WRITE, UPDATE_PROJECT, } from '@server/types/permissions'; -import SplitPreviewSlider from 'component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; import { StrategyItemContainer } from 'component/common/StrategyItemContainer/LegacyStrategyItemContainer'; interface ProjectEnvironmentDefaultStrategyProps { @@ -84,7 +84,7 @@ const ProjectEnvironmentDefaultStrategy = ({ {strategy.variants && strategy.variants.length > 0 ? ( - + ) : null} diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx index 3404eca7fa..cc568894fb 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneStrategyItem.tsx @@ -1,5 +1,5 @@ import { Box, IconButton, styled } from '@mui/material'; -import SplitPreviewSlider from 'component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; import { formatStrategyName, getFeatureStrategyIcon, @@ -88,10 +88,12 @@ export const MilestoneStrategyItem = ({ strategy.variants.length > 0 && (strategy.disabled ? ( - + ) : ( - + ))} diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx index 89b7e293b2..8cc6de3eb0 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategyVariants.tsx @@ -10,7 +10,7 @@ import { updateWeightEdit } from 'component/common/util'; import { WeightType } from 'constants/variantTypes'; import { useTheme } from '@mui/material'; import Add from '@mui/icons-material/Add'; -import SplitPreviewSlider from 'component/feature/StrategyTypes/SplitPreviewSlider/SplitPreviewSlider'; +import { VariantsSplitPreview } from 'component/common/VariantsSplitPreview/VariantsSplitPreview'; const StyledVariantForms = styled('div')({ display: 'flex', @@ -180,7 +180,7 @@ export const MilestoneStrategyVariants = ({ -