New layout for project runner settings

perhaps related: https://gitlab.com/gitlab-org/gitlab-ce/issues/20899

Currently we have this grouping for project settings:

Proposal

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

This means that runners is on a page with other settings as well: variables, triggers, CI/CD Pipelines. It is important to have a design that works with different sections so that the number of tabs don't get out of hand. We were going with the this design where there is a left column with a description, and a right column with content. This allows us to have multiple sections. The proposed redesign doesn't really follow this standard.

This is all just mostly FYI. Open to hearing your thoughts/feedback @dimitrieh!

Nitpick, no need for the RSS button. Other than that, obvious improvement here. But Ill leave it up to UX in GitLab FOSS as its not my strong suit.

Made the issue confidential

@dimitrieh You've posted a screenshot of the page with the tokens to a public issue. I've made this post confidential for now. => Tokens were rotated at the same time.

@dimitrieh

I also did post this comment some time ago: https://gitlab.com/gitlab-org/gitlab-ce/issues/21277#note_14262773

I would also thinking about redesigning Runners view. I would concentrate on showing a list of runners, with a current build queue. We could then get rid of https://gitlab.com/gitlab-org/gitlab-ce/builds and replace it with Runners which makes much more sense. Builds and runners view is one of the last views that did not get an overhaul recently. The information that they do present are valid, but kind of doesn't make sense to be shown given that we have Pipelines. There's a proposal just for extending a Runners view: gitlab-foss#18178 (moved). I think that we should move one step further with these changes. This will also allow us to prepare an UI and think how it would look like if we finally decide to manage CI runners from within GitLab.

Mentioned in issue gitlab-foss#24643 (closed)

Added ~897282 label

Milestone changed to %Backlog in gitlab-foss

made the issue visible to everyone

@marin edited the images used in the description :) as i need to reference this issue in another issue! thus made it unconfidential

mentioned in issue gitlab-foss#25430 (closed)

@victorwu @markpundsack i'd like to schedule this as soon as the shift to the new settings as a tab is merged, can that be done? :)

if so I'll finalize design

@jivanvl is currently working on just combining the groups and members into one page. And then subsequently, we will migrate the rest of the elements. But that doesn't change the existing navigation, it just re-groups the existing menu items in the cog menu. When all the pages are migrated, then we will have a final issue to convert the navigation from the cog to the tabs. This was due to some technicality difficulties encountered earlier, so now we agree that this is the right approach. See more details here:

https://gitlab.com/gitlab-org/gitlab-ce/issues/23007#note_20405318 and https://gitlab.com/gitlab-org/gitlab-ce/issues/25985 for the approach.

I don't have any particular priorities after @jivanvl wraps up groups and members, for which section to work on next. If we want to work on the automation section next, and if that's feasible technically, that's fine by me. (But I don't think we would get the tabbed navigation yet (i.e. Runners | Variables | Triggers | CI/CD Pipelines). But I think everything in that one Automation page could be changed as a next priority.)

I'll let @jivanvl comment if this is feasible / desirable technically.

@victorwu I don't mind having the automations section as our next priority, the groups and members section is under review so it might get merged soon™, we just need to go forward with one decision regarding the controllers, and it would be pretty much done. Only one thing that I have in mind (and correct if I'm wrong) is what I should focus after the groups and members section is done. And its just getting the automations section "merged" into one, and from there work on this particular issue on a separate MR right?

@dimitrieh : From what @jivanvl is describing, it sounds like the automations page can be done soon. Please go ahead with the final design.

@jivanvl: Regarding what is next, let's move that discussion back to https://gitlab.com/gitlab-org/gitlab-ce/issues/23007.

@jivanvl : Let's wait until we give @dimitrieh some time to finalize the designs before working on this one. We can work on the other ones if they are priority. Moving the discussion over to gitlab-foss#23007 (closed).

@victorwu @jivanvl the final design (I updated the issue description as well!):

Tabs configs have slightly different button layouts

Explanation like in cycle analytics: (@hazelyang do you approve of the illustration? if not please create an edited version, sketchfile can be found in design repo)

SVG: runners.svg Read more link: url

Tooltips on statusses: changed runner paused color from red to orange to make it inline with "pending" used for CI statusses (@marin are you okey with this change?)

resulting in:

if no specific runners yet and you are on specific runners tab:

if there are no shared runners available and you are on the shared runners tab:

if there are no shared runners or specific runners available and you are on the all runners tab:

Setup specific runners view:

added frontend in GitLab FOSS and removed ~19492 labels

still have to look at

admin version

Potential change for setting up new runners to set it up as a modal: image @tauriedavis what do you think? would a modal serve it better?

added ~19492 label

assigned to @dimitrieh

@victorwu the admin version of the runners page is quite different from the project version. I propose we take a look at that once this issue is implemented ;)

additional thought: @tauriedavis do you think we should display the shared/specific as a label rather (as thats how they are currently displayed in the admin runners panel image ), or do you think its fine as I mocked it? (my thoughts towards that were that in that sense they don't get confused with the other labels, which are runner keywords)

removed ~19492 label

removed assignee

@dimitrieh : Just to clarify, this new design is for the project runners page right? The admin runners page is something totally different and we're not talking about that?

My understanding is that per the navigation design here, https://gitlab.com/gitlab-org/gitlab-ce/issues/23007, the runners page's content would be combined with a few other pages' contents into one page called automation. Does that change anything here with your design? Is that nav design intended? Or was that never finalized?

@victorwu

Just to clarify, this new design is for the project runners page right? The admin runners page is something totally different and we're not talking about that?

Yes, they are related but not the same. The feature set of those two views is slightly different. I changed the title of this issue to reflect this better.

My understanding is that per the navigation design here, gitlab-foss#23007 (closed), the runners page's content would be combined with a few other pages' contents into one page called automation. Does that change anything here with your design? Is that nav design intended? Or was that never finalized?

Mmh i don't know if that was already thought out completely, as i think runners deserve their own view like environments/cycle analytics etc

@tauriedavis @awhildy what are your thoughts on that?

changed title from New layout for runner settings to New layout for project runner settings

Yes, @victorwu is correct. In a meeting with DZ, we grouped runners with Variables, Triggers, and CI/CD Pipelines

See my comment above: https://gitlab.com/gitlab-org/gitlab-ce/issues/24141#note_17826039

Thanks @tauriedavis + @dimitrieh for the background and clarifications.

Let's proceed with the plan in https://gitlab.com/gitlab-org/gitlab-ce/issues/23007, as I don't want to slow down the navigation migration work. Once https://gitlab.com/gitlab-org/gitlab-ce/issues/26165 has been completed, which should be a simple (at least visually) migration that involves combining those settings pages together, then we (@markpundsack) can schedule this issue here separately and independently, since that won't impact the navigation migration.

I've put gitlab-foss#26165 (closed) as the next highest priority in gitlab-foss#23007 (closed), so as to unblock this issue here as soon as possible.

@victorwu nice! i think we can make this work in a combined view as well

@dimitrieh Looks good to me. I just modify something small slightly. How do you feel if we use purple in the illustration? If you think something still needs to adjust, please feel free to edit it in Sketch. I pushed the editable file to design repo.

mentioned in issue gitlab-foss#26165 (closed)

@hazelyang thanks, looks great (removing the third cog and shortening the horizontal lines if i am observant enough to see all the changes :) )! haha i adjusted the color intentionally, but am fine with choosing purple! I thought it would be nice to have a different color for these different features, but being coherent in using the same color is nice too!!

updated issue body with new design from @hazelyang

@tauriedavis do you know who will work on https://gitlab.com/gitlab-org/gitlab-ce/issues/26165 and if this will be considered along with that (i thought you had something to do with the effort of doing that )

cc: @victorwu

FYI: I started adding runner version information to the runner admin page in gitlab-foss!8733 (merged). In that MR I included this note:

Note: I'd also like to show it in the individual runner page (/admin/runners/<id>) but that view already has UX issues, and shares the top of the view with (<user>/<project>/runners/<id>/edit) (project/runners/_form.html.haml).

The project individual runner page (<user>/<project>/runners/<id>) shows a full table with all of the information reported by the runner.

I just wanted to bring this up to keep runner info in mind when redesigning any of these views.

mentioned in merge request gitlab-foss!8733 (merged)

And since the views are related (shared in some places), I'll point out that /admin/runners and /admin/runners/<id> are kind of hard to look at, as far as UX goes.

@JonathonReinhart thanks for the info! I do have to note that this issue does not try to adjust the "/admin/runners view" but just the "project/runners view", which is a little less complicated/demanding

do you know who will work on gitlab-foss#26165 (closed) and if this will be considered along with that (i thought you had something to do with the effort of doing that )

@dimitrieh - @jivanvl is currently working on that issue. The first step is to combine the pages, then move them to tabs. After that, we are going to make sure there is consistency throughout the pages and then start on further improvements, such as this issue. Does that work for you?

Thanks @tauriedavis + @dimitrieh : Yep, I can help drive everything in https://gitlab.com/gitlab-org/gitlab-ce/issues/23007 to be finished asap to get the new nav in.

For this issue specifically here regarding runner settings, perhaps @markpundsack + @joshlambert may have some opinions along with UX.

Thanks @victorwu. I think in general this looks great, only feedback I have is maybe we could have greater visual differentiation on the All tab between specific and shared runners? If you are scrolling through the list to get a quick overview of state it may be helpful to make it a more glanceable attribute.

possibly related (perhaps has updated designs): https://gitlab.com/gitlab-org/gitlab-ce/issues/27889#note_23075279

mentioned in issue gitlab-foss#29131 (moved)

mentioned in issue gitlab-foss#10244 (moved)

@dimitrieh How do you think this fits with the new settings page which includes runners along with several other sections? The design above is kind of optimized for single-section pages.

+1 @markpundsack's question. Also see https://gitlab.com/gitlab-org/gitlab-ce/issues/28451 - for 9.2 we are targeting the repository page but I think CI/CD will be up next so good to think about.