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 222b8f9674..bcaf83b751 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 4b72ca5a70..0440457e92 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 9bf97c46ab..5e66af2507 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 569678dce9..98d41a17f8 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 3523cf5f22..3e1e08d747 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 da4f98a5fb..20a5b7c632 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 e2a4b914cc..610b422fb7 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 29c4c5cb3d..6cb5f7a76b 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 415084de4d..fcb7227a40 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 ? ( ) : (