feat(frontend): add stories for relay-workflows-lib components

Author: NatLeung96

frontend/dashboard/src/mocks/handlers.ts

@@ -56,6 +56,10 @@ import {
   TemplateViewRetriggerQuery$data,
   TemplateViewRetriggerQuery$variables,
 } from "relay-workflows-lib/lib/views/__generated__/TemplateViewRetriggerQuery.graphql";
+import {
+  MockRenderSubmittedMessageQuery$data,
+  MockRenderSubmittedMessageQuery$variables,
+} from "relay-workflows-lib/stories/mock-queries/__generated__/MockRenderSubmittedMessageQuery.graphql";
 
 const api = graphql.link("https://workflows.diamond.ac.uk/graphql");
 
@@ -158,4 +162,62 @@ export const handlers = [
       });
     },
   ),
+
+  api.query<
+    MockRenderSubmittedMessageQuery$data,
+    MockRenderSubmittedMessageQuery$variables
+  >("MockRenderSubmittedMessageQuery", ({ variables }) => {
+    switch (variables.name) {
+      case "completed-workflow":
+        return HttpResponse.json({
+          data: {
+            workflow: {
+              status: {
+                __typename: "WorkflowSucceededStatus",
+              },
+            },
+          } as unknown as MockRenderSubmittedMessageQuery$data,
+        });
+      case "running-workflow":
+        return HttpResponse.json({
+          data: {
+            workflow: {
+              status: {
+                __typename: "WorkflowRunningStatus",
+              },
+            },
+          } as unknown as MockRenderSubmittedMessageQuery$data,
+        });
+      case "pending-workflow":
+        return HttpResponse.json({
+          data: {
+            workflow: {
+              status: {
+                __typename: "WorkflowPendingStatus",
+              },
+            },
+          } as unknown as MockRenderSubmittedMessageQuery$data,
+        });
+      case "errored-workflow":
+        return HttpResponse.json({
+          data: {
+            workflow: {
+              status: {
+                __typename: "WorkflowErroredStatus",
+              },
+            },
+          } as unknown as MockRenderSubmittedMessageQuery$data,
+        });
+      default:
+        return HttpResponse.json({
+          data: {
+            workflow: {
+              status: {
+                __typename: "Unknown",
+              },
+            },
+          } as unknown as MockRenderSubmittedMessageQuery$data,
+        });
+    }
+  }),
 ];

frontend/relay-workflows-lib/.storybook/main.ts

@@ -0,0 +1,35 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+import { join, dirname } from "path";
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
+const config: StorybookConfig = {
+  stories: [
+    // "../stories/**/*.mdx",
+    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@chromatic-com/storybook"),
+    getAbsolutePath("@storybook/addon-docs"),
+  ],
+  framework: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    name: getAbsolutePath("@storybook/react-vite"),
+    options: {},
+  },
+  env: (config) => ({
+    ...config,
+    VITE_ENABLE_MOCKING: "true",
+    VITE_GRAPH_URL: "https://workflows.diamond.ac.uk/graphql",
+    VITE_GRAPH_WS_URL: "wss://workflows.diamond.ac.uk/graphql/ws",
+  }),
+};
+export default config;

frontend/relay-workflows-lib/.storybook/preview.ts

@@ -0,0 +1,23 @@
+import type { Preview } from "@storybook/react-vite";
+import { worker } from "dashboard/src/mocks/browser";
+
+const preview: Preview = {
+  async beforeAll() {
+    await worker.start();
+  },
+  beforeEach() {
+    return () => {
+      worker.resetHandlers();
+    };
+  },
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

frontend/relay-workflows-lib/lib/components/WorkflowListFilterDrawer.tsx

@@ -74,7 +74,7 @@ export function WorkflowListFilterDisplay({
   );
 }
 
-function WorkflowListFilterDrawer({
+export function WorkflowListFilterDrawer({
   data,
   onApplyFilters,
 }: WorkflowListFilterDrawerProps) {

frontend/relay-workflows-lib/lib/views/SingleWorkflowView.tsx

@@ -7,7 +7,7 @@ import BaseSingleWorkflowView from "./BaseSingleWorkflowView";
 import { graphql } from "react-relay";
 import { useState } from "react";
 
-const SingleWorkflowViewQuery = graphql`
+export const SingleWorkflowViewQuery = graphql`
   query SingleWorkflowViewQuery($visit: VisitInput!, $name: String!) {
     workflow(visit: $visit, name: $name) {
       status {

frontend/relay-workflows-lib/lib/views/TemplateView.tsx

@@ -11,7 +11,7 @@ import { TemplateViewMutation } from "./__generated__/TemplateViewMutation.graph
 import { TemplateViewQuery as TemplateViewQueryType } from "./__generated__/TemplateViewQuery.graphql";
 import { SubmissionFormParametersFragment$key } from "../components/__generated__/SubmissionFormParametersFragment.graphql";
 
-const TemplateViewQuery = graphql`
+export const TemplateViewQuery = graphql`
   query TemplateViewQuery($templateName: String!) {
     workflowTemplate(name: $templateName) {
       ...SubmissionFormFragment

frontend/relay-workflows-lib/package.json

@@ -8,7 +8,9 @@
     "dev": "vite",
     "build": "tsc --build && vite build",
     "preview": "vite preview",
-    "relay": "relay-compiler"
+    "relay": "relay-compiler",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@types/relay-test-utils": "^19.0.0",

frontend/relay-workflows-lib/relay.config.json

@@ -1,5 +1,5 @@
 {
-  "src": "./lib",
+  "src": "./",
   "language": "typescript",
   "schema": "./supergraph.graphql",
   "exclude": ["**/node_modules/**", "**/__mocks__/**", "**/__generated__/**"],

frontend/relay-workflows-lib/stories/components/BaseWorkflowRelay.stories.tsx

@@ -0,0 +1,72 @@
+import { Meta, StoryObj } from "@storybook/react";
+import {
+  RelayEnvironmentProvider,
+  useFragment,
+  useLazyLoadQuery,
+} from "react-relay";
+import { ThemeProvider, DiamondTheme } from "@diamondlightsource/sci-react-ui";
+import { MemoryRouter } from "react-router-dom";
+import React, { ReactElement } from "react";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { WorkflowsListViewQuery } from "../../lib/views/WorkflowsListView";
+import { WorkflowsListViewQuery$data } from "../../lib/views/__generated__/WorkflowsListViewQuery.graphql";
+import { WorkflowsContentFragment$key } from "../../lib/components/__generated__/WorkflowsContentFragment.graphql";
+import { WorkflowsContentFragment } from "../../lib/components/WorkflowsContent";
+import BaseWorkflowRelay from "../../lib/components/BaseWorkflowRelay";
+import { WorkflowRelayFragment$key } from "../../lib/components/__generated__/WorkflowRelayFragment.graphql";
+import { WorkflowRelayFragment } from "../../lib/components/WorkflowRelay";
+
+const environment = await getRelayEnvironment();
+
+const Wrapper = ({ children }: { children: ReactElement }) => {
+  const queryData = useLazyLoadQuery(
+    WorkflowsListViewQuery,
+    {},
+  ) as WorkflowsListViewQuery$data;
+  const workflowsData = useFragment<WorkflowsContentFragment$key>(
+    WorkflowsContentFragment,
+    queryData.workflows,
+  );
+  const data = useFragment<WorkflowRelayFragment$key>(
+    WorkflowRelayFragment,
+    workflowsData.nodes[1],
+  );
+  return React.cloneElement(children, {
+    fragmentRef: data,
+  });
+};
+
+const meta: Meta<typeof BaseWorkflowRelay> = {
+  component: BaseWorkflowRelay,
+  title: "BaseWorkflowRelay",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Render base version of workflow relay",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <RelayEnvironmentProvider environment={environment}>
+        <ThemeProvider theme={DiamondTheme} defaultMode="light">
+          <MemoryRouter initialEntries={["/"]}>
+            <Story />
+          </MemoryRouter>
+        </ThemeProvider>
+      </RelayEnvironmentProvider>
+    ),
+  ],
+} satisfies Meta<typeof BaseWorkflowRelay>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Example: Story = {
+  render: (args) => (
+    <Wrapper>
+      <BaseWorkflowRelay {...args} />
+    </Wrapper>
+  ),
+};

frontend/relay-workflows-lib/stories/components/RenderSubmittedMessage.stories.tsx

@@ -0,0 +1,143 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { RenderSubmittedMessage } from "../../lib/components/RenderSubmittedMessage";
+import { RelayEnvironmentProvider, useLazyLoadQuery } from "react-relay";
+import { getRelayEnvironment } from "dashboard/src/RelayEnvironment";
+import { ThemeProvider, DiamondTheme } from "@diamondlightsource/sci-react-ui";
+import { MemoryRouter } from "react-router-dom";
+import React, { ReactElement } from "react";
+import { MockRenderSubmittedMessageQuery } from "../mock-queries/MockRenderSubmittedMessageQuery";
+import { MockRenderSubmittedMessageQuery$data } from "../mock-queries/__generated__/MockRenderSubmittedMessageQuery.graphql";
+
+const environment = await getRelayEnvironment();
+
+const Wrapper = ({
+  name,
+  children,
+  ...props
+}: {
+  name: string;
+  children: ReactElement;
+}) => {
+  const data = useLazyLoadQuery(MockRenderSubmittedMessageQuery, {
+    name,
+  }) as MockRenderSubmittedMessageQuery$data;
+  return React.cloneElement(children, { ...props, fragmentRef: data.workflow });
+};
+
+const meta: Meta<typeof RenderSubmittedMessage> = {
+  component: RenderSubmittedMessage,
+  title: "RenderSubmittedMessage",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: "Render message",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <RelayEnvironmentProvider environment={environment}>
+        <ThemeProvider theme={DiamondTheme} defaultMode="light">
+          <MemoryRouter initialEntries={["/"]}>
+            <Story />
+          </MemoryRouter>
+        </ThemeProvider>
+      </RelayEnvironmentProvider>
+    ),
+  ],
+} satisfies Meta<typeof RenderSubmittedMessage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const unknownStatus: Story = {
+  render: (args) => (
+    <Wrapper name="workflow-name">
+      <RenderSubmittedMessage {...args} />
+    </Wrapper>
+  ),
+  args: {
+    result: {
+      type: "success",
+      message: "workflow-name",
+    },
+  },
+};
+
+export const completedWorkflow: Story = {
+  render: (args) => (
+    <Wrapper name="completed-workflow">
+      <RenderSubmittedMessage {...args} />
+    </Wrapper>
+  ),
+  args: {
+    result: {
+      type: "success",
+      message: "completed-workflow",
+    },
+  },
+};
+
+export const runningWorkflow: Story = {
+  render: (args) => (
+    <Wrapper name="running-workflow">
+      <RenderSubmittedMessage {...args} />
+    </Wrapper>
+  ),
+  args: {
+    result: {
+      type: "success",
+      message: "running-workflow",
+    },
+  },
+};
+
+export const pendingWorkflow: Story = {
+  render: (args) => (
+    <Wrapper name="pending-workflow">
+      <RenderSubmittedMessage {...args} />
+    </Wrapper>
+  ),
+  args: {
+    result: {
+      type: "success",
+      message: "pending-workflow",
+    },
+  },
+};
+
+export const erroredWorkflow: Story = {
+  render: (args) => (
+    <Wrapper name="errored-workflow">
+      <RenderSubmittedMessage {...args} />
+    </Wrapper>
+  ),
+  args: {
+    result: {
+      type: "success",
+      message: "errored-workflow",
+    },
+  },
+};
+
+export const networkError: Story = {
+  args: {
+    result: {
+      type: "networkError",
+      error: {
+        name: "404",
+        message: "Network Error",
+      },
+    },
+  },
+};
+
+export const graphqlError: Story = {
+  args: {
+    result: {
+      type: "graphQLError",
+      errors: [{ message: "GraphQL Error" }],
+    },
+  },
+};