GitLab Pipeline Authoring group, 28 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: 2023-03-28 Pipeline Authoring team - Design discussions

Description

Pipeline authoring team meeting

A

Recording but thanks for joining our official first design discussion for the pipeline, offering team and we're waiting for more Engineers to join the group, and should we just jump on the agenda.

A

Cool so I added a couple of items because there are some design changes after the discussion. This is more like fii or announcement, because you were all involved that I guess so. The first item is about the page nation, and then we decided to use the key step page page nation, and that that impacts the design, because originally I use this numbered list as the page Nation on the original design. But since after this discussion we had to change to more the compact one.

A

So this is something that we just need to keep in mind and then I also added the link to the relevant discussion. Just for me to keep track of everything. Here's Kasha joining that's good.

B

Yeah, so about that item, I think that I mean I, don't know if it made sense in comments, um but in short something that I was not aware of is that we both of these components, um work differently. So the reason why we say we use the compact one, but it's technically not entirely correct, because we have two Divine component.

B

We have uh the key set pagination and we have just a pensionation component, and so when we use uh offset pagination, which is what we use, uh we don't use here, uh yeah we use the key set imagination. What we're saying is um you load the first number of items like 20 items and then, when you click on next, what you're essentially saying is I just remember where in the list I'm at and give me the next 20 items right.

B

So the reason why you can't have numbers is that, if you're on page one, you can't say give me give me the page from this and this index, you only know where you are right now, so.

C

B

Couldn't say, skip 20 items and give me after that, if you're.

C

Not ready to handle.

B

That, whereas um the offset imagination is where you get, you create the cursor ahead of time. So.

C

B

Say give me page four, which is why you can click and Skip around and we have in our doc. There's some I.

C

Mean we have two back Engineers.

B

That probably know me more about this than I do, but uh from what I've read he said, pagination is more performant than offset pension, which is why most of the pages in gitlab used for this next and not the actual pages.

A

Okay, so I think my assumption for now is so for now, as an MVC, we will have only simple search like text search, okay, I'm, going to find the kubernetes relevant components in the list. So for now like it should be. Super super fine. But let's say there are big fan of cicd catalog from the big customer and then they want to Stack like a thousand of components repository there and then maybe, if that's the case, it would be slightly more complex and then maybe we need to start thinking.

A

Maybe switching to the number list from that point, but yeah I, I, agree to all of your points refer for now to be totally fine.

B

Yeah, it's going to be interesting, even in terms of user experience, to figure out how to use the list, because the only advantage of having the numbers is skipping pages right is being able to go. ah I'm gonna go to page five like you're, going to move ahead, but if you're, if you're using the catalog page as we use search engine, we don't tend to go more than a page or two or three and then just change our search, criterias right. So you're, just like page one.

B

It's not there page two, it's not there page three is not there. They're not gonna, go through and say: oh I'm gonna go in page six or page 40 and see if that's where right. If, if they're sorted alphabetically, you might kind of be like okay I'm in a maybe I'll go, but then you would just search like you would rarely want to skip ahead. I feel.

C

B

So if that's not a concern, then the previous next is fine and um I'm going to implement as a follow-up, the page X Out of Y with that, so we can still have the total. So you know how long you have to go through.

A

Yep yep yeah, but.

B

You can't skip ahead.

A

Sounds good yeah, yeah, I, I, agree and then like Anyway from the next situation and go on. We all have more complicated filter like they could probably filter by it's a verified by gitlab for the public catalog or like who who is authoring this like who published this and released it to the RCI CD catalog? Is it has attacked with like deployment or is it like front-end or is it for the back end? So I am pretty sure we can provide good experience.

A

I can see the dog.

A

Excuse me so yeah, so that was just one thing that we need to remind and uh I'm moving on to the next topic. So there was a really fair point that avile raised on the design issue and originally on the MVC design I used.

A

So maybe it's better for me to share the screen right learning this find the design issue. Why have this you know and just give me one second found it.

A

So this is the list and then it was originally by updated date. Time by the author, I I followed this pattern because we have this in the product list because to me it's the list of projects so I think it's better to make consistent user experience. Okay, okay, updated by someone. Maybe we can use that, but um I'll be able to put it out very, very point that like yeah, actually, we can also do like released when as well.

A

So there are a couple of discussion around that I think also in this issue and then the other issue of why it's not going to the notes?

A

A

So this is the one that she raised the point and then there are a couple of conversation in the back end this year as well, and then we agreed on, like the text, should be now changed to release time by the username. So I updated the design here. But if I didn't update somewhere, then that's my mistake and then, if you find some gap between the grid design between the design that you see, figma is the the latest version.

A

So you can always reach out to me as well so I just wanted to heads up on that. Do you have any other questions?

A

Can I move on to the next point sure um so so I just didn't literally have enough time to respond this to this ping, yet today, but I think it's worse to bring this Sub in. This call. So probably has one question so when we hover over the username here on what info do we need to show in the tool tip?

A

What do you think I think for now, when we hover over, we will see this username card with the fulfill with the profile picture.

A

What was it um I mean something like this right.

A

Let me check okay, they don't have name.

A

They don't have name here, but probably they have okay, so I think what probably means by tooltip. Is this the signee blah blah blah and do you think it's doable or do you think it should be part of the next release to have the soul tip? Can.

B

You imagine it really depends on on the benefit of having this so right now. uh Obviously,.

C

It's a clickable.

B

Link so if you'd like to go to the file, that's clear enough um since it's the last update, I I, wonder.

A

That's released.

B

So I'm, really sorry, yes, just just went through that friend come on, um so yes, I'm, not sure like in an issue. It's like. Oh, this is the assignee. So this is why you're saying this name and.

C

B

Would it be like the committer then, what's.

A

B

Release so it's the user who did the first release, so it would be like the other of.

A

The component, okay.

B

um Well, I mean offering might just say harder and then the name and the tag right kind of like what we do with issue with adjusted. It's not it's not really complicated. If we already have the name, uh we can just ask for the time or it is like one more field in graphql, so I don't think it's.

A

Okay, if it's like free.

B

Or easy, and it's just added, and if it's not, we can just do it in G or something.

A

Okay, I I think From ux perspective like this is not the most crucial information that they need to see because I know that once they click on the stanuki lab they'll go to this profile and then they'll know like who, who pushed these changes to the catalog, but of course it's nice and if it is doable from the front of perspective. Of course, we can always include it in the receipt. So I I can provide a quick markup if that's doable, and then we can have another issue link to the sorry.

A

Where is it the this Epic yeah.

B

We might even we might even be able to uh add it straight into the issue.

A

B

Yeah I think this is fine, like Riley will tell me if she disagrees because she's the one working on it so I'm.

A

C

Having somewhere.

B

For her um but I think it I think it should be easy enough that it's it should be in if it's not in it would just be because the graphql query doesn't support it. Yet so we ship without it, and then we do a follow-up.

A

Sounds good and both goes through two three.

A

So I added here yeah but then like I'll, try to respond to this issue, so that, like probably also can have some time to think and never responded to us. Okay,.

A

Hi guys I don't want to chime in.

C

Yeah I just have a quick question on the process here because we seem to be talking about uh product decisions um and I'm, just wondering how much of this gets decided by the PM, uh because, like I guess there is like the ux element to it. I'm just wondering what is um like what what's the process is this like? Whatever we decide now, will this be still checked with the PM or is like how yeah sorry.

A

So mostly if it is the bigger changes that, of course, it's better to start from the PM designers discussion with the engineering team and that come up from there but like I, think having a tool tip is minor compared to other big feature, and then this is more relevant to implementation details because it wasn't written in the requirement in the Epic. So in that case, I just consider as it's a minor ux, UI Improvement.

A

In that case I, just like discussed with the engineer if I need to I, also bring in the back-end engineer and then, if we decide, then we can just talk to I. Okay. This is what's the decision that we made it's a minor thing and then he, if he agrees, then we can just good to go, but sometimes it's like. Do you really think it's needed?

A

Then it goes to another round of discussion which is happening um in the CI CD catalog um slack group. At the moment, I can also share that select message. So that is exactly what's happening. There is a longer discussion around publishing flow and then that's like hey. So that's what like, Laura and I discussed and I also discussed with the front-end team. So maybe we could do that and then I a stove like what do you think and then he circled back like well.

A

We need more decision from the back end front end for many different reasons, so that sometimes happens.

C

Yeah so I guess the reason I'm asking is that, like all these different little uh tweaks and nice to haves- and probably you will push out the deadline like so um I'm, just curious whether um the deadline is strict here or do we prefer to shave off some of the scope in order for us to like keep the deadline and deliver it faster, or are we fairly flexible with what the MVC is, because something like a tooltip, in my view, is a fairly nice to have type feature but yeah, but we are kind of talking about it for the mbbc, so that that's?

C

Why that's? Why I'm asking.

A

Yeah I think this is a really great question and then from how I view this is more like, so it if it is blocking the full front-end effort, then I wouldn't ask like okay, let's, let's not like, let's include this part of MVC, because I don't want to release due to adding this tool to and that we need to release like one Milestone later now, of course not but like. If the engineers are comfortable and of course, as a uxer, I want to always provide like better experience with more richer interaction.

A

I always offer that and then, if you're up for it, then like. Why not to have it? But if this is a huge blocker? No, no, then it's fine.

B

To add on to that um the way the catalog is moving forward currently with the the deadline and the work is that um the front end is going to be done before API work, which is planned for 16.1 and the front end I I, don't want to commit to anything but like if within the next two weeks will be mostly up for the catalog page, so that we're gonna look into all of the smaller ux Improvement, and that was the goal actually was to start it earlier than what was originally planned.

B

Because um a discussion with Mark and at the beginning, front-end work was planned to start in 1511, um but I started in 15.10 one Milestone ahead, and the goal was so that we could get to that place where it was shipped and working and then add, error, handling, ux Improvement, so that the MVC felt a little bit more mature, especially because we're probably involving customers faster than what we expected.

B

um I think it will be good, because these are the kind of things that annoys literally everyone. But yes, it will not push up today like if it did I. Would here. I would say: are you sure you want this? It might be pushed out of scope and uh we're always doing it in the fluid fashion, where, for example, here I'm like oh, this is, if Friday is like it's five minutes, then she'll do it in the same AMR.

B

If it's not it's an issue and that issue go at the bottom of the list versus everything else that we've already discussed and is already an improvement and we're just gonna go through, and when the deadline comes yeah we did all of the MVC plus X percent of the knights to have.

C

Sweet yeah sounds like you're smashing it that's great awesome.

C

uh We can't hear you.

A

How how about now.

C

A

um So yeah thanks for asking great question because, like that's always like sometimes I struggle like between the product and then the engineering and discussing the implementation, because as uxr I always always want to add more but sometimes I need to talk to check in with jobs check in with the engineering team. If it is a visible enough, so yeah so I am glad that our front-end team on boarded, like all.

B

A

So that we can add more nice um uxl improvements, part of them. We see um and there's one read-only item that I added. So there are unmoderated solutions, validation that happened later so that was like on Friday I, released the test and then I analysis is done on Monday. So the good news is so. We offer three different options to testing these things out.

A

um So it's about the placement and then the naming. Then the placement was the lab navigation and then the and it's inside the pipeline editor. The other option was on the left side, navigation, but it's on the on the Explorer tab, which is kind of new, and then the the project navigation performed the best so far and we're waiting for the feedback from the foundation team. So you can check out the details in the dovetail I. Also added my 12 minutes. Summary video I didn't expect it.

A

It went that long, but it's 12 minutes so maybe better to just went through the dovetail inside and then, if you have time you can also watch the recording. So this is pretty Sony item and I always want to include some design fashion after from discussion. Fred, do you have any other questions.

B

No, this is good. It's.

A

C

And Bittersweet also.

B

Because it was exactly how I originally added it to the navigation item and so I know I will I will have to do an MR. That's literally just copy pasting. What I kept in my in my git stash just being right here we can, we can now add it back as we expected it to be. It makes sense. I think cicd is a well-known subcategory and.

A

Catalog is visible.

B

Enough to Warrant its own items.

A

Yeah, the the fun fact is like we added one question before showing the Prototype like so okay. This is our product concept and then your gear lab experience user.

A

Where would you expect this feature and then I think almost half of the user exactly mentioned that, like you know, like you, have that menu under like Ci CD, like it's near like pipeline somewhere, I like to see it somewhere there like cicd menu like that's good, they didn't even see the design, but they imagined that, like okay I wanted to see somewhere there, but we also have to keep in mind that, like in some of the cases, maybe the foundation team might ask us to do another round of validation.

A

If that's the case, we need to spend some more time. If that's not the case, then we're good to go and I'll I'll keep you posted on the team, Channel and also the catalog flag Channel as well.

A

um Where is it so? I have a really weird problem today on my brow.

A

A

Sorry, I have back to backs meeting today and I'm a bit weird I'm I'm Pro I'm, having trouble finding my fake mouth file. So that's very weird, sorry about that, but I wanted to show you some of the icon exploration and wanted to gather your feedback. So this is not super urgent, but something that I like to get your feedback on.

A

Let's go one second,.

A

Okay, so I'm going to share my screen. Real quick, so I know we're almost at time, and you see my fitness green okay, so I, so they have Branch system like git, like, like you, do on the killer, so I open the French for the cicd catalog and then so so I want to hear your thoughts, It All Started from the theme like bookshelf books and books.

A

So this is the option, one that I thought of like okay, like maybe we can have more straight line Styles. So this is the variation, but this is all for the option one. But this is more. Like you know, paper catalog is standing, so this is option two, but the option three is more like books inside the bookshelf is stacking, but in a different position- and this one is more like a paper like stacking and then why I put this because this is pipeline passed.

C

uh uh I, remember in your um in your in the issue that you've shared in a previous meeting. There was this icon, I didn't I, didn't feel confident enough to vote for it, but.

B

C

Thought it was like a spot on icon and I. Don't know, I, don't think it's one of these. Oh I was a little bit. Do you remember where which uh issue that was.

A

um Yes, but I think so. This is the French version and then I have more 30 version that I actually worked on. So probably it's a.

C

Being like such a catalog to me, okay, yeah, that was definitely my favorite. Sorry I, didn't comment at the.

A

Time no, no, no worries like this is like why I'm asking you a question um feedback now, because I started from this. But my problem is this is looking like this, so this is not a a 100 view, but this should look like maybe like the size on the real screen, which means the icon itself is fixed to 16 by 16 pixels. So I tried this, probably I have somewhere here or I. Think I remove it because I didn't like it um so, but I can give it a try.

A

um But I cannot provide like this two lines because it's not visible in the 16 pixel and 16 pixels rate, but maybe with just one line I'll give it a go again, but I couldn't find it because I really didn't like it. If I don't have it here, then that means I didn't like it. So.

C

I mean all of them are good I, just I, just primarily like that one, oh okay,.

A

But I'll give it a try because, like it's not like super urgent item that we need to deliver on this Milestone, so we we have some time. But do you have other thoughts like this.

B

A

B

Opinion, of course, no I like I, like all of them, I think um up close I, really like the last one um yeah but zooming out. It is a little bit harder to read and when you zoom out the first one on top is clearly at least in terms of pure Clarity is.

A

B

I wonder if you could merge the two and had like the check mark in the book, if that was too much if it would like pollute, but I really like I, think it in my brain after, like a long time in CI. That check mark does indeed ring Pipeline, and so there's there's this. Oh okay, it's something to do with like multiple pipelines, which is why I like the last one.

A

Okay, so it seems like I make uh so maybe I like to just quickly do the dirty version of it. I wouldn't normally do that, but I already make every line like combined as one shape, so I cannot touch that much for now. I hate it, but but just in case, let's see how it looks.

A

But with the black color, is it black.

A

A

I, don't like this no no possible, but I can remove it later.

B

Yeah, this is just so that you remember to explore it, but we don't need to see it live and it might not even look that good. It's more. That I was very curious to see if it would still be readable.

A

We cannot just uh alignment, but something like this without the line. I guess.

B

A

And then this white square goes to the top and then the bottom so that we don't see this vertical lines or maybe we can just leave it there, because yeah.

B

You could leave the line, therefore I you couldn't have like on the check on one side as well, not sure if that would look good because of the angle of the book, it might feel weird because then it's not following.

A

B

A

And then we can have the straighter version here: okay, I combined the line everything because I want to get it merged soon, so this is kind of like it's, not a code convention, but we also have this illustration convention, so I kind of combine all the bacteria's line already. So it's kind of difficult to modify for now, but.

A

So I ate like this, but my problem is: it seems like a little bit like a monitor. That's.

B

Exactly what I was about to say really I was like. It looks more like a monitor now than a book. Don't have that at the middle line.

A

Yeah because of the middle line is gone so I think that's the reason why yeah.

B

Yeah and even on the left, it's not even as clear.

B

About it around the pipelines.

A

B

Am I looking okay well well, thanks for checking no worries, but I do it's.

A

Hard to work on this.

B

Yeah they're they're all pretty interesting, mm-hmm.

A

And then I could provide more examples and then so, once we got approved for site navigation, then I'll also keep the example of like how it looks on the nav, with the icon, of course, like it's, the sub Mac sub navigation, so we wouldn't have the icon, but I just like to give you the feeling how it looks on on the real context.

A

So I could also provide more details later but yeah thanks for all the feedback I'll play around and maybe uh come up with the suggestion that with the new symbol and then, if I really didn't like it, then probably there's a chance that I know I give up with that, but I'll try once more.

A

All right. Do you have any other questions? I know we're slightly out of time. Okay, thanks everyone, um so I'll stop the recording.