Update Setup "dvc is unavailable" section text content (#4098)

* update button names
* simplify text content
* add warning with global environments

Author: julieg18

extension/src/setup/index.ts

@@ -60,7 +60,11 @@ import { Title } from '../vscode/title'
 import { getDVCAppDir } from '../util/appdirs'
 import { getOptions } from '../cli/dvc/options'
 import { isAboveLatestTestedVersion } from '../cli/dvc/version'
-import { createPythonEnv, selectPythonInterpreter } from '../extensions/python'
+import {
+  createPythonEnv,
+  isActivePythonEnvGlobal,
+  selectPythonInterpreter
+} from '../extensions/python'
 
 export class Setup
   extends BaseRepository<TSetupData>
@@ -396,12 +400,16 @@ export class Setup
 
     const pythonBinPath = await findPythonBinForInstall()
 
+    const isPythonEnvironmentGlobal =
+      isPythonExtensionUsed && (await isActivePythonEnvGlobal())
+
     this.webviewMessages.sendWebviewMessage({
       canGitInitialize,
       cliCompatible: this.getCliCompatible(),
       dvcCliDetails,
       hasData,
       isAboveLatestTestedVersion: isAboveLatestTestedVersion(this.cliVersion),
+      isPythonEnvironmentGlobal,
       isPythonExtensionUsed,
       isStudioConnected: this.studioIsConnected,
       needsGitCommit,

extension/src/setup/webview/contract.ts

@@ -12,6 +12,7 @@ export type SetupData = {
   cliCompatible: boolean | undefined
   dvcCliDetails: DvcCliDetails | undefined
   hasData: boolean | undefined
+  isPythonEnvironmentGlobal: boolean | undefined
   isPythonExtensionUsed: boolean
   isStudioConnected: boolean
   needsGitCommit: boolean

extension/src/test/suite/setup/index.test.ts

@@ -356,6 +356,7 @@ suite('Setup Test Suite', () => {
         dvcCliDetails: { command: 'dvc', version: undefined },
         hasData: false,
         isAboveLatestTestedVersion: undefined,
+        isPythonEnvironmentGlobal: false,
         isPythonExtensionUsed: false,
         isStudioConnected: false,
         needsGitCommit: true,
@@ -400,6 +401,7 @@ suite('Setup Test Suite', () => {
         dvcCliDetails: { command: 'dvc', version: MIN_CLI_VERSION },
         hasData: false,
         isAboveLatestTestedVersion: false,
+        isPythonEnvironmentGlobal: false,
         isPythonExtensionUsed: false,
         isStudioConnected: false,
         needsGitCommit: true,
@@ -452,6 +454,7 @@ suite('Setup Test Suite', () => {
         },
         hasData: false,
         isAboveLatestTestedVersion: false,
+        isPythonEnvironmentGlobal: false,
         isPythonExtensionUsed: false,
         isStudioConnected: false,
         needsGitCommit: false,
@@ -504,6 +507,7 @@ suite('Setup Test Suite', () => {
         },
         hasData: false,
         isAboveLatestTestedVersion: false,
+        isPythonEnvironmentGlobal: false,
         isPythonExtensionUsed: false,
         isStudioConnected: false,
         needsGitCommit: true,

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

@@ -31,6 +31,7 @@ const DEFAULT_DATA = {
   },
   hasData: false,
   isAboveLatestTestedVersion: false,
+  isPythonEnvironmentGlobal: false,
   isPythonExtensionUsed: false,
   isStudioConnected: false,
   needsGitCommit: false,
@@ -161,7 +162,7 @@ describe('App', () => {
       })
 
       const sentenceReg = new RegExp(
-        `DVC & DVCLive can be auto-installed with ${defaultInterpreter}.`
+        `Auto-install \\(pip\\) DVC & DVCLive with ${defaultInterpreter}`
       )
 
       expect(screen.getByText(sentenceReg)).toBeInTheDocument()
@@ -178,7 +179,7 @@ describe('App', () => {
         pythonBinPath: 'python'
       })
 
-      const button = screen.getByText('Configure')
+      const button = screen.getByText('Locate DVC')
       fireEvent.click(button)
 
       expect(mockPostMessage).toHaveBeenCalledWith({
@@ -197,7 +198,7 @@ describe('App', () => {
         pythonBinPath: 'python'
       })
 
-      const button = screen.getByText('Update Env')
+      const button = screen.getByText('Set Env')
       fireEvent.click(button)
 
       expect(mockPostMessage).toHaveBeenCalledWith({
@@ -223,6 +224,25 @@ describe('App', () => {
       })
     })
 
+    it('should let the user auto-install DVC but warn the user that their selected env is global when the Python extension is installed', () => {
+      const defaultInterpreter = 'python'
+      renderApp({
+        cliCompatible: undefined,
+        dvcCliDetails: {
+          command: 'python -m dvc',
+          version: undefined
+        },
+        isPythonEnvironmentGlobal: true,
+        isPythonExtensionUsed: true,
+        pythonBinPath: defaultInterpreter
+      })
+
+      const button = screen.getByText('Set Env')
+
+      expect(button).toBeInTheDocument()
+      expect(screen.getByText('Not a virtual environment)')).toBeInTheDocument()
+    })
+
     it('should not show a screen saying that DVC is not installed if the cli is available', () => {
       renderApp()
 
@@ -354,14 +374,14 @@ describe('App', () => {
       expect(within(envDetails).getByText(command)).toBeInTheDocument()
     })
 
-    it('should show the user the command used to run DVC with a "Configure" button if dvc is installed without the python extension', () => {
+    it('should show the user the command used to run DVC with a "Locate DVC" button if dvc is installed without the python extension', () => {
       renderApp()
 
       const envDetails = screen.getByTestId('dvc-env-details')
 
       expect(within(envDetails).getByText('Command:')).toBeInTheDocument()
 
-      const configureButton = within(envDetails).getByText('Configure')
+      const configureButton = within(envDetails).getByText('Locate DVC')
       const selectButton = within(envDetails).queryByText(
         'Select Python Interpreter'
       )
@@ -376,7 +396,7 @@ describe('App', () => {
       })
     })
 
-    it('should show the user the command used to run DVC with "Configure" and "Update Env" buttons if dvc is installed with the python extension', () => {
+    it('should show the user the command used to run DVC with "Locate DVC" and "Set Env" buttons if dvc is installed with the python extension', () => {
       renderApp({
         isPythonExtensionUsed: true
       })
@@ -385,8 +405,8 @@ describe('App', () => {
 
       expect(within(envDetails).getByText('Command:')).toBeInTheDocument()
 
-      const configureButton = within(envDetails).getByText('Configure')
-      const selectButton = within(envDetails).getByText('Update Env')
+      const configureButton = within(envDetails).getByText('Locate DVC')
+      const selectButton = within(envDetails).getByText('Set Env')
 
       expect(configureButton).toBeInTheDocument()
       expect(selectButton).toBeInTheDocument()

webview/src/setup/components/App.tsx

@@ -20,6 +20,7 @@ import {
   updateCliCompatible,
   updateDvcCliDetails,
   updateIsAboveLatestTestedVersion,
+  updateIsPythonEnvironmentGlobal,
   updateIsPythonExtensionUsed,
   updateNeedsGitInitialized,
   updateProjectInitialized,
@@ -82,6 +83,11 @@ export const feedStore = (
       case 'hasData':
         dispatch(updateExperimentsHasData(data.data.hasData))
         continue
+      case 'isPythonEnvironmentGlobal':
+        dispatch(
+          updateIsPythonEnvironmentGlobal(data.data.isPythonEnvironmentGlobal)
+        )
+        continue
       case 'isPythonExtensionUsed':
         dispatch(updateIsPythonExtensionUsed(data.data.isPythonExtensionUsed))
         continue

webview/src/setup/components/dvc/CliUnavailable.tsx

@@ -9,43 +9,47 @@ import {
   setupWorkspace,
   updatePythonEnvironment
 } from '../../util/messages'
+import { Warning } from '../../../shared/components/icons'
 
 export const CliUnavailable: React.FC<PropsWithChildren> = ({ children }) => {
-  const { pythonBinPath, isPythonExtensionUsed } = useSelector(
-    (state: SetupState) => state.dvc
-  )
+  const { pythonBinPath, isPythonExtensionUsed, isPythonEnvironmentGlobal } =
+    useSelector((state: SetupState) => state.dvc)
   const canInstall = !!pythonBinPath
   const installationSentence = (
     <>
       The extension supports all{' '}
-      <a href="https://dvc.org/doc/install">installation types</a>. It can also
-      help to install needed packages via{' '}
-      <a href="https://packaging.python.org/en/latest/key_projects/#pip">pip</a>
-      .
+      <a href="https://dvc.org/doc/install">installation types</a>.
     </>
   )
 
   const conditionalContents = canInstall ? (
     <>
       <p>
-        {installationSentence} DVC & DVCLive can be auto-installed with{' '}
-        {pythonBinPath}.
+        {installationSentence} Auto-install (pip) DVC & DVCLive with{' '}
+        {pythonBinPath}{' '}
+        {isPythonEnvironmentGlobal && (
+          <>
+            (<Warning className={styles.inlineWarningSvg} />{' '}
+            <span>Not a virtual environment)</span>
+          </>
+        )}
+        .
       </p>
       <div className={styles.sideBySideButtons}>
         <Button onClick={installDvc} text="Install (pip)" />
         {isPythonExtensionUsed && (
-          <Button onClick={updatePythonEnvironment} text="Update Env" />
+          <Button onClick={updatePythonEnvironment} text="Set Env" />
         )}
-        <Button onClick={setupWorkspace} text="Configure" />
+        <Button onClick={setupWorkspace} text="Locate DVC" />
       </div>
     </>
   ) : (
     <>
       <p>
-        {installationSentence} Unfortunately, DVC & DVCLive cannot be
-        auto-installed as Python was not located.
+        {installationSentence} DVC & DVCLive cannot be auto-installed as Python
+        was not located.
       </p>
-      <Button onClick={setupWorkspace} text="Configure" />
+      <Button onClick={setupWorkspace} text="Locate DVC" />
     </>
   )
 

webview/src/setup/components/dvc/DvcEnvCommandRow.tsx

@@ -21,7 +21,7 @@ export const DvcEnvCommandRow: React.FC<DvcEnvCommandRowProps> = ({
       <span className={styles.command}>{commandText}</span>
       <span className={styles.actions}>
         <button className={styles.buttonAsLink} onClick={setupWorkspace}>
-          Configure
+          Locate DVC
         </button>
         {isPythonExtensionUsed && (
           <>
@@ -30,7 +30,7 @@ export const DvcEnvCommandRow: React.FC<DvcEnvCommandRowProps> = ({
               className={styles.buttonAsLink}
               onClick={updatePythonEnvironment}
             >
-              Update Env
+              Set Env
             </button>
           </>
         )}

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

@@ -32,6 +32,13 @@
   }
 }
 
+.inlineWarningSvg {
+  vertical-align: middle;
+  fill: $warn-color;
+  width: 16px;
+  height: 16px;
+}
+
 .buttonAsLink {
   @extend %buttonAsLink;
 

webview/src/setup/state/dvcSlice.ts

@@ -15,6 +15,7 @@ export const dvcInitialState: DvcState = {
   cliCompatible: undefined,
   dvcCliDetails: undefined,
   isAboveLatestTestedVersion: undefined,
+  isPythonEnvironmentGlobal: undefined,
   isPythonExtensionUsed: false,
   needsGitInitialized: false,
   projectInitialized: false,
@@ -47,6 +48,12 @@ export const dvcSlice = createSlice({
     ) => {
       state.isAboveLatestTestedVersion = action.payload
     },
+    updateIsPythonEnvironmentGlobal: (
+      state,
+      action: PayloadAction<boolean | undefined>
+    ) => {
+      state.isPythonEnvironmentGlobal = action.payload
+    },
     updateIsPythonExtensionUsed: (state, action: PayloadAction<boolean>) => {
       state.isPythonExtensionUsed = action.payload
     },
@@ -70,6 +77,7 @@ export const {
   updateCliCompatible,
   updateDvcCliDetails,
   updateIsAboveLatestTestedVersion,
+  updateIsPythonEnvironmentGlobal,
   updateIsPythonExtensionUsed,
   updateNeedsGitInitialized,
   updateProjectInitialized,

webview/src/stories/Setup.stories.tsx

@@ -17,6 +17,7 @@ const DEFAULT_DATA: SetupData = {
   },
   hasData: false,
   isAboveLatestTestedVersion: false,
+  isPythonEnvironmentGlobal: false,
   isPythonExtensionUsed: true,
   isStudioConnected: true,
   needsGitCommit: false,