feat: change requests, use new accordion list not legacy (#9825)

This should be final piece where old accordion is used.


![image](https://github.com/user-attachments/assets/854dfab9-4b05-4a14-bb17-0de49705079d)

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<IConstraintAccordionListRef | null>(null);
+    const { state } = useConstraintAccordionList(undefined, constraintsRef);
 
     return (
         <SegmentContainer conflict={change.conflict}>
@@ -113,10 +123,18 @@ export const SegmentChangeDetails: FC<{
                         </ChangeItemInfo>
                         <div>{actions}</div>
                     </ChangeItemCreateEditWrapper>
+                    {addEditStrategy ? (
+                        <NewConstraintAccordionList
+                            ref={constraintsRef}
+                            constraints={change.payload.constraints}
+                            state={state}
+                        />
+                    ) : (
                         <ConstraintAccordionList
                             constraints={change.payload.constraints}
                             showLabel={false}
                         />
+                    )}
                 </>
             )}
         </SegmentContainer>

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<
                 <ConstraintsList>
                     {constraints.map((constraint, index) =>
                         addEditStrategy ? (
+                            state.get(constraint)?.editing ? (
                                 <EditableConstraintWrapper
                                     key={constraint[constraintId]}
                                     constraint={constraint}
-                                onCancel={onCancel.bind(null, index)}
+                                    onCancel={onCancel?.bind(null, index)}
                                     onDelete={onRemove?.bind(null, index)}
                                     onSave={onSave!.bind(null, index)}
                                     onAutoSave={onAutoSave?.(
                                         constraint[constraintId],
                                     )}
                                 />
+                            ) : (
+                                <ConstraintAccordionView
+                                    key={constraint[constraintId]}
+                                    constraint={constraint}
+                                    onEdit={onEdit?.bind(null, constraint)}
+                                    onDelete={onRemove?.bind(null, index)}
+                                />
+                            )
                         ) : (
                             <NewConstraintAccordion
                                 key={constraint[constraintId]}