GitLab Foundations, 6 Dec 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Dropdown Migration Example

Description

A (mostly) unedited example of a dropdown migration. From picking up the issue, to creating the MR and getting the pipeline passing.

https://gitlab.com/gitlab-org/gitlab/-/merge_requests/106173

A

Right I think the best way to come up with the instructions for this is to just do one and then rightly write down what I did as instructions, but why not record it and share that as well right, so I have set up a couple of things. I've got my GDK running I've got my IDE over here.

A

um I want to point out something that tripped me up. First, maybe it'll trip you up. Maybe you already know about this, um so these are migrating from GL drop down to GL collapsible list box. uh This collapsible bit through me a bit uh because it's just called list box in in GitHub UI. What's the difference between a list box and a collapsible list box? Absolutely nothing uh we're in the process of renaming your list box to GL collapsible list box.

A

um All we've done so far is basically export it as an alias for GLS box right. Okay, that out of the way this is the list box. It's a drop down. It's not massively complicated anyway. Moving on. Let's pick one from the list, this one is in jira, Connect, I'm, all right, actually reconnect I've, never set that up. I, don't know what that is. I'm just gonna pick something else: uh JavaScript branches components or uh that one looks better. Let's do this one so open it up, assign yourself and let's try and find it.

A

So, let's copy this.

A

A

Here we are, this is the component. Now we have, we see Geo drop downs, import here, okay, I'll drop down. Where do we use it?.

A

Okay, so this is the drop down. Here is a search box by click. I, don't know what that is, I guess we'll find out in a bit I. Don't think this is a search to drop down, so you can saw options, options.

A

No okay, let's get injected okay. This looks pretty simple: um let's try and find where it is easiest way to do this. This is a H1 in there like that, and then we'll know when we found it, because there will be a big thing that says banana, but if you have a scripts branches components.

A

uh Let's try and see what includes this so so I'm just going to drop down Dot View.

A

That looks like the right one branch so drop down.

A

No results found okay.

A

Which is the index on pages project branches? So that's Global project.

A

Branches should be hit there. We are banana right good, uh so let's get rid of that now uh good thing to do as well. If I do Style uh scoped Dot go display, Flex.

A

Per red outline on it, even one more likely up there.

A

No, why not interesting?

A

A

huh That's interesting, so there must be an F on this there is, it should show a drop down return. This dot mode is overview mode okay, so this only shows up uh when we are on this mode and there's your drop down, and it's just these three things. Okay, that's pretty simple!

A

um Let's get rid of this score now, let's take a refresh.

A

Probably save the file refresh, let's take a screenshot of.

A

A

A

A

And then just okay that re upload to page that I'm going to do before, okay right, another screenshots for what it looked like before. So we can just open these up at any point and start comparing them.

A

I am going to rename these to not Charles wedding, because these are not jobs, running photos.

A

Drop down before that'll do all right. Okay, so first thing we want to do. We want to also import Geo.

A

Couple that list box is that right, let's just copy that yep uh put it in here as well, and then so we can ignore that search box and I'm just going to do GL collapse. All this box.

A

And then inside it find another example of this.

A

ah Okay, so this one doesn't have drop down items in so the model is.

A

A

Options, that's not correct. Actually,.

A

We'll just make that test for now, I'm gonna, add in.

A

It's all right date, desk.

A

uh That's selected key okay, I, don't need to do that model is selected.

A

A

Full of options ah right and what that does leave it in for now, total text is.

A

I guess it's selected key conducted key total area labeled by labeled I'm, not sure, let's do that. So, let's just select database so select then becomes visit URL from option.

A

uh I guess we can do selected key I, don't know if that'll update in time. Let's see what happens, we should have two identical ones next to each other. Now.

A

Why is this update.

A

A

A

A

What are some options? Is it an object.

A

Is the wrong one.

A

A

There is an empty object. Queries is an empty object because it hits 1 million. Four options is indeed an object.

A

A

Let's just do music V model is aims.

A

A

I, don't think this will work, but let's see.

A

Yeah, no, that didn't look undefined reading values. Let me.

A

Created what we're looking for? Actually oh I just want, saw options.

A

Where do we set that? Can we inject it.

A

So, options array don't look this, but.

A

I thought: oh just stopped.

A

And let's say that to be so options array.

A

Refresh, why do you keep refreshing?

A

Oh I, see I, see, I, see, I, see key value here.

A

Oh, that's annoying.

A

um Is that possible can I do this with collapsible this box? Let me see.

A

Yeah there's no way that's. This is a night. Okay, let's see items.

A

Value and text.

A

Right, okay, so this is.

A

What we've got is we've got an object that has yeah, that's not great. What we want is an array that looks like.

A

Text, so let me do.

A

The volume and text yep.

A

A

Okay and text from value this is done if that'll work.

A

uh uh Entries this Dot.

A

A

What am I doing this is not real JavaScript. Okay, let me just okay: let's talk entries uh this stuff, so options for pressure is on I feel like I'm in some kind of bizarre interview. ah It's because it's an array of arrays right. So that's not what I want to do.

A

A

Value and text: isn't it can we.

A

No stop all complaining text.

A

A

Text does that work undefined undefined undefined? Why is that.

A

Him next thing.

A

Now, that's why I'm missing pair of brackets.

A

And it's very brace.

A

Yes, okay, good right: uh where are we here? So options are rare them put you in.

A

Do we work now we should text off your text. It's not.

A

um Nearly there nearly there, oh we passed it. Let's see: View collapsible this box, all right.

A

There's an array of zero. So what have we created here? Computed.

A

So, options arrays, open undefined.

A

Because I'm, not returning anything EU.

A

Less yes, perfect right: okay,.

A

So selected, soil method name is actually what I want double text.

A

And then oh, it was all day and you just did it right now, all of the day. Yes, the DT, yes, I, think that works perfect. uh What does rate do?

A

These are the ones that didn't know so just sort of Discovery we've we've still got the V, if uh so the selected keys. So let's saw options array.

A

We want to keep that imagine rate of three and we'll keep that test. Id.

A

A

Is checked his check aim. Don't need that anymore click. That's in there we've got the handle the value. All that should work. We just need to see what these are.

A

uh Oh I've got toggle Aria level, I.

A

The array level by attribute value for the toggle button, providing the string of ID separated by space I, don't know what that means. The attribute value for the toggle button. ah Okay, right, yeah I, see that I guess the total ones are.

A

What is the default on that and the default is nothing okay, I, don't know enough about this. uh It's got me a shout with me for doing this, but I don't know I'm just going to delete it. uh We'll see right. What does right do right around the list Box menu with respect to the toggle button? Do we want to do that.

A

uh No, this is the old one. This is the new one. Let's keep it the same. Let's get rid of that too know. These should be exactly the same.

A

With this rate default.

A

A

I, don't really do anything anyway, right whatever.

A

I'll just create I'll, just update it. Sorry, oh yeah, there we go, we just hadn't refreshed, they are doing exactly the same thing now they both look wonderful and we can now delete the old one and then go back and delete everything we no longer need. So we're gonna need your drop down on YouTube item.

A

Yeah I like to put them alphabetical.

A

Don't need these two.

A

Swap them around what else do we not use anymore.

A

A

There's definitely something else we don't use. Let me start a new branch foreign.

A

A

I need to save it.

A

And I'm still using sort of options, it's almost selected so he's in that the URL we're actually using all of these still.

A

Selected so method name right there, okay I'm not going to touch any of this because it all previously worked.

A

That looks good to me. Let's make sure it matches what we want. Let's get rid of that! Okay! Let's look through this while we're here. Let's add all that.

A

Okay, laptop is happy. I can never remember how to do the proper commits. Let's start with screenshots, though that is still hidden. That's good I'm gonna go around page. That was screenshot one.

A

That's before one before two. We opened it up and update at the bottom.

A

That's interesting.

A

A

Because I'm holding shift that's annoying.

A

A

And drop down before three is this page.

A

And drop down before four is the one where we've selected, but no.

A

Name: okay, mm-hmm, three name drop down after.

A

Good good good good uh and a book.

A

I can never remember how to write this.

A

It's been too long since I've done one. Let me.

A

uh Let's pick random merge request and just.

A

Oh, we don't need to change up with this, so we just.

A

A

A

A

A

That's all that's all. It does right g-o-m-r for my cheeky shortcut to create merger Quest.

A

Yeah I thought left hook was happy and then I'll Eat Right, eight two I should go across. Select yeah I probably should test that you should go before select as well. uh Yeah, okay,.

A

Try again I do like these left hook stuff, because I would have to be a long time to to call that in the merchoice pipeline. Let's take a little longer push but I think it's worth it.

A

A

A

Okay, let's double check this GL drop downs, you'll drop, an item gone collapsible this box and such uh now. Let's stay as close. All this box has replaced these two same here. We need a new sort of options array because we can't use the V4 like we used to um the we've removed all of this stuff, replaced it with this stuff and tied everything back together. We've checked everything worked, that's good edit and screenshots.

A

A

A

A

Pull all of these.

A

Three, four: okay: you know it will be easier.

A

I've got, this is I, don't this is why I dislike about markdown.

A

Before one after one.

A

A

The whole thing there and if I've done it right, which I should have.

A

A

A

A

Repository branches, yeah.

A

A

Research, business search box.

A

A

A

I have evaluated this checklist uh related to that number. Yeah. That's right!.

A

3157, let's save them changes.

A

Okay, all the stuff I do now is wait for the the pipeline to finish, and- and this is how how you do it- that was pretty simple, pretty quick, uh okay, so I just wanted to jump back in because we do have some failures uh and I want to show you the whole thing to show you that you can do everything that finding the issue doing the work, opening the merge requests and fixing the the test failures in, let's say less than an hour right, um so less than an hour of actual work, you need the pipeline to run.

A

So we have a failure. It's an aspect. We expected that so, let's open up a pipeline head over to the tests, tab uh two failed aspect: tests and 11 failed aspect: ee tests, let's stick with these ones, first Okay! So we've got these two, both in Project branches, spec, that's good! That's where we would expect them to be.

A

uh Let's just copy that path to the clipboard and.

A

We need to delete these two there we are. What are we looking for branches when logged in as developer or branches? Page stops the branches by name.

A

Oh yeah, so it sorts of branches by name do this and what's the other one source of branches by all this updated.

A

So if I do uh bin effect and then nope, not sorts of wrenches by now, I wanna copy, the relative path of that and then do line one three four for that describe block should get the same two failures.

A

um While that is running in the background, let's see if we can figure out why this is failing. So what does it do? Visit the page clicks the update button, update date button and then within here find a paragraph called name and click on that and then expect it to move it change the page. So I. Imagine it's something around here: either this isn't the button. This has changed so I think we did migrate. That or this is somewhere else. But let's have a look so.

A

Let's see all right this first one yeah. Yes, it's still a button, I believe update there, button yeah, that's fine, so that should open the drop down.

A

And then we say within the test ID, which was that on this one somewhere, the test, ID branches drop down. So within that we look for the paragraph that has.

A

Update, that's why it is a span, so yeah there's over two failures, so that P is a span there's the other one.

A

Oh, that's! Not what I want to do save that page and rerun the spec, so they should pass now. So it's looking for a span called name and it's going to click. It.

A

See what it's actually failed on the element not found on able to find cssp? That's exactly what we expected so yeah. This used to be a paragraph It's, not a span which makes sense.

A

uh Hopefully it finds that and clicks it. In the meantime, let's have a look at the 11 failed ee jobs.

A

Incident details, escalation policy, I have a feeling. This has nothing at all to do without much rest.

A

I'm going to ignore this, uh oh, this is failing again. Why is it still failing.

A

Ambiguous match on two elements: much invisible, CSS sperm. Why there's one.

A

Oh it's because we include a span with a span. We that's, we shouldn't do that. We should update that. uh But for now what we can do is make our test more robust as well to look for the first one and click that um right.

A

Let's run that again, this should pass so yeah. We shouldn't have a span inside it span. uh Let's see, I've got this open here we do. We have a span inside of span.

A

You probably update that.

A

That's this is this: is you don't need to do this I'm just doing this, so that it's here, I'm going to say.

A

A

And I will assign that to me and just create that much place now and then it's done and we can fix that uh and I'll test the passing excellent. So, let's just make sure there's nothing weird in there.

A

Yep, let's go make this.

A

A

Fixes for inspects.

A

A

uh That's the the whole thing now, let's just see if left hook is Happy should be we're all good.

A

We're all pushed they should update shortly.

A

I think we are now ready for a review, uh because this is.

A

The first one now you know what I'll I'll do a roulette all right.

A

A

Where is he what's his power.

A

So yeah foreign.

A

Could not be submitted check my network connection, okay, let's refresh the page, what's wrong with my network connection, nothing at all. Let's try that again.

A

This is how easy they are. um You know, we've done everything end to end in I'm, not actually sure how long uh maybe half an hour to when I was worth of work and it's in there we've got to go through the review rounds, yet there might be some changes that come through as a result of that. But you get the point right, they're, not.

A

They know a huge time sink, that the hardest thing is making sure the tests pass, and this was relatively easy this time, but yeah just be on the lookout for this. If it's looking for a paragraph element- and we should be looking for a span- but you know hopefully this video helps, it shows you how to debug things when they go wrong. It shows you what to do where to look all that sort of thing and if ever you are stuck, and you have no idea what to do come come speak to the foundations team.

A

We we're here help right.