Copy sidebar todo component from EE

2 files changed, 9 insertions, 2 deletions

diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index 706e6ca19c3..57125c78cf6 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
@@ -50,6 +50,9 @@ export default {
     buttonLabel() {
       return this.isTodo ? MARK_TEXT : TODO_TEXT;
     },
+    buttonTooltip() {
+      return !this.collapsed ? undefined : this.buttonLabel;
+    },
     collapsedButtonIconClasses() {
       return this.isTodo ? 'todo-undone' : '';
     },
@@ -69,7 +72,7 @@ export default {
   <button
     v-tooltip
     :class="buttonClasses"
-    :title="buttonLabel"
+    :title="buttonTooltip"
     :aria-label="buttonLabel"
     :data-issuable-id="issuableId"
     :data-issuable-type="issuableType"
diff --git a/spec/javascripts/sidebar/todo_spec.js b/spec/javascripts/sidebar/todo_spec.js
index 657e88ecb96..f46ea5a0499 100644
--- a/spec/javascripts/sidebar/todo_spec.js
+++ b/spec/javascripts/sidebar/todo_spec.js
@@ -116,7 +116,7 @@ describe('SidebarTodo', () => {
       const dataAttributes = {
         issuableId: '1',
         issuableType: 'epic',
-        originalTitle: 'Mark todo as done',
+        originalTitle: '',
         placement: 'left',
         container: 'body',
         boundary: 'viewport',
@@ -130,6 +130,10 @@ describe('SidebarTodo', () => {
       });
     });
 
+    it('check button label computed property', () => {
+      expect(vm.buttonLabel).toEqual('Mark todo as done');
+    });
+
     it('renders button label element when `collapsed` prop is `false`', () => {
       const buttonLabelEl = vm.$el.querySelector('span.issuable-todo-inner');