Merge branch 'main' into show-dvc-cli-details-in-setup

extension/package.json

@@ -1653,7 +1653,7 @@
     "vscode-languageclient": "8.1.0"
   },
   "devDependencies": {
-    "@swc/core": "1.3.51",
+    "@swc/core": "1.3.52",
     "@swc/jest": "0.2.26",
     "@types/chai": "4.3.4",
     "@types/chai-as-promised": "7.1.5",
@@ -1699,7 +1699,7 @@
     "vscode-uri": "3.0.7",
     "wdio-vscode-service": "5.0.0",
     "webdriverio": "8.8.4",
-    "webpack": "5.79.0",
+    "webpack": "5.80.0",
     "webpack-cli": "5.0.1"
   },
   "peerDependencies": {

extension/src/test/e2e/extension.test.ts

@@ -51,10 +51,8 @@ describe('Experiments Table Webview', function () {
   const headerRows = 3
   const workspaceRow = 1
   const commitRows = 3
-  const previousCommitRow = 1
-  const actionsRow = 1
-  const initialRows =
-    headerRows + workspaceRow + commitRows + previousCommitRow + actionsRow
+  const branchRow = 1
+  const initialRows = headerRows + workspaceRow + commitRows + branchRow
 
   it('should load as an editor', async function () {
     const workbench = await browser.getWorkbench()
@@ -109,7 +107,7 @@ describe('Experiments Table Webview', function () {
 
     const currentRows = await webview.row$$
 
-    const newRow = currentRows[headerRows + workspaceRow + 1]
+    const newRow = currentRows[headerRows + workspaceRow + branchRow + 1]
 
     const experimentName = (await webview.getExperimentName(newRow)) as string
 

languageServer/package.json

@@ -25,7 +25,7 @@
     "test": "jest --collect-coverage"
   },
   "devDependencies": {
-    "@swc/core": "1.3.51",
+    "@swc/core": "1.3.52",
     "@swc/jest": "0.2.26",
     "@types/jest": "29.5.1",
     "clean-webpack-plugin": "4.0.0",
@@ -34,7 +34,7 @@
     "ts-loader": "9.4.2",
     "lint-staged": "13.2.1",
     "jest": "29.5.0",
-    "webpack": "5.79.0",
+    "webpack": "5.80.0",
     "webpack-cli": "5.0.1",
     "jest-environment-node": "29.5.0"
   }

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,16 +39,17 @@
     "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/core": "1.3.52",
     "@swc/jest": "0.2.26",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
@@ -73,11 +74,11 @@
     "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",
-    "webpack": "5.79.0",
+    "webpack": "5.80.0",
     "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.13.3"
   },

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/body/TableBody.tsx

@@ -1,19 +1,15 @@
 import React from 'react'
-import { useSelector } from 'react-redux'
 import cx from 'classnames'
 import { EXPERIMENT_WORKSPACE_ID } from 'dvc/src/cli/dvc/contract'
 import { ExperimentGroup } from './ExperimentGroup'
 import { BatchSelectionProp, RowContent } from './Row'
 import { WorkspaceRowGroup } from './WorkspaceRowGroup'
-import { PreviousCommitsRow } from './PreviousCommitsRow'
 import styles from '../styles.module.scss'
 import { InstanceProp, RowProp } from '../../../util/interfaces'
-import { ExperimentsState } from '../../../store'
 
 interface TableBodyProps extends RowProp, InstanceProp, BatchSelectionProp {
   root: HTMLElement | null
   tableHeaderHeight: number
-  showPreviousRow?: boolean
   isLast?: boolean
 }
 
@@ -26,7 +22,6 @@ export const TableBody: React.FC<TableBodyProps> = ({
   batchRowSelection,
   root,
   tableHeaderHeight,
-  showPreviousRow,
   isLast
 }) => {
   const contentProps = {
@@ -37,9 +32,6 @@ export const TableBody: React.FC<TableBodyProps> = ({
     projectHasCheckpoints,
     row
   }
-  const isBranchesView = useSelector(
-    (state: ExperimentsState) => state.tableData.isBranchesView
-  )
   const content =
     row.depth > 0 ? (
       <ExperimentGroup {...contentProps} />
@@ -57,12 +49,6 @@ export const TableBody: React.FC<TableBodyProps> = ({
     </WorkspaceRowGroup>
   ) : (
     <>
-      {showPreviousRow && row.depth === 0 && (
-        <PreviousCommitsRow
-          isBranchesView={isBranchesView}
-          nbColumns={row.getAllCells().length}
-        />
-      )}
       <tbody
         className={cx(styles.rowGroup, {
           [styles.experimentGroup]: row.depth > 0,

webview/src/experiments/components/table/body/TableContent.test.tsx

@@ -832,13 +832,7 @@ describe('TableContent', () => {
     )
   }
 
-  it('should not display the branches names before its rows if there is only one branch', () => {
-    renderTableContent()
-
-    expect(screen.queryByTestId('branch-name')).not.toBeInTheDocument()
-  })
-
-  it('should display the branches names before its rows if there are more than one branch', () => {
+  it('should display the branches names before its rows', () => {
     const instanceRows = instance.getRowModel()
     const multipleBranchesInstance = {
       ...instance,

webview/src/experiments/components/table/body/TableContent.tsx

@@ -1,7 +1,6 @@
 import React, { Fragment, RefObject, useCallback, useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { TableBody } from './TableBody'
-import { CommitsAndBranchesNavigation } from './commitsAndBranches/CommitsAndBranchesNavigation'
 import { BranchDivider } from './branchDivider/BranchDivider'
 import { RowSelectionContext } from '../RowSelectionContext'
 import { ExperimentsState } from '../../../store'
@@ -56,19 +55,15 @@ export const TableContent: React.FC<TableContentProps> = ({
     <>
       {branches.map((branch, branchIndex) => {
         const branchRows = rows.filter(row => row.original.branch === branch)
-        const firstPreviousCommitId = branchRows
-          .slice(branchIndex === 0 ? 2 : 1)
-          .find(row => row.depth === 0)?.id
+
         return (
           <Fragment key={branch}>
             {branchRows.map((row, i) => {
               const isFirstRow =
                 (branchIndex === 0 && i === 1) || (branchIndex !== 0 && i === 0)
               return (
                 <Fragment key={row.id}>
-                  {isFirstRow && branches.length > 1 && (
-                    <BranchDivider>{branch}</BranchDivider>
-                  )}
+                  {isFirstRow && <BranchDivider>{branch}</BranchDivider>}
                   <TableBody
                     tableHeaderHeight={tableHeadHeight}
                     root={tableRef.current}
@@ -77,13 +72,11 @@ export const TableContent: React.FC<TableContentProps> = ({
                     hasRunningExperiment={hasRunningExperiment}
                     projectHasCheckpoints={hasCheckpoints}
                     batchRowSelection={batchRowSelection}
-                    showPreviousRow={row.id === firstPreviousCommitId}
                     isLast={i === branchRows.length - 1}
                   />
                 </Fragment>
               )
             })}
-            <CommitsAndBranchesNavigation />
           </Fragment>
         )
       })}

webview/src/experiments/components/table/body/branchDivider/BranchDivider.tsx

@@ -3,6 +3,7 @@ import styles from './styles.module.scss'
 import tablesStyles from '../../styles.module.scss'
 import { Icon } from '../../../../../shared/components/Icon'
 import { GitMerge } from '../../../../../shared/components/icons'
+import { CommitsAndBranchesNavigation } from '../commitsAndBranches/CommitsAndBranchesNavigation'
 
 export const BranchDivider: React.FC<PropsWithChildren> = ({ children }) => (
   <thead data-testid="branch-name">
@@ -18,6 +19,9 @@ export const BranchDivider: React.FC<PropsWithChildren> = ({ children }) => (
           {children}
         </div>
       </th>
+      <th colSpan={9999} className={styles.branchActions}>
+        <CommitsAndBranchesNavigation />
+      </th>
     </tr>
   </thead>
 )