GitLab Live Coding Sessions, 21 Sep 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: James and Tristan from Monitor Respond Live coding for community

Description

No description was provided for this meeting.
If this is YOUR meeting, an easy way to fix this is to add a description to your video, wherever mtngs.io found it (probably YouTube).

A

B

Okay, so it already Live on YouTube um also so this session. uh The plan is to do some live coding, as if it's the work that I'm echoing sorry um so we're going to live code as if it's the normal work that Tristan and I do um so I'll introduce ourselves um so I'm, James I'm, pretty new to gitlab I'm in the monitor respond team, uh as is Tristan um uh for both front-end engineers and we're going to be working on a specific issue.

B

That's mentioned in the agenda, but I'll also make a comment on on YouTube to show what the issuers we're working on. But you want to also introduce yourself Tristan.

C

Thanks yeah um yeah I'm Tristan Frontier engineer on the monitor team um of being with the company for coming up four years and um I'm based in New Zealand.

B

Great thanks, um yeah trust, sound Basin Berlin from from Australia and Tristan, taught me how to code. So um that's pretty cool uh yeah um all right so uh so the idea today is uh the issue. We're doing is is not super straightforward, like we had to make some decisions on why we would use the um a particular solution that we are going to implement.

B

um So we had some conversation you can see on the issue itself on um you know, should we use tabs or should we use um the router in a different way? uh Sort of we've had this conversation um mostly asynchronously, some meeting where we've um talked about it and um so yeah we're gonna um Implement that now so today's session Tristan will drive and I will navigate um so yeah.

C

B

Will share a screen and feel free to jump in with any questions um yeah um whenever you want.

C

C

Yeah, so um here's the issue that we're talking about today um there's a little bit of background, so I'll touch on like a few different things before we get get into the coding um So within gitlab. You've got this concept of incidents, um it's kind of like an issue if you've used good light issues with with some extra features and um yeah for a slightly different use case. So, like one feature that we added recently um is the timeline um and there's like a really quick demo over here.

C

Actually, um where you can see this is an incident, uh it has some tabs. um The one of the Taps is the timeline.

C

You can add entries um the main yeah and then this is showing a bug there um that we will hopefully fix um by the end of today um yeah and this timeline will be used in the case of like if, if an incident happens um to your website or like web application, that you're running or some kind of like online service, that causes you to have like an outage or um some other kind of interruption in um perhaps you'll have some have a workflow where, in that scenario and incident gets created, um your give Ops Engineers might add stuff to the timeline to say um yeah.

C

The incident was first noticed. You know at 8pm, um but actually at 6 PM. This, like disk space alarms that are going off so yeah, add that to the timeline and through that you can get a picture of um maybe what the cause was, what actions people are taking. So you don't step on each other's toes and like yeah, basically help you resolve the incident as quickly as possible, um yeah and what what was just shown was um the on, like the main, um like activity on an issue or an incident.

C

um It might include a link to their timeline event, um but as of right now, uh if you click that it doesn't go anywhere um and that's an issue um yeah, so it seems like kind of uh like it should be an easy fix where um we just have to add uh like a I'm, not sure if you can see in the URL at the top there, but it's yeah. It's got the incident and then like a hash and then a timeline item.

C

um So you think it might be as simple as just adding that ID to an element and then the browsers like a normal hash navigation would take over. But unfortunately it's not that simple um and I'll just quickly show in my live environment.

C

um I have an incident here um yeah and one of the reasons. It's not. That simple is you. Might click that link from this page where the timeline tab isn't open, um so the the browser doesn't know to open the timeline tab automatically we'll have to like handle that somehow, um and you also want to be able to like load a um load event directly in the URL um and have it automatically goes to the right tab um when you load this page because by default it goes to the summary tab um yeah.

C

So those are like some challenges, um yeah and then, as a result of that, we had like a brief sort of discussion and um investigation into the issue, and one idea that was put forward was um using view router to solve this problem.

C

um Computer router would provide some like additional functionality around manipulating URL and like reading from the URL that affect that um you want to navigate to a specific tab on the page um yeah. So that's that's kind of where we landed. Does this? Is this all making sense so far, Jake background.

C

um Yeah, so we had this, we had this sort of discussion and we thought why not try out gear router and see how far we get um and I had had like a little investigation on like a branch, and it does seem like it would solve the problem for us um yeah. So today, um I might show a little bit up there like starting a new Branch, adding G router to the page and um yeah and sort of show like my workflow, and show how um yeah run tests locally and things like that.

C

Just whatever's useful.

D

B

D

Thanks for joining.

A

Us hey Lee,.

D

Thanks for the invite and I just wanted to ask a quick question: um would your approach normally be to um read the documentation and and kind of figure it out as you go, or would you find somewhere in the code base where you're maybe already doing um what you're trying to achieve and borrow certain there already solved solution so to speak.

C

um That's a great question and the answer is kind of to both of those things. um I had a look at the documentation and I also looked at existing parts of the code base.

C

um Well, in this case, it was more useful to look at what what had been done in code, um because we've used the router on several other pages in various ways.

C

um Yeah, so I could show some of that, like how I even went about looking in the code base and stuff. If that's useful, um yeah I.

D

Think that thought process is is really interesting. I've shared a link to a component that I've worked on. That does something really really similar, um oh yeah, so um you know, but but I think a huge part of this session is is for you to kind of you share what's in your head and help people to understand how they, um so it's probably important. We don't skip too many steps, but this.

C

Component for sure.

D

um Has has a few routes set up? It's got root of you at the bottom um and there's a few root links in there that take you sort of back.

C

D

It's a little bit different, because this opens in a draw um at the side of the screen and there's kind of a main content. View, and then the draw is the bit that varies depending on the URL and the link that you click but I think. The the way this is implemented would would be pretty much the same as as what you'll be looking for.

A

B

C

Very interesting, no you, you go James yeah,.

B

We did look at the merge request page because it's the most obviously similar and should be like you know like on the merge requests. The behavior should be the same as what you'd expect on an issue or an incident in the state in this. um So the merge requests the router there was um really quite complex and not really something we could easily um move over to to our to the um issue or incident section. Yeah.

D

So this was a bad example of what how to achieve what you want. Yeah.

B

Like this is the behavior that we want, um you can see like it's using the router, it's not using tabs, and this is one of the reasons why we said I'll go. We need to use the router, not tabs and the difference in like they use it for the user. Experience is like. uh So if you go to commits Tristan, then you have like the issue ID in the URL and then slash commits, whereas if it was tabs, it would be issue ID, tabs question mark um commits yeah. Oh sorry, question mark tabs equals commits.

C

um You're, referring to the there's this default behavior in the um or not default, but provided behavior and the gitlab UI tab component.

C

Oh whoops, sorry! Here we go um where I don't know. If it's even is it documented by us or just by bootstrap.

C

It's a prop that you can provide that um allows you to do navigation, yeah,.

C

Yeah, so each tab will then appear in the URL um I. Don't think I could show it because.

B

Query params and then in you can give a name as well.

A

C

Hi hi Steve, please too yeah cool. If.

B

You don't get the name, it's just enough numbers of the time. Yeah.

C

Yeah, so this this approach wasn't um ideal just just because of that, the ux of the like the user experience of the URL is kind of different to what we want um and then say, measure quests. This does have the behavior that we want, but the implementation of this is um yeah, as James said more complex than we are hoping for. um I think this is the way this is done is already being flagged as something that would be nice to refactor, but essentially um I well, I believe each each.

C

The contents of each tab is a different Hammer entry point and the merge request tabs kind of wrap that whole thing.

C

um So it's not done in VJs, which means there's a lot of like additional JavaScript, that's doing manual, Dom manipulation and stuff and um yeah it would. It would be nicer to do it and appear as possible um because in our case we're dealing with um with dealing with things that are all view. Components like the summary is a few component timelines of your components so yeah.

C

um That was the thought and we didn't want to um introduce any code that that would already need to be refactored as possible.

C

um Yeah and and I did find a similar use case, uh which is alerts, um there's just a slight difference, that's loading um and that it uses hash navigation. So it has this um this hash in the URL.

C

uh So if I switch to another tab, it still has a hash um before their last slash. So part of part of my like one of my goals, I guess with implementing that is figure out. If we can do away with the Hesh, um particularly because our use case is this adding an anchor, but you link to an anchor with a hash, so I don't think it would work. I haven't tried this actually, but I, don't think it. The browser would like it.

C

If we had like hash, slash, timeline and then hash again and then the timeline, the actual timeline event I.

D

Think you're, right and I I wonder if the reason that it's been done, that way was to to sort of save a bit of extra effort on the back end, because you would need to configure additional routes.

D

That's right, yeah, yeah, so I I think they've. Maybe deliberately done that. So if you copy one of those links directly to one of those tabs, the the bit of the URL, that's actually interpreted by the back end is everything prior to the slash. Oh sorry, the hash.

C

um Correct yeah.

D

I think that probably made the back end piece a little bit easier.

A

D

To make a change to the back end routes and I'm, not sure, what's already in place for the timeline.

C

um No that that's that's right to to fully complete this solution um without the hash, we would need to change the back end slightly, um but luckily it's not not a huge change to to add extra routes for something like a sub page um yeah and.

A

I'm not like a backing.

C

Person so like I, don't know if I would have the best like solution, but I know, at least like a I know a clumsy way to do it and.

D

C

Start with that and bring an egg someone from the back end before you merge it.

D

Again, I think I think for that other component that I've pointed out. We could find the Mr if we need to and and the relevant routes that we added to to achieve that.

C

Yeah, um sorry, you were going to say something: okay,.

B

Yeah, so we did find a similar issue. um We talked about a similar issue that people could um if they wanted to try their own solution. They could do that, and that was with the alerts, but is it? Do you mean the issue that we link to? Is it um you can find on the agenda or on YouTube, but um yeah? uh Is it to remove that hash? Is that what the issue is.

C

Yeah that that's that's exactly right. um It's to remove the hash into allow um back navigation.

A

C

Because right now forward and back doesn't take you between the tabs and it could be nice if it did.

C

um If, if each tab ends up being a separate URL, it would be kind of expected that if you click back, it takes you back to the previous one, not back to the previous, like backend, the URL, because as a user, you don't have There's no distinction between um yeah.

C

Apart from the lack of like a refresh but yeah I, think you want to be able to have metrics, add to the history and then be able to go back to the alert details um or to even just to reload the page when you're on metrics and have it um have it remembered that without needing the hash um yeah, so that that's just like a small sort of usability improvement just to make the URL a little bit nicer. Yep.

C

B

So if anyone wants to tackle that, you can learn what we're doing here and then also ask us for any help. You you want.

C

This is it here, um I made it just today, as I was um looking at the alerts, page um yeah, so maybe we'll dive into some code. For this.

C

um So, oh among, like I'm, a master at the moment um from just earlier today, it's a little bit behind, but it's close enough um wait. I'll make a new branch.

C

C

Let's say incident timeline, Russia.

C

And then, let's, let's have a look and um in the code base to see what that uh Instagram tab is doing well currently, um so this file is in charge of the tabs and the tab Behavior.

C

um So we can see. Does it actually should be another tab which I think might appear if I reload I've been switching branches a lot uh this afternoon yeah here we go, there's also a matrix tab.

C

B

C

Was that I think I think it's because I I changed Branch without refreshing, the page, um because this is the metrics tab actually loads? Oh yes, slightly interesting! Actually, um the this is it here. It does a deferred import, um so it actually doesn't load uh immediately when you load the page um or when you load the JavaScript bundle. There's like the main JavaScript bundle that just like test file gets included in and then um for a strange reason. We load the metrics table later.

B

Yeah I've never seen that.

C

Yeah um we do that it's more common to see this in like tests and stuff, but we do that in the code base a few times in a few places. um One advantage is that I think the reason why we do it is this is quite a heavy bundle. It's pulling in the entire like charting library,.

A

C

At one point, we we were doing like some performance cleanup to make um to reduce the size of entry points, and we worked out that the this was a big big um big dependency.

B

And so we only load the tab if that is something in the metrics.

C

um We only load the tab if it's and incident page. um So that's the other interesting thing about this. There there's like some shared code between issues and incidents. um So if I go to issues and click, one.

C

It looks very it actually loads the incident stuff because it realizes that this is an incident.

C

B

It shows incidences and issues right.

C

Yes, that that's right- um oh yes, so I'm loading now I'm loading an issue, that's not an instrument, and oh this is a work item.

C

We've got all sorts of different issues in there. I've got issue like things. uh Web item is another one, but I think I. Think this isn't. Oh here we go I actually made one called yeah, here's one! uh This is not an incident, it's an issue, but ninety percent of the code is the same as using using the same JavaScript files and the same components.

C

It just isn't loading some of the incident stuff.

B

C

Yeah, so you arguably consider only importing, and instead of only deferring the metrics, we could defer all of the incident stuff. That could be another valid approach, but the bulk of the dependency size is in this is in The Matrix, because it shows charts in the charter. Library is large, so um yeah, it was primarily like a performance decision, the bundle size and 99 of the time when you're loading an issue. It's probably not going to be an incident.

C

um So then this saves a lot of megabytes both on the server and on all of the users, so they have to download it.

C

Yeah um yeah a good bit of a Sidetrack, but a really good question: yeah um yeah. So that's why that's why the tab was not loading.

B

C

Sorry, it wasn't.

B

Loading, then, because there was no metric on that incident,.

C

B

Well like what, why was the other Branch not having it.

C

I'm not sure actually I yeah, I I wouldn't know exactly why. But my gut says that it's because of that deferred loading that.

A

C

Dependency never appeared so then the tab just didn't render yeah um yeah. So for some reason it'll be to do with the uh like the webpack hot reload that we use I would have switched branches to hot reload, will kick in um it'll, try and update the page without doing a full refresh, but somewhere along the way that deferred import got lost um yeah.

C

It's not uncommon that it's features like that. Sometimes don't interact fully seamlessly with hot reloading, because hot reloading is kind of doing a lot of magic um and the client so yeah. Sometimes if you see random bugs like that, sometimes they're refresh just fixing it.

B

Yeah and they're not bugs, would see in the Live code. It's just.

C

Because yeah yeah, exactly the hot reloader, only runs in the local div, environment um and yeah just in order to to make it so you don't have to refresh the page every time you update some code um thanks yep yeah, so right now we have um these tabs and they they do switch stuff. But it's not doing anything in the in the URL um yeah. So.

C

um Maybe the first thing we want to do what what I do if I was working on. This is I would add a router and then I would attach some debug points or console logs just to see if I can get it to um get it to recognize the the like tab, switching um yeah. So this is where the um the alert page is going to be a good help for us.

C

Because if we look at alert details.view, um we should expect to see some router stuff happening in here, um because we know that there's a router in place in the front end.

C

So if I set it's quite a large file, so if I search route, I can see a couple of places um yeah, that's it um so there's some stuff where it's interacting with a dollar sign route. Dollar sign router.

C

um The this to me is like an immediate clue as to how we might introduce the router, um even without looking at the view, router Docs. Whenever you see this dollar sign, it's Pro, it means it's. um This is something that exists for the entire view, app, it's just kind of like a it's, not a role. It's like a pattern that things follow.

C

um You'll, also see it with a poem If. We have a poor in this yeah, so Apollo you can see his dollar sign, Apollo um and the way these dollar sign things get attached.

B

C

View is in the base view app. So if we go up to where we're saying New View, um so this is I was in alert details and then going up the tree to the like index.js.

C

um This is where the view app's being made and it's look assist adding an Apollo provider because it's like the normal way to integrate Apollo and it's also adding the router at the base level um yeah. So if we would, if we wanted to add a router in our use case, we're going to have to do a similar thing.

C

um Yeah stop me if that doesn't make sense, because that makes sense, it might be a bit advice, but yeah, so we've got I can see that Imports. We uh creating a router here um right when the the page gets first run so.

B

This is creating a router within this uh view app, but there might be another router that is apparent to this view. App.

C

um The View app the so not the component, but the app an app is always the highest level.

A

B

um So Above This.

C

B

Route would be handled by the Hamel files.

C

um Yeah above this there's yeah, there's just hell in in like raw or JavaScript um yeah, so like on a given page, we would have multiple view apps.

C

um So there's like a viewer for the main part of the issue, though there's a view apps at the sidebar um I really.

B

Want to say this is the view.

C

Few different tools- yeah yeah nice I, haven't looked at those for a while actually.

C

A

Am I not saying.

C

C

B

Never use it in Firefox, I.

D

I have that problem quite often as well.

B

D

If you just close the dev tools and reopen them, it'll appear um I just wanted to call out quickly the um where I've fallen down a rabbit hole in the past that the The View and this stop dollar route is nothing to do with you router, um and you saw there that there was this stock dollar route, and this dot dollar router um is, is all to do with the eurater um and this that dollar Roo is just um more of an underlying I. Think that's almost like window.location, um so yeah this.

D

This dollar route is I, think always available. This.

C

D

This is only available if a view router has been kind of loaded or mounted or whatever the terminology is.

C

Right, yeah, I yeah that that's new information for me I just assumed that they were both um added by by the router um yeah. So there's there's a whole bunch of uaps being loaded on any given page. um You can see.

C

um There's a bunch of sidebar lines, there's one for the top nav um and there'll be one for the the issue itself yeah. It may not be a named one as well. um They don't always get named.

C

Oh yeah, interesting.

C

um That was just like a that whole view. It's just a button.

C

B

C

B

That mean like each view app like not. We can only have one router on the page right so.

C

That's around we.

A

C

One well this this would seem like we can have one router per view, app, it's the right um or because it's created the router is created outside of the app um in this index.js. So it's created up here. You could conceivably give that router to several View apps. They would all share a router.

A

um Okay, so they could be using the same Bureau yeah yeah.

C

Yeah, uh so that might be what we end up doing um yeah.

C

So it looks like we need to take a look at this, create router function um and yeah. Here we can see it's importing view router, which is what we would hope.

C

um It's doing this for you.use thing, which I don't actually fully understand, um but is required for um certain, um like plugins and libraries that we usually viewed I. Think it's just telling um it's just telling the global view that we are integrating the router so that it can activate certain features, maybe or or certain like prerequisites can get loaded into the global view.

C

Like config but I'm, not 100 sure, but yeah I'd suspect it's it's something like that. Like setting some global conflict um and then yeah, we create the router and it's being passed like a few options, and then these options are going to be interesting to us for the router that we're going to use on the um incident page um yeah. So at this point it would probably be interesting to see if it already is a router being used by issues. So we could go. Have a look at the um issue entry point.

C

So this was the entry point, the sort of JavaScript entry point for the alert page, um so I'll hop on over to the index .js for issues.

C

B

And this is from my info there: how did you find that so fast.

C

um Just from memory I know that I just happen to know that the issue page is called issues. Slash, show.

B

C

D

C

Yeah, cool, I I think that's that's from rails, um that naming convention and we don't seem to do that anymore for new pages, but issue being one of the oldest ones that must have show in it um yeah. If you were to look at like the rails, around docs.

C

Oh actually, I, don't know the exact page. Possibly this one um you can see you can see like show, shows up.

C

C

It's kind of like uh rails naming convention um where um an individual page, they call that resource the show resource and you have a controller for show and then you might. Then, if you have like a list or like a base page, you might call that index so you'd also have an index controller, um okay or a list controller, so show that's. Where show comes from? Oh here's, here's like the full set of ones that um I think rails will actually automatically set, can set these up here.

C

If you like so show it's it's kind of like a naming convention in rails, um for these different controllers that correspond to different pages um yeah and they kind of loosely correspond to like crud actions. If you're familiar with those um I am not yes, yeah. It's like a APF for like backing people. They might know that um when you have an API, you typically for every resource, you'd have like create, remove no crap rename update, delete or something like that. It's like four, like things, um create read, update, delete, I.

D

Just popped, a link in the um chat, that's really really helpful,.

A

And I forget I: forget that that.

D

Link every single time I, um but this this lists all of the ropes and you can see a good example of um if you scroll down somewhere you'll, see something that's got like the hash. New hash create hash, destroy hash, show that sort of thing.

C

Yeah uh I haven't found one, but here's like a slash new yeah yeah.

D

um What am I looking at that I can see. um I'm happen to be looking at our off slash authorizations.

D

And if you scroll just to the right for some reason yours is quite cropped out, but oh yeah, that's strange that then you can see if you.

C

Play a show, update, destroy.

D

Yeah that that sort of thing yeah index.

C

Yep yep and yeah, so for whatever reason in rails, um show kind of corresponds to hey you're. Looking at a single item, then then they always load the show page and then, for that reason, at some of uh JavaScript has show index in it.

B

In this case, a single item, you mean a single issue.

C

Yeah so in the.

B

C

Case it's like a single issue um in the case of alert management, it's like a single alert, yeah um yeah and a lot of that stuff, so kind of like automatically set up by rails, and then we just put. We just put a Javascript file in the right place with that naming convention and it will the Hamel like when it loads. The page it'll escape the hammer and it will like pull in that Javascript file just because it's like named to be.

B

C

Same as that resource in.

B

The folder naming.

C

B

Yeah, that's cool yeah.

C

It's it's a bit strange if you haven't used rails and you're trying to work out like where the JavaScript starts from um yeah, so it's definitely useful to know if you're doing contributions and you get you're not having to get like that fire up the JavaScript tree um that you want to find like the highest level. Entry point um yeah. So in this case we have this um this index.js for show on issues and it this is gonna, be what creates the issue app.

C

um So we've got an issue app which does the new view. um So there's always a new view at the top level of every view app um and in this file. There's actually a few of them.

C

um We're also creating a separate app for the header actions and a one foot stack traces, there's like a widget that can sometimes be shown on issues that as a stack Trace and then we also have the incident app.

C

So this is where we would need to add the router, um so we would do something like const router equals create rather and then yeah. This will be added into the view app, similarly to how we've already done it. For Apollo um yeah- and this will add a router to that viewer and then once we're in the view app. We can go like this dot dollar sign router and you can see stuff um yes, so we need to create this.

C

Let's just call it router for now so.

B

We're making a new router here we're not reusing another one is.

C

That right, yeah, that's right, we'll.

B

Create a new one.

C

um Because it will probably have some specific some yeah incident specific stuff in it, um maybe we'll place it inside.

B

A

C

We need to make sure.

A

There's no like.

B

Conflicting router or oh.

C

Yes, how would we make sure.

B

C

Correct, that's actually what we were here for um pretty much just looking at the view at this is not already a router, so that tells me that we're safe.

B

um So if another view app on the same page has a router, they don't need to share it.

C

No, they could have separate routers, yeah, okay, yeah yeah and we'll see a little bit of how it works once we dive into it, because um there is some configuration you provide to a router which is the the base which tells it at which point in the URL, because you have like a long URL at which point does the the router start caring about the URL?

C

B

C

Yeah that possibly doesn't make full sense, but like for an example in the alert management case. All of this, this slight initial stuff is not important for the router. It only really cares about that last, like slash overview, um so we would set the preceding um stuff as the base and then the router only attaches to that last section um yeah, but the the interesting thing with the router is.

C

You could tell it that the bass ends at alert management and then it will take over I will kind of take control of the two and the slash details and stuff. So if.

B

You push you don't want, because.

C

A

This case yeah.

B

A

C

Yeah nice, but um it will be important for when we want to reload the page, because um the router needs to initialize itself. At that point, and instead of just having like issues, seven we're going to have issues, seven slash timelines and that base tells it that up to the seven, is um not its concern and then everything after so the slash timeline is the concern of the router. So it will sort of attach itself at that point: okay, um yeah! So we have here.

C

We have index.js, we're gonna, um add a new router file here, which we've done um and I'm initially um I. Think I'm just going to use the alert router directly.

B

um You broke up. There say that again, oh.

C

And initially I'll just use the this alert router directly, um so copy all of the same code over because I think it apart from the hash which we can change, um I think it makes sense so far um yeah because it has some bass functionality. We can pass this in a base um yeah, which will probably look slightly different, but.

C

B

um So the gone dot relative, URL path, that's everything up until the hash that we noticed.

C

B

Is it's coming from the Hamel, the Ruby yep.

A

C

um Yeah so there's some parts of this that aren't going to be perfect, but it'll work, it'll work initially um yeah, so I'll save that, and then we probably want something um to to check that we are using the router so um and and some tabs.

C

We and mounted say.

C

I'll just console log, the router, and we can have a look at the what properties exist for that.

C

Yeah so reload uh switched it off.

C

Desktop router route is undefined.

C

Fix the issueable titles now I'm not sure that that one's related.

B

um Did console a lot of it, though, above the welcome to Goodland.

C

Oh, it did yeah cool, so it was possibly working something but um yeah you're right, I loved it rather um yeah. So that looks like it worked. We have the graphic and on the page, um so I could even commit this.

C

C

That all looks relevant.

C

Sorry I added on another screen um to consider new, app and I can push and.

B

When it said mode hash, is that the issue that we're seeing before in the alerts page where we had.

C

This hash, that's right, yeah, that's exactly right! um Yeah and you can actually see when I've Reloaded, let's added a hash, slash to the URL. We don't want the hash right. Yeah, that's right! um Yeah,.

A

So we can do that next.

C

um I'll just push.

C

To a new branch.

C

um I should probably set this thing like it's helpfully suggesting, but I haven't and yeah. It's.

B

Going to run the housing suggestion, that's so beautiful yeah.

C

I want neither uh so I wonder if that's new, but um oh yeah. It doesn't like console statements of course um yeah since, since we're showing what we were just doing like daily development, there's like either I could do. I could disable this for that line. If I still want to push it I, don't really want to move it right now. I could use a debug statement in the browser instead of a console log, so I could um and the debugger.

C

Don't know what that is, but I could find the correct file.

C

um Edit debug statement there's a lot going on there, but um so that alt p is that yeah, so here command P opens this thing. I could like jump to the incident tabs.

C

Cool uh and then I could go down to that line or just above it I could add a deep extent here then I could remove this console log and then I could even put a watch expression on.

C

Let's start browser.

C

um Yeah, so that's one way of like getting around this issue, the other.

B

Way is the control P before I, always just do a global search with a unique looking line of code.

C

Yeah, oh nice yeah that works too um yeah come up here. I think it's the same as like vs code.

B

Yeah, it makes.

C

Sense so I guess they implemented the same shortcut which is nice. Then people just don't really have.

A

C

It don't really have to yeah sort of learn, um yeah and then the other thing I wanted to quickly show was that if you wanna skip this, um you can do no verify and also because I know the pipeline will fail. You can do see I skipped. If you don't want to run the pipeline. That might be a useful little tip that people don't know about.

B

Is this um like pre-push hook? uh Is it new.

C

Yeah, it's relatively new I think it's maybe two weeks old or a month old was.

B

That I didn't see it when I first started and then it yeah.

C

B

In my GDK yeah, it's useful yeah yeah.

A

B

Accidentally set it up or just arrived one day.

C

No, it is useful, uh it's good because it saves like running big CR jobs that you know are going to fail um and things like linting and stuff can run relatively quickly locally, so it makes sense to do that.

B

C

Everyone likes it, so no verify is always there and CI skip. This is kind of how for me personally before we had this hook. If I was like pushing something that I knew was going to fail, the pipelines I'll just run. Add that CI skip option and.

B

The reason we're pushing it is so that we can share a code so far right, yeah yeah. If you wanted to show someone else in this case, we want to show anyone that wants to see it.

C

Yeah yeah, that's right, um yeah, so we'll we'll be slightly naughty and just skip the hook for now.

B

um I've used this in cases where, like I, don't know why my code isn't working and I want to ask for help and I.

C

Want to exactly with the.

B

Specific code, so people can read it yep.

C

Yeah yeah really useful for that case and.

B

Also helpful for like um asking for help, asynchronously I think is usually like you.

C

A

Actual office environment.

B

You just call the person and share your screen, but yeah in this case, it'll be a slack message to the channel or, if you're, a community in the Discord or in the guitar, um where you can, post or in an issue or a merge request as well, uh where you can post to say like here's, the issue I'm having what is the problem I'm? Having is the code, um any ideas.

A

C

I'll just quickly.

C

Quickly make it actually I guess this is like maintenance, uh it could be a feature um because we are going to add, add the hash stuff by.

A

B

A

Labels like this before.

C

Yeah, this is a shorthand uh one of the mini slash commands that you can run table flip this one um yeah I often use probably the label one as the one I use the most, because I find it's a lot of clicks to use to drop down, um especially if you know you don't have to search. You just know what the label is. Another.

D

Neat um tip, although I'm not sure if it'll work for Community contributors. But if you name your branch, starting with the issue number.

B

D

Metadata will automatically copy over from the the issue. So all of the labels and Milestone and um I can't think if there's anything else, but.

C

Oh nice I didn't know, know about that one. Actually, that's a good! That's a really good tip yeah.

C

B

Could we add it now or does it have to be the branch name like? Is it the.

D

B

C

I could push a new Branch, uh it's an option, but um yeah. That's a good tip. Definitely add that one! Oh, are you writing any of these down on your general? Could.

B

Be that's a good idea. I will.

C

um Yeah and I'll also.

C

Maybe you mentioned the CI dot skip.

D

S super efficient. You can even pass something to tell it to Crazy to create the merge request for you can't you.

C

When you push yeah ah right, yeah.

D

um Yeah I, don't I, don't ever do it, but um those those push options are awesome and I know you can do.

A

Some yeah powerful.

D

Stuff then just um sort of skipping, but.

C

Yeah yeah I think we we support quite a lot of the the merge request, workflow just through the CI, the sorry, the command line um interface, which is cool yeah, but yeah me personally, I just use that link um take it gets suggested and then yeah. If we want to follow along with the changes um as we go, that's it there um yeah. So next is probably what James suggested butchers to update the hash to the history.

C

um So the views three router box.

B

Sorry one question Lee this um this uh functionality to add the metadata to your merge, request: um I assume. If it's set up for gitlab team members, you can set that up in your own repo to do that automatically.

D

Do you know what I think it's baked in functionality? I, don't think it uses any any kind of um what I call it web hooks or any magic I'm just gonna. Look it up in the docs quickly and see if I can share a link.

B

So that would mean, if you're on your own repo and you're, addressing an issue in your repo. Having that issue number to your merge requests, it will automatically carry over the metadata Bingo yeah.

C

To to the branch name? Oh wait: it was the branch name right, yeah.

D

Yeah so yeah yeah, all right.

C

A

Today, yeah.

C

um Yeah, so going back to router, if we just make this history, um I think that will remove the hash.

C

um Oops yes, I believe, is that.

C

Yeah, so it did insert an extra slash, um which is interesting.

C

um Yeah, so that tells me the route is still doing something, and then this page for some reason it takes a long while the GDK definitely does this sometimes um yeah. So we have a router we are in in the tab page.

C

We are interacting with the router and a minor way already, um of course, already oh wait I'm in the wrong one file, yeah in Mount, Edge um yeah, so we know that the route is there. Now we can look at maybe what what is the alert page doing with the router.

C

Yeah, so it's got got a couple of things: Stone, it's um Computing an active tab which looks like.

C

This year, so what it looks like is happening is when the tab is clicked.

C

So, let's see where this has been used, yeah so GL tabs has an input event and a value property which you can combine into V model um so that whenever you either need to read uh like the tabs need to read the tab index or set the tab index, it will go up to this property, which is cleverly. You can and view you can Define it and compute it with v model, and you can write a set and a getter, and these will run every time this is set or get um which.

B

Is like a nice explain that to integration I, don't quite.

C

B

How this one works.

C

Yeah so normally normally with v model.

C

Oh I'll upset my entire browsers crash. That's interesting.

D

Was that one that you were looking at.

B

D

That's the that's the implementation elsewhere, or is that the current code that wasn't the current code on the timeline? Was it.

C

No, this sorry, this is an alert.

D

Yeah yeah I thought it was I just wanted to make sure so.

A

D

Go ahead on your explanation, but I just want to caveat that. I'm, not sure that this is the route that we'll want to go down.

C

Okay, um yeah there's a few there's, definitely a few ways we could implement this um I like this approach, because it um allows us to keep continue using GL tabs um without having to switch like we could switch to jail nav.

C

Then we need to reskin jail nav. It was something we had talked about doing that um nav is oh, my brows is just completely gone. Oh there we go when.

B

You say: risk um nav, you mean, like add the functionality to gitlab UI, that we want to use yeah.

C

Yeah yeah, so if we want to keep the look and feel of the tabs, which is what's in the design, um then the GL tabs component is the easiest way. And then, if we use gel tips, we can use this v-model to effectively subscribe to any updates and also we can use it to force the tab to change based on what is in the router.

C

Yeah yeah because it because it's the model, it's um both reading and writing to the current term index. So if something else changes the tab index, the UI will automatically update to reflect that um or we're also giving control to the tabs component to change the tab index, which it does when you click different tabs.

C

um Yeah. The The View dots have a really good breakdown of v-model. It's basically when you have um an input event, as well as a value on a component.

B

um So the simple case for.

C

B

In data you have like a um like a simple string or a number, so yeah changes easy so that yeah it's just what is it now in the set, is just updated but yeah. This is different because, um like why is this different? Why do we need to specify the get and the set.

C

uh Right um because we want to do a side effect on okay on one of those yeah you're right. That's a good question.

B

So this is instead of a watch, so another option would be you watch the current type of index and then you update the component. Instead of that, when you update the tab component, you also update something the router in.

C

This case, that's right, yeah, okay, that makes sense cool, so it's kind of combining several. What would normally be several pieces of code into one place? um Yeah that makes sense so when.

C

When we want to read the tab index, we're going to say what is the active tab, which is like I think this is string which is like slash in the alerts case. It'll be like slash, metrics and Slash.

C

um I forget what the other tabs are summary and stuff. um So the return value of this is a string and then, oh sorry, the return value of this as a Boolean active tags is a string. Then it will find the index of um that string. That's returned uh in the config and then we'll give back a number, because what the tabs component takes in gitlab UI is like zero for the first tab, one, that's the second tip 2013.

C

Those are the indexes um so like I guess to demonstrate. If I had, if I say um yeah. Let's look at the view.

B

Move on, uh we are.

C

B

Over time, so if you want to.

C

D

B

Break and then and decide if we want to keep going or pick it up. Another time also fine.

C

um Yeah, that sounds good I. We, we could also maybe say finish in 15 minutes or something just wherever we get to yeah.

B

That's cool yeah. Let's do that so we'll finish our cool 15 minutes, cool.

C

Yep um yeah because unfortunately I don't have much longer um yeah, so we're looking at tabs and.

C

uh I'm not sure if it's in these dots or the bootstrap dots but essentially.

C

um There's this input of ink: if you input the number zero it will switch to the first tab, there's effectively how this this works um and then I think that's all explained in the bootstrap view, Docs.

C

And that's essentially, what we're doing.

B

um Just to clarify like we're looking at the bootstrap view, docks because gitlab UI is based on for the most part, bootstrap View.

A

B

So if the gitlab UI docs are incomplete, you can refer to bootstrap View.

C

Yeah yeah, it's a good good point to mention a lot of the components that we have in gitlab. Ui are rep. They sort of write some bootstrap view functionality um in some cases, it's as simple, as um we just provide our own style or in other cases it's like adding new functionality, um yeah.

C

I'll be interested to see if there's a b model example um yeah programmatically, activating deactivated tabs, that's actually what we want to do. Oh no! It's not! We don't want to activate, but we want to like navigate to and from tabs so yeah. An external control is like a good example of this, um where you're clicking some unrelated button and it's like changing a tab. View and.

C

Yeah, if you have the data tab index and you view model that this would be like the normal way without the Getters and Setters, um then this and then yeah you, you mutate that belly.

C

um Then the model will just uh read those updates and react accordingly. um So.

B

A

B

We're using the get and set is because we're not using the number we're using the the like the string.

C

um Not quite we are, we are essentially boiling the num, the string down to a number okay um and then it, but we want to. We want to link it with the router at the same time um yeah. So what we do, instead of instead of only storing the tab index, we store the active tab as the string.

C

um When we want to read the tab index, we just sort of boil down the active tab into what whatever that number should be and then in the other direction. Let me set it so this is this happens. When you click tab, it will set the tab index.

C

We actually want to fire off something on the router to say: oh someone's clicked on a tab. Let's add that tab ID to the URL to make sure that they're still in sync um yeah in the other thing that this active tab does is by having it separately.

C

We can say um if there's no param tab ID, which will be the case on the first load of the page, um because the router is just like in this default state. Then we make the active tab, the first tab.

C

So that's the zero in the list of tabs um and in that way, when the tab tabs read um the they read the active tab to see which tabs active, then then it's that first one by default.

C

B

Lee you mentioned before this might not be the route we want to go. Yeah.

D

It's it's! It's bugging me this um I I think I might reach out for some other opinions, but view router provides this awesome. um uh What's it called I've got it open in front of me. So let me just scroll down um oh root of you. How I'm, using so yeah view.

A

D

Provides root of you, which is is almost like an iframe is how I picture it in my head. It's kind of like a placeholder um where view router will load whatever it wants to load um or whatever you want it to load. So it's yeah, you kind of put a placeholder in like pretend it's a div or an iframe or whatever, and you call it root of you.

D

Then, when you tell view router what all of its roots are um and if you like, like, if I, do forward, slash timeline, you want it to load this component into router view. If you do forward slash details or forward slash, metrics or forwards, so you tell it for each row which component you want it to load. So then it does everything for you, um but if we want to use tabs, that's where it's it's! These two things kind of in my head are.

C

D

Together, we need to think like, should we I Wonder If rather than tabs, if they should just be buttons that look like tabs, because.

A

That's right, yeah! You.

C

See well, yeah yeah. No, it's exactly right and we did talk about. um We did talk about that in the original.

D

C

No, we we kind of skimmed over it um I mean that that's definitely another another thing. We should investigate. um There's.

D

Just there is just.

C

Some, the only thing is that there is some complexity on the page that might cause some issues with that. So one example is that um that would definitely work for the View apps that get displayed by these buttons.

C

um But then we have this like web of other things that also get affected by the tips. So the these sections here um like below the or even this edited and then below um some of these- are in different View, apps and I'm, not sure right.

D

C

We can take the router into those View apps and whether that will just work. Maybe they have their own routers, probably not because it doesn't look like they're doing anything without.

D

Yeah but I guess I saw the summary tab, almost the top content of the summary tab as being one and view component, the metrics tab, content being another view component, the timeline, if each of those is a component that wraps obviously lots of little components, um the tasks and the links and the reactions and the etc etc. Then yeah root of view view router would would just work natively out of the box. It.

C

Would yeah and that that would be, that would be the ideal oil approach that may still end up being the solution um so that that's kind of a conclusion, in my mind, of like um Can the router be exported to these other apps um yeah. Sorry.

C

Oh, the the third issue with that is that some of these aren't even in view um they're just in Hemel, so that I mean no matter which way you end up preparing the router. It's not not going to.

D

Work so there's going to be some hacky JavaScript somehow from the Hamel to know whether to show or hide.

C

Yeah yeah that's right um and you can see the existing method and all of its Glory, where.

D

It's so beautiful yeah.

C

So this is I probably should have showed this at the start. This is kind of another benefit of heading. The router is is not just to get the sort of Hesh uh anchor stuff working, but also it would be nice to remove as much of this as possible and replace it with router, but um yeah I think you're you're right and that the the router view component definitely warrants investigation um and I am probably going down a rabbit hole with the the way.

D

After you sort of um bring in all of those issues, uh I think that you know we love iteration right, so I I think.

C

D

um Actually, where you're going, you will will maybe be like a baby step in the right direction to be like. Well, if we add view router and we use view router to kind of manipulate the URL provide the history, allow you to link directly to where you want to go, it's it's a step in the right direction and then at a later stage, if we can leverage route of view and and remove some more of their I, don't know what to call it bastardization or happiness or whatever. Then brilliant.

C

Yeah, um yeah and I think yeah I think both both ways are differently with checking out um and both could be made iterable as well like.

C

um If you went down the approach of of using the router view component, you could initially just leave the scissors and then um find let iteratively go through each of these selectors and and see if they can be replaced. Some of them.

C

That approach definitely would work for sure, because the edit button, for example, is in the same view app so that one could be done, um yeah, it's not in the tabs, it's above, but that's the perfect candidate for the router view, because it's already in the same view app um and tabs aren't taking care of it. So by using router view you would it would be a direct Improvement, um yeah.

C

Yeah, uh do we all we've got five minutes left? um Do we want to keep looking at code, or is it maybe something did we cover all the questions.

B

Yeah there weren't any other questions.

C

A

B

I think yeah, uh so we touched on like interacting with gitlab UI and adding the functionality there where we need it. So maybe it would be useful to talk about this a little bit because yep yeah one option we have is with the tabs you could use if we could update how gitlab UI uses tabs to be more in line with like what we what we want elsewhere, because if we don't want, if here, we don't want um to use URL query params, just like question mark tab equals summary or whatever.

B

If we don't want that here, we probably don't want that anywhere in on gitlab. So then it.

A

Would be useful to.

B

Update the gitlab UI tabs to.

B

Behave the way we'd expect it to everywhere.

D

I wonder if there's any issue with with kind of baking view router stuff into a gitlab UI component.

C

Yeah, that would that that's. My first thought as well is um I guess it would be interesting to know if the get like UI already includes the router for anything.

C

um So we can have a look at the package Jason. uh It doesn't look like it, although it is possible, it's also pulled in from bootstrap.

C

um And we didn't list it as a dependency, but it.

D

Feels like something we might be more likely to make a component in git lab rather than in gitlab UI.

D

um So when we've got stuff, true yeah I, don't if you call it tightly coupled if that's the right word but um yeah, there's a few cool components that one that I've worked with, especially recently. That's like a a tab. You a table list um which has got tabs. It's got counts in all of those tabs. It's got sorting and filtering. It's got like a search bar like the issues screen got all of this stuff built in, but it's it's too kind of tightly coupled to be part of gitlab UI.

D

So it's a component within GitHub. Instead.

C

Yeah um yeah in the place where those live is this view shared um folder and there's actually one for PE as well, I believe, but.

D

I love that idea of having a reusable I, guess: I, don't know what we'd call it, but like a tabs component that massively leverages view router um rather than I, guess: I, don't know how view router really works behind the scenes, but rather than at the moment, I guess all the data's on the screen, but just kind of hit. Well, no I!

D

Suppose it's doing the same thing, but we're manually having to add vifs to all of the relevant components and bits and pieces to conditionally show or hide them rather than using view router, which is, is built for exactly that. Job.

C

Yeah, it's it's one of the difficulties of having something like get lab UI, where it's a third party framework. That, in theory, is reusable outside of gitlab um yeah, and then you have things that sort of cross over into it. A little bit too specific of a use case to include in such a general library or um yeah in the case of the router I think it needs it would need like That Base URL that I was talking about earlier, um so it wouldn't be. You couldn't fully encapsulate it.

C

You'd need to provide some config to it um and at that point yeah you may as well bring it into gitlab, because that that's going to be config about, like the current page, that you're on or whatever and get there I mean definitely code thick. So we reusable in itself but um I think the usefulness is slightly decreased at that point,.

B

Makes sense so if we need to provide a convey, then it should be in gitlab, not gitlab, UI.

A

C

B

A

D

C

Just if it diverges enough from um yeah from the the goal of the of get lab UI, which is like a reusable UI Library.

D

It might be when we it just in a use of a maintainer on gitlab UI.

C

D

No, you know okay and I'm just what it might be, something that, if we kind of consult the team that we find that actually this is something that they'd like in in that Suite.

A

D

I'm not quite sure where you draw the line.

C

um It could even be in the issue list already um yeah be worth like having we look sometime um at this list and like maybe that feature's already been requested.

B

um So ahead of time seems like a good place to stop it. um So I'm gonna end the live stream. Now so um yeah we're gonna, try to do more, live coding sessions, so stay tuned. I guess.