feat: add safeguard button and borders (#10943)

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx

@@ -28,6 +28,9 @@ import { useMilestoneProgressionsApi } from 'hooks/api/actions/useMilestoneProgr
 import { DeleteProgressionDialog } from './DeleteProgressionDialog.tsx';
 import type { ChangeMilestoneProgressionSchema } from 'openapi';
 import { ReleasePlanMilestoneItem } from './ReleasePlanMilestoneItem/ReleasePlanMilestoneItem.tsx';
+import Add from '@mui/icons-material/Add';
+
+import { StyledActionButton } from './ReleasePlanMilestoneItem/StyledActionButton.tsx';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(2),
@@ -69,9 +72,30 @@ const StyledHeaderDescription = styled('p')(({ theme }) => ({
     color: theme.palette.text.secondary,
 }));
 
-const StyledBody = styled('div')(({ theme }) => ({
+const StyledBody = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'safeguards',
+})<{ safeguards: boolean }>(({ theme, safeguards }) => ({
     display: 'flex',
     flexDirection: 'column',
+    ...(safeguards && {
+        border: `1px dashed ${theme.palette.neutral.border}`,
+        borderRadius: theme.shape.borderRadiusMedium,
+        padding: theme.spacing(0.5, 0),
+    }),
+}));
+
+const StyledAddSafeguard = styled('div')(({ theme }) => ({
+    display: 'flex',
+    borderBottom: `1px dashed ${theme.palette.neutral.border}`,
+    padding: theme.spacing(1.5, 2),
+}));
+
+const StyledMilestones = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'safeguards',
+})<{ safeguards: boolean }>(({ theme, safeguards }) => ({
+    ...(safeguards && {
+        padding: theme.spacing(1.5, 1.5),
+    }),
 }));
 
 interface IReleasePlanProps {
@@ -163,6 +187,7 @@ export const ReleasePlan = ({
         return null;
     };
     const milestoneProgressionsEnabled = useUiFlag('milestoneProgression');
+    const safeguardsEnabled = useUiFlag('safeguards');
     const [progressionFormOpenIndex, setProgressionFormOpenIndex] = useState<
         number | null
     >(null);
@@ -378,7 +403,19 @@ export const ReleasePlan = ({
                     </PermissionIconButton>
                 )}
             </StyledHeader>
-            <StyledBody>
+            <StyledBody safeguards={safeguardsEnabled}>
+                {safeguardsEnabled ? (
+                    <StyledAddSafeguard>
+                        <StyledActionButton
+                            onClick={() => {}}
+                            color='primary'
+                            startIcon={<Add />}
+                        >
+                            Add safeguard
+                        </StyledActionButton>
+                    </StyledAddSafeguard>
+                ) : null}
+                <StyledMilestones safeguards={safeguardsEnabled}>
                     {milestones.map((milestone, index) => (
                         <ReleasePlanMilestoneItem
                             key={milestone.id}
@@ -408,6 +445,7 @@ export const ReleasePlan = ({
                             onUpdate={refetch}
                         />
                     ))}
+                </StyledMilestones>
             </StyledBody>
             <ReleasePlanRemoveDialog
                 plan={plan}

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/MilestoneAutomation.tsx

@@ -1,5 +1,4 @@
 import Add from '@mui/icons-material/Add';
-import { Button, styled } from '@mui/material';
 import { Badge } from 'component/common/Badge/Badge';
 import type { IReleasePlanMilestone } from 'interfaces/releasePlans';
 import type { ChangeMilestoneProgressionSchema } from 'openapi';
@@ -8,33 +7,7 @@ import { MilestoneTransitionDisplay } from '../ReleasePlanMilestone/MilestoneTra
 import type { MilestoneStatus } from '../ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx';
 import { MilestoneProgressionForm } from '../MilestoneProgressionForm/MilestoneProgressionForm.tsx';
 import type { PendingProgressionChange } from './ReleasePlanMilestoneItem.tsx';
-
-const StyledAddAutomationButton = styled(Button)(({ theme }) => ({
-    textTransform: 'none',
-    fontWeight: theme.typography.fontWeightBold,
-    fontSize: theme.typography.body2.fontSize,
-    padding: 0,
-    minWidth: 'auto',
-    gap: theme.spacing(1),
-    '&:hover': {
-        backgroundColor: 'transparent',
-    },
-    '& .MuiButton-startIcon': {
-        margin: 0,
-        width: 20,
-        height: 20,
-        border: `1px solid ${theme.palette.primary.main}`,
-        backgroundColor: theme.palette.background.elevation2,
-        borderRadius: '50%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        '& svg': {
-            fontSize: 14,
-            color: theme.palette.primary.main,
-        },
-    },
-}));
+import { StyledActionButton } from './StyledActionButton.tsx';
 
 interface MilestoneAutomationProps {
     milestone: IReleasePlanMilestone;
@@ -112,13 +85,13 @@ export const MilestoneAutomation = ({
                     badge={badge}
                 />
             ) : (
-                <StyledAddAutomationButton
+                <StyledActionButton
                     onClick={onOpenProgressionForm}
                     color='primary'
                     startIcon={<Add />}
                 >
                     Add automation
-                </StyledAddAutomationButton>
+                </StyledActionButton>
             )}
         </MilestoneAutomationSection>
     );

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestoneItem/StyledActionButton.tsx

@@ -0,0 +1,28 @@
+import { Button, styled } from '@mui/material';
+
+export const StyledActionButton = styled(Button)(({ theme }) => ({
+    textTransform: 'none',
+    fontWeight: theme.typography.fontWeightBold,
+    fontSize: theme.typography.body2.fontSize,
+    padding: 0,
+    minWidth: 'auto',
+    gap: theme.spacing(1),
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+    '& .MuiButton-startIcon': {
+        margin: 0,
+        width: 20,
+        height: 20,
+        border: `1px solid ${theme.palette.primary.main}`,
+        backgroundColor: theme.palette.background.elevation2,
+        borderRadius: '50%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        '& svg': {
+            fontSize: 14,
+            color: theme.palette.primary.main,
+        },
+    },
+}));