GitLab Community tutorials, 15 Nov 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: 2022-11-15: Release group pair programming

Description

Today Andrew Fontaine and Andrei Zubov have paired on doing some refactoring of a front-end code summarised in this issue:
https://gitlab.com/gitlab-org/gitlab/-/issues/378770

A

Okay, so I think we are alive, so whoever is watching happy to uh have you on our pair programming stream uh with uh Andrew. Today my name is Andre. uh We both work in for this group in gitlab uh and today for our pair programming. We have picked a nice small issue that we maybe would be able to finish during the session, or maybe not, but we at least definitely can start.

A

uh So uh the issue is about the refactoring. There was a piece of uh code or a component that basically manages the new deploy token.

B

A

And uh some parts of it, uh the country, didn't follow the single source of Truth principle and that led to explain some bugs uh in the process of extending the component. So what we try to do today is to streamline the combined implementation and make it basically using the single source of Truth uh to avoid any potential issues in the future.

A

uh What it is about, uh let's just first check the manufacturing issue. uh This is it by the way. It is also tagged as good for new contributors. So if you ever search for something to contribute to gitlab this label as a good place to start uh so in this issue, basically, uh the problem is described and in verticular two parts of the code that could be interesting and there are also listed uh the components that uh we most likely have to touch.

A

uh Apart from that, there is also listed the steps to reproduce uh the issue manually and how, in general, to check if everything works as um as needed and like here in the very bottom, there is a implementation guide. So if you need some tips and tricks how to start or the general direction, what to do uh it is listed here.

A

So let's read it out a good way to start history Factor only the part that is responsible for scopes, uh the check boxes of the input, so, basically what this problem is about. We have this component, the deploy token um model I, think right anyway, uh and part of it is the list of uh check boxes that are uh basically that we need to collect these inputs and send them to the backend uh to properly create deploy tokens with the right scopes and those Scopes can be added in the future.

A

Probably so, in order to make it more streamlined, we would like to basically have in the code someplace that would uh declare it will describe what Scopes do we have and based on that, we both generate components in the UI and wire them to be uh to their stpi call to send the data the backend. So that's what we gonna do you have any comments. Andrea.

B

A

Let's get started, uh I already checked out the branch over here in this, so we have the scope in which we will be working. uh uh Silicon, basically Dive Right In. Let's start with the files that are mentioned here. It's the new deploy, token you and the corresponding speaker.

A

So uh this is the code.

A

A

A

Oh yeah, very good point: is it better.

A

Okay, amazing great, uh so then this is the code file and then you deploy Duncan spec. It's gonna be our um spec file that we would have a closer look later.

A

uh So uh the the code right now, what it does we have here, the default data that would populate the data for our.

B

A

uh With a bunch of uh Boolean Flags over here and some other data that is used in the component uh here, it's basically populated uh or the initial screen.

A

And in the template uh over here, it should be bound to uh to the actual UI elements. uh This part yeah right, so this list of check boxes is basically what we are uh looking for.

A

And basically, uh those are connected to these uh flags that we have read repository, read registry write registry, read package registry and so on. So those are pretty much the same that we have over here. So those uh Six Flags.

A

um Apart from that, they also so in order to render a checkbox, what do we need? Actually, um we need to know to know the property to which it should be bound and a bunch of other fields like ID name and uh data QA selector, so here some of them are pretty consistent uh uh or maybe all of them are pretty consistent. Let's see if it's like that uh amazing, so then we basically can uh I think structure it anyway.

A

That would allow us to feel all the necessary information with actually uh uh not too many extra data fields inside the code and uh also we have this um initial rendering here bound to.

A

A

B

Guess it's like.

A

Feature toggles Maybe.

A

Right so uh I would basically send have the following plan uh to have a structure in this file that would basically describe what kind of check boxes do we have and just having these um Fields uh basically listed so uh like.

A

Id name and data query selector. So since I didn't name are the same and maybe just can have one and we maybe can derive the ATK selector um value from the name uh and then also uh a conditional uh showing whether the checkbox is present or not. uh And uh then, if we.

A

We can have it basically in our default data, uh based on that, we would render the check boxes if I'm not wrong. We can.

A

Also use the data binding to the kind of nested elements right. So, for example, like can we have an array of objects and we could be bound to one of the properties of this object.

A

Yep, that makes sense, so that would allow us to render the check boxes and then the next step would be to actually properly uh properly construct. This object over here so instead of uh manually listing all the props, we would basically just collect all the check boxes uh that we have random dynamically cool uh and in order to test it uh here, I have basically test project open and, let's see how we can actually go. There I think it's in the CI CD.

A

All right, okay, so that's a different!

A

A

And uh that's also by the way, gives us a good opportunity to see how we can set the the feature Flags uh for our local environment right so deploy tokens. uh That's the thing! So right now we see three deploy tokens or like three different Scopes over here and in order to enable them we need to uh connect to the rails, console.

A

uh Which is rail, C.

A

And then what we do is.

A

A

A

Didn't get that right, uh yep I think so.

A

A

A

All right, so that should do the trick for us.

A

A

Yeah good points.

A

Yep think it is.

A

Sorry, what do you mean.

B

B

A

And now, let's see.

A

So this is our token.

A

Those are only these three.

A

Like each registry enabled so maybe I actually need also to enable this guy.

A

A

If I move it to data, will it over be overridden as a prop.

A

Like if, if I do this.

B

A

Right: okay, now it's there.

B

A

A

All right uh and I think we still needed the.

A

Jungle anyway, uh so then, let's get started with uh their factoring. uh First thing: let's create the data structure that will describe us uh this uh Scopes build. So what we can do is add here.

A

uh Something like.

A

Scopes that could be and array of objects, I, guess which, which should have ID.

A

A

I, don't know is enabled or is shown.

A

A

Or else um like the power.

A

Okay, so then, let's try to.

A

Mimic it over here.

A

So if I remember correctly, The View syntax, we should use this V4.

A

A

Okay, so it basically repeats the the component that we're looking at.

B

A

That makes sense so then for Scopes, something like that right and then it's gonna be em.

A

B

A

A

Like what's like that, no.

A

Oh man, could you remind me please.

B

A

Yeah that makes sense.

A

Man I need more of you practice.

A

And this guy is.

A

Let's go party again.

A

A

A

A

A

Right makes sense, uh uh so something like this.

A

And text Yep: this is something with me. Yes,.

A

So actually, what's what's that called.

A

It was deploy token deposit.

A

And then I'll text again.

A

B

A

Where is it actually coming from.

B

A

Uh-Huh right got it, but then yeah we can just basically move them somewhere here as well. It's accessible or all datum.

A

At least some of them I guess right, because uh otherwise we wouldn't be able to bound them, so they has to be here for the rest of the stuff right.

A

I am makes sense.

A

Which I cannot blame and then here we can just.

B

A

All right, uh then help text would be.

A

A

Go to that first, one.

A

Beat repository help.

A

And the text uh is actually hard-coded.

B

A

All right so then,.

A

Let's see if that worked so I'll just comment, the rest of them.

A

What don't you like in this.

A

All right, okay,.

A

Oh man, it's gonna be scope idea; okay, just like interact nice.

A

A

Also, how do we render the text here.

A

Okay, that makes sense.

B

A

Let's get in shape, man.

A

Nice all right, so we can actually already see that this guy is rendered, and that looks fine, let's see if it actually.

A

Bounce to rvm, so what we can do is.

A

I guess we can just basically put a break over here and see if.

A

A

Now, let's make sure we refresh.

A

Right, we are there, no.

A

A

All right, okay,.

A

It's shown through all amazing. It just works.

A

Also works also true, uh that's great. uh Then we can actually uh just fill in the missing data.

B

A

So this is our.

A

Rest of the stuff uh ah yeah, and we also need to not forget about the uh the visibility stuff.

A

Yeah, that makes little sense foreign.

A

This is the token registry.

B

A

Could be bound to.

A

So Props, we also don't have here right.

A

But if we, for example, make it like a function for the f.

A

Yeah actually good very good points.

A

Yep makes sense.

A

um So then it's props, Dot or just enabled.

A

Which is three.

B

A

Just three: oh.

A

uh And texts beat registry.

A

A

A

This one is more done this guy.

B

A

Will learn my shortcut.

A

A

Let me try just three help.

B

B

A

My package registered here.

A

And I think I've missed one one. Two three.

A

Oh then, that's only five actually was. It was six no.

B

A

So this one, let's play talking to read the Repository.

A

Read: registry: all right registry read package registry right package registered yep all right.

B

A

So, let's see, let's.

B

A

Yep how it works.

A

Cool so then the next step would be to rebuild.

A

This past request body.

B

A

Okay, so it's basically.

A

This guy is uh this one and then or those we would basically.

A

uh What did you say.

A

Okay yep, so we can do this uh scopes, which would be the object and then what we can do is basically.

A

Iterate over this scopes.

A

A

Okay, right yeah, uh we will pay more attention to chat, but uh about the Scopes. uh So.

A

um ah But then you need to kind of you need to construct the object from Center I. Don't know, I mean uh if you want to do it in one Loop without this part, so just return the object that you want I think we can use reduce that would kind of do the same, but.

A

But since we're out running out of time, I just want to try if that actually works right um and then we can make it better a bit later.

A

So then, here we have the.

A

Actually, this is also a bit awkward that so that we would need to rename the text because it doesn't uh uh properly convey the meaning, but so far, let's call it text, because text is also what is here right. This is exactly the same uh and then so that's what should basically bring us the proper uh object with the proper keys right, and here we can just structure scopes.

A

A

A

I guess that should kind of do what we want and then we can make it right here.

A

Yep, let's see all.

B

B

This is the next step.

A

So Scopes look.

A

Oh, come on, you show me, the yep I think that basically should bring us to.

A

A

A

Looks good, oh, let's refresh not at the top uh and actually create some added one.

B

A

But I think that actually also shows that works yep. So I guess the new token was created pretty awesome. So then, let's do we have time. Actually we don't write.

A

All right, uh then, uh basically for those who have been with us uh thanks a lot uh next time, our streaming experience will get even better than today uh thanks a lot Andrea for uh super helpful tips, uh I'm still super Rusty, where's, View and uh yeah streaming doesn't help uh with anxiety, so yeah thanks a lot really cool, and uh hopefully next time uh you could drive and I will be the one uh making suggestions.

A

Great see you next time, in a couple of weeks, bye, bye, everyone cheers.