Migrate admin projects tabs styles

This change migrates the navigation tabs from Bootstrap
.nav-tabs and .nav-links to GitLab UI class and updates the appearance
so it is compliant with Pajamas.

Changelog: changed

app/assets/stylesheets/utilities.scss

@@ -263,3 +263,21 @@ $gl-line-height-42: px-to-rem(42px);
 .gl-opacity-7 {
   opacity: 0.7;
 }
+
+/**
+  Note: ::-webkit-scrollbar is a non-standard rule only
+  supported by webkit browsers.
+
+  It is added here to migrate components that use
+  scrolling-links() mixin from `app/assets/stylesheets/framework/mixins.scss`.
+
+  It should not be used elsewhere: it may impact accessibility as well as
+  add browser compatibility issues.
+
+  See: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar
+**/
+.gl-webkit-scrollbar-display-none {
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

app/views/admin/projects/index.html.haml

 - page_title _('Projects')
 - params[:visibility_level] ||= []
+- active_tab_classes = 'active gl-tab-nav-item-active gl-tab-nav-item-active-indigo'
 
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
-  %ul.nav-links.nav.nav-tabs
-    - opts = params[:visibility_level].present? ? {} : { page: admin_projects_path }
-    = nav_link(opts) do
-      = link_to _('All'), admin_projects_path
-
-    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PRIVATE.to_s) }) do
-      = link_to _('Private'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PRIVATE)
-    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::INTERNAL.to_s) }) do
-      = link_to _('Internal'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::INTERNAL)
-    = nav_link(html_options: { class: active_when(params[:visibility_level] == Gitlab::VisibilityLevel::PUBLIC.to_s) }) do
-      = link_to _('Public'), admin_projects_path(visibility_level: Gitlab::VisibilityLevel::PUBLIC)
+  %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}"
 
   .nav-controls
     .search-holder