Feat(#4209): add conflict marker to segment changes (#4447)

In doing so, we extract the shared conflict marker component from the
feature change and reuse it for both feature and segment changes.

Here's what it looks like:

![image](https://github.com/Unleash/unleash/assets/17786332/4a67aa7a-1953-488f-8bcb-6aac006d53e9)


Update: also straightened out the borders of the conflict warning:


![image](https://github.com/Unleash/unleash/assets/17786332/153799f3-cff2-4aa0-8fb0-8e31d1052b9f)

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 }) => (
+    <ConditionallyRender
+        condition={Boolean(conflict)}
+        show={
+            <Alert
+                severity="warning"
+                sx={{
+                    px: 3,
+                    mb: 2,
+                    '&.MuiAlert-standardWarning': {
+                        borderStyle: 'none',
+                    },
+                    borderRadius: '0px',
+                }}
+            >
+                <strong>Conflict!</strong> {conflict}.
+            </Alert>
+        }
+    />
+);

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<ISegmentChangeProps> = ({
                 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',
             })}
         >
+            <ConflictWarning conflict={segmentChange.conflict} />
             <Box
                 sx={{
                     display: 'flex',

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

@@ -30,12 +30,16 @@ const ChangeItemInfo: FC = styled(Box)(({ theme }) => ({
     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 (
-        <SegmentContainer>
+        <SegmentContainer conflict={change.conflict}>
             {change.action === 'deleteSegment' && (
                 <ChangeItemWrapper>
                     <ChangeItemInfo>

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 { Box, Card, Typography, Link } from '@mui/material';
-import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { ConflictWarning } from './Change/ConflictWarning';
 
 interface IFeatureToggleChanges {
     featureName: string;
@@ -40,23 +40,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
                 overflow: 'hidden',
             })}
         >
-            <ConditionallyRender
+            <ConflictWarning conflict={conflict} />
-                condition={Boolean(conflict)}
-                show={
-                    <Alert
-                        severity="warning"
-                        sx={{
-                            px: 3,
-                            mb: 2,
-                            '&.MuiAlert-standardWarning': {
-                                borderStyle: 'none',
-                            },
-                        }}
-                    >
-                        <strong>Conflict!</strong> {conflict}.
-                    </Alert>
-                }
-            />
             <Box
                 sx={{
                     display: 'flex',

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

@@ -111,6 +111,7 @@ export interface IChangeRequestReorderStrategy
 
 export interface IChangeRequestUpdateSegment {
     action: 'updateSegment';
+    conflict?: string;
     payload: {
         id: number;
         name: string;
@@ -122,6 +123,7 @@ export interface IChangeRequestUpdateSegment {
 
 export interface IChangeRequestDeleteSegment {
     action: 'deleteSegment';
+    conflict?: string;
     payload: {
         id: number;
         name: string;