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:
parent
b4c8f92a26
commit
af50fc2fd3
@ -76,6 +76,7 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
|
||||
changeRequest={changeRequest}
|
||||
change={change}
|
||||
feature={feature}
|
||||
onNavigate={onNavigate}
|
||||
/>
|
||||
))}
|
||||
{feature.defaultChange ? (
|
||||
|
@ -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>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
@ -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}
|
||||
|
@ -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';
|
||||
|
Loading…
Reference in New Issue
Block a user