fix: template edit UI issues (#8974)

frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx

@@ -97,7 +97,9 @@ export const CreateReleasePlanTemplate = () => {
                 <CreateButton
                     name='template'
                     permission={RELEASE_PLAN_TEMPLATE_CREATE}
-                />
+                >
+                    Save template
+                </CreateButton>
                 <StyledCancelButton onClick={handleCancel}>
                     Cancel
                 </StyledCancelButton>

frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx

@@ -105,7 +105,9 @@ export const EditReleasePlanTemplate = () => {
                 <UpdateButton
                     name='template'
                     permission={RELEASE_PLAN_TEMPLATE_UPDATE}
-                />
+                >
+                    Save changes
+                </UpdateButton>
                 <StyledCancelButton onClick={handleCancel}>
                     Cancel
                 </StyledCancelButton>

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,
@@ -81,9 +84,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
     },
     transition: 'background-color 0.2s ease-in-out',
     backgroundColor: theme.palette.background.default,
-    '&.Mui-expanded': {
+    '&:before': {
-        marginTop: theme.spacing(3),
+        opacity: '0 !important',
     },
+    '&.Mui-expanded': { marginTop: `${theme.spacing(2)} !important` },
 }));
 
 const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
@@ -111,15 +115,27 @@ 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;
     showAddStrategyDialog: (
         milestoneId: string,
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
+        editing: boolean,
     ) => void;
     errors: { [key: string]: string };
     clearErrors: () => void;
+    onDeleteMilestone: () => void;
 }
 
 export const MilestoneCard = ({
@@ -128,6 +144,7 @@ export const MilestoneCard = ({
     showAddStrategyDialog,
     errors,
     clearErrors,
+    onDeleteMilestone,
 }: IMilestoneCardProps) => {
     const [editMode, setEditMode] = useState(false);
     const [anchor, setAnchor] = useState<Element>();
@@ -136,6 +153,7 @@ export const MilestoneCard = ({
         index: number;
         height: number;
     } | null>(null);
+    const theme = useTheme();
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen
         ? 'MilestoneStrategyMenuPopover'
@@ -145,10 +163,16 @@ export const MilestoneCard = ({
         setAnchor(undefined);
     };
 
+    const onSelectEditStrategy = (
+        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
+    ) => {
+        showAddStrategyDialog(milestone.id, strategy, true);
+    };
+
     const onSelectStrategy = (
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
     ) => {
-        showAddStrategyDialog(milestone.id, strategy);
+        showAddStrategyDialog(milestone.id, strategy, false);
     };
 
     const onDragOver =
@@ -244,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=''
@@ -279,7 +303,7 @@ export const MilestoneCard = ({
                                 </>
                             )}
                         </StyledGridItem>
-                        <Grid item xs={2} md={2}>
+                        <StyledMilestoneActionGrid item xs={4} md={3}>
                             <Button
                                 variant='outlined'
                                 color='primary'
@@ -287,6 +311,13 @@ export const MilestoneCard = ({
                             >
                                 Add strategy
                             </Button>
+                            <StyledIconButton
+                                title='Remove milestone'
+                                onClick={onDeleteMilestone}
+                            >
+                                <Delete />
+                            </StyledIconButton>
+
                             <Popover
                                 id={popoverId}
                                 open={isPopoverOpen}
@@ -303,7 +334,7 @@ export const MilestoneCard = ({
                                     openEditAddStrategy={onSelectStrategy}
                                 />
                             </Popover>
-                        </Grid>
+                        </StyledMilestoneActionGrid>
                     </Grid>
                 </StyledMilestoneCardBody>
             </StyledMilestoneCard>
@@ -357,7 +388,7 @@ export const MilestoneCard = ({
                                 milestoneStrategyDeleted(strg.id)
                             }
                             onEditClick={() => {
-                                onSelectStrategy(strg);
+                                onSelectEditStrategy(strg);
                             }}
                             isDragging={false}
                             strategy={strg}
@@ -372,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}

frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx

@@ -15,6 +15,7 @@ interface IMilestoneListProps {
     openAddStrategyForm: (
         milestoneId: string,
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
+        editing: boolean,
     ) => void;
     errors: { [key: string]: string };
     clearErrors: () => void;
@@ -34,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) => (
@@ -44,6 +53,7 @@ export const MilestoneList = ({
                     showAddStrategyDialog={openAddStrategyForm}
                     errors={errors}
                     clearErrors={clearErrors}
+                    onDeleteMilestone={onDeleteMilestone(milestone.id)}
                 />
             ))}
             <StyledAddMilestoneButton

frontend/src/component/releases/ReleasePlanTemplate/ReleasePlanTemplateAddStrategyForm.tsx

@@ -126,6 +126,7 @@ interface IReleasePlanTemplateAddStrategyFormProps {
         milestoneId: string,
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
     ) => void;
+    editMode: boolean;
 }
 
 export const ReleasePlanTemplateAddStrategyForm = ({
@@ -133,6 +134,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
     onCancel,
     strategy,
     onAddUpdateStrategy,
+    editMode,
 }: IReleasePlanTemplateAddStrategyFormProps) => {
     const [currentStrategy, setCurrentStrategy] = useState(strategy);
     const [activeTab, setActiveTab] = useState(0);
@@ -346,7 +348,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
                     disabled={!hasValidConstraints || errors.hasFormErrors()}
                     onClick={AddUpdateMilestoneStrategy}
                 >
-                    Save strategy
+                    {editMode ? 'Add changes' : 'Add strategy'}
                 </Button>
                 <StyledCancelButton onClick={onCancel}>
                     Cancel

frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx

@@ -62,6 +62,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
     const [activeMilestoneId, setActiveMilestoneId] = useState<
         string | undefined
     >();
+    const [strategyModeEdit, setStrategyModeEdit] = useState(false);
     const [strategy, setStrategy] = useState<
         Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>
     >({
@@ -74,7 +75,9 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
     const openAddUpdateStrategyForm = (
         milestoneId: string,
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
+        editing: boolean,
     ) => {
+        setStrategyModeEdit(editing);
         setActiveMilestoneId(milestoneId);
         setStrategy(strategy);
         setAddUpdateStrategyOpen(true);
@@ -114,6 +117,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
             );
         }
         setAddUpdateStrategyOpen(false);
+        setStrategyModeEdit(false);
         setActiveMilestoneId(undefined);
         setStrategy({
             name: 'flexibleRollout',
@@ -190,7 +194,9 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
 
                 <SidebarModal
                     label='Add strategy to template milestone'
-                    onClose={() => {}}
+                    onClose={() => {
+                        setStrategyModeEdit(false);
+                    }}
                     open={addUpdateStrategyOpen}
                 >
                     <ReleasePlanTemplateAddStrategyForm
@@ -200,6 +206,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
                         onCancel={() => {
                             setAddUpdateStrategyOpen(false);
                         }}
+                        editMode={strategyModeEdit}
                     />
                 </SidebarModal>
             </StyledForm>