feat: show a dialog when adding a release plan to a change request enabled feature environment (#9139)

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

@@ -7,6 +7,8 @@ import { useReleasePlansApi } from 'hooks/api/actions/useReleasePlansApi/useRele
 import useToast from 'hooks/useToast';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { useReleasePlans } from 'hooks/api/getters/useReleasePlans/useReleasePlans';
+import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledIcon = styled('div')(({ theme }) => ({
     width: theme.spacing(4),
@@ -51,6 +53,7 @@ interface IFeatureReleasePlanCardProps {
     featureId: string;
     environmentId: string;
     releasePlanTemplate: IReleasePlanTemplate;
+    setTemplateForChangeRequestDialog: (template: IReleasePlanTemplate) => void;
 }
 
 export const FeatureReleasePlanCard = ({
@@ -58,26 +61,38 @@ export const FeatureReleasePlanCard = ({
     featureId,
     environmentId,
     releasePlanTemplate,
+    setTemplateForChangeRequestDialog,
 }: IFeatureReleasePlanCardProps) => {
     const Icon = getFeatureStrategyIcon('releasePlanTemplate');
     const { trackEvent } = usePlausibleTracker();
     const { refetch } = useReleasePlans(projectId, featureId, environmentId);
     const { addReleasePlanToFeature } = useReleasePlansApi();
     const { setToastApiError, setToastData } = useToast();
+    const { isChangeRequestConfigured } = useChangeRequestsEnabled(projectId);
+    const releasePlanChangeRequestsEnabled = useUiFlag(
+        'releasePlanChangeRequests',
+    );
 
     const addReleasePlan = async () => {
         try {
-            await addReleasePlanToFeature(
+            if (
-                featureId,
+                releasePlanChangeRequestsEnabled &&
-                releasePlanTemplate.id,
+                isChangeRequestConfigured(environmentId)
-                projectId,
+            ) {
-                environmentId,
+                setTemplateForChangeRequestDialog(releasePlanTemplate);
-            );
+            } else {
-            setToastData({
+                await addReleasePlanToFeature(
-                type: 'success',
+                    featureId,
-                text: 'Release plan added',
+                    releasePlanTemplate.id,
-            });
+                    projectId,
-            refetch();
+                    environmentId,
+                );
+                setToastData({
+                    type: 'success',
+                    text: 'Release plan added',
+                });
+                refetch();
+            }
         } catch (error: unknown) {
             setToastApiError(formatUnknownError(error));
         }

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

@@ -11,6 +11,8 @@ 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 type { IReleasePlanTemplate } from 'interfaces/releasePlans';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -50,6 +52,8 @@ export const FeatureStrategyMenu = ({
     const [anchor, setAnchor] = useState<Element>();
     const navigate = useNavigate();
     const { trackEvent } = usePlausibleTracker();
+    const [templateForChangeRequestDialog, setTemplateForChangeRequestDialog] =
+        useState<IReleasePlanTemplate | undefined>();
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
     const flagOverviewRedesignEnabled = useUiFlag('flagOverviewRedesign');
@@ -115,6 +119,9 @@ export const FeatureStrategyMenu = ({
                         projectId={projectId}
                         featureId={featureId}
                         environmentId={environmentId}
+                        setTemplateForChangeRequestDialog={
+                            setTemplateForChangeRequestDialog
+                        }
                     />
                 </Popover>
             </StyledStrategyMenu>
@@ -175,8 +182,17 @@ export const FeatureStrategyMenu = ({
                     projectId={projectId}
                     featureId={featureId}
                     environmentId={environmentId}
+                    setTemplateForChangeRequestDialog={
+                        setTemplateForChangeRequestDialog
+                    }
                 />
             </Popover>
+            <ReleasePlanAddChangeRequestDialog
+                onClosing={() => setTemplateForChangeRequestDialog(undefined)}
+                featureId={featureId}
+                environmentId={environmentId}
+                releaseTemplate={templateForChangeRequestDialog}
+            />
         </StyledStrategyMenu>
     );
 };

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

@@ -4,11 +4,13 @@ import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrat
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useReleasePlanTemplates } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplates';
 import { FeatureReleasePlanCard } from '../FeatureReleasePlanCard/FeatureReleasePlanCard';
+import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
 
 interface IFeatureStrategyMenuCardsProps {
     projectId: string;
     featureId: string;
     environmentId: string;
+    setTemplateForChangeRequestDialog: (template: IReleasePlanTemplate) => void;
 }
 
 const StyledTypography = styled(Typography)(({ theme }) => ({
@@ -20,6 +22,7 @@ export const FeatureStrategyMenuCards = ({
     projectId,
     featureId,
     environmentId,
+    setTemplateForChangeRequestDialog,
 }: IFeatureStrategyMenuCardsProps) => {
     const { strategies } = useStrategies();
     const { templates } = useReleasePlanTemplates();
@@ -68,6 +71,9 @@ export const FeatureStrategyMenuCards = ({
                                     featureId={featureId}
                                     environmentId={environmentId}
                                     releasePlanTemplate={template}
+                                    setTemplateForChangeRequestDialog={
+                                        setTemplateForChangeRequestDialog
+                                    }
                                 />
                             </ListItem>
                         ))}

frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanAddChangeRequestDialog.tsx

@@ -0,0 +1,60 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import useToast from 'hooks/useToast';
+import { styled, Button } from '@mui/material';
+import type { IReleasePlanTemplate } from 'interfaces/releasePlans';
+
+const StyledBoldSpan = styled('span')(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+}));
+
+interface IReleasePlanAddChangeRequestDialogProps {
+    featureId: string;
+    environmentId: string;
+    releaseTemplate: IReleasePlanTemplate | undefined;
+    onClosing: () => void;
+}
+
+export const ReleasePlanAddChangeRequestDialog = ({
+    featureId,
+    environmentId,
+    releaseTemplate,
+    onClosing,
+}: IReleasePlanAddChangeRequestDialogProps) => {
+    const { setToastData } = useToast();
+
+    const addReleasePlanToChangeRequest = async () => {
+        setToastData({
+            type: 'success',
+            text: 'Added to draft',
+        });
+        onClosing();
+    };
+
+    return (
+        <Dialogue
+            title='Request changes'
+            open={Boolean(releaseTemplate)}
+            secondaryButtonText='Cancel'
+            onClose={() => {
+                onClosing();
+            }}
+            customButton={
+                <Button
+                    color='primary'
+                    variant='contained'
+                    onClick={addReleasePlanToChangeRequest}
+                    autoFocus={true}
+                >
+                    Add suggestion to draft
+                </Button>
+            }
+        >
+            <p>
+                <StyledBoldSpan>Add</StyledBoldSpan> release template{' '}
+                <StyledBoldSpan>{releaseTemplate?.name}</StyledBoldSpan> to{' '}
+                <StyledBoldSpan>{featureId}</StyledBoldSpan> in{' '}
+                <StyledBoldSpan>{environmentId}</StyledBoldSpan>
+            </p>
+        </Dialogue>
+    );
+};