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