Merge pull request #1906 from iterative/multi-select-ctx-menu-experiments-table

Add Multi-Select context menu to Experiments Table

Author: wolmir

extension/src/experiments/index.ts

@@ -624,8 +624,11 @@ export class Experiments extends BaseRepository<TableData> {
     return this.runCommand(AvailableCommands.EXPERIMENT_APPLY, experimentId)
   }
 
-  private removeExperiment(experimentId: string) {
-    return this.runCommand(AvailableCommands.EXPERIMENT_REMOVE, experimentId)
+  private removeExperiment(experimentId: string | string[]) {
+    return this.runCommand(
+      AvailableCommands.EXPERIMENT_REMOVE,
+      ...[experimentId].flat()
+    )
   }
 
   private async checkAutoApplyFilters(...filterIdsToRemove: string[]) {

extension/src/webview/contract.ts

@@ -97,7 +97,7 @@ export type MessageFromWebview =
     }
   | {
       type: MessageFromWebviewType.REMOVE_EXPERIMENT
-      payload: string
+      payload: string | string[]
     }
   | {
       type: MessageFromWebviewType.SORT_COLUMN

webview/src/experiments/components/App.test.tsx

@@ -671,6 +671,134 @@ describe('App', () => {
     })
   })
 
+  describe('Row Context Menu', () => {
+    it('should be available when there is data and no running experiments', async () => {
+      render(<App />)
+
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          data: {
+            data: {
+              ...tableDataFixture,
+              hasRunningExperiment: false
+            },
+            type: MessageToWebviewType.SET_DATA
+          }
+        })
+      )
+
+      const target = screen.getByTestId('workspace-row')
+      fireEvent.contextMenu(target, { bubbles: true })
+
+      const menu = await screen.findByTestId('messages-menu')
+      expect(menu).toBeDefined()
+    })
+
+    it('should present the correct options for the workspace row with no checkpoints', async () => {
+      render(<App />)
+
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          data: {
+            data: deeplyNestedTableDataFixture,
+            type: MessageToWebviewType.SET_DATA
+          }
+        })
+      )
+
+      const target = screen.getByTestId('workspace-row')
+      fireEvent.contextMenu(target, { bubbles: true })
+
+      const menuitems = await screen.findAllByRole('menuitem')
+      const itemLabels = menuitems.map(item => item.textContent)
+      expect(itemLabels).toStrictEqual(['Modify and Run', 'Modify and Queue'])
+    })
+
+    it('should present the correct options for the main row with checkpoints', async () => {
+      render(<App />)
+
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          data: {
+            data: {
+              ...tableDataFixture,
+              hasRunningExperiment: false
+            },
+            type: MessageToWebviewType.SET_DATA
+          }
+        })
+      )
+
+      const target = screen.getByText('main')
+      fireEvent.contextMenu(target, { bubbles: true })
+
+      const menuitems = await screen.findAllByRole('menuitem')
+      const itemLabels = menuitems.map(item => item.textContent)
+      expect(itemLabels).toStrictEqual([
+        'Modify and Resume',
+        'Modify, Reset and Run',
+        'Modify and Queue'
+      ])
+    })
+
+    it('should present the Remove experiment option for the checkpoint tips', async () => {
+      render(<App />)
+
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          data: {
+            data: {
+              ...tableDataFixture,
+              hasRunningExperiment: false
+            },
+            type: MessageToWebviewType.SET_DATA
+          }
+        })
+      )
+
+      const target = screen.getByText('4fb124a')
+      fireEvent.contextMenu(target, { bubbles: true })
+
+      const menuitems = await screen.findAllByRole('menuitem')
+      const itemLabels = menuitems.map(item => item.textContent)
+      expect(itemLabels).toContain('Remove')
+    })
+
+    it('should present the Remove option if multiple checkpoint tip rows are selected', async () => {
+      render(<App />)
+
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          data: {
+            data: {
+              ...tableDataFixture,
+              hasRunningExperiment: false
+            },
+            type: MessageToWebviewType.SET_DATA
+          }
+        })
+      )
+
+      const firstRow = screen.getByTestId('timestamp___1.exp-e7a67')
+      fireEvent.click(firstRow)
+
+      const secondRow = screen.getByTestId('timestamp___1.test-branch')
+      fireEvent.click(secondRow)
+
+      const target = await screen.findByText('4fb124a')
+      fireEvent.contextMenu(target, { bubbles: true })
+
+      const menuitems = await screen.findAllByRole('menuitem')
+      const itemLabels = menuitems.map(item => item.textContent)
+      expect(itemLabels).toContain('Remove Selected Rows')
+    })
+  })
+
   describe('Context Menu Suppression', () => {
     it('Suppresses the context menu on a table with no data', () => {
       render(<App />)

webview/src/experiments/components/Experiments.tsx

@@ -21,6 +21,7 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { Table } from './table/Table'
 import styles from './table/styles.module.scss'
 import { AddColumns, Welcome } from './GetStarted'
+import { RowSelectionProvider } from './table/RowSelectionContext'
 import buildDynamicColumns from '../util/buildDynamicColumns'
 import { sendMessage } from '../../shared/vscode'
 import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper'
@@ -223,7 +224,9 @@ export const ExperimentsTable: React.FC<{
 
   return (
     <DragDropProvider>
-      <Table instance={instance} tableData={tableData} />
+      <RowSelectionProvider>
+        <Table instance={instance} tableData={tableData} />
+      </RowSelectionProvider>
     </DragDropProvider>
   )
 }

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

@@ -3,6 +3,7 @@ import cx from 'classnames'
 import styles from './styles.module.scss'
 import { CellProp, RowProp } from './interfaces'
 import ClockIcon from '../../../shared/components/icons/Clock'
+import { clickAndEnterProps } from '../../../util/props'
 
 const RowExpansionButton: React.FC<RowProp> = ({ row }) =>
   row.canExpand ? (
@@ -31,8 +32,10 @@ const RowExpansionButton: React.FC<RowProp> = ({ row }) =>
 export const FirstCell: React.FC<
   CellProp & {
     bulletColor?: string
+    toggleExperiment: () => void
+    toggleRowSelection: () => void
   }
-> = ({ cell, bulletColor }) => {
+> = ({ cell, bulletColor, toggleExperiment, toggleRowSelection }) => {
   const { row, isPlaceholder } = cell
 
   return (
@@ -44,14 +47,24 @@ export const FirstCell: React.FC<
           isPlaceholder && styles.groupPlaceholder
         )
       })}
+      {...clickAndEnterProps(toggleRowSelection)}
     >
       <div className={styles.innerCell}>
         <RowExpansionButton row={row} />
-        <span className={styles.bullet} style={{ color: bulletColor }}>
+        <span
+          className={styles.bullet}
+          style={{ color: bulletColor }}
+          {...clickAndEnterProps(toggleExperiment)}
+        >
           {row.original.queued && <ClockIcon />}
         </span>
         {isPlaceholder ? null : (
-          <div className={styles.cellContents}>{cell.render('Cell')}</div>
+          <div
+            className={styles.cellContents}
+            {...clickAndEnterProps(toggleExperiment)}
+          >
+            {cell.render('Cell')}
+          </div>
         )}
       </div>
     </div>