mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-31 00:16:47 +01:00
Show conflicts in change requests (#2389)
## About the changes Show warnings about incompatible changes in changesets. Closes [1-352/display-conflicts](https://linear.app/unleash/issue/1-352/display-conflicts) Relates to [roadmap](https://github.com/orgs/Unleash/projects/10) item: #2251
This commit is contained in:
Tymoteusz Czech
GitHub
parent
89f2d81253
commit
8b057a1466
@ -1,5 +1,5 @@
|
||||
import { VFC } from 'react';
|
||||
import { Box } from '@mui/material';
|
||||
import { Alert, Box, styled } from '@mui/material';
|
||||
import { ChangeRequestFeatureToggleChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ChangeRequestFeatureToggleChange';
|
||||
import { objectId } from 'utils/objectId';
|
||||
import { ToggleStatusChange } from '../ChangeRequestOverview/ChangeRequestFeatureToggleChange/ToggleStatusChange';
|
||||
@ -17,6 +17,7 @@ import {
|
||||
GetFeatureStrategyIcon,
|
||||
} from 'utils/strategyNames';
|
||||
import { hasNameField } from '../changeRequest.types';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
interface IChangeRequestProps {
|
||||
changeRequest: IChangeRequest;
|
||||
@ -24,6 +25,38 @@ interface IChangeRequestProps {
|
||||
onNavigate?: () => void;
|
||||
}
|
||||
|
||||
const StyledSingleChangeBox = styled(Box)<{
|
||||
hasConflict: boolean;
|
||||
isAfterWarning: boolean;
|
||||
isLast: boolean;
|
||||
inInConflictFeature: boolean;
|
||||
}>(({ theme, hasConflict, inInConflictFeature, isAfterWarning, isLast }) => ({
|
||||
borderLeft: '1px solid',
|
||||
borderRight: '1px solid',
|
||||
borderTop: '1px solid',
|
||||
borderBottom: isLast ? '1px solid' : 'none',
|
||||
borderRadius: isLast
|
||||
? `0 0
|
||||
${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`
|
||||
: 0,
|
||||
borderColor:
|
||||
hasConflict || inInConflictFeature
|
||||
? theme.palette.warning.border
|
||||
: theme.palette.dividerAlternative,
|
||||
borderTopColor:
|
||||
(hasConflict || isAfterWarning) && !inInConflictFeature
|
||||
? theme.palette.warning.border
|
||||
: theme.palette.dividerAlternative,
|
||||
}));
|
||||
|
||||
const StyledAlert = styled(Alert)(({ theme }) => ({
|
||||
borderRadius: 0,
|
||||
padding: theme.spacing(0, 2),
|
||||
'&.MuiAlert-standardWarning': {
|
||||
borderStyle: 'none none solid none',
|
||||
},
|
||||
}));
|
||||
|
||||
export const ChangeRequest: VFC<IChangeRequestProps> = ({
|
||||
changeRequest,
|
||||
onRefetch,
|
||||
@ -56,63 +89,86 @@ export const ChangeRequest: VFC<IChangeRequestProps> = ({
|
||||
featureName={featureToggleChange.name}
|
||||
projectId={changeRequest.project}
|
||||
onNavigate={onNavigate}
|
||||
conflict={featureToggleChange.conflict}
|
||||
>
|
||||
{featureToggleChange.changes.map(change => (
|
||||
<Box
|
||||
{featureToggleChange.changes.map((change, index) => (
|
||||
<StyledSingleChangeBox
|
||||
key={objectId(change)}
|
||||
sx={theme => ({
|
||||
padding: 2,
|
||||
borderTop: '1px solid',
|
||||
borderColor: theme =>
|
||||
theme.palette.dividerAlternative,
|
||||
})}
|
||||
hasConflict={Boolean(change.conflict)}
|
||||
inInConflictFeature={Boolean(
|
||||
featureToggleChange.conflict
|
||||
)}
|
||||
isAfterWarning={Boolean(
|
||||
featureToggleChange.changes[index - 1]?.conflict
|
||||
)}
|
||||
isLast={
|
||||
index + 1 === featureToggleChange.changes.length
|
||||
}
|
||||
>
|
||||
{change.action === 'updateEnabled' && (
|
||||
<ToggleStatusChange
|
||||
enabled={change.payload.enabled}
|
||||
onDiscard={onDiscard(change.id)}
|
||||
/>
|
||||
)}
|
||||
{change.action === 'addStrategy' && (
|
||||
<StrategyAddedChange
|
||||
onDiscard={onDiscard(change.id)}
|
||||
>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={change.payload.name}
|
||||
<ConditionallyRender
|
||||
condition={
|
||||
Boolean(change.conflict) &&
|
||||
!featureToggleChange.conflict
|
||||
}
|
||||
show={
|
||||
<StyledAlert severity="warning">
|
||||
<strong>Conflict!</strong> This change
|
||||
can’t be applied. {change.conflict}.
|
||||
</StyledAlert>
|
||||
}
|
||||
/>
|
||||
<Box sx={{ p: 2 }}>
|
||||
{change.action === 'updateEnabled' && (
|
||||
<ToggleStatusChange
|
||||
enabled={change.payload.enabled}
|
||||
onDiscard={onDiscard(change.id)}
|
||||
/>
|
||||
)}
|
||||
{change.action === 'addStrategy' && (
|
||||
<StrategyAddedChange
|
||||
onDiscard={onDiscard(change.id)}
|
||||
>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={change.payload.name}
|
||||
/>
|
||||
|
||||
{formatStrategyName(change.payload.name)}
|
||||
</StrategyAddedChange>
|
||||
)}
|
||||
{change.action === 'deleteStrategy' && (
|
||||
<StrategyDeletedChange
|
||||
onDiscard={onDiscard(change.id)}
|
||||
>
|
||||
{hasNameField(change.payload) && (
|
||||
<>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={
|
||||
{formatStrategyName(
|
||||
change.payload.name
|
||||
)}
|
||||
</StrategyAddedChange>
|
||||
)}
|
||||
{change.action === 'deleteStrategy' && (
|
||||
<StrategyDeletedChange
|
||||
onDiscard={onDiscard(change.id)}
|
||||
>
|
||||
{hasNameField(change.payload) && (
|
||||
<>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={
|
||||
change.payload.name
|
||||
}
|
||||
/>
|
||||
{formatStrategyName(
|
||||
change.payload.name
|
||||
}
|
||||
/>
|
||||
{formatStrategyName(
|
||||
change.payload.name
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StrategyDeletedChange>
|
||||
)}
|
||||
{change.action === 'updateStrategy' && (
|
||||
<StrategyEditedChange
|
||||
onDiscard={onDiscard(change.id)}
|
||||
>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={change.payload.name}
|
||||
/>
|
||||
{formatStrategyName(change.payload.name)}
|
||||
</StrategyEditedChange>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StrategyDeletedChange>
|
||||
)}
|
||||
{change.action === 'updateStrategy' && (
|
||||
<StrategyEditedChange
|
||||
onDiscard={onDiscard(change.id)}
|
||||
>
|
||||
<GetFeatureStrategyIcon
|
||||
strategyName={change.payload.name}
|
||||
/>
|
||||
{formatStrategyName(
|
||||
change.payload.name
|
||||
)}
|
||||
</StrategyEditedChange>
|
||||
)}
|
||||
</Box>
|
||||
</StyledSingleChangeBox>
|
||||
))}
|
||||
</ChangeRequestFeatureToggleChange>
|
||||
))}
|
||||
|
||||
@ -1,48 +1,79 @@
|
||||
import { FC } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Box, Card, Typography } from '@mui/material';
|
||||
import { Alert, Box, Card, Typography } from '@mui/material';
|
||||
import ToggleOnIcon from '@mui/icons-material/ToggleOn';
|
||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||
|
||||
interface IChangeRequestToggleChange {
|
||||
featureName: string;
|
||||
projectId: string;
|
||||
conflict?: string;
|
||||
onNavigate?: () => void;
|
||||
}
|
||||
|
||||
export const ChangeRequestFeatureToggleChange: FC<
|
||||
IChangeRequestToggleChange
|
||||
> = ({ featureName, projectId, onNavigate, children }) => {
|
||||
return (
|
||||
<Card
|
||||
elevation={0}
|
||||
> = ({ featureName, projectId, conflict, onNavigate, children }) => (
|
||||
<Card
|
||||
elevation={0}
|
||||
sx={theme => ({
|
||||
marginTop: theme.spacing(2),
|
||||
overflow: 'hidden',
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
sx={theme => ({
|
||||
marginTop: theme.spacing(2),
|
||||
borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: Boolean(conflict)
|
||||
? theme.palette.warning.light
|
||||
: theme.palette.tableHeaderBackground,
|
||||
borderRadius: theme =>
|
||||
`${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`,
|
||||
border: '1px solid',
|
||||
borderColor: theme => theme.palette.dividerAlternative,
|
||||
borderColor: theme =>
|
||||
conflict
|
||||
? theme.palette.warning.border
|
||||
: theme.palette.dividerAlternative,
|
||||
borderBottom: 'none',
|
||||
overflow: 'hidden',
|
||||
})}
|
||||
>
|
||||
<Box
|
||||
sx={theme => ({
|
||||
backgroundColor: theme.palette.tableHeaderBackground,
|
||||
padding: theme.spacing(3),
|
||||
})}
|
||||
>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<ToggleOnIcon color="disabled" />
|
||||
<Typography
|
||||
component={Link}
|
||||
to={`/projects/${projectId}/features/${featureName}`}
|
||||
color="primary"
|
||||
sx={{ textDecoration: 'none' }}
|
||||
onClick={onNavigate}
|
||||
<ConditionallyRender
|
||||
condition={Boolean(conflict)}
|
||||
show={
|
||||
<Alert
|
||||
severity="warning"
|
||||
sx={{
|
||||
mx: 1,
|
||||
'&.MuiAlert-standardWarning': {
|
||||
borderStyle: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{featureName}
|
||||
</Typography>
|
||||
</Box>
|
||||
<strong>Conflict!</strong> {conflict}.
|
||||
</Alert>
|
||||
}
|
||||
/>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
gap: 1,
|
||||
pt: conflict ? 0 : 2,
|
||||
pb: 2,
|
||||
px: 3,
|
||||
}}
|
||||
>
|
||||
<ToggleOnIcon color="disabled" />
|
||||
<Typography
|
||||
component={Link}
|
||||
to={`/projects/${projectId}/features/${featureName}`}
|
||||
color="primary"
|
||||
sx={{ textDecoration: 'none' }}
|
||||
onClick={onNavigate}
|
||||
>
|
||||
{featureName}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>{children}</Box>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
</Box>
|
||||
<Box>{children}</Box>
|
||||
</Card>
|
||||
);
|
||||
|
||||
@ -89,10 +89,10 @@ export const ChangeRequestOverview: FC = () => {
|
||||
<StyledAsideBox>
|
||||
<ChangeRequestTimeline state={changeRequest.state} />
|
||||
<ConditionallyRender
|
||||
condition={changeRequest.approvals.length > 0}
|
||||
condition={changeRequest.approvals?.length > 0}
|
||||
show={
|
||||
<ChangeRequestReviewers>
|
||||
{changeRequest.approvals.map(approver => (
|
||||
{changeRequest.approvals?.map(approver => (
|
||||
<ChangeRequestReviewer
|
||||
name={
|
||||
approver.createdBy.username ||
|
||||
|
||||
@ -10,6 +10,7 @@ export interface IChangeRequest {
|
||||
createdAt: Date;
|
||||
features: IChangeRequestFeature[];
|
||||
approvals: IChangeRequestApproval[];
|
||||
conflict?: string;
|
||||
}
|
||||
|
||||
export interface IChangeRequestEnvironmentConfig {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user