Merge branch 'tomquirk/230791-migrate-todo-tabs' into 'master'

Migrate To-Do list tabs to GlTabs

See merge request gitlab-org/gitlab!73912

app/assets/javascripts/pages/dashboard/todos/index/todos.js

-/* eslint-disable class-methods-use-this, no-unneeded-ternary */
+/* eslint-disable class-methods-use-this */
 
 import $ from 'jquery';
 import { getGroups } from '~/api/groups_api';
@@ -78,7 +78,7 @@ export default class Todos {
     initDeprecatedJQueryDropdown($dropdown, {
       fieldName,
       selectable: true,
-      filterable: searchFields ? true : false,
+      filterable: Boolean(searchFields),
       search: { fields: searchFields },
       data: $dropdown.data('data'),
       clicked: () => {
@@ -172,8 +172,8 @@ export default class Todos {
 
   updateBadges(data) {
     $(document).trigger('todo:toggle', data.count);
-    document.querySelector('.todos-pending .badge').innerHTML = addDelimiter(data.count);
-    document.querySelector('.todos-done .badge').innerHTML = addDelimiter(data.done_count);
+    document.querySelector('.js-todos-pending .badge').innerHTML = addDelimiter(data.count);
+    document.querySelector('.js-todos-done .badge').innerHTML = addDelimiter(data.done_count);
   }
 
   goToTodoUrl(e) {

app/helpers/tab_helper.rb

@@ -210,3 +210,11 @@ module TabHelper
     current_page?(options)
   end
 end
+
+def gl_tab_counter_badge(count, html_options = {})
+  badge_classes = %w[badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge]
+  content_tag(:span,
+    count,
+    class: [*html_options[:class], badge_classes].join(' ')
+  )
+end

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?)

spec/frontend/pages/dashboard/todos/index/todos_spec.js

@@ -94,13 +94,13 @@ describe('Todos', () => {
       });
 
       it('updates pending text', () => {
-        expect(document.querySelector('.todos-pending .badge').innerHTML).toEqual(
+        expect(document.querySelector('.js-todos-pending .badge').innerHTML).toEqual(
           addDelimiter(TEST_COUNT_BIG),
         );
       });
 
       it('updates done text', () => {
-        expect(document.querySelector('.todos-done .badge').innerHTML).toEqual(
+        expect(document.querySelector('.js-todos-done .badge').innerHTML).toEqual(
           addDelimiter(TEST_DONE_COUNT_BIG),
         );
       });

spec/helpers/tab_helper_spec.rb

@@ -150,4 +150,16 @@ RSpec.describe TabHelper do
       end
     end
   end
+
+  describe 'gl_tab_counter_badge' do
+    it 'creates a tab counter badge' do
+      expect(gl_tab_counter_badge(1)).to eq('<span class="badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge">1</span>')
+    end
+
+    context 'with extra classes' do
+      it 'creates a tab counter badge with the correct class attribute' do
+        expect(gl_tab_counter_badge(1, { class: 'js-test' })).to eq('<span class="js-test badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge">1</span>')
+      end
+    end
+  end
 end