chore: move strategy UI into milestonecard and open milestone when adding strategy to it (#9095)

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

@@ -20,6 +20,8 @@ import ExpandMore from '@mui/icons-material/ExpandMore';
 import { MilestoneCardName } from './MilestoneCardName';
 import { MilestoneStrategyMenuCards } from './MilestoneStrategyMenu/MilestoneStrategyMenuCards';
 import { MilestoneStrategyDraggableItem } from './MilestoneStrategyDraggableItem';
+import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
+import { ReleasePlanTemplateAddStrategyForm } from '../../MilestoneStrategy/ReleasePlanTemplateAddStrategyForm';
 
 const StyledMilestoneCard = styled(Card, {
     shouldForwardProp: (prop) => prop !== 'hasError',
@@ -111,11 +113,6 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
 interface IMilestoneCardProps {
     milestone: IReleasePlanMilestonePayload;
     milestoneChanged: (milestone: IReleasePlanMilestonePayload) => void;
-    showAddStrategyDialog: (
-        milestoneId: string,
-        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
-        editing: boolean,
-    ) => void;
     errors: { [key: string]: string };
     clearErrors: () => void;
     removable: boolean;
@@ -125,7 +122,6 @@ interface IMilestoneCardProps {
 export const MilestoneCard = ({
     milestone,
     milestoneChanged,
-    showAddStrategyDialog,
     errors,
     clearErrors,
     removable,
@@ -137,6 +133,9 @@ export const MilestoneCard = ({
         index: number;
         height: number;
     } | null>(null);
+    const [addUpdateStrategyOpen, setAddUpdateStrategyOpen] = useState(false);
+    const [strategyModeEdit, setStrategyModeEdit] = useState(false);
+    const [expanded, setExpanded] = useState(false);
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen
         ? 'MilestoneStrategyMenuPopover'
@@ -146,16 +145,76 @@ export const MilestoneCard = ({
         setAnchor(undefined);
     };
 
-    const onSelectEditStrategy = (
+    const [currentStrategy, setCurrentStrategy] = useState<
+        Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>
+    >({
+        name: 'flexibleRollout',
+        parameters: { rollout: '50' },
+        constraints: [],
+        title: '',
+        id: 'temp',
+    });
+
+    const milestoneStrategyChanged = (
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
     ) => {
-        showAddStrategyDialog(milestone.id, strategy, true);
+        const strategies = milestone.strategies || [];
+        milestoneChanged({
+            ...milestone,
+            strategies: [
+                ...strategies.map((strat) =>
+                    strat.id === strategy.id ? strategy : strat,
+                ),
+            ],
+        });
     };
 
-    const onSelectStrategy = (
+    const milestoneStrategyAdded = (
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
     ) => {
-        showAddStrategyDialog(milestone.id, strategy, false);
+        milestoneChanged({
+            ...milestone,
+            strategies: [
+                ...(milestone.strategies || []),
+                {
+                    ...strategy,
+                    strategyName: strategy.strategyName,
+                    sortOrder: milestone.strategies?.length || 0,
+                },
+            ],
+        });
+    };
+
+    const addUpdateStrategy = (
+        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
+    ) => {
+        const existingStrategy = milestone.strategies?.find(
+            (strat) => strat.id === strategy.id,
+        );
+        if (existingStrategy) {
+            milestoneStrategyChanged(strategy);
+        } else {
+            milestoneStrategyAdded(strategy);
+            setExpanded(true);
+        }
+        setAddUpdateStrategyOpen(false);
+        setStrategyModeEdit(false);
+        setCurrentStrategy({
+            name: 'flexibleRollout',
+            parameters: { rollout: '50' },
+            constraints: [],
+            title: '',
+            id: 'temp',
+        });
+    };
+
+    const openAddUpdateStrategyForm = (
+        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
+        editing: boolean,
+    ) => {
+        setStrategyModeEdit(editing);
+        setCurrentStrategy(strategy);
+        setAddUpdateStrategyOpen(true);
     };
 
     const onDragOver =
@@ -248,126 +307,180 @@ export const MilestoneCard = ({
 
     if (!milestone.strategies || milestone.strategies.length === 0) {
         return (
-            <StyledMilestoneCard
-                hasError={
-                    Boolean(errors?.[milestone.id]) ||
-                    Boolean(errors?.[`${milestone.id}_name`])
-                }
-            >
-                <StyledMilestoneCardBody>
-                    <Grid container>
-                        <StyledGridItem item xs={6} md={6}>
-                            <MilestoneCardName
-                                milestone={milestone}
-                                errors={errors}
-                                clearErrors={clearErrors}
-                                milestoneNameChanged={milestoneNameChanged}
-                            />
-                        </StyledGridItem>
-                        <StyledMilestoneActionGrid item xs={6} md={6}>
-                            <Button
-                                variant='outlined'
-                                color='primary'
-                                onClick={(ev) => setAnchor(ev.currentTarget)}
-                            >
-                                Add strategy
-                            </Button>
-                            <StyledIconButton
-                                title='Remove milestone'
-                                onClick={onDeleteMilestone}
-                                disabled={!removable}
-                            >
-                                <Delete />
-                            </StyledIconButton>
-
-                            <Popover
-                                id={popoverId}
-                                open={isPopoverOpen}
-                                anchorEl={anchor}
-                                onClose={onClose}
-                                onClick={onClose}
-                                PaperProps={{
-                                    sx: (theme) => ({
-                                        paddingBottom: theme.spacing(1),
-                                    }),
-                                }}
-                            >
-                                <MilestoneStrategyMenuCards
-                                    openEditAddStrategy={onSelectStrategy}
+            <>
+                <StyledMilestoneCard
+                    hasError={
+                        Boolean(errors?.[milestone.id]) ||
+                        Boolean(errors?.[`${milestone.id}_name`])
+                    }
+                >
+                    <StyledMilestoneCardBody>
+                        <Grid container>
+                            <StyledGridItem item xs={6} md={6}>
+                                <MilestoneCardName
+                                    milestone={milestone}
+                                    errors={errors}
+                                    clearErrors={clearErrors}
+                                    milestoneNameChanged={milestoneNameChanged}
                                 />
-                            </Popover>
-                        </StyledMilestoneActionGrid>
-                    </Grid>
-                </StyledMilestoneCardBody>
-            </StyledMilestoneCard>
+                            </StyledGridItem>
+                            <StyledMilestoneActionGrid item xs={6} md={6}>
+                                <Button
+                                    variant='outlined'
+                                    color='primary'
+                                    onClick={(ev) =>
+                                        setAnchor(ev.currentTarget)
+                                    }
+                                >
+                                    Add strategy
+                                </Button>
+                                <StyledIconButton
+                                    title='Remove milestone'
+                                    onClick={onDeleteMilestone}
+                                    disabled={!removable}
+                                >
+                                    <Delete />
+                                </StyledIconButton>
+
+                                <Popover
+                                    id={popoverId}
+                                    open={isPopoverOpen}
+                                    anchorEl={anchor}
+                                    onClose={onClose}
+                                    onClick={onClose}
+                                    PaperProps={{
+                                        sx: (theme) => ({
+                                            paddingBottom: theme.spacing(1),
+                                        }),
+                                    }}
+                                >
+                                    <MilestoneStrategyMenuCards
+                                        openEditAddStrategy={(strategy) => {
+                                            openAddUpdateStrategyForm(
+                                                strategy,
+                                                false,
+                                            );
+                                        }}
+                                    />
+                                </Popover>
+                            </StyledMilestoneActionGrid>
+                        </Grid>
+                    </StyledMilestoneCardBody>
+                </StyledMilestoneCard>
+
+                <SidebarModal
+                    label='Add strategy to template milestone'
+                    onClose={() => {
+                        setAddUpdateStrategyOpen(false);
+                        setStrategyModeEdit(false);
+                    }}
+                    open={addUpdateStrategyOpen}
+                >
+                    <ReleasePlanTemplateAddStrategyForm
+                        strategy={currentStrategy}
+                        onAddUpdateStrategy={addUpdateStrategy}
+                        onCancel={() => {
+                            setAddUpdateStrategyOpen(false);
+                            setStrategyModeEdit(false);
+                        }}
+                        editMode={strategyModeEdit}
+                    />
+                </SidebarModal>
+            </>
         );
     }
 
     return (
-        <StyledAccordion>
-            <StyledAccordionSummary
-                expandIcon={<ExpandMore titleAccess='Toggle' />}
+        <>
+            <StyledAccordion
+                expanded={expanded}
+                onChange={(e, change) => setExpanded(change)}
             >
-                <MilestoneCardName
-                    milestone={milestone}
-                    errors={errors}
-                    clearErrors={clearErrors}
-                    milestoneNameChanged={milestoneNameChanged}
-                />
-            </StyledAccordionSummary>
-            <StyledAccordionDetails>
-                {milestone.strategies.map((strg, index) => (
-                    <div key={strg.id}>
-                        <MilestoneStrategyDraggableItem
-                            index={index}
-                            onDragEnd={onDragEnd}
-                            onDragStartRef={onDragStartRef}
-                            onDragOver={onDragOver(strg.id)}
-                            onDeleteClick={() =>
-                                milestoneStrategyDeleted(strg.id)
-                            }
-                            onEditClick={() => {
-                                onSelectEditStrategy(strg);
+                <StyledAccordionSummary
+                    expandIcon={<ExpandMore titleAccess='Toggle' />}
+                >
+                    <MilestoneCardName
+                        milestone={milestone}
+                        errors={errors}
+                        clearErrors={clearErrors}
+                        milestoneNameChanged={milestoneNameChanged}
+                    />
+                </StyledAccordionSummary>
+                <StyledAccordionDetails>
+                    {milestone.strategies.map((strg, index) => (
+                        <div key={strg.id}>
+                            <MilestoneStrategyDraggableItem
+                                index={index}
+                                onDragEnd={onDragEnd}
+                                onDragStartRef={onDragStartRef}
+                                onDragOver={onDragOver(strg.id)}
+                                onDeleteClick={() =>
+                                    milestoneStrategyDeleted(strg.id)
+                                }
+                                onEditClick={() => {
+                                    openAddUpdateStrategyForm(strg, true);
+                                }}
+                                isDragging={dragItem?.id === strg.id}
+                                strategy={strg}
+                            />
+                        </div>
+                    ))}
+                    <StyledAccordionFooter>
+                        <StyledAddStrategyButton
+                            variant='outlined'
+                            color='primary'
+                            onClick={(ev) => setAnchor(ev.currentTarget)}
+                        >
+                            Add strategy
+                        </StyledAddStrategyButton>
+                        <Button
+                            variant='text'
+                            color='primary'
+                            onClick={onDeleteMilestone}
+                            disabled={!removable}
+                        >
+                            <Delete /> Remove milestone
+                        </Button>
+                        <Popover
+                            id={popoverId}
+                            open={isPopoverOpen}
+                            anchorEl={anchor}
+                            onClose={onClose}
+                            onClick={onClose}
+                            PaperProps={{
+                                sx: (theme) => ({
+                                    paddingBottom: theme.spacing(1),
+                                }),
                             }}
-                            isDragging={dragItem?.id === strg.id}
-                            strategy={strg}
-                        />
-                    </div>
-                ))}
-                <StyledAccordionFooter>
-                    <StyledAddStrategyButton
-                        variant='outlined'
-                        color='primary'
-                        onClick={(ev) => setAnchor(ev.currentTarget)}
-                    >
-                        Add strategy
-                    </StyledAddStrategyButton>
-                    <Button
-                        variant='text'
-                        color='primary'
-                        onClick={onDeleteMilestone}
-                        disabled={!removable}
-                    >
-                        <Delete /> Remove milestone
-                    </Button>
-                    <Popover
-                        id={popoverId}
-                        open={isPopoverOpen}
-                        anchorEl={anchor}
-                        onClose={onClose}
-                        onClick={onClose}
-                        PaperProps={{
-                            sx: (theme) => ({
-                                paddingBottom: theme.spacing(1),
-                            }),
-                        }}
-                    >
-                        <MilestoneStrategyMenuCards
-                            openEditAddStrategy={onSelectStrategy}
-                        />
-                    </Popover>
-                </StyledAccordionFooter>
-            </StyledAccordionDetails>
-        </StyledAccordion>
+                        >
+                            <MilestoneStrategyMenuCards
+                                openEditAddStrategy={(strategy) => {
+                                    openAddUpdateStrategyForm(strategy, false);
+                                }}
+                            />
+                        </Popover>
+                    </StyledAccordionFooter>
+                </StyledAccordionDetails>
+            </StyledAccordion>
+
+            <SidebarModal
+                label='Add strategy to template milestone'
+                onClose={() => {
+                    setAddUpdateStrategyOpen(false);
+                    setStrategyModeEdit(false);
+                }}
+                open={addUpdateStrategyOpen}
+            >
+                <ReleasePlanTemplateAddStrategyForm
+                    strategy={currentStrategy}
+                    onAddUpdateStrategy={addUpdateStrategy}
+                    onCancel={() => {
+                        setAddUpdateStrategyOpen(false);
+                        setStrategyModeEdit(false);
+                    }}
+                    editMode={strategyModeEdit}
+                />
+            </SidebarModal>
+        </>
     );
 };

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

@@ -1,7 +1,4 @@
-import type {
-    IReleasePlanMilestonePayload,
-    IReleasePlanMilestoneStrategy,
-} from 'interfaces/releasePlans';
+import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import { MilestoneCard } from './MilestoneCard/MilestoneCard';
 import { styled, Button, FormHelperText } from '@mui/material';
 import Add from '@mui/icons-material/Add';
@@ -12,11 +9,6 @@ interface IMilestoneListProps {
     setMilestones: React.Dispatch<
         React.SetStateAction<IReleasePlanMilestonePayload[]>
     >;
-    openAddStrategyForm: (
-        milestoneId: string,
-        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
-        editing: boolean,
-    ) => void;
     errors: { [key: string]: string };
     clearErrors: () => void;
     milestoneChanged: (milestone: IReleasePlanMilestonePayload) => void;
@@ -30,7 +22,6 @@ const StyledAddMilestoneButton = styled(Button)(({ theme }) => ({
 export const MilestoneList = ({
     milestones,
     setMilestones,
-    openAddStrategyForm,
     errors,
     clearErrors,
     milestoneChanged,
@@ -51,7 +42,6 @@ export const MilestoneList = ({
                         key={milestone.id}
                         milestone={milestone}
                         milestoneChanged={milestoneChanged}
-                        showAddStrategyDialog={openAddStrategyForm}
                         errors={errors}
                         clearErrors={clearErrors}
                         removable={milestones.length > 1}

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

@@ -124,18 +124,15 @@ const StyledDividerContent = styled(Box)(({ theme }) => ({
 }));
 
 interface IReleasePlanTemplateAddStrategyFormProps {
-    milestoneId: string | undefined;
     onCancel: () => void;
     strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>;
     onAddUpdateStrategy: (
-        milestoneId: string,
         strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
     ) => void;
     editMode: boolean;
 }
 
 export const ReleasePlanTemplateAddStrategyForm = ({
-    milestoneId,
     onCancel,
     strategy,
     onAddUpdateStrategy,
@@ -231,11 +228,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
     };
 
     const AddUpdateMilestoneStrategy = () => {
-        if (!milestoneId) {
-            return;
-        }
-
-        onAddUpdateStrategy(milestoneId, currentStrategy);
+        onAddUpdateStrategy(currentStrategy);
     };
 
     return (

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

@@ -1,15 +1,9 @@
 import Input from 'component/common/Input/Input';
 import { styled, useTheme } from '@mui/material';
-import type {
-    IReleasePlanMilestonePayload,
-    IReleasePlanMilestoneStrategy,
-} from 'interfaces/releasePlans';
+import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
-import { useState } from 'react';
 import { TemplateFormDescription } from './TemplateFormDescription';
 import { MilestoneList } from './MilestoneList/MilestoneList';
-import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
-import { ReleasePlanTemplateAddStrategyForm } from './MilestoneStrategy/ReleasePlanTemplateAddStrategyForm';
 
 const StyledInput = styled(Input)(({ theme }) => ({
     width: '100%',
@@ -61,77 +55,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
     handleSubmit,
     children,
 }) => {
-    const [addUpdateStrategyOpen, setAddUpdateStrategyOpen] = useState(false);
-    const [activeMilestoneId, setActiveMilestoneId] = useState<
-        string | undefined
-    >();
-    const [strategyModeEdit, setStrategyModeEdit] = useState(false);
-    const [strategy, setStrategy] = useState<
-        Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>
-    >({
-        name: 'flexibleRollout',
-        parameters: { rollout: '50' },
-        constraints: [],
-        title: '',
-        id: 'temp',
-    });
-
     const theme = useTheme();
-    const openAddUpdateStrategyForm = (
-        milestoneId: string,
-        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
-        editing: boolean,
-    ) => {
-        setStrategyModeEdit(editing);
-        setActiveMilestoneId(milestoneId);
-        setStrategy(strategy);
-        setAddUpdateStrategyOpen(true);
-    };
-
-    const addUpdateStrategy = (
-        milestoneId: string,
-        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
-    ) => {
-        const milestone = milestones.find((m) => m.id === milestoneId);
-        const existingStrategy = milestone?.strategies?.find(
-            (strat) => strat.id === strategy.id,
-        );
-        if (!milestone) {
-            return;
-        }
-        if (existingStrategy) {
-            milestoneStrategyChanged(milestone, strategy);
-        } else {
-            setMilestones((prev) =>
-                prev.map((milestone, i) =>
-                    milestone.id === milestoneId
-                        ? {
-                              ...milestone,
-                              strategies: [
-                                  ...(milestone.strategies || []),
-                                  {
-                                      ...strategy,
-                                      strategyName: strategy.strategyName,
-                                      sortOrder:
-                                          milestone.strategies?.length || 0,
-                                  },
-                              ],
-                          }
-                        : milestone,
-                ),
-            );
-        }
-        setAddUpdateStrategyOpen(false);
-        setStrategyModeEdit(false);
-        setActiveMilestoneId(undefined);
-        setStrategy({
-            name: 'flexibleRollout',
-            parameters: { rollout: '50' },
-            constraints: [],
-            title: '',
-            id: 'temp',
-        });
-    };
 
     const milestoneChanged = (milestone: IReleasePlanMilestonePayload) => {
         setMilestones((prev) =>
@@ -141,21 +65,6 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
         );
     };
 
-    const milestoneStrategyChanged = (
-        milestone: IReleasePlanMilestonePayload,
-        strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
-    ) => {
-        const strategies = milestone.strategies || [];
-        milestoneChanged({
-            ...milestone,
-            strategies: [
-                ...strategies.map((strat) =>
-                    strat.id === strategy.id ? strategy : strat,
-                ),
-            ],
-        });
-    };
-
     return (
         <FormTemplate
             title={formTitle}
@@ -203,33 +112,12 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
                 <MilestoneList
                     milestones={milestones}
                     setMilestones={setMilestones}
-                    openAddStrategyForm={openAddUpdateStrategyForm}
                     errors={errors}
                     clearErrors={clearErrors}
                     milestoneChanged={milestoneChanged}
                 />
 
                 {children}
-
-                <SidebarModal
-                    label='Add strategy to template milestone'
-                    onClose={() => {
-                        setAddUpdateStrategyOpen(false);
-                        setStrategyModeEdit(false);
-                    }}
-                    open={addUpdateStrategyOpen}
-                >
-                    <ReleasePlanTemplateAddStrategyForm
-                        milestoneId={activeMilestoneId}
-                        strategy={strategy}
-                        onAddUpdateStrategy={addUpdateStrategy}
-                        onCancel={() => {
-                            setAddUpdateStrategyOpen(false);
-                            setStrategyModeEdit(false);
-                        }}
-                        editMode={strategyModeEdit}
-                    />
-                </SidebarModal>
             </StyledForm>
         </FormTemplate>
     );