Merge branch 'main' into rename-section-enums

iterative · Mar 15, 2023 · 6aa2bb1 · 6aa2bb1
2 parents 1340f28 + 3e3aadb
commit 6aa2bb1
Show file tree

Hide file tree

Showing 25 changed files with 370 additions and 365 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,37 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.6.20] - 2023-03-15
+
+### 🚀 New Features and Enhancements
+
+- Make section headers sticky [#3465](https://github.com/iterative/vscode-dvc/pull/3465) by [@sroy3](https://github.com/sroy3)
+- Add show setup commands [#3474](https://github.com/iterative/vscode-dvc/pull/3474) by [@mattseddon](https://github.com/mattseddon)
+
+### 🔨 Maintenance
+
+- Update demo project and latest tested CLI version (2.50.0) [#3473](https://github.com/iterative/vscode-dvc/pull/3473) by [@mattseddon](https://github.com/mattseddon)
+
+## [0.6.19] - 2023-03-15
+
+### 🚀 New Features and Enhancements
+
+- Make the plot sizing sliders sticky [#3443](https://github.com/iterative/vscode-dvc/pull/3443) by [@sroy3](https://github.com/sroy3)
+- Add a slider to resize plots vertically [#3428](https://github.com/iterative/vscode-dvc/pull/3428) by [@sroy3](https://github.com/sroy3)
+- Move Connect to Studio into Setup webview [#3452](https://github.com/iterative/vscode-dvc/pull/3452) by [@mattseddon](https://github.com/mattseddon)
+- Provide option to open and focus relevant Setup section through UI [#3462](https://github.com/iterative/vscode-dvc/pull/3462) by [@mattseddon](https://github.com/mattseddon)
+- Add show experiments button to final experiments screen [#3463](https://github.com/iterative/vscode-dvc/pull/3463) by [@mattseddon](https://github.com/mattseddon)
+
+### 🐛 Bug Fixes
+
+- Make className optional in SectionContainer [#3464](https://github.com/iterative/vscode-dvc/pull/3464) by [@sroy3](https://github.com/sroy3)
+
+### 🔨 Maintenance
+
+- Update demo project and latest tested CLI version (2.47.2) [#3451](https://github.com/iterative/vscode-dvc/pull/3451) by [@mattseddon](https://github.com/mattseddon)
+- Update demo project and latest tested CLI version (2.48.0) [#3457](https://github.com/iterative/vscode-dvc/pull/3457) by [@mattseddon](https://github.com/mattseddon)
+- Fix flaky integration tests [#3461](https://github.com/iterative/vscode-dvc/pull/3461) by [@mattseddon](https://github.com/mattseddon)
+
 ## [0.6.18] - 2023-03-12
 
 ### 🚀 New Features and Enhancements

diff --git a/extension/package.json b/extension/package.json
@@ -9,7 +9,7 @@
   "extensionDependencies": [
     "vscode.git"
   ],
-  "version": "0.6.18",
+  "version": "0.6.20",
   "license": "Apache-2.0",
   "readme": "./README.md",
   "repository": {
@@ -421,6 +421,21 @@
         "command": "dvc.showExperimentsAndPlots",
         "category": "DVC"
       },
+      {
+        "title": "Connect to Studio",
+        "command": "dvc.showStudioConnect",
+        "category": "DVC"
+      },
+      {
+        "title": "Show Studio Settings",
+        "command": "dvc.showStudioSettings",
+        "category": "DVC"
+      },
+      {
+        "title": "Show Setup",
+        "command": "dvc.showSetup",
+        "category": "DVC"
+      },
       {
         "title": "Stop All Running Experiments",
         "command": "dvc.stopAllRunningExperiments",
@@ -841,6 +856,14 @@
           "command": "dvc.showExperimentsAndPlots",
           "when": "dvc.commands.available && dvc.project.available"
         },
+        {
+          "command": "dvc.showStudioConnect",
+          "when": "dvc.commands.available && dvc.project.available && !dvc.studio.connected"
+        },
+        {
+          "command": "dvc.showStudioSettings",
+          "when": "dvc.commands.available && dvc.project.available && dvc.studio.connected"
+        },
         {
           "command": "dvc.stopAllRunningExperiments",
           "when": "dvc.commands.available && dvc.project.available && dvc.experiment.running"
@@ -1398,12 +1421,12 @@
       },
       {
         "view": "dvc.views.studio",
-        "contents": "[$(plug) Connect](command:dvc.showStudioSetup)",
+        "contents": "[$(plug) Connect](command:dvc.showStudioConnect)",
         "when": "!dvc.studio.connected"
       },
       {
         "view": "dvc.views.studio",
-        "contents": "[$(settings-gear) Open Settings](command:dvc.showStudioSetup)",
+        "contents": "[$(settings-gear) Open Settings](command:dvc.showStudioSettings)",
         "when": "dvc.studio.connected"
       },
       {
@@ -1636,8 +1659,8 @@
     "@types/vscode": "1.64.0",
     "@vscode/test-electron": "2.3.0",
     "@vscode/vsce": "2.18.0",
-    "@wdio/cli": "8.5.6",
-    "@wdio/local-runner": "8.5.6",
+    "@wdio/cli": "8.5.7",
+    "@wdio/local-runner": "8.5.7",
     "@wdio/mocha-framework": "8.5.6",
     "@wdio/spec-reporter": "8.4.0",
     "chai": "4.3.7",
@@ -1657,7 +1680,7 @@
     "ts-loader": "9.4.2",
     "vscode-uri": "3.0.7",
     "wdio-vscode-service": "5.0.0",
-    "webdriverio": "8.5.6",
+    "webdriverio": "8.5.7",
     "webpack": "5.76.0",
     "webpack-cli": "5.0.1"
   },

diff --git a/extension/src/cli/dvc/contract.ts b/extension/src/cli/dvc/contract.ts
@@ -1,7 +1,7 @@
 import { Plot } from '../../plots/webview/contract'
 
 export const MIN_CLI_VERSION = '2.30.0'
-export const LATEST_TESTED_CLI_VERSION = '2.48.0'
+export const LATEST_TESTED_CLI_VERSION = '2.50.0'
 export const MAX_CLI_VERSION = '3'
 
 type ErrorContents = { type: string; msg: string }

diff --git a/extension/src/commands/external.ts b/extension/src/commands/external.ts
@@ -95,13 +95,14 @@ export enum RegisteredCommands {
 
   SETUP_SHOW = 'dvc.showSetup',
   SETUP_SHOW_EXPERIMENTS = 'dvc.showExperimentsSetup',
-  SETUP_SHOW_STUDIO = 'dvc.showStudioSetup',
   SELECT_FOCUSED_PROJECTS = 'dvc.selectFocusedProjects',
 
   ADD_STUDIO_ACCESS_TOKEN = 'dvc.addStudioAccessToken',
   UPDATE_STUDIO_ACCESS_TOKEN = 'dvc.updateStudioAccessToken',
   REMOVE_STUDIO_ACCESS_TOKEN = 'dvc.removeStudioAccessToken',
   EXPERIMENT_VIEW_SHARE_TO_STUDIO = 'dvc.views.experiments.shareExperimentToStudio',
+  SETUP_SHOW_STUDIO_CONNECT = 'dvc.showStudioConnect',
+  SETUP_SHOW_STUDIO_SETTINGS = 'dvc.showStudioSettings',
 
   RESET_STATE = 'dvc.resetState'
 }
diff --git a/extension/src/plots/webview/contract.ts b/extension/src/plots/webview/contract.ts
@@ -4,12 +4,12 @@ import { Color } from '../../experiments/model/status/colors'
 export const DEFAULT_NB_ITEMS_PER_ROW = 2
 
 export enum PlotHeight {
-  SMALLER = 0,
-  SMALL = 1,
-  REGULAR = 2,
-  SQUARE = 3,
-  VERTICAL_NORMAL = 4,
-  VERTICAL_LARGER = 5
+  SMALLER,
+  SMALL,
+  REGULAR,
+  SQUARE,
+  VERTICAL_NORMAL,
+  VERTICAL_LARGER
 }
 
 export const DEFAULT_PLOT_HEIGHT = PlotHeight.SMALL

diff --git a/extension/src/setup/register.ts b/extension/src/setup/register.ts
@@ -45,7 +45,14 @@ const registerSetupShowCommands = (
   )
 
   internalCommands.registerExternalCommand(
-    RegisteredCommands.SETUP_SHOW_STUDIO,
+    RegisteredCommands.SETUP_SHOW_STUDIO_CONNECT,
+    async () => {
+      await setup.showSetup(SetupSection.STUDIO)
+    }
+  )
+
+  internalCommands.registerExternalCommand(
+    RegisteredCommands.SETUP_SHOW_STUDIO_SETTINGS,
     async () => {
       await setup.showSetup(SetupSection.STUDIO)
     }

diff --git a/extension/src/telemetry/constants.ts b/extension/src/telemetry/constants.ts
@@ -281,8 +281,9 @@ export interface IEventNamePropertyMapping {
 
   [EventName.SETUP_SHOW]: undefined
   [EventName.SETUP_SHOW_EXPERIMENTS]: undefined
-  [EventName.SETUP_SHOW_STUDIO]: undefined
   [EventName.SELECT_FOCUSED_PROJECTS]: undefined
+  [EventName.SETUP_SHOW_STUDIO_SETTINGS]: undefined
+  [EventName.SETUP_SHOW_STUDIO_CONNECT]: undefined
 
   [EventName.ADD_STUDIO_ACCESS_TOKEN]: undefined
   [EventName.UPDATE_STUDIO_ACCESS_TOKEN]: undefined

diff --git a/extension/src/test/suite/setup/index.test.ts b/extension/src/test/suite/setup/index.test.ts
@@ -870,4 +870,20 @@ suite('Setup Test Suite', () => {
       expect(mockShow).to.be.calledWithMatch({ sectionCollapsed: undefined })
     })
   })
+
+  it('should open the webview with the Studio section focus for dvc.showStudioSettings and dvc.showStudioConnect', async () => {
+    const mockShowWebview = stub(Setup.prototype, 'showSetup').resolves(
+      undefined
+    )
+
+    await commands.executeCommand(RegisteredCommands.SETUP_SHOW_STUDIO_CONNECT)
+
+    expect(mockShowWebview).to.be.calledWithExactly(SetupSection.STUDIO)
+
+    mockShowWebview.resetHistory()
+
+    await commands.executeCommand(RegisteredCommands.SETUP_SHOW_STUDIO_SETTINGS)
+
+    expect(mockShowWebview).to.be.calledWithExactly(SetupSection.STUDIO)
+  })
 })
diff --git a/webview/src/plots/components/PlotsContainer.tsx b/webview/src/plots/components/PlotsContainer.tsx
@@ -14,9 +14,8 @@ import styles from './styles.module.scss'
 import { IconMenuItemProps } from '../../shared/components/iconMenu/IconMenuItem'
 import { sendMessage } from '../../shared/vscode'
 import { Lines, Add, Trash } from '../../shared/components/icons'
-import { MinMaxSlider } from '../../shared/components/slider/MinMaxSlider'
+import { Slider } from '../../shared/components/slider/Slider'
 import { PlotsState } from '../store'
-import { ItemsSlider } from '../../shared/components/slider/ItemsSlider'
 import { SectionContainer } from '../../shared/components/sectionContainer/SectionContainer'
 
 export interface PlotsContainerProps {
@@ -114,6 +113,10 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
       type: MessageFromWebviewType.TOGGLE_PLOTS_SECTION
     })
 
+  const plotHeights = Object.values(PlotHeight).filter(
+    value => typeof value !== 'string'
+  ) as number[]
+
   return (
     <SectionContainer
       menuItems={menuItems}
@@ -129,34 +132,40 @@ export const PlotsContainer: React.FC<PlotsContainerProps> = ({
         [styles.ratioVerticalNormal]: height === PlotHeight.VERTICAL_NORMAL,
         [styles.ratioVerticalLarger]: height === PlotHeight.VERTICAL_LARGER
       })}
-    >
-      {changeSize && hasItems && maxNbPlotsPerRow > 1 && (
-        <div
-          className={styles.sizeSliders}
-          style={{ top: ribbonHeight - 4 }}
-          data-testid="size-sliders"
-        >
-          <div className={styles.sizeSlider}>
-            <MinMaxSlider
-              maximum={-1}
-              minimum={-maxNbPlotsPerRow}
-              label="Plot Width"
-              onChange={nbItems => handleResize(nbItems, height)}
-              defaultValue={-nbItemsPerRow}
-            />
-          </div>
-          <div className={styles.sizeSlider}>
-            <ItemsSlider
-              items={Object.values(PlotHeight) as number[]}
-              label="Plot Height"
-              onChange={newHeight =>
-                handleResize(nbItemsPerRow, newHeight as unknown as PlotHeight)
-              }
-              defaultValue={height}
-            />
+      stickyHeaderTop={ribbonHeight - 4}
+      headerChildren={
+        open &&
+        changeSize &&
+        hasItems &&
+        maxNbPlotsPerRow > 1 && (
+          <div className={styles.sizeSliders} data-testid="size-sliders">
+            <div className={styles.sizeSlider}>
+              <Slider
+                maximum={-1}
+                minimum={-maxNbPlotsPerRow}
+                label="Plot Width"
+                onChange={nbItems => handleResize(nbItems, height)}
+                defaultValue={-nbItemsPerRow}
+              />
+            </div>
+            <div className={styles.sizeSlider}>
+              <Slider
+                minimum={Math.min(...plotHeights)}
+                maximum={Math.max(...plotHeights)}
+                label="Plot Height"
+                onChange={newHeight =>
+                  handleResize(
+                    nbItemsPerRow,
+                    newHeight as unknown as PlotHeight
+                  )
+                }
+                defaultValue={height}
+              />
+            </div>
           </div>
-        </div>
-      )}
+        )
+      }
+    >
       {open && (
         <div
           className={cx({

diff --git a/webview/src/plots/components/styles.module.scss b/webview/src/plots/components/styles.module.scss
@@ -235,19 +235,16 @@ $gap: 20px;
 }
 
 .sizeSliders {
-  margin: 20px;
   display: flex;
   justify-content: end;
   gap: 10px;
-  position: sticky;
   right: 0;
   top: 0;
-  width: 100%;
   display: flex;
   justify-content: end;
-  padding: 20px;
   background-color: $bg-color;
   z-index: 3;
+  justify-self: flex-end;
 }
 
 .sizeSlider {

diff --git a/webview/src/shared/components/iconMenu/IconMenuItem.tsx b/webview/src/shared/components/iconMenu/IconMenuItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { MouseEvent, ReactNode } from 'react'
 import cx from 'classnames'
 import { TippyProps } from '@tippyjs/react'
 import styles from './styles.module.scss'
@@ -8,7 +8,7 @@ import Tooltip from '../tooltip/Tooltip'
 export interface IconMenuItemProps {
   icon: IconValue
   onClick?: () => void
-  onClickNode?: React.ReactNode
+  onClickNode?: ReactNode
   tooltip: string
   hidden?: boolean
 }
@@ -26,12 +26,16 @@ export const IconMenuItem: React.FC<IconMenuItemAllProps> = ({
   tooltipTarget,
   menuTarget
 }) => {
+  const handleOnClick = (e: MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    onClick?.()
+  }
   let button = (
     <Tooltip content={tooltip} singleton={tooltipTarget}>
       <button
         aria-label={tooltip}
         className={cx(styles.item, { [styles.clickable]: !!onClick })}
-        onClick={onClick}
+        onClick={handleOnClick}
         data-testid="icon-menu-item"
       >
         <Icon icon={icon} data-testid="icon-menu-item-icon" width={15} />

diff --git a/webview/src/shared/components/iconMenu/styles.module.scss b/webview/src/shared/components/iconMenu/styles.module.scss
@@ -7,6 +7,7 @@
   border: 1px solid var(--editor-foreground-transparency-5);
   width: max-content;
   background-color: $bg-color;
+  margin: 0;
 }
 
 .item {