GitLab UX Team, 31 Aug 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Iteration: Release Management - UX/FE sync on Share production environments across projects

Description

Rayana and Nathan review UX proposals for the MVC https://gitlab.com/groups/gitlab-org/-/epics/4276

A

B

So um I want to review together the issue 24.56. I think you have it open there, but I'm going to sit in here. Anyways yep, which is a group group environments, group production.

A

B

I'm not sure exactly how we're calling this um and I updated the acceptance criteria. Let me also open here and share for um just for the sake of this recording um based on our latest discussion.

B

So I don't expect that you that you're up to date with it, because you're probably asleep when I did that.

C

Earlier today,.

B

So yeah this is about it: dynamically population, populating the group environments, page with production environments, and I saw some of your questions nathan and uh let me just go down here quickly because I think it's nice to start with these pieces um about what are we showing and how we are grouping these things.

B

um So your question was: um why are we interested in showing on production environments right now, and I reply here that, because for the mbc just production, we had a, I think we had a discussion where we would say yeah. We show also the review um environments at this page, um but then, as far as I understood, it's just production.

C

And that's my I guess my question behind that was: is that, because that's all that users really care about on the screen that they don't really, they only want to see production or did we think if we show everything, that's gonna be way too much information. So let's only limit it to production.

B

I think it's a little bit of vote. um Okay, I think for the sexy mbc production, so we can deliver. Maybe a small thing that we can iterate on um yeah.

C

B

Also, when looking at, um let's say the release and what they're interested in seeing and validating right now, it's really the production environment right, of course,.

C

B

You have the review apps and then uh the review environments and the docs, but I think production is really the start. Yeah.

C

That makes sense to me, and I'm totally fine with that. I just didn't want to if it might be like a tiny bit more work to make to filter only production versus just showing everything.

C

um So I didn't want to like make more work for us if we were just trying to make less work, but if that's what the users want to see that makes that makes total sense to me.

A

B

That's a good, a valid point for us to discuss as if as if it's too much trouble to just filter the production we can. I don't know just have like what we have now in the project: environments page where you have you know the expanding collapse um for review for everything else.

C

B

We wouldn't change so much, but I think it's really what we want to focus for the nbc.

C

Yeah, I I think probably just filtering production is fine. I don't think it'll be that much more work, um so I'm I'm definitely. Okay with that.

B

Cool and then I looked into your comment here about how we are grouping them or how we would group these environments, and I think my understanding and that's I have a question for you there. My understanding is that um we're gonna get the url right, the dynamic url or these environments. We say: okay, if they all share, I don't know something: dot. Gitlab.Com they're gonna show in that one group, regardless, if it's and and also if it's in under production right, there's two filters. There.

C

B

And I saw your comment here that you added group- and I want to understand if this is like a new suggestion, or if you already have this type of setup.

C

Yeah, so that that was just a suggestion. That's not currently part of it and my thought with that is that people might, I don't know if people are already using this url for things and they wouldn't want to actually group by it, and if so, I was saying we could add another key, for example, group to add a grouping mechanism, but I don't think we should go that route.

C

To begin with, I think just grouping by url makes sense to me, um especially for the nbc, so I I think just doing that is a good first step.

A

B

Cool that was a bit confusing because I'm not.

A

Super familiar.

B

With all the structure- and I thought that we already.

C

B

Something else in the group, because when I was first uh working on the mvc, this is at the epic level right and then I put in.

A

B

Examples so we have project one that could be, for example, pajamas and projects uh ui, and they both have the same url. Let's say whatever.

C

B

Dot com, so this is what this is. What would show at the group level right in this case? Let's say that is production.

C

Yeah, that's actually a good example, because I hadn't really considered.

C

I forgot that you can build the url dynamically with variables um we might need to get in touch with the back end person to see how that would work to see if those would actually be grouped together or if those would just be considered different, because.

A

C

Be different once the variable's been interpolated.

A

C

So that might be a good example, but but either way that was kind of my. My thought is that we'd group, by url.

B

Okay, I think sean is going to be working this. So let's open him here, because I also wanted to give the example in the nbc, because now it's at the epic level- and I know that having too many sorts of truths and too many explanations of how we're going to do that.

C

B

So let me add just a note here.

A

B

And then the third point, when I was reading, your comment was like imagination, because you mentioned them of showing multiple uh environments.

C

B

And I think we can follow the same pattern that we have now like 20 items and then paginate, since if we only do production, but if we do production plus, then maybe we can just reuse the current pattern from the um from the environment uh page and go back here where you have like a little more.

B

C

B

C

Oh yeah, okay, right and I don't actually know how the pagination works on this page like is it 20 items in total, including inside the folders, or is it 20 items and a folder counts? As one item.

B

The folder counts as one item. That's why there's no pagination like global.

C

B

um Which I think, if we go only with production, I don't think we should use the show all I think we should be just like. You know everything that is under production or gitlab, but if we, if we make more complex, I think we're gonna have to either use this pattern or re-evaluate the whole thing, because it's not gonna.

C

Be yeah, I like the idea of keeping this page and the other page a similar experience, because ideally you're familiar with one, and it just feels like basically the same page at the group level.

B

Yeah, so let me show you my prototypes because then we can.

C

One annoying thing about figma is, if I, if you're, not logged in there's this big banner that shows at the top there's no way to dismiss it.

A

B

So would you, but you have an account because I ask listen.

C

B

Because jake, okay and then I I'm allowed to share things with jake. But maybe.

C

B

C

Maybe need to figure out how to log.

B

In yeah yeah all right, so let me quickly go over here then. Just tell me exactly what what I have in the issue.

A

B

um Okay, so this is the flow for the acceptance criteria right for what I detail here. So in the group level, we're going to add a side menu item for operations.

B

I think actually, the the configure team is already working something similar. So you need to check if they're already going to deliver before but anyways we have operations and once you click, you have group requirements.

B

I'm calling group environments for now and I want to get the jackie's feedback here, because.

A

B

We are it's not environments per se, because we don't have really a code base at the group level. So I want to somehow.

C

B

um And then, if you have nothing, let's say you don't really have any production. So it's an empty state. We're going to need an illustration here, so I think we can uh just the first pass. We go without an illustration, just static text and then I open an issue in the bitlab design, because this needs approval and it might take a while.

B

So for now you cannot create anything at the group level. It's really empty state, some copy, there's a placeholder and click more information. You go to the docs.

C

Yeah, we could even include some in that page. You could say: group environments are like include more instructions in there, so that they wouldn't have to necessarily jump to the documentation like uh environments that our production, our production environments, will come here automatically and are grouped by url or something just like a little some little snippet to help them.

A

C

Not to go to the docks, but up to you.

B

I agree with you. I was a bit like okay, hud, rich, very hardest thing. Is I'm not making it.

C

B

Too complicated right.

C

B

I agree: it'll be nice to give some more context about. What's going to happen here once you have right.

C

Yeah yeah and how to make things show up since you can't add directly yeah.

B

Awesome, so if you don't have anything empty state, if you do have some items, we pre-populate with um with this data so that'll on this page. Let me go step by step, live data description, so everything is grouped under production. So we show the title production here and a counter of how many uh environments there are.

C

Which, in a way, would.

B

Be the counter of projects, I guess kind of.

C

Yeah right, I was wondering if that is that kind of the top level folder or it would be the individual environments inside each folder, yeah.

B

So this would be the top-level folder, but because we don't really have anything.

C

B

Order in production, it's kind of like a static so right now, if I go back to the environments view um here right, so instead of showing just this information, we show the project where I don't know, release comes from.

A

B

The only extra thing here is the project detail, which is the avatar the name, so you click you go to the to the project overview um and all the other things are the same so deployment you hover here. You have information, you can click and go to the commit details um and also you can see each individual deployment.

B

You can also click the I and see the detail of that deployment, which would be a page like this and also, if you don't have deployments it's the same same thing as today. We have today just no deployments yet any paginates and the only I think the big thing here is that, because everything deploys to a single url, then we have this button here for view deployment, um and I just added the url so that users know that hey. This is actually where it's going to be uh displayed.

C

B

um And that's pretty much it at this point.

C

B

C

B

Yeah I was a bit like. Okay. Do we need to add more contacts here? You know explain. What's going on um for first time, users.

C

I think the fact that we're mirroring the regular environments page so closely. We because that we don't have to give too much extra context, because anyone that's using this page will already be familiar with the regular page.

C

So I think we can kind of rely on their knowledge of that page. That's my thought.

B

And at this point you cannot really do anything other than seeing the deployments and seeing the details of the environment, but I think once we have like the ability to create uh group environments at this level or you know, stop deployment roll back things just be work or release we're going to shape this view to be something uh yeah.

C

B

Yeah, you can see us taking.

C

Yeah, I can see us taking actions against the whole, the whole environment, like rolling back all the sub projects at the group level. So I could. I could see that being useful.

B

Yeah we have an issue for that: jackie open uh just a placeholder so that we start to start discussing.

A

B

So that's it for this page and the next one we just where all the two tips are gonna appear.

C

Oh yeah, nice yeah.

B

Because I was like I'm not gonna write this, so I'm just gonna put everything.

C

Yeah, that's super helpful.

B

um And then there's a couple of differences here um from what we have at this level um because yeah, let me go back actually not everything has the correct hover applied like the colors, etc.

C

uh Okay, great.

B

So don't bother even uh looking at the current one, but then.

A

B

That's just the whole world overseas.

C

B

I'm just not entirely sure about the eye icon because we usually use this icon for.

B

Like private issues,.

C

Isn't it an eye with a cross through it yeah.

B

C

B

The future is not uh if it's. If the issue is not private, we showed this icon, but I wanted something just that could.

C

Communicate like.

B

Real the details, you know, but.

C

B

We'd normally use text for that and I didn't want to use more text.

C

C

Yeah that that button to me almost would make me think I'm going to go jump to the actual live environment like I'm going to go view the deployed thing, but I guess we do have. We are using that other kind of square with the oh, you can see my cursor.

A

C

One there um we're kind of consistent with that one, so maybe people will kind of know. That's the button to jump to the actual environment.

B

Yeah, I think initially I had the engine button, the first settings or details, but you can.

A

Already configure.

B

Anything in the details.

A

B

This environment.

C

B

I think we can go with this for now and then I'll I'll create a little less feedback from other designers and see how we can sure it's such a small right thing that we can review in the merge request.

C

Yeah right: is there an environment icon like do? We have an icon? That means environment.

B

That's a good question. Use this for operations.

A

I have no idea.

C

I don't, I don't think we do and I remember seeing one.

B

Let me punch up here. Sometimes I do.

A

C

Oh apparently,.

B

We do so- maybe I can use this here because.

C

You could maybe maybe use that one okay.

B

Good suggestion I.

C

I have never seen that one before so I wouldn't know what that means, but maybe we will be the first.

B

Should people just lost them no idea.

C

B

Yeah this is, uh I think this is from the new pack, the new icon pack.

C

Okay, nice and.

B

C

A cool looking icon.

B

um I really like sigma, because you can just throw something in the button and then you just adjust the size.

C

Oh yeah, that's awesome. Yeah.

B

Yeah, I also don't know what this means, but if we have a new icon for that and if it's in the svg we can use it. If not.

C

B

We created, or whatever later.

C

C

A

C

um So overall, this looks super good to me. I do a couple minor questions um when you say production here. Where does this name come from because right now.

B

C

Sorry, what was that.

B

I think would be a static title for now, because since we only support production.

C

Okay, but where like, where would the user enter that, or is that always or it'll just always say, production.

B

um Here's where you enter, but when we create a new environment um or maybe.

A

C

Because right now we're not yeah right now we're not! I think our idea was to not use a new page like this and instead to just dynamically, create them. So there's not really any opportunity for the user to enter a name.

B

No, so this would be space two but kind of like related to the comments that you made here, where, if you can say that it populates from the url and the name is production, maybe we can use this name and make a match or not.

C

Yeah, the only thing is that, if we're my understanding is that we're filtering by production, so everything on this page kind of by definition will have production yeah as its name and then there might be some that have different urls. So we don't want to group those, so that would mean like basically everything would be named production.

C

So I'm wondering I guess what I'm wondering is that if we should replace that production name with the just the url, because that's the that's the only piece of information we really have at the moment.

C

Exactly yep and then that's because since that's the kind of the grouping mechanism.

A

Yeah otherwise,.

B

C

B

And then, maybe later, if we say that yeah we are organizing this uh by both environment, name and url. If you want to filter that to have this.

C

Yeah that makes sense to me.

C

And do you like the like in the in the gitlab yaml? It's it has a protocol such as https. um We can definitely chop that off for display purposes um like that, if you'd like that, otherwise we can also just spin it in there, as is whichever you think,.

A

That's fine. I.

B

What do think of making this clickable or is it too much.

C

Yeah, it could be.

B

This is actually a title. This is actually an a stream.

C

We do have it would do the same thing as the view deployment button there right.

B

Let's leave it on the under the boy button because later on, if you want to expand um and have like the expansion.

C

B

We cannot have that.

C

Right, that's a good point: cool yeah! I like to look at that.

C

um Let's see if the other very minor comment, I don't know if we're going to use graphql for this page, which I don't know if we've decided yet, but if so, we probably won't be able to use this style pagination similar to the discussion we have about the releases page you'll probably just need to be previous next.

B

Awesome, oh and another thing I put in the acceptance criteria that we would use a table component just because we have titles headers for business, okay, um but yeah, I'm not sure how ready the component is.

C

Yeah and I'm not sure I'll have to look at if we want to eventually expand and collapse. Like you mentioned, I don't know if that's going to be compatible with the table component.

B

Because everything that we ship now it needs to be pajamas ready. um So if you say that yeah this we're gonna need to.

B

Fix something for tables: that's a different story.

B

We'll just find the.

B

My goodness can someone fix this okay.

A

B

I don't think it's integrated.

C

Right, I think we have a some kind of component already implemented, but maybe it's not the government's complaint.

B

Yeah, I just don't think it's production ready.

C

B

Yeah yeah, it's really a simple table. So maybe, if you can.

B

The same list type thingy, because I'm not sure exactly what component other than the table we could use to get this thing.

C

Well, I think they're really not doing anything super fancy with regards to the table like it's they're, not filtering or sorting or anything. So I actually think that that component we have now will work.

B

um And if it's not responsive, we can just open an issue later and then uh in the second phase, because I think the only thing that would make this table a bit more um smart is that things need to be ordered by and last updated. That's it other than that. It's pretty.

C

Exciting, and will we do that, how will we go about triggering that sort change? We.

B

C

B

C

B

Because I don't think you can even start with this table, can you.

C

No, I don't think so. I was just looking at that right now see. If I could, I don't think you can.

B

No, you need to use the the sorting components that it's like external and then apply with the list.

C

B

Let's not go there, okay, because if you say that you know since it's auto-populated anyways um and it's always just like an appointment uh in the project level where things are ordered, you know by yeah, less updated.

C

B

So we can follow this yeah, exactly everything.

C

So ordered by most recently updated at least to last updated yeah and then, if they don't have any deployments, probably just alphabetical. I guess.

B

Yes, so let me add this to the acceptance criteria.

B

And part environments.

C

So last question: I guess this pagination here. If I would click next, let's say I have more than one url. So I have production.getlab.com and I have production.getlab.ui.com or I don't know some some different top level like kind of folders.

C

Does this pagination paginate within within a single one of these lists or.

A

C

It kind of just the top level if you know I don't know, if I'm not explaining that very well, I.

B

Think you understand similar to what we have here right. If you have more.

C

B

C

That actually jumps into that.

B

Oh yeah, that's true.

B

I don't think that makes a lot of sense. To be honest, this navigation, I would expect it to.

C

B

More within the same view, so that I, if I still want to see my review box or production like good, if.

C

I had to choose.

B

I would suggest maybe for the future, let's say that he under gitlab docs, you have multiple. Let's say that uh not bitcoin box, but one of these is a review right. I mean review dot gitlab.com, for example, and then you have a cell right. um Whatever you have something here and you have graduation right.

A

C

Yeah, well that.

A

C

You want to have a go ahead.

B

Now I'm saying that you always will have: oh, no, that's true! You have like vertical review and then, if we follow the same logic, that we have right now will be something like a few more a little bit more.

A

B

B

So if you click here, for example, two you will go to the next page with you know, with the verb like last year. Okay, I'm also confused.

C

Yeah, so I think that's what I was uh my guess is that patent nation actually won't be a huge issue in this case, because, if we're only showing a production environment like we're, pretty heavily filtering this down, so I can't imagine people would have 30 different projects that all are considered production under the same url, so I we could probably even get by without doing any pagination to start and then add in pagination, once we kind of figure out how how and where to add it.

C

I think that's why that the current environments page has that kind of weird showmore system is because we're kind of showing two levels yeah of things here, and so it's not clear which level we're paginating against and I think it in the environments page it patches against the top level so review. The review. Folder is one and then the next folder is another item, so we're actually paging through those.

A

B

Because in the future, I'm just thinking of how, if we limit the number of items you see here same way as they do in this view right, it's a max of three in our case would be three projects. Let's say that we have same thing: we double click, this interaction. What I'm.

A

Thinking right.

B

Now is that in the future, if you're a release manager- and you want to have the ability to not just a low back or redeploy or stop these environments, but you also have approvals so not showing like the at a glance like environments or products or deployments that are pending. Approval would be kind of weird, but I think you can solve some of these problems later on with the filtering sorting.

B

You know, you can say, show, only production show only review, and then you paginate against those things in the list and then.

C

B

Or, instead of being like a bucket for production, it's like production is a column.

C

B

Okay, we can, you know we decide how we want this. um This means.

C

Yeah, so I guess for the for the mvc.

C

Based on these ux mockups, I would say we're paginating at the top level. So like production.glab.com is one item and if we had 20 of those for 21 of those, I guess then the pagination would show and then we're not paginating the sub.

C

The second level we're just showing everything.

B

C

B

B

Because I think also it would be nice to have a plan, or at least have a proposal. We can uh test this against some users of you know if we had, uh if you're going to support more different different environments, um but then it would be weird to just apply this to the group level view. Maybe we can uh already talk.

A

B

Yes, to have a plan to clean up the other page as well, the project level page.

C

B

A

I'm happy that's cool.

C

Yeah overall, this looks really good to me. I think this is this. Is a nice feature because it's like we can just follow so many patterns.

A

C

So it's it should be relatively straightforward to develop.

B

Oh and one thing, another thing is thinking um the loading of this page.

C

B

We use the one that, uh from this view,.

C

Just a spinner.

B

And then maybe we can do a ui polish later to just create a skeleton.

C

It's not too much different from a development point of view, one or the other. The main thing is just coming up with the svg to use as the placeholder for the skeleton.

A

um Yeah, the only difference is that, if.

B

We I'd rather just use uh the one we have now to not create more. You expect I I still have to tackle the one for the release page and.

C

B

Go through approval with the ux team, so I'm actually doing it this milestone. um So.

C

B

We can have it as a separate issue.

C

Yeah, as I was looking more in that this is kind of a tangent, but the that the docs about the skeleton loader do mention that it's for progressively loading content.

A

C

We're not really progressively loading anything we're loading everything at once, so.

A

Maybe it doesn't.

C

Maybe it doesn't make sense to do progressive loading like a skeleton loader here so.

B

Yeah, I think that was a recent update and also um I've seen other teams using different skeleton loaders. They are also using it for graphs um and.

A

B

I've seen some design proposals there, um but it's not very consistent from where we're using them.

A

B

It's a bit of a mess right now. That's why I always push them. Let's not do it because.

C

B

I look different from what we have in other pages.

C

B

Awesome cool awesome, um I'm gonna, I'm making the updates to the tradition description, but I think the current prototypes are ready to be posted. There.

A

Yeah sounds good yeah.

B

The only thing that will stay still, the others called is the empty state um illustration. So I'm gonna mention there that we go with the tax only for the mvc.

C

Sure, oh, you know one more question for you in you commented on this issue earlier today about you mentioned for now. This mvc would not allow users to access a single url as application. What is that? I don't know if I fully understood that comment, yeah.

A

Let me show the screen yeah, because.

B

um On jackie's initial proposal- or this one I mean her initial proposal was just about populating the page, but then we are. We are grouping these environments because we want to provide the users with our customers with the url so that they can show to their end users right or the marketing or whatever. This is the url, the production url for gitlab. Everything is into this one thing, but.

C

There was nothing you.

B

Do that really say at least in jack's initial proposal? Let's say we're going to show the url where these things everything is deployed at the same time so to the ui that translates as this button here.

C

B

And I think that if sean comes back and say yeah too much for the mvc, we just remove this each single deployment here.

C

Yeah I I can't imagine that would be an issue because that's how we're going to be grouping it anyway, so we're going to need that information regardless. So I I can't imagine too much more work to to throw it to the front end. But that sounds good to me.

A

Yeah, I wasn't so sure, because I didn't really see us.

B

There was some discussion at the epic level about this, but no real decisions made.

C

B

Days ago, here, which I was talking about, what the future is.

C

B

But I didn't see like here's, how we are going to do it.

C

I feel like, since our last meeting we decided- I know maybe shawn can confirm, but I feel like. I think we decided not to restructure how things are associated as he was proposing, and instead just kind of use these existing structure and just make things visible on that page. So those that diagram might not be relevant anymore.

A

B

I'm a bit confused looking at this, I was like okay. Does this mean that is, it is future embassy or it's future.

C

B

You know a couple of months from now like.

C

After the nbc yeah.

B

Because if so, then you don't really, you just provide these environments that are grouped by url that they share this in your other group level, and then you can see okay for all these things, here's how it would look like against production, but.

A

B

Really have this yeah less back end can deliver this one single yeah.

C

I would probably personally I'd probably leave it there and then, if yeah, if sean says oh, we can't do that. Then we can take it off, but I think it makes sense to leave there for now.

C

That's awesome, yeah. The one thing we should follow up with john about is a dynamic url when it's, what has a variable in it, how we're gonna handle that um and how we're gonna, if we group in that case, um do you want me to ask about that or do you wanna follow up.

A

B

Gonna post here, but if you can follow up with him in details because you know the technicalities that'll be cool.

C

B

Yep and I'm just gonna I'll post this comment here, just as a.

C

B

So next steps for me I'll, publish um this to the issue and then I'll check with um configure if they're doing the operations menu. I know.

C

They are right.

B

See the link this morning actually about it.

C

B

See actually is this one, so I'm not super familiar with it. Yet it's in the backlog, so I think you can just get in touch with them with.

B

C

Interesting so they're they're really adjusting it at the um at the project level.

B

Yeah- and you can also see this one where they immediately talks about having a releases um menu with the for the project right.

C

A

And they're, using.

C

That that icon there yeah.

A

The environment.

B

But in microsoft um I'm I'm putting everything under operations. So let me actually share with you here, um because I'm working on the three-year prototypes for releases and.

C

B

um I'm adding everything.

B

This is just this to work in progress, so this would be like group environment, you know, and oh yeah, so, okay, here's a good example. This is how I was doing for the vision thing you see production and then you can expand collapse and then you have review review docs.

B

Similar to what we have here,.

B

So this is a different prototype, we're not implementing. This is just for marketing, but then you can see here in the side menu, I'm just putting everything under operations.

C

Right right, nice.

B

Yeah, but for now we're just gonna have uh environments or group environments.

B

Let's see how the configure teams decides, because they're already doing investigations right.

A

C

Cool that's great.

A

Thank you so much nathan, I'm gonna, uh push the prototype and I'll leave a comment.

B

uh For sean, but if you can follow up with him, that's super cool and then I'll give you the.

C

Great thanks so much all right, see ya.