Simply welcome view inside view container (#3023)

Author: mattseddon

extension/package.json

@@ -1360,24 +1360,9 @@
       },
       {
         "view": "dvc.views.welcome",
-        "contents": "New to the extension?\n[Show Walkthrough](command:dvc.getStarted)\n\n",
+        "contents": "New to the extension?\n[Show Walkthrough](command:dvc.getStarted)\n\nThe extension is currently unable to initialize.\n[Show Setup](command:dvc.showSetup)",
         "when": "true"
       },
-      {
-        "view": "dvc.views.welcome",
-        "contents": "DVC is currently unavailable, [learn more](https://dvc.org/doc).\n[Setup the Workspace](command:dvc.setupWorkspace)",
-        "when": "!dvc.commands.available && !dvc.cli.incompatible"
-      },
-      {
-        "view": "dvc.views.welcome",
-        "contents": "The located version of DVC is incompatible with the extension.\n[Find Another](command:dvc.setupWorkspace)\nUpgrade DVC then...\n[Check Compatibility](command:dvc.checkCLICompatible)",
-        "when": "dvc.cli.incompatible"
-      },
-      {
-        "view": "dvc.views.welcome",
-        "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"
-      },
       {
         "view": "dvc.views.trackedExplorerTree",
         "contents": "No Tracked Data to Display."

extension/src/setup/webview/messages.ts

@@ -48,29 +48,26 @@ export class WebviewMessages {
   }
 
   public handleMessageFromWebview(message: MessageFromWebview) {
-    if (message.type === MessageFromWebviewType.INITIALIZE_DVC) {
-      return this.initializeDvc()
+    switch (message.type) {
+      case MessageFromWebviewType.CHECK_CLI_COMPATIBLE:
+        return commands.executeCommand(
+          RegisteredCommands.EXTENSION_CHECK_CLI_COMPATIBLE
+        )
+      case MessageFromWebviewType.INITIALIZE_DVC:
+        return this.initializeDvc()
+      case MessageFromWebviewType.INITIALIZE_GIT:
+        return this.initializeGit()
+      case MessageFromWebviewType.SELECT_PYTHON_INTERPRETER:
+        return this.selectPythonInterpreter()
+      case MessageFromWebviewType.INSTALL_DVC:
+        return this.installDvc()
+      case MessageFromWebviewType.SETUP_WORKSPACE:
+        return commands.executeCommand(
+          RegisteredCommands.EXTENSION_SETUP_WORKSPACE
+        )
+      default:
+        Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
     }
-
-    if (message.type === MessageFromWebviewType.INITIALIZE_GIT) {
-      return this.initializeGit()
-    }
-
-    if (message.type === MessageFromWebviewType.SELECT_PYTHON_INTERPRETER) {
-      return this.selectPythonInterpreter()
-    }
-
-    if (message.type === MessageFromWebviewType.INSTALL_DVC) {
-      return this.installDvc()
-    }
-
-    if (message.type === MessageFromWebviewType.SETUP_WORKSPACE) {
-      return commands.executeCommand(
-        RegisteredCommands.EXTENSION_SETUP_WORKSPACE
-      )
-    }
-
-    Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
   }
 
   private selectPythonInterpreter() {

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

@@ -56,6 +56,24 @@ suite('Setup Test Suite', () => {
       expect(mockInitializeDvc).to.be.calledOnce
     }).timeout(WEBVIEW_TEST_TIMEOUT)
 
+    it('should handle a check cli compatible message from the webview', async () => {
+      const { messageSpy, setup, mockExecuteCommand } = buildSetup(disposable)
+
+      const webview = await setup.showWebview()
+      await webview.isReady()
+
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+
+      messageSpy.resetHistory()
+      mockMessageReceived.fire({
+        type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE
+      })
+
+      expect(mockExecuteCommand).to.be.calledWithExactly(
+        RegisteredCommands.EXTENSION_CHECK_CLI_COMPATIBLE
+      )
+    }).timeout(WEBVIEW_TEST_TIMEOUT)
+
     it('should handle an auto install dvc message from the webview', async () => {
       const { messageSpy, setup, mockAutoInstallDvc } = buildSetup(disposable)
 

extension/src/webview/contract.ts

@@ -48,6 +48,7 @@ export enum MessageFromWebviewType {
   MODIFY_EXPERIMENT_PARAMS_AND_RUN = 'modify-experiment-params-and-run',
   MODIFY_EXPERIMENT_PARAMS_RESET_AND_RUN = 'modify-experiment-params-reset-and-run',
   SET_EXPERIMENTS_HEADER_HEIGHT = 'update-experiments-header-height',
+  CHECK_CLI_COMPATIBLE = 'check-cli-compatible',
   INITIALIZE_DVC = 'initialize-dvc',
   INITIALIZE_GIT = 'initialize-git',
   INSTALL_DVC = 'install-dvc',
@@ -183,6 +184,7 @@ export type MessageFromWebview =
       payload: string
     }
   | { type: MessageFromWebviewType.SET_EXPERIMENTS_HEADER_HEIGHT }
+  | { type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE }
   | { type: MessageFromWebviewType.INITIALIZE_DVC }
   | { type: MessageFromWebviewType.INITIALIZE_GIT }
   | { type: MessageFromWebviewType.INSTALL_DVC }

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

@@ -72,6 +72,14 @@ describe('App', () => {
     })
 
     expect(screen.getByText('DVC is incompatible')).toBeInTheDocument()
+
+    const button = screen.getByText('Check Compatibility')
+    expect(button).toBeInTheDocument()
+
+    fireEvent.click(button)
+    expect(mockPostMessage).toHaveBeenCalledWith({
+      type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE
+    })
   })
 
   it('should show a screen saying that DVC is not installed if the cli is unavailable', () => {

webview/src/setup/components/App.tsx

@@ -54,6 +54,10 @@ export const App: React.FC = () => {
     )
   )
 
+  const checkCompatibility = () => {
+    sendMessage({ type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE })
+  }
+
   const initializeGit = () => {
     sendMessage({
       type: MessageFromWebviewType.INITIALIZE_GIT
@@ -79,7 +83,7 @@ export const App: React.FC = () => {
   }
 
   if (cliCompatible === false) {
-    return <CliIncompatible />
+    return <CliIncompatible checkCompatibility={checkCompatibility} />
   }
 
   if (cliCompatible === undefined) {

webview/src/setup/components/CliIncompatible.tsx

@@ -1,14 +1,20 @@
 import React from 'react'
 import { MIN_CLI_VERSION } from 'dvc/src/cli/dvc/contract'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+import { Button } from '../../shared/components/button/Button'
 
-export const CliIncompatible: React.FC = () => (
+type CliIncompatibleProps = { checkCompatibility: () => void }
+
+export const CliIncompatible: React.FC<CliIncompatibleProps> = ({
+  checkCompatibility
+}) => (
   <EmptyState>
     <div>
       <h1>DVC is incompatible</h1>
-      <p>The located CLI is incompatible with the extension</p>
-      <p>The minimum version is {MIN_CLI_VERSION}</p>
-      <p>Please update your install and try again</p>
+      <p>The located CLI is incompatible with the extension.</p>
+      <p>The minimum version is {MIN_CLI_VERSION}.</p>
+      <p>Please update your install and try again.</p>
+      <Button text="Check Compatibility" onClick={checkCompatibility} />
     </div>
   </EmptyState>
 )

webview/src/stories/CliIncompatible.stories.tsx

@@ -14,7 +14,7 @@ export default {
 } as Meta
 
 const Template: Story = () => {
-  return <CliIncompatible />
+  return <CliIncompatible checkCompatibility={() => undefined} />
 }
 
 export const CliFoundButNotCompatible = Template.bind({})