chore: update release template preview dialog

2025-09-24 17:51:14 +02:00 · 2025-09-22 13:32:57 +01:00 · 2025-09-22 13:32:57 +01:00 · f0826f5727
commit f0826f5727
parent a1691fead7
4 changed files with 228 additions and 73 deletions
--- 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,6 +289,8 @@ export const FeatureStrategyMenu = ({
                )}
            </Dialog>
            {selectedTemplate && (
+                <>
+                    {newStrategyModalEnabled ? (
                        <ReleasePlanReviewDialog
                            open={addReleasePlanOpen}
                            setOpen={(open) => {
@ -305,6 +308,26 @@ export const FeatureStrategyMenu = ({
                            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>
    );
--- 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',
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/LegacyReleasePlanReviewDialog.tsx
+++ 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<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>
+    );
+};
--- 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,14 +87,8 @@ 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>
+            <StyledHeader>
+                <Typography variant='h2'>Add strategy</Typography>
                <IconButton
                    size='small'
                    onClick={handleClose}
@ -117,36 +97,40 @@ export const ReleasePlanReviewDialog = ({
                >
                    <CloseIcon fontSize='small' />
                </IconButton>
-                </TopRow>
-
+            </StyledHeader>
+            <StyledSubHeader>
+                <Button variant='text' onClick={handleClose}>
+                    <StyledBackIcon />
+                    Go back
+                </Button>
+            </StyledSubHeader>
            {activeReleasePlan && (
-                    <Alert severity='error' sx={{ mb: 1 }}>
+                <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>
+                </Box>
            )}
-                <div>
+            <Box sx={{ px: 2 }}>
                <ReleasePlan plan={planPreview} readonly />
-                </div>
+            </Box>
            {crProtected && (
-                    <Typography sx={{ mt: 4 }}>
+                <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>
+                </Box>
            )}
-            </DialogContent>
            <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>