diff --git a/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx b/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx index 76dbcf170b84..8f7580bdedec 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx @@ -97,7 +97,9 @@ export const CreateReleasePlanTemplate = () => { + > + Save template + Cancel diff --git a/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx b/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx index 0ad70f8ffbe9..0445e8e2c08d 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx @@ -105,7 +105,9 @@ export const EditReleasePlanTemplate = () => { + > + Save changes + Cancel diff --git a/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx b/frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx index 6963c545bf1e..8a008fddbcf7 100644 --- 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, @@ -81,9 +84,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({ }, transition: 'background-color 0.2s ease-in-out', backgroundColor: theme.palette.background.default, - '&.Mui-expanded': { - marginTop: theme.spacing(3), + '&:before': { + 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, + 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(); @@ -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, + ) => { + showAddStrategyDialog(milestone.id, strategy, true); + }; + const onSelectStrategy = ( strategy: Omit, ) => { - showAddStrategyDialog(milestone.id, strategy); + showAddStrategyDialog(milestone.id, strategy, false); }; const onDragOver = @@ -244,7 +268,7 @@ export const MilestoneCard = ({ - + {editMode && ( )} - + + + + + - + @@ -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 + , + 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)} /> ))} , ) => 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'} Cancel diff --git a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx index 40586e432daf..9dd984a4c160 100644 --- a/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx +++ b/frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx @@ -62,6 +62,7 @@ export const TemplateForm: React.FC = ({ const [activeMilestoneId, setActiveMilestoneId] = useState< string | undefined >(); + const [strategyModeEdit, setStrategyModeEdit] = useState(false); const [strategy, setStrategy] = useState< Omit >({ @@ -74,7 +75,9 @@ export const TemplateForm: React.FC = ({ const openAddUpdateStrategyForm = ( milestoneId: string, strategy: Omit, + editing: boolean, ) => { + setStrategyModeEdit(editing); setActiveMilestoneId(milestoneId); setStrategy(strategy); setAddUpdateStrategyOpen(true); @@ -114,6 +117,7 @@ export const TemplateForm: React.FC = ({ ); } setAddUpdateStrategyOpen(false); + setStrategyModeEdit(false); setActiveMilestoneId(undefined); setStrategy({ name: 'flexibleRollout', @@ -190,7 +194,9 @@ export const TemplateForm: React.FC = ({ {}} + onClose={() => { + setStrategyModeEdit(false); + }} open={addUpdateStrategyOpen} > = ({ onCancel={() => { setAddUpdateStrategyOpen(false); }} + editMode={strategyModeEdit} />