Show correct error message for not found workflows (#768)

Move the error boundary to be above the Layout.js to catch status badge errors
Map 400 errors that happens on misconfiguring archival to 404
Ignore emitting 404 responses as Errors
Create an error component for workflows page

src/app/(Home)/(Workflow)/domains/[domain]/[cluster]/workflows/[workflowId]/error.tsx

@@ -0,0 +1,4 @@
+'use client';
+import WorkflowPageError from '@/views/workflow-page/workflow-page-error/workflow-page-error';
+
+export default WorkflowPageError;

src/route-handlers/describe-workflow/describe-workflow.ts

@@ -122,21 +122,39 @@ export default async function describeWorkflow(
       };
       return NextResponse.json(res);
     } catch (e) {
-      logger.error<RouteHandlerErrorPayload>(
-        { requestParams: decodedParams, cause: e },
-        'Error fetching workflow execution info'
-      );
+      // skips logs for NotFound errors
+      // treat 400 responses for requesting unconfigured archives as 404
+      if (
+        e instanceof GRPCError &&
+        (e.httpStatusCode === 404 ||
+          (e.httpStatusCode === 400 &&
+            e.message ===
+              'Requested workflow history not found, may have passed retention period.'))
+      ) {
+        return NextResponse.json(
+          {
+            message: 'Requested workflow history not found',
+            cause: e,
+          },
+          { status: 404 }
+        );
+      } else {
+        logger.error<RouteHandlerErrorPayload>(
+          { requestParams: decodedParams, cause: e },
+          'Error fetching workflow execution info'
+        );
 
-      return NextResponse.json(
-        {
-          message:
-            e instanceof GRPCError
-              ? e.message
-              : 'Error fetching workflow execution info',
-          cause: e,
-        },
-        { status: getHTTPStatusCode(e) }
-      );
+        return NextResponse.json(
+          {
+            message:
+              e instanceof GRPCError
+                ? e.message
+                : 'Error fetching workflow execution info',
+            cause: e,
+          },
+          { status: getHTTPStatusCode(e) }
+        );
+      }
     }
   }
 }

src/views/workflow-page/workflow-page-error/__tests__/domain-page-error.test.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+import { render, screen } from '@/test-utils/rtl';
+
+import { RequestError } from '@/utils/request/request-error';
+
+import WorkflowPageError from '../workflow-page-error';
+
+jest.mock('next/navigation', () => ({
+  ...jest.requireActual('next/navigation'),
+  useParams: () => ({
+    domain: 'test-domain',
+    cluster: 'test-cluster',
+  }),
+}));
+
+jest.mock('@/components/error-panel/error-panel', () =>
+  jest.fn(({ message }: { message: string }) => <div>{message}</div>)
+);
+
+describe(WorkflowPageError.name, () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders error page correctly', () => {
+    render(
+      <WorkflowPageError
+        error={new Error('something bad happened')}
+        reset={() => {}}
+      />
+    );
+    expect(screen.getByText('Failed to load workflow')).toBeInTheDocument();
+  });
+
+  it('renders "not found" error page correctly', () => {
+    render(
+      <WorkflowPageError
+        error={new RequestError('Could not find workflow', 404)}
+        reset={() => {}}
+      />
+    );
+    expect(
+      screen.getByText(
+        'Workflow was not found, it may have passed retention period'
+      )
+    ).toBeInTheDocument();
+  });
+});

src/views/workflow-page/workflow-page-error/workflow-page-error.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { useParams } from 'next/navigation';
+
+import ErrorPanel from '@/components/error-panel/error-panel';
+import { RequestError } from '@/utils/request/request-error';
+
+import { type Props } from './workflow-page-error.types';
+
+export default function WorkflowPageError({ error, reset }: Props) {
+  const { domain, cluster } = useParams();
+
+  if (error instanceof RequestError && error.status === 404) {
+    return (
+      <ErrorPanel
+        error={error}
+        message={`Workflow was not found, it may have passed retention period`}
+        actions={[
+          {
+            kind: 'link-internal',
+            label: 'Go to domain page',
+            link: `/domains/${domain}/${cluster}`,
+          },
+        ]}
+        reset={reset}
+        omitLogging={true}
+      />
+    );
+  }
+
+  return (
+    <ErrorPanel
+      error={error}
+      message="Failed to load workflow"
+      actions={[
+        {
+          kind: 'retry',
+          label: 'Retry',
+        },
+      ]}
+      reset={reset}
+    />
+  );
+}

src/views/workflow-page/workflow-page-error/workflow-page-error.types.ts

@@ -0,0 +1,4 @@
+export type Props = {
+  error: Error;
+  reset: () => void;
+};