Merge branch 'add-issues-tooltip' into 'master'

Added tooltip to add issues button on issue boards

Closes #27985

See merge request !9142

4 files changed, 51 insertions, 5 deletions

diff --git a/app/assets/javascripts/boards/boards_bundle.js.es6 b/app/assets/javascripts/boards/boards_bundle.js.es6
index 0c5177ced2f..55d13be6e5f 100644
--- a/app/assets/javascripts/boards/boards_bundle.js.es6
+++ b/app/assets/javascripts/boards/boards_bundle.js.es6
@@ -97,17 +97,53 @@ $(() => {
       modal: ModalStore.store,
       store: Store.state,
     },
+    watch: {
+      disabled() {
+        this.updateTooltip();
+      },
+    },
     computed: {
       disabled() {
         return !this.store.lists.filter(list => list.type !== 'blank' && list.type !== 'done').length;
       },
+      tooltipTitle() {
+        if (this.disabled) {
+          return 'Please add a list to your board first';
+        }
+
+        return '';
+      },
+    },
+    methods: {
+      updateTooltip() {
+        const $tooltip = $(this.$el);
+
+        this.$nextTick(() => {
+          if (this.disabled) {
+            $tooltip.tooltip();
+          } else {
+            $tooltip.tooltip('destroy');
+          }
+        });
+      },
+      openModal() {
+        if (!this.disabled) {
+          this.toggleModal(true);
+        }
+      },
+    },
+    mounted() {
+      this.updateTooltip();
     },
     template: `
       <button
-        class="btn btn-create pull-right prepend-left-10 has-tooltip"
+        class="btn btn-create pull-right prepend-left-10"
         type="button"
-        :disabled="disabled"
-        @click="toggleModal(true)">
+        data-placement="bottom"
+        :class="{ 'disabled': disabled }"
+        :title="tooltipTitle"
+        :aria-disabled="disabled"
+        @click="openModal">
         Add issues
       </button>
     `,
diff --git a/changelogs/unreleased/add-issues-tooltip.yml b/changelogs/unreleased/add-issues-tooltip.yml
new file mode 100644
index 00000000000..58adb6c6b5a
--- /dev/null
+++ b/changelogs/unreleased/add-issues-tooltip.yml
@@ -0,0 +1,4 @@
+---
+title: Disabled tooltip on add issues button in usse boards
+merge_request:
+author:
diff --git a/spec/features/boards/add_issues_modal_spec.rb b/spec/features/boards/add_issues_modal_spec.rb
index 2875fc1e533..a3e24bb5ffa 100644
--- a/spec/features/boards/add_issues_modal_spec.rb
+++ b/spec/features/boards/add_issues_modal_spec.rb
@@ -49,6 +49,12 @@ describe 'Issue Boards add issue modal', :feature, :js do
 
       expect(page).not_to have_selector('.add-issues-modal')
     end
+
+    it 'does not show tooltip on add issues button' do
+      button = page.find('.issue-boards-search button', text: 'Add issues')
+
+      expect(button[:title]).not_to eq("Please add a list to your board first")
+    end
   end
 
   context 'issues list' do
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 1b25b51cfb2..e247bfa2980 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -28,10 +28,10 @@ describe 'Issue Boards', feature: true, js: true do
       expect(page).to have_content('Welcome to your Issue Board!')
     end
 
-    it 'disables add issues button by default' do
+    it 'shows tooltip on add issues button' do
       button = page.find('.issue-boards-search button', text: 'Add issues')
 
-      expect(button[:disabled]).to eq true
+      expect(button[:"data-original-title"]).to eq("Please add a list to your board first")
     end
 
     it 'hides the blank state when clicking nevermind button' do