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/StrategyExecution/LegacyStrategyExecution.tsx index ebe65d71e4..d304fcf39e 100644 --- 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/StrategyExecution/LegacyStrategyExecution.tsx @@ -7,7 +7,7 @@ import type { PlaygroundStrategySchema, } from 'openapi'; import { ConstraintExecution } from './ConstraintExecution/LegacyConstraintExecution'; -import { SegmentExecution } from './SegmentExecution/SegmentExecution'; +import { SegmentExecution } from './SegmentExecution/LegacySegmentExecution'; import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecutionParameters/StrategyExecutionParameters'; import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams'; import { formattedStrategyNames } from 'utils/strategyNames'; 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/StrategyExecution/SegmentExecution/LegacySegmentExecution.tsx new file mode 100644 index 0000000000..8a8563bdea --- /dev/null +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/SegmentExecution/LegacySegmentExecution.tsx @@ -0,0 +1,76 @@ +import { Fragment, type VFC } from 'react'; +import type { PlaygroundSegmentSchema, PlaygroundRequestSchema } from 'openapi'; +import { ConstraintExecution } from '../ConstraintExecution/LegacyConstraintExecution'; +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/LegacySegmentItem'; + +interface ISegmentExecutionProps { + segments?: PlaygroundSegmentSchema[]; + input?: PlaygroundRequestSchema; +} + +const SegmentResultTextWrapper = styled('div')(({ theme }) => ({ + color: theme.palette.error.main, + display: 'inline-flex', + justifyContent: 'center', + marginLeft: 'auto', + gap: theme.spacing(1), +})); + +export const SegmentExecution: VFC = ({ + segments, + input, +}) => { + if (!segments) return null; + + return ( + <> + {segments.map((segment, index) => ( + + + } + headerContent={ + + + segment is false + + + + + + } + elseShow={undefined} + /> + } + isExpanded + /> + = 0 && + segments.length > 1 && + // Don't add if it's the last segment item + index !== segments.length - 1 + } + show={} + /> + + ))} + + ); +}; 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 8a8563bdea..9d8d2852a4 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 @@ -1,76 +1,37 @@ -import { Fragment, type VFC } from 'react'; +import type { FC } from 'react'; import type { PlaygroundSegmentSchema, PlaygroundRequestSchema } from 'openapi'; -import { ConstraintExecution } from '../ConstraintExecution/LegacyConstraintExecution'; -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/LegacySegmentItem'; +import { ConstraintExecution } from '../ConstraintExecution/ConstraintExecution'; +import { SegmentItem } from 'component/common/SegmentItem/SegmentItem'; +import { objectId } from 'utils/objectId'; +import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; -interface ISegmentExecutionProps { - segments?: PlaygroundSegmentSchema[]; +type SegmentExecutionProps = { + segment: PlaygroundSegmentSchema; input?: PlaygroundRequestSchema; -} +}; -const SegmentResultTextWrapper = styled('div')(({ theme }) => ({ - color: theme.palette.error.main, - display: 'inline-flex', - justifyContent: 'center', - marginLeft: 'auto', - gap: theme.spacing(1), -})); - -export const SegmentExecution: VFC = ({ - segments, +export const SegmentExecution: FC = ({ + segment, input, }) => { - if (!segments) return null; + const constraintList = + segment.constraints.length > 0 ? ( + + {segment.constraints.map((constraint) => ( + + ))} + + ) : undefined; return ( - <> - {segments.map((segment, index) => ( - - - } - headerContent={ - - - segment is false - - - - - - } - elseShow={undefined} - /> - } - isExpanded - /> - = 0 && - segments.length > 1 && - // Don't add if it's the last segment item - index !== segments.length - 1 - } - show={} - /> - - ))} - + ); }; 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/StrategyExecution/StrategyExecution.tsx index f3d1fe2cec..9cd9235d8f 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/StrategyExecution/StrategyExecution.tsx @@ -3,13 +3,13 @@ import type { PlaygroundStrategySchema, } from 'openapi'; import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution'; -import { SegmentExecution } from './SegmentExecution/SegmentExecution'; import { formattedStrategyNames } from 'utils/strategyNames'; import { StyledBoxSummary } from './StrategyExecution.styles'; import { Badge } from 'component/common/Badge/Badge'; import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; import { objectId } from 'utils/objectId'; import type { FC } from 'react'; +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'; @@ -42,7 +42,15 @@ export const StrategyExecution: FC = ({ } const items = [ - hasSegments && , + ...(hasSegments + ? segments.map((segment) => ( + + )) + : []), ...(hasConstraints ? constraints.map((constraint) => (