mirror of
				https://github.com/Unleash/unleash.git
				synced 2025-10-27 11:02:16 +01: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