Authenticate with Chromatic CLI using OAuth token rather than projectToken

README.md

@@ -2,7 +2,6 @@
 
 The Visual Testing addon enables you to run visual tests on your stories and compare changes with the latest baselines across multiple viewports and browsers to catch UI regressions early in development without leaving Storybook.
 
-
 ## Prerequisites
 
 - Chromatic [account configured](https://www.chromatic.com/docs/setup#sign-up) with access to a project
@@ -22,37 +21,34 @@ Start Storybook and navigate to the Visual Tests panel to run your first visual
 
 By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts`) and provide additional options to control how tests are run. Listed below are the available options and examples of how to use them.
 
-
 | Option            | Description                                                                                                                              |
 | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | `buildScriptName` | Optional. Defines the custom Storybook build script <br/> `options: { buildScriptName: 'deploy-storybook' }`                             |
 | `debug`           | Optional. Output verbose debugging information to the console. <br/> `options: { debug: true }`                                          |
 | `projectId`       | Automatically configured. Sets the value for the project identifier <br/> `options: { projectId: Project:64cbcde96f99841e8b007d75 }`     |
-| `projectToken`    | Automatically configured. Sets the value for the project token <br/> `options: { projectToken: 'chpt_b2ae83517a0a706' }`                 |
 | `zip`             | Recommended for large projects. Configures the addon to deploy your Storybook to Chromatic as a zip file. <br/> `options: { zip: true }` |
 
 ```ts
 // .storybook/main.ts
 
 // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
+import type { StorybookConfig } from "@storybook/your-framework";
 
 const config: StorybookConfig = {
-  framework: '@storybook/your-framework',
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  framework: "@storybook/your-framework",
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     // Other Storybook addons
-    '@chromaui/addon-visual-tests',
-     {
-      name: '@chromaui/addon-visual-tests',
+    "@chromaui/addon-visual-tests",
+    {
+      name: "@chromaui/addon-visual-tests",
       options: {
-        projectId: 'Project:64cbcde96f99841e8b007d75',
-        projectToken: 'chpt_b2ae83517a0a706',
-        buildScriptName: 'deploy-storybook',
+        projectId: "Project:64cbcde96f99841e8b007d75",
+        buildScriptName: "build-storybook",
         zip: true,
         debug: true,
       },
-     }
+    },
   ],
 };
 
@@ -86,7 +82,6 @@ This is a [known issue](https://github.com/storybookjs/storybook/issues/22431#is
 
 Alternatively, you could use a different package manager ([npm](https://www.npmjs.com/), [pnpm](https://pnpm.io/installation)).
 
-
 ## Contributing
 
 We welcome contributions to the Storybook Addon Visual Tests! If you're a maintainer, refer to the following [instructions](./Development.md) to set up your development environment with Chromatic.

development.config.json

@@ -1,5 +1,4 @@
 {
-  "projectToken": "chpt_a898d6d22bcc592",
   "projectId": "Project:64c0b64ef4c47fe31e1262f5",
   "zip": true
 }

package.json

@@ -54,7 +54,7 @@
   "dependencies": {
     "@storybook/design-system": "^7.15.15",
     "@urql/exchange-auth": "^2.1.6",
-    "chromatic": "^7.2.3",
+    "chromatic": "^9.0.0",
     "date-fns": "^2.30.0",
     "filesize": "^10.0.12",
     "jsonfile": "^6.1.0",

production.config.json

@@ -4,6 +4,5 @@
   "externals": ["public/**"],
   "onlyChanged": true,
   "projectId": "Project:6480e1b0042842f149cfd74c",
-  "projectToken": "chpt_5a1a378a1392c49",
   "zip": true
 }

src/Panel.tsx

@@ -50,7 +50,6 @@ export const Panel = ({ active, api }: PanelProps) => {
   const {
     loading: projectInfoLoading,
     projectId,
-    projectToken,
     configFile,
     updateProject,
     projectUpdatingFailed,
@@ -110,15 +109,14 @@ export const Panel = ({ active, api }: PanelProps) => {
 
   if (projectUpdatingFailed) {
     // These should always be set when we get this error
-    if (!projectToken || !configFile) {
-      throw new Error(`Missing projectToken/config file after configuration failure`);
+    if (!configFile) {
+      throw new Error(`Missing config file after configuration failure`);
     }
 
     return (
       <Sections hidden={!active}>
         <LinkingProjectFailed
           projectId={projectId}
-          projectToken={projectToken}
           configFile={configFile}
           setAccessToken={setAccessToken}
         />
@@ -153,7 +151,7 @@ export const Panel = ({ active, api }: PanelProps) => {
             dismissBuildError={() => setLocalBuildProgress(undefined)}
             isOutdated={!!isOutdated}
             localBuildProgress={localBuildIsRightBranch ? localBuildProgress : undefined}
-            startDevBuild={() => emit(START_BUILD)}
+            startDevBuild={() => emit(START_BUILD, { accessToken })}
             setAccessToken={setAccessToken}
             setOutdated={setOutdated}
             updateBuildStatus={updateBuildStatus}

src/SidebarTop.tsx

@@ -121,7 +121,7 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
   ]);
 
   const emit = useChannel({});
-  const startBuild = () => emit(START_BUILD);
+  const startBuild = () => emit(START_BUILD, { accessToken });
   const stopBuild = () => emit(STOP_BUILD);
 
   if (!projectId || isLoggedIn === false || gitInfoError) {

src/gql/gql.ts

@@ -14,7 +14,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
  */
 const documents = {
     "\n  query VisualTestsProjectCountQuery {\n    viewer {\n      projectCount\n      accounts {\n        newProjectUrl\n      }\n    }\n  }\n": types.VisualTestsProjectCountQueryDocument,
-    "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        newProjectUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n": types.SelectProjectsQueryDocument,
+    "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        newProjectUrl\n        projects {\n          id\n          name\n          webUrl\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n": types.SelectProjectsQueryDocument,
     "\n  query ProjectQuery($projectId: ID!) {\n    project(id: $projectId) {\n      id\n      name\n      webUrl\n      lastBuild {\n        branch\n        number\n      }\n    }\n  }\n": types.ProjectQueryDocument,
     "\n  query AddonVisualTestsBuild(\n    $projectId: ID!\n    $branch: String!\n    $gitUserEmailHash: String!\n    $repositoryOwnerName: String\n    $storyId: String!\n    $testStatuses: [TestStatus!]!\n    $selectedBuildId: ID!\n    $hasSelectedBuildId: Boolean!\n  ) {\n    project(id: $projectId) {\n      name\n      lastBuildOnBranch: lastBuild(\n        branches: [$branch]\n        repositoryOwnerName: $repositoryOwnerName\n        localBuilds: { localBuildEmailHash: $gitUserEmailHash }\n      ) {\n        ...LastBuildOnBranchBuildFields\n        ...SelectedBuildFields @skip(if: $hasSelectedBuildId)\n      }\n    }\n    selectedBuild: build(id: $selectedBuildId) @include(if: $hasSelectedBuildId) {\n      ...SelectedBuildFields\n    }\n    viewer {\n      projectMembership(projectId: $projectId) {\n        userCanReview: meetsAccessLevel(minimumAccessLevel: REVIEWER)\n      }\n    }\n  }\n": types.AddonVisualTestsBuildDocument,
     "\n  fragment LastBuildOnBranchBuildFields on Build {\n    __typename\n    id\n    status\n    committedAt\n    ... on StartedBuild {\n      testsForStatus: tests(first: 1000, statuses: $testStatuses) {\n        nodes {\n          ...StatusTestFields\n        }\n      }\n      testsForStory: tests(storyId: $storyId) {\n        nodes {\n          ...LastBuildOnBranchTestFields\n        }\n      }\n    }\n    ... on CompletedBuild {\n      result\n      testsForStatus: tests(first: 1000, statuses: $testStatuses) {\n        nodes {\n          ...StatusTestFields\n        }\n      }\n      testsForStory: tests(storyId: $storyId) {\n        nodes {\n          ...LastBuildOnBranchTestFields\n        }\n      }\n    }\n  }\n": types.LastBuildOnBranchBuildFieldsFragmentDoc,
@@ -46,7 +46,7 @@ export function graphql(source: "\n  query VisualTestsProjectCountQuery {\n    v
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        newProjectUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        newProjectUrl\n        projects {\n          id\n          name\n          webUrl\n          projectToken\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n"];
+export function graphql(source: "\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        newProjectUrl\n        projects {\n          id\n          name\n          webUrl\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query SelectProjectsQuery {\n    viewer {\n      accounts {\n        id\n        name\n        avatarUrl\n        newProjectUrl\n        projects {\n          id\n          name\n          webUrl\n          lastBuild {\n            branch\n            number\n          }\n        }\n      }\n    }\n  }\n"];
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */