Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

refactor: align edit and create states

Browse Source
This commit is contained in:
FredrikOseberg 2025-10-23 14:46:46 +02:00
parent f3679327c0
commit 113cbb1bad
No known key found for this signature in database
GPG Key ID: 282FD8A6D8F9BCF0
1 changed files with 76 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/MilestoneTransitionDisplay.tsx
View File

@ -11,6 +11,26 @@ import type { ChangeMilestoneProgressionSchema } from 'openapi';
import type { ReactNode } from 'react'; import type { ReactNode } from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
const StyledFormWrapper = styled('div', {
shouldForwardProp: (prop) => prop !== 'hasChanged',
})<{ hasChanged: boolean }>(({ theme, hasChanged }) => ({
display: 'flex',
flexDirection: 'column',
gap: theme.spacing(1.5),
width: '100%',
transition: theme.transitions.create(
['background-color', 'padding', 'border-radius'],
{
duration: theme.transitions.duration.short,
},
),
...(hasChanged && {
backgroundColor: theme.palette.background.elevation1,
padding: theme.spacing(1.5, 2),
borderRadius: `${theme.shape.borderRadiusLarge}px`,
}),
}));
const StyledDisplayContainer = styled('div')(({ theme }) => ({ const StyledDisplayContainer = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@ -50,10 +70,24 @@ const StyledLabel = styled('span', {
flexShrink: 0, flexShrink: 0,
})); }));
const StyledButtonGroup = styled('div')(({ theme }) => ({ const StyledButtonGroup = styled('div', {
shouldForwardProp: (prop) => prop !== 'hasChanged',
})<{ hasChanged: boolean }>(({ theme, hasChanged }) => ({
display: 'flex', display: 'flex',
gap: theme.spacing(1), gap: theme.spacing(1),
alignItems: 'center', alignItems: 'center',
justifyContent: 'flex-end',
transition: theme.transitions.create(
['border-top', 'padding-top', 'margin-top'],
{
duration: theme.transitions.duration.short,
},
),
...(hasChanged && {
paddingTop: theme.spacing(1),
marginTop: theme.spacing(0.5),
borderTop: `1px solid ${theme.palette.divider}`,
}),
})); }));
interface IMilestoneTransitionDisplayProps { interface IMilestoneTransitionDisplayProps {
@ -130,21 +164,44 @@ export const MilestoneTransitionDisplay = ({
}; };
return ( return (
<StyledDisplayContainer onKeyDown={handleKeyDown}> <StyledFormWrapper hasChanged={hasChanged} onKeyDown={handleKeyDown}>
<StyledContentGroup> <StyledDisplayContainer>
<StyledIcon status={status} /> <StyledContentGroup>
<StyledLabel status={status}> <StyledIcon status={status} />
Proceed to the next milestone after <StyledLabel status={status}>
</StyledLabel> Proceed to the next milestone after
<MilestoneProgressionTimeInput </StyledLabel>
timeValue={form.timeValue} <MilestoneProgressionTimeInput
timeUnit={form.timeUnit} timeValue={form.timeValue}
onTimeValueChange={form.handleTimeValueChange} timeUnit={form.timeUnit}
onTimeUnitChange={form.handleTimeUnitChange} onTimeValueChange={form.handleTimeValueChange}
/> onTimeUnitChange={form.handleTimeUnitChange}
</StyledContentGroup> />
<StyledButtonGroup> </StyledContentGroup>
{hasChanged && ( {!hasChanged && (
<StyledButtonGroup hasChanged={false}>
{badge}
<IconButton
onClick={onDelete}
size='small'
aria-label={`Delete automation for ${milestoneName}`}
sx={{ padding: 0.5 }}
>
<DeleteOutlineIcon fontSize='small' />
</IconButton>
</StyledButtonGroup>
)}
</StyledDisplayContainer>
{hasChanged && (
<StyledButtonGroup hasChanged={true}>
<Button
variant='outlined'
color='primary'
onClick={handleReset}
size='small'
>
Cancel
</Button>
<Button <Button
variant='contained' variant='contained'
color='primary' color='primary'
@ -153,17 +210,8 @@ export const MilestoneTransitionDisplay = ({
> >
Save Save
</Button> </Button>
)} </StyledButtonGroup>
{badge} )}
<IconButton </StyledFormWrapper>
onClick={onDelete}
size='small'
aria-label={`Delete automation for ${milestoneName}`}
sx={{ padding: 0.5 }}
>
<DeleteOutlineIcon fontSize='small' />
</IconButton>
</StyledButtonGroup>
</StyledDisplayContainer>
); );
}; };