(meta) Combine settings gear navigation with existing tabbed navigation

Issues

Work on these issues in this priority order.

• 8.16 #25985 (closed) Combine Members and Groups settings pages
• 8.16 #26138 (closed) Combine Webhooks and Services settings pages
• 8.17 #26165 (closed) Combine Runners and Variables and Triggers and CI/CD Pipelines settings pages
• 9.0 #26732 (closed) Combine Deploy Keys and Push Rules and Mirror Repository and Protect Branches settings pages
• 9.0 #26733 (closed) Change cog / gear navigation to tabbed navigation for settings

Description

Right now settings gear dropdown is a bit disconnected from the rest of navigation and I saw few times proposal to make settings just another tab in navigation.

The main problem with this suggestion is that project settings gear has quite a lot of items so we cant fit it all into sub-nav row.

Designs

• General
  • Edit Project
    • Checkbox to enable/disable features, separate page for feature settings: pages, issues, mrs, etc.
• Members
  • Users (current Members page)
  • Groups
• Integrations
  • Webhooks
  • Services
• Repository
  • Deploy Keys
  • Push Rules
  • Mirror Repository
  • Protect Branches
• Audit Events
• Automation / CI - discuss with CI team
  • Runners
  • Variables
  • Triggers
  • CI/CD Pipelines

Additionally we will need to find a place for where members can leave the project.

cc @tauriedavis @awhildy @sytses

This MR is somewhat related: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6299

It keeps the settings gear dropdown available on small screens. As part of this, the settings dropdown joins the other tabs when the window width becomes smaller.

We're still working on getting the dropdown to display correctly. I kind of like the idea of adding the settings as another regular nav item. What if we had all the settings items display as a vertical nav on the left instead of as a horizontal sub-nav? Gogs has a pretty good solution, making it easy to switch between settings items:

Maybe we could also find a way to group the Settings pages a little more?

Just a rough first take on it:

• General
  • Edit Project
  • Leave Project
• Community
  • Members
  • Groups
• Connections
  • Deploy Keys
  • Webhooks
  • Services
  • Push Rules
  • Mirror Repository
• Permissions
  • Protected Branches
  • Audit Events
• Automation
  • Runners
  • Variables
  • Triggers
  • CI/CD Pipelines
• Pages

Mentioned in merge request !6299 (closed)

I've been a big proponent of the tab for a while, I'd be 100% for it!

Mentioned in issue #22978 (moved)

totally down with this although we should figure this issue out as well: https://gitlab.com/gitlab-org/gitlab-ce/issues/22069

As this change would currently result in an extra click + pageload

@dimitrieh: Thanks for thinking about that. Totally helpful to think through the impact and connected issues. However, I don't want to tie this issue with #22069 (closed). While I see the relationship, that other issue is a more global issue, and has more open questions in my mind to be worked out. This issue could end up making Settings more consistent with other patterns, thus making some of the global questions easier to solve, but I don't think it changes our approach to that other issue.

Mentioned in merge request !6709 (closed)

Mentioned in issue #22210 (closed)

As a first step, can we implement @dzaporozhets's idea of using a tab for settings, and group the items according to https://gitlab.com/gitlab-org/gitlab-ce/issues/23007#note_16553595? @lukehowell has already done a bunch of work on mobile settings (https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/6299) and would like to finish the feature

Milestone changed to %8.14

@annabeldunstone @lukehowell We are going to move forward with changing the settings gear to a tab. We just want to take a closer look at the grouping and make sure it makes sense. Thanks for all the work done on this already!!

We'll update the description with the final grouping once it's agreed upon.

Mentioned in issue #22171 (moved)

Mentioned in issue #23303 (moved)

Mentioned in issue #23304 (closed)

Mentioned in issue #23305 (closed)

Reassigned to @tauriedavis

I've updated the issue description with the most recent proposed groupings:

• General
  • Edit Project
    • Checkbox to enable/disable features, separate page for feature settings: pages, issues, mrs, etc.
• Members
  • Users
  • Groups
• Integrations
  • Webhooks
  • Services
• Repository
  • Deploy Keys
  • Push Rules
  • Mirror Repository
  • Protect Branches
• Audit Events
• Automation / CI - discuss with CI team
  • Runners
  • Variables
  • Triggers
  • CI/CD Pipelines

@ayufan @markpundsack we would love some feedback on the automation/CI section and if you have any suggestions on what to name that section. Thanks!

sort of related to that question: https://gitlab.com/gitlab-com/marketing/issues/542

The idea for the CI/CD part here is actually to get rid of all of those isn't it? And get them all in configurable files within the repo like the gitlab-cd.yml file, isnt that correct @markpundsack

@tauriedavis under automation/ CI is related to CI/CD Pipelines, so that should be the group name. Not sure what to call the existing page then. Much of it should move to .gitlab-ci.yml, but will have to also be there at least until 9.0 so we don't break things.

Mentioned in issue #23374 (closed)

Hi, thanks for working on this redesign. I just filed #23374 (closed) today to support the idea of sorting menu items alphabetically. I find it much easier to drill down to the item i need if the items are sorted. If I know the item I need is Services then I don't have to start at the top of the list to find it - I can start in the middle instead. As menus get longer/deeper I feel this becomes more important. I realize there are localization problems with this approach unless the menu is generated programmatically.

@lukehowell Are you interested in continuing working on this issue? We would like to add a new settings tab instead of the gear icon and group the information as seen in https://gitlab.com/gitlab-org/gitlab-ce/issues/23007#note_16937977. As part of this, the leave project portion of the dropdown will be moved (https://gitlab.com/gitlab-org/gitlab-ce/issues/23305) and I will get started on that now.

There may be style changes (ex. runners doesn't match the two column layout) but I think I can work on this as part of https://gitlab.com/gitlab-org/gitlab-ce/issues/22210 after the grouping is complete. Does this proposal sound good to you @dzaporozhets @awhildy ?

@tauriedavis Sure. For the sections of the groups (ie: Deploy Keys, Push Rules, etc) are they broken up similar to how 'edit project' is laid out now? And for the main groups, that is just for the sub nav?

Are there grouping for the group settings and admin settings when these move to tab?

For the sections of the groups (ie: Deploy Keys, Push Rules, etc) are they broken up similar to how 'edit project' is laid out now? And for the main groups, that is just for the sub nav?

Yes, exactly. If any layout troubles come up, ping me anytime.

Are there grouping for the group settings and admin settings when these move to tab?

Not yet, but we'll be working on that next. There are issues for that as well. https://gitlab.com/gitlab-org/gitlab-ce/issues/23303 https://gitlab.com/gitlab-org/gitlab-ce/issues/23304

You got it. I'll get rolling on it this evening.

Added frontend label

Thanks @lukehowell!!

Your approach sounds great to me, @tauriedavis. Thanks!

Mentioned in merge request !6999 (closed)

@tauriedavis I have an MR started for this but was wanting to get eyes on before I get too deep to make sure it looks on track. !6999 (closed)

@lukehowell Yep! It looks like on track. The second level of navigation is missing Audit Events and some of the tabs are missing all the content. But this general direction is correct. Thank you :)

@dzaporozhets Currently Pages is not listed under Feature visibility. The plan was to be able to click into each of the features for those specific feature settings. Was your idea to add Pages to Feature Visibility? Thanks for clarification!

Mentioned in issue #23593 (closed)

@tauriedavis How should Audit Events be handled since it is an EE feature only? Haven't done anything specific to EE before and not sure how to proceed with that one.

@lukehowell It's probably a good idea to just work on CE-only settings. Once there's a finished MR for that, I can open a separate MR for EE

Assignee removed

Reassigned to @annabeldunstone

Assigning to myself while @lukehowell is working on it

@annabeldunstone These issues are all related as well and ready for frontend:

• Replace Admin Settings with a tab: https://gitlab.com/gitlab-org/gitlab-ce/issues/23303
• Replace Group Settings with a tab: https://gitlab.com/gitlab-org/gitlab-ce/issues/23304
• 'Leave Project' and 'Leave Group' should be buttons: https://gitlab.com/gitlab-org/gitlab-ce/issues/23305

Removed ~19492 label

Mentioned in issue #20457 (closed)

Mentioned in issue #24141 (moved)

Mentioned in issue #23134 (closed)

Mentioned in issue #24344 (closed)

Changed title: Suggestion: Replace settings gear in projects/etc. with a tab → Replace settings gear in projects/etc. with a tab

Milestone changed to %8.15

Added Deliverable label

Reassigned to @lbennett

Mentioned in merge request !7771 (closed)

Mentioned in issue #24666 (moved)

Added settings label

Mentioned in issue #24171 (closed)

We have @lbennett assigned to this. @lbennett we are having @jivanvl work on this for this release.

assigned to @jivanvl

created branch 23007-replace-settings-gear-in-projects-etc-with-a-tab

mentioned in merge request !7944 (closed)

mentioned in issue #25386 (closed)

mentioned in issue #19164 (closed)

mentioned in commit 21cf0d56

mentioned in commit 6f5367dd

mentioned in commit 19b4bf0d

We had a call with @jivanvl, so I think it is now clear how we should approach this problem.

@jschatz1 there is still some important backend work that needs to be done here, so it is possible this won't fit into %8.15 milestone since we are going to close merge request window tomorrow.

added ~901060 label

mentioned in issue gitlab-com/support-forum#1357 (closed)

mentioned in commit 46cdc6f1

mentioned in issue #25419 (closed)

changed milestone to %8.16

added Stretch label

removed milestone

mentioned in issue #25985 (closed)

Closing this issue for https://gitlab.com/gitlab-org/gitlab-ce/issues/25985. Please move all discussions there.

closed

In our frontend/ux meeting we've decided to reopen this issue since work still needs to be completed on this and @jivanvl has started a lot of it already. We can use this as a meta issue for the smaller BE issues that need to be completed in order to finish this issue.

reopened

changed title from Replace settings gear in projects/etc. with a tab to (meta) Combine settings gear navigation with existing tabbed navigation

removed assignee

Thanks @tauriedavis. I updated the description + title to make this a meta issue.

This will be a meta issue for all subsequent work. Per discussion with @jivanvl + others, we will use separate issues for each step, so that we can clearly track work piece by piece. The first step is #25985 (closed), which includes both FE and BE work. Engineers will need to recycle any existing code along the way and go from there. (So this isn't merely adding additional BE work. It's revamping the entire developed code so far into multiple merge requests.) And the very first code deliverable is just #25985 (closed).

We can use this issue to track all the holistic designs. Feel free to put the latest designs in the description if the current sitemap / nav tree is not sufficient.

mentioned in issue #26088 (closed)

mentioned in issue #26138 (closed)

marked the task https://gitlab.com/gitlab-org/gitlab-ce/issues/25985 Combine Members and Groups settings pages as completed

marked the task https://gitlab.com/gitlab-org/gitlab-ce/issues/25985 Combine Members and Groups settings pages as incomplete

@jschatz1 + @smcgivern + @awhildy:

We had a call with @jivanvl and @lbennett and @grzesiek and we decided to take the approach of finishing this work according to the issues in the description above.

We agreed that we should just work down the list in priority, implementing one by one.

@jivanvl says he's wrapping up #25985 (closed). I have no problem with proceeding onto #26138 (closed) if everyone thinks that's a good next step and hopefully should be relatively straightforward from the lessons learned in #25985 (closed). Please confirm if that's good for everyone.

Thanks @jivanvl for the updates!

Sounds great to me. cc @tauriedavis for awareness. Thanks @victorwu and @jivanvl!

mentioned in issue #26165 (closed)

Sounds great! Thanks @victorwu and everyone else!

mentioned in issue #26098 (closed)

mentioned in issue #26255 (moved)

marked the task #25985 (closed) Combine Members and Groups settings pages as completed

mentioned in merge request !8430 (merged)

mentioned in issue #26732 (closed)

mentioned in issue #26733 (closed)

@tauriedavis : @jivanvl + @grzesiek + others have been hard at work getting the first three done, in the issue description. (First one is already merged into master! Yay and thanks to all!)

For the final two, I just created issues for them. Could you quickly review them to make sure we've captured everything? We might be able to squeeze them into 8.17, and that way we can unblock all the great work for improving navigation across GitLab, which I'm excited about.

@victorwu Took a look at the issues, they all LGTM

mentioned in issue #26715 (closed)

@awhildy : Can you take a look at the last two issues in the description since Taurie is out. @jivanvl is already planning to work on these, so want to make sure they are spec-ed out correctly. Especially the last one which is the actual new nav.

• #26732 (closed) Combine Deploy Keys and Push Rules and Mirror Repository and Protect Branches settings pages
• #26733 (closed) Change cog / gear navigation to tabbed navigation for settings

marked the task #26138 (closed) Combine Webhooks and Services settings pages as completed

mentioned in merge request gitlab-com/www-gitlab-com!4522 (merged)

changed milestone to %8.17

mentioned in issue #27068 (closed)

mentioned in issue #24688 (closed)

added meta label

removed milestone

changed milestone to %Backlog

mentioned in issue #26869 (closed)

mentioned in issue #26940 (closed)

mentioned in issue #27040 (closed)

mentioned in issue #27145 (closed)

mentioned in issue #27154 (closed)

mentioned in issue #27159 (closed)

I believe the last two are good to go! Added a comp to the last one. Thanks @victorwu

changed milestone to %8.17

marked the task 8.17 #26165 (closed) Combine Runners and Variables and Triggers and CI/CD Pipelines settings pages as completed

@victorwu @jivanvl - Thanks for all of the great work here! When do you think you can get the last two pieces of this work done? We would love to have it done in early 9.0 so we can get it out there, get quick feedback, and make sure it feels great. Thanks!

@awhildy I'm just missing some pieces of the puzzle for #26732 (closed), but hopefully I can get that done soon so we can get that much needed feedback

Thanks @jivanvl! Do you think it is something we can merge by middle or end of next week? Thanks!

@awhildy Hopefully it can be, will work hard on this to get it done

Thank you @jivanvl! Super excited to get this in there!!

mentioned in issue #28006 (closed)

changed milestone to %9.0

@annabeldunstone or @jivanvl are you working on this?

@jschatz1 Yep @jivanvl was working on it; we're just waiting on https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/8731 to be merged

mentioned in merge request gitlab-com/www-gitlab-com!4780 (merged)

marked the task 9.0 #26732 (closed) Combine Deploy Keys and Push Rules and Mirror Repository and Protect Branches settings pages as completed

marked the task 9.0 #26733 (closed) Change cog / gear navigation to tabbed navigation for settings as completed

closed

@mydigitalself @tauriedavis : We've migrated and combined the previous settings in the cog menu into the tabbed style. You can look at all the issues in the description for details. Feel free to further consider how to iterate on the settings pages themselves as we earlier said we wanted to do the nav migration here first.

Thanks @victorwu! Exciting!