Merge branch 'design-management-update-todo-counter' into 'master'

Update global To-Do counter when Design Management To-Do toggled

See merge request gitlab-org/gitlab!41960

app/assets/javascripts/alert_management/components/sidebar/sidebar_todo.vue

@@ -52,7 +52,7 @@ export default {
   },
   methods: {
     updateToDoCount(add) {
-      const oldCount = parseInt(document.querySelector('.todos-count').innerText, 10);
+      const oldCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
       const count = add ? oldCount + 1 : oldCount - 1;
       const headerTodoEvent = new CustomEvent('todo:toggle', {
         detail: {

app/assets/javascripts/design_management/components/design_todo_button.vue

@@ -60,6 +60,22 @@ export default {
     },
   },
   methods: {
+    updateGlobalTodoCount(additionalTodoCount) {
+      const currentCount = parseInt(document.querySelector('.js-todos-count').innerText, 10);
+      const todoToggleEvent = new CustomEvent('todo:toggle', {
+        detail: {
+          count: Math.max(currentCount + additionalTodoCount, 0),
+        },
+      });
+
+      document.dispatchEvent(todoToggleEvent);
+    },
+    incrementGlobalTodoCount() {
+      this.updateGlobalTodoCount(1);
+    },
+    decrementGlobalTodoCount() {
+      this.updateGlobalTodoCount(-1);
+    },
     createTodo() {
       this.todoLoading = true;
       return this.$apollo
@@ -76,6 +92,9 @@ export default {
             }
           },
         })
+        .then(() => {
+          this.incrementGlobalTodoCount();
+        })
         .catch(err => {
           this.$emit('error', Error(CREATE_DESIGN_TODO_ERROR));
           throw err;
@@ -116,6 +135,9 @@ export default {
             }
           },
         })
+        .then(() => {
+          this.decrementGlobalTodoCount();
+        })
         .catch(err => {
           this.$emit('error', Error(DELETE_DESIGN_TODO_ERROR));
           throw err;

app/assets/javascripts/header.js

@@ -14,7 +14,7 @@ import Tracking from '~/tracking';
 export default function initTodoToggle() {
   $(document).on('todo:toggle', (e, count) => {
     const updatedCount = count || e?.detail?.count || 0;
-    const $todoPendingCount = $('.todos-count');
+    const $todoPendingCount = $('.js-todos-count');
 
     $todoPendingCount.text(highCountTrim(updatedCount));
     $todoPendingCount.toggleClass('hidden', updatedCount === 0);

app/views/layouts/header/_default.html.haml

@@ -66,7 +66,7 @@
                 track_property: 'navigation',
                 container: 'body' } do
                 = sprite_icon('todo-done')
-                %span.badge.badge-pill.todos-count{ class: ('hidden' if todos_pending_count == 0) }
+                %span.badge.badge-pill.todos-count.js-todos-count{ class: ('hidden' if todos_pending_count == 0) }
                   = todos_count_format(todos_pending_count)
           %li.nav-item.header-help.dropdown.d-none.d-md-block{ **tracking_attrs('main_navigation', 'click_question_mark_link', 'navigation') }
             = link_to help_path, class: 'header-help-dropdown-toggle', data: { toggle: "dropdown" } do

spec/frontend/design_management/components/design_todo_button_spec.js

@@ -52,6 +52,7 @@ describe('Design management design todo button', () => {
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
+    jest.clearAllMocks();
   });
 
   it('renders TodoButton component', () => {
@@ -68,7 +69,14 @@ describe('Design management design todo button', () => {
     });
 
     describe('when clicked', () => {
+      let dispatchEventSpy;
+
       beforeEach(() => {
+        dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
+        jest.spyOn(document, 'querySelector').mockReturnValue({
+          innerText: 2,
+        });
+
         createComponent({ design: mockDesignWithPendingTodos }, { mountFn: mount });
         wrapper.trigger('click');
         return wrapper.vm.$nextTick();
@@ -86,6 +94,14 @@ describe('Design management design todo button', () => {
         expect(mutate).toHaveBeenCalledTimes(1);
         expect(mutate).toHaveBeenCalledWith(todoMarkDoneMutationVariables);
       });
+
+      it('calls dispatchDocumentEvent to update global To-Do counter correctly', () => {
+        const dispatchedEvent = dispatchEventSpy.mock.calls[0][0];
+
+        expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
+        expect(dispatchedEvent.detail).toEqual({ count: 1 });
+        expect(dispatchedEvent.type).toBe('todo:toggle');
+      });
     });
   });
 
@@ -99,7 +115,14 @@ describe('Design management design todo button', () => {
     });
 
     describe('when clicked', () => {
+      let dispatchEventSpy;
+
       beforeEach(() => {
+        dispatchEventSpy = jest.spyOn(document, 'dispatchEvent');
+        jest.spyOn(document, 'querySelector').mockReturnValue({
+          innerText: 2,
+        });
+
         createComponent({}, { mountFn: mount });
         wrapper.trigger('click');
         return wrapper.vm.$nextTick();
@@ -122,6 +145,14 @@ describe('Design management design todo button', () => {
         expect(mutate).toHaveBeenCalledTimes(1);
         expect(mutate).toHaveBeenCalledWith(createDesignTodoMutationVariables);
       });
+
+      it('calls dispatchDocumentEvent to update global To-Do counter correctly', () => {
+        const dispatchedEvent = dispatchEventSpy.mock.calls[0][0];
+
+        expect(dispatchEventSpy).toHaveBeenCalledTimes(1);
+        expect(dispatchedEvent.detail).toEqual({ count: 3 });
+        expect(dispatchedEvent.type).toBe('todo:toggle');
+      });
     });
   });
 });

spec/frontend/header_spec.js

@@ -4,7 +4,7 @@ import initTodoToggle, { initNavUserDropdownTracking } from '~/header';
 
 describe('Header', () => {
   describe('Todos notification', () => {
-    const todosPendingCount = '.todos-count';
+    const todosPendingCount = '.js-todos-count';
     const fixtureTemplate = 'issues/open-issue.html';
 
     function isTodosCountHidden() {