fix: page query response time reduction and server load improvements (#1592)

* Remove rest results from test queue query

* server side caching for test plans

* fix: remove unneeded draftTestPlanRuns from query

* Delayed report rerun load with caching

* Unnecessary fetch in test plan report status dialog

* cache-first TestQueue

* Aggressive Apollo caching

* code splitting, lazy loading, don't query tests when not needed

* remove query of User.at in TestQueue

* do not query collection job for percent poll

* don't query testPlanReportStatuses, TestQueue

* Cache first TestQueue

* webpack prefetching

* report level fetch/refetch, TestQueue

* report level fetch/refetch, TestQueue

* Cleanup, lint

* Delay git property load until disclosure open

* Handle cache resolution on report rows

* Better total scenario count resolver

* Update snapshots

* Delay fetching full testPlanReports

* Use dataloader, honor attributes in test plan resolver

* Fix TestQueue.test

* Adjust assigntesterdropdown

* Fix on hold

* Refetch report rows on assign tester through ManageBotRunDialog, graphql test update

* Wait for refetch in TestRun e2e test

* Update snapshots

* More waits for secondary load in the TestRun.e2e

* Refetch collection job on cancel

* Handle delayed row fetch in conditional render for feature table

* Don't use eval click in TestRun.e2e.

* TestRun.e2e don't attempt click if el not found

* ReportRerun, wait for table with tab loads

* Update webpack.prod.js

* Correct version sorting

* Add atversion to row query

* refetch row after delay on start bot run in report

* Update snaps

* Update snapshots

* Handle reload at subroute with Tab better

* Fix tests after merge, update snaps

* Update snapshots

Author: stalgiag

client/components/AddTestToQueueWithConfirmation/index.jsx

@@ -2,7 +2,7 @@ import React, { useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-bootstrap';
 import BasicModal from '../common/BasicModal';
-import { useMutation, useQuery } from '@apollo/client';
+import { useMutation, useQuery, useApolloClient } from '@apollo/client';
 import { LoadingStatus, useTriggerLoad } from '../common/LoadingStatus';
 import {
   getBotUsernameFromAtBrowser,
@@ -14,7 +14,10 @@ import {
   EXISTING_TEST_PLAN_REPORTS,
   ADD_TEST_QUEUE_MUTATION
 } from './queries';
-import { TEST_QUEUE_PAGE_QUERY } from '../TestQueue/queries';
+import {
+  TEST_QUEUE_PAGE_QUERY,
+  TEST_QUEUE_EXPANDED_ROW_QUERY
+} from '../TestQueue/queries';
 import { TEST_PLAN_REPORT_STATUS_DIALOG_QUERY } from '../TestPlanReportStatusDialog/queries';
 import { ME_QUERY } from '../App/queries';
 
@@ -28,6 +31,7 @@ function AddTestToQueueWithConfirmation({
   buttonText = 'Add to Test Queue',
   triggerUpdate = () => {}
 }) {
+  const client = useApolloClient();
   const [showPreserveReportDataMessage, setShowPreserveReportDataMessage] =
     useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
@@ -61,6 +65,7 @@ function AddTestToQueueWithConfirmation({
         directory: testPlanVersion?.testPlan?.directory
       },
       fetchPolicy: 'cache-and-network',
+      nextFetchPolicy: 'cache-first',
       skip: !testPlanVersion?.id
     }
   );
@@ -296,8 +301,30 @@ function AddTestToQueueWithConfirmation({
       await scheduleCollection({
         variables: {
           testPlanReportId: testPlanReport.id
-        }
+        },
+        refetchQueries: [
+          ME_QUERY,
+          EXISTING_TEST_PLAN_REPORTS,
+          TEST_QUEUE_PAGE_QUERY,
+          TEST_PLAN_REPORT_STATUS_DIALOG_QUERY
+        ],
+        awaitRefetchQueries: true
       });
+
+      // Wait a moment for React to re-render and mount the new row component
+      await new Promise(resolve => setTimeout(resolve, 100));
+
+      // Manually fetch the expanded row query to update the cache
+      // This ensures the run appears immediately
+      try {
+        await client.query({
+          query: TEST_QUEUE_EXPANDED_ROW_QUERY,
+          variables: { testPlanReportId: testPlanReport.id },
+          fetchPolicy: 'network-only'
+        });
+      } catch (error) {
+        // If the query fails, that's okay - it will load when the component mounts
+      }
     }, 'Scheduling Collection Job');
     setShowConfirmation(true);
   };

client/components/BotRunTestStatusList/index.js

@@ -33,6 +33,7 @@ const BotRunTestStatusList = ({ testPlanReportId }) => {
   } = useQuery(TEST_PLAN_RUNS_TEST_RESULTS_QUERY, {
     variables: { testPlanReportId },
     fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first',
     pollInterval
   });
 

client/components/CandidateReview/index.jsx

@@ -7,10 +7,14 @@ import { ME_QUERY } from '../App/queries';
 
 const CandidateReview = () => {
   const { loading, data, error } = useQuery(CANDIDATE_REVIEW_PAGE_QUERY, {
-    fetchPolicy: 'cache-and-network'
+    fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first'
   });
 
-  const { data: meData } = useQuery(ME_QUERY);
+  const { data: meData } = useQuery(ME_QUERY, {
+    fetchPolicy: 'cache-and-network',
+    nextFetchPolicy: 'cache-first'
+  });
   const { me } = meData;
 
   if (error) {

client/components/DataManagement/index.jsx

@@ -24,7 +24,10 @@ import styles from './DataManagement.module.css';
 const DataManagement = () => {
   const { loading, data, error, refetch } = useQuery(
     DATA_MANAGEMENT_PAGE_QUERY,
-    { fetchPolicy: 'cache-and-network' }
+    {
+      fetchPolicy: 'cache-and-network',
+      nextFetchPolicy: 'cache-first'
+    }
   );
 
   const [pageReady, setPageReady] = useState(false);

client/components/DataManagement/queries.js

@@ -3,25 +3,21 @@ import {
   AT_FIELDS,
   AT_VERSION_FIELDS,
   BROWSER_FIELDS,
-  BROWSER_VERSION_FIELDS,
   ISSUE_FIELDS,
   ME_FIELDS,
   TEST_PLAN_FIELDS,
   TEST_PLAN_REPORT_FIELDS,
-  TEST_PLAN_VERSION_FIELDS,
-  TEST_RESULT_FIELDS
+  TEST_PLAN_VERSION_FIELDS
 } from '@components/common/fragments';
 
 export const DATA_MANAGEMENT_PAGE_QUERY = gql`
   ${AT_FIELDS}
   ${AT_VERSION_FIELDS}
   ${BROWSER_FIELDS}
-  ${BROWSER_VERSION_FIELDS}
   ${ISSUE_FIELDS()}
   ${ME_FIELDS}
   ${TEST_PLAN_FIELDS}
   ${TEST_PLAN_REPORT_FIELDS}
-  ${TEST_RESULT_FIELDS}
   query DataManagementPage {
     me {
       ...MeFields
@@ -87,26 +83,6 @@ export const DATA_MANAGEMENT_PAGE_QUERY = gql`
         browser {
           ...BrowserFields
         }
-        draftTestPlanRuns {
-          tester {
-            username
-          }
-          testPlanReport {
-            id
-          }
-          testResults {
-            ...TestResultFields
-            test {
-              id
-            }
-            atVersion {
-              ...AtVersionFields
-            }
-            browserVersion {
-              ...BrowserVersionFields
-            }
-          }
-        }
       }
     }
   }

client/components/GraphQLProvider/GraphQLProvider.jsx

@@ -9,8 +9,6 @@ import {
   concat
 } from '@apollo/client';
 
-// Dynamically set GraphQL request headers
-// See https://www.apollographql.com/docs/react/networking/advanced-http-networking#customizing-request-logic
 const headerMiddleware = new ApolloLink((operation, forward) => {
   const currentTransactionId = sessionStorage.getItem('currentTransactionId');
   if (currentTransactionId) {
@@ -33,25 +31,60 @@ const client = new ApolloClient({
         fields: {
           me: { merge: true },
           testPlanVersion: { merge: true },
-          testPlanVersions: { merge: false },
           testPlanReport: { merge: true },
-          testPlanReports: { merge: false },
           collectionJobByTestPlanRunId: {
             merge(existing, incoming) {
               return { ...existing, ...incoming };
             }
           }
         }
       },
-      Mutation: {
-        fields: {
-          testPlanReport: { merge: false },
-          testPlanRun: { merge: false },
-          testPlanVersion: { merge: false }
-        }
+      At: {
+        keyFields: ['id']
+      },
+      AtVersion: {
+        keyFields: ['id']
+      },
+      Browser: {
+        keyFields: ['id']
+      },
+      BrowserVersion: {
+        keyFields: ['id']
+      },
+      TestPlan: {
+        keyFields: ['id']
+      },
+      TestPlanVersion: {
+        keyFields: ['id']
+      },
+      TestPlanReport: {
+        keyFields: ['id']
+      },
+      TestPlanRun: {
+        keyFields: ['id']
+      },
+      TestResult: {
+        keyFields: ['id']
+      },
+      CollectionJob: {
+        keyFields: ['id']
+      },
+      User: {
+        keyFields: ['id']
+      },
+      AriaHtmlFeaturesMetrics: {
+        keyFields: false
       }
     }
-  })
+  }),
+  defaultOptions: {
+    query: {
+      errorPolicy: 'all'
+    },
+    watchQuery: {
+      errorPolicy: 'all'
+    }
+  }
 });
 
 const resetCache = async () => {

client/components/ManageBotRunDialog/StartBotRunButton/index.jsx

@@ -8,7 +8,10 @@ import useConfirmationModal from '../../../hooks/useConfirmationModal';
 import { useTriggerLoad } from '../../common/LoadingStatus';
 import BasicModal from '../../common/BasicModal';
 import { SCHEDULE_COLLECTION_JOB_MUTATION } from '../../AddTestToQueueWithConfirmation/queries';
-import { TEST_QUEUE_PAGE_QUERY } from '../../TestQueue/queries';
+import {
+  TEST_QUEUE_PAGE_QUERY,
+  TEST_QUEUE_EXPANDED_ROW_QUERY
+} from '../../TestQueue/queries';
 import { TEST_PLAN_REPORT_STATUS_DIALOG_QUERY } from '../../TestPlanReportStatusDialog/queries';
 
 const StartBotRunButton = ({ testPlanReport, onChange }) => {
@@ -62,7 +65,11 @@ const StartBotRunButton = ({ testPlanReport, onChange }) => {
             variables: { testPlanReportId: testPlanReport.id },
             refetchQueries: [
               TEST_QUEUE_PAGE_QUERY,
-              TEST_PLAN_REPORT_STATUS_DIALOG_QUERY
+              TEST_PLAN_REPORT_STATUS_DIALOG_QUERY,
+              {
+                query: TEST_QUEUE_EXPANDED_ROW_QUERY,
+                variables: { testPlanReportId: testPlanReport.id }
+              }
             ],
             awaitRefetchQueries: true
           });

client/components/ManageBotRunDialog/StopRunningCollectionButton/index.jsx

@@ -13,7 +13,8 @@ const StopRunningCollectionButton = ({ collectionJob, onClick = () => {} }) => {
     variables: {
       collectionJobId: collectionJob.id
     },
-    skip: !collectionJob
+    skip: !collectionJob,
+    refetchQueries: ['CollectionJobIdByTestPlanRunId']
   });
 
   if (!collectionJob) {

client/components/ManageBotRunDialog/index.jsx

@@ -40,7 +40,7 @@ const ManageBotRunDialog = ({
       variables: {
         testPlanRunId: testPlanRun.id
       },
-      fetchPolicy: 'cache-and-network'
+      fetchPolicy: 'cache-first'
     }
   );
 
@@ -57,7 +57,7 @@ const ManageBotRunDialog = ({
       variables: {
         testPlanReportId
       },
-      fetchPolicy: 'cache-and-network'
+      fetchPolicy: 'cache-only'
     }
   );
 
@@ -75,7 +75,9 @@ const ManageBotRunDialog = ({
 
   const { isAdmin, isTester } = evaluateAuth(me);
 
-  const [assignTester] = useMutation(ASSIGN_TESTER_MUTATION);
+  const [assignTester] = useMutation(ASSIGN_TESTER_MUTATION, {
+    refetchQueries: ['TestQueueExpandedRow']
+  });
 
   const isBotRunFinished = useMemo(() => {
     const status = collectionJobQuery?.collectionJobByTestPlanRunId?.status;
@@ -187,7 +189,9 @@ const ManageBotRunDialog = ({
     collectionJobQuery,
     isAdmin,
     isTester,
-    isBotRunFinished
+    isBotRunFinished,
+    me?.id,
+    assignTester
   ]);
 
   const deleteConfirmationContent = (

client/components/ManageBotRunDialog/queries.js

@@ -15,8 +15,11 @@ export const TEST_PLAN_REPORT_ASSIGNED_TESTERS_QUERY = gql`
     testPlanReport(id: $testPlanReportId) {
       id
       draftTestPlanRuns {
+        id
         tester {
           id
+          username
+          isBot
         }
       }
     }