Feat/update dialogues (#2559)

* Updates dialogues and strategy edit / creation to give a warning if
you have a change request in review

frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx

@@ -1,6 +1,10 @@
 import { FC } from 'react';
 import { Alert, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
+import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
+import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { useChangeRequestInReviewWarning } from 'hooks/useChangeRequestInReviewWarning';
 
 interface IChangeRequestDialogueProps {
     isOpen: boolean;
@@ -18,27 +22,49 @@ export const ChangeRequestDialogue: FC<IChangeRequestDialogueProps> = ({
     showBanner,
     environment,
     messageComponent,
-}) => (
+}) => {
-    <Dialogue
+    const projectId = useRequiredPathParam('projectId');
-        open={isOpen}
+    const { draft } = usePendingChangeRequests(projectId);
-        primaryButtonText="Add suggestion to draft"
+    const { changeRequestInReviewOrApproved, alert } =
-        secondaryButtonText="Cancel"
+        useChangeRequestInReviewWarning(draft);
-        onClick={onConfirm}
+
-        onClose={onClose}
+    const hasChangeRequestInReviewForEnvironment =
-        title="Request changes"
+        changeRequestInReviewOrApproved(environment || '');
-        fullWidth
+
-    >
+    const primaryButtonText = hasChangeRequestInReviewForEnvironment
-        {showBanner && (
+        ? 'Add to existing change request'
-            <Alert severity="info" sx={{ mb: 2 }}>
+        : 'Add suggestion to draft';
-                Change requests feature is enabled for {environment}. Your
+
-                changes needs to be approved before they will be live. All the
+    return (
-                changes you do now will be added into a draft that you can
+        <Dialogue
-                submit for review.
+            open={isOpen}
-            </Alert>
+            primaryButtonText={primaryButtonText}
-        )}
+            secondaryButtonText="Cancel"
-        <Typography variant="body2" color="text.secondary">
+            onClick={onConfirm}
-            Your suggestion:
+            onClose={onClose}
-        </Typography>
+            title="Request changes"
-        {messageComponent}
+            fullWidth
-    </Dialogue>
+        >
-);
+            <ConditionallyRender
+                condition={hasChangeRequestInReviewForEnvironment}
+                show={alert}
+            />
+            <ConditionallyRender
+                condition={Boolean(showBanner)}
+                show={
+                    <Alert severity="info" sx={{ mb: 2 }}>
+                        Change requests feature is enabled for {environment}.
+                        Your changes needs to be approved before they will be
+                        live. All the changes you do now will be added into a
+                        draft that you can submit for review.
+                    </Alert>
+                }
+            />
+
+            <Typography variant="body2" color="text.secondary">
+                Your suggestion:
+            </Typography>
+            {messageComponent}
+        </Dialogue>
+    );
+};

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

@@ -28,6 +28,8 @@ import {
     useFeatureStrategyProdGuard,
 } from '../FeatureStrategyProdGuard/FeatureStrategyProdGuard';
 import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
+import { useChangeRequestInReviewWarning } from 'hooks/useChangeRequestInReviewWarning';
+import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
 
 interface IFeatureStrategyFormProps {
     feature: IFeatureToggle;
@@ -64,6 +66,18 @@ export const FeatureStrategyForm = ({
     const enableProdGuard = useFeatureStrategyProdGuard(feature, environmentId);
     const { hasAccess } = useContext(AccessContext);
     const { strategyDefinition } = useStrategy(strategy?.name);
+
+    const { draft } = usePendingChangeRequests(feature.project);
+    const { changeRequestInReviewOrApproved, alert } =
+        useChangeRequestInReviewWarning(draft);
+
+    const hasChangeRequestInReviewForEnvironment =
+        changeRequestInReviewOrApproved(environmentId || '');
+
+    const changeRequestButtonText = hasChangeRequestInReviewForEnvironment
+        ? 'Add to existing change request'
+        : 'Add change to draft';
+
     const navigate = useNavigate();
 
     const {
@@ -130,10 +144,16 @@ export const FeatureStrategyForm = ({
     return (
         <form className={styles.form} onSubmit={onSubmitWithValidation}>
             <ConditionallyRender
-                condition={Boolean(isChangeRequest)}
+                condition={hasChangeRequestInReviewForEnvironment}
-                show={
+                show={alert}
-                    <FeatureStrategyChangeRequestAlert
+                elseShow={
-                        environment={environmentId}
+                    <ConditionallyRender
+                        condition={Boolean(isChangeRequest)}
+                        show={
+                            <FeatureStrategyChangeRequestAlert
+                                environment={environmentId}
+                            />
+                        }
                     />
                 }
             />
@@ -207,7 +227,9 @@ export const FeatureStrategyForm = ({
                     }
                     data-testid={STRATEGY_FORM_SUBMIT_ID}
                 >
-                    {isChangeRequest ? 'Add change to draft' : 'Save strategy'}
+                    {isChangeRequest
+                        ? changeRequestButtonText
+                        : 'Save strategy'}
                 </PermissionButton>
                 <Button
                     type="button"

frontend/src/hooks/useChangeRequestInReviewWarning.tsx

@@ -0,0 +1,29 @@
+import { Alert } from '@mui/material';
+import { oneOf } from 'utils/oneOf';
+import { IChangeRequest } from '../component/changeRequest/changeRequest.types';
+
+export const useChangeRequestInReviewWarning = (
+    draft: IChangeRequest[] | undefined
+) => {
+    const changeRequestInReviewOrApproved = (environment: string) => {
+        if (!draft) return false;
+
+        return draft.some(
+            changeRequest =>
+                changeRequest.environment === environment &&
+                oneOf(['In review', 'Approved'], changeRequest.state)
+        );
+    };
+
+    return {
+        changeRequestInReviewOrApproved,
+        alert: (
+            <Alert sx={{ margin: '1rem 0' }} severity="warning">
+                You currently have a change request in review for this
+                environment. Adding a new change will add the change to the
+                existing change request, and all existing approvals will be
+                reset. Are you sure you want to continue?
+            </Alert>
+        ),
+    };
+};