From 0d72cfbba809ecb12473fe524b2a72b43de79e21 Mon Sep 17 00:00:00 2001
From: Mateusz Kwasniewski <kwasniewski.mateusz@gmail.com>
Date: Thu, 28 Nov 2024 09:29:19 +0100
Subject: [PATCH] feat: view diff in edit segment CR (#8874)

---
 .../Changes/Change/SegmentChangeDetails.tsx     |  9 ++++++---
 .../ChangeRequest/SegmentTooltipLink.tsx        | 17 ++++++++++++-----
 .../changeRequest/changeRequest.types.ts        |  1 +
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
index 30d351e0db95..6a30a32f4b85 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { VFC, FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { Box, styled, Typography } from '@mui/material';
 import type {
     ChangeRequestState,
@@ -52,12 +52,15 @@ const SegmentContainer = styled(Box, {
     borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`,
 }));
 
-export const SegmentChangeDetails: VFC<{
+export const SegmentChangeDetails: FC<{
     actions?: ReactNode;
     change: IChangeRequestUpdateSegment | IChangeRequestDeleteSegment;
     changeRequestState: ChangeRequestState;
 }> = ({ actions, change, changeRequestState }) => {
     const { segment: currentSegment } = useSegment(change.payload.id);
+    const snapshotSegment = change.payload.snapshot;
+    const referenceSegment =
+        changeRequestState === 'Applied' ? snapshotSegment : currentSegment;
 
     return (
         <SegmentContainer conflict={change.conflict}>
@@ -97,7 +100,7 @@ export const SegmentChangeDetails: VFC<{
                             <SegmentTooltipLink change={change}>
                                 <SegmentDiff
                                     change={change}
-                                    currentSegment={currentSegment}
+                                    currentSegment={referenceSegment}
                                 />
                             </SegmentTooltipLink>
                         </ChangeItemInfo>
diff --git a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
index da5067cf7956..31b8ed138cfa 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/SegmentTooltipLink.tsx
@@ -35,7 +35,7 @@ export const SegmentDiff: FC<{
             <EventDiff
                 entry={{
                     preData: omit(currentSegment, ['createdAt', 'createdBy']),
-                    data: changeRequestSegment,
+                    data: omit(changeRequestSegment, ['snapshot']),
                 }}
             />
         </StyledCodeSection>
@@ -56,9 +56,15 @@ const StyledContainer: FC<{ children?: React.ReactNode }> = styled('div')(
     }),
 );
 
+const ViewDiff = styled('span')(({ theme }) => ({
+    color: theme.palette.primary.main,
+    marginLeft: theme.spacing(1),
+}));
+
 const Truncated = styled('div')(() => ({
     ...textTruncated,
     maxWidth: 500,
+    display: 'flex',
 }));
 
 export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
@@ -67,6 +73,10 @@ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
 }) => (
     <StyledContainer>
         <Truncated>
+            <NameWithChangeInfo
+                previousName={change.name}
+                newName={change.payload.name}
+            />
             <TooltipLink
                 tooltip={children}
                 tooltipProps={{
@@ -74,10 +84,7 @@ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
                     maxHeight: 600,
                 }}
             >
-                <NameWithChangeInfo
-                    previousName={change.name}
-                    newName={change.payload.name}
-                />
+                <ViewDiff>View Diff</ViewDiff>
             </TooltipLink>
         </Truncated>
     </StyledContainer>
diff --git a/frontend/src/component/changeRequest/changeRequest.types.ts b/frontend/src/component/changeRequest/changeRequest.types.ts
index e2e742b8027a..e8168eeda1ab 100644
--- a/frontend/src/component/changeRequest/changeRequest.types.ts
+++ b/frontend/src/component/changeRequest/changeRequest.types.ts
@@ -196,6 +196,7 @@ export interface IChangeRequestDeleteSegment {
     payload: {
         id: number;
         name: string;
+        snapshot?: ISegment;
     };
 }