Add copy shareable Studio link to experiments table (#4557)

* implement shareable link for completed and pushed experiments

* remove updates triggered by studio.offline

* update aria-labels

* change link icon to progress ring briefly when link is copied

* send null in place of refs (temp)

Author: mattseddon

extension/package.json

@@ -1713,6 +1713,7 @@
     "lodash.isequal": "4.5.0",
     "lodash.merge": "4.6.2",
     "lodash.omit": "4.5.0",
+    "node-fetch": "2.6.13",
     "process-exists": "4.1.0",
     "tree-kill": "1.2.2",
     "uuid": "9.0.0",

extension/src/cli/git/reader.ts

@@ -71,7 +71,10 @@ export class GitReader extends GitCli {
   }
 
   public async getRemoteUrl(cwd: string): Promise<string> {
-    const options = getOptions({ args: [Command.LS_REMOTE, Flag.GET_URL], cwd })
+    const options = getOptions({
+      args: [Command.LS_REMOTE, Flag.GET_URL, DEFAULT_REMOTE],
+      cwd
+    })
     try {
       return await this.executeProcess(options)
     } catch {

extension/src/experiments/index.ts

@@ -28,6 +28,7 @@ import { pickSortsToRemove, pickSortToAdd } from './model/sortBy/quickPick'
 import { ColumnsModel } from './columns/model'
 import { ExperimentsData } from './data'
 import { stopWorkspaceExperiment } from './processExecution'
+import { Studio } from './studio'
 import { Experiment, ColumnType, TableData, Column } from './webview/contract'
 import { WebviewMessages } from './webview/messages'
 import { DecorationProvider } from './model/decorationProvider'
@@ -72,6 +73,7 @@ export class Experiments extends BaseRepository<TableData> {
   private readonly data: ExperimentsData
   private readonly experiments: ExperimentsModel
   private readonly columns: ColumnsModel
+  private readonly studio: Studio
 
   private readonly experimentsFileFocused = this.dispose.track(
     new EventEmitter<string | undefined>()
@@ -145,6 +147,8 @@ export class Experiments extends BaseRepository<TableData> {
       )
     )
 
+    this.studio = this.dispose.track(new Studio(this.dvcRoot, internalCommands))
+
     this.data = this.dispose.track(
       data ||
         new ExperimentsData(
@@ -589,6 +593,12 @@ export class Experiments extends BaseRepository<TableData> {
     return this.data.update()
   }
 
+  public async setStudioBaseUrl(studioToken: string | undefined) {
+    await this.isReady()
+    await this.studio.setBaseUrl(studioToken)
+    return this.webviewMessages.sendWebviewMessage()
+  }
+
   protected sendInitialWebviewData() {
     return this.webviewMessages.sendWebviewMessage()
   }
@@ -630,6 +640,7 @@ export class Experiments extends BaseRepository<TableData> {
       this.experiments,
       this.columns,
       this.pipeline,
+      this.studio,
       () => this.getWebview(),
       () => this.notifyChanged(),
       () => this.selectColumns(),

extension/src/experiments/studio.ts

@@ -0,0 +1,62 @@
+import fetch from 'node-fetch'
+import { STUDIO_URL } from '../setup/webview/contract'
+import { Disposable } from '../class/dispose'
+import { AvailableCommands, InternalCommands } from '../commands/internal'
+
+export class Studio extends Disposable {
+  private readonly dvcRoot: string
+  private readonly internalCommands: InternalCommands
+
+  private baseUrl?: string
+
+  constructor(dvcRoot: string, internalCommands: InternalCommands) {
+    super()
+    this.dvcRoot = dvcRoot
+    this.internalCommands = internalCommands
+  }
+
+  public isConnected() {
+    return !!this.baseUrl
+  }
+
+  public async setBaseUrl(studioToken: string | undefined) {
+    if (!studioToken) {
+      this.baseUrl = undefined
+      return
+    }
+
+    const gitRemote = await this.internalCommands.executeCommand(
+      AvailableCommands.GIT_GET_REMOTE_URL,
+      this.dvcRoot
+    )
+
+    this.baseUrl = await this.getBaseUrl(studioToken, gitRemote)
+  }
+
+  public getLink(sha: string) {
+    if (!this.baseUrl) {
+      return ''
+    }
+    return `${this.baseUrl}?showOnlySelected=1&experimentReferences=${sha}&activeExperimentReferences=${sha}%3Aprimary`
+  }
+
+  private async getBaseUrl(studioToken: string, gitRemoteUrl: string) {
+    try {
+      const response = await fetch(`${STUDIO_URL}/webhook/dvc`, {
+        body: JSON.stringify({
+          client: 'vscode',
+          refs: [null],
+          repo_url: gitRemoteUrl
+        }),
+        headers: {
+          Authorization: `token ${studioToken}`,
+          'Content-Type': 'application/json'
+        },
+        method: 'POST'
+      })
+
+      const { url } = (await response.json()) as { url: string }
+      return url
+    } catch {}
+  }
+}

extension/src/experiments/webview/contract.ts

@@ -106,6 +106,7 @@ export type TableData = {
   hasConfig: boolean
   hasMoreCommits: Record<string, boolean>
   hasRunningWorkspaceExperiment: boolean
+  isStudioConnected: boolean
   isShowingMoreCommits: Record<string, boolean>
   rows: Commit[]
   showOnlyChanged: boolean

extension/src/experiments/webview/messages.ts

@@ -26,13 +26,15 @@ import { collectColumnsWithChangedValues } from '../columns/collect'
 import { ColumnLike } from '../columns/like'
 import { getFilterId } from '../model/filterBy'
 import { writeToClipboard } from '../../vscode/clipboard'
+import { Studio } from '../studio'
 
 export class WebviewMessages {
   private readonly dvcRoot: string
 
   private readonly experiments: ExperimentsModel
   private readonly columns: ColumnsModel
   private readonly pipeline: Pipeline
+  private readonly studio: Studio
 
   private readonly getWebview: () => BaseWebview<TableData> | undefined
   private readonly notifyChanged: () => void
@@ -50,6 +52,7 @@ export class WebviewMessages {
     experiments: ExperimentsModel,
     columns: ColumnsModel,
     pipeline: Pipeline,
+    studio: Studio,
     getWebview: () => BaseWebview<TableData> | undefined,
     notifyChanged: () => void,
     selectColumns: () => Promise<void>,
@@ -64,6 +67,7 @@ export class WebviewMessages {
     this.experiments = experiments
     this.columns = columns
     this.pipeline = pipeline
+    this.studio = studio
     this.getWebview = getWebview
     this.notifyChanged = notifyChanged
     this.selectColumns = selectColumns
@@ -231,6 +235,9 @@ export class WebviewMessages {
       case MessageFromWebviewType.COPY_TO_CLIPBOARD:
         return this.copyToClipboard(message.payload)
 
+      case MessageFromWebviewType.COPY_STUDIO_LINK:
+        return this.copyStudioLink(message.payload)
+
       default:
         Logger.error(`Unexpected message: ${JSON.stringify(message)}`)
     }
@@ -314,6 +321,7 @@ export class WebviewMessages {
       hasMoreCommits,
       hasRunningWorkspaceExperiment,
       isShowingMoreCommits,
+      isStudioConnected,
       rows,
       selectedBranches,
       selectedForPlotsCount,
@@ -332,6 +340,7 @@ export class WebviewMessages {
       this.experiments.getHasMoreCommits(),
       this.experiments.hasRunningWorkspaceExperiment(),
       this.experiments.getIsShowingMoreCommits(),
+      this.studio.isConnected(),
       this.experiments.getRowData(),
       this.experiments.getSelectedBranches(),
       this.experiments.getSelectedRevisions().length,
@@ -356,6 +365,7 @@ export class WebviewMessages {
       hasMoreCommits,
       hasRunningWorkspaceExperiment,
       isShowingMoreCommits,
+      isStudioConnected,
       rows,
       selectedBranches,
       selectedForPlotsCount,
@@ -584,4 +594,23 @@ export class WebviewMessages {
       undefined
     )
   }
+
+  private async copyStudioLink(id: string) {
+    const sha = this.experiments.getExperiments().find(exp => exp.id === id)
+      ?.sha
+
+    if (!sha) {
+      return
+    }
+
+    const link = this.studio.getLink(sha)
+
+    await writeToClipboard(link, `[Studio link](${link})`)
+
+    void sendTelemetryEvent(
+      EventName.VIEWS_EXPERIMENTS_TABLE_COPY_STUDIO_LINK,
+      undefined,
+      undefined
+    )
+  }
 }

extension/src/experiments/workspace.ts

@@ -282,6 +282,7 @@ export class WorkspaceExperiments extends BaseWorkspaceWebviews<
     dvcRoot: string,
     subProjects: string[],
     pipeline: WorkspacePipeline,
+    setup: Setup,
     resourceLocator: ResourceLocator
   ) {
     const experiments = this.dispose.track(
@@ -298,6 +299,14 @@ export class WorkspaceExperiments extends BaseWorkspaceWebviews<
 
     this.setRepository(dvcRoot, experiments)
 
+    void experiments.setStudioBaseUrl(setup.getStudioAccessToken())
+
+    experiments.dispose.track(
+      setup.onDidChangeStudioConnection(() => {
+        void experiments.setStudioBaseUrl(setup.getStudioAccessToken())
+      })
+    )
+
     experiments.dispose.track(
       experiments.onDidChangeIsWebviewFocused(
         dvcRoot => (this.focusedWebviewDvcRoot = dvcRoot)

extension/src/extension.ts

@@ -289,6 +289,7 @@ class Extension extends Disposable {
       dvcRoots,
       subProjects,
       this.pipelines,
+      this.setup,
       this.resourceLocator
     )
     this.plots.create(

extension/src/setup/index.ts

@@ -79,6 +79,8 @@ export class Setup
   public readonly initialize: () => Promise<void[]>
   public readonly resetMembers: () => void
 
+  public readonly onDidChangeStudioConnection: Event<void>
+
   private dvcRoots: string[] = []
   private subProjects: { [dvcRoot: string]: string[] } = {}
 
@@ -101,6 +103,9 @@ export class Setup
     new EventEmitter()
   )
 
+  private readonly studioConnectionChanged: EventEmitter<void> =
+    this.dispose.track(new EventEmitter())
+
   private readonly onDidChangeWorkspace: Event<void> =
     this.workspaceChanged.event
 
@@ -150,6 +155,7 @@ export class Setup
     }
 
     this.collectWorkspaceScale = collectWorkspaceScale
+    this.onDidChangeStudioConnection = this.studioConnectionChanged.event
 
     this.setCommandsAvailability(false)
     this.setProjectAvailability()
@@ -759,16 +765,29 @@ export class Setup
   private async setStudioValues() {
     const cwd = this.getCwd()
 
+    const previousStudioAccessToken = this.studioAccessToken
+
     if (!cwd) {
       this.studioAccessToken = undefined
       this.shareLiveToStudio = undefined
+
+      if (previousStudioAccessToken) {
+        this.studioConnectionChanged.fire()
+      }
       return
     }
 
-    ;[this.studioAccessToken, this.shareLiveToStudio] = await Promise.all([
+    const [studioAccessToken, shareLiveToStudio] = await Promise.all([
       this.accessConfig(cwd, ConfigKey.STUDIO_TOKEN),
       (await this.accessConfig(cwd, ConfigKey.STUDIO_OFFLINE)) !== 'true'
     ])
+
+    this.studioAccessToken = studioAccessToken
+    this.shareLiveToStudio = shareLiveToStudio
+
+    if (previousStudioAccessToken !== this.studioAccessToken) {
+      this.studioConnectionChanged.fire()
+    }
   }
 
   private async updateStudioOffline(shareLive: boolean) {

extension/src/telemetry/constants.ts

@@ -32,6 +32,8 @@ export const EventName = Object.assign(
     VIEWS_EXPERIMENTS_TABLE_CLOSED: 'views.experimentsTable.closed',
     VIEWS_EXPERIMENTS_TABLE_COLUMNS_REORDERED:
       'views.experimentsTable.columnsReordered',
+    VIEWS_EXPERIMENTS_TABLE_COPY_STUDIO_LINK:
+      'views.experimentsTable.copyStudioLink',
     VIEWS_EXPERIMENTS_TABLE_COPY_TO_CLIPBOARD:
       'views.experimentsTable.copyToClipboard',
     VIEWS_EXPERIMENTS_TABLE_CREATED: 'views.experimentsTable.created',
@@ -259,6 +261,7 @@ export interface IEventNamePropertyMapping {
     path: string
   }
   [EventName.VIEWS_EXPERIMENTS_TABLE_RESET_COMMITS]: undefined
+  [EventName.VIEWS_EXPERIMENTS_TABLE_COPY_STUDIO_LINK]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_COPY_TO_CLIPBOARD]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_CREATED]: undefined
   [EventName.VIEWS_EXPERIMENTS_TABLE_FILTER_COLUMN]: undefined