From 1a19d1e6fba22e2dc566172e8123314a2fba32fa Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Tue, 29 Nov 2022 14:52:01 +0100
Subject: [PATCH] Feat/update dialogues (#2559)

* Updates dialogues and strategy edit / creation to give a warning if
you have a change request in review
---
 .../ChangeRequestConfirmDialog.tsx            | 74 +++++++++++++------
 .../FeatureStrategyForm.tsx                   | 32 ++++++--
 .../hooks/useChangeRequestInReviewWarning.tsx | 29 ++++++++
 3 files changed, 106 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/hooks/useChangeRequestInReviewWarning.tsx

diff --git a/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx b/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx
index 54bc3bd4ca..8a3d338ebb 100644
--- a/frontend/src/component/changeRequest/ChangeRequestConfirmDialog/ChangeRequestConfirmDialog.tsx
+++ b/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
-        open={isOpen}
-        primaryButtonText="Add suggestion to draft"
-        secondaryButtonText="Cancel"
-        onClick={onConfirm}
-        onClose={onClose}
-        title="Request changes"
-        fullWidth
-    >
-        {showBanner && (
-            <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>
-);
+}) => {
+    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={primaryButtonText}
+            secondaryButtonText="Cancel"
+            onClick={onConfirm}
+            onClose={onClose}
+            title="Request changes"
+            fullWidth
+        >
+            <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>
+    );
+};
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index dc819102c5..6d562d6120 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/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)}
-                show={
-                    <FeatureStrategyChangeRequestAlert
-                        environment={environmentId}
+                condition={hasChangeRequestInReviewForEnvironment}
+                show={alert}
+                elseShow={
+                    <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"
diff --git a/frontend/src/hooks/useChangeRequestInReviewWarning.tsx b/frontend/src/hooks/useChangeRequestInReviewWarning.tsx
new file mode 100644
index 0000000000..ad9273d2de
--- /dev/null
+++ b/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>
+        ),
+    };
+};