GitLab Create Editor Group, 30 Aug 2023

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Web IDE Maintainer Onboarding (APAC) - Aug 2023 4/4

Description

In this session we pair on a UX issue involving the vscode fork

MR: https://gitlab.com/gitlab-org/gitlab-web-ide-vscode-fork/-/merge_requests/58

A

All right, so here's the issue we're gonna, pick up uh on the web ID maintainer onboarding, which this is the last session last session, was the last session for uh non-apac. This is the last session period, so that's exciting, and it's really great and I'm so excited for the project to have more eyes on it and um it's gonna. uh It's gonna really help out the project.

A

It's also be great to continue regularly collaborating with you all on a um casual demand, because there's not many contributors to the project at the current moment, um but right now we're gonna tackle a new issue. uh So the issue is regarding these messages that pop up when we from the vs code extension need to submit a message like you committed successfully, or you know some sort of Errors happening whatever, sometimes at the bottom here and you see, I had to expand it, but sometimes it shows it without the expansion.

A

It'll say uh the source of the message, and here it's saying that it's coming from the gitlab web ID extension. Well, this is the core extension that makes everything run. We don't want to show this for fat. Extensions are built-in extension for extensions that the user might install when we have the extension Marketplace. We definitely want to show it, but for ours it's just weird and annoying.

A

um So not surprisingly, it was picked out by a uxer that can tend to be sensitive when you know and not look the other way when things are, you know weird and annoying and distracting to the user, um which is good because we can polish it up, but here's the weird catch. This is built in vs code Behavior.

A

So we're going to need to look at the vs code Fork project, to see if there's any conditions of what, when this thing actually um gets rendered and if we can touch it and what all that means and looks like so, let's dive into it and see what we can do so we're going to actually open up the VS code. Fork project uh I'm gonna go over here.

A

I'll do this on the terminal above and I'm, going to open up gitlab web ID vs code Fork.

A

Okay, let me make sure I'm up to date.

B

A

We are says we're up to date,.

A

I'm going to fetch from origin, nothing is fetched. We are up to date, all right, so I'm looking for Source colon I, think that's that's. What I'm going to look for across the project.

A

All right, it does not have any um I, always do regex searches when I'm looking for uh across the um when I'm doing a project white search, so that I can say it doesn't have a word character before it and I'm just looking for a source. uh That kind of thing is super helpful uh notifications viewer. Look at this thing, all right: if notification, dot expanded and notification.source all right, we're getting we're getting somewhere. So what is this notification dot source?

A

What is this notification view item.

B

A

Right, let's see here if I um right click, maybe I can find references to this thing.

A

A

Here's a bunch of notifications.

A

Notification service- these are all referencing, it I, don't see anything, that's actually setting it.

A

Okay, so maybe I'm going to find references to this private method and we'll we'll follow it from there we'll find.

B

Reference could it have been in the geta in notifications, TS or Js. There was a get Source.

A

Yes, let me go back to there. Sorry uh in this one: oh yeah, yeah, ah yeah, yeah, good, good catch. I bet this is this seems pretty good. Okay, yeah all right, let's see if we can open this up.

A

Yeah I think this is it nice catch, so this is probably coming from. Oh yeah. Look at look at these helpful things. uh This is coming from a class that implements the I notification view item, which is the thing that's coming from here, so sweet uh we're we're getting somewhere so somehow there's this private field source that must be getting set.

A

Okay, which has a label and an ID when we build this thing, but it's a private uh Constructor, so it must have like a public static method like this one create okay, I, think. Maybe we can look for look there.

A

Oh, what do we reference? What does source actually get set to? Oh, is this like, after the message.

A

All right, let me let me rather than trying to read this. Let me try to follow. Okay, that's the only reference here. Oh yeah notification, dot! Source all right. What is this notification thing? This is an eye notification, all right, pausing back up uh with typescript stuff. um Are you all familiar with the I prefix.

B

A

Is just yes, but it's not obviously it doesn't. This is just like a convention. That's kind of like comes from C sharp, but typescript actually says don't. Do this um I used to be a c-sharp developer, so I like doing this pun intended?

A

um No, it wasn't intended, but I'm gonna take credit report. The.

A

But the situation we're currently in and the web ID is that a number of our interfaces have I prefix a number of them do not the contributors to the web. 80 project have agreed, don't use I as a prefix typescript says: don't do it we're not writing C sharp, um but unfortunately there's a bit of that Legacy in the web ID project, but, as you can see here in vs code, land, um they're, they're very much I prefix heavy um okay.

A

So let's see what reference is this thing I think that's the next thing to do references of create so there's one here: okay, that's like a private method where we're creating a view item from somehow within this notifications model.

A

Okay, that's the only time this thing gets created, um I! Think uh so that's interesting! Let's see what calls create view item. Oh no I accidentally clicked the button on my mouse and it went back. I'm gonna have to do this again. I, don't know what button I clicked on the side of my mouse. I never use the side buttons on my mouse.

A

Okay, we have this thing called. Add notification all right, let's see, go to references all right notification service, all right! Look at all these things! What's this notification service? Okay, here we go.

A

We have this model where we add a notification.

A

All right, I am going to go to um the definition of this thing uh and source is not required.

A

Cool that's great to hear, because then we can just null it out and be happy.

A

All right, let's go back to what were the references of add notification.

A

All right, that's one, it's not setting a source, this is seems to be the only one that might be setting a source here.

A

It comes from. This thing called notify all right. Let's keep going. Oh man yeah. This is the one. Oh man all right. Look at all those references.

A

um So I have a feeling we probably want to check out something. Like extension actions.

B

Do we what's the name of the thing that we're calling from the web ID extension.

A

Good question um so that will be um yeah. It's really that's a really good question. Let's look for no changes found not able to commit.

A

So this is coming from the vs code. Extension API, so this isn't a this is something that's injected into the extension runtime. um So it must be. This is this function, show information message so great. Let's, let's check that out.

A

uh Let's keep this one open check out, show information message, so we're going to get a bunch of stuff from their own built-in extensions. uh Let's exclude those, and then here is.

A

um This must be the object that kind of gets passed along to here. So it looks like there's a show message thing from the X toasts message: service.

A

All right, uh these are some weird um typescript function, overloads that uh this is the body for all of those different types of parameters that they take. We don't really use function overloads in the web, ID project.

A

All right does the notify thing come up. You know we kind of just have this. Is the source thing come up here? Do we have a source at all? Oh look here, it is here it is look at this thing.

A

A

What does options get used that options gets passed through this shell message thing foreign.

A

Let me let me keep that, keep that one open, but let's hop into here, oh, but that's a um I will need to find and we need to find go to implementations of this okay. Yes, well, you show a modal message or show a regular message boom. ah Look at this look at this. If options source here we go. I bet this is going to call notify uh come on. Yes, yes, yes, yes, all right! We found it. Yes, all right, right, okay,.

A

So, um let's go uh back to here, and uh so when we call Shell message, we're always having this Source set and I. Think yeah I, don't think, there's any way. Vs code vs code doesn't want extensions to break out of this, because it wants the user to be able to see what extensions are telling you. This thing.

A

But we want to break out of it.

B

Would we want to hard code that here, based on the extension rather than making it configurable, because I don't think you'd want to let other extensions, disabled.

A

I think that's I think that's the way to do it. um I mean, let's hop into the I extension description real fast.

A

What is this? The I extension description equals a read-only version of the relaxed extension description, I love relaxed as an adjective for like for your type.

A

I feel like we, we have like our alert messages. We need to have like relaxed alert messages that are like it's not that big of a deal.

A

So here's my thought: what, if we, what if he so one option, is we hard code, the identifier of the gitlab web ID extension here and we say.

A

If you're this ID, we don't have a source.

A

The other option that I find interesting is what, if we actually don't do this for built-in extensions.

C

What would that affect other extensions that we might want to show this source of like what are the other built-in extensions yeah.

A

That's a really good question: um I'm, not entirely sure what the answer to that question is: um I know that if you install something from the marketplace, it's not built in.

A

You know what, but while we're here, though, let's just look at it from here so from the web ID. Even though we don't have the extension Marketplace, we can still search for extensions like that are enabled, uh maybe not enabled, but I can still search for, like the gitlab WebEx anyways we're gonna have to search for built-in extensions. These are all I think. All of these are the built-in extensions. So these all come from in the web. Id World. They come from one of two places they come from the vs code.

A

Fork has a whole bunch of extensions. It provides built-in, which is like markdown support and various languages, support that just come baked out of the box of vs code, but it also includes our gitlab web ID extension, which is our main engine. That starts everything and the gitlab workflow extension. So that's why the ID part doesn't won't totally work, because I think we want to probably do the same thing for the gitlab workflow extension like. Maybe we can get not show the source for those.

A

In in this message, it doesn't look like it's that bad, because the user has to expand it to see in other messages. It's always shows source and it's kind of weird.

A

For some reason, I felt, like I needed to defend the reason we're doing this in the first place.

A

um But you bring up a good point is if we just check built-in that, would that would be true for all of these. You know. Maybe we want to show it if it's you know we're getting some sort of you know some sort of HTML language.

A

And in that regard, maybe we want to show it if it's coming from us still I know. What do you all think.

C

Source has a label right? Could we just filter?

C

Well what? What is the source for um our gitlab extensions look like? Is it possible that we just filter those out like I assume our extensions all have gitlab in the label somewhere or something.

A

A

I see yeah yeah he's talking about like so this actually comes from like so it's showing the label of the ID identifier, but.

C

We could actually yeah. We.

A

Could extensions are supposed to have a unique identifier too so like we can actually identify it through this value we can look for all gitlab dots and not show source.

A

A little hacky.

A

But it's for the user and they're worth it I, don't know. What do you think Simon? Do you think that do you think that, since this requires touching the fork like, maybe we shouldn't do it.

B

A

It seems like, as long.

B

As we don't allow all the extensions to do it.

A

That makes sense it.

B

Doesn't it also doesn't seem super critical versus like knowing that.

A

It's because they still are like.

B

For us, debugging things it'd be useful to know. This is a message from the IDE extension versus from right internal.

A

Let me show um Let me show the messiest version of this. uh If I commit to a new branch, this is the messiest version of it. You see this thing.

C

Oh, so that's the one that the issue description was talking about. Yeah.

A

B

Yeah that looks atrocious.

A

Wow I didn't I I didn't know. You felt that strongly about it.

B

Science yeah: that's that's awful. The collapsed one I didn't mind just knowing, but that that just looks broken yeah.

A

That's, that's the that's. The point. um I agree.

C

C

um Shows up in that little notification in.

A

C

A

Three is the max buttons I'm. Sure three is the max. If there's more than three that's, that would be surprising. uh Let's do another commit.

A

Yeah I'm pretty sure three buttons the max uh I wish I could say something like you know: we we did experimentation on our user base and landed on. These are the three buttons that you know provided the most engagement from our audience, but I can't say that yeah.

C

That's data-driven.

A

Insight, um okay, so yes, one option is definitely doable of something like um uh I'm gonna make it a turn area for right now, but it doesn't have to stay that way, but something like extension, dot. Identifier, Dot.

A

Oh geez do not use directly. This is public to avoid mingling I'm. Not even gonna worry about whatever.

B

A

Vs code is doing to their stuff I'm gonna. Try not to think about it too much um uh I think I'll do something like that and like if it matches uh gitlab Dot.

A

Like then, we're git lab extension.

A

Be empty so something like that, uh maybe the one-liner isn't a pretty way to do it. I kind of like keeping this a const, though uh so I'm inclined to like almost make a but then again but okay I, say that, but at the same time.

A

I, don't want to touch too much of this file, so the goal is when we're in vs code for a clan. We don't want to touch as much as we don't want to touch a lot. um So maybe the turnaries okay.

A

What do you think it's fine? It's.

B

A

Fine, okay turn a is fine.

A

um We have, and as a uh in this project, we have.

A

um How we want to comment the changes we make, so we give context to things because, like we need to anticipate conflicts in this file, when we update things when we update the base version of it, so we actually do something like would say all right, we're, starting something where we've made a change.

B

A

C

Oh I was going to ask: how does that work? If um you touch a lot of files or you, we.

A

Do not touch a lot of files in the vs code form.

C

Well, that is the goal. Yes,.

A

Something wrong is happening if we do that so like we have to be really mindful of things code for project is like built to be it's so large and it's built to be extensible because it uses like dependency, injection and stuff. So if we had new Behavior like really need to change something, it's possible for us to change a lot by just adding new files, all right um but yeah, there's obviously a huge cost to you know, fixing the way that button looks which is kind of atrocious.

A

The huge cost is all right, we're touching Fork project and that every line we wait or wait we're waiting highly here.

A

um I'm, not sure this seems to uh surrounded- and please include a reason for the change with links for more context. Oh see, I'm, not even following the Wolves all right. uh We uh that looks atrocious.

A

A

We don't want to show the source from messages, I mean from gitlab web ID itself.

A

Okay, cool um I, think I think this is a pretty good start, and now we want to test out this change. uh Let me create a branch um we are. uh What are we doing?

A

Oh yeah, don't show Source on gitlab extensions.

A

All right, fixed belt, show source.

A

On gitlab extensions and I'll add a reference to this thing. I should probably add a reference to this thing. Okay, cool all right, let's commit it. Hopefully it commits.

A

Man we're just getting things done.

A

So the real question is: how do we test this? um We have a custom version of this vs code, Fork that we want to test in the web. Id.

C

Come on, oh it's mg! Oh.

A

Yes, thank you. Okay,.

C

A

uh Found it all right.

B

A

All right, I'll add a label, so it doesn't start thinking um what is.

B

A

What is the things called? Is this a bug? That's some sort of bug, right, yeah. Let's guess it's something like that right, but I know if I say it's a ux bug that, like triggers a bunch of things, but it kind of is- and now it's not a bug. This is a feature enhancement. It's not a bug. There's no bug here! I'm, sorry, ah okay,.

A

Yeah we're gonna, say this feature, enhancement all right, so multiple ways that we can uh test out this vs code work. We want to test in the web ID to make sure we actually fix the thing.

A

um So one of the ways I like to do it is let CI build the thing and then I update the local reference of.

A

Oops then I'll update our vs code, build package that has the reference of the vs code version I'll update this. It's either the pipeline artifact of that merge request and then, when I build this thing locally, I can test out.

A

How does this version of the web ID work with that version of the vs code fork and is the issue resolved.

A

um So that's how I like to do it I could start building this locally, but it kind of takes a little bit of time, because vs code is super big, so I kind of don't think I'm going to do it I think we're gonna wait for I'm gonna wait for the pipeline to do it.

A

Yeah, what do you, what do you think.

B

I'm, just fine okay,.

A

B

How long it takes? Is it pretty quick all right, so I could get my pipeline.

A

um It's like it's like 10-ish minutes, the FiOS code Fork takes a lot longer than the web ID, because it's a very large typescript project, it's like seems to do a lot.

C

That's right: every change counts. Every Small, Change.

A

Yeah really try not to touch this thing. uh Okay, yeah, I. Think I. Think, though, that that's um that's that's about it. Is there any questions about like the relationship between the vs code, Fork project and uh and the web ID project? Does that seem pretty straightforward.

A

C

I think this is a good illustration of it actually yeah.

A

Yeah it'd be nice to finish, I'm hoping it does it's it's. You know night time over here. So hopefully you know the pipelines. Have you know not as much Demand on them, and so maybe maybe it'll finish uh one other. So one one thing, though, is for all of these projects. We don't have.

A

um We don't have it automated yet like the releases and updates of them. So when this thing merges into the master main branch, it looks like it's main branch and this thing merges to the main branch.

A

um That's not gonna automatically create an MR in the gitlab web ID to update the version and stuff like that. So it's like you'll see Mrs from myself or David or other people on the IDE team, creating just like hey.

A

We just got to update our vs code, Fork version and you'll see of reference to maybe the issue that this version includes and if you don't see that you can always ask like okay, what what is this version, including so I, maybe know what I need to test or something like that, uh but those Mrs happen.

A

um Those are Mars happen, a bit.

A

Yeah um cool I'm so glad we actually can can resolve this I'm I'm feeling optimistic about our change. I wish we could test it um um there's another way. Oh there's there's there's two more there's two more thoughts and then we we can possibly End early unless we have um something else to do, uh but two more thoughts, I'm gonna I, want to share with you all one is in both projects: the vs code, Fork project and the gitlab web 80 project we use conventional commits.

A

So this is incred. This is kind of what we're using as our temporary change log. Until we have an actual change lock to compare between tags, and um we will obviously use it to to build the change log but as a maintainer.

A

This is important to keep in mind because if you ever run into an MR that needs to be squashed because it's using like fix up, commits or something you'll need to keep an eye on the squash commit message and make sure that that commit message is um based on one of the commit messages in here and isn't just based on the MR Title or like pulling from something else.

A

um So we want to try to keep an eye on the conventional commits when we're doing the merge.

A

uh And then the second thing I was going to mention in the web ID project. We actually have instructions for like.

A

um In the development environment setup, if you want to integrate your local vs code, repo, so like I have the two projects. You know living side by side if I want my um uh Local gitlab web ID to be pointed to the build of that local project on disks, so, like maybe I, can improve my feedback loop of making changes.

A

uh We have this yarn script of like local setup and local teardown of you can have it rather than pulling from this location, it'll pull from your local file system, which, uh which can be handy, but these builds do take a while when you have to build from it, takes a long time, the first time and then the iterative ones are shorter, but yeah.

A

uh So there's a lot of there's a lot of instructions here um in the documentation. If you run anything, but if you also just run into anything, please just ask any kind of question on the gitlab web ID um channel uh and so definitely asking the question rather than not asking the question is the preferred action, I think we're still I think we're still loading here, I, don't think we're even close.

A

Oh no starting Anonymous, no we're not even close, uh that's about it, but yeah I'm glad we got to touch that and find it in the code base. That was really helpful um uh and so I hope that this provided some helpful context to the gitlab web ID project.

A

um But I will upload I have uploaded, but I will keep you guys, I'll paying you all on the recording of the work we did in the other time zone, and so, if you guys can watch that at any time that you want to just see what what we worked on. uh But that's it.

C

A

The end this is the end thanks for hanging out and thanks for thanks for committing your time to doing these sessions and committing your time to be a maintainer, um I I. Think there's, there's not a lot of demand, so I hope you all don't feel like you're, adding a huge workload on, but I'm really excited to be collaborating more with with you all, and it's going to be helpful to not be as bottlenecked on those short number of heads that we have so thanks. So much Simon and Muriel I'll.

A

Let you all go and have a good rest of the day, um but before I before I, sign off for everything, I'm gonna make you all maintainer. So you'll start seeing me ping you on Mrs and the hopefully in the near future, um which reminds me is. You may also want to update your team yaml reference somewhere in the www project.

A

uh All right! That's it appreciate it thanks! So much.