add tabs to strategy sort order (#10243)

Adds the same tab interface to env execution order changes as to other
diffable changes. Instead of creating a new file, this one just
duplicates and changes the component that we wanna touch.

Change 
<img width="799" alt="image"
src="https://github.com/user-attachments/assets/2cd54f50-c4e6-43ef-a413-ed61973cf889"
/>

Diff
<img width="997" alt="image"
src="https://github.com/user-attachments/assets/ef0379f5-0084-4c38-a713-373ccfacee0e"
/>

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder.tsx

@@ -7,6 +7,8 @@ import { EnvironmentStrategyOrderDiff } from './EnvironmentStrategyOrderDiff.tsx
 import { StrategyExecution } from 'component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution';
 import { formatStrategyName } from '../../../../../../utils/strategyNames.tsx';
 import type { IFeatureStrategy } from 'interfaces/strategy.ts';
+import { Tab, TabList, TabPanel, Tabs } from '../ChangeTabComponents.tsx';
+import { useUiFlag } from 'hooks/useUiFlag.ts';
 
 const ChangeItemInfo = styled(Box)({
     display: 'flex',
@@ -52,6 +54,7 @@ export const EnvironmentStrategyExecutionOrder = ({
     actions,
 }: IEnvironmentStrategyExecutionOrderProps) => {
     const { feature: featureData, loading } = useFeature(project, feature);
+    const useDiffableComponent = useUiFlag('crDiffView');
 
     if (loading) return null;
 
@@ -85,6 +88,43 @@ export const EnvironmentStrategyExecutionOrder = ({
         strategyIds: updatedStrategies.map((strategy) => strategy.id),
     };
 
+    if (useDiffableComponent) {
+        return (
+            <Tabs>
+                <ChangeItemInfo>
+                    <StyledChangeHeader>
+                        <p>Updating strategy execution order to:</p>
+                        <div>
+                            <TabList>
+                                <Tab>Change</Tab>
+                                <Tab>View diff</Tab>
+                            </TabList>
+                            {actions}
+                        </div>
+                    </StyledChangeHeader>
+                    <TabPanel>
+                        <StyledStrategyExecutionWrapper>
+                            {updatedStrategies.map((strategy, index) => (
+                                <StyledStrategyContainer key={strategy.id}>
+                                    {`${index + 1}: `}
+                                    {formatStrategyName(strategy?.name || '')}
+                                    {strategy?.title && ` - ${strategy.title}`}
+                                    <StrategyExecution strategy={strategy!} />
+                                </StyledStrategyContainer>
+                            ))}
+                        </StyledStrategyExecutionWrapper>
+                    </TabPanel>
+                    <TabPanel>
+                        <EnvironmentStrategyOrderDiff
+                            preData={preData}
+                            data={data}
+                        />
+                    </TabPanel>
+                </ChangeItemInfo>
+            </Tabs>
+        );
+    }
+
     return (
         <ChangeItemInfo>
             <StyledChangeHeader>

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/EnvironmentStrategyExecutionOrder/EnvironmentStrategyOrderDiff.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
-import EventDiff from 'component/events/EventDiff/EventDiff';
+import { EventDiff } from 'component/events/EventDiff/EventDiff';
 
 const StyledCodeSection = styled('div')(({ theme }) => ({
     overflowX: 'auto',