chore: switch to using milestoneId instead of index (#8845)

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

@@ -54,11 +54,10 @@ const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({
 }));
 
 interface IMilestoneCardProps {
-    index: number;
     milestone: IReleasePlanMilestonePayload;
-    milestoneNameChanged: (index: number, name: string) => void;
+    milestoneNameChanged: (milestoneId: string, name: string) => void;
     showAddStrategyDialog: (
-        index: number,
+        milestoneId: string,
         strategy: IReleasePlanMilestoneStrategy,
     ) => void;
     errors: { [key: string]: string };
@@ -66,7 +65,6 @@ interface IMilestoneCardProps {
 }
 
 export const MilestoneCard = ({
-    index,
     milestone,
     milestoneNameChanged,
     showAddStrategyDialog,
@@ -88,7 +86,7 @@ export const MilestoneCard = ({
         milestoneId: string,
         strategy: IReleasePlanMilestoneStrategy,
     ) => {
-        showAddStrategyDialog(index, strategy);
+        showAddStrategyDialog(milestone.id, strategy);
     };
 
     return (
@@ -101,7 +99,10 @@ export const MilestoneCard = ({
                                 label=''
                                 value={milestone.name}
                                 onChange={(e) =>
-                                    milestoneNameChanged(index, e.target.value)
+                                    milestoneNameChanged(
+                                        milestone.id,
+                                        e.target.value,
+                                    )
                                 }
                                 error={Boolean(errors?.name)}
                                 errorText={errors?.name}
@@ -151,7 +152,7 @@ export const MilestoneCard = ({
                             }}
                         >
                             <MilestoneStrategyMenuCards
-                                milestoneId={milestone.id ?? index.toString()}
+                                milestoneId={milestone.id}
                                 openAddStrategy={onSelectStrategy}
                             />
                         </Popover>

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

@@ -6,6 +6,7 @@ import { MilestoneCard } from './MilestoneCard';
 import { styled } from '@mui/material';
 import { Button } from '@mui/material';
 import Add from '@mui/icons-material/Add';
+import { v4 as uuidv4 } from 'uuid';
 
 interface IMilestoneListProps {
     milestones: IReleasePlanMilestonePayload[];
@@ -13,7 +14,7 @@ interface IMilestoneListProps {
         React.SetStateAction<IReleasePlanMilestonePayload[]>
     >;
     openAddStrategyForm: (
-        index: number,
+        milestoneId: string,
         strategy: IReleasePlanMilestoneStrategy,
     ) => void;
     errors: { [key: string]: string };
@@ -32,20 +33,21 @@ export const MilestoneList = ({
     errors,
     clearErrors,
 }: IMilestoneListProps) => {
-    const milestoneNameChanged = (index: number, name: string) => {
+    const milestoneNameChanged = (milestoneId: string, name: string) => {
         setMilestones((prev) =>
-            prev.map((milestone, i) =>
+            prev.map((milestone) =>
-                i === index ? { ...milestone, name } : milestone,
+                milestone.id === milestoneId
+                    ? { ...milestone, name }
+                    : milestone,
             ),
         );
     };
 
     return (
         <>
-            {milestones.map((milestone, index) => (
+            {milestones.map((milestone) => (
                 <MilestoneCard
-                    key={`milestone_${index.toString()}`}
+                    key={milestone.id}
-                    index={index}
                     milestone={milestone}
                     milestoneNameChanged={milestoneNameChanged}
                     showAddStrategyDialog={openAddStrategyForm}
@@ -61,6 +63,7 @@ export const MilestoneList = ({
                     setMilestones((prev) => [
                         ...prev,
                         {
+                            id: uuidv4(),
                             name: `Milestone ${prev.length + 1}`,
                             sortOrder: prev.length,
                         },

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

@@ -59,8 +59,8 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
     children,
 }) => {
     const [addStrategyOpen, setAddStrategyOpen] = useState(false);
-    const [activeMilestoneIndex, setActiveMilestoneIndex] = useState<
+    const [activeMilestoneId, setActiveMilestoneId] = useState<
-        number | undefined
+        string | undefined
     >();
     const [strategy, setStrategy] = useState<IReleasePlanMilestoneStrategy>({
         name: 'flexibleRollout',
@@ -70,14 +70,33 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
         id: '',
     });
     const openAddStrategyForm = (
-        index: number,
+        milestoneId: string,
         strategy: IReleasePlanMilestoneStrategy,
     ) => {
-        setActiveMilestoneIndex(index);
+        setActiveMilestoneId(milestoneId);
         setStrategy(strategy);
         setAddStrategyOpen(true);
     };
 
+    const addStrategy = (
+        milestoneId: string,
+        strategy: IReleasePlanMilestoneStrategy,
+    ) => {
+        setMilestones((prev) =>
+            prev.map((milestone, i) =>
+                milestone.id === milestoneId
+                    ? {
+                          ...milestone,
+                          strategies: [
+                              ...(milestone.strategies || []),
+                              strategy,
+                          ],
+                      }
+                    : milestone,
+            ),
+        );
+    };
+
     return (
         <FormTemplate
             title={formTitle}

frontend/src/component/releases/hooks/useTemplateForm.ts

@@ -1,11 +1,12 @@
 import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import { useEffect, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 
 export const useTemplateForm = (
     initialName = '',
     initialDescription = '',
     initialMilestones: IReleasePlanMilestonePayload[] = [
-        { name: 'Milestone 1', sortOrder: 0 },
+        { id: uuidv4(), name: 'Milestone 1', sortOrder: 0 },
     ],
 ) => {
     const [name, setName] = useState(initialName);

frontend/src/interfaces/releasePlans.ts

@@ -41,7 +41,7 @@ export interface IReleasePlanTemplatePayload {
 }
 
 export interface IReleasePlanMilestonePayload {
-    id?: string;
+    id: string;
     name: string;
     sortOrder: number;
     strategies?: IReleasePlanStrategyPayload[];