GitLab Create Editor Group, 19 Oct 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Editor FE Pairing - 20221019 - Open Remote Dev from Client Only (gitlab-web-ide)

Description

In this session, we pair up on an issue to prompt the user for some information to connect to a remote development environment.

https://gitlab.com/gitlab-org/gitlab-web-ide/-/issues/38

A

Reusable this is going to be probably really specific to this issue, but it's still helpful. uh So this is when we were pairing um a week or so ago. uh We were trying to see if we could get a button to go through this forum, and we can so that's nice.

A

So now we want to have some sort of message here and that's why I paint Marcel to try to see what do we actually want to say here at the terminal um and then the button is going to collect the um remote config properties, um so we're going to use the vs code um extension API to request these from the user, and that opens up this little box at the top um and then when they submit it. Here's the flow that we're thinking of is.

A

We will then do a post to the end point of the IDE controller, so that the connection token is not in the URL parameters and stuff um and then that's going to trigger the IDE controller to call start remote instead of just start, which currently calls start Based on data gets from the route, but in our new case it will call start remote based on the data gets from the query param or from the from the post. So that's that's basically it so then I broke it into really really small steps.

A

um We uh we need the clients only config.

B

To now, anyway, do we have they bought canes ready for this? No.

A

It's a large that too yeah yeah, okay, yeah um we'll need um plan that I was thinking is so the client only config will need to pass down a function for how we want to handle starting. The remote I get the remote config. So now the client will need to provide okay. They went through the whole user Farm we're ready to handle it now. So we're going to run that post.

A

A

Yeah- and so one of the one of the the interesting caveats here is that the way these configs get passed down through the iframe and stuff currently is um they get serialized and serialized into that iframe, but now we're suggesting we need a function in the config. So how do we handle a function?

A

um And uh we can use um the message Api to do this? We already kind of do that with the ready um event, uh oh yeah, which I've added links to so we can.

A

um We could try that out and then- um and so once we once we add one that can be run, that's kind of one step and then the other step would be adding that welcome view that actually um adding the welcome view that actually triggers the user form and stuff um and here's the relevant vs code API with some of those functions, but here's the code that we were. We were putting together to actually run this bit.

A

So that's a pretty good start, and so once we have this kind of working in the example because we can get this working in the example, then we're ready to publish, we'll, publish a new release and then we'll open, an MR to use the new release and set it up with the main gitlab Project Specific implementation of handle start remote.

A

um So that's it. Yeah sounds.

B

Good, uh can we make like? um Can we use a vs code API to create a port with more than one field.

A

That's a really good question: um let's see.

A

um That's a good question.

B

A

These are called quick and it's not necessarily what I think I'm needing. Let me see which one I use up here: input box, the context menus. No, let me go to see if I can find input box.

A

A

A

A

I don't know like it's a good question um and I really don't know um it's kind of trying to did some feedback from Marcel about that. But he asked some good questions which I need to respond to.

B

Just thinking because we have like we need to set several pieces of data um like right now, we're gonna make progress, but just like I don't know, concatenating them in a single field. I think that's! Okay. You know um like for the first iteration. Maybe we should like eat another iteration Implement that webview or something like that.

A

So I I the way I think I normally see this done is like you'll, see and I think we're planning to do something similar when we want to commit from here. You can pick it's like we're. Gonna commit and we're gonna show three of these like one after the other. It's like! Oh, do you want to start a new marriage request with this? Yes, and then do we want to do. We want to create a new Branch for it?

A

What's the name of that Branch gonna be and then they'll type that in or whatever so it's like, you can show a sequence of these, which is not all at once, which is what I was envisioning and I know, there's some extensions that do this already.

A

um Let's, let's see.

C

So I think we should keep in mind that Eric like said this, it's okay! If this is very low Fidelity, it does not have to be polished at all yeah.

B

A

True too, so, let's um I think we're just going to show these input box one after another. We'll show like three of them. It's kind of I think the easiest thing to do: yeah, whatever.

C

Works, I think, is what we need to do. Oh.

A

Okay, all right I wasn't considering that boring, boring solutions.

C

That work as well.

B

Shame or no shame: okay, the.

C

The post from the controller, can you talk like what exactly is happening there like for number four, the context of it here: yeah like that's the existing one, that's like got a feature flag in it or something.

A

This is just our main IDE controller uh that just has an index.

C

But there's the same one that shows the Legacy web IDE and currently it's feature and we're going to like feature flaget to do something different in this case or.

A

I was thinking we could either introduce a new action, a new endpoint and we can only post to it and that post is going to be important because we don't want to just throw the connection token in the um we don't want to just throw the connection token in the uh URL. So we need some sort of endpoint on the IDE controller to receive a post.

C

And the second part of that students use the new handle, start remote like what that controller action is going to do what.

A

So, based on that, when it feeds all triggles all the way down to the front end to render will want to do a condition here, based on something that we get from our elements that oh we're doing remote development stuff, so I, instead of doing just start, I need to do the remote development parameters.

C

Okay, so it's going to do it.

B

So I guess that we are going to be. We are going to call start remote inside the web, ID right inside the Slash.

A

Yeah, so this is this: is when we're instantiating it all yeah. So.

C

That's why I'm kind of confused, where the with this controller, like this controller, is going to return a response right? It's not when you say trickle down like what exactly does that.

A

Mean it's so good. Yes, so when it returns, a response is basically the artifact that leaves behind is like the data parameters on those elements.

A

B

A

That's those are are from the front end like those are our controls is. We could either load a brand new page bundle for this or throw some sort of conditional on the elements.

A

And neither one would be fine. Okay,.

C

Yeah: okay, a complete aside yesterday, I realized that uh you know how. Yesterday we were talking about the the web IDE package, like has all of these uh included loose dependencies like the whole node modules is basically part of the package that is in the gitlab known modules.

C

Those uh really mess with with jet brains it like finds all of the times and expect function in those like instead of the just expect, and because they're loose files or I don't know why and like I tried for like an hour to make it find right when it failed, but it was interesting not saying we need to do anything about it. Yeah first thing is slightly annoying.

A

Yeah yeah, no, that is that, can be annoying um okay uh yeah. So, let's start on um setting up the example project to kind of receive something like this uh and what I'm mostly interested is I think this will be the more interesting thing to solve so uh I might, rather than like even showing three um three user inputs.

A

um I'm just gonna think I'm just going to apply this patch, but instead of just showing this information message, let's try to do the path that we would do if we had that configuration parameter coming um so that would be cool. Let's try that out uh so I'm gonna go to I. Have too many stuff go I'm gonna go to.

A

Is it working on something? Oh, we changed that all right.

A

um The number of folder regions is limited. What are you talking about.

A

All right so here I am on Main. um I will create a branch with this and we're going to call it add him we'll see this first thing. Yeah add handle start remote.

A

All right, let's in a separate terminal, I'm going to start this thing.

A

About okie dokie, so while that thing is running when I open this and I say what I was probably wasn't finished: okay,.

A

Alrighty so terminal doesn't have anything in it right now, because I have not applied the patch. So let's go to apply the patch I copied it. I'm gonna go to my vs code, where I do PB paste hit, apply.

A

And when this thing is finished, no I should be ready to refresh.

A

Start there we go so.

B

A

Terminal has this welcome view of thing. um I think I know how to make this button like a full screen button. I really really want to do that. Well, uh let me at least try um it's like. It needs to be surrounded with lines to make the button a full screen like button.

A

Oh wait, that's not the right one! ah This is the right one and we're just gonna it's it's great!

A

Oh I can't do fancy letters here.

A

B

Like that, oh you want to put like the two points on top of.

A

C

Yeah with a y, not an I with.

A

C

Doing all right close enough all.

A

A

Let's see if that changed this thing at all,.

B

A

C

B

So I have us: well it's a kind of unrelated question, but how we consider using Shadow belts instead of five frames uh to to insert the web ID inside the GitHub application.

A

Using Shadow what shallow for shadow rails Shadow realms yeah? Are they really called Shadow rims.

B

Yeah yeah, it's uh that.

A

Sounds like a dark lord stuff, man.

C

B

Shadow yeah, like you know that you.

A

Know the dark thing yeah when, when they asked me um what kind of front-end developer I wanted to be I chose, um I chose the path of righteousness, so I did not get. The I did not get the um Rick radicon.

A

B

You should really join the Dark Side, okay,.

A

That's funny the next. That's what has yes.

A

um No so I'm not familiar with Shadow Realms at all. Clearly.

B

um It's uh it's that way of um of creating an isolated environment, um but it's like it has a memory context independent from.

C

B

An implementation where I think that they had to pull it back a.

A

Link, oh, you did.

B

I'm very I I'm very interested in yeah.

A

Yeah there's there's light or.

B

A

No reason um iframe is just a um implementation detail. We just want something sandboxed, and so, if there's other sandboxes and um that'd be really interesting, the thing that would we would definitely run into issues if we is, if we just did not have a Sandbox and that's that's why it's worth wrapping all this in an iframe.

A

um So that's really interesting. Now I'll have to check it out um and yeah if you want to, if you wanna, if you want to see if it'll work so that that would basically look like um in our web IDE here, where we're doing all this iframe creating stuff is, maybe we just create some sort of Shadow Realm.

C

But if it's not supported on Firefox I, don't think that I think it'll work and I also said not an active development on that first page.

B

I thought, like Firefox um I, think that they they're enduring team, publish a blog post about inclusions, but maybe I, don't know, but I know that, like in the future, I think that it's a it's a better alternative than that I promise. Maybe next year um it's easier to provide a better user experience. We don't have a lot all of the limitations that they've been easier to communicate between the outer environment and they and the inner environments.

A

I think um I see what you're saying it's possible. That vs code depends on more of the like document being globally available because it it writes it creates like some globals and we're also loading like vs code, CSS and stuff as well and oh iframe helps all of that be sandbox. uh So I don't know that would be, but that's interesting, I'm not familiar Shadow Realms at all.

C

I need Shadow Realms running on top of web containers.

A

Well and that's a really I'm looking at this and I'm like wow, there's a lot of use, use cases here and I. Wonder like this would be a huge Improvement on vs code already for um sandboxing extensions, um so that seems really interesting.

A

Oh gosh, ah another thing about two like we do so much like when we render mermaid stuff we've now wrapped all of our mermaid stuff in the iframe for security reasons, and maybe something like this would be simpler. That's really interesting.

B

Yeah right, so you can simplify. All of those use. Cases like security here is like, like there's a huge application. Security Lobby is very interested in in some boxing all of those environments and third party libraries yeah a really good solution for that.

A

That's a that's an interesting point: um where did you? Where did where did you pick up uh the shadow Realms? Was this when you're um communing, with the data demons.

B

They don't have dark Lords. We.

A

Have a meet-up in the Dominican Republic.

B

They, like the Caribbean, they like it.

C

They work with it.

B

B

um Yeah I think that I that I, that I heard about the other factors I always like feeling harkeness and I, always pick that kind of stuff. Yeah.

A

Yeah yeah, that's cool! That's cool! Now, thanks for sharing this, that's really interesting. um All right.

B

A

Our boarding stuff- yes, you can do that. Okay, thanks all right. Yes, let's go back to um where we have our button. I thought I could make this a full screen button, but that wasn't really doing anything. um So that's not a problem, though um here, instead of showing the information message so right now we just show input box and I, say URL, but looking at what we actually call it everywhere else, I think we want to call it remote Authority.

A

So let me see what labels we use when we actually run this thing yeah, we call it remote, Authority, so I think I'm going to call it remote Authority um and then what we want to do is so to do gather more info, which is host path and connection tokens.

A

But let's assume we got all this stuff, so we want to um just like when we're calling ready, we want to call something: that's like! Oh we're. Gonna go um start the remote stuff.

A

So this is where the mediator commands are going to come in because we need to break out of our extension sandbox world, and so what I think is going to happen is.

A

Let's go ahead and Export one here, um start remote and we'll take in our.

A

I, don't know I'm, just gonna, say vowel string right now.

A

And these return a vs code thing called the Venable um well I. Don't think we actually need to return anything so I'll just say it's void, so you don't need to really return. Anything void is available.

B

It's like a lady type. This.

A

Is a um pretty so it's like a promise. This is a level of abstraction above a promise. So for some reason, vs code is required. Thenables.

A

um What I'm going to run is vs code commands execute command and we want to do this command start remote with our vowel that we got okay. This is failing because, oh because it's um it needs to return, it actually needs to return a promise. I, actually don't need to declare the um type. It's smart enough to know what type I am returning uh all right. Let me jump to the vs code. Mediator commands so here in our commands.

A

I need to rename these um to rename. We call this git lab IDE. Now it.

C

Looked like there were still errors in that command. There were nothing important is here.

C

Oh, it's, just a typo! Well,.

A

It's because I don't have the value. Okay,.

C

A

Going like The Client First here so man, that's how you type spells started. Oh.

A

I'll go ahead and start doing the right way. You need to call it this probably uh gitlab web ID start.

A

Remote I don't know what naming eventually we want to use here either. uh Okay, but I'll go ahead and then um create these commands here. So these is. This is where we declare and create all of those mediator, commands and upgrade that here with start remote and the Handler.

A

um And so because we're going to need to deal with a function because we are needing to trigger custom behavior from outside the iframe.

A

We have to um we'll just post a message from.

B

A

For the iframe creator to this candles.

A

All right and I guess we can just call it start remote, but we're going to get some values too. So I'm just going to spread the args.

A

What do you think.

B

Are we busting another? Oh we're passing an object right or maybe.

A

B

Can create up around this property and assign the arcs.

A

A programs property.

B

Yeah, it's like separating the the command name from from the data. That is that it has a touch like separate the payload from the from the metadata.

A

Can you can you, um can you guide me through that.

B

Yeah, like uh word in line four instead of exploring arcs. Well, that's that's almost exactly what I, what I mean? It's just like that that works. Now that object has like a an Arts property that contains the the arguments that we want to attach to the government yeah, but like it's. What I meant was like not expressing them, because in that case it would be like it makes the key property with the data that we are passing through. The conversion.

A

Right got it got it so um right now we do so it's probably wise for us to have the same interface as this function. That we'll call.

A

And yeah, that's the same! So, let's just let's just use Val and let's just let's just throw it in there as well like so whenever, whatever I think down, the line will end up having like config like a whole config and we'll we'll just pass that down as well. So that makes sense. um Does this sound good.

B

A

C

I need to drop, see.

B

You later enjoy the the snorkeling. Is it snorkeling? No.

A

Have a lovely time that'll be beautiful. Oh.

C

A

The little Pez pezzes passes, how do you say fish yeah.

C

We're like swimming in caves yesterday and caves Heights. All that stuff doesn't scare me but snorkeling is seems really scary to me. I I didn't like it last time so yeah we'll see. Oh man, all right, bye.

B

Enjoy a lot bye, okay,.

A

um So now this means that we need to handle something like this from the iframe Creator, which is this web ID.

A

um So here this is: where I've created a thing like okay, we need to wait.

A

um We need to handle these. This ready message.

A

So that's um for better! For worse, uh that's the foreign! Let me dive into what this ready is doing.

A

I've, uh all of this of starting the web idea is a promise and I thought it made sense. We'll just resolve the promise when we're ready. So um so that's what's happening here.

A

Although I do I do wonder, you know, hey it's possible, maybe we never get this message from the content window, uh so maybe.

B

We don't, why are you gonna get it I.

A

Don't know if something blew.

B

Up, maybe an error yeah.

A

Something blew up so like maybe this isn't the best interface but I'm, just that's not in scope, so yeah we're gonna worry about that later.

A

So I do think we will um so this is all handling just waiting for ready, but I think we're going to create one to um handle.

A

um Handle messages or yeah handle messages, uh and so we'll get we'll need the iframe.

A

And we'll need our uh config.

A

A

Okay, I, don't think we need to return anything, uh but before we wait for ready, that's we'll have to set up handling the messages. First, we'll meet our campaign. um This is where we will do a similar thanks. What we're doing up here and I guess we don't need to figure out how we don't want to duplicate this later, if that's a problem, um but when we listen to messages.

A

You get a message event.

A

Okay, so then, if we get a start remote event, that's that's what we called it start remote key. Maybe it makes sense for these to be in some constants.

A

Maybe these Keys should be in some constants.

A

A

Yeah so so over there, then we're going to do something.

B

I think that type 3 supports uh enumerations right.

A

What'd, you say.

B

That typescript supports enumerations. Yes,.

A

Yeah, we could totally do it that way too uh yeah and you can have it's like string based edoms as well. um That's a good yeah.

A

So then, I want to look at my config and I want to see. If so right now we're we're doing any config, which means that we're not getting our client only config.

A

um So that's where that's where this thing is actually going to live. Yeah oops, we're gonna have um handle start remote is optionally, a something that takes in a string and doesn't need to return anything.

B

I go uh I got lost in there. um Show me the. How is these um Handler the handle? Is our remote works like? How do we call it and how do we pass it? I will pass it out from the iframe.

A

And so this these types come from the the from the client, the main client, so they get set in our example projects or the main gitlab project we'll set these.

B

A

And so we received them here in our entry point we have a start that takes the client config.

A

We have a start remote that takes the remote config.

A

All of this is all the same, no matter what kind of config you have, but so then we use this any config type, and so now I am running into a situation where okay, I'm here handling messages or any config, uh but I don't have access to the client. Only specific config stuff.

A

um So I think I'm gonna do this I, don't know if this is good or not. What I'm going to do is this I'm going to say handle just for client.

A

I, don't know what I'm doing I don't know what I'm doing.

A

A

Then, when I'm in here I can I can call this uh so I could say hey if we have start if this is start remote and if we have a handle start remote.

A

um I can call this with e dot beta.

B

And I guess: I've had a little bit start remote returns, I promise right because it's it's an API call. Well.

A

It's whatever we'd say it wants to return. So we care about waiting for a promise. We can do that or that space we're giving um the client the interface they have to adhere to so.

A

I think it's fine if it's void because it doesn't have to be. We don't really need to wait for that.

B

Oh okay, I thought that, like to start remote, we need to make a vaccine APA call that returns uh a token and they will use that token to connect the web ID to the to the remote session. The remote runtime.

A

Yeah I mean so that probably makes sense to make it a promise. I think so. I think I promise. What's wait. What's.

B

Wrong I mean I I, don't know I just like talking based on what we uh we've been talking about. Yeah.

A

I, like it I, think it's good. um It's still yeah I think it's good. We still won't really be able to wait for the promise here, which is interesting.

A

um I'll, add it to do. Do we need to wait for this.

A

Yeah, what's your problem, uh uh it wants me to wait for it.

B

um Then, let's all make it a promise, you never go out. Okay, if we need it, it's gonna be a progress right.

A

Yeah, if we need to be a promise, we'll figure that out, um but in this context we won't be able to wait for it because, like the message listener can't be, we that'll be a little interesting.

A

um We have to anticipate receiving these messages and not really being able to control stopping receiving them or something. uh Okay. um So now I think.

A

So now I think when I'm here what I'm gonna do handle messages.

A

Okay, so I'm gonna do handle messages for client config, and this is going to be upset, but I'm only going to do this if in fake type, equals client only.

B

Where is client only.

A

A

That's a value for uh okay, the type.

B

A

Value that we can check on runtime of what the type is, because we won't be able to do, like instance, of ins interface, because these interfaces are all removed by typescript.

A

Okay, but I'm gonna basically do config, as might have only config yeah great.

A

I think I think that's great, um so now we're so close. So close, oh man and we're almost we're almost at time now, let's go to uh when we actually start this thing up.

A

And when we call start yeah, let's throw in our own handle config thing, so we can test it out here, handle start remote valve, so maybe for right now we can just console log. It.

A

You tried to start the remote.

A

All right and now it should work without any problems whatsoever.

A

All right, so, let's try it out. Oh okay, it's building are we finished, building we're still going all right.

A

Start here we go right. Let me open my terminal start remote.

A

Oh ah sorry, sorry, sorry so close, not yet I, don't think yeah we're not yeah it it. It's still showing the message. Instead of calling that command that we went into so here where we're handling the start, remote command and.

B

We should oh yeah yep.

A

And so we can just get that from here. These commands start remote.

A

A

uh What's wrong with you? Oh so we'll only do this if we actually got something.

B

Okay, wow, that should be awesome. Yeah typescript.

A

Is really good uh all right? Let's try that again.

A

This console error is a known issue and there's an issue for it be great.

A

A

B

A

Projects we got a console up, so we could do something really fancy. We could do.

A

I forgot: we have query prams for this stuff, uh so we could. We can get really fancy with it. I will I want to get just a little Fancy with it. Yes, we'll call it remote host yeah. Let's do it so here handle start remote will do this. We will uh want to get the current URL but add the query. Pram current URL add free pram for remote hosts.

A

And visit that URL, uh how do we do that? Something like something like this is.

B

Right right, I feel you can do it directly like just like Windows location, dot, search or dot, params, yeah search forums.

B

B

A

Something like this and then I can go. I don't know is this: is this how you visit urls.

B

Yeah that should like um take it too early on or just assigning directly to window.location yeah.

A

Let's try: let's try that out. Let's see, if that did it all right and then I know we gotta, we gotta go all right boom start the remote.

A

All right, nice, if I, did it again.

A

Oh I'm in the remote host thing now so this is different. The remote host doesn't use the main extension thing. So if you do start this up yeah it's trying to connect to that back end and then it's obviously freaking out so.

B

Oh I also that that's already working, then the.

A

Remote host will work, it's just you need to set it up, so um visual promise would be able to help with that, but Michelle would be able to help with that, since Thomas is out too. So um that's very cool yeah.

B

Cool! It's that's! It's really, nice that we only have to um to hook everything up right, I, just like connecting all the dots.

A

Yeah yeah so now yeah from from our from this side, we should be able to have the example that just loads it with all those parameters that are set up and then then it's publishing the package and getting it hooked up to the gitlab thing and that's it yeah. So it should be um pretty good I'm glad that the post message thing worked out. Well, uh so let me commit this as um I. Don't know.

A

What did we do? uh We add start remote button to empty terminal view. Also added mechanical sort of config to donate I'll make a thing.

A

um Yeah also added an example, implementation for, and it was starting to config- maybe maybe that's a sign that I'm not good at making small commits. If all my commits have also also.

A

Yeah, that's good! It's good hanging out with you this last couple of days, Enrique.

B

Yeah I hope that we can continue doing this. um These preparing sessions, I'm gonna, be out uh until October 31st, because I'm gonna be traveling uh Spain, um so I won't be able to help a lot on this one, but I'm glad that that I'm learning a lot so probably in the next mile so or after I go back. I can be I, don't know, doesn't start quite small contributions and continue learning.

A

Yeah yeah, yeah and I think addressing a lot of the to do is that we created here too, would be a big deal so um yeah. That's that sounds awesome uh cool all right, I will let you go thanks for hanging out and regime. Thank you. Paul have a good day, bye.