fix: delete project segment with change request (#9315)

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}

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
+            <NameWithChangeInfo previousName={previousName} newName={name} />
-                previousName={change.name}
-                newName={change.payload.name}
-            />
             <TooltipLink
                 tooltip={children}
                 tooltipProps={{

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 {
+            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'}
                     />
                 )}
             />

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={

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();

frontend/src/hooks/api/actions/useChangeRequestApi/useChangeRequestApi.ts

@@ -16,6 +16,7 @@ export interface IChangeSchema {
         | 'reorderStrategy'
         | 'archiveFeature'
         | 'updateSegment'
+        | 'deleteSegment'
         | 'addDependency'
         | 'deleteDependency'
         | 'addReleasePlan'