From e6662030c0c8b4e972b1be993fc51913d8df8baf Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 19 May 2023 11:07:52 -0500
Subject: [PATCH 1/4] Add section with broken button

---
 extension/src/setup/webview/contract.ts            |  2 ++
 webview/src/setup/components/App.tsx               |  8 ++++++++
 webview/src/setup/components/GetStarted.tsx        | 14 ++++++++++++++
 webview/src/setup/components/shared/util.ts        |  1 +
 .../sectionContainer/SectionDescription.tsx        |  4 ++++
 webview/src/stories/Setup.stories.tsx              |  4 ++++
 6 files changed, 33 insertions(+)
 create mode 100644 webview/src/setup/components/GetStarted.tsx

diff --git a/extension/src/setup/webview/contract.ts b/extension/src/setup/webview/contract.ts
index 2bb21b79ce..20764a6277 100644
--- a/extension/src/setup/webview/contract.ts
+++ b/extension/src/setup/webview/contract.ts
@@ -25,6 +25,7 @@ export type SetupData = {
 }
 
 export enum SetupSection {
+  GET_STARTED = 'get-started',
   DVC = 'dvc',
   EXPERIMENTS = 'experiments',
   REMOTES = 'remotes',
@@ -32,6 +33,7 @@ export enum SetupSection {
 }
 
 export const DEFAULT_SECTION_COLLAPSED = {
+  [SetupSection.GET_STARTED]: false,
   [SetupSection.DVC]: false,
   [SetupSection.EXPERIMENTS]: false,
   [SetupSection.REMOTES]: false,
diff --git a/webview/src/setup/components/App.tsx b/webview/src/setup/components/App.tsx
index bcf4b123b0..980f004bdc 100644
--- a/webview/src/setup/components/App.tsx
+++ b/webview/src/setup/components/App.tsx
@@ -9,6 +9,7 @@ import { Dvc } from './dvc/Dvc'
 import { Experiments } from './experiments/Experiments'
 import { Studio } from './studio/Studio'
 import { SetupContainer } from './SetupContainer'
+import { GetStarted } from './GetStarted'
 import { Remotes } from './remotes/Remotes'
 import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging'
 import { sendMessage } from '../../shared/vscode'
@@ -171,6 +172,13 @@ export const App: React.FC = () => {
       >
         <Dvc />
       </SetupContainer>
+      <SetupContainer
+        sectionKey={SetupSection.GET_STARTED}
+        title="Get Started"
+        icon={TooltipIconType.INFO}
+      >
+        <GetStarted />
+      </SetupContainer>
       <SetupContainer
         sectionKey={SetupSection.EXPERIMENTS}
         title="Experiments"
diff --git a/webview/src/setup/components/GetStarted.tsx b/webview/src/setup/components/GetStarted.tsx
new file mode 100644
index 0000000000..bf142a3631
--- /dev/null
+++ b/webview/src/setup/components/GetStarted.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+export const GetStarted: React.FC = () => {
+  return (
+    <>
+      <h1>Get Started</h1>
+      <p>
+        New to the extension? Go through the walkthrough to familiarize yourself
+        with the different features.
+      </p>
+      <button>Show Walkthrough</button>
+    </>
+  )
+}
diff --git a/webview/src/setup/components/shared/util.ts b/webview/src/setup/components/shared/util.ts
index 33d5db9491..e1ae6799ae 100644
--- a/webview/src/setup/components/shared/util.ts
+++ b/webview/src/setup/components/shared/util.ts
@@ -3,6 +3,7 @@ import { updateSectionCollapsed } from '../../state/webviewSlice'
 
 const getAllSections = (collapsed: boolean) => ({
   [SetupSection.DVC]: collapsed,
+  [SetupSection.GET_STARTED]: collapsed,
   [SetupSection.EXPERIMENTS]: collapsed,
   [SetupSection.REMOTES]: collapsed,
   [SetupSection.STUDIO]: collapsed
diff --git a/webview/src/shared/components/sectionContainer/SectionDescription.tsx b/webview/src/shared/components/sectionContainer/SectionDescription.tsx
index eb82a73ed3..ec00e01a6a 100644
--- a/webview/src/shared/components/sectionContainer/SectionDescription.tsx
+++ b/webview/src/shared/components/sectionContainer/SectionDescription.tsx
@@ -12,6 +12,8 @@ const sectionDescriptionTestIds = {
   [PlotsSection.TEMPLATE_PLOTS]: 'tooltip-template-plots',
   // Setup DVC
   [SetupSection.DVC]: 'tooltip-setup-dvc',
+  // Setup Get Started
+  [SetupSection.GET_STARTED]: 'tooltip-setup-get-started',
   // Setup Experiments
   [SetupSection.EXPERIMENTS]: 'tooltip-setup-experiments',
   // Setup Remote
@@ -55,6 +57,8 @@ export const SectionDescriptionMainText = {
       .
     </>
   ),
+  // Setup Get Started
+  [SetupSection.GET_STARTED]: <>Get started with the VsCode DVC extension</>,
   // Setup DVC
   [SetupSection.DVC]: <>Configure the extension to start working with DVC.</>,
   // Setup Experiments
diff --git a/webview/src/stories/Setup.stories.tsx b/webview/src/stories/Setup.stories.tsx
index 5be17782fc..a6fa890aa5 100644
--- a/webview/src/stories/Setup.stories.tsx
+++ b/webview/src/stories/Setup.stories.tsx
@@ -26,6 +26,7 @@ const DEFAULT_DATA: SetupData = {
   remoteList: undefined,
   sectionCollapsed: {
     [SetupSection.DVC]: false,
+    [SetupSection.GET_STARTED]: false,
     [SetupSection.EXPERIMENTS]: false,
     [SetupSection.REMOTES]: false,
     [SetupSection.STUDIO]: true
@@ -161,6 +162,7 @@ NoRemoteSetup.args = getUpdatedArgs({
   },
   sectionCollapsed: {
     [SetupSection.DVC]: true,
+    [SetupSection.GET_STARTED]: true,
     [SetupSection.EXPERIMENTS]: true,
     [SetupSection.REMOTES]: false,
     [SetupSection.STUDIO]: true
@@ -178,6 +180,7 @@ ProjectRemoteSetup.args = getUpdatedArgs({
   },
   sectionCollapsed: {
     [SetupSection.DVC]: true,
+    [SetupSection.GET_STARTED]: true,
     [SetupSection.EXPERIMENTS]: true,
     [SetupSection.REMOTES]: false,
     [SetupSection.STUDIO]: true
@@ -198,6 +201,7 @@ MultiProjectRemoteSetup.args = getUpdatedArgs({
   },
   sectionCollapsed: {
     [SetupSection.DVC]: true,
+    [SetupSection.GET_STARTED]: true,
     [SetupSection.EXPERIMENTS]: true,
     [SetupSection.REMOTES]: false,
     [SetupSection.STUDIO]: true

From 7ec6b175d71f4a0c4fd028bc57dc2ef4ac0551c6 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 19 May 2023 11:27:18 -0500
Subject: [PATCH 2/4] Add missing empty state and correct broken button

---
 extension/src/setup/webview/messages.ts                  | 2 ++
 extension/src/webview/contract.ts                        | 2 ++
 webview/src/setup/components/App.test.tsx                | 9 +++++++++
 webview/src/setup/components/GetStarted.tsx              | 9 ++++++---
 webview/src/setup/components/messages.ts                 | 4 ++++
 .../components/sectionContainer/SectionDescription.tsx   | 2 +-
 6 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/extension/src/setup/webview/messages.ts b/extension/src/setup/webview/messages.ts
index 0a91f48b92..b5a0e3bf56 100644
--- a/extension/src/setup/webview/messages.ts
+++ b/extension/src/setup/webview/messages.ts
@@ -73,6 +73,8 @@ export class WebviewMessages {
         return commands.executeCommand(RegisteredCliCommands.INIT)
       case MessageFromWebviewType.INITIALIZE_GIT:
         return this.gitInit()
+      case MessageFromWebviewType.SHOW_WALKTHROUGH:
+        return commands.executeCommand(RegisteredCommands.EXTENSION_GET_STARTED)
       case MessageFromWebviewType.SHOW_SCM_PANEL:
         return this.showScmForCommit()
       case MessageFromWebviewType.SELECT_PYTHON_INTERPRETER:
diff --git a/extension/src/webview/contract.ts b/extension/src/webview/contract.ts
index 1f98ea74cf..589b509bcd 100644
--- a/extension/src/webview/contract.ts
+++ b/extension/src/webview/contract.ts
@@ -38,6 +38,7 @@ export enum MessageFromWebviewType {
   RESIZE_PLOTS = 'resize-plots',
   SAVE_STUDIO_TOKEN = 'save-studio-token',
   SHOW_EXPERIMENT_LOGS = 'show-experiment-logs',
+  SHOW_WALKTHROUGH = 'show-walkthrough',
   STOP_EXPERIMENTS = 'stop-experiments',
   SORT_COLUMN = 'sort-column',
   TOGGLE_EXPERIMENT = 'toggle-experiment',
@@ -215,6 +216,7 @@ export type MessageFromWebview =
   | { type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE }
   | { type: MessageFromWebviewType.INITIALIZE_DVC }
   | { type: MessageFromWebviewType.INITIALIZE_GIT }
+  | { type: MessageFromWebviewType.SHOW_WALKTHROUGH }
   | { type: MessageFromWebviewType.SHOW_SCM_PANEL }
   | { type: MessageFromWebviewType.INSTALL_DVC }
   | { type: MessageFromWebviewType.UPGRADE_DVC }
diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx
index 03beb10a26..0bb61586b8 100644
--- a/webview/src/setup/components/App.test.tsx
+++ b/webview/src/setup/components/App.test.tsx
@@ -294,6 +294,7 @@ describe('App', () => {
         projectInitialized: false,
         sectionCollapsed: {
           [SetupSection.DVC]: false,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: true,
           [SetupSection.STUDIO]: true
@@ -701,6 +702,7 @@ describe('App', () => {
         isStudioConnected: true,
         sectionCollapsed: {
           [SetupSection.DVC]: false,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: true,
           [SetupSection.STUDIO]: true
@@ -723,6 +725,7 @@ describe('App', () => {
         isStudioConnected: true,
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: false,
           [SetupSection.REMOTES]: true,
           [SetupSection.STUDIO]: true
@@ -745,6 +748,7 @@ describe('App', () => {
         isStudioConnected: true,
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: true,
           [SetupSection.STUDIO]: false
@@ -769,6 +773,7 @@ describe('App', () => {
         remoteList: undefined,
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: false,
           [SetupSection.STUDIO]: true
@@ -786,6 +791,7 @@ describe('App', () => {
         remoteList: { demo: undefined, 'example-get-started': undefined },
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: false,
           [SetupSection.STUDIO]: true
@@ -803,6 +809,7 @@ describe('App', () => {
         remoteList: { demo: undefined, 'example-get-started': undefined },
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: false,
           [SetupSection.STUDIO]: true
@@ -827,6 +834,7 @@ describe('App', () => {
         },
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: false,
           [SetupSection.STUDIO]: true
@@ -854,6 +862,7 @@ describe('App', () => {
         },
         sectionCollapsed: {
           [SetupSection.DVC]: true,
+          [SetupSection.GET_STARTED]: true,
           [SetupSection.EXPERIMENTS]: true,
           [SetupSection.REMOTES]: false,
           [SetupSection.STUDIO]: true
diff --git a/webview/src/setup/components/GetStarted.tsx b/webview/src/setup/components/GetStarted.tsx
index bf142a3631..78795c6654 100644
--- a/webview/src/setup/components/GetStarted.tsx
+++ b/webview/src/setup/components/GetStarted.tsx
@@ -1,14 +1,17 @@
 import React from 'react'
+import { showWalkthrough } from './messages'
+import { Button } from '../../shared/components/button/Button'
+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
 
 export const GetStarted: React.FC = () => {
   return (
-    <>
+    <EmptyState isFullScreen={false}>
       <h1>Get Started</h1>
       <p>
         New to the extension? Go through the walkthrough to familiarize yourself
         with the different features.
       </p>
-      <button>Show Walkthrough</button>
-    </>
+      <Button onClick={showWalkthrough} text="Show Walkthrough" />
+    </EmptyState>
   )
 }
diff --git a/webview/src/setup/components/messages.ts b/webview/src/setup/components/messages.ts
index 698ac972f1..68a635701c 100644
--- a/webview/src/setup/components/messages.ts
+++ b/webview/src/setup/components/messages.ts
@@ -1,6 +1,10 @@
 import { MessageFromWebviewType } from 'dvc/src/webview/contract'
 import { sendMessage } from '../../shared/vscode'
 
+export const showWalkthrough = () => {
+  sendMessage({ type: MessageFromWebviewType.SHOW_WALKTHROUGH })
+}
+
 export const checkCompatibility = () => {
   sendMessage({ type: MessageFromWebviewType.CHECK_CLI_COMPATIBLE })
 }
diff --git a/webview/src/shared/components/sectionContainer/SectionDescription.tsx b/webview/src/shared/components/sectionContainer/SectionDescription.tsx
index ec00e01a6a..ddc3b2cee2 100644
--- a/webview/src/shared/components/sectionContainer/SectionDescription.tsx
+++ b/webview/src/shared/components/sectionContainer/SectionDescription.tsx
@@ -58,7 +58,7 @@ export const SectionDescriptionMainText = {
     </>
   ),
   // Setup Get Started
-  [SetupSection.GET_STARTED]: <>Get started with the VsCode DVC extension</>,
+  [SetupSection.GET_STARTED]: <>Get started with the extension</>,
   // Setup DVC
   [SetupSection.DVC]: <>Configure the extension to start working with DVC.</>,
   // Setup Experiments

From 70f7a518b345e92932b4be968e65fb2b75746ec0 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 19 May 2023 11:38:13 -0500
Subject: [PATCH 3/4] Add test

---
 webview/src/setup/components/App.test.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx
index 0bb61586b8..502808456d 100644
--- a/webview/src/setup/components/App.test.tsx
+++ b/webview/src/setup/components/App.test.tsx
@@ -453,6 +453,26 @@ describe('App', () => {
     })
   })
 
+  describe('Get Started', () => {
+    it('should show a button that takes the user to the "Get Started" walkthrough', () => {
+      renderApp()
+
+      expect(
+        within(screen.getByTestId('get-started-section-details')).getAllByText(
+          'Get Started'
+        )
+      ).toHaveLength(2)
+      const walkthroughButton = screen.getByText('Show Walkthrough')
+
+      expect(walkthroughButton).toBeInTheDocument()
+
+      fireEvent.click(walkthroughButton)
+      expect(mockPostMessage).toHaveBeenCalledWith({
+        type: MessageFromWebviewType.SHOW_WALKTHROUGH
+      })
+    })
+  })
+
   describe('Experiments', () => {
     it('should show a screen saying that dvc is not setup if the project is not initialized', () => {
       renderApp({

From 3cd5615e282bb6c50e800220393c087404d02fb3 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 19 May 2023 17:51:39 -0500
Subject: [PATCH 4/4] Add integration test

---
 extension/src/test/suite/setup/index.test.ts | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/extension/src/test/suite/setup/index.test.ts b/extension/src/test/suite/setup/index.test.ts
index e823b30192..c234851ae6 100644
--- a/extension/src/test/suite/setup/index.test.ts
+++ b/extension/src/test/suite/setup/index.test.ts
@@ -189,6 +189,24 @@ suite('Setup Test Suite', () => {
       expect(mockExecuteCommand).to.be.calledWithExactly(showScmPanelCommand)
     }).timeout(WEBVIEW_TEST_TIMEOUT)
 
+    it('should handle a show walkthrough message from the webview', async () => {
+      const { messageSpy, mockExecuteCommand, setup } = buildSetup(disposable)
+
+      const webview = await setup.showWebview()
+      await webview.isReady()
+
+      const mockMessageReceived = getMessageReceivedEmitter(webview)
+
+      messageSpy.resetHistory()
+      mockMessageReceived.fire({
+        type: MessageFromWebviewType.SHOW_WALKTHROUGH
+      })
+
+      expect(mockExecuteCommand).to.be.calledWithExactly(
+        RegisteredCommands.EXTENSION_GET_STARTED
+      )
+    }).timeout(WEBVIEW_TEST_TIMEOUT)
+
     it('should handle a setup the workspace message from the webview', async () => {
       const { messageSpy, mockExecuteCommand, setup } = buildSetup(disposable)