GitLab CI/CD, 2 Jun 2021

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Design Walkthrough • Display Environment Tier on the Environments Page

Description

Daniel Fosco (Senior Product Designer on Release Group) does a design walkthrough for the environments table and how to tweak its design to better fit new content

Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/322600
Prototype: https://www.figma.com/proto/prnDR7lxJ7mR6zt9YIZfo9/%23322600---Display-Environment-Tier-on-the-Environments-Page?page-id=108%3A148&node-id=108%3A177&viewport=590%2C892%2C0.03813393786549568&scaling=contain

A

Hello, my name is daniel fuschko, I'm senior project designer on the release group in gitlab, and today I'm going to walk you through an issue I'm working on called display environment here on the environments page to start, where is an environment here, an environment here on gitlab is essentially the type of deployment tier that an environment is targeting. What does that mean right today? You can have your production environment, you get a lab called production, but what? If it's called customer portal or has an auto generated name by your system?

A

Well, there's no technical reason not to use whatever name you want, while still having the environment, be the production environment, so the deployment tier the environment here was created as a kind of type to your environment, to make sure that you can name them whatever you want, but to have them, be the production environment or the staging environment or testing etc.

A

So that's the idea today. This already exists. You can add your tier. Where is it well, it's not showing up here yeah deployment to your keyword to your gitlab yaml file, but it's not on the environments page right. So this is what it's about so go into the environments page. This is what it looks like today. It's pretty crowded, some of the content is already breaking you see here.

A

This screenshot was taken on a 16 inch screen, so it's a pretty large screen, but it's just buckling under the weight already and if we add another column, this is what happens right. um The actions at the end are further clipped um and it's really it's not working. So what would be the minimum change required to add this information? Well, we could add um within the the name of the environment, so we indicate environment tier and then we can say that these are development environments, and this is the production environment.

A

In case it's not called production, but what would it take to actually add more information to this table because we might need to do that in the future and in the process fix up some of the issues. So the first thing to fix, um which is actually pretty solid here, is the name of this environment folder. This is essentially a group of these environments um that has a folder structure. You can click show all to go to a page that shows all the 2591 in here, but you can see this label is broken right.

A

This other project has a bunch of environment folders. You can clearly see the problem here, it's even clipped, so essentially we can make a small css change and have this fixed once we do that. The next thing that you can see is a problem. Is that the environments in the folder they are shifted to the right uh to make to give you the affordance that these three are inside this row um opposed to this one which which works as as an affordance but visually.

A

It doesn't really because you see it creates a misalignment in the table. So this is already a very complex area with complex information, lots of information and we are making it harder to read by by shifting uh the text outside of the grid lines, so what we can do to fix. This is essentially undo this padding and just use color to communicate the same thing. So here when you open this folder, you see. The rows, marked in gray, are the ones that belong to this folder.

A

um That is also understandable and it doesn't visually break the table and then the final thing right um this this table is not working at this size. So let's make it full width, um so we can finally add add the deployment tiers and here an optional thing, but I think this row here also visually breaks the table because it it goes away from the visual logic of the table where everything is in a grid cell and has a centered element.

A

So we could perhaps just move this link here to the top, so it's even cleaner and then we can finally have the space to add the tier. Now I don't think the table is necessarily the best ui to show this complex information about environments. We can definitely rethink this in the future, but that would be a much bigger, bigger iteration. So this is a faster and smaller way. We can make this table more readable and more clean and more scalable to add more information in the near future.

A

This is already being discussed and there will be a couple of issues created for this line of work. You can see in the description and if you have any feedback, just let me know cheers.