1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

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

This commit is contained in:
Mateusz Kwasniewski 2023-10-10 10:36:13 +02:00 committed by GitHub
parent b4c8f92a26
commit af50fc2fd3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 99 additions and 4 deletions

View File

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

View File

@ -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>
)}
</>
);
};

View File

@ -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}

View File

@ -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';