From 08c11664ce669b1135236e23b130833fcf481823 Mon Sep 17 00:00:00 2001
From: Jaanus Sellin <sellinjaanus@gmail.com>
Date: Wed, 23 Apr 2025 17:37:54 +0300
Subject: [PATCH] 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)
---
 .../Changes/Change/SegmentChangeDetails.tsx   | 26 +++++++++++++---
 .../NewConstraintAccordionList.tsx            | 30 ++++++++++++-------
 2 files changed, 42 insertions(+), 14 deletions(-)

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<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>
-                    <ConstraintAccordionList
-                        constraints={change.payload.constraints}
-                        showLabel={false}
-                    />
+                    {addEditStrategy ? (
+                        <NewConstraintAccordionList
+                            ref={constraintsRef}
+                            constraints={change.payload.constraints}
+                            state={state}
+                        />
+                    ) : (
+                        <ConstraintAccordionList
+                            constraints={change.payload.constraints}
+                            showLabel={false}
+                        />
+                    )}
                 </>
             )}
         </SegmentContainer>
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<
                 <ConstraintsList>
                     {constraints.map((constraint, index) =>
                         addEditStrategy ? (
-                            <EditableConstraintWrapper
-                                key={constraint[constraintId]}
-                                constraint={constraint}
-                                onCancel={onCancel.bind(null, index)}
-                                onDelete={onRemove?.bind(null, index)}
-                                onSave={onSave!.bind(null, index)}
-                                onAutoSave={onAutoSave?.(
-                                    constraint[constraintId],
-                                )}
-                            />
+                            state.get(constraint)?.editing ? (
+                                <EditableConstraintWrapper
+                                    key={constraint[constraintId]}
+                                    constraint={constraint}
+                                    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]}