Upgrade Storybook to v7

webview/.storybook/main.ts

@@ -1,12 +1,15 @@
-import webpack from 'webpack'
+import type { StorybookConfig } from '@storybook/react-webpack5'
 import webpackConfig from '../webpack.config'
 
-export default {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+export const config: StorybookConfig = {
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: { fastRefresh: true }
+  },
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   staticDirs: ['../../extension/src/test/fixtures/plotsDiff/staticImages'],
   addons: [
     'storybook-addon-themes',
-    'storybook-addon-designs',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     {
@@ -21,17 +24,16 @@ export default {
       }
     }
   ],
-  core: {
-    builder: 'webpack5'
-  },
   typescript: {
     reactDocgen: false
   },
-  webpackFinal: (config: webpack.Configuration) => {
+  webpackFinal: config => {
     return {
       ...config,
       module: webpackConfig.module,
       mode: 'development'
     }
   }
 }
+
+export default config

webview/.storybook/preview.ts

@@ -1,3 +1,4 @@
+import { Preview } from '@storybook/react'
 import { InternalVsCodeApi } from '../src/shared/api'
 import { action } from '@storybook/addon-actions'
 import { viewports } from '../src/stories/util'
@@ -17,30 +18,35 @@ window.acquireVsCodeApi = () =>
     setState: action('setState')
   } as unknown as InternalVsCodeApi)
 
-export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
-  viewport: {
-    viewports,
-    defaultViewport: 'default'
-  },
-  themes: {
-    default: 'Default Dark',
-    list: [
-      { name: 'Default Dark', class: 'vscode-dark', color: '#222' },
-      { name: 'Default Light', class: 'vscode-light', color: '#EEE' },
-      { name: 'Red', class: 'vscode-red', color: '#F22' },
-      { name: 'Dive Bar', class: 'vscode-divebar', color: '#E2E' },
-      { name: 'One Dark Pro', class: 'vscode-onedarkpro', color: '#333' },
-      {
-        name: 'High Contrast Light',
-        class: 'vscode-high-contrast-light',
-        color: '#FFF'
-      },
-      {
-        name: 'High Contrast Dark',
-        class: 'vscode-high-contrast-dark',
-        color: '#000'
-      }
-    ]
+export const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    backgrounds: { disable: true },
+    viewport: {
+      viewports,
+      defaultViewport: 'default'
+    },
+    themes: {
+      default: 'Default Dark',
+      list: [
+        { name: 'Default Dark', class: 'vscode-dark', color: '#222' },
+        { name: 'Default Light', class: 'vscode-light', color: '#EEE' },
+        { name: 'Red', class: 'vscode-red', color: '#F22' },
+        { name: 'Dive Bar', class: 'vscode-divebar', color: '#E2E' },
+        { name: 'One Dark Pro', class: 'vscode-onedarkpro', color: '#333' },
+        {
+          name: 'High Contrast Light',
+          class: 'vscode-high-contrast-light',
+          color: '#FFF'
+        },
+        {
+          name: 'High Contrast Dark',
+          class: 'vscode-high-contrast-dark',
+          color: '#000'
+        }
+      ]
+    }
   }
 }
+
+export default preview

webview/package.json

@@ -11,8 +11,8 @@
     "dev": "webpack watch --mode development",
     "build": "webpack --mode production",
     "test": "jest --collect-coverage",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook --webpack-stats-json",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build --webpack-stats-json",
     "svgr": "svgr --out-dir src/shared/components/icons --ignore-existing ../node_modules/@vscode/codicons/src/icons && svgr -d src/shared/components/icons icons/"
   },
   "main": "./index.js",
@@ -39,14 +39,15 @@
     "vega-util": "1.17.1"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/addon-essentials": "7.0.7",
+    "@storybook/addon-interactions": "7.0.7",
+    "@storybook/addons": "7.0.7",
+    "@storybook/builder-webpack5": "7.0.7",
     "@storybook/manager-webpack5": "6.5.16",
     "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
+    "@storybook/react": "7.0.7",
+    "@storybook/react-webpack5": "7.0.7",
+    "@storybook/testing-library": "0.1.0",
     "@svgr/cli": "7.0.0",
     "@swc/core": "1.3.51",
     "@swc/jest": "0.2.26",
@@ -73,7 +74,7 @@
     "raw-loader": "4.0.2",
     "sass": "1.62.0",
     "sass-loader": "13.2.2",
-    "storybook-addon-designs": "6.3.1",
+    "storybook": "7.0.7",
     "storybook-addon-themes": "6.1.0",
     "style-loader": "3.3.2",
     "ts-loader": "9.4.2",

webview/src/experiments/components/Experiments.tsx

@@ -44,7 +44,7 @@ const ExperimentHeader = () => (
   <div className={styles.experimentHeader}>Experiment</div>
 )
 
-const getDefaultColumnWithIndicatorsPlaceHolder = () =>
+const getDefaultColumn = () =>
   columnHelper.accessor(() => EXPERIMENT_COLUMN_ID, {
     cell: (cell: CellContext<Column, CellValue>) => {
       const {
@@ -91,7 +91,7 @@ const getColumns = (columns: Column[]) => {
     []
 
   return [
-    getDefaultColumnWithIndicatorsPlaceHolder(),
+    getDefaultColumn(),
     ...timestampColumn,
     ...buildColumns(columns, ColumnType.METRICS),
     ...buildColumns(columns, ColumnType.PARAMS),

webview/src/experiments/components/table/Table.tsx

@@ -4,7 +4,6 @@ import cx from 'classnames'
 import styles from './styles.module.scss'
 import { TableHead } from './header/TableHead'
 import { RowSelectionContext } from './RowSelectionContext'
-import { Indicators } from './Indicators'
 import { TableContent } from './body/TableContent'
 import { InstanceProp } from '../../util/interfaces'
 
@@ -53,7 +52,6 @@ export const Table: React.FC<TableProps> = ({
           tableHeadHeight={tableHeadHeight}
         />
       </table>
-      <Indicators />
     </div>
   )
 }

webview/src/experiments/components/table/header/TableHeaderCell.tsx

@@ -12,6 +12,7 @@ import { ExperimentsState } from '../../../store'
 import { ContextMenu } from '../../../../shared/components/contextMenu/ContextMenu'
 import { DragFunction } from '../../../../shared/components/dragDrop/Draggable'
 import { ColumnWithGroup } from '../../../util/buildColumns'
+import { Indicators } from '../Indicators'
 
 const getPercentResizer = (depth: number) => `${100 + depth * 105}%`
 
@@ -162,6 +163,7 @@ export const TableHeaderCell: React.FC<{
             setExpColumnNeedsShadow={setExpColumnNeedsShadow}
             root={root}
           >
+            {depth === 1 && <Indicators />}
             {cellContents}
           </WithExpColumnNeedsShadowUpdates>
         ) : (

webview/src/experiments/components/table/styles.module.scss

@@ -203,13 +203,14 @@ $badge-size: 0.85rem;
 // table head styles
 
 .tableIndicators {
-  position: fixed;
+  display: inline-block;
+  position: absolute;
+  height: 0;
+  overflow: visible;
   top: 0;
   left: 0;
-  z-index: 5;
   font-size: 0.7rem;
-  padding: 0.2rem 0.5rem;
-  text-align: left;
+  padding: 0.2rem 0.7rem;
 }
 
 .experimentsThead {
@@ -314,10 +315,6 @@ $badge-size: 0.85rem;
   padding: 0.31rem $cell-padding;
 }
 
-.leafHeaderCell::after {
-  display: none;
-}
-
 .oneRowHeaderCell {
   vertical-align: bottom;
   height: 50px;

webview/src/stories/ComparisonTable.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { configureStore } from '@reduxjs/toolkit'
 import { userEvent, within } from '@storybook/testing-library'
 import React from 'react'
@@ -36,7 +36,7 @@ export default {
   title: 'Comparison Table'
 } as Meta
 
-const Template: Story = ({ plots, revisions }) => {
+const Template: StoryFn = ({ plots, revisions }) => {
   const store = configureStore({
     reducer: plotsReducers
   })

webview/src/stories/ComparisonTableHeader.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { ComparisonTableHeader } from '../plots/components/comparisonTable/ComparisonTableHeader'
@@ -19,7 +19,7 @@ export default {
   title: 'Comparison Table Header'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   displayColor: string
   name: string
   onClicked: () => void

webview/src/stories/ContextMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
@@ -18,7 +18,7 @@ export default {
   title: 'Context Menu'
 } as Meta
 
-const Template: Story<ContextMenuProps> = () => {
+const Template: StoryFn<ContextMenuProps> = () => {
   return (
     <WebviewWrapper>
       <ContextMenu

webview/src/stories/IconMenu.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { SelectMenu } from '../shared/components/selectMenu/SelectMenu'
@@ -82,7 +82,7 @@ export default {
   title: 'Icon Menu'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   items: IconMenuItemProps[]
 }> = ({ items }) => (
   <WebviewWrapper>

webview/src/stories/Icons.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 
 import { IconWrapper } from './components/IconWrapper'
@@ -42,7 +42,7 @@ export default {
   title: 'Icons'
 } as Meta
 
-const Template: Story = () => {
+const Template: StoryFn = () => {
   return (
     <IconsWrapper>
       <IconWrapper name="Add">

webview/src/stories/Plots.stories.tsx

@@ -1,7 +1,7 @@
 import { configureStore } from '@reduxjs/toolkit'
 import React from 'react'
 import { Provider, useDispatch } from 'react-redux'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { userEvent, within } from '@storybook/testing-library'
 import {
   PlotsData,
@@ -77,7 +77,7 @@ export default {
   title: 'Plots'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   data?: PlotsData
 }> = ({ data }) => {
   const store = configureStore({ reducer: plotsReducers })

webview/src/stories/Ribbon.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import { Provider, useDispatch } from 'react-redux'
 import { configureStore } from '@reduxjs/toolkit'
 import { MessageToWebviewType } from 'dvc/src/webview/contract'
@@ -37,7 +37,7 @@ export default {
   title: 'Plots Ribbon'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   data?: PlotsData
 }> = ({ data }) => {
   const store = configureStore({ reducer: plotsReducers })

webview/src/stories/Setup.stories.tsx

@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { MessageToWebviewType } from 'dvc/src/webview/contract'
 import { SetupData, SetupSection } from 'dvc/src/setup/webview/contract'
@@ -37,7 +37,7 @@ export default {
   title: 'Setup'
 } as Meta
 
-const Template: Story = ({ data }) => {
+const Template: StoryFn = ({ data }) => {
   const app = <App />
   window.postMessage(
     {

webview/src/stories/Slider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
+import type { StoryFn, Meta } from '@storybook/react'
 import React from 'react'
 import { DISABLE_CHROMATIC_SNAPSHOTS } from './util'
 import { Slider } from '../shared/components/slider/Slider'
@@ -14,7 +14,7 @@ export default {
   title: 'Slider'
 } as Meta
 
-const Template: Story<{
+const Template: StoryFn<{
   maximum: number
   defaultValue: number
   label: string