From 1b67b288ee758b1697be1620df41e1934afd290e Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Fri, 28 Feb 2025 15:15:25 +0100 Subject: [PATCH] Segment view for strategy evaluation (#9399) Refactored "segments" part of strategy evaluation. This shows a lot of places, that use "Legacy" component. --- .../ConstraintItem/ConstraintItem.tsx | 0 .../ConstraintsList/ConstraintsList.tsx | 52 ++++++ .../StrategyEvaluationChip.tsx | 0 .../StrategyEvaluationItem.tsx | 1 + .../common/SegmentItem/LegacySegmentItem.tsx | 141 ++++++++++++++++ .../common/SegmentItem/SegmentItem.tsx | 151 +++++++----------- .../FeatureStrategySegmentList.tsx | 2 +- .../StrategyEvaluationSeparator.tsx | 18 --- .../StrategyExecution/StrategyExecution.tsx | 53 +----- .../hooks/useCustomStrategyParameters.tsx | 4 +- .../hooks/useStrategyParameters.tsx | 10 +- .../FeatureOverviewSegment.tsx | 2 +- .../SegmentExecution/SegmentExecution.tsx | 2 +- .../SegmentExecutionWithoutResult.tsx | 2 +- .../MilestoneStrategySegmentList.tsx | 2 +- 15 files changed, 275 insertions(+), 165 deletions(-) rename frontend/src/component/{feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution => common/ConstraintsList}/ConstraintItem/ConstraintItem.tsx (100%) create mode 100644 frontend/src/component/common/ConstraintsList/ConstraintsList.tsx rename frontend/src/component/{feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution => common/ConstraintsList}/StrategyEvaluationChip/StrategyEvaluationChip.tsx (100%) rename frontend/src/component/{feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution => common/ConstraintsList}/StrategyEvaluationItem/StrategyEvaluationItem.tsx (97%) create mode 100644 frontend/src/component/common/SegmentItem/LegacySegmentItem.tsx delete mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationSeparator/StrategyEvaluationSeparator.tsx diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.tsx b/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx similarity index 100% rename from frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/ConstraintItem/ConstraintItem.tsx rename to frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx diff --git a/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx b/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx new file mode 100644 index 0000000000..b5a19888db --- /dev/null +++ b/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx @@ -0,0 +1,52 @@ +import { Children, isValidElement, type FC, type ReactNode } from 'react'; +import { styled } from '@mui/material'; + +const StyledList = styled('ul')(({ theme }) => ({ + display: 'flex', + flexDirection: 'column', + listStyle: 'none', + padding: 0, + margin: 0, + gap: theme.spacing(1), +})); + +const StyledListItem = styled('li')(({ theme }) => ({ + position: 'relative', + border: `1px solid ${theme.palette.divider}`, + borderRadius: theme.shape.borderRadiusMedium, + background: theme.palette.background.default, +})); + +const StyledAnd = styled('div')(({ theme }) => ({ + position: 'absolute', + top: theme.spacing(-0.5), + left: theme.spacing(2), + transform: 'translateY(-50%)', + padding: theme.spacing(0.75, 1), + lineHeight: 1, + fontSize: theme.fontSizes.smallerBody, + color: theme.palette.text.primary, + background: theme.palette.background.application, + borderRadius: theme.shape.borderRadiusLarge, + zIndex: theme.zIndex.fab, +})); + +export const ConstraintsList: FC<{ children: ReactNode }> = ({ children }) => { + const result: ReactNode[] = []; + Children.forEach(children, (child, index) => { + if (isValidElement(child)) { + result.push( + + {index > 0 ? ( + + AND + + ) : null} + {child} + , + ); + } + }); + + return {result}; +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationChip/StrategyEvaluationChip.tsx b/frontend/src/component/common/ConstraintsList/StrategyEvaluationChip/StrategyEvaluationChip.tsx similarity index 100% rename from frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationChip/StrategyEvaluationChip.tsx rename to frontend/src/component/common/ConstraintsList/StrategyEvaluationChip/StrategyEvaluationChip.tsx diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationItem/StrategyEvaluationItem.tsx b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx similarity index 97% rename from frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationItem/StrategyEvaluationItem.tsx rename to frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx index 61cc5ed7b2..45ea532cdd 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationItem/StrategyEvaluationItem.tsx +++ b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx @@ -12,6 +12,7 @@ const StyledContainer = styled('div')(({ theme }) => ({ gap: theme.spacing(1), alignItems: 'center', fontSize: theme.typography.body2.fontSize, + padding: theme.spacing(2, 3), })); const StyledType = styled('span')(({ theme }) => ({ diff --git a/frontend/src/component/common/SegmentItem/LegacySegmentItem.tsx b/frontend/src/component/common/SegmentItem/LegacySegmentItem.tsx new file mode 100644 index 0000000000..bae81d53cf --- /dev/null +++ b/frontend/src/component/common/SegmentItem/LegacySegmentItem.tsx @@ -0,0 +1,141 @@ +import { useState, type VFC } from 'react'; +import { Link } from 'react-router-dom'; +import DonutLarge from '@mui/icons-material/DonutLarge'; +import type { ISegment } from 'interfaces/segment'; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Button, + styled, + Typography, +} from '@mui/material'; +import { ConstraintAccordionList } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; + +interface ISegmentItemProps { + segment: Partial; + isExpanded?: boolean; + disabled?: boolean | null; + constraintList?: JSX.Element; + headerContent?: JSX.Element; +} + +const StyledAccordion = styled(Accordion, { + shouldForwardProp: (prop) => prop !== 'isDisabled', +})<{ isDisabled: boolean | null }>(({ theme, isDisabled }) => ({ + border: `1px solid ${theme.palette.divider}`, + '&.segment-accordion': { + borderRadius: theme.shape.borderRadiusMedium, + }, + boxShadow: 'none', + margin: 0, + transition: 'all 0.1s ease', + '&:before': { + opacity: '0 !important', + }, + '&.Mui-expanded': { backgroundColor: theme.palette.neutral.light }, + backgroundColor: isDisabled + ? theme.palette.envAccordion.disabled + : theme.palette.background.paper, +})); + +const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ + margin: theme.spacing(0, 0.5), + fontSize: theme.typography.body2.fontSize, + '.MuiAccordionSummary-content': { + display: 'flex', + alignItems: 'center', + }, +})); + +const StyledLink = styled(Link)(({ theme }) => ({ + textDecoration: 'none', + marginLeft: theme.spacing(1), + '&:hover': { + textDecoration: 'underline', + }, +})); + +const StyledText = styled('span', { + shouldForwardProp: (prop) => prop !== 'disabled', +})<{ disabled: boolean | null }>(({ theme, disabled }) => ({ + color: disabled ? theme.palette.text.secondary : 'inherit', +})); + +export const SegmentItem: VFC = ({ + segment, + isExpanded, + headerContent, + constraintList, + disabled = false, +}) => { + const [isOpen, setIsOpen] = useState(isExpanded || false); + + return ( + + + ({ + mr: 1, + color: disabled + ? theme.palette.neutral.border + : theme.palette.secondary.main, + })} + /> + Segment: + + {segment.name} + + + setIsOpen((value) => !value)} + sx={{ + my: 0, + ml: 'auto', + fontSize: (theme) => + theme.typography.body2.fontSize, + }} + > + {isOpen ? 'Close preview' : 'Preview'} + + } + /> + + + 0} + show={ + + } + elseShow={ + + This segment has no constraints. + + } + /> + } + /> + + + ); +}; diff --git a/frontend/src/component/common/SegmentItem/SegmentItem.tsx b/frontend/src/component/common/SegmentItem/SegmentItem.tsx index bae81d53cf..100f3090db 100644 --- a/frontend/src/component/common/SegmentItem/SegmentItem.tsx +++ b/frontend/src/component/common/SegmentItem/SegmentItem.tsx @@ -1,6 +1,5 @@ -import { useState, type VFC } from 'react'; +import { useMemo, useState, type FC } from 'react'; import { Link } from 'react-router-dom'; -import DonutLarge from '@mui/icons-material/DonutLarge'; import type { ISegment } from 'interfaces/segment'; import { Accordion, @@ -10,132 +9,106 @@ import { styled, Typography, } from '@mui/material'; -import { ConstraintAccordionList } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; +import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; +import { objectId } from 'utils/objectId'; +import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; -interface ISegmentItemProps { +type SegmentItemProps = { segment: Partial; isExpanded?: boolean; disabled?: boolean | null; constraintList?: JSX.Element; headerContent?: JSX.Element; -} +}; -const StyledAccordion = styled(Accordion, { - shouldForwardProp: (prop) => prop !== 'isDisabled', -})<{ isDisabled: boolean | null }>(({ theme, isDisabled }) => ({ - border: `1px solid ${theme.palette.divider}`, - '&.segment-accordion': { - borderRadius: theme.shape.borderRadiusMedium, - }, +const StyledAccordion = styled(Accordion)(({ theme }) => ({ boxShadow: 'none', margin: 0, - transition: 'all 0.1s ease', - '&:before': { - opacity: '0 !important', - }, - '&.Mui-expanded': { backgroundColor: theme.palette.neutral.light }, - backgroundColor: isDisabled - ? theme.palette.envAccordion.disabled - : theme.palette.background.paper, + padding: 0, })); const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ - margin: theme.spacing(0, 0.5), + padding: 0, fontSize: theme.typography.body2.fontSize, - '.MuiAccordionSummary-content': { - display: 'flex', - alignItems: 'center', + '.MuiAccordionSummary-content, .Mui-expanded.MuiAccordionSummary-content': { + margin: 0, }, })); -const StyledLink = styled(Link)(({ theme }) => ({ +const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ + padding: theme.spacing(0, 2, 3), +})); + +const StyledLink = styled(Link)({ textDecoration: 'none', - marginLeft: theme.spacing(1), '&:hover': { textDecoration: 'underline', }, +}); + +const StyledActionsContainer = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + marginLeft: 'auto', + marginRight: theme.spacing(2), })); -const StyledText = styled('span', { - shouldForwardProp: (prop) => prop !== 'disabled', -})<{ disabled: boolean | null }>(({ theme, disabled }) => ({ - color: disabled ? theme.palette.text.secondary : 'inherit', +const StyledButton = styled(Button)(({ theme }) => ({ + fontSize: theme.typography.body2.fontSize, })); -export const SegmentItem: VFC = ({ +export const SegmentItem: FC = ({ segment, isExpanded, headerContent, constraintList, - disabled = false, }) => { const [isOpen, setIsOpen] = useState(isExpanded || false); + const constraints = useMemo(() => { + if (constraintList) { + return constraintList; + } + + if (segment.constraints?.length) { + return ( + + {segment.constraints.map((constraint, index) => ( + + ))} + + ); + } + + return This segment has no constraints.; + }, [constraintList, segment.constraints]); + return ( - + - ({ - mr: 1, - color: disabled - ? theme.palette.neutral.border - : theme.palette.secondary.main, - })} - /> - Segment: - - {segment.name} - - - + + {segment.name} + + + {headerContent ? headerContent : null} + {!isExpanded ? ( + + setIsOpen((value) => !value)} - sx={{ - my: 0, - ml: 'auto', - fontSize: (theme) => - theme.typography.body2.fontSize, - }} > {isOpen ? 'Close preview' : 'Preview'} - - } - /> + + + ) : null} - - 0} - show={ - - } - elseShow={ - - This segment has no constraints. - - } - /> - } - /> - + {constraints} ); }; diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx index b33e5b5174..7ca101d208 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx @@ -3,7 +3,7 @@ import { Fragment, useState } from 'react'; import type { ISegment } from 'interfaces/segment'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { FeatureStrategySegmentChip } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip'; -import { SegmentItem } from 'component/common/SegmentItem/SegmentItem'; +import { SegmentItem } from 'component/common/SegmentItem/LegacySegmentItem'; import { styled } from '@mui/material'; interface IFeatureStrategySegmentListProps { diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationSeparator/StrategyEvaluationSeparator.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationSeparator/StrategyEvaluationSeparator.tsx deleted file mode 100644 index 9168f26793..0000000000 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyEvaluationSeparator/StrategyEvaluationSeparator.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { styled } from '@mui/material'; - -const StyledAnd = styled('div')(({ theme }) => ({ - position: 'absolute', - top: theme.spacing(-0.5), - left: theme.spacing(2), - transform: 'translateY(-50%)', - padding: theme.spacing(0.75, 1), - lineHeight: 1, - fontSize: theme.fontSizes.smallerBody, - color: theme.palette.text.primary, - background: theme.palette.background.application, - borderRadius: theme.shape.borderRadiusLarge, -})); - -export const StrategyEvaluationSeparator = () => ( - AND -); 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 d753a7db35..db2cb7be55 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 @@ -1,17 +1,17 @@ -import { Children, isValidElement, type FC, type ReactNode } from 'react'; +import type { FC } from 'react'; import { styled } from '@mui/material'; import type { CreateFeatureStrategySchema } from 'openapi'; import type { IFeatureStrategyPayload } from 'interfaces/strategy'; import { useUiFlag } from 'hooks/useUiFlag'; import { StrategyExecution as LegacyStrategyExecution } from './LegacyStrategyExecution'; -import { ConstraintItem } from './ConstraintItem/ConstraintItem'; +import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; import { objectId } from 'utils/objectId'; -import { StrategyEvaluationSeparator } from './StrategyEvaluationSeparator/StrategyEvaluationSeparator'; import { useCustomStrategyParameters } from './hooks/useCustomStrategyParameters'; import { useStrategyParameters } from './hooks/useStrategyParameters'; import { useSegments } from 'hooks/api/getters/useSegments/useSegments'; import { SegmentItem } from 'component/common/SegmentItem/SegmentItem'; +import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; const FilterContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'grayscale', @@ -19,49 +19,6 @@ const FilterContainer = styled('div', { grayscale ? { filter: 'grayscale(1)', opacity: 0.67 } : {}, ); -const StyledList = styled('ul')(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - listStyle: 'none', - padding: 0, - margin: 0, - '&.disabled-strategy': { - filter: 'grayscale(1)', - opacity: 0.67, - }, - gap: theme.spacing(1), -})); - -const StyledListItem = styled('li')(({ theme }) => ({ - position: 'relative', - padding: theme.spacing(2, 3), - border: `1px solid ${theme.palette.divider}`, - borderRadius: theme.shape.borderRadiusMedium, - background: theme.palette.background.default, -})); - -const List: FC<{ children: ReactNode }> = ({ children }) => { - const result: ReactNode[] = []; - Children.forEach(children, (child, index) => { - if (isValidElement(child)) { - result.push( - - {index > 0 ? ( - - ) : null} - {child} - , - ); - } - }); - - return {result}; -}; - -const ListItem: FC<{ children: ReactNode }> = ({ children }) => ( - {children} -); - type StrategyExecutionProps = { strategy: IFeatureStrategyPayload | CreateFeatureStrategySchema; displayGroupId?: boolean; @@ -93,7 +50,7 @@ export const StrategyExecution: FC = ({ return ( - + {strategySegments?.map((segment) => ( ))} @@ -104,7 +61,7 @@ export const StrategyExecution: FC = ({ /> ))} {isCustomStrategy ? customStrategyItems : strategyParameters} - + ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters.tsx index 202f2c0928..0a627cd036 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/hooks/useCustomStrategyParameters.tsx @@ -5,8 +5,8 @@ import { parseParameterString, parseParameterStrings, } from 'utils/parseParameter'; -import { StrategyEvaluationItem } from '../StrategyEvaluationItem/StrategyEvaluationItem'; -import { StrategyEvaluationChip } from '../StrategyEvaluationChip/StrategyEvaluationChip'; +import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; +import { StrategyEvaluationChip } from 'component/common/ConstraintsList/StrategyEvaluationChip/StrategyEvaluationChip'; import type { CreateFeatureStrategySchema, StrategySchema, 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 966964c834..22233d8c57 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 @@ -1,10 +1,10 @@ import { type FC, useMemo } from 'react'; -import { StrategyEvaluationChip } from '../StrategyEvaluationChip/StrategyEvaluationChip'; +import { StrategyEvaluationChip } from 'component/common/ConstraintsList/StrategyEvaluationChip/StrategyEvaluationChip'; import { parseParameterNumber, parseParameterStrings, } from 'utils/parseParameter'; -import { StrategyEvaluationItem } from '../StrategyEvaluationItem/StrategyEvaluationItem'; +import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; import type { IFeatureStrategyPayload } from 'interfaces/strategy'; import type { CreateFeatureStrategySchema } from 'openapi'; @@ -38,7 +38,11 @@ const RolloutParameter: FC<{ {hasConstraints ? 'who match constraints ' : ' '} is included. - {/* TODO: displayGroupId */} + {displayGroupId && parameters?.groupId ? ( + + ) : null} ); }; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx index 2a0bc6dc31..73f3a0e43c 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx @@ -1,7 +1,7 @@ import { Fragment } from 'react'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator'; -import { SegmentItem } from '../../../../common/SegmentItem/SegmentItem'; +import { SegmentItem } from 'component/common/SegmentItem/LegacySegmentItem'; import type { ISegment } from 'interfaces/segment'; interface IFeatureOverviewSegmentProps { 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/StrategyExecution/SegmentExecution/SegmentExecution.tsx index 4ce4465eee..80e8ccbae0 100644 --- 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/StrategyExecution/SegmentExecution/SegmentExecution.tsx @@ -5,7 +5,7 @@ import CancelOutlined from '@mui/icons-material/CancelOutlined'; import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator'; import { styled, Typography } from '@mui/material'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { SegmentItem } from 'component/common/SegmentItem/SegmentItem'; +import { SegmentItem } from 'component/common/SegmentItem/LegacySegmentItem'; interface ISegmentExecutionProps { segments?: PlaygroundSegmentSchema[]; 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/StrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx index 3efb6d9a1d..51c92e263a 100644 --- 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/StrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx @@ -2,7 +2,7 @@ import { Fragment, type VFC } from 'react'; import type { PlaygroundSegmentSchema } from 'openapi'; import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import { SegmentItem } from 'component/common/SegmentItem/SegmentItem'; +import { SegmentItem } from 'component/common/SegmentItem/LegacySegmentItem'; import { ConstraintExecutionWithoutResults } from '../ConstraintExecution/ConstraintExecutionWithoutResults'; interface ISegmentExecutionWithoutResultProps { diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategySegmentList.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategySegmentList.tsx index b48697ae5a..5323c51a1e 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategySegmentList.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategySegmentList.tsx @@ -2,7 +2,7 @@ import { Fragment, useState } from 'react'; import type { ISegment } from 'interfaces/segment'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { FeatureStrategySegmentChip } from 'component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip'; -import { SegmentItem } from 'component/common/SegmentItem/SegmentItem'; +import { SegmentItem } from 'component/common/SegmentItem/LegacySegmentItem'; import { styled } from '@mui/material'; const StyledList = styled('div')(({ theme }) => ({