Point users to Python extension in DVC Setup

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

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

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>
     </>
   ) : (

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'
@@ -10,6 +10,30 @@ 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>
+)
 
 export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
   const { pythonBinPath, isPythonExtensionUsed, isPythonEnvironmentGlobal } =
@@ -35,21 +59,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 +78,35 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
       <h1>DVC is currently unavailable</h1>
       {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>
+      </div>
     </EmptyState>
   )
 }

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;
 }

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

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

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> = ({