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,
-}) => (
+}) => {
+    const projectId = useRequiredPathParam('projectId');
+    const { draft } = usePendingChangeRequests(projectId);
+    const { changeRequestInReviewOrApproved, alert } =
+        useChangeRequestInReviewWarning(draft);
+
+    const hasChangeRequestInReviewForEnvironment =
+        changeRequestInReviewOrApproved(environment || '');
+
+    const primaryButtonText = hasChangeRequestInReviewForEnvironment
+        ? 'Add to existing change request'
+        : 'Add suggestion to draft';
+
+    return (
         <Dialogue
             open={isOpen}
-        primaryButtonText="Add suggestion to draft"
+            primaryButtonText={primaryButtonText}
             secondaryButtonText="Cancel"
             onClick={onConfirm}
             onClose={onClose}
             title="Request changes"
             fullWidth
         >
-        {showBanner && (
+            <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.
+                        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 {
@@ -129,6 +143,10 @@ export const FeatureStrategyForm = ({
 
     return (
         <form className={styles.form} onSubmit={onSubmitWithValidation}>
+            <ConditionallyRender
+                condition={hasChangeRequestInReviewForEnvironment}
+                show={alert}
+                elseShow={
                     <ConditionallyRender
                         condition={Boolean(isChangeRequest)}
                         show={
@@ -137,6 +155,8 @@ export const FeatureStrategyForm = ({
                             />
                         }
                     />
+                }
+            />
             <FeatureStrategyEnabled
                 projectId={feature.project}
                 featureId={feature.name}
@@ -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>
+        ),
+    };
+};