Simplified Repository Settings page

Resources

FE @mikegreiling

Description

As part of https://gitlab.com/gitlab-org/gitlab-ce/issues/28451 this issue describes improvements to the Repository Settings page to simplify and group the myriad of options into a more readable format.

Proposal

• Each section of the Repository Settings page should be collapsed, with a button to Expand the settings
• Each section should have its own Save button
• The page should have an Expand All button for those wanting to view details of all settings
• CMD+F should still find and expand settings (http://codepen.io/MadLittleMods/pen/NdQVOq)

Links / references

Meta issue: https://gitlab.com/gitlab-org/gitlab-ce/issues/28451

Documentation blurb

GitLab's project settings have grown over time to a point where it's often difficult to find exactly what you are looking for. We are starting to simplify these pages to make them easier to read.

Design

• Deploy keys is moved to the bottom of the page.
• "Expand" button and "Close" button have the same width.

All sections are collapsed	Push rules

Pull from a remote repository	Push from a remote repository

Protected branches	Deploy keys
New design for the protected braches table (#24308 (moved)).	New design for the empty state: #22170 (moved). Deploy key icon --> icon-deploy-key.svg

added ~19492 ~897282 labels

cc @tauriedavis as discussed to provide UX

added settings label

added feature proposal label

This issue raises a point about the deploy keys section:

• https://gitlab.com/gitlab-org/gitlab-ce/issues/29936

In certain situations this list of deploy keys can be really long and should be put to the bottom of the list to reduce the impact that the length has when trying to find the other items.

assigned to @hazelyang

Redesign the page based on the design from #28451 (moved)

Collapsed

• Deploy keys are moved to the bottom.

Push rules

Pull from a remote repository

Push from a remote repository

Protected branches

• New design for the protected braches table (#24308 (moved)).

Deploy keys

• New design for the empty state: Enabled deploy keys for this project(0) and Deploy keys from projects you have access to (0). (#22170 (moved))
• Deploy key icon --> icon-deploy-key.svg

Thanks for picking this up @hazelyang !! I'm curious about the two widths you are using. It looks like the full container is on size, but the content within it is a smaller width. What are your thoughts there?

@tauriedavis No problem!

I'm curious about the two widths you are using. It looks like the full container is on size, but the content within it is a smaller width. What are your thoughts there?

I was worried the paragraph overlay the button (like A), so I limited width of the content. But I think the width of the content is a little small in the design above when I see them again. Maybe B is better. I'll update the mockups later.

A

B

@dimitrieh Currently, the width of the content is full (985px)(example). If the description copy is too long, it will overlay the button. I proposed that we have 40px margin between the content and button. What do you think?

Thanks @hazelyang, that makes sense. It's a little strange since the expand/collapse buttons aren't the same width. What do you think about using an icon? Will it be obvious enough? We could also make it so hovering over the entire top section (title, info, icon), expands and collapses so the hit target is larger.

(This mockup is from the general screen since that's what I've been working on).

icon-collapse-content.svg

icon-expand-content.svg

@tauriedavis Thanks for the idea!

What do you think about using an icon? Will it be obvious enough?

I worry perhaps it's not easy to touch the expand and collapse icons on small size screens.

We could also make it so hovering over the entire top section (title, info, icon), expands and collapses so the hit target is larger.

You mean people can also click the section to expand and collapse, correct?

changed milestone to %9.3

mentioned in issue #28451 (moved)

Thanks @hazelyang, that makes sense. It's a little strange since the expand/collapse buttons aren't the same width. What do you think about using an icon?

@tauriedavis @hazelyang could the button not have a min-width in order to make it the same size - although would have to think about how this works for i18n when the button text could be variable in the future.

@hazelyang can you put the latest versions of the mocks into the description in a table form so it's clear what needs to be implemented, please.

Yeah, we could make the width the same size.

i18n is going to bring about its own craziness of design challenges. @hazelyang lets start with your mockups to get this improvement rolling. Thanks!!

removed assignee

Updated the issue description.

added Deliverable label

assigned to @mikegreiling

created branch 30378-simplified-repository-settings-page

mentioned in merge request !11698 (merged)

closed via merge request !11698 (merged)

mentioned in commit maxraab/gitlab-ce@dddc54aa

mentioned in issue #33489 (closed)

mentioned in merge request !12027 (merged)

mentioned in issue #34060 (closed)

mentioned in issue #37794 (closed)