diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx index acc379951f..7511884a7d 100644 --- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx +++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ReleasePlanChange.tsx @@ -1,5 +1,5 @@ import type React from 'react'; -import type { FC, ReactNode } from 'react'; +import { useRef, useState, type FC, type ReactNode } from 'react'; import { Box, styled, Typography } from '@mui/material'; import type { ChangeRequestState, @@ -13,6 +13,7 @@ import { TooltipLink } from 'component/common/TooltipLink/TooltipLink'; import EventDiff from 'component/events/EventDiff/EventDiff'; import { ReleasePlan } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlan'; import { ReleasePlanMilestone } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestone'; +import type { IReleasePlan } from 'interfaces/releasePlans'; export const ChangeItemWrapper = styled(Box)({ display: 'flex', @@ -55,26 +56,10 @@ const StyledCodeSection = styled('div')(({ theme }) => ({ const DeleteReleasePlan: FC<{ change: IChangeRequestDeleteReleasePlan; - environmentName: string; - featureName: string; - projectId: string; + currentReleasePlan?: IReleasePlan; changeRequestState: ChangeRequestState; actions?: ReactNode; -}> = ({ - change, - environmentName, - featureName, - projectId, - changeRequestState, - actions, -}) => { - const { releasePlans } = useReleasePlans( - projectId, - featureName, - environmentName, - ); - const currentReleasePlan = releasePlans[0]; - +}> = ({ change, currentReleasePlan, changeRequestState, actions }) => { const releasePlan = changeRequestState === 'Applied' && change.payload.snapshot ? change.payload.snapshot @@ -104,26 +89,10 @@ const DeleteReleasePlan: FC<{ const StartMilestone: FC<{ change: IChangeRequestStartMilestone; - environmentName: string; - featureName: string; - projectId: string; + currentReleasePlan?: IReleasePlan; changeRequestState: ChangeRequestState; actions?: ReactNode; -}> = ({ - change, - environmentName, - featureName, - projectId, - changeRequestState, - actions, -}) => { - const { releasePlans } = useReleasePlans( - projectId, - featureName, - environmentName, - ); - const currentReleasePlan = releasePlans[0]; - +}> = ({ change, currentReleasePlan, changeRequestState, actions }) => { const releasePlan = changeRequestState === 'Applied' && change.payload.snapshot ? change.payload.snapshot @@ -177,24 +146,107 @@ const StartMilestone: FC<{ const AddReleasePlan: FC<{ change: IChangeRequestAddReleasePlan; + currentReleasePlan?: IReleasePlan; environmentName: string; featureName: string; actions?: ReactNode; -}> = ({ change, environmentName, featureName, actions }) => { +}> = ({ + change, + currentReleasePlan, + environmentName, + featureName, + actions, +}) => { + const [currentTooltipOpen, setCurrentTooltipOpen] = useState(false); + const currentTooltipCloseTimeoutRef = useRef(); + const openCurrentTooltip = () => { + if (currentTooltipCloseTimeoutRef.current) { + clearTimeout(currentTooltipCloseTimeoutRef.current); + } + setCurrentTooltipOpen(true); + }; + const closeCurrentTooltip = () => { + currentTooltipCloseTimeoutRef.current = setTimeout(() => { + setCurrentTooltipOpen(false); + }, 100); + }; + const planPreview = useReleasePlanPreview( change.payload.templateId, featureName, environmentName, ); + const planPreviewDiff = { + ...planPreview, + discriminator: 'plan', + releasePlanTemplateId: change.payload.templateId, + }; + return ( <> - - + Adding release plan: - + {currentReleasePlan ? ( + + Replacing{' '} + + openCurrentTooltip() + } + onMouseLeave={() => + closeCurrentTooltip() + } + > + + + } + tooltipProps={{ + open: currentTooltipOpen, + maxWidth: 500, + maxHeight: 600, + }} + > + openCurrentTooltip()} + onMouseLeave={() => closeCurrentTooltip()} + > + current + + {' '} + release plan with: + + ) : ( + + + Adding release plan: + + )} {planPreview.name} + {currentReleasePlan && ( + + + + } + tooltipProps={{ + maxWidth: 500, + maxHeight: 600, + }} + > + View Diff + + )}
{actions}
@@ -221,11 +273,19 @@ export const ReleasePlanChange: FC<{ projectId, changeRequestState, }) => { + const { releasePlans } = useReleasePlans( + projectId, + featureName, + environmentName, + ); + const currentReleasePlan = releasePlans[0]; + return ( <> {change.action === 'addReleasePlan' && ( @@ -244,9 +302,7 @@ export const ReleasePlanChange: FC<{ {change.action === 'startMilestone' && ( diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddDialog.tsx index 96a097a2ca..a410cf9fd9 100644 --- a/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddDialog.tsx +++ b/frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddDialog.tsx @@ -4,6 +4,7 @@ import { ReleasePlan } from './ReleasePlan'; import { useReleasePlanPreview } from 'hooks/useReleasePlanPreview'; import { styled, Typography, Alert } from '@mui/material'; import { useFeature } from 'hooks/api/getters/useFeature/useFeature'; +import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans'; const StyledReleasePlanContainer = styled('div')(({ theme }) => ({ margin: theme.spacing(2, 0), @@ -30,6 +31,13 @@ export const ReleasePlanAddDialog = ({ 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, @@ -55,6 +63,15 @@ export const ReleasePlanAddDialog = ({ onClick={onConfirm} onClose={() => setOpen(false)} > + {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. + + )} {environmentEnabled ? ( This environment is currently enabled. @@ -70,8 +87,8 @@ export const ReleasePlanAddDialog = ({ This environment is currently disabled.

- The milestones will not start automatically after adding - the release plan. They will remain paused until the + Milestones will not start automatically after adding the + release plan. They will remain paused until the environment is enabled.