GitLab Technical Tutorials for Product Designers, 5 Nov 2019

Previous Meeting

⏯

youtube image

►

From YouTube: Contributing to GitLab (Designer edition!)

Description

Annabel Dunstone Gray demonstrates how to contribute to GitLab, from picking an issue and fixing a bug to creating a merge request. Aimed at designers to complete our Q4 OKR (https://gitlab.com/groups/gitlab-org/-/epics/989)

A

Hi I'm Annabel and I'm one of the product designers here at gitlab and in this video I'm, going to do a quick walkthrough on how to contribute to get lab by picking an issue, making the changes and creating a merge request. The goal of this is to help onboard designers to assist with our q4 OKR, which is closing a hundred issues in this epic that we're calling beautifying the UI.

A

So there are I, don't know like 30 issues, love maybe, but sometimes contributing can be a little difficult or frustrating. So hopefully, this video will help smooth things over and we can get more designers contributing to the codebase. So with that I'm going to share my screen.

A

So this is the epic right here. The first step would be looking your way. All of the open ones are in green and you can see if someone's already been assigned to it or not. So you would pick one in this case. I'm gonna walk through this one that I just chose a couple hours ago.

A

um The first step would be to sign it to yourself, so no one else will pick that up and work on at the same time as you and then give it a the milestone that you're currently working on in this case is 12.5, but this okay is going to take place over three milestones, so don't feel too much pressure you had done in 12.5.

A

This issue also has three main UI: bugs I'm gonna focus just on this last one just for the purpose of this video, but normally I would fix everything here in one word request and that's it unless it's bans, you know dozens of files and you have to make a ton of changes in that case, definitely it split into multiple modules, but that should really happen so start off by starting up the GDK, there's documentation elsewhere for that and making sure that you have that latest changes on master which I should- and this is just the way that I work, but it works pretty well I know, there's a lot.

A

You know you create my request straight from the issue this way, but I usually just copy the issue number and create my branch right here, call it a thick sidebar updates, and then you can see that you're on your branch. What this does is when you push to your remote, it will automatically associate the word request with the issue number so they'll be links and it'll, auto close or at least mention it when, when the Marja quest is finally merged, so hope this is still working.

A

So the problem is the issue level and actually.

A

The issue sidebar has is correct, and the epic sidebar has some inconsistencies that we need to fix.

A

Will open up an issue and will open up an epic? You can see here that this little whoops, this little carrot thing is slightly off that's kind of top aligned, whereas on the issue sidebar, it's perfectly vertically aligned within the little section right here, it's a it's a small thing, but when you, when you go back and forth, you can really tell the difference so to fix this I would probably start right inspecting it and see why it's like that. You can look at the issue one and and see how the two are. Different.

A

I took a quick look at this I'm ready, so in this case I'm pretty sure that the problem is its line height and the inline flux. So now you can see that it's very clear line just like the issue sidebar. Unfortunately, that broke me things so I'm gonna start by locating those places where they're broken it's in the epics SAS file, online, 31 and phase BS code. For this.

A

Right here so I'll just comment that out for now and the other problem was inline flex, which is in the sidebar file.

A

A

And comment down went out to just to double check that it didn't fact fix what I think you love.

A

And then refresh the page and it's still aligned properly looks like it is so now. The problem is, these links are all crazy. It looks like maybe they needed the line height. We also have different icons being use. These are our custom SVG's, whereas this is awesome, we want to keep using our SVG. So definitely don't want to change that, and since this is supposed to be a smaller fix, theoretically, this will eventually be fixed properly in the design system, and we don't have these little inconsistencies.

A

But for now it kind of looks like we need to the line height back.

A

So if I do line height at 14, it is aligned properly and that's what it was before. So this it was previously, it looks like it was done on button side bar action right here, which is to global and that's being used on all kinds of buttons on the sidebar. So we will have to be more specific, possibly button link will do it and I'll check if the button link is being used anywhere else, and it's not so I can't just add this there and.

A

So think the boring solution- it's not my favorite but we'll just add button link. So it's more specific and I think we can just remove this. um Just do it for now anyway. So hopefully that will fix the alignment of the two edit icons and this little double carrot. Yeah it did okay, this might introduce regression, so I'm gonna take a look at it, a little bit better or a little bit more a bit, but let's push it anyway.

A

So here are my two changes: um I ran get status to see what the changes were and I'm going to add them.

A

Sure it was so good and alright. Okay. So next is the commit message, and this is one of the things that maybe trip people up their trips people up, sometimes, if they're doing really big merge requests, but we do have a workflow detailed in our Docs and we adhere to specific commit message, guidelines which you can read more about some of these links, but basically danger bots, gonna yell at you. If you don't do it right, so you might as well. Do it right.

A

The first time um you can't do commit message, that's less than three words. So something like add, change, log or update, specs or something it's gonna. The pipeline will fail and you'll have to fix it anyway. So you can read these. You know whenever you want typically for a change of the small I, wouldn't add a commit message body, but me you certainly are welcome to um for now, I'm just gonna write a really small commit message. um What tip you do?

A

Oop baby's kicking sorry, so yeah the baby so really likes a good commit message: update a big sidebar collapse, button too much Bishop's. Ever that's not great, but you know: I can fix it later because I'm going to make more changes and then once you've committed it. You can push to your bench and.

A

Then we do a super handy link if you hit command and hover over it, it'll take you straight there, so you don't have to copy and paste. It's really helpful, and then here is your Road request, form um way. I like to do it and again, this is just me. You can see how it's already linked correctly, because I I named my branch name with the issue.

A

We shouldn't be closing issues anymore automatically, because we want to verify that they are fixed in staging before we close the issue. So I would just change not to mentions I'll sign it to your cell, just a you, keep track of it and delete source parent when we request is accepted and if you have multiple commits you can choose to squash them. We only have one right now and I usually prefer to manually squash anyway, so I can see what the commit message will be, and then you can see that the description is.

A

It's got all these check boxes. So the first item is what gives this Marja quests do and then there's a placeholder that you can delete and fill in with your own information in this case it'll. This will eventually have multiple fixes, so I'm going to put them in bullets. um Updates the collapse carrot button to match issue sidebar actually do for the clean lines, and some things like available in the intesting aren't needed. Security, for this particular fix is definitely not needed.

A

I'm gonna leave it the delete sections that you think aren't needed like this or you can just leave it. Didn't you say if you could just leave it, but um it does give you some check boxes for the conformity and one of them has changed. A lot of entry always need that for a UI fix, so I'm going to go. First, I'm gonna update with screenshots, so that's been weird request, review or knows exactly what changed right off the bat. Then it'll just make the whole review process a lot faster.

A

You can use this markdown table, which is always really held full, so you can see the changes easily and change this this to before this. To after- and this is me after since this was still showing my changes- I'm going to just take the screenshot of that and then go back to the master, so I can see the little version and a tip that is get check out will go back to whatever your last branch was so every time you do it. So we'll just go back and forth.

A

It's really really handy, and if I refresh this, it should be misaligned again yeah, it's really subtle, but it gets clear and then take a screenshot here.

A

And both of them is this before that's before.

A

A

And now it's nicely aligned, you might want to add an arrow or something pointing to it if it's not clear, because it really isn't but I'm just gonna leave it like that. And then you submit your merge request.

A

The next step here would be to add a change log. You could have done this while you were still making your changes and committed all of it at once, but the change log does include a merge request. Number option that it's nice, if you fill in so you'd, have to do two commits regardless as far as I know, so you can see the change. Log Doc's are linked and you run.

A

I'm not actually saying how you run it, but I already know so go back to your branch and then I would add a change log entry that would say um vertically aligned collapse, button, I'm, pathetic sidebar and it was a bug, fix all choose two and then you can see that that file has been added. I'm gonna go in and open that file in vs code, and you can see, there's a merge request section or whatever you call that here and I'm going to add. My merger quest number.

A

There so now I've got my change. Log entry um and I would just add it and again you have to commit it. So in this case it doesn't really matter what your your commit message is going to because you're going to squash it in this case I'll just do that change log um squash, your commits you can take a look at your get log and you should see your latest two here. Here's my first one and here's one I just added for the change log. We obviously don't that doesn't adhere to our standards and danger.

A

Bot will not be happy because it's only two words. It's also not helpful in any way to anyone to see. Add change log um so I'm going to squash that one into the first one.

A

And because they're just fine so I'll just leave it, um you can google and you can see how to how to do that and it doesn't have to be in them. It can be in whatever text editor. You want and then I'm going to push that change and you have to first push it because you are essentially rewriting your commit history.

A

And now, when you go back to your merger class, you should see still one commit, but two changes or three changes in this case. So you can see one commit and you've got your change here, change here and your change log entry, so I can check your blog entry done. Other things to do. You can check all these links out and make sure that you're adhering to our style, guides and stuff database guides that won't apply definitely test in supported browsers.

A

If you think that a change might be broken in IE or something like that, we support the latest version of all modern browsers, like Chrome, Safari and Firefox, and also edge and I want to say I Al Evan. But you can yep right here. You can test it in those and make sure that nothing crazy is happening. So what I would do now is wait for the pipeline to run hoping it will pass because I haven't done anything that would warrant a spec failure as far as I can see.

A

If there is, you know just check out why it failed and you can fix it or ask a developer for help if you need to, and once the merge request or once the pipeline passes, feel free to reassign it to whoever shows up on the danger, bus and reviewer roulette. An example of that would be.

A

In this marriage request, reviewer roulette is here and they've suggested a reviewer and a maintainer for both front end and back end. This is just front end. It should only suggest front end people, then you can also see some of the people who can review your request. All right here. um So I think that kind of covers everything, and this was all if everything kind of goes as planned. A lot of things can come up with. You know: GDK problems or I, don't unintelligible.

A

Lot of things can go wrong, so feel free to reach out to me or any of the front-end developers. They're super helpful, but I might make another video, I, guess or I should I was planning on doing a blog post anyway, with some of the stuff written down and can probably add a troubleshooting section as well so yeah. That's it thanks for watching.