Dynamic Get Started webview (#2894)

* Make the Get Started webview a class

* Add test

* Add other test

* Make the get started webview dynamic

* Flow from not installed to show experiments

* Remove interval

* Fix timer problems for jest tests

* Fix all tests

* Add tests for webview

* Revert demo project

* Revert demo

* Add get started test

* Replace currently open folder to current workspace

Author: sroy3

extension/package.json

@@ -1375,7 +1375,7 @@
       },
       {
         "view": "dvc.views.welcome",
-        "contents": "The currently open folder does not contain a DVC project. You can initialize a project which will enable features powered by DVC.\n[Initialize Project](command:dvc.init)\nTo learn more about how to use DVC please read [our docs](https://dvc.org/doc).",
+        "contents": "The current workspace does not contain a DVC project. You can initialize a project which will enable features powered by DVC.\n[Initialize Project](command:dvc.init)\nTo learn more about how to use DVC please read [our docs](https://dvc.org/doc).",
         "when": "dvc.commands.available && !dvc.cli.incompatible && !dvc.project.available"
       },
       {

extension/src/cli/dvc/discovery.ts

@@ -159,15 +159,17 @@ const processVersionDetails = (
 
 const tryGlobalFallbackVersion = async (
   extension: IExtension,
-  cwd: string
+  cwd: string,
+  recheck: boolean
 ): Promise<CanRunCli> => {
   const tryGlobal = await getVersionDetails(extension, cwd, true)
   const { cliCompatible, isAvailable, isCompatible, version } = tryGlobal
 
-  if (extension.hasRoots() && !isCompatible) {
+  if (!recheck && extension.hasRoots() && !isCompatible) {
     warnUserCLIInaccessibleAnywhere(extension, version)
   }
   if (
+    !recheck &&
     extension.hasRoots() &&
     cliCompatible === CliCompatible.YES_MINOR_VERSION_AHEAD_OF_TESTED
   ) {
@@ -183,7 +185,8 @@ const tryGlobalFallbackVersion = async (
 
 const extensionCanAutoRunCli = async (
   extension: IExtension,
-  cwd: string
+  cwd: string,
+  recheck: boolean
 ): Promise<CanRunCli> => {
   const {
     cliCompatible: pythonCliCompatible,
@@ -193,7 +196,7 @@ const extensionCanAutoRunCli = async (
   } = await getVersionDetails(extension, cwd)
 
   if (pythonCliCompatible === CliCompatible.NO_NOT_FOUND) {
-    return tryGlobalFallbackVersion(extension, cwd)
+    return tryGlobalFallbackVersion(extension, cwd, recheck)
   }
   return processVersionDetails(
     extension,
@@ -206,10 +209,11 @@ const extensionCanAutoRunCli = async (
 
 export const extensionCanRunCli = async (
   extension: IExtension,
-  cwd: string
+  cwd: string,
+  recheck: boolean
 ): Promise<CanRunCli> => {
   if (await extension.isPythonExtensionUsed()) {
-    return extensionCanAutoRunCli(extension, cwd)
+    return extensionCanAutoRunCli(extension, cwd, recheck)
   }
 
   const { cliCompatible, isAvailable, isCompatible, version } =

extension/src/extension.ts

@@ -156,7 +156,14 @@ export class Extension extends Disposable implements IExtension {
     )
 
     this.getStarted = this.dispose.track(
-      new GetStarted('', this.internalCommands, this.resourceLocator.dvcIcon)
+      new GetStarted(
+        '',
+        this.resourceLocator.dvcIcon,
+        () => this.initProject(),
+        () => this.showExperiments(this.dvcRoots[0]),
+        () => this.getAvailable(),
+        () => this.hasRoots()
+      )
     )
 
     this.repositories = this.dispose.track(
@@ -247,10 +254,7 @@ export class Extension extends Disposable implements IExtension {
     this.internalCommands.registerExternalCommand(
       RegisteredCommands.EXPERIMENT_AND_PLOTS_SHOW,
       async (context: VsCodeContext) => {
-        await this.experiments.showWebview(
-          getDvcRootFromContext(context),
-          ViewColumn.Active
-        )
+        await this.showExperiments(getDvcRootFromContext(context))
         await this.plots.showWebview(
           getDvcRootFromContext(context),
           ViewColumn.Beside
@@ -301,13 +305,7 @@ export class Extension extends Disposable implements IExtension {
 
     this.internalCommands.registerExternalCliCommand(
       RegisteredCliCommands.INIT,
-      async () => {
-        const root = getFirstWorkspaceFolder()
-        if (root) {
-          await this.dvcExecutor.init(root)
-          this.workspaceChanged.fire()
-        }
-      }
+      () => this.initProject()
     )
 
     registerRepositoryCommands(this.repositories, this.internalCommands)
@@ -389,6 +387,7 @@ export class Extension extends Disposable implements IExtension {
     )
     this.dvcRoots = nestedRoots.flat().sort()
 
+    this.getStarted.sendDataToWebview()
     return this.setProjectAvailability()
   }
 
@@ -443,9 +442,26 @@ export class Extension extends Disposable implements IExtension {
     this.status.setAvailability(available)
     this.setCommandsAvailability(available)
     this.cliAccessible = available
+    this.getStarted.sendDataToWebview()
     return available
   }
 
+  public getAvailable() {
+    return this.cliAccessible
+  }
+
+  public async initProject() {
+    const root = getFirstWorkspaceFolder()
+    if (root) {
+      await this.dvcExecutor.init(root)
+      this.workspaceChanged.fire()
+    }
+  }
+
+  private async showExperiments(dvcRoot: string) {
+    return await this.experiments.showWebview(dvcRoot, ViewColumn.Active)
+  }
+
   private setCommandsAvailability(available: boolean) {
     setContextValue('dvc.commands.available', available)
   }

extension/src/getStarted/index.ts

@@ -4,34 +4,55 @@ import { BaseWebview } from '../webview'
 import { ViewKey } from '../webview/constants'
 import { BaseRepository } from '../webview/repository'
 import { Resource } from '../resourceLocator'
-import { AvailableCommands, InternalCommands } from '../commands/internal'
 
 export type GetStartedWebview = BaseWebview<TGetStartedData>
 
 export class GetStarted extends BaseRepository<TGetStartedData> {
   public readonly viewKey = ViewKey.GET_STARTED
 
-  private internalCommands: InternalCommands
+  private webviewMessages: WebviewMessages
+  private initProject: () => void
+  private showExperiments: () => void
+  private getCliAccessible: () => boolean
+  private getHasRoots: () => boolean
 
   constructor(
     dvcRoot: string,
-    internalCommands: InternalCommands,
-    webviewIcon: Resource
+    webviewIcon: Resource,
+    initProject: () => void,
+    showExperiments: () => void,
+    getCliAccessible: () => boolean,
+    getHasRoots: () => boolean
   ) {
     super(dvcRoot, webviewIcon)
 
-    this.createWebviewMessageHandler()
-    this.internalCommands = internalCommands
+    this.webviewMessages = this.createWebviewMessageHandler()
+
+    if (this.webview) {
+      this.sendDataToWebview()
+    }
+    this.getCliAccessible = getCliAccessible
+    this.getHasRoots = getHasRoots
+    this.initProject = initProject
+    this.showExperiments = showExperiments
   }
 
   public sendInitialWebviewData() {
-    return undefined
+    return this.sendDataToWebview()
+  }
+
+  public sendDataToWebview() {
+    this.webviewMessages.sendWebviewMessage(
+      this.getCliAccessible(),
+      this.getHasRoots()
+    )
   }
 
   private createWebviewMessageHandler() {
     const webviewMessages = new WebviewMessages(
       () => this.getWebview(),
-      () => this.initializeProject()
+      () => this.initProject(),
+      () => this.showExperiments()
     )
     this.dispose.track(
       this.onDidReceivedWebviewMessage(message =>
@@ -40,8 +61,4 @@ export class GetStarted extends BaseRepository<TGetStartedData> {
     )
     return webviewMessages
   }
-
-  private initializeProject() {
-    this.internalCommands.executeCommand(AvailableCommands.INIT)
-  }
 }

extension/src/getStarted/webview/contract.ts

@@ -1 +1,4 @@
-export type GetStartedData = undefined
+export type GetStartedData = {
+  cliAccessible: boolean
+  projectInitialized: boolean
+}

extension/src/getStarted/webview/messages.ts

@@ -9,23 +9,35 @@ import { BaseWebview } from '../../webview'
 export class WebviewMessages {
   private readonly getWebview: () => BaseWebview<TGetStartedData> | undefined
   private readonly initializeProject: () => void
+  private readonly openExperiments: () => void
 
   constructor(
     getWebview: () => BaseWebview<TGetStartedData> | undefined,
-    initializeProject: () => void
+    initializeProject: () => void,
+    openExperiments: () => void
   ) {
     this.getWebview = getWebview
     this.initializeProject = initializeProject
+    this.openExperiments = openExperiments
   }
 
-  public sendWebviewMessage() {
-    this.getWebview()?.show(undefined)
+  public sendWebviewMessage(
+    cliAccessible: boolean,
+    projectInitialized: boolean
+  ) {
+    this.getWebview()?.show({
+      cliAccessible,
+      projectInitialized
+    })
   }
 
   public handleMessageFromWebview(message: MessageFromWebview) {
     if (message.type === MessageFromWebviewType.INITIALIZE_PROJECT) {
       return this.initializeProject()
     }
+    if (message.type === MessageFromWebviewType.OPEN_EXPERIMENTS_WEBVIEW) {
+      return this.openExperiments()
+    }
     Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
   }
 }

extension/src/setup.test.ts

@@ -32,6 +32,7 @@ jest.mock('./vscode/quickPick')
 jest.mock('./vscode/toast')
 jest.mock('./vscode/workspaceFolders')
 jest.mock('./processExecution')
+jest.mock('./setupUtil')
 
 const mockedExtensions = jest.mocked(extensions)
 const mockedCommands = jest.mocked(commands)

extension/src/setup.ts

@@ -10,6 +10,7 @@ import { getFirstWorkspaceFolder } from './vscode/workspaceFolders'
 import { getSelectTitle, Title } from './vscode/title'
 import { isPythonExtensionInstalled } from './extensions/python'
 import { extensionCanRunCli } from './cli/dvc/discovery'
+import { willRecheck } from './setupUtil'
 
 const setConfigPath = async (
   option: ConfigKey,
@@ -153,20 +154,15 @@ export const setupWorkspace = async (): Promise<boolean> => {
   return pickCliPath()
 }
 
-export const setup = async (extension: IExtension) => {
-  const cwd = getFirstWorkspaceFolder()
-  if (!cwd) {
-    return
-  }
-
-  await extension.setRoots()
-
-  const roots = extension.getRoots()
-  const dvcRootOrFirstFolder = roots.length > 0 ? roots[0] : cwd
-
+export const checkAvailable = async (
+  extension: IExtension,
+  dvcRootOrFirstFolder: string,
+  recheck = false
+) => {
   const { isAvailable, isCompatible } = await extensionCanRunCli(
     extension,
-    dvcRootOrFirstFolder
+    dvcRootOrFirstFolder,
+    recheck
   )
 
   extension.setCliCompatible(isCompatible)
@@ -180,5 +176,20 @@ export const setup = async (extension: IExtension) => {
 
   if (!isAvailable) {
     extension.setAvailable(false)
+    willRecheck(extension, dvcRootOrFirstFolder)
+  }
+}
+
+export const setup = async (extension: IExtension) => {
+  const cwd = getFirstWorkspaceFolder()
+  if (!cwd) {
+    return
   }
+
+  await extension.setRoots()
+
+  const roots = extension.getRoots()
+  const dvcRootOrFirstFolder = roots.length > 0 ? roots[0] : cwd
+
+  return checkAvailable(extension, dvcRootOrFirstFolder)
 }

extension/src/setupUtil.ts

@@ -0,0 +1,9 @@
+import { IExtension } from './interfaces'
+import { checkAvailable } from './setup'
+
+export const willRecheck = (
+  extension: IExtension,
+  dvcRootOrFirstFolder: string
+) => {
+  setTimeout(() => checkAvailable(extension, dvcRootOrFirstFolder, true), 5000)
+}

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

@@ -5,7 +5,6 @@ import { buildGetStarted } from './util'
 import { closeAllEditors, getMessageReceivedEmitter } from '../util'
 import { WEBVIEW_TEST_TIMEOUT } from '../timeouts'
 import { MessageFromWebviewType } from '../../../webview/contract'
-import { AvailableCommands } from '../../../commands/internal'
 import { Disposable } from '../../../extension'
 import { Logger } from '../../../common/logger'
 
@@ -24,25 +23,37 @@ suite('GetStarted Test Suite', () => {
 
   describe('Get Started', () => {
     it('should handle a initialize project message from the webview', async () => {
-      const { messageSpy, getStarted, internalCommands } =
-        await buildGetStarted(disposable)
+      const { messageSpy, getStarted, mockInitializeProject } =
+        await buildGetStarted(disposable, true)
 
       const webview = await getStarted.showWebview()
       await webview.isReady()
 
       const mockMessageReceived = getMessageReceivedEmitter(webview)
-      const mockInitializeProject = spy(internalCommands, 'executeCommand')
 
       messageSpy.resetHistory()
       mockMessageReceived.fire({
         type: MessageFromWebviewType.INITIALIZE_PROJECT
       })
 
       expect(mockInitializeProject).to.be.calledOnce
+    }).timeout(WEBVIEW_TEST_TIMEOUT)
 
-      expect(mockInitializeProject).to.be.calledWithExactly(
-        AvailableCommands.INIT
-      )
+    it('should handle a open experiments message from the webview', async () => {
+      const { messageSpy, getStarted, mockOpenExperiments } =
+        await buildGetStarted(disposable, true)
+
+      const webview = await getStarted.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 log an error message if the message from the webview is anything else than initialize project', async () => {