From b207606800fa1fcb7f0f02a739213eda74c44fbb Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Mon, 17 Feb 2025 10:41:56 +0100
Subject: [PATCH] fix: delete project segment with change request (#9315)

---
 .../Changes/Change/SegmentChangeDetails.tsx   | 13 ++++++++---
 .../ChangeRequest/SegmentTooltipLink.tsx      | 11 +++++-----
 .../RemoveSegmentButton.tsx                   | 22 +++++++++++++++++--
 .../segments/SegmentDelete/SegmentDelete.tsx  |  3 +++
 .../SegmentDeleteConfirm.tsx                  |  4 +++-
 .../useChangeRequestApi.ts                    |  1 +
 6 files changed, 42 insertions(+), 12 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
index 6a30a32f4b..4471e623ee 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
@@ -59,6 +59,10 @@ export const SegmentChangeDetails: FC<{
 }> = ({ actions, change, changeRequestState }) => {
     const { segment: currentSegment } = useSegment(change.payload.id);
     const snapshotSegment = change.payload.snapshot;
+    const previousName =
+        changeRequestState === 'Applied'
+            ? change.payload?.snapshot?.name
+            : currentSegment?.name;
     const referenceSegment =
         changeRequestState === 'Applied' ? snapshotSegment : currentSegment;
 
@@ -74,10 +78,13 @@ export const SegmentChangeDetails: FC<{
                         >
                             - Deleting segment:
                         </Typography>
-                        <SegmentTooltipLink change={change}>
+                        <SegmentTooltipLink
+                            name={change.payload.name}
+                            previousName={previousName}
+                        >
                             <SegmentDiff
                                 change={change}
-                                currentSegment={currentSegment}
+                                currentSegment={referenceSegment}
                             />
                         </SegmentTooltipLink>
                     </ChangeItemInfo>
@@ -97,7 +104,7 @@ export const SegmentChangeDetails: FC<{
                     <ChangeItemCreateEditWrapper>
                         <ChangeItemInfo>
                             <Typography>Editing segment:</Typography>
-                            <SegmentTooltipLink change={change}>
+                            <SegmentTooltipLink name={change.payload.name}>
                                 <SegmentDiff
                                     change={change}
                                     currentSegment={referenceSegment}
diff --git a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
index 31b8ed138c..cba0dcce34 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
@@ -42,8 +42,9 @@ export const SegmentDiff: FC<{
     );
 };
 interface IStrategyTooltipLinkProps {
-    change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
     children?: React.ReactNode;
+    name?: string;
+    previousName?: string;
 }
 
 const StyledContainer: FC<{ children?: React.ReactNode }> = styled('div')(
@@ -68,15 +69,13 @@ const Truncated = styled('div')(() => ({
 }));
 
 export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
-    change,
+    name,
+    previousName,
     children,
 }) => (
     <StyledContainer>
         <Truncated>
-            <NameWithChangeInfo
-                previousName={change.name}
-                newName={change.payload.name}
-            />
+            <NameWithChangeInfo previousName={previousName} newName={name} />
             <TooltipLink
                 tooltip={children}
                 tooltipProps={{
diff --git a/frontend/src/component/segments/RemoveSegmentButton/RemoveSegmentButton.tsx b/frontend/src/component/segments/RemoveSegmentButton/RemoveSegmentButton.tsx
index 72df0a34b9..d651f6d974 100644
--- a/frontend/src/component/segments/RemoveSegmentButton/RemoveSegmentButton.tsx
+++ b/frontend/src/component/segments/RemoveSegmentButton/RemoveSegmentButton.tsx
@@ -14,6 +14,8 @@ import { useSegmentsApi } from 'hooks/api/actions/useSegmentsApi/useSegmentsApi'
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useState } from 'react';
 import { useOptionalPathParam } from 'hooks/useOptionalPathParam';
+import { useHighestPermissionChangeRequestEnvironment } from 'hooks/useHighestPermissionChangeRequestEnvironment';
+import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 
 interface IRemoveSegmentButtonProps {
     segment: ISegment;
@@ -25,14 +27,29 @@ export const RemoveSegmentButton = ({ segment }: IRemoveSegmentButtonProps) => {
     const { deleteSegment } = useSegmentsApi();
     const { setToastData, setToastApiError } = useToast();
     const [showModal, toggleModal] = useState(false);
+    const highestPermissionChangeRequestEnv =
+        useHighestPermissionChangeRequestEnvironment(segment?.project);
+    const changeRequestEnv = highestPermissionChangeRequestEnv();
+    const { addChange } = useChangeRequestApi();
 
     const onRemove = async () => {
         try {
-            await deleteSegment(segment.id);
+            if (changeRequestEnv && segment.project) {
+                await addChange(segment.project, changeRequestEnv, {
+                    action: 'deleteSegment',
+                    feature: null,
+                    payload: { id: segment.id },
+                });
+            } else {
+                await deleteSegment(segment.id);
+            }
+
             await refetchSegments();
             setToastData({
+                text: `Segment ${
+                    changeRequestEnv ? 'change added to draft' : 'deleted'
+                }`,
                 type: 'success',
-                text: 'Segment deleted',
             });
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
@@ -60,6 +77,7 @@ export const RemoveSegmentButton = ({ segment }: IRemoveSegmentButtonProps) => {
                         open={showModal}
                         onClose={() => toggleModal(false)}
                         onRemove={onRemove}
+                        title={changeRequestEnv ? 'Add to draft' : 'Save'}
                     />
                 )}
             />
diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDelete.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDelete.tsx
index c60bdac041..a11b68f367 100644
--- a/frontend/src/component/segments/SegmentDelete/SegmentDelete.tsx
+++ b/frontend/src/component/segments/SegmentDelete/SegmentDelete.tsx
@@ -9,6 +9,7 @@ interface ISegmentDeleteProps {
     open: boolean;
     onClose: () => void;
     onRemove: () => void;
+    title: string;
 }
 
 export const SegmentDelete = ({
@@ -16,6 +17,7 @@ export const SegmentDelete = ({
     open,
     onClose,
     onRemove,
+    title,
 }: ISegmentDeleteProps) => {
     const { strategies, changeRequestStrategies, loading } =
         useStrategiesBySegment(segment.id);
@@ -34,6 +36,7 @@ export const SegmentDelete = ({
                     open={open}
                     onClose={onClose}
                     onRemove={onRemove}
+                    title={title}
                 />
             }
             elseShow={
diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
index f4405c27fa..6004afab06 100644
--- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
+++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
@@ -15,6 +15,7 @@ interface ISegmentDeleteConfirmProps {
     open: boolean;
     onClose: () => void;
     onRemove: () => void;
+    title: string;
 }
 
 export const SegmentDeleteConfirm = ({
@@ -22,6 +23,7 @@ export const SegmentDeleteConfirm = ({
     open,
     onClose,
     onRemove,
+    title,
 }: ISegmentDeleteConfirmProps) => {
     const [confirmName, setConfirmName] = useState('');
 
@@ -37,7 +39,7 @@ export const SegmentDeleteConfirm = ({
         <Dialogue
             title='Are you sure you want to delete this segment?'
             open={open}
-            primaryButtonText='Delete segment'
+            primaryButtonText={title}
             secondaryButtonText='Cancel'
             onClick={() => {
                 onRemove();
diff --git a/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts b/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts
index a617be8f94..1f4922ffc2 100644
--- a/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts
+++ b/frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts
@@ -16,6 +16,7 @@ export interface IChangeSchema {
         | 'reorderStrategy'
         | 'archiveFeature'
         | 'updateSegment'
+        | 'deleteSegment'
         | 'addDependency'
         | 'deleteDependency'
         | 'addReleasePlan'