From 65bef89b18420050308141893f7ad4134bda6892 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Thu, 15 Jun 2023 12:36:04 -0500
Subject: [PATCH 1/6] Point users to Python extension in DVC Setup

---
 .../setup/components/dvc/CliUnavailable.tsx   | 53 +++++++++++++++----
 .../components/remotes/ShowExtension.tsx      | 14 ++---
 .../setup/components/shared/ExtensionLink.tsx | 24 +++++++++
 3 files changed, 71 insertions(+), 20 deletions(-)
 create mode 100644 webview/src/setup/components/shared/ExtensionLink.tsx

diff --git a/webview/src/setup/components/dvc/CliUnavailable.tsx b/webview/src/setup/components/dvc/CliUnavailable.tsx
index bb90afc650..5047eb2469 100644
--- a/webview/src/setup/components/dvc/CliUnavailable.tsx
+++ b/webview/src/setup/components/dvc/CliUnavailable.tsx
@@ -10,6 +10,28 @@ import {
   updatePythonEnvironment
 } from '../../util/messages'
 import { Warning } from '../../../shared/components/icons'
+import { ExtensionLink } from '../shared/ExtensionLink'
+import Tooltip from '../../../shared/components/tooltip/Tooltip'
+
+const PythonExtensionTooltip: React.FC<
+  PropsWithChildren<{ disabled: boolean }>
+> = ({ disabled, children }) => (
+  <Tooltip
+    content={
+      <span>
+        Install the{' '}
+        <ExtensionLink extensionId="ms-python.python">
+          Python extension
+        </ExtensionLink>
+        .
+      </span>
+    }
+    interactive={true}
+    disabled={disabled}
+  >
+    <span>{children}</span>
+  </Tooltip>
+)
 
 export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
   const { pythonBinPath, isPythonExtensionUsed, isPythonEnvironmentGlobal } =
@@ -35,21 +57,17 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
         )}
         .
       </p>
-      <div className={styles.sideBySideButtons}>
-        <Button onClick={installDvc} text="Install (pip)" />
-        {isPythonExtensionUsed && (
-          <Button onClick={updatePythonEnvironment} text="Set Env" />
-        )}
-        <Button onClick={setupWorkspace} text="Locate DVC" />
-      </div>
     </>
   ) : (
     <>
       <p>
         {installationSentence} DVC & DVCLive cannot be auto-installed as Python
-        was not located.
+        was not located. Install the{' '}
+        <ExtensionLink extensionId="ms-python.python">
+          Python extension
+        </ExtensionLink>{' '}
+        to detect or create python environments.
       </p>
-      <Button onClick={setupWorkspace} text="Locate DVC" />
     </>
   )
 
@@ -58,6 +76,23 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
       <h1>DVC is currently unavailable</h1>
       {children}
       {conditionalContents}
+      <div className={styles.sideBySideButtons}>
+        <PythonExtensionTooltip disabled={canInstall}>
+          <Button
+            disabled={!canInstall}
+            onClick={installDvc}
+            text="Install (pip)"
+          />
+        </PythonExtensionTooltip>
+        <PythonExtensionTooltip disabled={isPythonExtensionUsed}>
+          <Button
+            disabled={!isPythonExtensionUsed}
+            onClick={updatePythonEnvironment}
+            text="Set Env"
+          />
+        </PythonExtensionTooltip>
+        <Button onClick={setupWorkspace} text="Locate DVC" />
+      </div>
     </EmptyState>
   )
 }
diff --git a/webview/src/setup/components/remotes/ShowExtension.tsx b/webview/src/setup/components/remotes/ShowExtension.tsx
index 543d1dcb4f..9cec59f278 100644
--- a/webview/src/setup/components/remotes/ShowExtension.tsx
+++ b/webview/src/setup/components/remotes/ShowExtension.tsx
@@ -2,14 +2,13 @@ import React from 'react'
 import styles from './styles.module.scss'
 import { Icon } from '../../../shared/components/Icon'
 import { Extensions } from '../../../shared/components/icons'
+import { ExtensionLink } from '../shared/ExtensionLink'
 
 export const ShowExtension: React.FC<{
   capabilities: string
   id: string
   name: string
 }> = ({ capabilities, id, name }) => {
-  const idQuery = `"@id:${id}"`
-
   return (
     <p>
       <Icon
@@ -18,15 +17,8 @@ export const ShowExtension: React.FC<{
         height={16}
         className={styles.infoIcon}
       />{' '}
-      The{' '}
-      <a
-        href={`command:workbench.extensions.search?${encodeURIComponent(
-          idQuery
-        )}`}
-      >
-        {name}
-      </a>{' '}
-      extension can be used to <span>{capabilities}</span>.
+      The <ExtensionLink extensionId={id}>{name}</ExtensionLink> extension can
+      be used to <span>{capabilities}</span>.
     </p>
   )
 }
diff --git a/webview/src/setup/components/shared/ExtensionLink.tsx b/webview/src/setup/components/shared/ExtensionLink.tsx
new file mode 100644
index 0000000000..afeca6b09e
--- /dev/null
+++ b/webview/src/setup/components/shared/ExtensionLink.tsx
@@ -0,0 +1,24 @@
+import React, { PropsWithChildren } from 'react'
+import type { HTMLAttributes } from 'react'
+
+interface ExtensionLinkProps extends HTMLAttributes<HTMLAnchorElement> {
+  extensionId: string
+}
+
+export const ExtensionLink: React.FC<PropsWithChildren<ExtensionLinkProps>> = ({
+  extensionId,
+  children,
+  ...props
+}) => {
+  const idQuery = `"@id:${extensionId}"`
+  return (
+    <a
+      href={`command:workbench.extensions.search?${encodeURIComponent(
+        idQuery
+      )}`}
+      {...props}
+    >
+      {children}
+    </a>
+  )
+}

From 6b1656b1a7c4ec07a8960c0b4d5960559449cab8 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 16 Jun 2023 19:05:44 -0500
Subject: [PATCH 2/6] Add tests and fix warnings

---
 webview/src/setup/components/App.test.tsx     | 27 ++++++++--
 .../setup/components/dvc/CliUnavailable.tsx   | 54 ++++++++++++-------
 .../setup/components/dvc/styles.module.scss   |  6 ++-
 .../src/shared/components/button/Button.tsx   |  1 +
 4 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx
index a38ecc1eb3..84a797562f 100644
--- a/webview/src/setup/components/App.test.tsx
+++ b/webview/src/setup/components/App.test.tsx
@@ -133,7 +133,7 @@ describe('App', () => {
       })
     })
 
-    it('should tell the user they cannot install DVC without a Python interpreter', () => {
+    it('should tell the user they cannot install DVC without a Python env', () => {
       renderApp({
         cliCompatible: undefined,
         dvcCliDetails: {
@@ -147,7 +147,6 @@ describe('App', () => {
           /DVC & DVCLive cannot be auto-installed as Python was not located./
         )
       ).toBeInTheDocument()
-      expect(screen.queryByText('Install')).not.toBeInTheDocument()
     })
 
     it('should tell the user they can auto-install DVC with a Python interpreter', () => {
@@ -169,7 +168,7 @@ describe('App', () => {
       expect(screen.getByText('Install (pip)')).toBeInTheDocument()
     })
 
-    it('should let the user find another Python interpreter to install DVC when the Python extension is not installed', () => {
+    it('should let the user locate DVC when the Python extension is not installed', () => {
       renderApp({
         cliCompatible: undefined,
         dvcCliDetails: {
@@ -187,6 +186,28 @@ describe('App', () => {
       })
     })
 
+    it('should show "Set Env" and "Install (pip)" button tooltips when dvc is unavailable and Python extension is not installed', () => {
+      renderApp({
+        cliCompatible: undefined,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: undefined
+        }
+      })
+
+      const installButton = screen.getByText('Install (pip)')
+
+      fireEvent.mouseEnter(installButton, { bubbles: true })
+
+      expect(screen.getByTestId('install-tooltip')).toBeVisible()
+
+      const setEnvButton = screen.getByText('Set Env')
+
+      fireEvent.mouseEnter(setEnvButton, { bubbles: true })
+
+      expect(screen.getByTestId('set-env-tooltip')).toBeVisible()
+    })
+
     it('should let the user find or create another Python interpreter to install DVC when the Python extension is installed', () => {
       renderApp({
         cliCompatible: undefined,
diff --git a/webview/src/setup/components/dvc/CliUnavailable.tsx b/webview/src/setup/components/dvc/CliUnavailable.tsx
index 5047eb2469..74bc69c0ee 100644
--- a/webview/src/setup/components/dvc/CliUnavailable.tsx
+++ b/webview/src/setup/components/dvc/CliUnavailable.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from 'react'
+import React, { PropsWithChildren, ReactElement } from 'react'
 import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
 import { Button } from '../../../shared/components/button/Button'
@@ -13,12 +13,14 @@ import { Warning } from '../../../shared/components/icons'
 import { ExtensionLink } from '../shared/ExtensionLink'
 import Tooltip from '../../../shared/components/tooltip/Tooltip'
 
-const PythonExtensionTooltip: React.FC<
-  PropsWithChildren<{ disabled: boolean }>
-> = ({ disabled, children }) => (
+const PythonExtensionTooltip: React.FC<{
+  dataTestId: string
+  disabled: boolean
+  children: ReactElement
+}> = ({ dataTestId, disabled, children }) => (
   <Tooltip
     content={
-      <span>
+      <span data-testid={dataTestId}>
         Install the{' '}
         <ExtensionLink extensionId="ms-python.python">
           Python extension
@@ -77,21 +79,33 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
       {children}
       {conditionalContents}
       <div className={styles.sideBySideButtons}>
-        <PythonExtensionTooltip disabled={canInstall}>
-          <Button
-            disabled={!canInstall}
-            onClick={installDvc}
-            text="Install (pip)"
-          />
-        </PythonExtensionTooltip>
-        <PythonExtensionTooltip disabled={isPythonExtensionUsed}>
-          <Button
-            disabled={!isPythonExtensionUsed}
-            onClick={updatePythonEnvironment}
-            text="Set Env"
-          />
-        </PythonExtensionTooltip>
-        <Button onClick={setupWorkspace} text="Locate DVC" />
+        <span className={styles.buttonWrapper}>
+          <PythonExtensionTooltip
+            dataTestId="install-tooltip"
+            disabled={canInstall}
+          >
+            <Button
+              disabled={!canInstall}
+              onClick={installDvc}
+              text="Install (pip)"
+            />
+          </PythonExtensionTooltip>
+        </span>
+        <span className={styles.buttonWrapper}>
+          <PythonExtensionTooltip
+            dataTestId="set-env-tooltip"
+            disabled={isPythonExtensionUsed}
+          >
+            <Button
+              disabled={!isPythonExtensionUsed}
+              onClick={updatePythonEnvironment}
+              text="Set Env"
+            />
+          </PythonExtensionTooltip>
+        </span>
+        <span className={styles.buttonWrapper}>
+          <Button onClick={setupWorkspace} text="Locate DVC" />
+        </span>
       </div>
     </EmptyState>
   )
diff --git a/webview/src/setup/components/dvc/styles.module.scss b/webview/src/setup/components/dvc/styles.module.scss
index 278f9dfe6c..54dd4e07b3 100644
--- a/webview/src/setup/components/dvc/styles.module.scss
+++ b/webview/src/setup/components/dvc/styles.module.scss
@@ -45,6 +45,10 @@
   font-size: inherit;
 }
 
-.sideBySideButtons > *:not(:first-child) {
+.buttonWrapper {
+  display: inline-block;
+}
+
+.sideBySideButtons .buttonWrapper:not(:first-child) {
   margin-left: 15px;
 }
diff --git a/webview/src/shared/components/button/Button.tsx b/webview/src/shared/components/button/Button.tsx
index 3d78bfb766..d8752370d1 100644
--- a/webview/src/shared/components/button/Button.tsx
+++ b/webview/src/shared/components/button/Button.tsx
@@ -9,6 +9,7 @@ export type ButtonProps = {
   isNested?: boolean
   children?: React.ReactNode
   disabled?: boolean
+  className?: string
 }
 
 export const Button: React.FC<ButtonProps> = ({

From e8f6cecabec04dcf6ccdaf9d72e04b8145c9d3cf Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 16 Jun 2023 19:13:11 -0500
Subject: [PATCH 3/6] Undo unneeded text change

---
 webview/src/setup/components/App.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx
index 84a797562f..f474191855 100644
--- a/webview/src/setup/components/App.test.tsx
+++ b/webview/src/setup/components/App.test.tsx
@@ -133,7 +133,7 @@ describe('App', () => {
       })
     })
 
-    it('should tell the user they cannot install DVC without a Python env', () => {
+    it('should tell the user they cannot install DVC without a Python interpreter', () => {
       renderApp({
         cliCompatible: undefined,
         dvcCliDetails: {

From 6f047a53d0417c5a1ab2c9237031d08aa24ece49 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Fri, 16 Jun 2023 20:02:49 -0500
Subject: [PATCH 4/6] Fix sideBySide buttons

---
 webview/src/setup/components/dvc/CliIncompatible.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webview/src/setup/components/dvc/CliIncompatible.tsx b/webview/src/setup/components/dvc/CliIncompatible.tsx
index 552f0b038e..5ad544455f 100644
--- a/webview/src/setup/components/dvc/CliIncompatible.tsx
+++ b/webview/src/setup/components/dvc/CliIncompatible.tsx
@@ -15,8 +15,12 @@ export const CliIncompatible: React.FC<PropsWithChildren> = ({ children }) => {
   const conditionalContents = canUpgrade ? (
     <>
       <div className={styles.sideBySideButtons}>
-        <Button onClick={upgradeDvc} text="Upgrade (pip)" />
-        <Button text="Check Compatibility" onClick={checkCompatibility} />
+        <span className={styles.buttonWrapper}>
+          <Button onClick={upgradeDvc} text="Upgrade (pip)" />
+        </span>
+        <span className={styles.buttonWrapper}>
+          <Button text="Check Compatibility" onClick={checkCompatibility} />
+        </span>
       </div>
     </>
   ) : (

From 4eea17c27150a6f82aff7e593f79140ebe7cd1f5 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Mon, 19 Jun 2023 10:56:36 -0500
Subject: [PATCH 5/6] Try different design

---
 webview/src/setup/components/App.test.tsx     | 14 ++--
 .../setup/components/dvc/CliIncompatible.tsx  |  8 +-
 .../setup/components/dvc/CliUnavailable.tsx   | 79 ++++++-------------
 .../setup/components/dvc/styles.module.scss   | 10 ++-
 .../components/remotes/ShowExtension.tsx      |  5 +-
 5 files changed, 38 insertions(+), 78 deletions(-)

diff --git a/webview/src/setup/components/App.test.tsx b/webview/src/setup/components/App.test.tsx
index f474191855..dcc2278d7a 100644
--- a/webview/src/setup/components/App.test.tsx
+++ b/webview/src/setup/components/App.test.tsx
@@ -186,7 +186,7 @@ describe('App', () => {
       })
     })
 
-    it('should show "Set Env" and "Install (pip)" button tooltips when dvc is unavailable and Python extension is not installed', () => {
+    it('should show python extension info when dvc is unavailable and Python extension is not installed', () => {
       renderApp({
         cliCompatible: undefined,
         dvcCliDetails: {
@@ -195,17 +195,13 @@ describe('App', () => {
         }
       })
 
-      const installButton = screen.getByText('Install (pip)')
+      const infoText = screen.getByText(/detect or create python environments/)
 
-      fireEvent.mouseEnter(installButton, { bubbles: true })
+      expect(infoText).toBeInTheDocument()
 
-      expect(screen.getByTestId('install-tooltip')).toBeVisible()
+      sendSetDataMessage({ ...DEFAULT_DATA, isPythonExtensionUsed: true })
 
-      const setEnvButton = screen.getByText('Set Env')
-
-      fireEvent.mouseEnter(setEnvButton, { bubbles: true })
-
-      expect(screen.getByTestId('set-env-tooltip')).toBeVisible()
+      expect(infoText).not.toBeInTheDocument()
     })
 
     it('should let the user find or create another Python interpreter to install DVC when the Python extension is installed', () => {
diff --git a/webview/src/setup/components/dvc/CliIncompatible.tsx b/webview/src/setup/components/dvc/CliIncompatible.tsx
index 5ad544455f..552f0b038e 100644
--- a/webview/src/setup/components/dvc/CliIncompatible.tsx
+++ b/webview/src/setup/components/dvc/CliIncompatible.tsx
@@ -15,12 +15,8 @@ export const CliIncompatible: React.FC<PropsWithChildren> = ({ children }) => {
   const conditionalContents = canUpgrade ? (
     <>
       <div className={styles.sideBySideButtons}>
-        <span className={styles.buttonWrapper}>
-          <Button onClick={upgradeDvc} text="Upgrade (pip)" />
-        </span>
-        <span className={styles.buttonWrapper}>
-          <Button text="Check Compatibility" onClick={checkCompatibility} />
-        </span>
+        <Button onClick={upgradeDvc} text="Upgrade (pip)" />
+        <Button text="Check Compatibility" onClick={checkCompatibility} />
       </div>
     </>
   ) : (
diff --git a/webview/src/setup/components/dvc/CliUnavailable.tsx b/webview/src/setup/components/dvc/CliUnavailable.tsx
index 74bc69c0ee..b3fd8f32f0 100644
--- a/webview/src/setup/components/dvc/CliUnavailable.tsx
+++ b/webview/src/setup/components/dvc/CliUnavailable.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, ReactElement } from 'react'
+import React, { PropsWithChildren } from 'react'
 import { useSelector } from 'react-redux'
 import styles from './styles.module.scss'
 import { Button } from '../../../shared/components/button/Button'
@@ -10,30 +10,7 @@ import {
   updatePythonEnvironment
 } from '../../util/messages'
 import { Warning } from '../../../shared/components/icons'
-import { ExtensionLink } from '../shared/ExtensionLink'
-import Tooltip from '../../../shared/components/tooltip/Tooltip'
-
-const PythonExtensionTooltip: React.FC<{
-  dataTestId: string
-  disabled: boolean
-  children: ReactElement
-}> = ({ dataTestId, disabled, children }) => (
-  <Tooltip
-    content={
-      <span data-testid={dataTestId}>
-        Install the{' '}
-        <ExtensionLink extensionId="ms-python.python">
-          Python extension
-        </ExtensionLink>
-        .
-      </span>
-    }
-    interactive={true}
-    disabled={disabled}
-  >
-    <span>{children}</span>
-  </Tooltip>
-)
+import { ShowExtension } from '../remotes/ShowExtension'
 
 export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
   const { pythonBinPath, isPythonExtensionUsed, isPythonEnvironmentGlobal } =
@@ -64,11 +41,7 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
     <>
       <p>
         {installationSentence} DVC & DVCLive cannot be auto-installed as Python
-        was not located. Install the{' '}
-        <ExtensionLink extensionId="ms-python.python">
-          Python extension
-        </ExtensionLink>{' '}
-        to detect or create python environments.
+        was not located.
       </p>
     </>
   )
@@ -79,34 +52,26 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
       {children}
       {conditionalContents}
       <div className={styles.sideBySideButtons}>
-        <span className={styles.buttonWrapper}>
-          <PythonExtensionTooltip
-            dataTestId="install-tooltip"
-            disabled={canInstall}
-          >
-            <Button
-              disabled={!canInstall}
-              onClick={installDvc}
-              text="Install (pip)"
-            />
-          </PythonExtensionTooltip>
-        </span>
-        <span className={styles.buttonWrapper}>
-          <PythonExtensionTooltip
-            dataTestId="set-env-tooltip"
-            disabled={isPythonExtensionUsed}
-          >
-            <Button
-              disabled={!isPythonExtensionUsed}
-              onClick={updatePythonEnvironment}
-              text="Set Env"
-            />
-          </PythonExtensionTooltip>
-        </span>
-        <span className={styles.buttonWrapper}>
-          <Button onClick={setupWorkspace} text="Locate DVC" />
-        </span>
+        <Button
+          disabled={!canInstall}
+          onClick={installDvc}
+          text="Install (pip)"
+        />
+        <Button
+          disabled={!isPythonExtensionUsed}
+          onClick={updatePythonEnvironment}
+          text="Set Env"
+        />
+        <Button onClick={setupWorkspace} text="Locate DVC" />
       </div>
+      {isPythonExtensionUsed || (
+        <ShowExtension
+          className={styles.pythonExtInfo}
+          id="ms-python.python"
+          name="Python"
+          capabilities="detect or create python environments"
+        />
+      )}
     </EmptyState>
   )
 }
diff --git a/webview/src/setup/components/dvc/styles.module.scss b/webview/src/setup/components/dvc/styles.module.scss
index 54dd4e07b3..3dad765014 100644
--- a/webview/src/setup/components/dvc/styles.module.scss
+++ b/webview/src/setup/components/dvc/styles.module.scss
@@ -45,10 +45,12 @@
   font-size: inherit;
 }
 
-.buttonWrapper {
-  display: inline-block;
+.sideBySideButtons *:not(:first-child) {
+  margin-left: 15px;
 }
 
-.sideBySideButtons .buttonWrapper:not(:first-child) {
-  margin-left: 15px;
+.pythonExtInfo {
+  max-width: 350px;
+  margin: 8px auto;
+  font-size: 0.75rem;
 }
diff --git a/webview/src/setup/components/remotes/ShowExtension.tsx b/webview/src/setup/components/remotes/ShowExtension.tsx
index 9cec59f278..e61c93afb0 100644
--- a/webview/src/setup/components/remotes/ShowExtension.tsx
+++ b/webview/src/setup/components/remotes/ShowExtension.tsx
@@ -8,9 +8,10 @@ export const ShowExtension: React.FC<{
   capabilities: string
   id: string
   name: string
-}> = ({ capabilities, id, name }) => {
+  className?: string
+}> = ({ capabilities, id, name, className }) => {
   return (
-    <p>
+    <p className={className}>
       <Icon
         icon={Extensions}
         width={16}

From 31196169c81067866e75d2b69a0994b5b962ff77 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Mon, 19 Jun 2023 11:01:05 -0500
Subject: [PATCH 6/6] Remove font-size change

---
 webview/src/setup/components/dvc/styles.module.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webview/src/setup/components/dvc/styles.module.scss b/webview/src/setup/components/dvc/styles.module.scss
index 3dad765014..dd8db78424 100644
--- a/webview/src/setup/components/dvc/styles.module.scss
+++ b/webview/src/setup/components/dvc/styles.module.scss
@@ -52,5 +52,4 @@
 .pythonExtInfo {
   max-width: 350px;
   margin: 8px auto;
-  font-size: 0.75rem;
 }