Add tabs_nav helper to render gl-tab component

What does this MR do and why?

Closes #230743 (closed) and #341576 (closed)

How?

1. Creates 2 new HAML functions to wrap the CSS classes of <gl-tabs> and <gl-tab>. These classes can be reused by other pages.
2. 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:

1. Visit the projects admin page e.g. http://gdk.test:3000/admin/projects and switch between the tabs
2. 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.