Add self-hosted url info in Studio setup section

extension/src/setup/index.ts

@@ -3,6 +3,7 @@ import { Event, EventEmitter } from 'vscode'
 import { Disposable, Disposer } from '@hediet/std/disposable'
 import isEmpty from 'lodash.isempty'
 import {
+  DEFAULT_STUDIO_URL,
   DvcCliDetails,
   SetupSection,
   SetupData as TSetupData
@@ -421,6 +422,8 @@ export class Setup
     const isPythonEnvironmentGlobal =
       isPythonExtensionUsed && (await isActivePythonEnvGlobal())
 
+    const studioUrl = this.studio.getStudioUrl()
+
     this.webviewMessages.sendWebviewMessage({
       canGitInitialize,
       cliCompatible: this.getCliCompatible(),
@@ -437,6 +440,7 @@ export class Setup
       pythonBinPath: getBinDisplayText(pythonBinPath),
       remoteList,
       sectionCollapsed: collectSectionCollapsed(this.focusedSection),
+      selfHostedStudioUrl: studioUrl === DEFAULT_STUDIO_URL ? null : studioUrl,
       shareLiveToStudio: !!this.studio.getShareLiveToStudio()
     })
     this.focusedSection = undefined

extension/src/setup/webview/contract.ts

@@ -22,6 +22,7 @@ export type SetupData = {
   pythonBinPath: string | undefined
   remoteList: RemoteList
   sectionCollapsed: typeof DEFAULT_SECTION_COLLAPSED | undefined
+  selfHostedStudioUrl: string | null
   shareLiveToStudio: boolean
   isAboveLatestTestedVersion: boolean | undefined
 }

extension/src/setup/webview/messages.ts

@@ -70,10 +70,14 @@ export class WebviewMessages {
         return commands.executeCommand(
           RegisteredCommands.ADD_STUDIO_ACCESS_TOKEN
         )
+      case MessageFromWebviewType.SAVE_STUDIO_URL:
+        return commands.executeCommand(RegisteredCommands.UPDATE_STUDIO_URL)
       case MessageFromWebviewType.REMOVE_STUDIO_TOKEN:
         return commands.executeCommand(
           RegisteredCommands.REMOVE_STUDIO_ACCESS_TOKEN
         )
+      case MessageFromWebviewType.REMOVE_STUDIO_URL:
+        return commands.executeCommand(RegisteredCommands.REMOVE_STUDIO_URL)
       case MessageFromWebviewType.SET_STUDIO_SHARE_EXPERIMENTS_LIVE:
         return this.updateStudioOffline(message.payload)
       case MessageFromWebviewType.REQUEST_STUDIO_TOKEN:

extension/src/webview/contract.ts

@@ -47,6 +47,7 @@ export enum MessageFromWebviewType {
   RESIZE_PLOTS = 'resize-plots',
   REQUEST_STUDIO_TOKEN = 'request-studio-token',
   SAVE_STUDIO_TOKEN = 'save-studio-token',
+  SAVE_STUDIO_URL = 'save-studio-url',
   SET_COMPARISON_MULTI_PLOT_VALUE = 'update-comparison-multi-plot-value',
   SET_SMOOTH_PLOT_VALUE = 'update-smooth-plot-value',
   SHOW_EXPERIMENT_LOGS = 'show-experiment-logs',
@@ -71,6 +72,7 @@ export enum MessageFromWebviewType {
   REMOTE_REMOVE = 'remote-remove',
   REMOVE_CUSTOM_PLOTS = 'remove-custom-plots',
   REMOVE_STUDIO_TOKEN = 'remove-studio-token',
+  REMOVE_STUDIO_URL = 'remove-studio-url',
   MODIFY_WORKSPACE_PARAMS_AND_QUEUE = 'modify-workspace-params-and-queue',
   MODIFY_WORKSPACE_PARAMS_AND_RUN = 'modify-workspace-params-and-run',
   MODIFY_WORKSPACE_PARAMS_RESET_AND_RUN = 'modify-workspace-params-reset-and-run',
@@ -224,6 +226,7 @@ export type MessageFromWebview =
       type: MessageFromWebviewType.REMOVE_CUSTOM_PLOTS
     }
   | { type: MessageFromWebviewType.REMOVE_STUDIO_TOKEN }
+  | { type: MessageFromWebviewType.REMOVE_STUDIO_URL }
   | {
       type: MessageFromWebviewType.REORDER_PLOTS_COMPARISON
       payload: string[]
@@ -291,6 +294,7 @@ export type MessageFromWebview =
   | { type: MessageFromWebviewType.UPGRADE_DVC }
   | { type: MessageFromWebviewType.SETUP_WORKSPACE }
   | { type: MessageFromWebviewType.SAVE_STUDIO_TOKEN }
+  | { type: MessageFromWebviewType.SAVE_STUDIO_URL }
   | { type: MessageFromWebviewType.REQUEST_STUDIO_TOKEN }
   | { type: MessageFromWebviewType.ADD_CONFIGURATION }
   | { type: MessageFromWebviewType.ZOOM_PLOT; payload?: string }

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

@@ -41,6 +41,7 @@ const DEFAULT_DATA = {
   pythonBinPath: undefined,
   remoteList: undefined,
   sectionCollapsed: undefined,
+  selfHostedStudioUrl: null,
   shareLiveToStudio: false
 }
 

webview/src/setup/components/App.tsx

@@ -33,6 +33,7 @@ import {
 import { updateRemoteList } from '../state/remoteSlice'
 import {
   updateIsStudioConnected,
+  updateSelfHostedStudioUrl,
   updateShareLiveToStudio
 } from '../state/studioSlice'
 import { setStudioShareExperimentsLive } from '../util/messages'
@@ -119,6 +120,9 @@ export const feedStore = (
       case 'shareLiveToStudio':
         dispatch(updateShareLiveToStudio(data.data.shareLiveToStudio))
         continue
+      case 'selfHostedStudioUrl':
+        dispatch(updateSelfHostedStudioUrl(data.data.selfHostedStudioUrl))
+        continue
       case 'remoteList':
         dispatch(updateRemoteList(data.data.remoteList))
         continue

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

@@ -1,29 +1,51 @@
 import React from 'react'
+import { useSelector } from 'react-redux'
 import { DvcCliDetails } from 'dvc/src/setup/webview/contract'
 import {
   LATEST_TESTED_CLI_VERSION,
   MIN_CLI_VERSION
 } from 'dvc/src/cli/dvc/contract'
-import { DvcEnvInfoRow } from './DvcEnvInfoRow'
-import styles from './styles.module.scss'
-import { DvcEnvCommandRow } from './DvcEnvCommandRow'
+import { DetailsTable } from '../shared/DetailsTable'
+import {
+  DetailsTableRow,
+  DetailsTableRowActions
+} from '../shared/DetailsTableRow'
+import { setupWorkspace, updatePythonEnvironment } from '../../util/messages'
+import { SetupState } from '../../store'
 
 export const DvcEnvDetails: React.FC<DvcCliDetails> = ({
   command,
   version
 }) => {
-  const versionText = (
-    <span>{`${
-      version || 'Not found'
-    } (required ${MIN_CLI_VERSION} and above, tested with ${LATEST_TESTED_CLI_VERSION})`}</span>
+  const isPythonExtensionUsed = useSelector(
+    (state: SetupState) => state.dvc.isPythonExtensionUsed
   )
+  const commandRowActions: DetailsTableRowActions = [
+    { onClick: setupWorkspace, text: 'Locate DVC' }
+  ]
+
+  if (isPythonExtensionUsed) {
+    commandRowActions.push({
+      onClick: updatePythonEnvironment,
+      text: 'Set Env'
+    })
+  }
 
   return (
-    <table data-testid="dvc-env-details" className={styles.envDetails}>
-      <tbody>
-        {version && <DvcEnvCommandRow command={command} />}
-        <DvcEnvInfoRow title="Version" text={versionText} />
-      </tbody>
-    </table>
+    <DetailsTable testId="dvc-env-details">
+      {version && (
+        <DetailsTableRow
+          title="Command"
+          text={command || 'Not found'}
+          actions={commandRowActions}
+        />
+      )}
+      <DetailsTableRow
+        title="Version"
+        text={`${
+          version || 'Not found'
+        } (required ${MIN_CLI_VERSION} and above, tested with ${LATEST_TESTED_CLI_VERSION})`}
+      />
+    </DetailsTable>
   )
 }

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

@@ -1,50 +1,13 @@
 @import '../../../shared/variables';
 @import '../../../shared/mixins';
 
-.envDetails {
-  margin: 0 auto;
-  text-align: left;
-  margin-bottom: 1rem;
-}
-
-.envDetailsKey,
-.envDetailsValue {
-  padding: 5px;
-}
-
-.envDetailsKey {
-  font-weight: bold;
-  white-space: nowrap;
-  vertical-align: top;
-}
-
-.envDetailsValue {
-  padding-left: 50px;
-  display: flex;
-  flex-direction: column;
-}
-
-.separator {
-  margin: 0 5px;
-
-  &::before {
-    content: '|';
-  }
-}
-
 .inlineWarningSvg {
   vertical-align: middle;
   fill: $warn-color;
   width: 16px;
   height: 16px;
 }
 
-.buttonAsLink {
-  @extend %buttonAsLink;
-
-  font-size: inherit;
-}
-
 .sideBySideButtons *:not(:first-child) {
   margin-left: 15px;
 }

webview/src/setup/components/shared/DetailsTable.tsx

@@ -0,0 +1,14 @@
+import React, { PropsWithChildren } from 'react'
+
+import styles from './styles.module.scss'
+
+export const DetailsTable: React.FC<PropsWithChildren<{ testId?: string }>> = ({
+  children,
+  testId
+}) => {
+  return (
+    <table data-testid={testId} className={styles.detailsTable}>
+      <tbody>{children}</tbody>
+    </table>
+  )
+}

webview/src/setup/components/shared/DetailsTableRow.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import styles from './styles.module.scss'
+
+export type DetailsTableRowActions = { text: string; onClick: () => void }[]
+
+type DetailsTableRowProps = {
+  title: string
+  text: string
+  actions?: DetailsTableRowActions
+}
+
+export const DetailsTableRow: React.FC<DetailsTableRowProps> = ({
+  title,
+  text,
+  actions
+}) => {
+  return (
+    <tr>
+      <td className={styles.detailsTableKey}>{title}:</td>
+      <td className={styles.detailsTableValue}>
+        {text}
+        {actions && (
+          <span>
+            {actions.map(({ text, onClick }, index) => (
+              <span key={index}>
+                {index > 0 && <span className={styles.separator} />}
+                <button className={styles.buttonAsLink} onClick={onClick}>
+                  {text}
+                </button>
+              </span>
+            ))}
+          </span>
+        )}
+      </td>
+    </tr>
+  )
+}

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

@@ -1,4 +1,5 @@
 @import '../../../shared/variables';
+@import '../../../shared/mixins';
 
 .codeBlock {
   text-align: left;
@@ -19,3 +20,35 @@
   fill: $accent-color;
   margin-bottom: -3px;
 }
+
+.detailsTable {
+  margin: 0 auto;
+  text-align: left;
+  margin-bottom: 1rem;
+}
+
+.detailsTableKey {
+  font-weight: bold;
+  white-space: nowrap;
+  vertical-align: top;
+}
+
+.detailsTableValue {
+  padding-left: 50px;
+  display: flex;
+  flex-direction: column;
+}
+
+.buttonAsLink {
+  @extend %buttonAsLink;
+
+  font-size: inherit;
+}
+
+.separator {
+  margin: 0 5px;
+
+  &::before {
+    content: '|';
+  }
+}

webview/src/setup/components/studio/Connect.tsx

@@ -1,16 +1,17 @@
-import React from 'react'
+import React, { PropsWithChildren } from 'react'
 import { DEFAULT_STUDIO_URL } from 'dvc/src/setup/webview/contract'
 import { EmptyState } from '../../../shared/components/emptyState/EmptyState'
 import { requestStudioToken, saveStudioToken } from '../../util/messages'
 import { Button } from '../../../shared/components/button/Button'
 
-export const Connect: React.FC = () => {
+export const Connect: React.FC<PropsWithChildren> = ({ children }) => {
   return (
     <EmptyState isFullScreen={false}>
       <div>
         <h1>
           Connect to <a href={DEFAULT_STUDIO_URL}>Studio</a>
         </h1>
+        {children}
         <p>
           Share experiments and plots with collaborators directly from your IDE.
           Start sending data with an{' '}