feat: visualize dependencies managment in change requests (#4978)

frontend/src/component/changeRequest/ChangeRequest/ChangeRequest.tsx

@@ -76,6 +76,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
                             changeRequest={changeRequest}
                             change={change}
                             feature={feature}
+                            onNavigate={onNavigate}
                         />
                     ))}
                     {feature.defaultChange ? (

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

@@ -0,0 +1,66 @@
+import { ReactNode, VFC } from 'react';
+import { Box, styled, Typography } from '@mui/material';
+import {
+    IChangeRequestAddDependency,
+    IChangeRequestDeleteDependency,
+} from 'component/changeRequest/changeRequest.types';
+import { Link } from 'react-router-dom';
+import { ChangeItemWrapper } from './StrategyChange';
+
+const StyledLink = styled(Link)(({ theme }) => ({
+    maxWidth: '100%',
+    textDecoration: 'none',
+    '&:hover, &:focus': {
+        textDecoration: 'underline',
+    },
+}));
+
+const AddDependencyWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+
+export const DependencyChange: VFC<{
+    actions?: ReactNode;
+    change: IChangeRequestAddDependency | IChangeRequestDeleteDependency;
+    projectId: string;
+    onNavigate?: () => void;
+}> = ({ actions, change, projectId, onNavigate }) => {
+    return (
+        <>
+            {change.action === 'addDependency' && (
+                <>
+                    <ChangeItemWrapper>
+                        <AddDependencyWrapper>
+                            <Typography color={'success.dark'}>
+                                + Adding dependency:
+                            </Typography>
+                            <StyledLink
+                                to={`/projects/${projectId}/features/${change.payload.feature}`}
+                                onClick={onNavigate}
+                            >
+                                {change.payload.feature}
+                            </StyledLink>
+                        </AddDependencyWrapper>
+                        {actions}
+                    </ChangeItemWrapper>
+                </>
+            )}
+            {change.action === 'deleteDependency' && (
+                <ChangeItemWrapper>
+                    <AddDependencyWrapper>
+                        <Typography
+                            sx={(theme) => ({
+                                color: theme.palette.error.main,
+                            })}
+                        >
+                            - Deleting dependencies
+                        </Typography>
+                    </AddDependencyWrapper>
+                    {actions}
+                </ChangeItemWrapper>
+            )}
+        </>
+    );
+};

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

@@ -12,6 +12,7 @@ import { StrategyChange } from './StrategyChange';
 import { VariantPatch } from './VariantPatch/VariantPatch';
 import { EnvironmentStrategyExecutionOrder } from './EnvironmentStrategyExecutionOrder/EnvironmentStrategyExecutionOrder';
 import { ArchiveFeatureChange } from './ArchiveFeatureChange';
+import { DependencyChange } from './DependencyChange';
 
 const StyledSingleChangeBox = styled(Box, {
     shouldForwardProp: (prop: string) => !prop.startsWith('$'),
@@ -61,7 +62,8 @@ export const FeatureChange: FC<{
     changeRequest: IChangeRequest;
     change: IFeatureChange;
     feature: IChangeRequestFeature;
-}> = ({ index, change, feature, changeRequest, actions }) => {
+    onNavigate?: () => void;
+}> = ({ index, change, feature, changeRequest, actions, onNavigate }) => {
     const lastIndex = feature.defaultChange
         ? feature.changes.length + 1
         : feature.changes.length;
@@ -85,6 +87,15 @@ export const FeatureChange: FC<{
             />
 
             <Box sx={(theme) => ({ padding: theme.spacing(3) })}>
+                {(change.action === 'addDependency' ||
+                    change.action === 'deleteDependency') && (
+                    <DependencyChange
+                        actions={actions}
+                        change={change}
+                        projectId={changeRequest.project}
+                        onNavigate={onNavigate}
+                    />
+                )}
                 {change.action === 'updateEnabled' && (
                     <ToggleStatusChange
                         enabled={change.payload.enabled}

frontend/src/component/changeRequest/changeRequest.types.ts

@@ -79,7 +79,8 @@ type ChangeRequestPayload =
     | IChangeRequestUpdateSegment
     | IChangeRequestDeleteSegment
     | SetStrategySortOrderSchema
-    | IChangeRequestArchiveFeature;
+    | IChangeRequestArchiveFeature
+    | ChangeRequestAddDependency;
 
 export interface IChangeRequestAddStrategy extends IChangeRequestChangeBase {
     action: 'addStrategy';
@@ -110,6 +111,16 @@ export interface IChangeRequestArchiveFeature extends IChangeRequestChangeBase {
     action: 'archiveFeature';
 }
 
+export interface IChangeRequestAddDependency extends IChangeRequestChangeBase {
+    action: 'addDependency';
+    payload: ChangeRequestAddDependency;
+}
+
+export interface IChangeRequestDeleteDependency
+    extends IChangeRequestChangeBase {
+    action: 'deleteDependency';
+}
+
 export interface IChangeRequestReorderStrategy
     extends IChangeRequestChangeBase {
     action: 'reorderStrategy';
@@ -150,7 +161,9 @@ export type IFeatureChange =
     | IChangeRequestEnabled
     | IChangeRequestPatchVariant
     | IChangeRequestReorderStrategy
-    | IChangeRequestArchiveFeature;
+    | IChangeRequestArchiveFeature
+    | IChangeRequestAddDependency
+    | IChangeRequestDeleteDependency;
 
 export type ISegmentChange =
     | IChangeRequestUpdateSegment
@@ -162,6 +175,8 @@ type ChangeRequestVariantPatch = {
 
 type ChangeRequestEnabled = { enabled: boolean };
 
+type ChangeRequestAddDependency = { feature: string };
+
 type ChangeRequestAddStrategy = Pick<
     IFeatureStrategy,
     | 'parameters'
@@ -190,4 +205,6 @@ export type ChangeRequestAction =
     | 'reorderStrategy'
     | 'updateSegment'
     | 'deleteSegment'
-    | 'archiveFeature';
+    | 'archiveFeature'
+    | 'addDependency'
+    | 'deleteDependency';