Add latest changes from gitlab-org/gitlab@14-5-stable-eev14.5.0-rc42

5 files changed, 27 insertions, 38 deletions

diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml
index fdaf2107686..b94b14bf6bd 100644
--- a/app/views/dashboard/_projects_head.html.haml
+++ b/app/views/dashboard/_projects_head.html.haml
@@ -14,19 +14,7 @@
 .top-area.scrolling-tabs-container.inner-page-scroll-tabs
   .fade-left= sprite_icon('chevron-lg-left', size: 12)
   .fade-right= sprite_icon('chevron-lg-right', size: 12)
-  %ul.nav-links.scrolling-tabs.mobile-separator.nav.nav-tabs{ class: ('border-0' if feature_project_list_filter_bar) }
-    = nav_link(page: [dashboard_projects_path, root_path]) do
-      = link_to dashboard_projects_path, class: 'shortcuts-activity', data: {placement: 'right'} do
-        = _("Your projects")
-        %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_user_projects_count)
-    = nav_link(page: starred_dashboard_projects_path) do
-      = link_to starred_dashboard_projects_path, data: {placement: 'right'} do
-        = _("Starred projects")
-        %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm= limited_counter_with_delimiter(@total_starred_projects_count)
-    = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
-      = link_to explore_root_path, data: {placement: 'right'} do
-        = _("Explore projects")
-    = render_if_exists "dashboard/removed_projects_tab", removed_projects_count: @removed_projects_count
+  = render 'dashboard/projects_nav'
   - unless feature_project_list_filter_bar
     .nav-controls
       = render 'shared/projects/search_form'
diff --git a/app/views/dashboard/_projects_nav.html.haml b/app/views/dashboard/_projects_nav.html.haml
new file mode 100644
index 00000000000..64aa1e01d06
--- /dev/null
+++ b/app/views/dashboard/_projects_nav.html.haml
@@ -0,0 +1,13 @@
+- is_your_projects_path = current_page?(dashboard_projects_path) || current_page?(root_path)
+- is_explore_projects_path = current_page?(explore_root_path) || current_page?(trending_explore_projects_path) || current_page?(starred_explore_projects_path) || current_page?(explore_projects_path)
+
+= gl_tabs_nav({ class: 'scrolling-tabs nav-links gl-display-flex gl-flex-grow-1 gl-flex-nowrap gl-border-0' }) do
+  = gl_tab_link_to dashboard_projects_path, { item_active: is_your_projects_path, class: 'shortcuts-activity', data: { placement: 'right' } } do
+    = _("Your projects")
+    = gl_tab_counter_badge(limited_counter_with_delimiter(@total_user_projects_count))
+  = gl_tab_link_to starred_dashboard_projects_path, { data: { placement: 'right' } } do
+    = _("Starred projects")
+    = gl_tab_counter_badge(limited_counter_with_delimiter(@total_starred_projects_count))
+  = gl_tab_link_to _("Explore projects"), explore_root_path, { item_active: is_explore_projects_path, data: { placement: 'right' } }
+  = gl_tab_link_to _("Explore topics"), topics_explore_projects_path, { data: { placement: 'right' } }
+  = render_if_exists "dashboard/removed_projects_tab", removed_projects_count: @removed_projects_count
diff --git a/app/views/dashboard/_snippets_head.html.haml b/app/views/dashboard/_snippets_head.html.haml
index e96b5695ddc..8c468812e33 100644
--- a/app/views/dashboard/_snippets_head.html.haml
+++ b/app/views/dashboard/_snippets_head.html.haml
@@ -7,10 +7,6 @@
         = link_to _("New snippet"), new_snippet_path, class: "gl-button btn btn-confirm", title: _("New snippet")
 
 .top-area
-  %ul.nav-links.nav.nav-tabs
-    = nav_link(page: dashboard_snippets_path, html_options: {class: 'home'}) do
-      = link_to dashboard_snippets_path, title: 'Your snippets', data: {placement: 'right'} do
-        Your snippets
-    = nav_link(page: explore_snippets_path) do
-      = link_to explore_snippets_path, title: 'Explore snippets', data: {placement: 'right'} do
-        Explore snippets
+  = gl_tabs_nav({ class: 'gl-border-0' }) do
+    = gl_tab_link_to _('Your snippets'), dashboard_snippets_path, { title: _('Your snippets') }
+    = gl_tab_link_to _('Explore snippets'), explore_snippets_path, { title: _('Explore snippets') }
diff --git a/app/views/dashboard/projects/_nav.html.haml b/app/views/dashboard/projects/_nav.html.haml
index f9b61bf1f3e..3e39872902d 100644
--- a/app/views/dashboard/projects/_nav.html.haml
+++ b/app/views/dashboard/projects/_nav.html.haml
@@ -14,8 +14,6 @@
         = link_to s_('DashboardProjects|All'), dashboard_projects_path, class: params[:personal].present? ? inactive_class : active_class
         = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true), class: params[:personal].present? ? active_class : inactive_class
   - else
-    %ul.nav-links.mobile-separator.nav.nav-tabs
-      = nav_link(html_options: { class: ("active" unless params[:personal].present?) }) do
-        = link_to s_('DashboardProjects|All'), dashboard_projects_path
-      = nav_link(html_options: { class: ("active" if params[:personal].present?) }) do
-        = link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true)
+    = gl_tabs_nav do
+      = gl_tab_link_to s_('DashboardProjects|All'), dashboard_projects_path, { item_active: params[:personal].blank? }
+      = gl_tab_link_to s_('DashboardProjects|Personal'), filter_projects_path(personal: true), { item_active: params[:personal].present? }
diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 58f817bf63b..aa54a1e589e 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -10,19 +10,13 @@
 
 - if current_user.todos.any?
   .top-area
-    %ul.nav-links.mobile-separator.nav.nav-tabs
-      %li.todos-pending{ class: active_when(params[:state].blank? || params[:state] == 'pending') }>
-        = link_to todos_filter_path(state: 'pending') do
-          %span
-            To Do
-          %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
-            = number_with_delimiter(todos_pending_count)
-      %li.todos-done{ class: active_when(params[:state] == 'done') }>
-        = link_to todos_filter_path(state: 'done') do
-          %span
-            Done
-          %span.badge.gl-tab-counter-badge.badge-muted.badge-pill.gl-badge.sm
-            = number_with_delimiter(todos_done_count)
+    = gl_tabs_nav({ class: 'gl-flex-grow-1 gl-border-0' }) do
+      = gl_tab_link_to todos_filter_path(state: 'pending'), item_active: params[:state].blank? || params[:state] == 'pending', class: "js-todos-pending" do
+        = _("To Do")
+        = gl_tab_counter_badge number_with_delimiter(todos_pending_count)
+      = gl_tab_link_to todos_filter_path(state: 'done'), item_active: params[:state] == 'done', class: "js-todos-done" do
+        = _("Done")
+        = gl_tab_counter_badge number_with_delimiter(todos_done_count)
 
     .nav-controls
       - if @allowed_todos.any?(&:pending?)