feat: view diff in edit segment CR (#8874)

Unleash · Nov 28, 2024 · 0d72cfb · 0d72cfb
1 parent aeada68
commit 0d72cfb
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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,17 +73,18 @@ export const SegmentTooltipLink: FC<IStrategyTooltipLinkProps> = ({
 }) => (
     <StyledContainer>
         <Truncated>
+            <NameWithChangeInfo
+                previousName={change.name}
+                newName={change.payload.name}
+            />
             <TooltipLink
                 tooltip={children}
                 tooltipProps={{
                     maxWidth: 500,
                     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
@@ -196,6 +196,7 @@ export interface IChangeRequestDeleteSegment {
     payload: {
         id: number;
         name: string;
+        snapshot?: ISegment;
     };
 }