Skip to content

Commit

Permalink
feat: create and edit release plan template milestones
Browse files Browse the repository at this point in the history
  • Loading branch information
@daveleek
daveleek committed Nov 15, 2024
1 parent 395a4b6 commit 335fd6a
Show file tree
Hide file tree
Showing 8 changed files with 379 additions and 85 deletions.
113 changes: 91 additions & 22 deletions frontend/src/component/releases/ReleasePlanTemplate/CreateReleasePlanTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,12 @@ import { scrollToTop } from 'component/common/util';
import useToast from 'hooks/useToast';
import { formatUnknownError } from 'utils/formatUnknownError';
import { useUiFlag } from 'hooks/useUiFlag';
import ReleaseTemplateIcon from '@mui/icons-material/DashboardOutlined';
import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans';
import { MilestoneList } from './MilestoneList';
import { useState } from 'react';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { ReleasePlanTemplateAddStrategyForm } from './ReleasePlanTemplateAddStrategyForm';

const StyledForm = styled('form')(() => ({
display: 'flex',
Expand All @@ -29,12 +35,21 @@ const StyledCancelButton = styled(Button)(({ theme }) => ({
marginLeft: theme.spacing(3),
}));

const StyledButton = styled(Button)(({ theme }) => ({
marginTop: theme.spacing(1),
maxWidth: theme.spacing(20),
}));

export const CreateReleasePlanTemplate = () => {
const releasePlansEnabled = useUiFlag('releasePlans');
usePageTitle('Create release plan template');
const { setToastApiError, setToastData } = useToast();
const navigate = useNavigate();
const { createReleasePlanTemplate } = useReleasePlanTemplatesApi();
const [milestones, setMilestones] = useState<
IReleasePlanMilestonePayload[]
>([{ name: 'Milestone 1', sortOrder: 0 }]);
const [addStrategyOpen, setAddStrategyOpen] = useState<boolean>(false);
const {
name,
setName,
Expand All @@ -57,7 +72,10 @@ export const CreateReleasePlanTemplate = () => {
if (isValid) {
const payload = getTemplatePayload();
try {
const template = await createReleasePlanTemplate(payload);
const template = await createReleasePlanTemplate({
...payload,
milestones,
});
scrollToTop();
setToastData({
type: 'success',
Expand All @@ -70,33 +88,84 @@ export const CreateReleasePlanTemplate = () => {
}
};

const updateMilestone = (
index: number,
milestone: IReleasePlanMilestonePayload,
) => {
/*
setMilestones(() => {
return milestones.map((m, i) => {
if (i === index) {
return milestone;
}
return m;
});
});*/
};

const onSidebarClose = () => {};

if (!releasePlansEnabled) {
return null;
}

return (
<>
<FormTemplate
title='Create release plan template'
description='Create a release plan template to make it easier for you and your team to release features.'
<FormTemplate
title='Create release plan template'
documentationIcon={<ReleaseTemplateIcon />}
description='Create a release plan template to make it easier for you and your team to release features.'
>
<StyledForm onSubmit={handleSubmit}>
<TemplateForm
name={name}
setName={setName}
description={description}
setDescription={setDescription}
errors={errors}
clearErrors={clearErrors}
/>
<MilestoneList
milestones={milestones}
setAddStrategyOpen={setAddStrategyOpen}
errors={errors}
clearErrors={clearErrors}
/>
<StyledButton
variant='text'
color='primary'
onClick={(e) => {
e.preventDefault();
setMilestones([
...milestones,
{
name: `Milestone ${milestones.length + 1}`,
sortOrder: milestones.length,
},
]);
}}
>
+ Add milestone
</StyledButton>
<StyledButtonContainer>
<CreateButton name='template' permission={ADMIN} />
<StyledCancelButton onClick={handleCancel}>
Cancel
</StyledCancelButton>
</StyledButtonContainer>
</StyledForm>
<SidebarModal
label='Add strategy to template milestone'
onClose={onSidebarClose}
open={addStrategyOpen}
>
<StyledForm onSubmit={handleSubmit}>
<TemplateForm
name={name}
setName={setName}
description={description}
setDescription={setDescription}
errors={errors}
clearErrors={clearErrors}
<>
<ReleasePlanTemplateAddStrategyForm
onCancel={() => {
setAddStrategyOpen(false);
}}
/>
<StyledButtonContainer>
<CreateButton name='template' permission={ADMIN} />
<StyledCancelButton onClick={handleCancel}>
Cancel
</StyledCancelButton>
</StyledButtonContainer>
</StyledForm>
</FormTemplate>
</>
</>
</SidebarModal>
</FormTemplate>
);
};
106 changes: 47 additions & 59 deletions frontend/src/component/releases/ReleasePlanTemplate/EditReleasePlanTemplate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,47 +5,24 @@ import { useReleasePlanTemplate } from 'hooks/api/getters/useReleasePlanTemplate
import FormTemplate from 'component/common/FormTemplate/FormTemplate';
import { useTemplateForm } from '../hooks/useTemplateForm';
import { TemplateForm } from './TemplateForm';
import { Box, Button, Card, styled } from '@mui/material';
import { Button, styled } from '@mui/material';
import { UpdateButton } from 'component/common/UpdateButton/UpdateButton';
import { ADMIN } from '@server/types/permissions';
import { useNavigate } from 'react-router-dom';
import { formatUnknownError } from 'utils/formatUnknownError';
import useToast from 'hooks/useToast';
import useReleasePlanTemplatesApi from 'hooks/api/actions/useReleasePlanTemplatesApi/useReleasePlanTemplatesApi';
import { MilestoneList } from './MilestoneList';
import { useState } from 'react';
import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
import { ReleasePlanTemplateAddStrategyForm } from './ReleasePlanTemplateAddStrategyForm';

const StyledForm = styled('form')(() => ({
display: 'flex',
flexDirection: 'column',
height: '100%',
}));

const StyledMilestoneCard = styled(Card)(({ theme }) => ({
marginTop: theme.spacing(2),
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
boxShadow: 'none',
border: `1px solid ${theme.palette.divider}`,
[theme.breakpoints.down('sm')]: {
justifyContent: 'center',
},
transition: 'background-color 0.2s ease-in-out',
backgroundColor: theme.palette.background.default,
'&:hover': {
backgroundColor: theme.palette.neutral.light,
},
borderRadius: theme.shape.borderRadiusMedium,
}));

const StyledMilestoneCardBody = styled(Box)(({ theme }) => ({
padding: theme.spacing(3, 2),
}));

const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
fontSize: theme.fontSizes.bodySize,
}));

const StyledButtonContainer = styled('div')(() => ({
marginTop: 'auto',
display: 'flex',
Expand All @@ -59,6 +36,7 @@ const StyledCancelButton = styled(Button)(({ theme }) => ({
export const EditReleasePlanTemplate = () => {
const releasePlansEnabled = useUiFlag('releasePlans');
const templateId = useRequiredPathParam('templateId');
const [addStrategyOpen, setAddStrategyOpen] = useState<boolean>(false);
const { template, loading, error, refetch } =
useReleasePlanTemplate(templateId);
usePageTitle(`Edit template: ${template.name}`);
Expand Down Expand Up @@ -97,44 +75,54 @@ export const EditReleasePlanTemplate = () => {
}
}
};
const onSidebarClose = () => {};

if (!releasePlansEnabled) {
return null;
}

return (
<>
<FormTemplate
title={`Edit template ${template.name}`}
description='Edit a release plan template that makes it easier for you and your team to release features.'
<FormTemplate
title={`Edit template ${template.name}`}
description='Edit a release plan template that makes it easier for you and your team to release features.'
>
<StyledForm onSubmit={handleSubmit}>
<TemplateForm
name={name}
setName={setName}
description={description}
setDescription={setDescription}
errors={errors}
clearErrors={clearErrors}
/>

<MilestoneList
milestones={template.milestones}
setAddStrategyOpen={setAddStrategyOpen}
errors={errors}
clearErrors={clearErrors}
/>

<StyledButtonContainer>
<UpdateButton name='template' permission={ADMIN} />
<StyledCancelButton onClick={handleCancel}>
Cancel
</StyledCancelButton>
</StyledButtonContainer>
</StyledForm>
<SidebarModal
label='Add strategy to template milestone'
onClose={onSidebarClose}
open={addStrategyOpen}
>
<StyledForm onSubmit={handleSubmit}>
<TemplateForm
name={name}
setName={setName}
description={description}
setDescription={setDescription}
errors={errors}
clearErrors={clearErrors}
<>
<ReleasePlanTemplateAddStrategyForm
onCancel={() => {
setAddStrategyOpen(false);
}}
/>

{template.milestones.map((milestone) => (
<StyledMilestoneCard key={milestone.id}>
<StyledMilestoneCardBody>
<StyledMilestoneCardTitle>
{milestone.name}
</StyledMilestoneCardTitle>
</StyledMilestoneCardBody>
</StyledMilestoneCard>
))}
<StyledButtonContainer>
<UpdateButton name='template' permission={ADMIN} />
<StyledCancelButton onClick={handleCancel}>
Cancel
</StyledCancelButton>
</StyledButtonContainer>
</StyledForm>
</FormTemplate>
</>
</>
</SidebarModal>
</FormTemplate>
);
};
Loading

0 comments on commit 335fd6a

Please sign in to comment.