feat: create and edit release plan template milestones #8768
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import Input from 'component/common/Input/Input'; | ||
| import { Box, Button, Card, Grid, styled } from '@mui/material'; | ||
| import Edit from '@mui/icons-material/Edit'; | ||
| import type { IReleasePlanMilestonePayload } from 'interfaces/releasePlans'; | ||
| import { useState } from 'react'; | ||
|
|
||
| const StyledEditIcon = styled(Edit)(({ theme }) => ({ | ||
| cursor: 'pointer', | ||
| marginTop: theme.spacing(-0.25), | ||
| marginLeft: theme.spacing(0.5), | ||
| height: theme.spacing(2.5), | ||
| width: theme.spacing(2.5), | ||
| color: theme.palette.text.secondary, | ||
| })); | ||
|
|
||
| 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(2, 2), | ||
| })); | ||
|
|
||
| const StyledGridItem = styled(Grid)(({ theme }) => ({ | ||
| display: 'flex', | ||
| alignItems: 'center', | ||
| })); | ||
|
|
||
| const StyledInput = styled(Input)(({ theme }) => ({ | ||
| width: '100%', | ||
| })); | ||
|
|
||
| const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({ | ||
| fontWeight: theme.fontWeight.bold, | ||
| fontSize: theme.fontSizes.bodySize, | ||
| })); | ||
|
|
||
| interface IMilestoneCard { | ||
daveleek marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| index: number; | ||
| milestone: IReleasePlanMilestonePayload; | ||
| milestoneNameChanged: (index: number, name: string) => void; | ||
| showAddStrategyDialog: (index: number) => void; | ||
| errors: { [key: string]: string }; | ||
| clearErrors: () => void; | ||
| } | ||
|
|
||
| export const MilestoneCard = ({ | ||
| index, | ||
| milestone, | ||
| milestoneNameChanged, | ||
| showAddStrategyDialog, | ||
| errors, | ||
| clearErrors, | ||
| }: IMilestoneCard) => { | ||
| const [editMode, setEditMode] = useState(false); | ||
|
|
||
| return ( | ||
| <StyledMilestoneCard> | ||
| <StyledMilestoneCardBody> | ||
| <Grid container> | ||
| <StyledGridItem item xs={10} md={10}> | ||
| {editMode && ( | ||
| <StyledInput | ||
| label='' | ||
| value={milestone.name} | ||
| onChange={(e) => | ||
| milestoneNameChanged(index, e.target.value) | ||
| } | ||
| error={Boolean(errors?.name)} | ||
| errorText={errors?.name} | ||
| onFocus={() => clearErrors()} | ||
| onBlur={() => setEditMode(false)} | ||
| autoFocus | ||
| onKeyDownCapture={(e) => { | ||
| if (e.code === 'Enter') { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| setEditMode(false); | ||
| } | ||
| }} | ||
| /> | ||
| )} | ||
| {!editMode && ( | ||
| <> | ||
| <StyledMilestoneCardTitle | ||
| onClick={() => setEditMode(true)} | ||
| > | ||
| {milestone.name} | ||
| </StyledMilestoneCardTitle> | ||
| <StyledEditIcon | ||
| onClick={() => setEditMode(true)} | ||
| /> | ||
| </> | ||
| )} | ||
|
There was a problem hiding this comment. Why isn't this a part of the above block, since the condition is the same? There was a problem hiding this comment. Argh, I moved things around and forgot to remove the duplicate condition 🙄 There was a problem hiding this comment. I think you could have added the onClick handler on the parent component, catching any click in the children, instead of duplicating it. There was a problem hiding this comment. Parent is the same for this and the other section which is only shown during edit mode, and would have a weird effect if you click inside. I'll have a think if I can introduce a parent just for these two while doing add strategies |
||
| </StyledGridItem> | ||
| <Grid item xs={2} md={2}> | ||
| <Button | ||
| variant='outlined' | ||
| color='primary' | ||
| onClick={() => showAddStrategyDialog(index)} | ||
| > | ||
| Add strategy | ||
| </Button> | ||
| </Grid> | ||
| </Grid> | ||
| </StyledMilestoneCardBody> | ||
| </StyledMilestoneCard> | ||
| ); | ||
| }; | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I still think you could have potentially merged the edit and create components into a single one, with a simple
const isEdit = Boolean(templateId), but this is probably fine for now, and has much less duplicated code than before, so good job 👍