Enable saving of Studio access token #3235

mattseddon · 2023-02-07T01:24:50Z

1/3 `main` <- this <- #3289 <- #3294

1/2 `main` <- this <- #3277

This PR adds a new connect button to our sidebar panel and a screen that walks the user through generating/saving a Studio access token in the extension. It also adds add/remove commands for the access token which can be used to bypass the webview. Once the user has a token they will be able to share experiments with Studio from the experiments table.

Demo

Screen.Recording.2023-02-14.at.1.28.14.pm.mov

See comments inline.

All prototype work is shown below the line.

(Very rough) Prototype for connecting the extension to Studio. This is something that we can implement quickly before investing the time to roll out the OAuth flow.

In order to progress + get down some ideas I have started prototyping for #3077. As stated here. My current plan is to get the user to save a token into their local VS Code config under the dvc.studioToken key. We will then use that token to share experiments to Studio from various places in the UI.

Visibility:

In order to let users know that they can/should connect to Studio we have to let them know that this is possible. I think we should add a welcome view to the sidebar whenever the dvc.studioToken is null:

User assistance:

This webview can either get expanded or dropped in the future depending on the outcome of the discussions in #3077. For now, it should provide a way for the user to jump through the required hoops. Button actions are described under the screenshot

Sign In: Opens studio.iterative.ai in the browser.
Get token: Prompts user for their username and redirects them to https://studio.iterative.ai/user/{username}/profile
Save: Opens quick input where the user can paste the token.

Alternative version (that I have dismissed):

codeclimate · 2023-02-07T01:35:15Z

webview/src/connect/components/Studio.tsx

+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+import { Button } from '../../shared/components/button/Button'
+
+export const Studio: React.FC = () => {


Function Studio has 39 lines of code (exceeds 30 allowed). Consider refactoring.

mattseddon · 2023-02-07T03:32:50Z

I think we'll want to have the webview regardless so that we have something with plenty of space/scope to direct users when they click "Share to Studio" and they aren't authed/have a token.

webview/src/connect/components/Studio.tsx

codeclimate · 2023-02-13T02:46:44Z

webview/src/connect/components/Studio.tsx

+import { Button } from '../../shared/components/button/Button'
+import { sendMessage } from '../../shared/vscode'
+
+export const Studio: React.FC = () => {


Function Studio has 48 lines of code (exceeds 30 allowed). Consider refactoring.

mattseddon · 2023-02-13T02:56:41Z

Posted a demo back in #3077

mattseddon · 2023-02-13T04:59:21Z

extension/package.json

@@ -590,6 +595,15 @@
          "description": "%config.pythonPath.description%",
          "type": "string",
          "default": null
+        },
+        "dvc.studioAccessToken": {


[I] Need to change to use the SecretStorage API and not save the token in the open...

extension/src/connect/index.ts

mattseddon · 2023-02-13T08:26:26Z

extension/src/webview/repository.ts

@@ -48,7 +48,7 @@ export abstract class BaseRepository<
      this.dvcRoot,
      this.webviewIcon,
      viewColumn,
-      this.viewKey === ViewKey.SETUP
+      [ViewKey.CONNECT, ViewKey.SETUP].includes(this.viewKey)


[I] Try and remove the bypass dvcRoot logic (maybe split the class)

needs a follow up, I've taken a note.

mattseddon · 2023-02-14T01:31:48Z

extension/package.json

+        {
+          "id": "dvc.views.studio",
+          "name": "Studio",
+          "when": "!dvc.studio.connected"


[F] We only show the tree view when there is no Studio token available in the secrets store. It can still be hidden by the user. We also give them the option to remove the token and save another one.

mattseddon · 2023-02-14T02:34:38Z

extension/src/connect/token.ts

+  if (!text) {
+    return false
+  }
+  return text.startsWith('isat_') && text.length === 54


[F] This was the basic format that I gathered from each token. With the rebrand, this may change but lets see.

My token was actually 53 characters long 😅

Screen.Recording.2023-02-15.at.8.19.12.AM.mov

I'll relax the requirement

mattseddon · 2023-02-14T02:36:29Z

webview/src/shared/hooks/useVsCodeMessaging.ts

-    window.addEventListener('message', handler)
-    return () => window.removeEventListener('message', handler)
+    handler && window.addEventListener('message', handler)
+    return () => handler && window.removeEventListener('message', handler)


[Q] Any objections to this? I don't need to send this webview any data right now, it is either on or off. This will change if/when we expand the webview to connect to other products.

mattseddon · 2023-02-14T02:37:20Z

extension/src/connect/index.ts

+export class Connect extends BaseRepository<undefined> {
+  public readonly viewKey = ViewKey.CONNECT
+
+  private readonly secrets: SecretStorage


[F] This seems like a better API to use instead of saving the token directly into the User's config.

mattseddon · 2023-02-14T02:42:22Z

Need to add at least "share to Studio" as a command before we can ship this. Added do not merge to remind me.

sroy3 · 2023-02-14T14:02:37Z

webview/src/connect/components/Studio.tsx

+    sendMessage({ type: MessageFromWebviewType.OPEN_STUDIO_PROFILE })
+
+  const saveStudioToken = () =>
+    sendMessage({ type: MessageFromWebviewType.SAVE_STUDIO_TOKEN })


Since none of these functions rely on props on state, I'd move them outside of the component as these get recreated on each re-render. This should fix the 2 codeclimate issues as well.

mattseddon · 2023-02-14T19:39:08Z

extension/package.json

+        "view": "dvc.views.studio",
+        "contents": "[$(plug) Connect](command:dvc.showConnect)",
+        "when": "!dvc.studio.connected"
+      },


[I] Double check on initial view placement.

julieg18

Great work!

webview/src/connect/components/Studio.tsx

julieg18 · 2023-02-15T14:19:58Z

extension/src/connect/token.ts

+  if (!text) {
+    return false
+  }
+  return text.startsWith('isat_') && text.length === 54


My token was actually 53 characters long 😅

Screen.Recording.2023-02-15.at.8.19.12.AM.mov

julieg18 · 2023-02-15T14:26:06Z

extension/src/connect/index.ts

+      return
+    }
+
+    return this.storeSecret(STUDIO_ACCESS_TOKEN_KEY, token)


Should we add some kind of message after the token is saved? Feels a little weird to me that I saved my token then everything related to Studio just disappears from my screen 🤔

Yes I will add a toast/modal

This is what the flow looks like now:

Screen.Recording.2023-02-16.at.4.33.03.pm.mov

Let me know what you think. We can update in a follow up.

Looks good! Makes things more clear on the connection and what you can do now that you're connected!

codeclimate · 2023-02-16T05:40:13Z

extension/src/vscode/modal.ts

@@ -6,3 +6,9 @@ export const warnOfConsequences = (
  ...items: Response[]
 ): Thenable<string | undefined> =>
  window.showWarningMessage(text, { modal: true }, ...items)
+
+export const showInformation = (


Similar blocks of code found in 2 locations. Consider refactoring.

codeclimate · 2023-02-16T05:40:13Z

webview/src/connect/components/Studio.tsx

+import { EmptyState } from '../../shared/components/emptyState/EmptyState'
+import { Button } from '../../shared/components/button/Button'
+
+export const Studio: React.FC = () => {


Function Studio has 41 lines of code (exceeds 30 allowed). Consider refactoring.

codeclimate · 2023-02-16T21:36:37Z

Code Climate has analyzed commit 02a0fc3 and detected 3 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	1
Duplication	2

The test coverage on the diff in this pull request is 94.3% (85% is the threshold).

This pull request will bring the total coverage in the repository to 95.9% (0.0% change).

View more on Code Climate.

mattseddon added the product PR that affects product label Feb 7, 2023

mattseddon self-assigned this Feb 7, 2023

codeclimate bot reviewed Feb 7, 2023

View reviewed changes

mattseddon mentioned this pull request Feb 7, 2023

Sharing experiments #3077

Closed

3 tasks

add prototype for very simple setup of a Studio token

ed5dd88

mattseddon force-pushed the add-connect-to-studio branch from 65c4dfb to ed5dd88 Compare February 10, 2023 01:29

mattseddon added 2 commits February 10, 2023 15:50

wire up new webview

efdccee

wire up new actions

555d6c6

codeclimate bot reviewed Feb 13, 2023

View reviewed changes

mattseddon added 6 commits February 13, 2023 14:41

validate studio token input

3443e47

switch to settings page if studio access token is saved

158c556

Merge branch 'main' into add-connect-to-studio

a09bbb3

validate dvc.studioAccessToken via package json properties

17fdc2e

add context value which hides view from tree when token is added

1112443

hide show webview command when studio is connected

b1eebd9

mattseddon commented Feb 13, 2023

View reviewed changes

switch from setting to using secrets store

39beedc

mattseddon commented Feb 13, 2023

View reviewed changes

extension/src/connect/index.ts Outdated Show resolved Hide resolved

mattseddon added 3 commits February 13, 2023 19:21

revert changes in config key

3ca4c8b

fix enum

8d56106

fix story

b603b78

codeclimate bot reviewed Feb 13, 2023

View reviewed changes

extension/src/connect/index.ts Show resolved Hide resolved

mattseddon commented Feb 13, 2023

View reviewed changes

mattseddon added 3 commits February 14, 2023 09:46

Merge branch 'main' into add-connect-to-studio

926ca41

restructure connect class

41e4087

add connect app tests

6709213

mattseddon commented Feb 14, 2023

View reviewed changes

mattseddon added 2 commits February 14, 2023 12:33

disallow direct access to secrets

605763b

create add studio access token command

a78e1ef

mattseddon commented Feb 14, 2023

View reviewed changes

mattseddon changed the title ~~Get Studio token prototype~~ Enable saving of Studio access token Feb 14, 2023

mattseddon added the do not merge label Feb 14, 2023

mattseddon marked this pull request as ready for review February 14, 2023 02:45

mattseddon requested review from sroy3 and julieg18 as code owners February 14, 2023 02:45

mattseddon requested a review from shcheklein February 14, 2023 02:45

mattseddon mentioned this pull request Feb 14, 2023

Clean up webview factory #3277

Merged

sroy3 approved these changes Feb 14, 2023

View reviewed changes

mattseddon commented Feb 14, 2023

View reviewed changes

mattseddon mentioned this pull request Feb 15, 2023

Share experiment to Studio from experiments table #3289

Merged

julieg18 approved these changes Feb 15, 2023

View reviewed changes

mattseddon added 2 commits February 16, 2023 16:25

apply review feedback

bc9cf3a

Merge branch 'main' into add-connect-to-studio

72dd056

codeclimate bot reviewed Feb 16, 2023

View reviewed changes

mattseddon mentioned this pull request Feb 16, 2023

Create Modal class (mirror Toast) #3294

Merged

Merge branch 'main' into add-connect-to-studio

02a0fc3

mattseddon enabled auto-merge (squash) February 16, 2023 21:29

mattseddon removed the do not merge label Feb 16, 2023

mattseddon merged commit a68ceba into main Feb 16, 2023

mattseddon deleted the add-connect-to-studio branch February 16, 2023 21:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enable saving of Studio access token #3235

Enable saving of Studio access token #3235

mattseddon commented Feb 7, 2023 •

edited

Loading

codeclimate bot Feb 7, 2023

mattseddon commented Feb 7, 2023

codeclimate bot Feb 13, 2023

mattseddon commented Feb 13, 2023

mattseddon Feb 13, 2023

mattseddon Feb 13, 2023

mattseddon Feb 14, 2023

mattseddon Feb 14, 2023

mattseddon Feb 14, 2023

julieg18 Feb 15, 2023

mattseddon Feb 15, 2023

mattseddon Feb 14, 2023

mattseddon Feb 14, 2023

mattseddon commented Feb 14, 2023

sroy3 Feb 14, 2023

mattseddon Feb 14, 2023

mattseddon Feb 14, 2023

julieg18 left a comment

julieg18 Feb 15, 2023

julieg18 Feb 15, 2023

mattseddon Feb 15, 2023

mattseddon Feb 16, 2023

mattseddon Feb 16, 2023

julieg18 Feb 16, 2023

codeclimate bot Feb 16, 2023

codeclimate bot Feb 16, 2023

codeclimate bot commented Feb 16, 2023

Enable saving of Studio access token #3235

Enable saving of Studio access token #3235

Conversation

mattseddon commented Feb 7, 2023 • edited Loading

1/3 main <- this <- #3289 <- #3294

1/2 main <- this <- #3277

Demo

Visibility:

User assistance:

codeclimate bot Feb 7, 2023

Choose a reason for hiding this comment

mattseddon commented Feb 7, 2023

codeclimate bot Feb 13, 2023

Choose a reason for hiding this comment

mattseddon commented Feb 13, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mattseddon commented Feb 14, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

julieg18 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

codeclimate bot Feb 16, 2023

Choose a reason for hiding this comment

codeclimate bot Feb 16, 2023

Choose a reason for hiding this comment

codeclimate bot commented Feb 16, 2023

mattseddon commented Feb 7, 2023 •

edited

Loading

1/3 `main` <- this <- #3289 <- #3294

1/2 `main` <- this <- #3277