From bb779828d317264c545d2469eadb122931c7be0f Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Wed, 19 Mar 2025 20:20:03 +0100 Subject: [PATCH 1/4] values truncation --- .../ConstraintItem/ConstraintItem.tsx | 16 +++- .../StrategyEvaluationItem.tsx | 47 ++++++----- .../ConstraintAccordionViewHeader.tsx | 6 +- .../ConstraintAccordionViewHeaderInfo.tsx | 79 +++++-------------- .../component/common/Truncator/Truncator.tsx | 13 ++- .../RolloutVariants/RolloutVariants.tsx | 62 ++++++++------- 6 files changed, 103 insertions(+), 120 deletions(-) diff --git a/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx b/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx index 2a038b33153c..222b8f967437 100644 --- a/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx +++ b/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx @@ -1,5 +1,8 @@ import type { FC } from 'react'; -import { StrategyEvaluationItem } from '../StrategyEvaluationItem/StrategyEvaluationItem'; +import { + StrategyEvaluationItem, + type StrategyEvaluationItemProps, +} from '../StrategyEvaluationItem/StrategyEvaluationItem'; import type { ConstraintSchema } from 'openapi'; import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription'; import { StrategyEvaluationChip } from '../StrategyEvaluationChip/StrategyEvaluationChip'; @@ -29,18 +32,25 @@ const StyledOperatorGroup = styled('div')(({ theme }) => ({ gap: theme.spacing(0.5), })); -export const ConstraintItem: FC = ({ +export const ConstraintItem: FC< + ConstraintSchema & Pick +> = ({ caseInsensitive, contextName, inverted, operator, value, values, + onSetTruncated, }) => { const items = value ? [value, ...(values || [])] : values || []; return ( - + {contextName} {inverted ? : null} diff --git a/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx index 5f26e7e4a618..9bf97c46ab7d 100644 --- a/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx +++ b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx @@ -1,11 +1,15 @@ -import { Chip, type ChipProps, styled } from '@mui/material'; +import { styled } from '@mui/material'; +import { + Truncator, + type TruncatorProps, +} from 'component/common/Truncator/Truncator'; import type { FC, ReactNode } from 'react'; -type StrategyItemProps = { +export type StrategyEvaluationItemProps = { type?: ReactNode; children?: ReactNode; values?: string[]; -}; +} & Pick; const StyledContainer = styled('div')(({ theme }) => ({ display: 'flex', @@ -17,7 +21,6 @@ const StyledContainer = styled('div')(({ theme }) => ({ const StyledContent = styled('div')(({ theme }) => ({ display: 'flex', gap: theme.spacing(1), - flexWrap: 'wrap', alignItems: 'center', })); @@ -30,37 +33,33 @@ const StyledType = styled('span')(({ theme }) => ({ width: theme.spacing(10), })); -const StyledValuesGroup = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - gap: theme.spacing(0.5), -})); - -const StyledValue = styled(({ ...props }: ChipProps) => ( - -))(({ theme }) => ({ - padding: theme.spacing(0.5), - background: theme.palette.background.elevation1, -})); - /** * Abstract building block for a list of constraints, segments and other items inside a strategy */ -export const StrategyEvaluationItem: FC = ({ +export const StrategyEvaluationItem: FC = ({ type, children, values, + onSetTruncated, }) => ( {type} {children} - {values && values?.length > 0 ? ( - - {values?.map((value, index) => ( - - ))} - + {values && values?.length === 1 ? ( + onSetTruncated?.(false)} + > + {values[0]} + + ) : null} + {values && values?.length > 1 ? ( + + {values.join(', ')} + ) : null} diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 633aa3dd1903..e7a80d8e8787 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -4,6 +4,7 @@ import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHead import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; import { styled } from '@mui/system'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; +import { useUiFlag } from 'hooks/useUiFlag'; interface IConstraintAccordionViewHeaderProps { constraint: IConstraint; @@ -38,6 +39,7 @@ export const ConstraintAccordionViewHeader = ({ disabled, }: IConstraintAccordionViewHeaderProps) => { const { context } = useUnleashContext(); + const flagOverviewRedesign = useUiFlag('flagOverviewRedesign'); const { contextName } = constraint; const disableEdit = !context @@ -46,7 +48,9 @@ export const ConstraintAccordionViewHeader = ({ return ( - + {!flagOverviewRedesign ? ( + + ) : null} ({ - display: '-webkit-box', - WebkitLineClamp: 3, - WebkitBoxOrient: 'vertical', - overflow: 'hidden', - maxWidth: '100px', - minWidth: '100px', - marginRight: '10px', - marginTop: 'auto', - marginBottom: 'auto', - wordBreak: 'break-word', - fontSize: theme.fontSizes.smallBody, - [theme.breakpoints.down(710)]: { - textAlign: 'center', - padding: theme.spacing(1, 0), - marginRight: 'inherit', - maxWidth: 'inherit', - }, -})); +import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; +import { useState } from 'react'; +import VisibilityIcon from '@mui/icons-material/Visibility'; +import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; const StyledHeaderWrapper = styled('div')(({ theme }) => ({ display: 'flex', @@ -55,49 +35,26 @@ interface ConstraintAccordionViewHeaderMetaInfoProps { export const ConstraintAccordionViewHeaderInfo = ({ constraint, - singleValue, allowExpand, expanded, - disabled = false, - maxLength = 112, //The max number of characters in the values text for NOT allowing expansion }: ConstraintAccordionViewHeaderMetaInfoProps) => { + const [expandable, setExpandable] = useState(false); + return ( - - ({ - color: disabled - ? theme.palette.text.secondary - : 'inherit', - })} - > - {constraint.contextName} - - - - - } - elseShow={ - - } + { + setExpandable(state); + allowExpand(state); + }} /> + {expandable ? ( + + {expanded ? : } + + ) : null} ); diff --git a/frontend/src/component/common/Truncator/Truncator.tsx b/frontend/src/component/common/Truncator/Truncator.tsx index 8302845f12ab..77d69b76f704 100644 --- a/frontend/src/component/common/Truncator/Truncator.tsx +++ b/frontend/src/component/common/Truncator/Truncator.tsx @@ -25,13 +25,14 @@ const StyledTruncatorContainer = styled(Box, { type OverridableTooltipProps = Omit; -interface ITruncatorProps extends BoxProps { +export type TruncatorProps = { lines?: number; title?: string; arrow?: boolean; tooltipProps?: OverridableTooltipProps; children: React.ReactNode; -} + onSetTruncated?: (isTruncated: boolean) => void; +} & BoxProps; export const Truncator = ({ lines = 1, @@ -40,8 +41,9 @@ export const Truncator = ({ tooltipProps, children, component = 'span', + onSetTruncated, ...props -}: ITruncatorProps) => { +}: TruncatorProps) => { const [isTruncated, setIsTruncated] = useState(false); const ref = useRef(null); @@ -50,7 +52,6 @@ export const Truncator = ({ setIsTruncated(ref.current.scrollHeight > ref.current.offsetHeight); } }; - useEffect(() => { const resizeObserver = new ResizeObserver(checkTruncation); if (ref.current) { @@ -59,6 +60,10 @@ export const Truncator = ({ return () => resizeObserver.disconnect(); }, [title, children]); + useEffect(() => { + onSetTruncated?.(isTruncated); + }, [isTruncated]); + const overridableTooltipProps: OverridableTooltipProps = { title, arrow, 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 index d8b560b2511d..2f57913745f6 100644 --- 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 @@ -29,6 +29,12 @@ const StyledPayloadHeader = styled('div')(({ theme }) => ({ 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 }) => { @@ -38,34 +44,36 @@ export const RolloutVariants: FC<{ return ( - {variants.map((variant, i) => ( - - - Payload: - - {variant.payload?.value} - - ) : null - } - key={variant.name} - > - - - {variant.weight / 10}% – {variant.name} - - + + {variants.map((variant, i) => ( + + + Payload: + + {variant.payload?.value} + + ) : null } - /> - - ))} + key={variant.name} + > + + + {variant.weight / 10}% – {variant.name} + + + } + /> + + ))} + ); }; From d14ae2d8ed7eb0c218872386423afe75b3f712c9 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 20 Mar 2025 10:41:00 +0100 Subject: [PATCH 2/4] improved constraints list --- .../ConstraintItemHeader.tsx} | 2 +- .../ConstraintsList/ConstraintsList.tsx | 8 +- .../StrategyEvaluationItem.tsx | 1 + .../ConstraintAccordionViewHeaderInfo.tsx | 4 +- .../NewConstraintAccordion/ConstraintIcon.tsx | 3 + .../NewConstraintAccordion.tsx | 37 ++++----- .../common/SegmentItem/SegmentItem.tsx | 77 ++++++++++--------- .../StrategyExecution/StrategyExecution.tsx | 22 ++++-- .../ConstraintExecution.tsx | 4 +- 9 files changed, 90 insertions(+), 68 deletions(-) rename frontend/src/component/common/ConstraintsList/{ConstraintItem/ConstraintItem.tsx => ConstraintItemHeader/ConstraintItemHeader.tsx} (97%) diff --git a/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx similarity index 97% rename from frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx rename to frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx index 222b8f967437..bcaf83b7510b 100644 --- a/frontend/src/component/common/ConstraintsList/ConstraintItem/ConstraintItem.tsx +++ b/frontend/src/component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader.tsx @@ -32,7 +32,7 @@ const StyledOperatorGroup = styled('div')(({ theme }) => ({ gap: theme.spacing(0.5), })); -export const ConstraintItem: FC< +export const ConstraintItemHeader: FC< ConstraintSchema & Pick > = ({ caseInsensitive, diff --git a/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx b/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx index 4b72ca5a705a..0440457e9217 100644 --- a/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx +++ b/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx @@ -10,17 +10,21 @@ const StyledList = styled('ul')(({ theme }) => ({ gap: theme.spacing(1), })); -const StyledListItem = styled('li')(({ theme }) => ({ +export const ConstraintListItem = styled('div')(({ theme }) => ({ position: 'relative', border: `1px solid ${theme.palette.divider}`, borderRadius: theme.shape.borderRadiusMedium, background: theme.palette.background.default, - padding: theme.spacing(2, 3), + padding: theme.spacing(1.5, 3), display: 'flex', flexFlow: 'column', gap: theme.spacing(2), })); +const StyledListItem = styled('li')({ + position: 'relative', +}); + const StyledAnd = styled('div')(({ theme }) => ({ position: 'absolute', top: theme.spacing(-0.5), diff --git a/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx index 9bf97c46ab7d..5e66af250791 100644 --- a/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx +++ b/frontend/src/component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem.tsx @@ -16,6 +16,7 @@ const StyledContainer = styled('div')(({ theme }) => ({ gap: theme.spacing(1), alignItems: 'center', fontSize: theme.typography.body2.fontSize, + minHeight: theme.spacing(4), })); const StyledContent = styled('div')(({ theme }) => ({ diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx index 569678dce9ed..98d41a17f8fe 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo.tsx @@ -1,6 +1,6 @@ import { IconButton, styled } from '@mui/material'; import type { IConstraint } from 'interfaces/strategy'; -import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; +import { ConstraintItemHeader } from 'component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader'; import { useState } from 'react'; import VisibilityIcon from '@mui/icons-material/Visibility'; import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'; @@ -43,7 +43,7 @@ export const ConstraintAccordionViewHeaderInfo = ({ return ( - { setExpandable(state); diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintIcon.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintIcon.tsx index 3523cf5f229e..3e1e08d7472c 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintIcon.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintIcon.tsx @@ -7,6 +7,9 @@ interface IConstraintIconProps { disabled?: boolean; } +/** + * @deprecated remove with `flagOverviewRedesign` + */ export const ConstraintIcon: VFC = ({ compact, disabled, diff --git a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordion.tsx b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordion.tsx index da4f98a5fbd4..20a5b7c632f5 100644 --- a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordion.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordion.tsx @@ -1,5 +1,4 @@ import type { IConstraint } from 'interfaces/strategy'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConstraintAccordionEdit } from './ConstraintAccordionEdit/ConstraintAccordionEdit'; import { ConstraintAccordionView } from './ConstraintAccordionView/ConstraintAccordionView'; @@ -27,26 +26,24 @@ export const NewConstraintAccordion = ({ }: IConstraintAccordionProps) => { if (!constraint) return null; + if (editing && onSave) { + return ( + + ); + } + return ( - - } - elseShow={ - - } + ); }; diff --git a/frontend/src/component/common/SegmentItem/SegmentItem.tsx b/frontend/src/component/common/SegmentItem/SegmentItem.tsx index e2a4b914cc11..610b422fb71b 100644 --- a/frontend/src/component/common/SegmentItem/SegmentItem.tsx +++ b/frontend/src/component/common/SegmentItem/SegmentItem.tsx @@ -9,9 +9,12 @@ import { styled, } from '@mui/material'; import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem'; -import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; +import { ConstraintItemHeader } from 'component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader'; import { objectId } from 'utils/objectId'; -import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; +import { + ConstraintListItem, + ConstraintsList, +} from 'component/common/ConstraintsList/ConstraintsList'; type SegmentItemProps = { segment: Partial; @@ -21,7 +24,11 @@ type SegmentItemProps = { headerContent?: JSX.Element; }; -const StyledAccordion = styled(Accordion)(({ theme }) => ({ +const StyledConstraintListItem = styled(ConstraintListItem)(() => ({ + padding: 0, +})); + +const StyledAccordion = styled(Accordion)(() => ({ boxShadow: 'none', margin: 0, padding: 0, @@ -32,16 +39,14 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({ })); const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({ - padding: 0, + padding: theme.spacing(0, 3), fontSize: theme.typography.body2.fontSize, minHeight: 'unset', - '.MuiAccordionSummary-content, .MuiAccordionSummary-content.Mui-expanded': { - margin: 0, - }, })); const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({ - padding: theme.spacing(2, 0, 1), + borderTop: `1px dashed ${theme.palette.divider}`, + padding: theme.spacing(1.5, 3, 2.5), })); const StyledLink = styled(Link)({ @@ -55,8 +60,6 @@ const StyledActionsContainer = styled('div')(({ theme }) => ({ display: 'flex', alignItems: 'center', marginLeft: 'auto', - marginTop: theme.spacing(-0.5), - marginBottom: theme.spacing(-0.5), })); const StyledButton = styled(Button)(({ theme }) => ({ @@ -85,10 +88,12 @@ export const SegmentItem: FC = ({ return ( {segment.constraints.map((constraint, index) => ( - + > + {/* FIXME: use accordion */} + + ))} ); @@ -102,27 +107,29 @@ export const SegmentItem: FC = ({ }, [constraintList, segment.constraints]); return ( - - - - - {segment.name} - - - {headerContent ? headerContent : null} - {!isExpanded ? ( - - setIsOpen((value) => !value)} - > - {isOpen ? 'Close preview' : 'Preview'} - - - ) : null} - - {constraints} - + + + + + + {segment.name} + + + {headerContent ? headerContent : null} + {!isExpanded ? ( + + setIsOpen((value) => !value)} + > + {isOpen ? 'Close preview' : 'Preview'} + + + ) : null} + + {constraints} + + ); }; 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 29c4c5cb3d2b..6cb5f7a76b7f 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 @@ -4,14 +4,17 @@ import type { FeatureStrategySchema } from 'openapi'; import type { IFeatureStrategyPayload } from 'interfaces/strategy'; import { useUiFlag } from 'hooks/useUiFlag'; import { StrategyExecution as LegacyStrategyExecution } from './LegacyStrategyExecution'; -import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; +import { ConstraintItemHeader } from 'component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader'; import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies'; import { objectId } from 'utils/objectId'; 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'; +import { + ConstraintListItem, + ConstraintsList, +} from 'component/common/ConstraintsList/ConstraintsList'; const FilterContainer = styled('div', { shouldForwardProp: (prop) => prop !== 'grayscale', @@ -58,12 +61,19 @@ export const StrategyExecution: FC = ({ ))} {constraints?.map((constraint, index) => ( - + > + {/* FIXME: use constraint accordion */} + + + ))} + {(isCustomStrategy + ? customStrategyItems + : strategyParameters + ).map((item, index) => ( + {item} ))} - {isCustomStrategy ? customStrategyItems : strategyParameters} ); 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/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx index 415084de4d9e..fcb7227a4095 100644 --- 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/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx @@ -3,7 +3,7 @@ import type { PlaygroundConstraintSchema, PlaygroundRequestSchema, } from 'openapi'; -import { ConstraintItem } from 'component/common/ConstraintsList/ConstraintItem/ConstraintItem'; +import { ConstraintItemHeader } from 'component/common/ConstraintsList/ConstraintItemHeader/ConstraintItemHeader'; import CheckCircle from '@mui/icons-material/CheckCircle'; import { styled } from '@mui/material'; import Cancel from '@mui/icons-material/Cancel'; @@ -68,7 +68,7 @@ export const ConstraintExecution: FC = ({ return ( <> - + {constraint.result ? ( ) : ( From f396e714a1e99070bfc24da5ce2e0ce4be2ec308 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 20 Mar 2025 10:43:41 +0100 Subject: [PATCH 3/4] legacy constraint accordion view header info --- .../ConstraintAccordionViewHeader.tsx | 25 +++-- ...egacyConstraintAccordionViewHeaderInfo.tsx | 104 ++++++++++++++++++ 2 files changed, 122 insertions(+), 7 deletions(-) create mode 100644 frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/LegacyConstraintAccordionViewHeaderInfo.tsx diff --git a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index e7a80d8e8787..f22ccecc24e5 100644 --- a/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -1,6 +1,7 @@ import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon'; import type { IConstraint } from 'interfaces/strategy'; import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo'; +import { ConstraintAccordionViewHeaderInfo as LegacyConstraintAccordionViewHeaderInfo } from './LegacyConstraintAccordionViewHeaderInfo'; import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; import { styled } from '@mui/system'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; @@ -51,13 +52,23 @@ export const ConstraintAccordionViewHeader = ({ {!flagOverviewRedesign ? ( ) : null} - + {flagOverviewRedesign ? ( + + ) : ( + + )} ({ + display: '-webkit-box', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + maxWidth: '100px', + minWidth: '100px', + marginRight: '10px', + marginTop: 'auto', + marginBottom: 'auto', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + padding: theme.spacing(1, 0), + marginRight: 'inherit', + maxWidth: 'inherit', + }, +})); + +const StyledHeaderWrapper = styled('div')(({ theme }) => ({ + display: 'flex', + width: '100%', + justifyContent: 'space-between', + borderRadius: theme.spacing(1), +})); + +const StyledHeaderMetaInfo = styled('div')(({ theme }) => ({ + display: 'flex', + alignItems: 'stretch', + marginLeft: theme.spacing(1), + [theme.breakpoints.down('sm')]: { + marginLeft: 0, + flexDirection: 'column', + alignItems: 'center', + width: '100%', + }, +})); + +interface ConstraintAccordionViewHeaderMetaInfoProps { + constraint: IConstraint; + singleValue: boolean; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; + disabled?: boolean; + maxLength?: number; +} + +export const ConstraintAccordionViewHeaderInfo = ({ + constraint, + singleValue, + allowExpand, + expanded, + disabled = false, + maxLength = 112, //The max number of characters in the values text for NOT allowing expansion +}: ConstraintAccordionViewHeaderMetaInfoProps) => { + return ( + + + + ({ + color: disabled + ? theme.palette.text.secondary + : 'inherit', + })} + > + {constraint.contextName} + + + + + } + elseShow={ + + } + /> + + + ); +}; From f0201dac55f5ad4c8eff80e230bce09fdee71555 Mon Sep 17 00:00:00 2001 From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com> Date: Thu, 20 Mar 2025 11:29:03 +0100 Subject: [PATCH 4/4] cleanup dead code --- .../ConstraintsList/ConstraintsList.tsx | 2 +- .../NewConstraintAccordionList.tsx | 27 +------------------ .../ConstraintExecution.tsx | 21 ++++++++------- .../StrategyExecution/StrategyExecution.tsx | 15 ++++++++--- 4 files changed, 26 insertions(+), 39 deletions(-) diff --git a/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx b/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx index 0440457e9217..46207fe392d1 100644 --- a/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx +++ b/frontend/src/component/common/ConstraintsList/ConstraintsList.tsx @@ -18,7 +18,7 @@ export const ConstraintListItem = styled('div')(({ theme }) => ({ padding: theme.spacing(1.5, 3), display: 'flex', flexFlow: 'column', - gap: theme.spacing(2), + gap: theme.spacing(1), })); const StyledListItem = styled('li')({ diff --git a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx index b348e9af38bb..4767309340e6 100644 --- a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx @@ -1,7 +1,6 @@ import type React from 'react'; import { forwardRef, Fragment, useImperativeHandle } from 'react'; -import { styled, Tooltip } from '@mui/material'; -import HelpOutline from '@mui/icons-material/HelpOutline'; +import { styled } from '@mui/material'; import type { IConstraint } from 'interfaces/strategy'; import produce from 'immer'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; @@ -43,30 +42,6 @@ const StyledContainer = styled('div')({ flexDirection: 'column', }); -const StyledHelpWrapper = styled(Tooltip)(({ theme }) => ({ - marginLeft: theme.spacing(0.75), - height: theme.spacing(1.5), -})); - -const StyledHelp = styled(HelpOutline)(({ theme }) => ({ - fill: theme.palette.action.active, - [theme.breakpoints.down(860)]: { - display: 'none', - }, -})); - -const StyledConstraintLabel = styled('p')(({ theme }) => ({ - marginBottom: theme.spacing(1), - color: theme.palette.text.secondary, -})); - -const StyledAddCustomLabel = styled('div')(({ theme }) => ({ - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - color: theme.palette.text.primary, - display: 'flex', -})); - export const useConstraintAccordionList = ( setConstraints: | React.Dispatch> 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/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx index fcb7227a4095..6794989986ae 100644 --- 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/StrategyExecution/ConstraintExecution/ConstraintExecution.tsx @@ -7,6 +7,7 @@ import { ConstraintItemHeader } from 'component/common/ConstraintsList/Constrain import CheckCircle from '@mui/icons-material/CheckCircle'; import { styled } from '@mui/material'; import Cancel from '@mui/icons-material/Cancel'; +import { ConstraintListItem } from 'component/common/ConstraintsList/ConstraintsList'; interface IConstraintExecutionProps { constraint?: PlaygroundConstraintSchema; @@ -20,7 +21,7 @@ const StyledContainer = styled('div', { display: 'flex', alignItems: 'center', gap: theme.spacing(1), - paddingInline: theme.spacing(0.25), + padding: theme.spacing(0.5, 0.25), color: variant === 'ok' ? theme.palette.success.dark @@ -67,13 +68,15 @@ export const ConstraintExecution: FC = ({ }; return ( - <> - - {constraint.result ? ( - - ) : ( - - )} - + +
+ + {constraint.result ? ( + + ) : ( + + )} +
+ ); }; 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 9cd9235d8f87..ac3ec80bf72a 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 @@ -6,7 +6,10 @@ import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution'; 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 { + ConstraintListItem, + ConstraintsList, +} from 'component/common/ConstraintsList/ConstraintsList'; import { objectId } from 'utils/objectId'; import type { FC } from 'react'; import { SegmentExecution } from './SegmentExecution/SegmentExecution'; @@ -60,8 +63,14 @@ export const StrategyExecution: FC = ({ /> )) : []), - hasExecutionParameters && params, - isCustomStrategy && customStrategyItems, + hasExecutionParameters && + params.map((param, index) => ( + {param} + )), + isCustomStrategy && + customStrategyItems.map((param, index) => ( + {param} + )), name === 'default' && ( The standard strategy is ON for