Migrate todo tabs to GlTabs

Update To-Do list page to use GlTab helpers,
conforming to Pajamas.

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

@@ -216,4 +216,4 @@ def gl_tab_counter_badge(count)
     count,
     class: 'badge badge-muted badge-pill gl-badge sm gl-tab-counter-badge'
   )
-end
\ No newline at end of file
+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),
         );
       });