Implement checkbox selection (#1964)

* Implement checkbox selection

* Add test for batch selection

Author: wolmir

webview/__mocks__/@vscode/webview-ui-toolkit/react.tsx

@@ -16,3 +16,11 @@ export const VSCodeButton: React.FC<MockButtonProps> = ({
 export const VSCodeDivider: React.FC = () => {
   return <hr />
 }
+
+type MockCheckboxProps = {
+  onClick: () => void
+}
+
+export const VSCodeCheckbox: React.FC<MockCheckboxProps> = ({ onClick }) => {
+  return <input type="checkbox" onClick={onClick} />
+}

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

@@ -796,11 +796,11 @@ describe('App', () => {
         })
       )
 
-      const firstRow = screen.getByTestId('timestamp___1.exp-e7a67')
-      fireEvent.click(firstRow)
+      const firstRowCheckbox = within(getRow('4fb124a')).getByRole('checkbox')
+      fireEvent.click(firstRowCheckbox)
 
-      const secondRow = screen.getByTestId('timestamp___1.test-branch')
-      fireEvent.click(secondRow)
+      const secondRowCheckbox = within(getRow('42b8736')).getByRole('checkbox')
+      fireEvent.click(secondRowCheckbox)
 
       const target = screen.getByText('4fb124a')
       fireEvent.contextMenu(target, { bubbles: true })
@@ -810,6 +810,40 @@ describe('App', () => {
       const itemLabels = menuitems.map(item => item.textContent)
       expect(itemLabels).toContain('Remove Selected Rows')
     })
+
+    it('should allow batch selection of rows by shift-clicking a range of them', () => {
+      render(<App />)
+
+      fireEvent(
+        window,
+        new MessageEvent('message', {
+          data: {
+            data: {
+              ...tableDataFixture,
+              hasRunningExperiment: false
+            },
+            type: MessageToWebviewType.SET_DATA
+          }
+        })
+      )
+
+      const firstRowCheckbox = within(getRow('4fb124a')).getByRole('checkbox')
+      fireEvent.click(firstRowCheckbox)
+
+      const tailRow = within(getRow('42b8736')).getByRole('checkbox')
+      fireEvent.click(tailRow, { shiftKey: true })
+
+      const selectedRows = screen.getAllByRole('row', { selected: true })
+      expect(selectedRows.length).toBe(4)
+
+      const target = screen.getByText('4fb124a')
+      fireEvent.contextMenu(target, { bubbles: true })
+
+      jest.advanceTimersByTime(100)
+      const menuitems = screen.getAllByRole('menuitem')
+      const itemLabels = menuitems.map(item => item.textContent)
+      expect(itemLabels).toContain('Star Experiments')
+    })
   })
 
   describe('Star Experiments', () => {
@@ -915,10 +949,10 @@ describe('App', () => {
       )
 
       mockPostMessage.mockReset()
-      const mainRow = getRow('main')
+      const mainRow = within(getRow('main')).getByRole('checkbox')
       fireEvent.click(mainRow)
 
-      const firstTipRow = getRow('4fb124a')
+      const firstTipRow = within(getRow('4fb124a')).getByRole('checkbox')
       fireEvent.click(firstTipRow)
 
       fireEvent.contextMenu(mainRow, { bubbles: true })

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

@@ -1,5 +1,6 @@
 import React from 'react'
 import cx from 'classnames'
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react'
 import styles from './styles.module.scss'
 import { CellProp, RowProp } from './interfaces'
 import ClockIcon from '../../../shared/components/icons/Clock'
@@ -33,13 +34,15 @@ const RowExpansionButton: React.FC<RowProp> = ({ row }) =>
 export const FirstCell: React.FC<
   CellProp & {
     bulletColor?: string
+    isRowSelected: boolean
     toggleExperiment: () => void
     toggleRowSelection: () => void
     toggleStarred: () => void
   }
 > = ({
   cell,
   bulletColor,
+  isRowSelected,
   toggleExperiment,
   toggleRowSelection,
   toggleStarred
@@ -58,19 +61,24 @@ export const FirstCell: React.FC<
           isPlaceholder && styles.groupPlaceholder
         )
       })}
-      {...clickAndEnterProps(toggleRowSelection)}
     >
       <div className={styles.innerCell}>
-        <div
-          className={styles.starSwitch}
-          role="switch"
-          aria-checked={starred}
-          tabIndex={0}
-          {...clickAndEnterProps(toggleStarred)}
-          data-testid="star-icon"
-        >
-          {starred && <StarFull />}
-          {!starred && <StarEmpty />}
+        <div className={styles.rowActions}>
+          <VSCodeCheckbox
+            {...clickAndEnterProps(toggleRowSelection)}
+            checked={isRowSelected}
+          />
+          <div
+            className={styles.starSwitch}
+            role="switch"
+            aria-checked={starred}
+            tabIndex={0}
+            {...clickAndEnterProps(toggleStarred)}
+            data-testid="star-icon"
+          >
+            {starred && <StarFull />}
+            {!starred && <StarEmpty />}
+          </div>
         </div>
         <RowExpansionButton row={row} />
         <span

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

@@ -10,7 +10,7 @@ import { sendMessage } from '../../../shared/vscode'
 import { ContextMenu } from '../../../shared/components/contextMenu/ContextMenu'
 import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMenu'
 import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption'
-import { clickAndEnterProps } from '../../../util/props'
+import { HandlerFunc } from '../../../util/props'
 import { cond } from '../../../util/helpers'
 
 const getExperimentTypeClass = ({ running, queued, selected }: Experiment) => {
@@ -255,14 +255,19 @@ const getRowClassNames = (
   )
 }
 
+export type BatchSelectionProp = {
+  batchRowSelection: (prop: RowProp) => void
+}
+
 export const RowContent: React.FC<
-  RowProp & { className?: string } & WithChanges
+  RowProp & { className?: string } & WithChanges & BatchSelectionProp
 > = ({
   row,
   className,
   changes,
   contextMenuDisabled,
-  projectHasCheckpoints
+  projectHasCheckpoints,
+  batchRowSelection
 }): JSX.Element => {
   const {
     getRowProps,
@@ -294,11 +299,18 @@ export const RowContent: React.FC<
 
   const isRowSelected = !!selectedRows[id]
 
-  const toggleRowSelection = React.useCallback(() => {
-    if (!isWorkspace) {
-      toggleRowSelected?.({ row })
-    }
-  }, [row, toggleRowSelected, isWorkspace])
+  const toggleRowSelection = React.useCallback<HandlerFunc<HTMLElement>>(
+    args => {
+      if (!isWorkspace) {
+        if (args?.mouse?.shiftKey) {
+          batchRowSelection({ row })
+        } else {
+          toggleRowSelected?.({ row })
+        }
+      }
+    },
+    [row, toggleRowSelected, isWorkspace, batchRowSelection]
+  )
 
   return (
     <ContextMenu
@@ -323,13 +335,13 @@ export const RowContent: React.FC<
         })}
         tabIndex={0}
         role="row"
-        {...clickAndEnterProps(toggleRowSelection)}
         aria-selected={isRowSelected}
         data-testid={isWorkspace && 'workspace-row'}
       >
         <FirstCell
           cell={firstCell}
           bulletColor={displayColor}
+          isRowSelected={isRowSelected}
           toggleExperiment={toggleExperiment}
           toggleRowSelection={toggleRowSelection}
           toggleStarred={toggleStarred}

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

@@ -4,10 +4,12 @@ import { RowProp } from './interfaces'
 export interface RowSelectionContextValue {
   selectedRows: Record<string, RowProp | undefined>
   toggleRowSelected: ((row: RowProp) => void) | undefined
+  batchSelection: ((batch: RowProp[]) => void) | undefined
   clearSelectedRows: (() => void) | undefined
 }
 
 export const RowSelectionContext = createContext<RowSelectionContextValue>({
+  batchSelection: undefined,
   clearSelectedRows: undefined,
   selectedRows: {},
   toggleRowSelected: undefined
@@ -32,13 +34,33 @@ export const RowSelectionProvider: React.FC<{ children: React.ReactNode }> = ({
     })
   }
 
+  const batchSelection = (batch: RowProp[]) => {
+    const selectedRowsCopy = { ...selectedRows }
+
+    for (const rowProp of batch) {
+      const {
+        row: {
+          values: { id }
+        }
+      } = rowProp
+      selectedRowsCopy[id] = rowProp
+    }
+
+    setSelectedRows(selectedRowsCopy)
+  }
+
   const clearSelectedRows = () => {
     setSelectedRows({})
   }
 
   return (
     <RowSelectionContext.Provider
-      value={{ clearSelectedRows, selectedRows, toggleRowSelected }}
+      value={{
+        batchSelection,
+        clearSelectedRows,
+        selectedRows,
+        toggleRowSelected
+      }}
     >
       {children}
     </RowSelectionContext.Provider>