GitLab Create Editor Group, 17 Jun 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create:Editor - Design concepts VS Code Web IDE 17 June 2022

Description

Related GitLab epic https://gitlab.com/groups/gitlab-org/-/epics/7959

00:00 Update on thinking around committing code for VS Code Web IDE
00:48 Previous thinking of having GitLab navigation around Web IDE
02:52 Taking a blank VS Code screen and customizing it
03:25 Adding GitLab logo to corner
05:00 GitLab level commands
05:41 Command to switch/open repository
06:20 Hiding views in VS Code that relate to running and debugging
07:45 Flow - Getting started
10:04 Flow - VS Code commit
11:39 Flow - Menu and Quick Pick
13:17 Flow - Custom tree view in Source Control container
14:27 Flow - Creating MR in Source Control containter

A

Hi there, my name is michael of the editor group and today I'll be talking about my updated thinking on how we might do commit changes from the vs code web id, um with a special caveat of how might we create a merge request with that associated branch when you're, creating that change and through through working on this? I also explored uh some little touches that we can add to the vs code through their customization abilities, to make this experience feel a little bit more um associated to to get that product all right.

A

So, let's jump into it. So last week I was thinking of creating the vs code um web id within like the context of the existing gitlab ui.

A

So you have like the top header here and this like project toolbar here, so the project toolbar allows you to navigate back to where you came from switch the current branch and then some commit commit flows up here after some feedback with different people within the teams and designers there's feedback around whether it's really useful to have this top header at this time, and at this time I think we can explore this through solution.

A

Validation, whether there's a real need to have this while you're in the context of the web id and this project toolbar, is something that's there, but a lot of this functionality is already built into vs code. It's just not surfaced in the same way and through a little bit of experimentation um with the current um web ide, that's using vs code, the proof of concept. We actually don't need this back button, because the way vs code handles uh tabs of files um pressing back, doesn't navigate new to the previously open tab.

A

If you have multiple tabs open it just takes you back to where you came from sort of respects, the browser's history. So with that in respect, you know you could eliminate this.

A

You could eliminate these buttons and potentially find a solution within the context of the web id with vs code web ide.

A

So this is like roughly how the commit flow using this kind of pattern would have worked.

A

So I took a look at where we're at with the vs code web id and it just plops out something that looks like this, where it's just the code vs code. So how might we take some of these elements that um help you find where you're at knowing that you're part of gitlab?

A

You know how might we incorporate that into the vs code, um so the first thing I noticed is that a lot of third-party tools that leverage, then the open source, vs code library, actually put their logo in the bottom guidelines around designs and guidelines around the status bar, is that you shouldn't use any color, except in the context of certain special cases, and I think in this case, I'm calling out that you are part of gitlab might be a good example to leverage this.

A

This is a variation where it's the full name, logo and.

A

Copy, but I also have a different example where, if we just take this oops yeah, I have another example where later on, you'll see where there's no text here and everything just locks up um to give you context of which project um which repository you're part of there's, that information at the root of the folder of the tree view. But another area you could put it is in the status item.

A

So this would be a new status item that gets added and we would have like these two things and with status items and you click on them. Something might happen so in the context of these two buttons, if you click okay, here's the other. um If you click on the gitlab logo, it would open up gitlab commands so opening the current project and get opening the active file and get that creating a new issue for the project um copying a link. These are all actions that currently exist within the gitlab extension vs code extension.

A

So that's something that we can leverage or reuse. Somehow that would be one way to make this uh useful and clicking on the repository name would allow you to then view repositories that you've recently visited and uh open up a whole list of ways for you to search, um get lab repositories or whether um and then clicking on that would then open it up directly inside the in the vs code instance.

A

um Since for our first iteration of the vs code, web ide, there won't be ability to compile, run package and install scripts or anything like that, like no npm install. So what we could do is customize the layout of our vs code web id to hide or not show the run and debug tabs.

A

So that would simplify the tabs over here to just show the explorer the search source, control, extensions and the gitlab um extension eventually once that comes around um the other thing that pops up in here um that doesn't match um reality in the next one. To three milestones is the idea of having a debug console or terminal, because if you can't run the code, these things don't have a lot of usage, but there is purpose to have problems or output.

A

So if you try to commit something and there's a get error or something that would pop out in the output, so that's still useful.

A

So if there's a way to remove those on day one- and that would be ideal, so next we're just gonna- go and jump through some of the flows of how the whole gitlab um and um the bs code web id might work.

A

So here I have um I'm in the repository called lab code and from here I want to open up the web id, and this is just taking you through what the flow might look like so web ide preparing repositories setting up their views, so these are using some new, updated product illustrations here, um once that's set up the first time you open it up, um we're gonna launch a get started web ide screen. um This is one way to do onboarding or get started view. I've seen other extensions kind of do a single page layout.

A

This is something that we can iterate on, but and this is one way to do it so choose the look. You want you can choose dark. You can choose light, um I'm just going to choose dark right now that looks good and if you jump on to the next one, this is kind of the pattern that exists in the world.

A

It's a little bit funny how it all works, but it does give these check marks to show that you've gone across, ideally, would would then say the preference of lighter darker the custom theme that the user wanted um in gitlab somehow so the next time they launch it and that's reloaded um we'll have some information about the features um understand how you can see.

A

Things show how you can create a merger quests, and I'm all done with that clicking on that um will take you back to the default, get started or like an untitled page, but in vs code there's always like the get started, welcome page and you can have the walkthroughs um listed on the side here we can inject our um get started, walk through with web id here. So if the user does want to go back and revisit wait a minute. What was that feature? They could click on this and then rediscover that whole flow again.

A

So now we're going to jump into talking about the commit flow. The commit flow here um I'm going to just go through, and the goal of this is to eventually create an mrr to um in gitlab to carry through the change. So I have this go file.js.

A

I make some changes to it. It lights up in here click on that um I have my changes.

A

Click on that it goes to stage changes I'll, add a commit message, and this is there like that and clicking on this will send it to a commit state. um So I just committed on my code, but I haven't pushed it up to my branch. So that's what sync changes does it? Does that it's happy, and what do I do now?

A

There's nothing in the ui that tells me hey. You need to do xyz to create the mr um at the moment uh from the ui. The the only way to do that is to click this bottom part here and click on that would then open up a into gitlab, where you pick your source branch and target branch and go through the whole flow to create a mr is that I think, there's an opportunity here for us to improve upon that. So that's what these next three kind of flows will look into.

A

So one of the things that um we're able to leverage is the quick pick menu in the obs code, so same flow. Make some changes go into here. Click here stage changes cool, commit message. Now, this time, I'm gonna open up my menu um here I have commit and commit and start merge request. So this is a custom command that we can put into vs code that would automatically commit the code, push it and then start a merge request.

A

This is very similar to what we do in the product today, but this is just calling it out through the menu go here. I can start a new branch or choose an existing branch.

A

Let's give it a name, and that's all done this ui would go back to this state. There's no syncing um functionality at the moment, because we already pushed the change, but um in a new tab or something we would have a new merge request with all the changes there, because the branch was created and all the code was pushed all that would be in gitlab already without any syncing needed and yeah.

A

You would go through this flow completely through a separate tab in your browser cool um if you're following through and you want to get stuck somewhere, there's always that restart button at the bottom. The next thing we're going to look at is the custom tree view inside source control, so same flow. Make some changes this time.

A

There is a tree view which, in within this container, so in vs code, there is a way to say I want to inject my custom view within one of these views, explorer search sem and for a custom view. Yes, that's something that you can do. I have my changes here. Go through that whole thing update there now. I want to.

A

Start and commit changes, so it's the same flow as the pop-up and the menu on the side. But it's just called out on the side here. So.

A

A

A

um Yeah, so the flow is still the same as the other one, but it's just more obvious because the buttons are there. um This final version is a little bit different.

A

Rather than doing everything automatically this one forces you to kind of click. The buttons as you go along so say, inflow um enter a commit message um that shouldn't be there um here. We have like automatically push changes for commits, so you can do something like that. um I push the changes. There's no syncing, um it says no local changes found that's cool um so, instead of creating the merge requests automatically, for you um see, there's nothing there. I can create a merge request in here.

A

um Let's say I want to merge from this branch into here. um Add a title mark it as a straf and create a merge quest that merge request will be created um and then in a separate tab. I can click on this to jump to that merge request whenever I want- or I can also click on this to view within the ide as well.

A

So this is another way of handling um merge requests as well we're going to go through um a few rounds of solution, validation to see which kind of flows are idea to go with for our users. um One approach is using the quick pick and the menus where everything's um more vs code built into the menus and then the other one is to explore.

A

um How might if work, if we call out all the buttons out in the front and whether we should be doing things automatically for people, or should we have more of a step through process of pushing the changes, um commit and pushing and then explicitly calling for a great uh merge request. So that's something that's going to be followed up over the next couple milestones, but starting next week, we'll be looking at some solution, validation plans. Thank you very much.