Skip to content

Commit

Permalink
fix: template edit UI issues (#8974)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daveleek
daveleek authored Dec 13, 2024
1 parent b2cf0e4 commit a738be6
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 11 deletions.
4 changes: 3 additions & 1 deletion frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,9 @@ export const CreateReleasePlanTemplate = () => {
<CreateButton
name='template'
permission={RELEASE_PLAN_TEMPLATE_CREATE}
/>
>
Save template
</CreateButton>
<StyledCancelButton onClick={handleCancel}>
Cancel
</StyledCancelButton>
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,9 @@ export const EditReleasePlanTemplate = () => {
<UpdateButton
name='template'
permission={RELEASE_PLAN_TEMPLATE_UPDATE}
/>
>
Save changes
</UpdateButton>
<StyledCancelButton onClick={handleCancel}>
Cancel
</StyledCancelButton>
Expand Down
52 changes: 45 additions & 7 deletions frontend/src/component/releases/ReleasePlanTemplate/MilestoneCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,11 @@ import {
Accordion,
AccordionSummary,
AccordionDetails,
IconButton,
useTheme,
} from '@mui/material';
import Edit from '@mui/icons-material/Edit';
import Delete from '@mui/icons-material/DeleteOutlined';
import type {
IReleasePlanMilestonePayload,
IReleasePlanMilestoneStrategy,
Expand Down Expand Up @@ -81,9 +84,10 @@ const StyledAccordion = styled(Accordion)(({ theme }) => ({
},
transition: 'background-color 0.2s ease-in-out',
backgroundColor: theme.palette.background.default,
'&.Mui-expanded': {
marginTop: theme.spacing(3),
'&:before': {
opacity: '0 !important',
},
'&.Mui-expanded': { marginTop: `${theme.spacing(2)} !important` },
}));

const StyledAccordionSummary = styled(AccordionSummary)(({ theme }) => ({
Expand Down Expand Up @@ -111,15 +115,27 @@ const StyledAccordionFooter = styled(Grid)(({ theme }) => ({
borderRadius: theme.shape.borderRadiusMedium,
}));

const StyledMilestoneActionGrid = styled(Grid)(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
}));

const StyledIconButton = styled(IconButton)(({ theme }) => ({
marginLeft: theme.spacing(1),
color: theme.palette.primary.main,
}));

interface IMilestoneCardProps {
milestone: IReleasePlanMilestonePayload;
milestoneChanged: (milestone: IReleasePlanMilestonePayload) => void;
showAddStrategyDialog: (
milestoneId: string,
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
editing: boolean,
) => void;
errors: { [key: string]: string };
clearErrors: () => void;
onDeleteMilestone: () => void;
}

export const MilestoneCard = ({
Expand All @@ -128,6 +144,7 @@ export const MilestoneCard = ({
showAddStrategyDialog,
errors,
clearErrors,
onDeleteMilestone,
}: IMilestoneCardProps) => {
const [editMode, setEditMode] = useState(false);
const [anchor, setAnchor] = useState<Element>();
Expand All @@ -136,6 +153,7 @@ export const MilestoneCard = ({
index: number;
height: number;
} | null>(null);
const theme = useTheme();
const isPopoverOpen = Boolean(anchor);
const popoverId = isPopoverOpen
? 'MilestoneStrategyMenuPopover'
Expand All @@ -145,10 +163,16 @@ export const MilestoneCard = ({
setAnchor(undefined);
};

const onSelectEditStrategy = (
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
) => {
showAddStrategyDialog(milestone.id, strategy, true);
};

const onSelectStrategy = (
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
) => {
showAddStrategyDialog(milestone.id, strategy);
showAddStrategyDialog(milestone.id, strategy, false);
};

const onDragOver =
Expand Down Expand Up @@ -244,7 +268,7 @@ export const MilestoneCard = ({
<StyledMilestoneCard>
<StyledMilestoneCardBody>
<Grid container>
<StyledGridItem item xs={10} md={10}>
<StyledGridItem item xs={8} md={9}>
{editMode && (
<StyledInput
label=''
Expand Down Expand Up @@ -279,14 +303,21 @@ export const MilestoneCard = ({
</>
)}
</StyledGridItem>
<Grid item xs={2} md={2}>
<StyledMilestoneActionGrid item xs={4} md={3}>
<Button
variant='outlined'
color='primary'
onClick={(ev) => setAnchor(ev.currentTarget)}
>
Add strategy
</Button>
<StyledIconButton
title='Remove milestone'
onClick={onDeleteMilestone}
>
<Delete />
</StyledIconButton>

<Popover
id={popoverId}
open={isPopoverOpen}
Expand All @@ -303,7 +334,7 @@ export const MilestoneCard = ({
openEditAddStrategy={onSelectStrategy}
/>
</Popover>
</Grid>
</StyledMilestoneActionGrid>
</Grid>
</StyledMilestoneCardBody>
</StyledMilestoneCard>
Expand Down Expand Up @@ -357,7 +388,7 @@ export const MilestoneCard = ({
milestoneStrategyDeleted(strg.id)
}
onEditClick={() => {
onSelectStrategy(strg);
onSelectEditStrategy(strg);
}}
isDragging={false}
strategy={strg}
Expand All @@ -372,6 +403,13 @@ export const MilestoneCard = ({
>
Add strategy
</StyledAddStrategyButton>
<Button
variant='text'
color='primary'
onClick={onDeleteMilestone}
>
<Delete /> Remove milestone
</Button>
<Popover
id={popoverId}
open={isPopoverOpen}
Expand Down
10 changes: 10 additions & 0 deletions frontend/src/component/releases/ReleasePlanTemplate/MilestoneList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ interface IMilestoneListProps {
openAddStrategyForm: (
milestoneId: string,
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
editing: boolean,
) => void;
errors: { [key: string]: string };
clearErrors: () => void;
Expand All @@ -34,6 +35,14 @@ export const MilestoneList = ({
clearErrors,
milestoneChanged,
}: IMilestoneListProps) => {
const onDeleteMilestone = (milestoneId: string) => () => {
setMilestones((prev) =>
prev
.filter((m) => m.id !== milestoneId)
.map((m, i) => ({ ...m, sortOrder: i })),
);
};

return (
<>
{milestones.map((milestone) => (
Expand All @@ -44,6 +53,7 @@ export const MilestoneList = ({
showAddStrategyDialog={openAddStrategyForm}
errors={errors}
clearErrors={clearErrors}
onDeleteMilestone={onDeleteMilestone(milestone.id)}
/>
))}
<StyledAddMilestoneButton
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/component/releases/ReleasePlanTemplate/ReleasePlanTemplateAddStrategyForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,13 +126,15 @@ interface IReleasePlanTemplateAddStrategyFormProps {
milestoneId: string,
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
) => void;
editMode: boolean;
}

export const ReleasePlanTemplateAddStrategyForm = ({
milestoneId,
onCancel,
strategy,
onAddUpdateStrategy,
editMode,
}: IReleasePlanTemplateAddStrategyFormProps) => {
const [currentStrategy, setCurrentStrategy] = useState(strategy);
const [activeTab, setActiveTab] = useState(0);
Expand Down Expand Up @@ -346,7 +348,7 @@ export const ReleasePlanTemplateAddStrategyForm = ({
disabled={!hasValidConstraints || errors.hasFormErrors()}
onClick={AddUpdateMilestoneStrategy}
>
Save strategy
{editMode ? 'Add changes' : 'Add strategy'}
</Button>
<StyledCancelButton onClick={onCancel}>
Cancel
Expand Down
9 changes: 8 additions & 1 deletion frontend/src/component/releases/ReleasePlanTemplate/TemplateForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
const [activeMilestoneId, setActiveMilestoneId] = useState<
string | undefined
>();
const [strategyModeEdit, setStrategyModeEdit] = useState(false);
const [strategy, setStrategy] = useState<
Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>
>({
Expand All @@ -74,7 +75,9 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
const openAddUpdateStrategyForm = (
milestoneId: string,
strategy: Omit<IReleasePlanMilestoneStrategy, 'milestoneId'>,
editing: boolean,
) => {
setStrategyModeEdit(editing);
setActiveMilestoneId(milestoneId);
setStrategy(strategy);
setAddUpdateStrategyOpen(true);
Expand Down Expand Up @@ -114,6 +117,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
);
}
setAddUpdateStrategyOpen(false);
setStrategyModeEdit(false);
setActiveMilestoneId(undefined);
setStrategy({
name: 'flexibleRollout',
Expand Down Expand Up @@ -190,7 +194,9 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({

<SidebarModal
label='Add strategy to template milestone'
onClose={() => {}}
onClose={() => {
setStrategyModeEdit(false);
}}
open={addUpdateStrategyOpen}
>
<ReleasePlanTemplateAddStrategyForm
Expand All @@ -200,6 +206,7 @@ export const TemplateForm: React.FC<ITemplateFormProps> = ({
onCancel={() => {
setAddUpdateStrategyOpen(false);
}}
editMode={strategyModeEdit}
/>
</SidebarModal>
</StyledForm>
Expand Down

0 comments on commit a738be6

Please sign in to comment.