Merge pull request #2711 from lmcnulty/checklists-toasts-rollbar

Checklists – Add toasts on query failures
responsible-ai-collaborative · Apr 1, 2024 · 4913a2b · 4913a2b
2 parents a76b741 + 57da1a9
commit 4913a2b
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 3 deletions.
diff --git a/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js b/site/gatsby-site/cypress/e2e/integration/apps/checklistsIndex.cy.js
@@ -7,6 +7,13 @@ describe('Checklists App Index', () => {
 
   const newChecklistButtonQuery = '#new-checklist-button';
 
+  const testError = {
+    0: {
+      message: 'Test error',
+      locations: [{ line: 1, column: 1 }],
+    },
+  };
+
   const usersQuery = {
     query: gql`
       {
@@ -91,4 +98,118 @@ describe('Checklists App Index', () => {
       cy.get('[data-cy="checklist-card"]:last-child button').contains('Delete').should('not.exist');
     });
   });
+
+  it('Should show toast on error fetching checklists', () => {
+    cy.conditionalIntercept(
+      '**/graphql',
+      (req) => req.body.operationName == 'findChecklists',
+      'findChecklists',
+      { errors: [testError] }
+    );
+
+    cy.visit(url);
+
+    cy.get('[data-cy="toast"]').contains('Could not fetch checklists').should('exist');
+  });
+
+  it('Should show toast on error fetching risks', () => {
+    cy.query(usersQuery).then(({ data: { users } }) => {
+      const user = users.find((user) => user.adminData.email == Cypress.env('e2eUsername'));
+
+      cy.conditionalIntercept(
+        '**/graphql',
+        (req) => req.body.operationName == 'findChecklists',
+        'findChecklists',
+        {
+          data: {
+            checklists: [
+              {
+                about: '',
+                id: 'fakeChecklist1',
+                name: 'My Checklist',
+                owner_id: user.userId,
+                risks: [],
+                tags_goals: ['GMF:Known AI Goal:Translation'],
+                tags_methods: [],
+                tags_other: [],
+              },
+              {
+                about: '',
+                id: 'fakeChecklist2',
+                name: "Somebody Else's Checklist",
+                owner_id: 'aFakeUserId',
+                risks: [],
+                tags_goals: [],
+                tags_methods: [],
+                tags_other: [],
+              },
+            ],
+          },
+        }
+      );
+
+      cy.conditionalIntercept('**/graphql', (req) => req.body.query.includes('GMF'), 'risks', {
+        errors: [testError],
+      });
+
+      cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword'));
+
+      cy.visit(url);
+
+      cy.get('[data-cy="toast"]').contains('Failure searching for risks').should('exist');
+    });
+  });
+
+  maybeIt('Should show toast on error creating checklist', () => {
+    cy.query(usersQuery).then(({ data: { users } }) => {
+      const user = users.find((user) => user.adminData.email == Cypress.env('e2eUsername'));
+
+      cy.conditionalIntercept(
+        '**/graphql',
+        (req) => req.body.operationName == 'insertChecklist',
+        'insertChecklist',
+        { errors: [testError] }
+      );
+
+      cy.conditionalIntercept(
+        '**/graphql',
+        (req) => req.body.operationName == 'findChecklists',
+        'findChecklists',
+        {
+          data: {
+            checklists: [
+              {
+                about: '',
+                id: 'fakeChecklist1',
+                name: 'My Checklist',
+                owner_id: user.userId,
+                risks: [],
+                tags_goals: [],
+                tags_methods: [],
+                tags_other: [],
+              },
+              {
+                about: '',
+                id: 'fakeChecklist2',
+                name: "Somebody Else's Checklist",
+                owner_id: 'aFakeUserId',
+                risks: [],
+                tags_goals: [],
+                tags_methods: [],
+                tags_other: [],
+              },
+            ],
+          },
+        }
+      );
+
+      cy.login(Cypress.env('e2eUsername'), Cypress.env('e2ePassword'));
+
+      cy.visit(url);
+
+      cy.get(newChecklistButtonQuery).click();
+
+      cy.get('[data-cy="toast"]').contains('Could not create checklist.').should('exist');
+    });
+  });
 });
diff --git a/site/gatsby-site/src/components/checklists/CheckListForm.js b/site/gatsby-site/src/components/checklists/CheckListForm.js
@@ -101,7 +101,7 @@ export default function CheckListForm({
   const {
     data: generatedRisksData,
     loading: generatedRisksLoading,
-    errors: generatedRisksErrors,
+    error: generatedRisksErrors,
   } = useQuery(
     gql`
       query {
@@ -124,6 +124,7 @@ export default function CheckListForm({
     addToast({
       message: t('Failure searching for risks.'),
       severity: SEVERITY.danger,
+      error: generatedRisksErrors,
     });
   }
 

diff --git a/site/gatsby-site/src/components/checklists/ChecklistsIndex.js b/site/gatsby-site/src/components/checklists/ChecklistsIndex.js
@@ -40,11 +40,23 @@ const ChecklistsIndex = ({ users }) => {
   const [insertChecklist] = useMutation(INSERT_CHECKLIST);
 
   /************************** Get Checklists **************************/
-  const { data: checklistsData, loading: checklistsLoading } = useQuery(FIND_CHECKLISTS, {
+  const {
+    data: checklistsData,
+    loading: checklistsLoading,
+    error: checklistsErrors,
+  } = useQuery(FIND_CHECKLISTS, {
     variables: { query: { owner_id: user?.id } },
     skip: !user?.id,
   });
 
+  if (checklistsErrors) {
+    addToast({
+      message: t('Could not fetch checklists'),
+      severity: SEVERITY.danger,
+      error: checklistsErrors,
+    });
+  }
+
   // In useState so that on deleting a checklist,
   // we can remove it from display immediately.
   const [checklists, setChecklists] = useState([]);
@@ -104,7 +116,17 @@ const ChecklistsIndex = ({ users }) => {
       }
     `;
 
-  const { data: risksData } = useQuery(gql(riskQuery), { skip: skipRisksQuery });
+  const { data: risksData, error: risksErrors } = useQuery(gql(riskQuery), {
+    skip: skipRisksQuery,
+  });
+
+  if (risksErrors) {
+    addToast({
+      message: t('Failure searching for risks.'),
+      severity: SEVERITY.danger,
+      error: risksErrors,
+    });
+  }
 
   /************************ Prepare Display ***************************/
   const [sortBy, setSortBy] = useState('alphabetical');