GitLab Create Editor Group, 16 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Create:Editor - VS Code/Web IDE Demo Part 4: Customization

Description

Paul Slaughter, Staff FE Engineer, and Eric Schurter, Sr. Product Manager, demo a proof of concept implementation of VS Code running in the web, replacing the GitLab Web IDE.

Part 4 is focused on the ways we can customize VS Code to make it feel more integrated with the GitLab experience.

Learn more here: https://gitlab.com/gitlab-org/gitlab/-/issues/345718

A

Okay, welcome back to the last part of our demo about vs code running as a replacement to the web ide.

A

uh This might be more of a discussion um because there's I didn't prompt you with anything here for the proof of concept. This is something that we've talked about, though, about vs code.

A

um Generally speaking, the impression was that it is a little less uh flexible when it come when compared to our current web id and that we don't have as much control over the ui the button placement, the line height, the way things work, the mr creation flow the commit flow things like that, but I'm going to turn it over you to talk about ways. We can extend vs code running on the web and and potential that we could explore down the road.

B

Yeah, um so talking about some of the interesting things we would want to um that. We'd want to do here, uh so I'm just going to open up a markdown file to show how things like open preview to the side vs code.

B

This isn't like a baked in feature. Bs code- provides a really robust extension api that lets us hook into this kind of behavior. So like what we'd see here on the right is a is a web view and webview uh is gonna.

B

Prob is gonna, receive things from the file system because, as I make changes here and actually actually make changes here, we see it actually change and be updated and very similarly would be really cool to have a more lovable live preview like feature here or if we wanted to um implement our own uh wysiwyg content editor here, um those things would be doable uh and so vs code has a fantastic guide for all the capabilities that extensions have and then some one of the really cool ones we were just talking about is web view, um and uh I was trying to find an example for this, but it is basically a view that can render almost any html content, but some of the examples they use for like an editor for or maybe it's.

B

Oh it's custom editors, that's the one, I'm thinking of yeah yeah, so you also create like custom editors. That's the one that we would do for content editor, but some examples are like um things that demo shaders or like 3d models and.

A

B

This the api that vs code provides is robust enough to basically put anything in the face of this. This kind of editor.

A

Yeah, we do by the way just not to interrupt, but we do have a fair few customers that work on like games or uh lots of by large binary files that they might.

B

Yeah appreciate.

A

The ability to render those live in the browser and open up the web id to interact with them.

B

And, what's cool too is if we are, um if we are able to hook in be being running vs code, we also can hook into the vs code marketplace. So if we can run extensions that already provide those kind of editors, we don't have to remake those or anything like that, and so we have a whole host of lovable editing features that are already being used in the wild that are quite possible for us to use out of the box over. Here we saw in part two that there's a little bit of hiccups.

B

We need to solve with the extension marketplace, but the vs code. Extensions api is all there and works the same on the web as it does on, um as it does locally as long as you're not running like actual terminal commands and stuff which extensions providing custom editors. Wouldn't uh that's a good, that's a good point, um there's something else. I was gonna say about uh the extensibility, oh, like there's, also um there's apis, for um we can actually create a terminal.

B

So if we want to move forward to doing actual sort of sort of cloud compute where we're running tests or whatever um there's apis for hook for how you would hook this ui into that, um there are also apis. um The api for source controls is very robust too. It's not necessarily tied to git because think about vs code also sometimes want to support things like subversion or whatever.

B

So if we want to have a very good strict, you know changes staged uh split of files like we used to have in the web id we can implement that or we can have it simple like our current web id is where we just keep track of all changes, and if you don't want to change, you don't need it, so um their source control functionality is quite extensible too. um I'll show that I show that you can change the the coloring of things.

B

um That's probably the easiest thing we can change is like the color font text a little bit of the look and feel we can't quite change um some of their like marketplace like they're baked in um they actually do provide like an api where you could provide some set of those, but they don't. They don't talk about a whole lot, but uh yeah.

A

I think there's a there's two types of themes: there's an icon pack theme and there's a like color theme and you can use them in conjunction.

B

Right, um there's one other thing: yes, uh so it's talking about the ui as far as the ui goes things that we can adjust very easily our things on the status bar.

B

We can add these little um boxes, which they call tree views, but they don't necessarily have to have be a tree of things. um So, for example, I added one here called commit changes. We're like oh, if you're done with your changes, hit the commit button.

B

It'll just take you to here, because we kind of have a similar button in the current web. Id saying, hey commit be done. um You can also add our own little tabs and windows and stuff uh as well um from as a ui perspective. This is the easiest stuff to change.

B

That's definitely not all the things we can change, there's some things we might be able to tweak from that, uh but a lot of the ui you're gonna is you're, not gonna, be able to leave this look and feel too much, which is necessarily a bad thing, because it's kind of the ui everyone's used to.

A

um Let's see the other thing you talked about on their last demo was like the ability to potentially go outside of it and and communicate through the api for things like a merge, request, flow or something like that or in a modal, or something like that. Right.

B

Yeah yeah, that's a good point too. um There is uh I'm trying to see if I could find one. uh I can't find a. I can't think of a way to demo this necessarily, but they do have um they call it.

B

uh Oh quick pick um this kind of like drop down where you open up this, where I'm typing in things and doing commands they use this kind of drop down actually and support a number of like form fields. So if you have.

A

Like a step-by-step.

B

Process a user needs to go through, like our workflow extension has enter your gitlab token and, like you know, what branch do you want to connect to and we'll ask a list like two or three questions for here? So for our like merge request, workflow on commit, we could ask. Do you want to commit to the your branch you've selected or do you want to commit to a new branch? Do you want to open up a new, mmr or or not?

B

um Some of the workflows. um Vs code has a baked in style of doing that kind of, like form flow.

B

That looks like this kind of drop down thing where there's like baked in asking a question and different kinds of inputs um based on the type of value you're expecting. uh So that's a really nice feature, but we could also open up. um You notice, like we're, still have the main gitlab top nav here, so we're still inside of gitlab.

A

B

Inside of here is technically inside of an iframe running vs code, but there's still communication outside of it. So if we wanted to open up like a modal like, I want to set my status, that's all doable too cool. So that's that's all game.

B

Doing things. On top of all this for sure.

A

The last bit on customization- I just wanted to ask- um I think we touched on this a little bit in our longer demo, but the idea that these settings, as you I can't remember, which part of this four separate- calls that we're definitely recording at separate times when we demo this.

A

But you showed that the settings persist um for like themes and stuff, the idea that uh you could have at a project or group, or instance, level, uh a standard editor config that gets pre-installed and references from a file that kind of sets a baseline, where obviously the user could override very easily.

A

But you know an organization may have particular settings. They want to encourage or extensions they want installed. So I know that interfacing with editor, config and being more uh customizable like that, is something that's on the web id backlog. So I was just. I guess I wanted to just prompt that this approach also enables us to have like a standard config, maybe even across uh projects.

B

Yeah so like um talking about project specific configuration like baked baked out of it, vs code will look for vs code.vs code directories. I haven't tried a project like this on the web build. um So it's worth you know that's worth testing out, but that code is there, it's doing something, um but definitely uh a lot of the the editor settings. Like you see here, like you know what spaces am I at, and what kind of based on the file, type and stuff?

B

These are all can be workspace, configurations or global configurations um that are shared uh but it'd, be interesting, it'd be interesting to and stuff that we could set on on bootstrap too. So if there was, we wanted to have this setting be some sort of git lab setting, that's not necessarily baked into the repository um we can. We can set those settings here too.

A

Fantastic but we're well over time. I don't need to keep you thank you for for running through this and for everybody um watching at home. Let us know if you have any more questions about vsco, thanks paul.

B

Thanks eric yeah appreciate it.