1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +02:00

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

This commit is contained in:
David Leek 2024-11-25 10:38:12 +01:00 committed by GitHub
parent 9a269e3597
commit 79224ef9e5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 44 additions and 20 deletions

View File

@ -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>

View File

@ -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) =>
i === index ? { ...milestone, name } : milestone,
prev.map((milestone) =>
milestone.id === milestoneId
? { ...milestone, name }
: milestone,
),
);
};
return (
<>
{milestones.map((milestone, index) => (
{milestones.map((milestone) => (
<MilestoneCard
key={`milestone_${index.toString()}`}
index={index}
key={milestone.id}
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,
},

View File

@ -59,8 +59,8 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
children,
}) => {
const [addStrategyOpen, setAddStrategyOpen] = useState(false);
const [activeMilestoneIndex, setActiveMilestoneIndex] = useState<
number | undefined
const [activeMilestoneId, setActiveMilestoneId] = useState<
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}

View File

@ -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);

View File

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