Warning modal for creating duplicate test plan runs (w3c#901)

* Add error dialog modal * Add conditional for the warning dialog * Fix failing tests * Revert change to smokeTest * Add suggestions from code review * Fix unnecessary interpolation * Fix unnecessary interpolation * Undo conflictingReportsExists move * Add optional chaining
bocoup · Feb 15, 2024 · 7ff07b0 · 7ff07b0
1 parent 1826fb2
commit 7ff07b0
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 15 deletions.
diff --git a/client/components/AddTestToQueueWithConfirmation/index.jsx b/client/components/AddTestToQueueWithConfirmation/index.jsx
@@ -12,7 +12,7 @@ import {
 import './AddTestToQueueWithConfirmation.css';
 import {
     SCHEDULE_COLLECTION_JOB_MUTATION,
-    TEST_PLAN_RUN_REPORTS_INITIATED_BY_AUTOMATION
+    EXISTING_TEST_PLAN_REPORTS
 } from './queries';
 
 function AddTestToQueueWithConfirmation({
@@ -23,11 +23,12 @@ function AddTestToQueueWithConfirmation({
     buttonText = 'Add to Test Queue',
     triggerUpdate = () => {}
 }) {
+    const [errorMessage, setErrorMessage] = useState(false);
     const [showConfirmation, setShowConfirmation] = useState(false);
     const [addTestPlanReport] = useMutation(ADD_TEST_QUEUE_MUTATION);
     const [scheduleCollection] = useMutation(SCHEDULE_COLLECTION_JOB_MUTATION);
-    const { data: testPlanReportsInitiatedByAutomation } = useQuery(
-        TEST_PLAN_RUN_REPORTS_INITIATED_BY_AUTOMATION,
+    const { data: existingTestPlanReportsData } = useQuery(
+        EXISTING_TEST_PLAN_REPORTS,
         {
             variables: {
                 testPlanVersionId: testPlanVersion?.id
@@ -37,6 +38,17 @@ function AddTestToQueueWithConfirmation({
         }
     );
 
+    const existingTestPlanReports =
+        existingTestPlanReportsData?.testPlanVersion.testPlanReports;
+
+    const conflictingReportExists = existingTestPlanReports?.some(report => {
+        return (
+            report.at.id === at?.id &&
+            report.browser.id === browser?.id &&
+            report.isFinal
+        );
+    });
+
     const { triggerLoad, loadingMessage } = useTriggerLoad();
     const buttonRef = useRef();
 
@@ -47,12 +59,12 @@ function AddTestToQueueWithConfirmation({
 
     const alreadyHasBotInTestPlanReport = useMemo(
         () =>
-            testPlanReportsInitiatedByAutomation?.testPlanVersion.testPlanReports.some(
+            existingTestPlanReports?.some(
                 tpr =>
                     tpr.markedFinalAt === null &&
                     tpr.draftTestPlanRuns.some(run => run.initiatedByAutomation)
             ),
-        [testPlanReportsInitiatedByAutomation?.testPlanVersion.testPlanReports]
+        [existingTestPlanReports]
     );
 
     const feedbackModalTitle =
@@ -110,7 +122,7 @@ function AddTestToQueueWithConfirmation({
         }
         return (
             <BasicModal
-                dialogClassName={'add-test-to-queue-confirmation'}
+                dialogClassName="add-test-to-queue-confirmation"
                 show={showConfirmation}
                 title={feedbackModalTitle}
                 content={feedbackModalContent}
@@ -129,6 +141,40 @@ function AddTestToQueueWithConfirmation({
         );
     };
 
+    const renderErrorDialog = () => {
+        return (
+            <BasicModal
+                show={errorMessage}
+                title="Conflicting Report Found"
+                content={
+                    'The report could not be created because an existing ' +
+                    'report was found on the reports page with the same AT, ' +
+                    'browser and test plan version. Would you like to return ' +
+                    'the existing report back to the test queue?'
+                }
+                closeLabel="Cancel"
+                staticBackdrop={true}
+                actions={[
+                    {
+                        label: 'Proceed',
+                        onClick: async () => {
+                            setErrorMessage(false);
+                            if (hasAutomationSupport) {
+                                setShowConfirmation(true);
+                            } else {
+                                await addTestToQueue();
+                            }
+                        }
+                    }
+                ]}
+                useOnHide
+                handleClose={async () => {
+                    setErrorMessage(false);
+                }}
+            />
+        );
+    };
+
     const addTestToQueue = async () => {
         let tpr;
         await triggerLoad(async () => {
@@ -166,17 +212,22 @@ function AddTestToQueueWithConfirmation({
                 disabled={disabled}
                 variant="secondary"
                 onClick={async () => {
-                    if (hasAutomationSupport) {
-                        setShowConfirmation(true);
+                    if (conflictingReportExists) {
+                        setErrorMessage(true);
                     } else {
-                        await addTestToQueue();
+                        if (hasAutomationSupport) {
+                            setShowConfirmation(true);
+                        } else {
+                            await addTestToQueue();
+                        }
                     }
                 }}
                 className="w-auto"
                 data-testid="add-button"
             >
                 {buttonText}
             </Button>
+            {renderErrorDialog()}
             {renderConfirmation()}
         </LoadingStatus>
     );

diff --git a/client/components/AddTestToQueueWithConfirmation/queries.js b/client/components/AddTestToQueueWithConfirmation/queries.js
@@ -9,16 +9,23 @@ export const SCHEDULE_COLLECTION_JOB_MUTATION = gql`
     }
 `;
 
-export const TEST_PLAN_RUN_REPORTS_INITIATED_BY_AUTOMATION = gql`
-    query DraftTestPlanRunsTestPlanReports($testPlanVersionId: ID!) {
+export const EXISTING_TEST_PLAN_REPORTS = gql`
+    query ExistingTestPlanReports($testPlanVersionId: ID!) {
         testPlanVersion(id: $testPlanVersionId) {
             id
             testPlanReports {
                 id
                 markedFinalAt
+                isFinal
                 draftTestPlanRuns {
                     initiatedByAutomation
                 }
+                at {
+                    id
+                }
+                browser {
+                    id
+                }
             }
         }
     }

diff --git a/client/tests/AddTestToQueueWithConfirmation.test.jsx b/client/tests/AddTestToQueueWithConfirmation.test.jsx
@@ -32,6 +32,13 @@ const mockTestPlanReportsQueryResult = {
                     id: 'testPlanRunId',
                     isInitiatedByAutomation: false,
                     markedFinalAt: null
+                },
+                isFinal: false,
+                at: {
+                    id: '1'
+                },
+                browser: {
+                    id: '2'
                 }
             }
         ]

diff --git a/client/tests/__mocks__/GraphQLMocks/TestPlanReportStatusDialogMock.js b/client/tests/__mocks__/GraphQLMocks/TestPlanReportStatusDialogMock.js
@@ -399,8 +399,15 @@ export default (
                         {
                             id: '1',
                             markedFinalAt: '2021-01-01T00:00:00.000Z',
+                            isFinal: true,
                             draftTestPlanRuns: {
                                 initiatedByAutomation: true
+                            },
+                            at: {
+                                id: '1'
+                            },
+                            browser: {
+                                id: '2'
                             }
                         }
                     ]

diff --git a/client/tests/__mocks__/GraphQLMocks/TestQueuePageBaseMock.js b/client/tests/__mocks__/GraphQLMocks/TestQueuePageBaseMock.js
@@ -86,8 +86,15 @@ export default (
                         {
                             id: '1',
                             markedFinalAt: '2021-01-01T00:00:00.000Z',
+                            isFinal: true,
                             draftTestPlanRuns: {
                                 initiatedByAutomation: true
+                            },
+                            at: {
+                                id: '1'
+                            },
+                            browser: {
+                                id: '2'
                             }
                         }
                     ]

diff --git a/client/tests/__mocks__/GraphQLMocks/index.js b/client/tests/__mocks__/GraphQLMocks/index.js
@@ -1,6 +1,8 @@
 import { TEST_QUEUE_PAGE_QUERY } from '@components/TestQueue/queries';
 import { DATA_MANAGEMENT_PAGE_QUERY } from '@components/DataManagement/queries';
 import { TEST_PLAN_REPORT_STATUS_DIALOG_QUERY } from '@components/TestPlanReportStatusDialog/queries';
+import { TEST_PLAN_REPORT_AT_BROWSER_QUERY } from '@components/TestQueue/queries';
+import { EXISTING_TEST_PLAN_REPORTS } from '@components/AddTestToQueueWithConfirmation/queries';
 import { ME_QUERY } from '@components/App/queries';
 
 import TestQueuePageAdminNotPopulatedMock from './TestQueuePageAdminNotPopulatedMock';
@@ -10,8 +12,6 @@ import TestQueuePageTesterPopulatedMock from './TestQueuePageTesterPopulatedMock
 import DataManagementPagePopulatedMock from './DataManagementPagePopulatedMock';
 import TestPlanReportStatusDialogMock from './TestPlanReportStatusDialogMock';
 import TestQueuePageBaseMock from './TestQueuePageBaseMock';
-import { TEST_PLAN_REPORT_AT_BROWSER_QUERY } from '../../../components/TestQueue/queries';
-import { TEST_PLAN_RUN_REPORTS_INITIATED_BY_AUTOMATION } from '../../../components/AddTestToQueueWithConfirmation/queries';
 
 export const TEST_QUEUE_PAGE_ADMIN_NOT_POPULATED_MOCK_DATA =
     TestQueuePageAdminNotPopulatedMock(TEST_QUEUE_PAGE_QUERY);
@@ -27,7 +27,7 @@ export const TEST_QUEUE_PAGE_TESTER_POPULATED_MOCK_DATA =
 
 export const TEST_QUEUE_PAGE_BASE_MOCK_DATA = TestQueuePageBaseMock(
     TEST_PLAN_REPORT_AT_BROWSER_QUERY,
-    TEST_PLAN_RUN_REPORTS_INITIATED_BY_AUTOMATION
+    EXISTING_TEST_PLAN_REPORTS
 );
 
 export const DATA_MANAGEMENT_PAGE_POPULATED_MOCK_DATA =
@@ -41,5 +41,5 @@ export const TEST_PLAN_REPORT_STATUS_DIALOG_MOCK_DATA =
     TestPlanReportStatusDialogMock(
         ME_QUERY,
         TEST_PLAN_REPORT_STATUS_DIALOG_QUERY,
-        TEST_PLAN_RUN_REPORTS_INITIATED_BY_AUTOMATION
+        EXISTING_TEST_PLAN_REPORTS
     );