Merge branch '41874-closed-todo' into 'master'

Resolve "Closed issue label in todo's styling is difficult to read"

Closes #41874

See merge request gitlab-org/gitlab-ce!16414

7 files changed, 67 insertions, 16 deletions

diff --git a/app/assets/javascripts/merge_request.js b/app/assets/javascripts/merge_request.js
index cb3cdea8111..088f4921bf4 100644
--- a/app/assets/javascripts/merge_request.js
+++ b/app/assets/javascripts/merge_request.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, quotes, no-underscore-dangle, one-var, one-var-declaration-per-line, consistent-return, dot-notation, quote-props, comma-dangle, object-shorthand, max-len, prefer-arrow-callback */
 
 import 'vendor/jquery.waitforimages';
+import { __ } from '~/locale';
 import TaskList from './task_list';
 import MergeRequestTabs from './merge_request_tabs';
 import IssuablesHelper from './helpers/issuables_helper';
@@ -110,12 +111,12 @@ MergeRequest.prototype.initCommitMessageListeners = function() {
   });
 };
 
-MergeRequest.prototype.updateStatusText = function(classToRemove, classToAdd, newStatusText) {
+MergeRequest.setStatusBoxToMerged = function() {
   $('.detail-page-header .status-box')
-    .removeClass(classToRemove)
-    .addClass(classToAdd)
+    .removeClass('status-box-open')
+    .addClass('status-box-mr-merged')
     .find('span')
-    .text(newStatusText);
+    .text(__('Merged'));
 };
 
 MergeRequest.prototype.decreaseCounter = function(by = 1) {
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
index e82fb979162..c0761f63098 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_ready_to_merge.js
@@ -165,11 +165,9 @@ export default {
             // If state is merged we should update the widget and stop the polling
             eventHub.$emit('MRWidgetUpdateRequested');
             eventHub.$emit('FetchActionsContent');
-            if (window.mergeRequest) {
-              window.mergeRequest.updateStatusText('status-box-open', 'status-box-merged', 'Merged');
-              window.mergeRequest.hideCloseButton();
-              window.mergeRequest.decreaseCounter();
-            }
+            MergeRequest.setStatusBoxToMerged();
+            MergeRequest.hideCloseButton();
+            MergeRequest.decreaseCounter();
             stopPolling();
 
             // If user checked remove source branch and we didn't remove the branch yet
diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss
index 1d8bd26cf1a..d8c57a0e2d9 100644
--- a/app/assets/stylesheets/framework/issue_box.scss
+++ b/app/assets/stylesheets/framework/issue_box.scss
@@ -24,15 +24,13 @@
   font-size: $gl-font-size;
   line-height: 25px;
 
+  &.status-box-closed,
   &.status-box-mr-closed {
     background-color: $gl-danger;
   }
 
-  &.status-box-issue-closed {
-    background-color: $gl-primary;
-  }
-
-  &.status-box-merged {
+  &.status-box-issue-closed,
+  &.status-box-mr-merged {
     background-color: $gl-primary;
   }
 
diff --git a/app/helpers/issues_helper.rb b/app/helpers/issues_helper.rb
index 0f110bd25c5..64cd3032780 100644
--- a/app/helpers/issues_helper.rb
+++ b/app/helpers/issues_helper.rb
@@ -72,7 +72,7 @@ module IssuesHelper
     if item.try(:expired?)
       'status-box-expired'
     elsif item.try(:merged?)
-      'status-box-merged'
+      'status-box-mr-merged'
     elsif item.closed?
       'status-box-mr-closed'
     elsif item.try(:upcoming?)
diff --git a/app/helpers/todos_helper.rb b/app/helpers/todos_helper.rb
index 2a7aa299e83..176544fc6cc 100644
--- a/app/helpers/todos_helper.rb
+++ b/app/helpers/todos_helper.rb
@@ -53,8 +53,16 @@ module TodosHelper
   def todo_target_state_pill(todo)
     return unless show_todo_state?(todo)
 
+    type =
+      case todo.target
+      when MergeRequest
+        'mr'
+      when Issue
+        'issue'
+      end
+
     content_tag(:span, nil, class: 'target-status') do
-      content_tag(:span, nil, class: "status-box status-box-#{todo.target.state.dasherize}") do
+      content_tag(:span, nil, class: "status-box status-box-#{type}-#{todo.target.state.dasherize}") do
         todo.target.state.capitalize
       end
     end
diff --git a/changelogs/unreleased/41874-closed-todo.yml b/changelogs/unreleased/41874-closed-todo.yml
new file mode 100644
index 00000000000..615bd011579
--- /dev/null
+++ b/changelogs/unreleased/41874-closed-todo.yml
@@ -0,0 +1,5 @@
+---
+title: Fix closed text for issues on Todos page
+merge_request:
+author:
+type: fixed
diff --git a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
index 1127576617b..8d84e67ac2d 100644
--- a/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
+++ b/spec/javascripts/vue_mr_widget/components/states/mr_widget_ready_to_merge_spec.js
@@ -392,6 +392,47 @@ describe('MRWidgetReadyToMerge', () => {
         }, 333);
       });
 
+      it('updates status box', (done) => {
+        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
+        spyOn(vm, 'initiateRemoveSourceBranchPolling');
+
+        vm.handleMergePolling(() => {}, () => {});
+
+        setTimeout(() => {
+          const statusBox = document.querySelector('.status-box');
+          expect(statusBox.classList.contains('status-box-mr-merged')).toBeTruthy();
+          expect(statusBox.textContent).toContain('Merged');
+
+          done();
+        });
+      });
+
+      it('hides close button', (done) => {
+        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
+        spyOn(vm, 'initiateRemoveSourceBranchPolling');
+
+        vm.handleMergePolling(() => {}, () => {});
+
+        setTimeout(() => {
+          expect(document.querySelector('.btn-close').classList.contains('hidden')).toBeTruthy();
+
+          done();
+        });
+      });
+
+      it('updates merge request count badge', (done) => {
+        spyOn(vm.service, 'poll').and.returnValue(returnPromise('merged'));
+        spyOn(vm, 'initiateRemoveSourceBranchPolling');
+
+        vm.handleMergePolling(() => {}, () => {});
+
+        setTimeout(() => {
+          expect(document.querySelector('.js-merge-counter').textContent).toBe('0');
+
+          done();
+        });
+      });
+
       it('should continue polling until MR is merged', (done) => {
         spyOn(vm.service, 'poll').and.returnValue(returnPromise('some_other_state'));
         spyOn(vm, 'initiateRemoveSourceBranchPolling');