Add shown/hidden indicator to select first column quick pick (#4314)

Author: mattseddon

extension/src/experiments/index.ts

@@ -27,7 +27,7 @@ import { pickSortsToRemove, pickSortToAdd } from './model/sortBy/quickPick'
 import { ColumnsModel } from './columns/model'
 import { ExperimentsData } from './data'
 import { stopWorkspaceExperiment } from './processExecution'
-import { Experiment, ColumnType, TableData } from './webview/contract'
+import { Experiment, ColumnType, TableData, Column } from './webview/contract'
 import { WebviewMessages } from './webview/messages'
 import { DecorationProvider } from './model/decorationProvider'
 import { starredFilter } from './model/filterBy/constants'
@@ -369,9 +369,15 @@ export class Experiments extends BaseRepository<TableData> {
   public async selectFirstColumns() {
     const columns = this.columns.getTerminalNodes()
 
-    const selected = await pickPaths(
-      columns.map(column => ({ ...column, selected: false })),
-      Title.SELECT_FIRST_COLUMNS
+    const selected = await pickPaths<Column>(
+      columns,
+      Title.SELECT_FIRST_COLUMNS,
+      element => ({
+        description: element.selected ? '$(eye)' : '$(eye-closed)',
+        label: element.path,
+        picked: false,
+        value: element
+      })
     )
     if (!definedAndNonEmpty(selected)) {
       return

extension/src/path/selection/quickPick.ts

@@ -14,19 +14,24 @@ type PathWithSelected<T extends PathType> = T & {
   selected: boolean
 }
 
-const getItem = <T extends PathType>(element: PathWithSelected<T>) => ({
+const collectDefaultItem = <T extends PathType>(
+  element: PathWithSelected<T>
+): QuickPickItemWithValue<PathWithSelected<T>> => ({
   label: element.path,
   picked: element.selected,
   value: element
 })
 
 const collectItems = <T extends PathType>(
-  paths: PathWithSelected<T>[]
+  paths: PathWithSelected<T>[],
+  collectItem: (
+    element: PathWithSelected<T>
+  ) => QuickPickItemWithValue<PathWithSelected<T>>
 ): QuickPickItemWithValue<PathWithSelected<T>>[] => {
   const acc: QuickPickItemWithValue<PathWithSelected<T>>[] = []
 
   for (const path of paths) {
-    acc.push(getItem(path))
+    acc.push(collectItem(path))
   }
 
   return acc
@@ -37,15 +42,18 @@ export const pickPaths = <T extends PathType>(
   title:
     | typeof Title.SELECT_PLOTS
     | typeof Title.SELECT_COLUMNS
-    | typeof Title.SELECT_FIRST_COLUMNS
+    | typeof Title.SELECT_FIRST_COLUMNS,
+  collectItem: (
+    element: PathWithSelected<T>
+  ) => QuickPickItemWithValue<PathWithSelected<T>> = collectDefaultItem
 ): Thenable<PathWithSelected<T>[] | undefined> => {
   const type = Title.SELECT_PLOTS === title ? 'plots' : 'columns'
 
   if (!definedAndNonEmpty(paths)) {
     return Toast.showError(`There are no ${type} to select.`)
   }
 
-  const items = collectItems(paths)
+  const items = collectItems(paths, collectItem)
 
   return quickPickManyValues<PathWithSelected<T>>(items, {
     title

extension/src/test/suite/experiments/columns/tree.test.ts

@@ -17,6 +17,7 @@ import {
   QuickPickItemWithValue,
   QuickPickOptionsWithTitle
 } from '../../../../vscode/quickPick'
+import { Title } from '../../../../vscode/title'
 
 suite('Experiments Columns Tree Test Suite', () => {
   const paramsFile = 'params.yaml'
@@ -379,7 +380,7 @@ suite('Experiments Columns Tree Test Suite', () => {
         otherColumns.push(column)
       }
 
-      ;(
+      const mockShowQuickPick = (
         stub(window, 'showQuickPick') as SinonStub<
           [items: readonly QuickPickItem[], options: QuickPickOptionsWithTitle],
           Thenable<QuickPickItemWithValue<{ path: string }>[] | undefined>
@@ -414,6 +415,21 @@ suite('Experiments Columns Tree Test Suite', () => {
         ...firstColumns,
         ...otherColumns
       ])
+
+      expect(mockShowQuickPick).to.be.calledWithExactly(
+        columnsModel.getTerminalNodes().map(column => ({
+          description: '$(eye)',
+          label: column.path,
+          picked: false,
+          value: column
+        })),
+        {
+          canPickMany: true,
+          matchOnDescription: true,
+          matchOnDetail: true,
+          title: Title.SELECT_FIRST_COLUMNS
+        }
+      )
     })
   })
 })