diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ConflictWarning.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ConflictWarning.tsx new file mode 100644 index 0000000000..94139d029e --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ConflictWarning.tsx @@ -0,0 +1,25 @@ +import { Alert } from '@mui/material'; +import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; + +export const ConflictWarning: React.FC<{ + conflict: string | null | undefined; +}> = ({ conflict }) => ( + + Conflict! {conflict}. + + } + /> +); diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx index 0a9a1b911c..0fcfd0a209 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/SegmentChange.tsx @@ -3,6 +3,7 @@ import { Link as RouterLink } from 'react-router-dom'; import { Box, Card, Typography, Link } from '@mui/material'; import { ISegmentChange } from '../../../changeRequest.types'; import { SegmentChangeDetails } from './SegmentChangeDetails'; +import { ConflictWarning } from './ConflictWarning'; interface ISegmentChangeProps { segmentChange: ISegmentChange; @@ -27,11 +28,15 @@ export const SegmentChange: FC = ({ borderRadius: theme => `${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px 0 0`, border: '1px solid', - borderColor: theme => theme.palette.divider, + borderColor: theme => + segmentChange.conflict + ? theme.palette.warning.border + : theme.palette.divider, borderBottom: 'none', overflow: 'hidden', })} > + ({ gap: theme.spacing(1), })); -const SegmentContainer = styled(Box)(({ theme }) => ({ +const SegmentContainer = styled(Box, { + shouldForwardProp: prop => prop !== 'conflict', +})<{ conflict: string | undefined }>(({ theme, conflict }) => ({ borderLeft: '1px solid', borderRight: '1px solid', borderTop: '1px solid', borderBottom: '1px solid', - borderColor: theme.palette.divider, + borderColor: conflict + ? theme.palette.warning.border + : theme.palette.divider, borderTopColor: theme.palette.divider, padding: theme.spacing(3), borderRadius: `0 0 ${theme.shape.borderRadiusLarge}px ${theme.shape.borderRadiusLarge}px`, @@ -48,7 +52,7 @@ export const SegmentChangeDetails: VFC<{ const { segment: currentSegment } = useSegment(change.payload.id); return ( - + {change.action === 'deleteSegment' && ( diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx index 22c824769d..6c17bed496 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx @@ -1,7 +1,7 @@ import { FC } from 'react'; import { Link as RouterLink } from 'react-router-dom'; -import { Alert, Box, Card, Typography, Link } from '@mui/material'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; +import { Box, Card, Typography, Link } from '@mui/material'; +import { ConflictWarning } from './Change/ConflictWarning'; interface IFeatureToggleChanges { featureName: string; @@ -40,23 +40,7 @@ export const FeatureToggleChanges: FC = ({ overflow: 'hidden', })} > - - Conflict! {conflict}. - - } - /> +