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:
parent
9a269e3597
commit
79224ef9e5
@ -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>
|
||||
|
@ -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,
|
||||
},
|
||||
|
@ -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}
|
||||
|
@ -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);
|
||||
|
@ -41,7 +41,7 @@ export interface IReleasePlanTemplatePayload {
|
||||
}
|
||||
|
||||
export interface IReleasePlanMilestonePayload {
|
||||
id?: string;
|
||||
id: string;
|
||||
name: string;
|
||||
sortOrder: number;
|
||||
strategies?: IReleasePlanStrategyPayload[];
|
||||
|
Loading…
Reference in New Issue
Block a user