Add webview for when dvc is not available or not initialized

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",
@@ -1351,7 +1351,7 @@
       {
         "view": "dvc.views.webviews",
         "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"
+        "when": "true"
       },
       {
         "view": "dvc.views.welcome",

extension/src/experiments/workspace.test.ts

@@ -13,6 +13,7 @@ import { buildMockedEventEmitter } from '../test/util/jest'
 import { OutputChannel } from '../vscode/outputChannel'
 import { Title } from '../vscode/title'
 import { Args } from '../cli/dvc/constants'
+import { ResourceLocator } from '../resourceLocator'
 
 const mockedShowWebview = jest.fn()
 const mockedDisposable = jest.mocked(Disposable)
@@ -60,6 +61,8 @@ describe('Experiments', () => {
     mockedInternalCommands,
     mockedUpdatesPaused,
     buildMockMemento(),
+    {} as ResourceLocator,
+    () => true,
     {
       '/my/dvc/root': {
         getDvcRoot: () => mockedDvcRoot,

extension/src/experiments/workspace.ts

@@ -35,10 +35,18 @@ export class WorkspaceExperiments extends BaseWorkspaceWebviews<
     internalCommands: InternalCommands,
     updatesPaused: EventEmitter<boolean>,
     workspaceState: Memento,
+    resourceLocator: ResourceLocator,
+    getAvailable: () => boolean,
     experiments?: Record<string, Experiments>,
     checkpointsChanged?: EventEmitter<void>
   ) {
-    super(internalCommands, workspaceState, experiments)
+    super(
+      internalCommands,
+      workspaceState,
+      resourceLocator,
+      getAvailable,
+      experiments
+    )
 
     this.updatesPaused = updatesPaused
 

extension/src/extension.ts

@@ -145,12 +145,19 @@ export class Extension extends Disposable implements IExtension {
       new WorkspaceExperiments(
         this.internalCommands,
         this.updatesPaused,
-        context.workspaceState
+        context.workspaceState,
+        this.resourceLocator,
+        () => this.getAvailable()
       )
     )
 
     this.plots = this.dispose.track(
-      new WorkspacePlots(this.internalCommands, context.workspaceState)
+      new WorkspacePlots(
+        this.internalCommands,
+        context.workspaceState,
+        this.resourceLocator,
+        () => this.getAvailable()
+      )
     )
 
     this.repositories = this.dispose.track(
@@ -433,6 +440,10 @@ export class Extension extends Disposable implements IExtension {
     return available
   }
 
+  public getAvailable() {
+    return this.cliAccessible
+  }
+
   private setCommandsAvailability(available: boolean) {
     setContextValue('dvc.commands.available', available)
   }

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,8 @@ 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
 }

extension/src/test/suite/experiments/model/filterBy/tree.test.ts

@@ -41,6 +41,7 @@ import {
   FilterItem
 } from '../../../../../experiments/model/filterBy/tree'
 import { starredFilter } from '../../../../../experiments/model/filterBy/constants'
+import { ResourceLocator } from '../../../../../resourceLocator'
 
 suite('Experiments Filter By Tree Test Suite', () => {
   const disposable = Disposable.fn()
@@ -357,6 +358,8 @@ suite('Experiments Filter By Tree Test Suite', () => {
           internalCommands,
           disposable.track(new EventEmitter()),
           buildMockMemento(),
+          {} as ResourceLocator,
+          () => true,
           { [dvcDemoPath]: experiments },
           disposable.track(new EventEmitter())
         )

extension/src/test/suite/experiments/util.ts

@@ -19,6 +19,7 @@ import { FileSystemData } from '../../../fileSystem/data'
 import * as Watcher from '../../../fileSystem/watcher'
 import { ExperimentsModel } from '../../../experiments/model'
 import { ColumnsModel } from '../../../experiments/columns/model'
+import { ResourceLocator } from '../../../resourceLocator'
 
 const hasCheckpoints = (data: ExperimentsOutput) => {
   const [experimentsWithBaseline] = Object.values(omit(data, 'workspace'))
@@ -104,6 +105,8 @@ export const buildMultiRepoExperiments = (disposer: Disposer) => {
       internalCommands,
       updatesPaused,
       buildMockMemento(),
+      resourceLocator,
+      () => true,
       {
         'other/dvc/root': mockExperiments
       }
@@ -132,7 +135,9 @@ export const buildSingleRepoExperiments = (disposer: Disposer) => {
     new WorkspaceExperiments(
       internalCommands,
       updatesPaused,
-      buildMockMemento()
+      buildMockMemento(),
+      {} as ResourceLocator,
+      () => true
     )
   )
   const [experiments] = workspaceExperiments.create(

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
 }

extension/src/webview/workspace.ts

@@ -1,8 +1,11 @@
 import { Memento, ViewColumn } from 'vscode'
 import { BaseRepository } from './repository'
 import { WebviewData } from './contract'
+import { createWebview } from './factory'
+import { ViewKey } from './constants'
 import { InternalCommands } from '../commands/internal'
 import { BaseWorkspace } from '../workspace'
+import { ResourceLocator } from '../resourceLocator'
 
 export abstract class BaseWorkspaceWebviews<
   T extends BaseRepository<U>,
@@ -12,22 +15,37 @@ export abstract class BaseWorkspaceWebviews<
 
   protected focusedWebviewDvcRoot: string | undefined
 
+  private resourceLocator: ResourceLocator
+  private getAvailable: () => boolean
+
   constructor(
     internalCommands: InternalCommands,
     workspaceState: Memento,
+    resourceLocator: ResourceLocator,
+    getAvailable: () => boolean,
     repositories?: Record<string, T>
   ) {
     super(internalCommands)
 
     this.workspaceState = workspaceState
 
+    this.resourceLocator = resourceLocator
+
+    this.getAvailable = getAvailable
+
     if (repositories) {
       this.repositories = repositories
     }
   }
 
   public async showWebview(overrideRoot: string, viewColumn?: ViewColumn) {
+    if (!this.getAvailable() || this.getDvcRoots().length === 0) {
+      this.showEmptyWebview(viewColumn)
+      return
+    }
+
     const dvcRoot = overrideRoot || (await this.getOnlyOrPickProject())
+
     if (!dvcRoot) {
       return
     }
@@ -48,5 +66,15 @@ export abstract class BaseWorkspaceWebviews<
     return overrideRoot || (await this.getFocusedOrOnlyOrPickProject())
   }
 
+  protected async showEmptyWebview(viewColumn?: ViewColumn) {
+    await createWebview(
+      ViewKey.GET_STARTED,
+      '',
+      this.resourceLocator.dvcIcon,
+      viewColumn,
+      true
+    )
+  }
+
   abstract getFocusedOrOnlyOrPickProject(): string | Promise<string | undefined>
 }

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>
+  )
+}

webview/src/getStarted/index.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import '../shared/style.scss'
+import { App } from './components/App'
+
+const root = ReactDOM.createRoot(document.querySelector('#root') as HTMLElement)
+root.render(<App />)

webview/webpack.config.ts

@@ -26,7 +26,11 @@ export default {
   entry: {
     experiments: { dependOn: 'react', import: r('src/experiments/index.tsx') },
     plots: { dependOn: 'react', import: r('src/plots/index.tsx') },
-    react: ['react', 'react-dom']
+    react: ['react', 'react-dom'],
+    getStarted: {
+      dependOn: 'react',
+      import: r('src/getStarted/index.tsx')
+    }
   },
   module: {
     rules: [