Add no queries panel (#797)

src/views/workflow-queries/__tests__/workflow-queries.test.tsx

@@ -28,6 +28,14 @@ jest.mock('../workflow-queries-result-json/workflow-queries-result-json', () =>
   ))
 );
 
+jest.mock('@/components/error-panel/error-panel', () =>
+  jest.fn(({ message }: { message: string }) => <div>{message}</div>)
+);
+
+jest.mock('../config/workflow-queries-empty-panel.config', () => ({
+  message: 'No queries available',
+}));
+
 describe(WorkflowQueries.name, () => {
   it('renders without error and does not show excluded query type', async () => {
     await setup({});
@@ -36,6 +44,12 @@ describe(WorkflowQueries.name, () => {
     expect(screen.queryByText(/__stack_trace/)).toBeNull();
   });
 
+  it('renders with error panel if there are no query types available', async () => {
+    await setup({ noQueries: true });
+
+    expect(await screen.findByText('No queries available'));
+  });
+
   it('runs query and updates JSON', async () => {
     const { user } = await setup({});
 
@@ -64,7 +78,13 @@ describe(WorkflowQueries.name, () => {
   });
 });
 
-async function setup({ error }: { error?: boolean }) {
+async function setup({
+  error,
+  noQueries,
+}: {
+  error?: boolean;
+  noQueries?: boolean;
+}) {
   const user = userEvent.setup();
 
   render(
@@ -95,11 +115,9 @@ async function setup({ error }: { error?: boolean }) {
               }
             : {
                 jsonResponse: {
-                  queryTypes: [
-                    '__query_types',
-                    '__open_sessions',
-                    '__stack_trace',
-                  ],
+                  queryTypes: noQueries
+                    ? []
+                    : ['__query_types', '__open_sessions', '__stack_trace'],
                 } satisfies FetchWorkflowQueryTypesResponse,
               }),
         },

src/views/workflow-queries/config/workflow-queries-empty-panel.config.ts

@@ -0,0 +1,15 @@
+import { type Props as ErrorPanelProps } from '@/components/error-panel/error-panel.types';
+
+const workflowQueriesEmptyPanelConfig = {
+  message: 'No queries available for this workflow',
+  omitLogging: true,
+  actions: [
+    {
+      kind: 'link-external',
+      label: 'Read more about workflow queries',
+      link: 'https://cadenceworkflow.io/docs/concepts/queries',
+    },
+  ],
+} as const satisfies ErrorPanelProps;
+
+export default workflowQueriesEmptyPanelConfig;

src/views/workflow-queries/workflow-queries.tsx

@@ -4,11 +4,14 @@ import React, { useMemo, useState } from 'react';
 
 import { useSuspenseQuery } from '@tanstack/react-query';
 
+import ErrorPanel from '@/components/error-panel/error-panel';
+import PanelSection from '@/components/panel-section/panel-section';
 import { type FetchWorkflowQueryTypesResponse } from '@/route-handlers/fetch-workflow-query-types/fetch-workflow-query-types.types';
 import request from '@/utils/request';
 import { type RequestError } from '@/utils/request/request-error';
 import { type WorkflowPageTabContentProps } from '@/views/workflow-page/workflow-page-tab-content/workflow-page-tab-content.types';
 
+import workflowQueriesEmptyPanelConfig from './config/workflow-queries-empty-panel.config';
 import getWorkflowQueryStatus from './helpers/get-workflow-query-status';
 import useWorkflowQueries from './hooks/use-workflow-queries';
 import WorkflowQueriesResultJson from './workflow-queries-result-json/workflow-queries-result-json';
@@ -45,6 +48,14 @@ export default function WorkflowQueries(props: WorkflowPageTabContentProps) {
     queryTypes: filteredQueryTypes,
   });
 
+  if (filteredQueryTypes.length === 0) {
+    return (
+      <PanelSection>
+        <ErrorPanel {...workflowQueriesEmptyPanelConfig} />
+      </PanelSection>
+    );
+  }
+
   return (
     <styled.PageSection>
       <styled.PageContainer>