chore: update release template preview dialog

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 = ({
                 )}
             </Dialog>
             {selectedTemplate && (
-                <ReleasePlanReviewDialog
+                <>
-                    open={addReleasePlanOpen}
+                    {newStrategyModalEnabled ? (
-                    setOpen={(open) => {
+                        <ReleasePlanReviewDialog
-                        setAddReleasePlanOpen(open);
+                            open={addReleasePlanOpen}
-                        if (!open) {
+                            setOpen={(open) => {
-                            setIsStrategyMenuDialogOpen(true);
+                                setAddReleasePlanOpen(open);
-                        }
+                                if (!open) {
-                    }}
+                                    setIsStrategyMenuDialogOpen(true);
-                    onConfirm={() => {
+                                }
-                        addReleasePlan(selectedTemplate);
+                            }}
-                    }}
+                            onConfirm={() => {
-                    template={selectedTemplate}
+                                addReleasePlan(selectedTemplate);
-                    projectId={projectId}
+                            }}
-                    featureName={featureId}
+                            template={selectedTemplate}
-                    environment={environmentId}
+                            projectId={projectId}
-                    crProtected={crProtected}
+                            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>
     );

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',

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>
+    );
+};

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 }) => ({
+const StyledHeader = styled(Box)(({ theme }) => ({
-    padding: theme.spacing(2, 4, 4),
-}));
-
-const TopRow = 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 }) => ({
+const StyledSubHeader = styled(Box)(({ theme }) => ({
-    display: 'flex',
+    padding: theme.spacing(0, 3, 3, 3),
-    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 }) => ({
+const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
-    fontWeight: theme.typography.fontWeightMedium,
+    padding: theme.spacing(2, 4, 4),
-    display: 'flex',
-    alignItems: 'center',
-    lineHeight: 1,
 }));
 
 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>
+            <StyledHeader>
-                <TopRow>
+                <Typography variant='h2'>Add strategy</Typography>
-                    <BackButton onClick={handleClose}>
+                <IconButton
-                        <StyledBackIcon />
+                    size='small'
-                        <BackText variant='body2' color='primary'>
+                    onClick={handleClose}
-                            Go back
+                    edge='end'
-                        </BackText>
+                    aria-label='close'
-                    </BackButton>
+                >
-                    <IconButton
+                    <CloseIcon fontSize='small' />
-                        size='small'
+                </IconButton>
-                        onClick={handleClose}
+            </StyledHeader>
-                        edge='end'
+            <StyledSubHeader>
-                        aria-label='close'
+                <Button variant='text' onClick={handleClose}>
-                    >
+                    <StyledBackIcon />
-                        <CloseIcon fontSize='small' />
+                    Go back
-                    </IconButton>
+                </Button>
-                </TopRow>
+            </StyledSubHeader>
-
+            {activeReleasePlan && (
-                {activeReleasePlan && (
+                <Box sx={{ px: 4, pb: 2 }}>
-                    <Alert severity='error' sx={{ mb: 1 }}>
+                    <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>
+            )}
-                    <ReleasePlan plan={planPreview} readonly />
+            <Box sx={{ px: 2 }}>
-                </div>
+                <ReleasePlan plan={planPreview} readonly />
-                {crProtected && (
+            </Box>
-                    <Typography sx={{ mt: 4 }}>
+            {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>
-                )}
+                </Box>
-            </DialogContent>
+            )}
             <StyledDialogActions>
                 <Button variant='contained' color='primary' onClick={onConfirm}>
-                    {crProtected
+                    {crProtected ? 'Add suggestion to draft' : 'Apply template'}
-                        ? 'Add suggestion to draft'
-                        : newStrategyModalEnabled
-                          ? 'Apply template'
-                          : 'Use template'}
                 </Button>
             </StyledDialogActions>
         </StyledDialog>