feat: removing milestones from templates

Unleash · Dec 12, 2024 · db2451a · db2451a
1 parent 7222c6f
commit db2451a
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 3 deletions.
diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx
@@ -9,8 +9,11 @@ import {
     Accordion,
     AccordionSummary,
     AccordionDetails,
+    IconButton,
+    useTheme,
 } from '@mui/material';
 import Edit from '@mui/icons-material/Edit';
+import Delete from '@mui/icons-material/DeleteOutlined';
 import type {
     IReleasePlanMilestonePayload,
     IReleasePlanMilestoneStrategy,
@@ -112,6 +115,16 @@ const StyledAccordionFooter = styled(Grid)(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusMedium,
 }));
 
+const StyledMilestoneActionGrid = styled(Grid)(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'flex-end',
+}));
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+    marginLeft: theme.spacing(1),
+    color: theme.palette.primary.main,
+}));
+
 interface IMilestoneCardProps {
     milestone: IReleasePlanMilestonePayload;
     milestoneChanged: (milestone: IReleasePlanMilestonePayload) => void;
@@ -122,6 +135,7 @@ interface IMilestoneCardProps {
     ) => void;
     errors: { [key: string]: string };
     clearErrors: () => void;
+    onDeleteMilestone: () => void;
 }
 
 export const MilestoneCard = ({
@@ -130,6 +144,7 @@ export const MilestoneCard = ({
     showAddStrategyDialog,
     errors,
     clearErrors,
+    onDeleteMilestone,
 }: IMilestoneCardProps) => {
     const [editMode, setEditMode] = useState(false);
     const [anchor, setAnchor] = useState<Element>();
@@ -138,6 +153,7 @@ export const MilestoneCard = ({
         index: number;
         height: number;
     } | null>(null);
+    const theme = useTheme();
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen
         ? 'MilestoneStrategyMenuPopover'
@@ -252,7 +268,7 @@ export const MilestoneCard = ({
             <StyledMilestoneCard>
                 <StyledMilestoneCardBody>
                     <Grid container>
-                        <StyledGridItem item xs={10} md={10}>
+                        <StyledGridItem item xs={8} md={9}>
                             {editMode && (
                                 <StyledInput
                                     label=''
@@ -287,14 +303,21 @@ export const MilestoneCard = ({
                                 </>
                             )}
                         </StyledGridItem>
-                        <Grid item xs={2} md={2}>
+                        <StyledMilestoneActionGrid item xs={4} md={3}>
                             <Button
                                 variant='outlined'
                                 color='primary'
                                 onClick={(ev) => setAnchor(ev.currentTarget)}
                             >
                                 Add strategy
                             </Button>
+                            <StyledIconButton
+                                title='Remove milestone'
+                                onClick={onDeleteMilestone}
+                            >
+                                <Delete />
+                            </StyledIconButton>
+
                             <Popover
                                 id={popoverId}
                                 open={isPopoverOpen}
@@ -311,7 +334,7 @@ export const MilestoneCard = ({
                                     openEditAddStrategy={onSelectStrategy}
                                 />
                             </Popover>
-                        </Grid>
+                        </StyledMilestoneActionGrid>
                     </Grid>
                 </StyledMilestoneCardBody>
             </StyledMilestoneCard>
@@ -380,6 +403,13 @@ export const MilestoneCard = ({
                     >
                         Add strategy
                     </StyledAddStrategyButton>
+                    <Button
+                        variant='text'
+                        color='primary'
+                        onClick={onDeleteMilestone}
+                    >
+                        <Delete /> Remove milestone
+                    </Button>
                     <Popover
                         id={popoverId}
                         open={isPopoverOpen}

diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx
@@ -35,6 +35,14 @@ export const MilestoneList = ({
     clearErrors,
     milestoneChanged,
 }: IMilestoneListProps) => {
+    const onDeleteMilestone = (milestoneId: string) => () => {
+        setMilestones((prev) =>
+            prev
+                .filter((m) => m.id !== milestoneId)
+                .map((m, i) => ({ ...m, sortOrder: i })),
+        );
+    };
+
     return (
         <>
             {milestones.map((milestone) => (
@@ -45,6 +53,7 @@ export const MilestoneList = ({
                     showAddStrategyDialog={openAddStrategyForm}
                     errors={errors}
                     clearErrors={clearErrors}
+                    onDeleteMilestone={onDeleteMilestone(milestone.id)}
                 />
             ))}
             <StyledAddMilestoneButton