add tests and refactor

extension/src/setup/webview/messages.ts

@@ -97,7 +97,7 @@ export class WebviewMessages {
           ConfigKey.STUDIO_SHARE_EXPERIMENTS_LIVE,
           message.payload
         )
-      case MessageFromWebviewType.SHOW_EXPERIMENTS:
+      case MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW:
         return this.showExperiments()
 
       default:

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

@@ -791,6 +791,22 @@ suite('Setup Test Suite', () => {
       expect(mockDelete).to.be.calledWithExactly(STUDIO_ACCESS_TOKEN_KEY)
     })
 
+    it('should handle a message to open the experiments webview', async () => {
+      const { messageSpy, setup, mockOpenExperiments } = buildSetup(disposable)
+
+      const webview = await setup.showWebview()
+      await webview.isReady()
+
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+
+      messageSpy.resetHistory()
+      mockMessageReceived.fire({
+        type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW
+      })
+
+      expect(mockOpenExperiments).to.be.calledOnce
+    }).timeout(WEBVIEW_TEST_TIMEOUT)
+
     it('should send the appropriate messages to the webview to focus different sections', async () => {
       const { setup, messageSpy } = buildSetup(disposable)
       messageSpy.restore()

extension/src/webview/contract.ts

@@ -20,6 +20,7 @@ export enum MessageFromWebviewType {
   CREATE_BRANCH_FROM_EXPERIMENT = 'create-branch-from-experiment',
   FOCUS_FILTERS_TREE = 'focus-filters-tree',
   FOCUS_SORTS_TREE = 'focus-sorts-tree',
+  OPEN_EXPERIMENTS_WEBVIEW = 'open-experiments-webview',
   OPEN_PARAMS_FILE_TO_THE_SIDE = 'open-params-file-to-the-side',
   OPEN_PLOTS_WEBVIEW = 'open-plots-webview',
   OPEN_STUDIO = 'open-studio',
@@ -53,7 +54,6 @@ 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',
@@ -239,7 +239,7 @@ export type MessageFromWebview =
   | { type: MessageFromWebviewType.SAVE_STUDIO_TOKEN }
   | { type: MessageFromWebviewType.ADD_CONFIGURATION }
   | { type: MessageFromWebviewType.ZOOM_PLOT }
-  | { type: MessageFromWebviewType.SHOW_EXPERIMENTS }
+  | { type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW }
 
 export type MessageToWebview<T extends WebviewData> = {
   type: MessageToWebviewType.SET_DATA

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

@@ -399,6 +399,29 @@ describe('App', () => {
         screen.queryByText('Your project contains no data')
       ).not.toBeInTheDocument()
     })
+
+    it('should enable the user to open the experiments webview when they have completed onboarding', () => {
+      renderApp({
+        canGitInitialize: false,
+        cliCompatible: true,
+        hasData: true,
+        isPythonExtensionInstalled: true,
+        isStudioConnected: true,
+        needsGitCommit: false,
+        needsGitInitialized: false,
+        projectInitialized: true,
+        pythonBinPath: 'python',
+        sectionCollapsed: undefined,
+        shareLiveToStudio: false
+      })
+      mockPostMessage.mockClear()
+      const button = screen.getByText('Show Experiments')
+      fireEvent.click(button)
+      expect(mockPostMessage).toHaveBeenCalledTimes(1)
+      expect(mockPostMessage).toHaveBeenCalledWith({
+        type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW
+      })
+    })
   })
 
   describe('Studio not connected', () => {

webview/src/setup/components/Experiments.tsx

@@ -18,6 +18,30 @@ import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 import { IconButton } from '../../shared/components/button/IconButton'
 import { Beaker } from '../../shared/components/icons'
 
+const ProjectSetup: React.FC<{ hasData: boolean | undefined }> = ({
+  hasData
+}) => {
+  if (hasData === undefined) {
+    return <EmptyState isFullScreen={false}>Loading Project...</EmptyState>
+  }
+
+  if (!hasData) {
+    return <NoData />
+  }
+
+  return (
+    <EmptyState isFullScreen={false}>
+      <h1>Setup Complete</h1>
+      <IconButton
+        appearance="primary"
+        icon={Beaker}
+        onClick={showExperiments}
+        text="Show Experiments"
+      />
+    </EmptyState>
+  )
+}
+
 export type ExperimentsProps = {
   canGitInitialize: boolean | undefined
   cliCompatible: boolean | undefined
@@ -38,7 +62,6 @@ export const Experiments: React.FC<ExperimentsProps> = ({
   needsGitCommit,
   projectInitialized,
   pythonBinPath
-  // eslint-disable-next-line sonarjs/cognitive-complexity
 }) => {
   if (cliCompatible === false) {
     return <CliIncompatible checkCompatibility={checkCompatibility} />
@@ -71,23 +94,5 @@ export const Experiments: React.FC<ExperimentsProps> = ({
     return <NeedsGitCommit showScmPanel={showScmPanel} />
   }
 
-  if (hasData === undefined) {
-    return <EmptyState isFullScreen={false}>Loading Project...</EmptyState>
-  }
-
-  if (!hasData) {
-    return <NoData />
-  }
-
-  return (
-    <EmptyState isFullScreen={false}>
-      <h1>{"You're all setup"}</h1>
-      <IconButton
-        appearance="primary"
-        icon={Beaker}
-        onClick={showExperiments}
-        text="Show Experiments"
-      />
-    </EmptyState>
-  )
+  return <ProjectSetup hasData={hasData} />
 }

webview/src/setup/components/messages.ts

@@ -34,7 +34,7 @@ export const setupWorkspace = () => {
 }
 
 export const showExperiments = () => {
-  sendMessage({ type: MessageFromWebviewType.SHOW_EXPERIMENTS })
+  sendMessage({ type: MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW })
 }
 
 export const openStudio = () =>

webview/src/shared/components/Icon.tsx

@@ -15,9 +15,8 @@ export const Icon: React.FC<IconProps> = ({
   ...other
 }) => {
   const I = icon
-  const fill = 'magenta' // This color is used to make sure we change it in CSS
   const w = width || 20
   const h = height || 20
 
-  return <I fill={fill} width={w} height={h} {...other} />
+  return <I width={w} height={h} {...other} />
 }

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

@@ -6,12 +6,10 @@ const SvgBeaker = (props: SVGProps<SVGSVGElement>) => (
     height={16}
     viewBox="0 0 16 16"
     xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
     {...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"
-    />
+    <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" />
   </svg>
 )
 export default SvgBeaker