From f36b39b721f718fe53e43b1e79bd7a3affc284bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nuno=20G=C3=B3is?= Date: Mon, 22 Sep 2025 14:55:24 +0100 Subject: [PATCH] chore: update release template preview dialog (#10673) https://linear.app/unleash/issue/2-3888/update-the-release-templates-preview-dialog-to-match-the-new-designs Updates the release template preview dialog when using the new "add strategy" modal, so it better matches the new design. Used the legacy file pattern to leave the previous modal component unchanged. image image --- .../FeatureStrategyMenu.tsx | 57 +++++-- .../FeatureStrategyMenuCard.tsx | 2 +- .../LegacyReleasePlanReviewDialog.tsx | 148 ++++++++++++++++++ .../ReleasePlan/ReleasePlanReviewDialog.tsx | 94 +++++------ 4 files changed, 228 insertions(+), 73 deletions(-) create mode 100644 frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx index c63022e46f..3804571afa 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx @@ -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 = ({ )} {selectedTemplate && ( - { - setAddReleasePlanOpen(open); - if (!open) { - setIsStrategyMenuDialogOpen(true); - } - }} - onConfirm={() => { - addReleasePlan(selectedTemplate); - }} - template={selectedTemplate} - projectId={projectId} - featureName={featureId} - environment={environmentId} - crProtected={crProtected} - /> + <> + {newStrategyModalEnabled ? ( + { + setAddReleasePlanOpen(open); + if (!open) { + setIsStrategyMenuDialogOpen(true); + } + }} + onConfirm={() => { + addReleasePlan(selectedTemplate); + }} + template={selectedTemplate} + projectId={projectId} + featureName={featureId} + environment={environmentId} + crProtected={crProtected} + /> + ) : ( + { + setAddReleasePlanOpen(open); + if (!open) { + setIsStrategyMenuDialogOpen(true); + } + }} + onConfirm={() => { + addReleasePlan(selectedTemplate); + }} + template={selectedTemplate} + projectId={projectId} + featureName={featureId} + environment={environmentId} + crProtected={crProtected} + /> + )} + )} ); diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx index fac62b2ed7..8915e95e32 100644 --- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx +++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx @@ -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', diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx new file mode 100644 index 0000000000..56a5030de3 --- /dev/null +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx @@ -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>; + 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 ( + + + + + + + Go back + + + + + + + + {activeReleasePlan && ( + + This feature environment currently has{' '} + {activeReleasePlan.name} -{' '} + {activeReleasePlan.milestones[0].name} + {environmentEnabled ? ' running' : ' paused'}. Adding a + new release plan will replace the existing release plan. + + )} +
+ +
+ {crProtected && ( + + Adding release template{' '} + {template?.name} to{' '} + {featureName} in{' '} + {environment}. + + )} + + + + + + ); +}; diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx index 39b1df161a..5f738842e2 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanReviewDialog.tsx @@ -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 ( - - - - - - Go back - - - - - - - - {activeReleasePlan && ( - + + Add strategy + + + + + + + + {activeReleasePlan && ( + + This feature environment currently has{' '} {activeReleasePlan.name} -{' '} {activeReleasePlan.milestones[0].name} {environmentEnabled ? ' running' : ' paused'}. Adding a new release plan will replace the existing release plan. - )} -
- -
- {crProtected && ( - + + )} + + + + {crProtected && ( + + Adding release template{' '} {template?.name} to{' '} {featureName} in{' '} {environment}. - )} - + + )}