diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx index 9c4a3187d7..9df6340e6c 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx @@ -1,5 +1,6 @@ import type React from 'react'; import type { FC, ReactNode } from 'react'; +import { useRef } from 'react'; import { Box, styled, Typography } from '@mui/material'; import type { ChangeRequestState, @@ -9,6 +10,12 @@ import type { import { useSegment } from 'hooks/api/getters/useSegment/useSegment'; import { SegmentDiff, SegmentTooltipLink } from '../../SegmentTooltipLink'; import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; +import { + NewConstraintAccordionList, + useConstraintAccordionList, +} from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList'; +import type { IConstraintAccordionListRef } from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList'; +import { useUiFlag } from 'hooks/useUiFlag'; import { ChangeOverwriteWarning } from './ChangeOverwriteWarning/ChangeOverwriteWarning'; const ChangeItemCreateEditWrapper = styled(Box)(({ theme }) => ({ @@ -65,6 +72,9 @@ export const SegmentChangeDetails: FC<{ : currentSegment?.name; const referenceSegment = changeRequestState === 'Applied' ? snapshotSegment : currentSegment; + const addEditStrategy = useUiFlag('addEditStrategy'); + const constraintsRef = useRef(null); + const { state } = useConstraintAccordionList(undefined, constraintsRef); return ( @@ -113,10 +123,18 @@ export const SegmentChangeDetails: FC<{
{actions}
- + {addEditStrategy ? ( + + ) : ( + + )} )}
diff --git a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx index c46c2a52d8..6652171467 100644 --- a/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx +++ b/frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx @@ -15,6 +15,7 @@ import { NewConstraintAccordion } from 'component/common/NewConstraintAccordion/ import { ConstraintsList } from 'component/common/ConstraintsList/ConstraintsList'; import { useUiFlag } from 'hooks/useUiFlag'; import { EditableConstraintWrapper } from 'component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraintWrapper'; +import { ConstraintAccordionView } from 'component/common/NewConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView'; export interface IConstraintAccordionListProps { constraints: IConstraint[]; @@ -150,16 +151,25 @@ export const NewConstraintAccordionList = forwardRef< {constraints.map((constraint, index) => addEditStrategy ? ( - + state.get(constraint)?.editing ? ( + + ) : ( + + ) ) : (