[ui] Upgrade Storybook, repair dependabot alerts (#22679)

## Summary & Motivation Upgrade Storybook to v8 to resolve some dependency issues, and handle a few others manually. ## How I Tested These Changes Buildkite. `yarn storybook` in both ui-core and ui-components, verify success. `yarn why` to sanity check that packages flagged by dependabot have been updated.
dagster-io · Jun 26, 2024 · f88e490 · f88e490 · github-actions · Jun 26, 2024
1 parent 539e41b
commit f88e490
Show file tree

Hide file tree

Showing 14 changed files with 4,634 additions and 2,714 deletions.
diff --git a/js_modules/dagster-ui/packages/ui-components/.storybook/main.js b/js_modules/dagster-ui/packages/ui-components/.storybook/main.js
@@ -9,28 +9,23 @@ function getAbsolutePath(value) {
 }
 
 const config = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.tsx'],
   addons: [
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),
+    '@chromatic-com/storybook',
   ],
   framework: {
-    name: getAbsolutePath('@storybook/react-webpack5'),
+    name: getAbsolutePath('@storybook/nextjs'),
     options: {},
   },
   // https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863
   typescript: {
     reactDocgen: 'react-docgen-typescript-plugin',
   },
-  // https://storybook.js.org/docs/react/configure/webpack#bundle-splitting
-  features: {
-    storyStoreV7: true,
-  },
-  docs: {
-    autodocs: false,
-  },
+  docs: {},
   env: (config) => ({
     ...config,
     STORYBOOK: true,

diff --git a/js_modules/dagster-ui/packages/ui-components/.storybook/preview.js b/js_modules/dagster-ui/packages/ui-components/.storybook/preview.js
@@ -15,7 +15,7 @@ import {withThemeByClassName} from '@storybook/addon-themes';
 
 import {MemoryRouter} from 'react-router-dom';
 
-import {createGlobalStyle} from 'styled-components/macro';
+import {createGlobalStyle} from 'styled-components';
 
 import './blueprint.css';
 
@@ -90,8 +90,4 @@ export const decorators = [
   }),
 ];
 
-export const parameters = {
-  parameters: {
-    actions: {argTypesRegex: '^on[A-Z].*'},
-  },
-};
+export const parameters = {};
diff --git a/js_modules/dagster-ui/packages/ui-components/package.json b/js_modules/dagster-ui/packages/ui-components/package.json
@@ -46,6 +46,7 @@
     "@babel/preset-env": "^7.16.7",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@chromatic-com/storybook": "^1",
     "@dagster-io/eslint-config": "1.0.15",
     "@mdx-js/react": "^1.6.22",
     "@rollup/plugin-babel": "^5.3.1",
@@ -55,15 +56,15 @@
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-actions": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-mdx-gfm": "^7.4.5",
-    "@storybook/addon-themes": "^8.0.8",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/addon-themes": "^8.1.10",
     "@storybook/icons": "^1.2.9",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-webpack5": "^7.2.0",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
@@ -85,19 +86,19 @@
     "babel-plugin-macros": "^3.1.0",
     "core-js": "^3.21.1",
     "eslint": "^8.57.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.8.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.5.0",
     "prettier": "3.0.3",
     "react": "^18.2.0",
-    "react-docgen-typescript-plugin": "^1.0.5",
+    "react-docgen-typescript-plugin": "^1.0.8",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.9",
     "rollup": "^2.70.1",
     "rollup-plugin-node-globals": "^1.4.0",
     "rollup-plugin-polyfill-node": "^0.8.0",
     "rollup-plugin-styles": "^4.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^8.1.10",
     "typescript": "5.4.5",
     "webpack": "^5.88.1"
   },

diff --git a/...dules/dagster-ui/packages/ui-components/src/components/__stories__/ButtonLink.stories.tsx b/...dules/dagster-ui/packages/ui-components/src/components/__stories__/ButtonLink.stories.tsx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 import * as React from 'react';
 
 import {ButtonLink} from '../ButtonLink';
@@ -11,7 +11,7 @@ export default {
 } as Meta;
 
 type Props = React.ComponentProps<typeof ButtonLink>;
-const Template: Story<Props> = (props) => <ButtonLink {...props} />;
+const Template: StoryFn<Props> = (props) => <ButtonLink {...props} />;
 
 export const ColorString = Template.bind({});
 ColorString.args = {

diff --git a/js_modules/dagster-ui/packages/ui-core/.storybook/main.js b/js_modules/dagster-ui/packages/ui-core/.storybook/main.js
@@ -9,25 +9,18 @@ function getAbsolutePath(value) {
 }
 
 const config = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.tsx'],
   addons: [
     getAbsolutePath('@storybook/addon-themes'),
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-essentials'),
     getAbsolutePath('@storybook/addon-mdx-gfm'),
+    '@chromatic-com/storybook',
   ],
   framework: {
-    name: '@storybook/react-webpack5',
+    name: getAbsolutePath('@storybook/nextjs'),
     options: {},
   },
-  // https://storybook.js.org/docs/react/configure/webpack#bundle-splitting
-  features: {
-    storyStoreV7: true,
-  },
-  // https://github.com/hipstersmoothie/react-docgen-typescript-plugin/issues/78#issuecomment-1409224863
-  typescript: {
-    reactDocgen: 'react-docgen-typescript-plugin',
-  },
   // https://github.com/storybookjs/storybook/issues/16690#issuecomment-971579785
   webpackFinal: async (config) => {
     // console.log(path.resolve('../ui-components/src'));
@@ -50,13 +43,16 @@ const config = {
             include: /node_modules/,
             type: 'javascript/auto',
           },
+          {
+            test: /\.(graphql|gql)$/,
+            exclude: /node_modules/,
+            loader: 'graphql-tag/loader',
+          },
         ],
       },
     };
   },
-  docs: {
-    autodocs: false,
-  },
+  docs: {},
   env: (config) => ({
     ...config,
     STORYBOOK: true,

diff --git a/js_modules/dagster-ui/packages/ui-core/.storybook/preview.js b/js_modules/dagster-ui/packages/ui-core/.storybook/preview.js
@@ -15,7 +15,7 @@ import * as React from 'react';
 import {MemoryRouter} from 'react-router-dom';
 import {withThemeByClassName} from '@storybook/addon-themes';
 
-import {createGlobalStyle} from 'styled-components/macro';
+import {createGlobalStyle} from 'styled-components';
 
 import '../src/app/blueprint.css';
 
@@ -87,8 +87,4 @@ export const decorators = [
   }),
 ];
 
-export const parameters = {
-  parameters: {
-    actions: {argTypesRegex: '^on[A-Z].*'},
-  },
-};
+export const parameters = {};
diff --git a/js_modules/dagster-ui/packages/ui-core/package.json b/js_modules/dagster-ui/packages/ui-core/package.json
@@ -87,6 +87,7 @@
     "@babel/runtime": "^7.13.10",
     "@blueprintjs/popover2": "1.13.12",
     "@blueprintjs/select": "^4.9.12",
+    "@chromatic-com/storybook": "^1",
     "@dagster-io/eslint-config": "workspace:*",
     "@dagster-io/ui-components": "workspace:*",
     "@graphql-codegen/add": "^5.0.2",
@@ -97,14 +98,14 @@
     "@graphql-tools/mock": "^8.5.0",
     "@graphql-tools/schema": "^8.3.1",
     "@mdx-js/react": "^1.6.22",
-    "@storybook/addon-actions": "^7.4.5",
-    "@storybook/addon-docs": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-mdx-gfm": "^7.4.5",
-    "@storybook/addon-themes": "^8.0.8",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/addon-actions": "^8.1.10",
+    "@storybook/addon-docs": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.10",
+    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-mdx-gfm": "^8.1.10",
+    "@storybook/addon-themes": "^8.1.10",
+    "@storybook/nextjs": "^8.1.10",
+    "@storybook/react": "^8.1.10",
     "@testing-library/dom": "^10.0.0",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^16.0.0",
@@ -135,7 +136,7 @@
     "child-process": "^1.0.2",
     "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-storybook": "^0.6.14",
+    "eslint-plugin-storybook": "^0.8.0",
     "faker": "5.5.3",
     "graphql-codegen-typescript-mock-data": "^3.7.1",
     "graphql-config": "^4.5.0",
@@ -146,13 +147,13 @@
     "jest-environment-jsdom": "^29.4",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
-    "react-docgen-typescript-plugin": "^1.0.5",
+    "react-docgen-typescript-plugin": "^1.0.8",
     "react-dom": "^18.2.0",
     "react-router": "^5.2.1",
     "react-router-dom": "^5.3.0",
     "react-router-dom-v5-compat": "^6.3.0",
     "resize-observer-polyfill": "^1.5.1",
-    "storybook": "^7.4.5",
+    "storybook": "^8.1.10",
     "styled-components": "^5.3.3",
     "ts-node": "9.1.1",
     "ts-prune": "0.10.3",

diff --git a/...es/dagster-ui/packages/ui-core/src/instance/backfill/__stories__/BackfillPage.stories.tsx b/...es/dagster-ui/packages/ui-core/src/instance/backfill/__stories__/BackfillPage.stories.tsx
@@ -1,5 +1,5 @@
 import {MockedProvider} from '@apollo/client/testing';
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 import {MemoryRouter, Route} from 'react-router-dom';
 
 import {AnalyticsContext} from '../../../app/analytics';
@@ -20,7 +20,7 @@ export default {
   component: BackfillPage,
 } as Meta;
 
-const Template: Story = ({mocks}) => (
+const Template: StoryFn = ({mocks}) => (
   <AnalyticsContext.Provider value={{page: () => {}} as any}>
     <MemoryRouter initialEntries={['/backfill/1']}>
       <MockedProvider mocks={mocks}>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/DeletionDialog.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/DeletionDialog.stories.tsx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 import faker from 'faker';
 
 import {StorybookProvider} from '../../testing/StorybookProvider';
@@ -10,7 +10,7 @@ export default {
   component: DeletionDialog,
 } as Meta;
 
-const Template: Story<DeletionDialogProps & {mocks?: any}> = ({mocks, ...props}) => (
+const Template: StoryFn<DeletionDialogProps & {mocks?: any}> = ({mocks, ...props}) => (
   <StorybookProvider apolloProps={{mocks}}>
     <DeletionDialog {...props} />
   </StorybookProvider>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/TerminationDialog.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/TerminationDialog.stories.tsx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 import faker from 'faker';
 
 import {StorybookProvider} from '../../testing/StorybookProvider';
@@ -10,7 +10,7 @@ export default {
   component: TerminationDialog,
 } as Meta;
 
-const Template: Story<TerminationDialogProps> = (props) => (
+const Template: StoryFn<TerminationDialogProps> = (props) => (
   <StorybookProvider>
     <TerminationDialog {...props} />
   </StorybookProvider>

diff --git a/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/TimeElapsed.stories.tsx b/js_modules/dagster-ui/packages/ui-core/src/runs/__stories__/TimeElapsed.stories.tsx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/react';
+import {Meta, StoryFn} from '@storybook/react';
 
 import {Props, TimeElapsed} from '../TimeElapsed';
 
@@ -8,7 +8,7 @@ export default {
   component: TimeElapsed,
 } as Meta;
 
-const Template: Story<Props> = (props) => <TimeElapsed {...props} />;
+const Template: StoryFn<Props> = (props) => <TimeElapsed {...props} />;
 
 const now = Date.now() / 1000;
 const startUnix = now - 60;

diff --git a/js_modules/dagster-ui/packages/ui-core/src/testing/StorybookProvider.tsx b/js_modules/dagster-ui/packages/ui-core/src/testing/StorybookProvider.tsx
@@ -1,13 +1,11 @@
-import {loader} from 'graphql.macro';
 import * as React from 'react';
 import {MemoryRouter, MemoryRouterProps} from 'react-router-dom';
 
 import {ApolloTestProps, ApolloTestProvider} from './ApolloTestProvider';
 import {CustomAlertProvider} from '../app/CustomAlertProvider';
+import typeDefs from '../graphql/schema.graphql';
 import {WorkspaceProvider} from '../workspace/WorkspaceContext';
 
-const typeDefs = loader('../graphql/schema.graphql');
-
 interface Props {
   children: React.ReactNode;
   routerProps?: MemoryRouterProps;

diff --git a/js_modules/dagster-ui/packages/ui-core/typings.d.ts b/js_modules/dagster-ui/packages/ui-core/typings.d.ts
@@ -21,6 +21,13 @@ declare module 'worker-loader!*' {
   export default WebpackWorker;
 }
 
+declare module '*.graphql' {
+  import {DocumentNode} from 'graphql';
+  const Schema: DocumentNode;
+
+  export = Schema;
+}
+
 declare module 'chartjs-adapter-date-fns';
 
 declare namespace Intl {