Add tabs_nav helper to render gl-tab component
What does this MR do and why?
Closes #230743 (closed) and #341576 (closed)
How?
- Creates 2 new HAML functions to wrap the CSS classes of
<gl-tabs>
and<gl-tab>
. These classes can be reused by other pages. - Updates the
admin -> user
tabs appearance to be Pajamas / gitlab-ui compliant.
Why? The first iteration of the tabs in HAML required many classes to be added directly in HAML files so it was not DRY. After trying to migrate the one more set of tabs, I refactored them into helpers that should support the entire &3983
New haml functions to generate tabs:
Before:
%ul.nav.gl-tabs-nav.gl-overflow-x-auto.gl-display-flex.gl-flex-grow-1.gl-flex-shrink-1.gl-border-b-0.gl-flex-nowrap.gl-webkit-scrollbar-display-none
= nav_link(html_options: { class: "nav-item" } ) do
= link_to _('All'), admin_projects_path, class: "nav-link gl-tab-nav-item #{active_tab_classes if params[:visibility_level].empty?}"
= nav_link(html_options: { class: "nav-item" } ) do
= link_to _('Private'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE), class: "nav-link gl-tab-nav-item #{active_tab_classes if params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s}"
= nav_link(html_options: { class: "nav-item" } ) do
= link_to _('Internal'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL), class: "nav-link gl-tab-nav-item #{active_tab_classes if params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s}"
= nav_link(html_options: { class: "nav-item" } ) do
= link_to _('Public'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC), class: "nav-link gl-tab-nav-item #{active_tab_classes if params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s}"
After:
= gl_tabs_nav({ class: 'gl-border-b-0 gl-overflow-x-auto gl-flex-grow-1 gl-flex-nowrap gl-webkit-scrollbar-display-none' }) do
= gl_tab_link_to _('All'), admin_projects_path(visibility_level: nil), { item_active: params[:visibility_level].empty? }
= gl_tab_link_to _('Private'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE)
= gl_tab_link_to _('Internal'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL)
= gl_tab_link_to _('Public'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC)
Screenshots or screen recordings
Admin Projects Page (no changes)
before | after |
---|---|
Admin User Page (updated)
Side-by-side comparison
In context
before | after |
---|---|
How to set up and validate locally
Example below:
- Visit the projects admin page e.g. http://gdk.test:3000/admin/projects and switch between the tabs
- Visit the user admin page e.g. http://gdk.test:3000/admin/users/root and switch between the tabs
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.
Edited by Miguel Rincon