remove legacy code usage

frontend/src/component/common/SegmentItem/SegmentItem.tsx

@@ -1,145 +0,0 @@
-import { useId, useMemo, useState, type FC } from 'react';
-import { Link } from 'react-router-dom';
-import type { ISegment } from 'interfaces/segment';
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-    Button,
-    styled,
-} from '@mui/material';
-import { StrategyEvaluationItem } from 'component/common/ConstraintsList/StrategyEvaluationItem/StrategyEvaluationItem';
-import { objectId } from 'utils/objectId';
-import {
-    ConstraintListItem,
-    ConstraintsList,
-} from 'component/common/ConstraintsList/ConstraintsList';
-import { ConstraintAccordionView } from '../NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx';
-
-type SegmentItemProps = {
-    segment: Partial<ISegment>;
-    isExpanded?: boolean;
-    disabled?: boolean | null;
-    constraintList?: JSX.Element;
-    headerContent?: JSX.Element;
-};
-
-const StyledConstraintListItem = styled(ConstraintListItem)(() => ({
-    padding: 0,
-}));
-
-const StyledAccordion = styled(Accordion)(() => ({
-    boxShadow: 'none',
-    margin: 0,
-    padding: 0,
-    '::before': {
-        // MUI separator between accordions
-        display: 'none',
-    },
-}));
-
-const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
-    fontSize: theme.typography.body2.fontSize,
-    minHeight: 'unset',
-    ':focus-within': {
-        backgroundColor: 'inherit',
-    },
-}));
-
-const StyledAccordionDetails = styled(AccordionDetails)(({ theme }) => ({
-    padding: theme.spacing(0.5, 3, 2.5),
-}));
-
-const StyledLink = styled(Link)(({ theme }) => ({
-    textDecoration: 'none',
-    paddingRight: theme.spacing(0.5),
-    '&:hover': {
-        textDecoration: 'underline',
-    },
-}));
-
-const StyledActionsContainer = styled('div')(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: 'auto',
-}));
-
-const StyledButton = styled(Button)(({ theme }) => ({
-    fontSize: theme.typography.body2.fontSize,
-}));
-
-const StyledNoConstraintsText = styled('p')(({ theme }) => ({
-    fontSize: theme.typography.body2.fontSize,
-    color: theme.palette.text.secondary,
-}));
-
-export const SegmentItem: FC<SegmentItemProps> = ({
-    segment,
-    isExpanded,
-    headerContent,
-    constraintList,
-}) => {
-    const [isOpen, setIsOpen] = useState(isExpanded || false);
-    const segmentDetailsId = useId();
-
-    const constraints = useMemo(() => {
-        if (constraintList) {
-            return constraintList;
-        }
-
-        if (segment.constraints?.length) {
-            return (
-                <ConstraintsList>
-                    {segment.constraints.map((constraint, index) => (
-                        <ConstraintAccordionView
-                            key={`${objectId(constraint)}-${index}`}
-                            constraint={constraint}
-                        />
-                    ))}
-                </ConstraintsList>
-            );
-        }
-
-        return (
-            <StyledNoConstraintsText>
-                This segment has no constraints.
-            </StyledNoConstraintsText>
-        );
-    }, [constraintList, segment.constraints]);
-
-    return (
-        <StyledConstraintListItem>
-            <StyledAccordion
-                expanded={isOpen}
-                disableGutters
-                TransitionProps={{ mountOnEnter: true, unmountOnExit: true }}
-            >
-                <StyledAccordionSummary
-                    id={`segment-accordion-${segment.id}`}
-                    tabIndex={-1}
-                    aria-controls={segmentDetailsId}
-                >
-                    <StrategyEvaluationItem type='Segment'>
-                        <StyledLink to={`/segments/edit/${segment.id}`}>
-                            {segment.name}
-                        </StyledLink>
-                    </StrategyEvaluationItem>
-                    {headerContent ? headerContent : null}
-                    {!isExpanded ? (
-                        <StyledActionsContainer>
-                            <StyledButton
-                                aria-controls={segmentDetailsId}
-                                size='small'
-                                variant='outlined'
-                                onClick={() => setIsOpen((value) => !value)}
-                            >
-                                {isOpen ? 'Close preview' : 'Preview'}
-                            </StyledButton>
-                        </StyledActionsContainer>
-                    ) : null}
-                </StyledAccordionSummary>
-                <StyledAccordionDetails>{constraints}</StyledAccordionDetails>
-            </StyledAccordion>
-        </StyledConstraintListItem>
-    );
-};

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx

@@ -3,8 +3,8 @@ 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/LegacySegmentItem';
 import { styled } from '@mui/material';
+import { SegmentItem } from 'component/common/SegmentItem/SegmentItem';
 
 interface IFeatureStrategySegmentListProps {
     segments: ISegment[];

frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx

@@ -1,8 +1,8 @@
 import { Fragment } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator';
-import { SegmentItem } from 'component/common/SegmentItem/LegacySegmentItem';
 import type { ISegment } from 'interfaces/segment';
+import { SegmentItem } from 'component/common/SegmentItem/SegmentItem';
+import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
 
 interface IFeatureOverviewSegmentProps {
     segments?: ISegment[];
@@ -23,7 +23,7 @@ export const FeatureOverviewSegment = ({
                 <Fragment key={segment.id}>
                     <ConditionallyRender
                         condition={index > 0}
-                        show={<StrategySeparator text='AND' />}
+                        show={<ConstraintSeparator />}
                     />
                     <SegmentItem segment={segment} disabled={disabled} />
                 </Fragment>

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/ConstraintExecution/ConstraintExecutionWithoutResults.tsx

@@ -1,10 +1,10 @@
-import { Fragment, type VFC } from 'react';
+import { type FC, Fragment } from 'react';
 import type { PlaygroundConstraintSchema } from 'openapi';
 import { objectId } from 'utils/objectId';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { StrategySeparator } from 'component/common/StrategySeparator/LegacyStrategySeparator';
 import { styled } from '@mui/material';
-import { ConstraintAccordionView } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
+import { ConstraintAccordionView } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView';
+import { ConstraintSeparator } from 'component/common/ConstraintsList/ConstraintSeparator/ConstraintSeparator';
 
 interface IConstraintExecutionWithoutResultsProps {
     constraints?: PlaygroundConstraintSchema[];
@@ -16,7 +16,7 @@ export const ConstraintExecutionWrapper = styled('div')(() => ({
     flexDirection: 'column',
 }));
 
-export const ConstraintExecutionWithoutResults: VFC<
+export const ConstraintExecutionWithoutResults: FC<
     IConstraintExecutionWithoutResultsProps
 > = ({ constraints }) => {
     if (!constraints) return null;
@@ -27,13 +27,9 @@ export const ConstraintExecutionWithoutResults: VFC<
                 <Fragment key={objectId(constraint)}>
                     <ConditionallyRender
                         condition={index > 0}
-                        show={<StrategySeparator text='AND' />}
-                    />
-                    <ConstraintAccordionView
-                        constraint={constraint}
-                        compact
-                        disabled
+                        show={<ConstraintSeparator />}
                     />
+                    <ConstraintAccordionView constraint={constraint} disabled />
                 </Fragment>
             ))}
         </ConstraintExecutionWrapper>

frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/PlaygroundStrategyExecution/SegmentExecution/SegmentExecutionWithoutResult.tsx

@@ -2,8 +2,8 @@ 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/LegacySegmentItem';
 import { ConstraintExecutionWithoutResults } from '../ConstraintExecution/ConstraintExecutionWithoutResults.tsx';
+import { SegmentItem } from 'component/common/SegmentItem/SegmentItem.tsx';
 
 interface ISegmentExecutionWithoutResultProps {
     segments?: PlaygroundSegmentSchema[];

frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneStrategy/MilestoneStrategySegmentList.tsx

@@ -2,8 +2,8 @@ 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/LegacySegmentItem';
 import { styled } from '@mui/material';
+import { SegmentItem } from 'component/common/SegmentItem/SegmentItem';
 
 const StyledList = styled('div')(({ theme }) => ({
     display: 'flex',