Consolidate Setup and "Get Started" walkthrough

extension/package.json

@@ -1517,32 +1517,6 @@
         "title": "Get Started",
         "description": "Your first steps to build better models faster with experiment tracking and dataset versioning",
         "steps": [
-          {
-            "id": "dvc.installDVC",
-            "title": "Install DVC",
-            "description": "This extension requires DVC to be installed.\n\n[Show Setup](command:dvc.showDvcSetup)\n",
-            "media": {
-              "markdown": "resources/walkthrough/install-dvc.md"
-            },
-            "completionEvents": [
-              "onLink:https://dvc.org",
-              "onLink:https://dvc.org/doc/install",
-              "onCommand:dvc.setupWorkspace"
-            ]
-          },
-          {
-            "id": "dvc.setupProject",
-            "title": "Setup a DVC Project",
-            "description": "Try an example DVC project or set one up quickly, and start tracking datasets, models, metrics, and plots\n\n[Example Project](https://github.com/iterative/example-get-started)\n",
-            "media": {
-              "markdown": "resources/walkthrough/setup-project.md"
-            },
-            "completionEvents": [
-              "onLink:https://github.com/iterative/example-get-started",
-              "onLink:https://github.com/iterative/vscode-dvc-demo",
-              "onLink:https://dvc.org/doc/dvclive"
-            ]
-          },
           {
             "id": "dvc.showCommands",
             "title": "Available Commands",

extension/resources/walkthrough/command-palette.md

@@ -1,3 +1,7 @@
+> ℹ️ The extension's features cannot be accessed until DVC is installed and a
+> DVC project is available in the workspace. Please refer to the
+> [setup page](command:dvc.dvc.showDvcSetup) if you have not setup DVC yet.
+
 # Command Palette
 
 This extension makes extensive use of the

extension/resources/walkthrough/experiments-table.md

@@ -1,9 +1,5 @@
 # Experiments Table
 
-> ❗ DVC should be installed and DVC project available in the workspace for this
-> and the next steps to work properly. Please refer to first two steps of this
-> guide.
-
 As you change code, parameters, data and run new experiments this table will
 keep all the details about your iterations. It can be manipulated and configured
 using the [DVC side panel](command:workbench.view.extension.dvc-views). This is

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

@@ -144,7 +144,7 @@ describe('App', () => {
 
       expect(
         screen.getByText(
-          'DVC & DVCLive cannot be auto-installed as Python was not located.'
+          /DVC & DVCLive cannot be auto-installed as Python was not located./
         )
       ).toBeInTheDocument()
       expect(screen.queryByText('Install')).not.toBeInTheDocument()
@@ -161,11 +161,11 @@ describe('App', () => {
         pythonBinPath: defaultInterpreter
       })
 
-      expect(
-        screen.getByText(
-          `DVC & DVCLive can be auto-installed as packages with ${defaultInterpreter}`
-        )
-      ).toBeInTheDocument()
+      const sentenceReg = new RegExp(
+        `DVC & DVCLive can be auto-installed with ${defaultInterpreter}.`
+      )
+
+      expect(screen.getByText(sentenceReg)).toBeInTheDocument()
       expect(screen.getByText('Install')).toBeInTheDocument()
     })
 
@@ -454,6 +454,37 @@ describe('App', () => {
   })
 
   describe('Get Started', () => {
+    it('should show a screen saying that dvc is not setup if DVC is not found or initialized', () => {
+      renderApp({
+        cliCompatible: undefined
+      })
+
+      const details = screen.getByTestId('get-started-section-details')
+
+      expect(within(details).getByText('DVC is not setup')).toBeInTheDocument()
+
+      sendSetDataMessage({ ...DEFAULT_DATA, projectInitialized: false })
+
+      expect(within(details).getByText('DVC is not setup')).toBeInTheDocument()
+    })
+
+    it('should open the dvc section when clicking the Setup DVC button on the dvc is not setup screen', () => {
+      renderApp({
+        projectInitialized: false,
+        remoteList: { mockRoot: undefined }
+      })
+
+      const details = screen.getByTestId('get-started-section-details')
+      const getStartedText = within(details).getByText('DVC is not setup')
+      expect(getStartedText).toBeInTheDocument()
+
+      mockPostMessage.mockClear()
+      const button = within(details).getByText('Setup DVC')
+      fireEvent.click(button)
+      expect(screen.getByText('DVC is not initialized')).toBeVisible()
+      expect(getStartedText).not.toBeVisible()
+    })
+
     it('should show a button that takes the user to the "Get Started" walkthrough', () => {
       renderApp()
 
@@ -479,7 +510,9 @@ describe('App', () => {
         projectInitialized: false
       })
 
-      expect(screen.getByText('DVC is not setup')).toBeInTheDocument()
+      const details = screen.getByTestId('experiments-section-details')
+
+      expect(within(details).getByText('DVC is not setup')).toBeInTheDocument()
     })
 
     it('should open the dvc section when clicking the Setup DVC button on the dvc is not setup screen', () => {
@@ -488,11 +521,12 @@ describe('App', () => {
         remoteList: { mockRoot: undefined }
       })
 
-      const experimentsText = screen.getByText('DVC is not setup')
+      const details = screen.getByTestId('experiments-section-details')
+      const experimentsText = within(details).getByText('DVC is not setup')
       expect(experimentsText).toBeInTheDocument()
 
       mockPostMessage.mockClear()
-      const button = screen.getByText('Setup DVC')
+      const button = within(details).getByText('Setup DVC')
       fireEvent.click(button)
       expect(screen.getByText('DVC is not initialized')).toBeVisible()
       expect(experimentsText).not.toBeVisible()
@@ -507,7 +541,8 @@ describe('App', () => {
         }
       })
 
-      expect(screen.getByText('DVC is not setup')).toBeInTheDocument()
+      const details = screen.getByTestId('experiments-section-details')
+      expect(within(details).getByText('DVC is not setup')).toBeInTheDocument()
     })
 
     it('should not show a screen saying that the project contains no data if dvc is installed, the project is initialized and has data', () => {

webview/src/setup/components/App.tsx

@@ -59,6 +59,10 @@ const getStudioStatusIcon = (cliCompatible: boolean, isConnected: boolean) => {
 
   return isConnected ? TooltipIconType.PASSED : TooltipIconType.INFO
 }
+
+const getGetStartedIcon = (isDvcSetup: boolean) =>
+  isDvcSetup ? TooltipIconType.INFO : TooltipIconType.ERROR
+
 export const feedStore = (
   data: MessageToWebview<SetupData>,
   dispatch: SetupDispatch
@@ -175,9 +179,9 @@ export const App: React.FC = () => {
       <SetupContainer
         sectionKey={SetupSection.GET_STARTED}
         title="Get Started"
-        icon={TooltipIconType.INFO}
+        icon={getGetStartedIcon(isDvcSetup)}
       >
-        <GetStarted />
+        <GetStarted isDvcSetup={isDvcSetup} />
       </SetupContainer>
       <SetupContainer
         sectionKey={SetupSection.EXPERIMENTS}

webview/src/setup/components/GetStarted.tsx

@@ -1,9 +1,23 @@
 import React from 'react'
 import { showWalkthrough } from './messages'
+import { DvcNotSetup } from './shared/DvcNotSetup'
 import { Button } from '../../shared/components/button/Button'
 import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 
-export const GetStarted: React.FC = () => {
+export const GetStarted: React.FC<{ isDvcSetup: boolean }> = ({
+  isDvcSetup
+}) => {
+  if (!isDvcSetup) {
+    return (
+      <DvcNotSetup>
+        <p>
+          This extension&apos;s features cannot be accessed without DVC being
+          setup.
+        </p>
+      </DvcNotSetup>
+    )
+  }
+
   return (
     <EmptyState isFullScreen={false}>
       <h1>Get Started</h1>

webview/src/setup/components/dvc/CliUnavailable.tsx

@@ -11,11 +11,19 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
     (state: SetupState) => state.dvc.pythonBinPath
   )
   const canInstall = !!pythonBinPath
+  const installationSentence = (
+    <>
+      The extension supports all{' '}
+      <a href="https://dvc.org/doc/install">installation types</a> and can
+      auto-install recommended packages for you.
+    </>
+  )
 
-  const contents = canInstall ? (
+  const conditionalContents = canInstall ? (
     <>
       <p>
-        DVC & DVCLive can be auto-installed as packages with {pythonBinPath}
+        {installationSentence} DVC & DVCLive can be auto-installed with{' '}
+        {pythonBinPath}.
       </p>
       <div className={styles.sideBySideButtons}>
         <Button onClick={installDvc} text="Install" />
@@ -24,7 +32,10 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
     </>
   ) : (
     <>
-      <p>DVC & DVCLive cannot be auto-installed as Python was not located.</p>
+      <p>
+        {installationSentence} Unfortunately, DVC & DVCLive cannot be
+        auto-installed as Python was not located.
+      </p>
       <Button onClick={setupWorkspace} text="Configure" />
     </>
   )
@@ -33,7 +44,13 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
     <EmptyState isFullScreen={false}>
       <h1>DVC is currently unavailable</h1>
       {children}
-      {contents}
+      <p>
+        New to DVC? Check out <a href="https://dvc.org/">dvc.org</a> to learn
+        more or our{' '}
+        <a href="https://github.com/iterative/vscode-dvc-demo">demo</a> to
+        quickly try the extension.{' '}
+      </p>
+      {conditionalContents}
     </EmptyState>
   )
 }

webview/src/setup/components/dvc/DvcUnitialized.tsx

@@ -11,6 +11,8 @@ export const DvcUninitialized: React.FC<PropsWithChildren> = ({ children }) => (
       The current workspace does not contain a DVC project. You can initialize a
       project which will enable features powered by DVC. To learn more about how
       to use DVC please read <a href="https://dvc.org/doc">our docs</a>.
+      Interested in trying a demo project? Check out our{' '}
+      <a href="https://github.com/iterative/vscode-dvc-demo">extension demo</a>.
     </p>
     <Button onClick={initializeDvc} text="Initialize Project"></Button>
   </EmptyState>

webview/src/setup/components/experiments/Experiments.tsx

@@ -8,7 +8,7 @@ import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { IconButton } from '../../../shared/components/button/IconButton'
 import { Beaker } from '../../../shared/components/icons'
 import { SetupState } from '../../store'
-import { FocusDvcSection } from '../shared/FocusDvcSection'
+import { DvcNotSetup } from '../shared/DvcNotSetup'
 
 type ExperimentsProps = {
   isDvcSetup: boolean
@@ -21,11 +21,9 @@ export const Experiments: React.FC<ExperimentsProps> = ({ isDvcSetup }) => {
 
   if (!isDvcSetup) {
     return (
-      <EmptyState isFullScreen={false}>
-        <h1>DVC is not setup</h1>
+      <DvcNotSetup>
         <p>DVC needs to be setup before you can access experiments.</p>
-        <FocusDvcSection />
-      </EmptyState>
+      </DvcNotSetup>
     )
   }
 

webview/src/setup/components/shared/DvcNotSetup.tsx

@@ -0,0 +1,11 @@
+import React, { PropsWithChildren } from 'react'
+import { FocusDvcSection } from './FocusDvcSection'
+import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
+
+export const DvcNotSetup: React.FC<PropsWithChildren> = ({ children }) => (
+  <EmptyState isFullScreen={false}>
+    <h1>DVC is not setup</h1>
+    {children}
+    <FocusDvcSection />
+  </EmptyState>
+)