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}
/>