From 88514077f512c29d00d01c95a95cba9bf64740a1 Mon Sep 17 00:00:00 2001
From: Thomas Heartman <thomas@getunleash.io>
Date: Mon, 30 Jun 2025 14:17:49 +0200
Subject: [PATCH] Chore(1-3882)/add diff border (#10244)

Adds a border around all the JSON diffs panels to align better with the
sketches and to mesh better with the existing change cards in CRs.

<img width="1051" alt="image"
src="https://github.com/user-attachments/assets/b4e81c34-630b-436b-8de2-9e6e6893b3fb"
/>
---
 .../Changes/Change/ChangeTabComponents.tsx    | 12 +++++++-
 .../EnvironmentStrategyExecutionOrder.tsx     |  2 +-
 .../EnvironmentStrategyOrderDiff.tsx          | 29 ++++++++++++-------
 .../Changes/Change/ReleasePlanChange.tsx      |  4 +--
 .../Changes/Change/SegmentChangeDetails.tsx   |  4 +--
 .../Changes/Change/StrategyChange.tsx         |  6 ++--
 6 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeTabComponents.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeTabComponents.tsx
index 76807f37e0..b79d41b177 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeTabComponents.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeTabComponents.tsx
@@ -51,4 +51,14 @@ export const Tabs = ({ children }: PropsWithChildren) => (
     </MuiTabs>
 );
 
-export const TabPanel = MuiTabPanel;
+export const TabPanel = styled(MuiTabPanel, {
+    shouldForwardProp: (prop) => prop !== 'variant',
+})<{ variant?: 'diff' | 'change' }>(({ theme, variant }) =>
+    variant === 'diff'
+        ? {
+              padding: theme.spacing(2),
+              borderRadius: theme.shape.borderRadiusLarge,
+              border: `1px solid ${theme.palette.divider}`,
+          }
+        : {},
+);
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder.tsx
index 9dd554f918..63e79fe0ce 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder.tsx
@@ -114,7 +114,7 @@ export const EnvironmentStrategyExecutionOrder = ({
                             ))}
                         </StyledStrategyExecutionWrapper>
                     </TabPanel>
-                    <TabPanel>
+                    <TabPanel variant='diff'>
                         <EnvironmentStrategyOrderDiff
                             preData={preData}
                             data={data}
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyOrderDiff.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyOrderDiff.tsx
index 2ad4a23b2a..24e11195c6 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyOrderDiff.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyOrderDiff.tsx
@@ -1,5 +1,7 @@
 import { styled } from '@mui/material';
 import { EventDiff } from 'component/events/EventDiff/EventDiff';
+import { useUiFlag } from 'hooks/useUiFlag';
+import { Fragment } from 'react';
 
 const StyledCodeSection = styled('div')(({ theme }) => ({
     overflowX: 'auto',
@@ -17,14 +19,19 @@ interface IDiffProps {
     data: StrategyIds;
 }
 
-export const EnvironmentStrategyOrderDiff = ({ preData, data }: IDiffProps) => (
-    <StyledCodeSection>
-        <EventDiff
-            entry={{
-                preData: preData.strategyIds,
-                data: data.strategyIds,
-            }}
-            sort={(a, b) => a.index - b.index}
-        />
-    </StyledCodeSection>
-);
+export const EnvironmentStrategyOrderDiff = ({ preData, data }: IDiffProps) => {
+    const useNewDiff = useUiFlag('improvedJsonDiff');
+    const Wrapper = useNewDiff ? Fragment : StyledCodeSection;
+
+    return (
+        <Wrapper>
+            <EventDiff
+                entry={{
+                    preData: preData.strategyIds,
+                    data: data.strategyIds,
+                }}
+                sort={(a, b) => a.index - b.index}
+            />
+        </Wrapper>
+    );
+};
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx
index 7cabd17f99..ad5a7ffde5 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx
@@ -131,7 +131,7 @@ const StartMilestone: FC<{
             <TabPanel>
                 <ReleasePlanMilestone readonly milestone={newMilestone} />
             </TabPanel>
-            <TabPanel>
+            <TabPanel variant='diff'>
                 <EventDiff
                     entry={{
                         preData: previousMilestone,
@@ -245,7 +245,7 @@ const AddReleasePlan: FC<{
             <TabPanel>
                 <ReleasePlan plan={planPreview} readonly />
             </TabPanel>
-            <TabPanel>
+            <TabPanel variant='diff'>
                 <EventDiff
                     entry={{
                         preData: currentReleasePlan,
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
index 5c000d7370..fa7c6d0e41 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChangeDetails.tsx
@@ -105,7 +105,7 @@ export const SegmentChangeDetails: FC<{
                         </ChangeItemWrapper>
 
                         <TabPanel />
-                        <TabPanel>
+                        <TabPanel sx={{ mt: 1 }} variant='diff'>
                             <SegmentDiff
                                 change={change}
                                 currentSegment={referenceSegment}
@@ -141,7 +141,7 @@ export const SegmentChangeDetails: FC<{
                                 constraints={change.payload.constraints}
                             />
                         </TabPanel>
-                        <TabPanel>
+                        <TabPanel variant='diff'>
                             <SegmentDiff
                                 change={change}
                                 currentSegment={referenceSegment}
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
index 988ea09943..3dcab834e4 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/StrategyChange.tsx
@@ -164,7 +164,7 @@ const DeleteStrategy: FC<{
                     <StrategyExecution strategy={referenceStrategy} />
                 )}
             </TabPanel>
-            <TabPanel>
+            <TabPanel variant='diff'>
                 <StrategyDiff
                     change={change}
                     currentStrategy={referenceStrategy}
@@ -266,7 +266,7 @@ const UpdateStrategy: FC<{
                     </StyledBox>
                 ) : null}
             </TabPanel>
-            <TabPanel>
+            <TabPanel variant='diff'>
                 <StrategyDiff
                     change={change}
                     currentStrategy={referenceStrategy}
@@ -320,7 +320,7 @@ const AddStrategy: FC<{
                 </StyledBox>
             ) : null}
         </TabPanel>
-        <TabPanel>
+        <TabPanel variant='diff'>
             <StrategyDiff change={change} currentStrategy={undefined} />
         </TabPanel>
     </>