Merge branch 'main' into fix-plot-ribbon-copy-buttons

extension/src/cli/dvc/contract.ts

@@ -1,7 +1,7 @@
 import { Plot } from '../../plots/webview/contract'
 
 export const MIN_CLI_VERSION = '2.58.1'
-export const LATEST_TESTED_CLI_VERSION = '3.0.0'
+export const LATEST_TESTED_CLI_VERSION = '3.1.0'
 
 type ErrorContents = { type: string; msg: string }
 

package.json

@@ -77,7 +77,7 @@
     "fastify": "3.29.5",
     "json5": "2.2.3",
     "loader-utils": "2.0.4",
-    "terser": "5.17.7",
+    "terser": "5.18.0",
     "trim-newlines": "3.0.1",
     "trim": "1.0.1"
   },

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

yarn.lock

@@ -19065,10 +19065,10 @@ terser-webpack-plugin@^5.3.1, terser-webpack-plugin@^5.3.7:
     serialize-javascript "^6.0.1"
     terser "^5.16.5"
 
-terser@5.17.7, terser@^4.1.2, terser@^5.10.0, terser@^5.16.5, terser@^5.7.2:
-  version "5.17.7"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.17.7.tgz#2a8b134826fe179b711969fd9d9a0c2479b2a8c3"
-  integrity sha512-/bi0Zm2C6VAexlGgLlVxA0P2lru/sdLyfCVaRMfKVo9nWxbmz7f/sD8VPybPeSUJaJcwmCJis9pBIhcVcG1QcQ==
+terser@5.18.0, terser@^4.1.2, terser@^5.10.0, terser@^5.16.5, terser@^5.7.2:
+  version "5.18.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.18.0.tgz#dc811fb8e3481a875d545bda247c8730ee4dc76b"
+  integrity sha512-pdL757Ig5a0I+owA42l6tIuEycRuM7FPY4n62h44mRLRfnOxJkkOHd6i89dOpwZlpF6JXBwaAHF6yWzFrt+QyA==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
     acorn "^8.8.2"