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"
/>

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}`,
+          }
+        : {},
+);

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}

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,8 +19,12 @@ interface IDiffProps {
     data: StrategyIds;
 }
 
-export const EnvironmentStrategyOrderDiff = ({ preData, data }: IDiffProps) => (
+export const EnvironmentStrategyOrderDiff = ({ preData, data }: IDiffProps) => {
-    <StyledCodeSection>
+    const useNewDiff = useUiFlag('improvedJsonDiff');
+    const Wrapper = useNewDiff ? Fragment : StyledCodeSection;
+
+    return (
+        <Wrapper>
             <EventDiff
                 entry={{
                     preData: preData.strategyIds,
@@ -26,5 +32,6 @@ export const EnvironmentStrategyOrderDiff = ({ preData, data }: IDiffProps) => (
                 }}
                 sort={(a, b) => a.index - b.index}
             />
-    </StyledCodeSection>
+        </Wrapper>
     );
+};

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,

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}

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>
     </>