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

feat: add milestone progression automation UI (#10743)

Browse Source
This commit is contained in:
Fredrik Strand Oseberg 2025-10-07 10:30:36 +02:00 committed by GitHub
parent bade23974e
commit ce1fb144d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 56 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan.tsx
View File

@ -1,5 +1,6 @@
import Delete from '@mui/icons-material/Delete';
import { styled } from '@mui/material';
import Add from '@mui/icons-material/Add';
import { styled, IconButton, Button } from '@mui/material';
import { DELETE_FEATURE_STRATEGY } from '@server/types/permissions';
import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
import { useReleasePlansApi } from 'hooks/api/actions/useReleasePlansApi/useReleasePlansApi';
@ -22,6 +23,7 @@ import { RemoveReleasePlanChangeRequestDialog } from './ChangeRequest/RemoveRele
import { StartMilestoneChangeRequestDialog } from './ChangeRequest/StartMilestoneChangeRequestDialog.tsx';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { Truncator } from 'component/common/Truncator/Truncator';
import { useUiFlag } from 'hooks/useUiFlag';
const StyledContainer = styled('div')(({ theme }) => ({
padding: theme.spacing(2),
@ -69,12 +71,47 @@ const StyledBody = styled('div')(({ theme }) => ({
}));
const StyledConnection = styled('div')(({ theme }) => ({
width: 4,
height: theme.spacing(6),
backgroundColor: theme.palette.divider,
marginLeft: theme.spacing(3.25),
}));
const StyledConnectionSimple = styled('div')(({ theme }) => ({
width: 4,
height: theme.spacing(2),
backgroundColor: theme.palette.divider,
marginLeft: theme.spacing(3.25),
}));
const StyledConnectionContainer = styled('div')(({ theme }) => ({
position: 'relative',
display: 'flex',
alignItems: 'center',
}));
const StyledAddAutomationIconButton = styled(IconButton)(({ theme }) => ({
position: 'absolute',
left: theme.spacing(2),
top: '12px',
width: 24,
height: 24,
border: `1px solid ${theme.palette.primary.main}`,
backgroundColor: theme.palette.background.elevation2,
zIndex: 1,
'& svg': {
fontSize: 16,
},
}));
const StyledAddAutomationButton = styled(Button)(({ theme }) => ({
marginLeft: theme.spacing(3),
textTransform: 'none',
fontWeight: theme.typography.fontWeightBold,
padding: 0,
minWidth: 'auto',
}));
interface IReleasePlanProps {
plan: IReleasePlan;
environmentIsDisabled?: boolean;
@ -118,6 +155,7 @@ export const ReleasePlan = ({
const { addChange } = useChangeRequestApi();
const { refetch: refetchChangeRequests } =
usePendingChangeRequests(projectId);
const milestoneProgressionsEnabled = useUiFlag('milestoneProgression');
const onAddRemovePlanChangesConfirm = async () => {
await addChange(projectId, environment, {
@ -276,7 +314,23 @@ export const ReleasePlan = ({
/>
<ConditionallyRender
condition={index < milestones.length - 1}
show={<StyledConnection />}
show={
<ConditionallyRender
condition={milestoneProgressionsEnabled}
show={
<StyledConnectionContainer>
<StyledConnection />
<StyledAddAutomationIconButton color='primary'>
<Add />
</StyledAddAutomationIconButton>
<StyledAddAutomationButton color='primary'>
Add automation
</StyledAddAutomationButton>
</StyledConnectionContainer>
}
elseShow={<StyledConnectionSimple />}
/>
}
/>
</div>
))}