feat: implement dialogs for changerequest milestone handling and removing release plans (#9240)

Author: daveleek

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -11,8 +11,11 @@ import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrate
 import MoreVert from '@mui/icons-material/MoreVert';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useUiFlag } from 'hooks/useUiFlag';
-import { ReleasePlanAddChangeRequestDialog } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddChangeRequestDialog';
+import { ReleasePlanAddChangeRequestDialog } from 'component/feature/FeatureView/FeatureOverview/ReleasePlan/ChangeRequest/ReleasePlanAddChangeRequestDialog';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
+import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
+import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
+import useToast from 'hooks/useToast';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -57,6 +60,10 @@ export const FeatureStrategyMenu = ({
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
     const flagOverviewRedesignEnabled = useUiFlag('flagOverviewRedesign');
+    const { setToastData } = useToast();
+    const { addChange } = useChangeRequestApi();
+    const { refetch: refetchChangeRequests } =
+        usePendingChangeRequests(projectId);
 
     const onClose = () => {
         setAnchor(undefined);
@@ -75,6 +82,25 @@ export const FeatureStrategyMenu = ({
         setAnchor(event.currentTarget);
     };
 
+    const addReleasePlanToChangeRequest = async () => {
+        addChange(projectId, environmentId, {
+            feature: featureId,
+            action: 'addReleasePlan',
+            payload: {
+                templateId: templateForChangeRequestDialog?.id,
+            },
+        });
+
+        refetchChangeRequests();
+
+        setToastData({
+            type: 'success',
+            text: 'Added to draft',
+        });
+
+        setTemplateForChangeRequestDialog(undefined);
+    };
+
     const createStrategyPath = formatCreateStrategyPath(
         projectId,
         featureId,
@@ -188,8 +214,9 @@ export const FeatureStrategyMenu = ({
                 />
             </Popover>
             <ReleasePlanAddChangeRequestDialog
-                projectId={projectId}
+                onConfirm={addReleasePlanToChangeRequest}
                 onClosing={() => setTemplateForChangeRequestDialog(undefined)}
+                isOpen={Boolean(templateForChangeRequestDialog)}
                 featureId={featureId}
                 environmentId={environmentId}
                 releaseTemplate={templateForChangeRequestDialog}

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddChangeRequestDialog.tsx renamed to frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ChangeRequest/ReleasePlanAddChangeRequestDialog.tsx

@@ -1,60 +1,39 @@
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import useToast from 'hooks/useToast';
 import { styled, Button } from '@mui/material';
 import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
-import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 
 const StyledBoldSpan = styled('span')(({ theme }) => ({
     fontWeight: theme.typography.fontWeightBold,
 }));
 
 interface IReleasePlanAddChangeRequestDialogProps {
-    projectId: string;
     featureId: string;
     environmentId: string;
-    releaseTemplate: IReleasePlanTemplate | undefined;
+    releaseTemplate?: IReleasePlanTemplate;
+    isOpen: boolean;
+    onConfirm: () => Promise<void>;
     onClosing: () => void;
 }
 
 export const ReleasePlanAddChangeRequestDialog = ({
-    projectId,
     featureId,
     environmentId,
     releaseTemplate,
+    isOpen,
+    onConfirm,
     onClosing,
 }: IReleasePlanAddChangeRequestDialogProps) => {
-    const { setToastData } = useToast();
-    const { addChange } = useChangeRequestApi();
-
-    const addReleasePlanToChangeRequest = async () => {
-        addChange(projectId, environmentId, {
-            feature: featureId,
-            action: 'addReleasePlan',
-            payload: {
-                templateId: releaseTemplate?.id,
-            },
-        });
-
-        setToastData({
-            type: 'success',
-            text: 'Added to draft',
-        });
-        onClosing();
-    };
-
     return (
         <Dialogue
             title='Request changes'
-            open={Boolean(releaseTemplate)}
+            open={isOpen}
             secondaryButtonText='Cancel'
-            onClose={() => {
-                onClosing();
-            }}
+            onClose={onClosing}
             customButton={
                 <Button
                     color='primary'
                     variant='contained'
-                    onClick={addReleasePlanToChangeRequest}
+                    onClick={onConfirm}
                     autoFocus={true}
                 >
                     Add suggestion to draft

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ChangeRequest/RemoveReleasePlanChangeRequestDialog.tsx

@@ -0,0 +1,62 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import { styled, Button, Alert } from '@mui/material';
+import type { IReleasePlan } from 'interfaces/releasePlans';
+
+const StyledBoldSpan = styled('span')(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+}));
+
+interface IRemoveReleasePlanChangeRequestDialogProps {
+    featureId: string;
+    environmentId: string;
+    releasePlan?: IReleasePlan | undefined;
+    environmentActive: boolean;
+    isOpen: boolean;
+    onConfirm: () => Promise<void>;
+    onClosing: () => void;
+}
+
+export const RemoveReleasePlanChangeRequestDialog = ({
+    featureId,
+    environmentId,
+    releasePlan,
+    environmentActive,
+    isOpen,
+    onConfirm,
+    onClosing,
+}: IRemoveReleasePlanChangeRequestDialogProps) => {
+    return (
+        <Dialogue
+            title='Request changes'
+            open={isOpen}
+            secondaryButtonText='Cancel'
+            onClose={onClosing}
+            customButton={
+                <Button
+                    color='primary'
+                    variant='contained'
+                    onClick={onConfirm}
+                    autoFocus={true}
+                >
+                    Add suggestion to draft
+                </Button>
+            }
+        >
+            <>
+                {environmentActive && (
+                    <Alert severity='error' sx={{ mb: 2 }}>
+                        This release plan currently has one active milestone.
+                        Removing the release plan will change which users
+                        receive access to the feature.
+                    </Alert>
+                )}
+                <p>
+                    <StyledBoldSpan>Remove</StyledBoldSpan> release plan{' '}
+                    <StyledBoldSpan>{releasePlan?.name}</StyledBoldSpan> from{' '}
+                    <StyledBoldSpan>{featureId}</StyledBoldSpan> in{' '}
+                    <StyledBoldSpan>{environmentId}</StyledBoldSpan>
+                </p>
+            </>
+        </Dialogue>
+    );
+};

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ChangeRequest/StartMilestoneChangeRequestDialog.tsx

@@ -0,0 +1,57 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import { styled, Button } from '@mui/material';
+import type {
+    IReleasePlan,
+    IReleasePlanMilestone,
+} from 'interfaces/releasePlans';
+
+const StyledBoldSpan = styled('span')(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+}));
+
+interface IStartMilestoneChangeRequestDialogProps {
+    featureId: string;
+    environmentId: string;
+    releasePlan?: IReleasePlan | undefined;
+    milestone?: IReleasePlanMilestone | undefined;
+    isOpen: boolean;
+    onConfirm: () => Promise<void>;
+    onClosing: () => void;
+}
+
+export const StartMilestoneChangeRequestDialog = ({
+    featureId,
+    environmentId,
+    releasePlan,
+    milestone,
+    isOpen,
+    onConfirm,
+    onClosing,
+}: IStartMilestoneChangeRequestDialogProps) => {
+    return (
+        <Dialogue
+            title='Request changes'
+            open={isOpen}
+            secondaryButtonText='Cancel'
+            onClose={onClosing}
+            customButton={
+                <Button
+                    color='primary'
+                    variant='contained'
+                    onClick={onConfirm}
+                    autoFocus={true}
+                >
+                    Add suggestion to draft
+                </Button>
+            }
+        >
+            <p>
+                <StyledBoldSpan>Start</StyledBoldSpan> milestone{' '}
+                <StyledBoldSpan>{milestone?.name}</StyledBoldSpan> in release
+                plan <StyledBoldSpan>{releasePlan?.name}</StyledBoldSpan> for{' '}
+                <StyledBoldSpan>{featureId}</StyledBoldSpan> in{' '}
+                <StyledBoldSpan>{environmentId}</StyledBoldSpan>
+            </p>
+        </Dialogue>
+    );
+};