Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-24 17:51:14 +02:00
Code Issues Projects Releases Wiki Activity

chore: update release template preview dialog

Browse Source
This commit is contained in:
Nuno Góis 2025-09-22 13:32:57 +01:00
parent a1691fead7
commit f0826f5727
No known key found for this signature in database
GPG Key ID: 71ECC689F1091765
4 changed files with 228 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
View File

@ -19,6 +19,7 @@ import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePla
import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
import { formatUnknownError } from 'utils/formatUnknownError';
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
import { LegacyReleasePlanReviewDialog } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx';
import { ReleasePlanReviewDialog } from '../../FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx';
import {
FeatureStrategyMenuCards,
@ -288,23 +289,45 @@ export const FeatureStrategyMenu = ({
)}
</Dialog>
{selectedTemplate && (
<ReleasePlanReviewDialog
open={addReleasePlanOpen}
setOpen={(open) => {
setAddReleasePlanOpen(open);
if (!open) {
setIsStrategyMenuDialogOpen(true);
}
}}
onConfirm={() => {
addReleasePlan(selectedTemplate);
}}
template={selectedTemplate}
projectId={projectId}
featureName={featureId}
environment={environmentId}
crProtected={crProtected}
/>
<>
{newStrategyModalEnabled ? (
<ReleasePlanReviewDialog
open={addReleasePlanOpen}
setOpen={(open) => {
setAddReleasePlanOpen(open);
if (!open) {
setIsStrategyMenuDialogOpen(true);
}
}}
onConfirm={() => {
addReleasePlan(selectedTemplate);
}}
template={selectedTemplate}
projectId={projectId}
featureName={featureId}
environment={environmentId}
crProtected={crProtected}
/>
) : (
<LegacyReleasePlanReviewDialog
open={addReleasePlanOpen}
setOpen={(open) => {
setAddReleasePlanOpen(open);
if (!open) {
setIsStrategyMenuDialogOpen(true);
}
}}
onConfirm={() => {
addReleasePlan(selectedTemplate);
}}
template={selectedTemplate}
projectId={projectId}
featureName={featureId}
environment={environmentId}
crProtected={crProtected}
/>
)}
</>
)}
</StyledStrategyMenu>
);

2
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
View File

@ -22,7 +22,7 @@ const StyledCard = styled('div', {
display: 'flex',
alignItems: 'center',
width: '100%',
height: '100%',
height: theme.spacing(10),
maxWidth: '30rem',
padding: theme.spacing(2),
color: 'inherit',

148
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx Normal file
View File

@ -0,0 +1,148 @@
import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
import { ReleasePlan } from './ReleasePlan.tsx';
import { useReleasePlanPreview } from 'hooks/useReleasePlanPreview';
import {
styled,
Typography,
Alert,
Box,
IconButton,
Dialog,
DialogContent,
DialogActions,
Button,
} from '@mui/material';
import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import CloseIcon from '@mui/icons-material/Close';
const StyledDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialog-paper': {
borderRadius: theme.shape.borderRadiusLarge,
maxWidth: theme.spacing(85),
},
}));
const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
padding: theme.spacing(2, 4, 4),
}));
const TopRow = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(2),
}));
const BackButton = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
}));
const StyledBackIcon = styled(ArrowBackIcon)(({ theme }) => ({
marginRight: theme.spacing(1),
color: theme.palette.primary.main,
display: 'flex',
alignSelf: 'center',
}));
const BackText = styled(Typography)(({ theme }) => ({
fontWeight: theme.typography.fontWeightMedium,
display: 'flex',
alignItems: 'center',
lineHeight: 1,
}));
interface IReleasePlanAddDialogProps {
open: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
onConfirm: () => void;
template: IReleasePlanTemplate;
projectId: string;
featureName: string;
environment: string;
crProtected?: boolean;
}
export const LegacyReleasePlanReviewDialog = ({
open,
setOpen,
onConfirm,
template,
projectId,
featureName,
environment,
crProtected,
}: IReleasePlanAddDialogProps) => {
const { feature } = useFeature(projectId, featureName);
const { releasePlans } = useReleasePlans(
projectId,
featureName,
environment,
);
const activeReleasePlan = releasePlans[0];
const environmentData = feature?.environments.find(
({ name }) => name === environment,
);
const environmentEnabled = environmentData?.enabled;
const planPreview = useReleasePlanPreview(
template.id,
featureName,
environment,
);
const handleClose = () => setOpen(false);
return (
<StyledDialog open={open} onClose={handleClose} fullWidth maxWidth='md'>
<DialogContent>
<TopRow>
<BackButton onClick={handleClose}>
<StyledBackIcon />
<BackText variant='body2' color='primary'>
Go back
</BackText>
</BackButton>
<IconButton
size='small'
onClick={handleClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
</TopRow>
{activeReleasePlan && (
<Alert severity='error' sx={{ mb: 1 }}>
This feature environment currently has{' '}
<strong>{activeReleasePlan.name}</strong> -{' '}
<strong>{activeReleasePlan.milestones[0].name}</strong>
{environmentEnabled ? ' running' : ' paused'}. Adding a
new release plan will replace the existing release plan.
</Alert>
)}
<div>
<ReleasePlan plan={planPreview} readonly />
</div>
{crProtected && (
<Typography sx={{ mt: 4 }}>
<strong>Adding</strong> release template{' '}
<strong>{template?.name}</strong> to{' '}
<strong>{featureName}</strong> in{' '}
<strong>{environment}</strong>.
</Typography>
)}
</DialogContent>
<StyledDialogActions>
<Button variant='contained' color='primary' onClick={onConfirm}>
{crProtected ? 'Add suggestion to draft' : 'Use template'}
</Button>
</StyledDialogActions>
</StyledDialog>
);
};

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

@ -8,7 +8,6 @@ import {
Box,
IconButton,
Dialog,
DialogContent,
DialogActions,
Button,
} from '@mui/material';
@ -16,43 +15,31 @@ import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import CloseIcon from '@mui/icons-material/Close';
import { useUiFlag } from 'hooks/useUiFlag.ts';
const StyledDialog = styled(Dialog)(({ theme }) => ({
'& .MuiDialog-paper': {
borderRadius: theme.shape.borderRadiusLarge,
maxWidth: theme.spacing(85),
width: theme.breakpoints.values.md,
},
}));
const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
padding: theme.spacing(2, 4, 4),
}));
const TopRow = styled(Box)(({ theme }) => ({
const StyledHeader = styled(Box)(({ theme }) => ({
display: 'flex',
justifyContent: 'space-between',
marginBottom: theme.spacing(2),
alignItems: 'center',
padding: theme.spacing(4, 4, 2, 4),
}));
const BackButton = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
const StyledSubHeader = styled(Box)(({ theme }) => ({
padding: theme.spacing(0, 3, 3, 3),
}));
const StyledBackIcon = styled(ArrowBackIcon)(({ theme }) => ({
marginRight: theme.spacing(1),
color: theme.palette.primary.main,
display: 'flex',
alignSelf: 'center',
}));
const BackText = styled(Typography)(({ theme }) => ({
fontWeight: theme.typography.fontWeightMedium,
display: 'flex',
alignItems: 'center',
lineHeight: 1,
const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
padding: theme.spacing(2, 4, 4),
}));
interface IReleasePlanAddDialogProps {
@ -82,7 +69,6 @@ export const ReleasePlanReviewDialog = ({
featureName,
environment,
);
const newStrategyModalEnabled = useUiFlag('newStrategyModal');
const activeReleasePlan = releasePlans[0];
@ -101,52 +87,50 @@ export const ReleasePlanReviewDialog = ({
return (
<StyledDialog open={open} onClose={handleClose} fullWidth maxWidth='md'>
<DialogContent>
<TopRow>
<BackButton onClick={handleClose}>
<StyledBackIcon />
<BackText variant='body2' color='primary'>
Go back
</BackText>
</BackButton>
<IconButton
size='small'
onClick={handleClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
</TopRow>
{activeReleasePlan && (
<Alert severity='error' sx={{ mb: 1 }}>
<StyledHeader>
<Typography variant='h2'>Add strategy</Typography>
<IconButton
size='small'
onClick={handleClose}
edge='end'
aria-label='close'
>
<CloseIcon fontSize='small' />
</IconButton>
</StyledHeader>
<StyledSubHeader>
<Button variant='text' onClick={handleClose}>
<StyledBackIcon />
Go back
</Button>
</StyledSubHeader>
{activeReleasePlan && (
<Box sx={{ px: 4, pb: 2 }}>
<Alert severity='error'>
This feature environment currently has{' '}
<strong>{activeReleasePlan.name}</strong> -{' '}
<strong>{activeReleasePlan.milestones[0].name}</strong>
{environmentEnabled ? ' running' : ' paused'}. Adding a
new release plan will replace the existing release plan.
</Alert>
)}
<div>
<ReleasePlan plan={planPreview} readonly />
</div>
{crProtected && (
<Typography sx={{ mt: 4 }}>
</Box>
)}
<Box sx={{ px: 2 }}>
<ReleasePlan plan={planPreview} readonly />
</Box>
{crProtected && (
<Box sx={{ px: 4, pt: 1 }}>
<Typography>
<strong>Adding</strong> release template{' '}
<strong>{template?.name}</strong> to{' '}
<strong>{featureName}</strong> in{' '}
<strong>{environment}</strong>.
</Typography>
)}
</DialogContent>
</Box>
)}
<StyledDialogActions>
<Button variant='contained' color='primary' onClick={onConfirm}>
{crProtected
? 'Add suggestion to draft'
: newStrategyModalEnabled
? 'Apply template'
: 'Use template'}
{crProtected ? 'Add suggestion to draft' : 'Apply template'}
</Button>
</StyledDialogActions>
</StyledDialog>