Point users to Python extension in DVC Setup (#4124)

* add link to python extension if users don't use it and disable buttons instead of removing completely

Author: julieg18

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,24 @@ describe('App', () => {
       })
     })
 
+    it('should show python extension info when dvc is unavailable and Python extension is not installed', () => {
+      renderApp({
+        cliCompatible: undefined,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: undefined
+        }
+      })
+
+      const infoText = screen.getByText(/detect or create python environments/)
+
+      expect(infoText).toBeInTheDocument()
+
+      sendSetDataMessage({ ...DEFAULT_DATA, isPythonExtensionUsed: true })
+
+      expect(infoText).not.toBeInTheDocument()
+    })
+
     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/CliUnavailable.tsx

@@ -10,6 +10,7 @@ import {
   updatePythonEnvironment
 } from '../../util/messages'
 import { Warning } from '../../../shared/components/icons'
+import { ShowExtension } from '../remotes/ShowExtension'
 
 export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
   const { pythonBinPath, isPythonExtensionUsed, isPythonEnvironmentGlobal } =
@@ -35,21 +36,13 @@ 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.
       </p>
-      <Button onClick={setupWorkspace} text="Locate DVC" />
     </>
   )
 
@@ -58,6 +51,27 @@ export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
       <h1>DVC is currently unavailable</h1>
       {children}
       {conditionalContents}
+      <div className={styles.sideBySideButtons}>
+        <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>
   )
 }

webview/src/setup/components/dvc/styles.module.scss

@@ -45,6 +45,11 @@
   font-size: inherit;
 }
 
-.sideBySideButtons > *:not(:first-child) {
+.sideBySideButtons *:not(:first-child) {
   margin-left: 15px;
 }
+
+.pythonExtInfo {
+  max-width: 350px;
+  margin: 8px auto;
+}

webview/src/setup/components/remotes/ShowExtension.tsx

@@ -2,31 +2,24 @@ 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}"`
-
+  className?: string
+}> = ({ capabilities, id, name, className }) => {
   return (
-    <p>
+    <p className={className}>
       <Icon
         icon={Extensions}
         width={16}
         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> = ({