Add show experiments button to final experiments screen

extension/src/setup/index.ts

@@ -367,7 +367,8 @@ export class Setup
   private createWebviewMessageHandler() {
     const webviewMessages = new WebviewMessages(
       () => this.getWebview(),
-      () => this.initializeGit()
+      () => this.initializeGit(),
+      () => this.showExperiments()
     )
     this.dispose.track(
       this.onDidReceivedWebviewMessage(message =>

extension/src/setup/webview/messages.ts

@@ -20,13 +20,16 @@ import { openUrl } from '../../vscode/external'
 export class WebviewMessages {
   private readonly getWebview: () => BaseWebview<TSetupData> | undefined
   private readonly initializeGit: () => void
+  private readonly showExperiments: () => void
 
   constructor(
     getWebview: () => BaseWebview<TSetupData> | undefined,
-    initializeGit: () => void
+    initializeGit: () => void,
+    showExperiments: () => void
   ) {
     this.getWebview = getWebview
     this.initializeGit = initializeGit
+    this.showExperiments = showExperiments
   }
 
   public sendWebviewMessage({
@@ -94,6 +97,8 @@ export class WebviewMessages {
           ConfigKey.STUDIO_SHARE_EXPERIMENTS_LIVE,
           message.payload
         )
+      case MessageFromWebviewType.SHOW_EXPERIMENTS:
+        return this.showExperiments()
 
       default:
         Logger.error(`Unexpected message: ${JSON.stringify(message)}`)

extension/src/webview/contract.ts

@@ -53,6 +53,7 @@ export enum MessageFromWebviewType {
   SET_STUDIO_SHARE_EXPERIMENTS_LIVE = 'set-studio-share-experiments-live',
   SHARE_EXPERIMENT_AS_BRANCH = 'share-experiment-as-branch',
   SHARE_EXPERIMENT_AS_COMMIT = 'share-experiment-as-commit',
+  SHOW_EXPERIMENTS = 'show-experiments',
   TOGGLE_METRIC = 'toggle-metric',
   TOGGLE_PLOTS_SECTION = 'toggle-plots-section',
   REMOVE_CUSTOM_PLOTS = 'remove-custom-plots',
@@ -238,6 +239,7 @@ export type MessageFromWebview =
   | { type: MessageFromWebviewType.SAVE_STUDIO_TOKEN }
   | { type: MessageFromWebviewType.ADD_CONFIGURATION }
   | { type: MessageFromWebviewType.ZOOM_PLOT }
+  | { type: MessageFromWebviewType.SHOW_EXPERIMENTS }
 
 export type MessageToWebview<T extends WebviewData> = {
   type: MessageToWebviewType.SET_DATA

webview/src/setup/components/Experiments.tsx

@@ -9,11 +9,14 @@ import {
   installDvc,
   selectPythonInterpreter,
   setupWorkspace,
+  showExperiments,
   showScmPanel
 } from './messages'
 import { NeedsGitCommit } from './NeedsGitCommit'
 import { NoData } from './NoData'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+import { IconButton } from '../../shared/components/button/IconButton'
+import { Beaker } from '../../shared/components/icons'
 
 export type ExperimentsProps = {
   canGitInitialize: boolean | undefined
@@ -79,6 +82,12 @@ export const Experiments: React.FC<ExperimentsProps> = ({
   return (
     <EmptyState isFullScreen={false}>
       <h1>{"You're all setup"}</h1>
+      <IconButton
+        appearance="primary"
+        icon={Beaker}
+        onClick={showExperiments}
+        text="Show Experiments"
+      />
     </EmptyState>
   )
 }

webview/src/setup/components/messages.ts

@@ -33,6 +33,10 @@ export const setupWorkspace = () => {
   sendMessage({ type: MessageFromWebviewType.SETUP_WORKSPACE })
 }
 
+export const showExperiments = () => {
+  sendMessage({ type: MessageFromWebviewType.SHOW_EXPERIMENTS })
+}
+
 export const openStudio = () =>
   sendMessage({ type: MessageFromWebviewType.OPEN_STUDIO })
 

webview/src/shared/components/icons/Beaker.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react'
+import { SVGProps } from 'react'
+const SvgBeaker = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M13.893 13.558L10 6.006v-4h1v-1H9.994V1l-.456.005H5V2h1v3.952l-3.894 7.609A1 1 0 0 0 3 15.006h10a1 1 0 0 0 .893-1.448zm-7-7.15L7 6.193V2.036l2-.024v4.237l.11.215 1.827 3.542H5.049l1.844-3.598zM3 14.017l1.54-3.011h6.916l1.547 3L3 14.017z"
+      fill="currentColor"
+    />
+  </svg>
+)
+export default SvgBeaker

webview/src/shared/components/icons/index.ts

@@ -1,4 +1,5 @@
 export { default as Add } from './Add'
+export { default as Beaker } from './Beaker'
 export { default as Check } from './Check'
 export { default as ChevronDown } from './ChevronDown'
 export { default as ChevronRight } from './ChevronRight'