From 7a34686180040e6465bc4b898f45b4c28e2d6ff5 Mon Sep 17 00:00:00 2001
From: Adam Howard <91115+codeincontext@users.noreply.github.com>
Date: Thu, 7 Nov 2024 18:58:13 +0100
Subject: [PATCH] test: set up chromatic config and get storybook building
 (#344)

---
 .github/workflows/chromatic.yml               | 60 +++++++++++++++++++
 apps/nextjs/.gitignore                        |  3 +-
 .../RadixThemeDecorator.tsx}                  |  2 +-
 apps/nextjs/.storybook/preview.tsx            | 56 +++++++----------
 apps/nextjs/chromatic.config.json             |  6 ++
 apps/nextjs/package.json                      |  3 +-
 .../Chat/Chat/ChatUserAccessCheck.stories.tsx | 26 --------
 .../Chat/Chat/ChatUserAccessCheck.tsx         | 33 ----------
 .../Chat/chat-history.stories.tsx             |  8 +++
 .../Chat/sidebar-actions.stories.tsx          |  4 ++
 10 files changed, 105 insertions(+), 96 deletions(-)
 create mode 100644 .github/workflows/chromatic.yml
 rename apps/nextjs/.storybook/{ThemeDecorator.tsx => decorators/RadixThemeDecorator.tsx} (68%)
 create mode 100644 apps/nextjs/chromatic.config.json
 delete mode 100644 apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.stories.tsx
 delete mode 100644 apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.tsx

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 000000000..663268423
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,60 @@
+name: "Chromatic"
+
+on: push
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}-chromatic
+  cancel-in-progress: true
+
+jobs:
+  changed-files:
+    runs-on: ubuntu-latest
+    name: changed-files
+    outputs:
+      all_changed_files: ${{ steps.changed-files.outputs.all_changed_files }}
+      any_changed: ${{ steps.changed-files.outputs.any_changed }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Get changed files
+        id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files: |
+            apps/nextjs/**
+
+  chromatic:
+    name: Run Chromatic
+    needs: [changed-files]
+    if: ${{ needs.changed-files.outputs.any_changed == 'true' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "pnpm"
+      - name: Install dependencies
+        run: pnpm install
+      - name: Inject Doppler env vars
+        uses: dopplerhq/secrets-fetch-action@v1.2.0
+        id: doppler
+        with:
+          doppler-token: ${{ secrets.DOPPLER_TOKEN }}
+          inject-env-vars: true
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          workingDir: apps/nextjs
+          exitZeroOnChanges: true
+          exitOnceUploaded: true
+          onlyChanged: true
diff --git a/apps/nextjs/.gitignore b/apps/nextjs/.gitignore
index 8c2f3b8e2..415dc7351 100644
--- a/apps/nextjs/.gitignore
+++ b/apps/nextjs/.gitignore
@@ -9,6 +9,7 @@ tests-e2e/.auth
 .env.sentry-build-plugin
 
 *storybook.log
+.chromatic.log
 
 # Playwright artifacts
-playwright-report
\ No newline at end of file
+playwright-report
diff --git a/apps/nextjs/.storybook/ThemeDecorator.tsx b/apps/nextjs/.storybook/decorators/RadixThemeDecorator.tsx
similarity index 68%
rename from apps/nextjs/.storybook/ThemeDecorator.tsx
rename to apps/nextjs/.storybook/decorators/RadixThemeDecorator.tsx
index de0d350f3..5f213faf5 100644
--- a/apps/nextjs/.storybook/ThemeDecorator.tsx
+++ b/apps/nextjs/.storybook/decorators/RadixThemeDecorator.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Theme } from "@radix-ui/themes";
 import "@radix-ui/themes/styles.css";
 
-export const ThemeDecorator = (Story: React.ComponentType) => (
+export const RadixThemeDecorator = (Story: React.ComponentType) => (
   <Theme>
     <Story />
   </Theme>
diff --git a/apps/nextjs/.storybook/preview.tsx b/apps/nextjs/.storybook/preview.tsx
index 887d667e3..ff270b2e2 100644
--- a/apps/nextjs/.storybook/preview.tsx
+++ b/apps/nextjs/.storybook/preview.tsx
@@ -9,18 +9,10 @@ import "@fontsource/lexend/900.css";
 import { OakThemeProvider, oakDefaultTheme } from "@oaknational/oak-components";
 import type { Preview, Decorator } from "@storybook/react";
 
-// ModerationProvider is coming in the main Chat.tsx refactor
-//import { ModerationProvider } from "../src/components/AppComponents/Chat/Chat/ModerationProvider";
 import { TooltipProvider } from "../src/components/AppComponents/Chat/ui/tooltip";
-import { DialogProvider } from "../src/components/AppComponents/DialogContext";
-import { CookieConsentProvider } from "../src/components/ContextProviders/CookieConsentProvider";
-import { DemoProvider } from "../src/components/ContextProviders/Demo";
-import LessonPlanTrackingProvider from "../src/lib/analytics/lessonPlanTrackingContext";
-import { SidebarProvider } from "../src/lib/hooks/use-sidebar";
 import { AnalyticsProvider } from "../src/mocks/analytics/provider";
 import { TRPCReactProvider } from "../src/utils/trpc";
-import { MockClerkProvider } from "./MockClerkProvider";
-import { ThemeDecorator } from "./ThemeDecorator";
+import { RadixThemeDecorator } from "./decorators/RadixThemeDecorator";
 import "./preview.css";
 
 const preview: Preview = {
@@ -35,33 +27,29 @@ const preview: Preview = {
   tags: ["autodocs"],
 };
 
+// Providers not currently used
+// - MockClerkProvider
+// - CookieConsentProvider
+// - DemoProvider
+// - LessonPlanTrackingProvider
+// - DialogProvider
+// - OakThemeProvider
+// - SidebarProvider
+// - ChatModerationProvider
+
 export const decorators: Decorator[] = [
-  ThemeDecorator,
+  RadixThemeDecorator,
   (Story) => (
-    <MockClerkProvider>
-      <CookieConsentProvider>
-        {" "}
-        <TRPCReactProvider>
-          <DemoProvider>
-            <AnalyticsProvider>
-              <LessonPlanTrackingProvider chatId={"faked"}>
-                <DialogProvider>
-                  <OakThemeProvider theme={oakDefaultTheme}>
-                    <SidebarProvider>
-                      <TooltipProvider>
-                        {/* <ModerationProvider initialModerations={[]}> */}
-                        <Story />
-                        {/* </ModerationProvider> */}
-                      </TooltipProvider>
-                    </SidebarProvider>
-                  </OakThemeProvider>
-                </DialogProvider>
-              </LessonPlanTrackingProvider>
-            </AnalyticsProvider>
-          </DemoProvider>{" "}
-        </TRPCReactProvider>
-      </CookieConsentProvider>
-    </MockClerkProvider>
+    <>
+      {/* TODO: Mock tRPC calls with MSW */}
+      <TRPCReactProvider>
+        <AnalyticsProvider>
+          <TooltipProvider>
+            <Story />
+          </TooltipProvider>
+        </AnalyticsProvider>
+      </TRPCReactProvider>
+    </>
   ),
 ];
 
diff --git a/apps/nextjs/chromatic.config.json b/apps/nextjs/chromatic.config.json
new file mode 100644
index 000000000..418b9e3fd
--- /dev/null
+++ b/apps/nextjs/chromatic.config.json
@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "Project:672908473f629875f0be294f",
+  "storybookBaseDir": "apps/nextjs",
+  "zip": true
+}
diff --git a/apps/nextjs/package.json b/apps/nextjs/package.json
index e156833f1..e3206734c 100644
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -23,7 +23,8 @@
     "with-env": "dotenv -e ../../.env --",
     "aila": "tsx scripts/aila-cli.ts",
     "storybook": "dotenv -e ../../.env -- storybook dev -p 6006 --no-open",
-    "build-storybook": "dotenv -e ../../.env -- storybook build"
+    "build-storybook": "dotenv -e ../../.env -- storybook build",
+    "chromatic": "pnpm with-env pnpm dlx chromatic"
   },
   "prettier": "@oakai/prettier-config",
   "dependencies": {
diff --git a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.stories.tsx
deleted file mode 100644
index 849f8f2ed..000000000
--- a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.stories.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-
-import ChatUserAccessCheck from "./ChatUserAccessCheck";
-
-const meta: Meta<typeof ChatUserAccessCheck> = {
-  title: "Components/Chat/ChatUserAccessCheck",
-  component: ChatUserAccessCheck,
-  tags: ["autodocs"],
-};
-
-export default meta;
-type Story = StoryObj<typeof ChatUserAccessCheck>;
-
-export const UserHasAccess: Story = {
-  args: {
-    userCanView: true,
-    children: <div>Content that the user can view</div>,
-  },
-};
-
-export const UserDeniedAccess: Story = {
-  args: {
-    userCanView: false,
-    children: <div>Content that should not be visible</div>,
-  },
-};
diff --git a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.tsx b/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.tsx
deleted file mode 100644
index b8b889bf8..000000000
--- a/apps/nextjs/src/components/AppComponents/Chat/Chat/ChatUserAccessCheck.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-
-import { Flex } from "@radix-ui/themes";
-
-export interface ChatUserAccessCheckProps {
-  userCanView: boolean;
-  children: React.ReactNode;
-}
-
-const ChatUserAccessCheck: React.FC<ChatUserAccessCheckProps> = ({
-  userCanView,
-  children,
-}) => {
-  if (!userCanView) {
-    return (
-      <Flex
-        grow={"1"}
-        width="100%"
-        height="100%"
-        justify="center"
-        align="center"
-      >
-        <p className="mt-18 py-12">
-          Sorry, you do not have permission to view this page.
-        </p>
-      </Flex>
-    );
-  }
-
-  return <>{children}</>;
-};
-
-export default ChatUserAccessCheck;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
index ee875272b..21c3e5120 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/chat-history.stories.tsx
@@ -1,3 +1,4 @@
+import * as Dialog from "@radix-ui/react-dialog";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { ChatHistory } from "./chat-history";
@@ -9,6 +10,13 @@ const meta: Meta<typeof ChatHistory> = {
     layout: "centered",
   },
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <Dialog.Root>
+        <Story />
+      </Dialog.Root>
+    ),
+  ],
 };
 
 export default meta;
diff --git a/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx b/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
index 496c40aae..d0310566d 100644
--- a/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
+++ b/apps/nextjs/src/components/AppComponents/Chat/sidebar-actions.stories.tsx
@@ -27,6 +27,8 @@ export const Default: Story = {
   },
 };
 
+// NOTE: The modal appears on a parent element which isn't captured by visual testing
+// TODO: Test the modal directly
 export const SharePending: Story = {
   args: {
     ...Default.args,
@@ -38,6 +40,8 @@ export const SharePending: Story = {
   },
 };
 
+// NOTE: The modal appears on a parent element which isn't captured by visual testing
+// TODO: Test the modal directly
 export const RemovePending: Story = {
   args: {
     ...Default.args,