Improve max table depth feature (#2538)

* switch phrasing from "depth" to "height"
* add a description to quick pick
* add missing telemetry event
* stop configuration from updating if the user does not type anything into the input box

Author: julieg18

README.md

@@ -150,7 +150,7 @@ These are the VS Code [settings] available for the Extension:
 | -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `dvc.dvcPath`                          | Path or shell command to the DVC binary. Required unless Microsoft's [Python extension] is installed and the `dvc` package found in its environment. |
 | `dvc.pythonPath`                       | Path to the desired Python interpreter to use with DVC. Required when using a virtual environment.                                                   |
-| `dvc.expTableHeadMaxLayers`            | Maximum depth of experiment table head rows.                                                                                                         |
+| `dvc.experimentsTableHeadMaxHeight`    | Maximum height of experiment table head rows.                                                                                                        |
 | `dvc.doNotShowWalkthroughAfterInstall` | Do not prompt to show the Get Started page after installing. Useful for pre-configured development environments                                      |
 | `dvc.doNotRecommendRedHatExtension`    | Do not prompt to install the Red Hat YAML extension, which helps with DVC YAML schema validation (`dvc.yaml` and `.dvc` files).                      |
 | `dvc.doNotShowCliUnavailable`          | Do not warn when the workspace contains a DVC project but the DVC binary is unavailable.                                                             |

extension/package.json

@@ -554,9 +554,9 @@
           "type": "string",
           "default": null
         },
-        "dvc.expTableHeadMaxLayers": {
-          "title": "%config.expTableHeadMaxLayers.title%",
-          "description": "%config.expTableHeadMaxLayers.description%",
+        "dvc.experimentsTableHeadMaxHeight": {
+          "title": "%config.experimentsTableHeadMaxHeight.title%",
+          "description": "%config.experimentsTableHeadMaxHeight.description%",
           "type": "number",
           "default": 5
         },

extension/package.nls.json

@@ -84,8 +84,8 @@
   "config.doNotShowUnableToFilter.title": "Do not warn before disabling auto-apply filters to experiment selection.",
   "config.dvcPath.description": "Path or shell command to the DVC binary. Required unless Microsoft's Python extension is installed and the `dvc` package found in its environment.",
   "config.dvcPath.title": "DVC Path (or shell command)",
-  "config.expTableHeadMaxLayers.title": "Maximum depth of Experiment table head rows",
-  "config.expTableHeadMaxLayers.description": "Use 0 for infinite depth.",
+  "config.experimentsTableHeadMaxHeight.title": "Maximum height of Experiment table head rows",
+  "config.experimentsTableHeadMaxHeight.description": "Use 0 for infinite height.",
   "config.pythonPath.description": "Path to the desired Python interpreter to use with DVC. Required when using a virtual environment. Overrides any other extension's settings for this extension's purposes.",
   "config.pythonPath.title": "Python Interpreter"
 }

extension/src/experiments/model/filterBy/quickPick.ts

@@ -98,7 +98,7 @@ const getValue = (operator: Operator): Thenable<string | undefined> => {
         isFreeTextDate(text)
           ? null
           : 'please enter a valid date of the form yyyy-mm-dd',
-      getIsoDate()
+      { value: getIsoDate() }
     )
   }
   return getInput(Title.ENTER_FILTER_VALUE)

extension/src/experiments/webview/messages.ts

@@ -139,7 +139,7 @@ export class WebviewMessages {
           this.showPlots()
         ])
 
-      case MessageFromWebviewType.SET_EXPERIMENTS_HEADER_DEPTH: {
+      case MessageFromWebviewType.SET_EXPERIMENTS_HEADER_HEIGHT: {
         return this.setMaxTableHeadDepth()
       }
 
@@ -168,12 +168,23 @@ export class WebviewMessages {
 
   private async setMaxTableHeadDepth() {
     const newValue = await getValidInput(
-      Title.SET_EXPERIMENTS_HEADER_DEPTH,
+      Title.SET_EXPERIMENTS_HEADER_HEIGHT,
       val => {
         return Number.isNaN(Number(val)) ? 'Input needs to be a number' : ''
-      }
+      },
+      { prompt: 'Use 0 for infinite height.' }
     )
+
+    if (!newValue) {
+      return
+    }
+
     setConfigValue(ConfigKey.EXP_TABLE_HEAD_MAX_DEPTH, Number(newValue))
+    sendTelemetryEvent(
+      EventName.VIEWS_EXPERIMENTS_TABLE_SET_MAX_HEADER_HEIGHT,
+      undefined,
+      undefined
+    )
   }
 
   private setColumnOrder(order: string[]) {

extension/src/telemetry/constants.ts

@@ -28,8 +28,6 @@ export const EventName = Object.assign(
     EXTENSION_EXECUTION_DETAILS_CHANGED: 'extension.executionDetails.changed',
     EXTENSION_LOAD: 'extension.load',
 
-    SET_EXPERIMENTS_HEADER_DEPTH: 'extension.updateHeaderDepth',
-
     VIEWS_EXPERIMENTS_TABLE_CLOSED: 'views.experimentsTable.closed',
     VIEWS_EXPERIMENTS_TABLE_COLUMNS_REORDERED:
       'views.experimentsTable.columnsReordered',
@@ -55,6 +53,8 @@ export const EventName = Object.assign(
       'views.experimentsTable.selectColumns',
     VIEWS_EXPERIMENTS_TABLE_SELECT_EXPERIMENTS_FOR_PLOTS:
       'views.experimentsTable.selectExperimentsForPlots',
+    VIEWS_EXPERIMENTS_TABLE_SET_MAX_HEADER_HEIGHT:
+      'views.experimentsTable.updateHeaderMaxHeight',
     VIEWS_EXPERIMENTS_TABLE_SORT_COLUMN:
       'views.experimentsTable.columnSortAdded',
 
@@ -197,8 +197,6 @@ export interface IEventNamePropertyMapping {
   [EventName.EXTENSION_SHOW_COMMANDS]: undefined
   [EventName.EXTENSION_SHOW_OUTPUT]: undefined
 
-  [EventName.SET_EXPERIMENTS_HEADER_DEPTH]: undefined
-
   [EventName.VIEWS_EXPERIMENTS_TREE_OPENED]: DvcRootCount
   [EventName.VIEWS_EXPERIMENTS_FILTER_BY_TREE_OPENED]: DvcRootCount
   [EventName.VIEWS_EXPERIMENTS_METRICS_AND_PARAMS_TREE_OPENED]: DvcRootCount
@@ -213,6 +211,7 @@ export interface IEventNamePropertyMapping {
   [EventName.VIEWS_EXPERIMENTS_TABLE_RESIZE_COLUMN]: {
     width: number
   }
+  [EventName.VIEWS_EXPERIMENTS_TABLE_SET_MAX_HEADER_HEIGHT]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_SORT_COLUMN]: SortDefinition
   [EventName.VIEWS_EXPERIMENTS_TABLE_REMOVE_COLUMN_SORT]: {
     path: string

extension/src/test/suite/experiments/index.test.ts

@@ -882,17 +882,18 @@ suite('Experiments Test Suite', () => {
     it('should be able to handle a message to update the table depth', async () => {
       const { experiments } = buildExperiments(disposable, expShowFixture)
       const inputEvent = getInputBoxEvent('0')
-      const tableMaxDepthOption = 'dvc.expTableHeadMaxLayers'
+      const tableMaxDepthOption = 'dvc.experimentsTableHeadMaxHeight'
       const tableMaxDepthChanged = configurationChangeEvent(
         tableMaxDepthOption,
         disposable
       )
 
       const webview = await experiments.showWebview()
 
+      const mockSendTelemetryEvent = stub(Telemetry, 'sendTelemetryEvent')
       const mockMessageReceived = getMessageReceivedEmitter(webview)
       mockMessageReceived.fire({
-        type: MessageFromWebviewType.SET_EXPERIMENTS_HEADER_DEPTH
+        type: MessageFromWebviewType.SET_EXPERIMENTS_HEADER_HEIGHT
       })
 
       await inputEvent
@@ -902,6 +903,15 @@ suite('Experiments Test Suite', () => {
       expect(
         await workspace.getConfiguration().get(tableMaxDepthOption)
       ).to.equal(0)
+      expect(mockSendTelemetryEvent).to.be.calledOnce
+      expect(
+        mockSendTelemetryEvent,
+        'should send a telemetry call that tells you the max height has been updated'
+      ).to.be.calledWithExactly(
+        EventName.VIEWS_EXPERIMENTS_TABLE_SET_MAX_HEADER_HEIGHT,
+        undefined,
+        undefined
+      )
     }).timeout(WEBVIEW_TEST_TIMEOUT)
 
     it("should be able to handle a message to toggle an experiment's star status", async () => {

extension/src/vscode/config.ts

@@ -5,7 +5,7 @@ export enum ConfigKey {
   DO_NOT_SHOW_CLI_UNAVAILABLE = 'dvc.doNotShowCliUnavailable',
   DO_NOT_SHOW_WALKTHROUGH_AFTER_INSTALL = 'dvc.doNotShowWalkthroughAfterInstall',
   DO_NOT_SHOW_UNABLE_TO_FILTER = 'dvc.doNotShowUnableToFilter',
-  EXP_TABLE_HEAD_MAX_DEPTH = 'dvc.expTableHeadMaxLayers',
+  EXP_TABLE_HEAD_MAX_DEPTH = 'dvc.experimentsTableHeadMaxHeight',
   DVC_PATH = 'dvc.dvcPath',
   PYTHON_PATH = 'dvc.pythonPath'
 }

extension/src/vscode/inputBox.ts

@@ -10,10 +10,11 @@ export const getInput = (title: Title, value?: string) =>
 export const getValidInput = (
   title: Title,
   validateInput: (text?: string) => null | string,
-  value?: string
+  options?: { prompt?: string; value?: string }
 ) =>
   window.showInputBox({
+    prompt: options?.prompt,
     title,
     validateInput,
-    value
+    value: options?.value
   })

extension/src/vscode/title.ts

@@ -18,7 +18,7 @@ export enum Title {
   SELECT_SORT_DIRECTION = 'Select Sort Direction',
   SELECT_SORTS_TO_REMOVE = 'Select Sort(s) to Remove',
   SETUP_WORKSPACE = 'Setup the Workspace',
-  SET_EXPERIMENTS_HEADER_DEPTH = 'Set Maximum Experiment Table Header Depth'
+  SET_EXPERIMENTS_HEADER_HEIGHT = 'Set Maximum Experiment Table Header Height'
 }
 
 export const getEnterValueTitle = (path: string): Title =>