Add webview for when dvc is not available or not initialized (#2861)

* Add webview for get started

* Allow incompatible dvc to show webviews

* Fix tests and lint errors

* Make sure webviews load after initialization

* Change order of sidebar views

* Register open get started webview to simplify code paths

* Remove useless changes

Author: sroy3

extension/package.json

@@ -1306,11 +1306,6 @@
         }
       ],
       "dvc-views": [
-        {
-          "id": "dvc.views.webviews",
-          "name": "Views",
-          "when": "dvc.commands.available && dvc.project.available"
-        },
         {
           "id": "dvc.views.experimentsColumnsTree",
           "name": "Columns",
@@ -1321,6 +1316,11 @@
           "name": "Welcome",
           "when": "!dvc.commands.available || dvc.cli.incompatible || !dvc.project.available"
         },
+        {
+          "id": "dvc.views.webviews",
+          "name": "Views",
+          "when": "true"
+        },
         {
           "id": "dvc.views.experimentsTree",
           "name": "Experiments",
@@ -1353,6 +1353,11 @@
         "contents": "[Show Experiments](command:dvc.showExperiments)\n[Show Plots](command:dvc.showPlots)\n[Show Experiments and Plots](command:dvc.showExperimentsAndPlots)",
         "when": "dvc.commands.available && dvc.project.available"
       },
+      {
+        "view": "dvc.views.webviews",
+        "contents": "[Show Experiments](command:dvc.showGetStartedWebview)\n[Show Plots](command:dvc.showGetStartedWebview)\n[Show Experiments and Plots](command:dvc.showGetStartedWebview)",
+        "when": "!dvc.commands.available || !dvc.project.available"
+      },
       {
         "view": "dvc.views.welcome",
         "contents": "New to the extension?\n[Show Walkthrough](command:dvc.getStarted)\n\n",

extension/src/commands/external.ts

@@ -90,5 +90,7 @@ export enum RegisteredCommands {
   TRACKED_EXPLORER_COPY_REL_FILE_PATH = 'dvc.copyRelativeFilePath',
   TRACKED_EXPLORER_FIND_IN_FOLDER = 'dvc.findInFolder',
   TRACKED_EXPLORER_OPEN_TO_THE_SIDE = 'dvc.openToTheSide',
-  TRACKED_EXPLORER_SELECT_FOR_COMPARE = 'dvc.selectForCompare'
+  TRACKED_EXPLORER_SELECT_FOR_COMPARE = 'dvc.selectForCompare',
+
+  GET_STARTED_WEBVIEW_SHOW = 'dvc.showGetStartedWebview'
 }

extension/src/extension.ts

@@ -61,6 +61,8 @@ import { collectWorkspaceScale } from './telemetry/collect'
 import { createFileSystemWatcher } from './fileSystem/watcher'
 import { GitExecutor } from './cli/git/executor'
 import { GitReader } from './cli/git/reader'
+import { createWebview } from './webview/factory'
+import { ViewKey } from './webview/constants'
 
 export class Extension extends Disposable implements IExtension {
   protected readonly internalCommands: InternalCommands
@@ -252,6 +254,19 @@ export class Extension extends Disposable implements IExtension {
       }
     )
 
+    this.internalCommands.registerExternalCommand(
+      RegisteredCommands.GET_STARTED_WEBVIEW_SHOW,
+      async () => {
+        await createWebview(
+          ViewKey.GET_STARTED,
+          '',
+          this.resourceLocator.dvcIcon,
+          ViewColumn.Active,
+          true
+        )
+      }
+    )
+
     this.dispose.track(
       commands.registerCommand(RegisteredCommands.STOP_EXPERIMENT, async () => {
         const stopWatch = new StopWatch()

extension/src/telemetry/constants.ts

@@ -58,6 +58,10 @@ export const EventName = Object.assign(
     VIEWS_EXPERIMENTS_TABLE_SORT_COLUMN:
       'views.experimentsTable.columnSortAdded',
 
+    VIEWS_GET_STARTED_CLOSE: 'view.GET_STARTED.closed',
+    VIEWS_GET_STARTED_CREATED: 'view.GET_STARTED.created',
+    VIEWS_GET_STARTED_FOCUS_CHANGED: 'views.GET_STARTED.focusChanged',
+
     VIEWS_PLOTS_CLOSED: 'views.plots.closed',
     VIEWS_PLOTS_COMPARISON_ROWS_REORDERED:
       'views.plots.comparisonRowsReordered',
@@ -252,4 +256,10 @@ export interface IEventNamePropertyMapping {
   [EventName.VIEWS_TERMINAL_CREATED]: undefined
 
   [EventName.VIEWS_TRACKED_EXPLORER_TREE_OPENED]: DvcRootCount
+
+  [EventName.VIEWS_GET_STARTED_CLOSE]: undefined
+  [EventName.VIEWS_GET_STARTED_CREATED]: undefined
+  [EventName.VIEWS_GET_STARTED_FOCUS_CHANGED]: undefined
+
+  [EventName.GET_STARTED_WEBVIEW_SHOW]: undefined
 }

extension/src/webview/constants.ts

@@ -1,9 +1,16 @@
-import { distPath, react, experiments, plots } from 'dvc-vscode-webview'
+import {
+  distPath,
+  react,
+  experiments,
+  plots,
+  getStarted
+} from 'dvc-vscode-webview'
 import { EventName, IEventNamePropertyMapping } from '../telemetry/constants'
 
 export enum ViewKey {
   EXPERIMENTS = 'dvc-experiments',
-  PLOTS = 'dvc-plots'
+  PLOTS = 'dvc-plots',
+  GET_STARTED = 'dvc-getStarted'
 }
 
 type Name = keyof IEventNamePropertyMapping
@@ -46,5 +53,17 @@ export const WebviewDetails: {
     scripts: [react, plots],
     title: 'Plots',
     viewKey: ViewKey.PLOTS
+  },
+  [ViewKey.GET_STARTED]: {
+    contextKey: 'dvc.getStarted.webviewActive',
+    distPath,
+    eventNames: {
+      closedEvent: EventName.VIEWS_GET_STARTED_CLOSE,
+      createdEvent: EventName.VIEWS_GET_STARTED_CREATED,
+      focusChangedEvent: EventName.VIEWS_GET_STARTED_FOCUS_CHANGED
+    },
+    scripts: [react, getStarted],
+    title: 'DVC is not initialized',
+    viewKey: ViewKey.GET_STARTED
   }
 } as const

extension/src/webview/factory.ts

@@ -10,9 +10,10 @@ export const isValidDvcRoot = (dvcRoot?: string): dvcRoot is string => !!dvcRoot
 const create = (
   viewKey: ViewKey,
   webviewPanel: WebviewPanel,
-  dvcRoot: string
+  dvcRoot: string,
+  bypassDvcRoot?: boolean
 ) => {
-  if (!isValidDvcRoot(dvcRoot)) {
+  if (!bypassDvcRoot && !isValidDvcRoot(dvcRoot)) {
     throw new Error(`trying to set invalid state into ${viewKey}`)
   }
 
@@ -25,7 +26,8 @@ export const createWebview = async (
   viewKey: ViewKey,
   dvcRoot: string,
   iconPath: Resource,
-  viewColumn?: ViewColumn
+  viewColumn?: ViewColumn,
+  bypassDvcRoot?: boolean
 ) => {
   const { title, distPath } = WebviewDetails[viewKey]
 
@@ -42,7 +44,7 @@ export const createWebview = async (
 
   webviewPanel.iconPath = iconPath
 
-  const view = create(viewKey, webviewPanel, dvcRoot)
+  const view = create(viewKey, webviewPanel, dvcRoot, bypassDvcRoot)
   await view.isReady()
   return view
 }

webview/.eslintrc.js

@@ -16,7 +16,8 @@ module.exports = {
       files: [
         'src/experiments/index.tsx',
         'src/plots/index.tsx',
-        'src/shared/components/icons/index.ts'
+        'src/shared/components/icons/index.ts',
+        'src/getStarted/index.tsx'
       ],
       rules: {
         'check-file/no-index': 'off'

webview/index.d.ts

@@ -1,4 +1,5 @@
 export const distPath: string
 export const experiments: string
 export const plots: string
+export const getStarted: string
 export const react: string

webview/index.js

@@ -8,4 +8,5 @@ const path = require('path')
 module.exports.distPath = path.join(__dirname, 'dist')
 module.exports.experiments = path.join(__dirname, 'dist/experiments.js')
 module.exports.plots = path.join(__dirname, 'dist/plots.js')
+module.exports.getStarted = path.join(__dirname, 'dist/getStarted.js')
 module.exports.react = path.join(__dirname, 'dist/react.js')

webview/src/getStarted/components/App.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+
+export const App: React.FC = () => {
+  return (
+    <EmptyState>
+      <div>
+        <h1>DVC is not available or not initialized</h1>
+      </div>
+    </EmptyState>
+  )
+}