feat(frontend): display message on unauthorized query

Author: JamesDoingStuff

frontend/workflows-lib/lib/components/workflow/WorkflowErrorBoundaryWithRetry.tsx

@@ -1,5 +1,6 @@
 import { Typography } from "@mui/material";
 import React, { Component, ReactNode } from "react";
+import { formatErrorMessage } from "workflows-lib/lib/utils/commonUtils";
 
 interface ErrorBoundaryProps {
   children: (props: { fetchKey: number }) => ReactNode;
@@ -14,6 +15,7 @@ interface ErrorBoundaryState {
   error: Error | null;
   fetchKey: number;
   retryCount: number;
+  isUnauthorized: boolean;
 }
 
 class WorkflowErrorBoundaryWithRetry extends Component<
@@ -29,6 +31,7 @@ class WorkflowErrorBoundaryWithRetry extends Component<
       error: null,
       fetchKey: 0,
       retryCount: 0,
+      isUnauthorized: false,
     };
   }
 
@@ -46,9 +49,16 @@ class WorkflowErrorBoundaryWithRetry extends Component<
       errorInfo,
     );
 
+    if (error.message.includes("Unauthorized")) {
+      this.setState((prev) => ({
+        ...prev,
+        isUnauthorized: true,
+      }));
+    }
+
     const maxRetries = this.props.maxRetries ?? 2;
 
-    if (this.state.retryCount < maxRetries) {
+    if (!this.state.isUnauthorized && this.state.retryCount < maxRetries) {
       this.retryTimeoutId = setTimeout(
         () => {
           this._retry();
@@ -75,17 +85,18 @@ class WorkflowErrorBoundaryWithRetry extends Component<
 
   render() {
     const { children, fallback, maxRetries = 2 } = this.props;
-    const { hasError, error, fetchKey, retryCount } = this.state;
+    const { hasError, error, fetchKey, retryCount, isUnauthorized } =
+      this.state;
 
     if (hasError && error) {
-      if (retryCount >= maxRetries) {
+      if (isUnauthorized || retryCount >= maxRetries) {
         if (typeof fallback === "function") {
           return fallback({ error, retry: this._retry });
         }
         return (
           fallback || (
             <Typography variant="h6" fontWeight="bold">
-              Something went wrong with the GraphQL query.
+              {formatErrorMessage(error.message)}
             </Typography>
           )
         );

frontend/workflows-lib/lib/utils/commonUtils.ts

@@ -54,3 +54,13 @@ export function templateSourceToLink(
   }
   return repo + "/tree/" + rev + "/" + path;
 }
+
+export function formatErrorMessage(errorMessage: string | undefined) {
+  const defaultMessage = "Something went wrong with the GraphQL query.";
+  const authWorkflowsMessage = "You are not authorised to access this visit.";
+  const authTemplateMessage = "You are not authorised to access the templates.";
+
+  if (errorMessage?.includes("Template")) return authTemplateMessage;
+  if (errorMessage?.includes("Workflow")) return authWorkflowsMessage;
+  return defaultMessage;
+}

frontend/workflows-lib/tests/components/WorkflowErrorBoundaryWithRetry.test.tsx

@@ -1,7 +1,8 @@
-import { render, waitFor } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, expect } from "vitest";
 import WorkflowErrorBoundaryWithRetry from "../../lib/components/workflow/WorkflowErrorBoundaryWithRetry";
+import * as commonUtils from "../../lib/utils/commonUtils";
 
 describe("WorkflowsErrorBoundaryWithRetry", () => {
   it("renders with children", () => {
@@ -60,4 +61,25 @@ describe("WorkflowsErrorBoundaryWithRetry", () => {
       { timeout: 4000 },
     );
   });
+
+  it("does not retry for an unauthorised query", () => {
+    const TestAuthError = () => {
+      throw new Error(
+        "No data returned for operation `TemplatesListViewQuery`, got error(s): Unauthorized",
+      );
+    };
+
+    const formatMessage = vi.spyOn(commonUtils, "formatErrorMessage");
+
+    render(
+      <WorkflowErrorBoundaryWithRetry>
+        {() => <TestAuthError />}
+      </WorkflowErrorBoundaryWithRetry>,
+    );
+
+    expect(
+      screen.queryByText("Trying to Refetch Data..."),
+    ).not.toBeInTheDocument();
+    expect(formatMessage).toHaveBeenCalled();
+  });
 });

frontend/workflows-lib/tests/functions/commonUtils.test.ts

@@ -2,6 +2,7 @@ import { Visit } from "@diamondlightsource/sci-react-ui";
 import {
   visitTextToVisit,
   parseVisitAndTemplate,
+  formatErrorMessage,
 } from "../../lib/utils/commonUtils";
 
 describe("visitTextToVisit", () => {
@@ -86,3 +87,38 @@ describe("parseVisitAndTemplate", () => {
     },
   );
 });
+
+describe("formatErrorMessage", () => {
+  it("should return an auth error for templates", () => {
+    const input =
+      "No data returned for operation `TemplatesListViewQuery`, got error(s): Unauthorized";
+    expect(formatErrorMessage(input)).toBe(
+      "You are not authorised to access the templates.",
+    );
+  });
+
+  it("should return a template auth error for WorkflowsListViewTemplatesQuery", () => {
+    const input =
+      "No data returned for operation `WorkflowsListViewTemplatesQuery`, got error(s): Unauthorized";
+    expect(formatErrorMessage(input)).toBe(
+      "You are not authorised to access the templates.",
+    );
+  });
+
+  it("should return an auth error for workflows", () => {
+    const input =
+      "No data returned for operation `WorkflowsListViewQuery`, got error(s): Unauthorized";
+    expect(formatErrorMessage(input)).toBe(
+      "You are not authorised to access this visit.",
+    );
+  });
+
+  test.each(["Unknown error", "", undefined])(
+    "%s should return a default message",
+    (input) => {
+      expect(formatErrorMessage(input)).toBe(
+        "Something went wrong with the GraphQL query.",
+      );
+    },
+  );
+});