flag dependency change

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

@@ -1,11 +1,17 @@
 import type { FC, ReactNode } from 'react';
-import { styled, Typography } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
 import type {
     IChangeRequestAddDependency,
     IChangeRequestDeleteDependency,
 } from 'component/changeRequest/changeRequest.types';
 import { Link } from 'react-router-dom';
-import { ChangeItemInfo, ChangeItemWrapper } from './Change.styles';
+import {
+    Added,
+    ChangeItemInfo,
+    ChangeItemWrapper,
+    Deleted,
+} from './Change.styles';
+import { ChangeItemWrapper as LegacyChangeItemWrapper } from './LegacyStrategyChange.tsx';
 
 const StyledLink = styled(Link)(({ theme }) => ({
     maxWidth: '100%',
@@ -20,14 +26,62 @@ export const DependencyChange: FC<{
     change: IChangeRequestAddDependency | IChangeRequestDeleteDependency;
     projectId: string;
     onNavigate?: () => void;
+}> = ({ actions, change, projectId, onNavigate }) => {
+    if (change.action === 'addDependency') {
+        return (
+            <ChangeItemWrapper>
+                <ChangeItemInfo>
+                    <Added>Adding dependency</Added>
+                    <StyledLink
+                        to={`/projects/${projectId}/features/${change.payload.feature}`}
+                        onClick={onNavigate}
+                    >
+                        {change.payload.feature}
+                    </StyledLink>
+                    {!change.payload.enabled ? ' (disabled)' : null}
+                    {change.payload.variants?.length
+                        ? `(${change.payload.variants?.join(', ')})`
+                        : null}
+                    {actions}
+                </ChangeItemInfo>
+            </ChangeItemWrapper>
+        );
+    }
+
+    if (change.action === 'deleteDependency') {
+        return (
+            <ChangeItemWrapper>
+                <ChangeItemInfo>
+                    <Deleted>Deleting dependencies</Deleted>
+                    {actions}
+                </ChangeItemInfo>
+            </ChangeItemWrapper>
+        );
+    }
+};
+
+const AddDependencyWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
+/**
+ * @deprecated use DependencyChange instead; remove with flag crDiffView
+ */
+export const LegacyDependencyChange: FC<{
+    actions?: ReactNode;
+    change: IChangeRequestAddDependency | IChangeRequestDeleteDependency;
+    projectId: string;
+    onNavigate?: () => void;
 }> = ({ actions, change, projectId, onNavigate }) => {
     return (
         <>
             {change.action === 'addDependency' && (
                 <>
-                    <ChangeItemWrapper>
+                    <LegacyChangeItemWrapper>
-                        <ChangeItemInfo>
+                        <AddDependencyWrapper>
-                            <Typography component='span' color={'success.dark'}>
+                            <Typography color={'success.dark'}>
                                 + Adding dependency
                             </Typography>
                             <StyledLink
@@ -40,25 +94,23 @@ export const DependencyChange: FC<{
                             {change.payload.variants?.length
                                 ? `(${change.payload.variants?.join(', ')})`
                                 : null}
-                            {actions}
+                        </AddDependencyWrapper>
-                        </ChangeItemInfo>
+                        {actions}
-                    </ChangeItemWrapper>
+                    </LegacyChangeItemWrapper>
                 </>
             )}
             {change.action === 'deleteDependency' && (
                 <ChangeItemWrapper>
-                    <ChangeItemInfo>
+                    <AddDependencyWrapper>
                         <Typography
                             sx={(theme) => ({
                                 color: theme.palette.error.main,
                             })}
-                            component='span'
-                            display='inline'
                         >
                             - Deleting dependencies
                         </Typography>
-                        {actions}
+                    </AddDependencyWrapper>
-                    </ChangeItemInfo>
+                    {actions}
                 </ChangeItemWrapper>
             )}
         </>

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

@@ -15,7 +15,10 @@ import {
     ArchiveFeatureChange,
     LegacyArchiveFeatureChange,
 } from './ArchiveFeatureChange.tsx';
-import { DependencyChange } from './DependencyChange.tsx';
+import {
+    DependencyChange,
+    LegacyDependencyChange,
+} from './DependencyChange.tsx';
 import { Link } from 'react-router-dom';
 import { LegacyReleasePlanChange } from './LegacyReleasePlanChange.tsx';
 import { ReleasePlanChange } from './ReleasePlanChange.tsx';
@@ -107,6 +110,10 @@ export const FeatureChange: FC<{
         ? ArchiveFeatureChange
         : LegacyArchiveFeatureChange;
 
+    const DependencyChangeComponent = useDiffableChangeComponent
+        ? DependencyChange
+        : LegacyDependencyChange;
+
     return (
         <StyledSingleChangeBox
             key={objectId(change)}
@@ -166,7 +173,7 @@ export const FeatureChange: FC<{
             <ChangeInnerBox>
                 {(change.action === 'addDependency' ||
                     change.action === 'deleteDependency') && (
-                    <DependencyChange
+                    <DependencyChangeComponent
                         actions={actions}
                         change={change}
                         projectId={changeRequest.project}