feat: show a dialog when adding a release plan to a change request enabled feature environment

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,33 +53,46 @@ interface IFeatureReleasePlanCardProps {
     featureId: string;
     environmentId: string;
     releasePlanTemplate: IReleasePlanTemplate;
+    setAddingTemplateId: (templateId: string) => void;
 }
 
 export const FeatureReleasePlanCard = ({
     projectId,
     featureId,
     environmentId,
     releasePlanTemplate,
+    setAddingTemplateId,
 }: 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 () => {
+    const addReleasePlan = async (e: React.MouseEvent) => {
         try {
-            await addReleasePlanToFeature(
-                featureId,
-                releasePlanTemplate.id,
-                projectId,
-                environmentId,
-            );
-            setToastData({
-                type: 'success',
-                text: 'Release plan added',
-            });
-            refetch();
+            if (
+                releasePlanChangeRequestsEnabled &&
+                isChangeRequestConfigured(environmentId)
+            ) {
+                setAddingTemplateId(releasePlanTemplate.id);
+            } else {
+                await addReleasePlanToFeature(
+                    featureId,
+                    releasePlanTemplate.id,
+                    projectId,
+                    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,7 @@ 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';
 
 interface IFeatureStrategyMenuProps {
     label: string;
@@ -50,6 +51,9 @@ export const FeatureStrategyMenu = ({
     const [anchor, setAnchor] = useState<Element>();
     const navigate = useNavigate();
     const { trackEvent } = usePlausibleTracker();
+    const [addingTemplateId, setAddingTemplateId] = useState<
+        string | undefined
+    >();
     const isPopoverOpen = Boolean(anchor);
     const popoverId = isPopoverOpen ? 'FeatureStrategyMenuPopover' : undefined;
     const flagOverviewRedesignEnabled = useUiFlag('flagOverviewRedesign');
@@ -115,6 +119,7 @@ export const FeatureStrategyMenu = ({
                         projectId={projectId}
                         featureId={featureId}
                         environmentId={environmentId}
+                        setAddingTemplateId={setAddingTemplateId}
                     />
                 </Popover>
             </StyledStrategyMenu>
@@ -175,8 +180,15 @@ export const FeatureStrategyMenu = ({
                     projectId={projectId}
                     featureId={featureId}
                     environmentId={environmentId}
+                    setAddingTemplateId={setAddingTemplateId}
                 />
             </Popover>
+            <ReleasePlanAddChangeRequestDialog
+                onClosing={() => setAddingTemplateId(undefined)}
+                featureId={featureId}
+                environmentId={environmentId}
+                releaseTemplateId={addingTemplateId}
+            />
         </StyledStrategyMenu>
     );
 };

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

@@ -9,6 +9,7 @@ interface IFeatureStrategyMenuCardsProps {
     projectId: string;
     featureId: string;
     environmentId: string;
+    setAddingTemplateId: (templateId: string) => void;
 }
 
 const StyledTypography = styled(Typography)(({ theme }) => ({
@@ -20,6 +21,7 @@ export const FeatureStrategyMenuCards = ({
     projectId,
     featureId,
     environmentId,
+    setAddingTemplateId,
 }: IFeatureStrategyMenuCardsProps) => {
     const { strategies } = useStrategies();
     const { templates } = useReleasePlanTemplates();
@@ -68,6 +70,7 @@ export const FeatureStrategyMenuCards = ({
                                     featureId={featureId}
                                     environmentId={environmentId}
                                     releasePlanTemplate={template}
+                                    setAddingTemplateId={setAddingTemplateId}
                                 />
                             </ListItem>
                         ))}

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

@@ -0,0 +1,62 @@
+import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import { useReleasePlanTemplate } from 'hooks/api/getters/useReleasePlanTemplates/useReleasePlanTemplate';
+import useToast from 'hooks/useToast';
+import { styled, Button } from '@mui/material';
+
+const StyledBoldSpan = styled('span')(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightBold,
+}));
+
+export const ReleasePlanAddChangeRequestDialog = ({
+    featureId,
+    environmentId,
+    releaseTemplateId,
+    onClosing,
+}: {
+    featureId: string;
+    environmentId: string;
+    releaseTemplateId: string | undefined;
+    onClosing: () => void;
+}) => {
+    if (!releaseTemplateId) {
+        return null;
+    }
+    const template = useReleasePlanTemplate(releaseTemplateId);
+    const { setToastData } = useToast();
+
+    const addReleasePlanToChangeRequest = async () => {
+        setToastData({
+            type: 'success',
+            text: 'Added to draft',
+        });
+        onClosing();
+    };
+
+    return (
+        <Dialogue
+            title='Request changes'
+            open={true}
+            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>{template?.template.name}</StyledBoldSpan> to{' '}
+                <StyledBoldSpan>{featureId}</StyledBoldSpan> in{' '}
+                <StyledBoldSpan>{environmentId}</StyledBoldSpan>
+            </p>
+        </Dialogue>
+    );
+};