Merge branch 'ide-header-buttons-tooltip' into 'master'

Added tooltips to tree list header buttons in Web IDE

Closes #50141

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

3 files changed, 32 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue
index ff114e47741..aa5fce59dbf 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/button.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue
@@ -1,7 +1,11 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
+  directives: {
+    tooltip,
+  },
   components: {
     Icon,
   },
@@ -26,6 +30,11 @@ export default {
       default: true,
     },
   },
+  computed: {
+    tooltipTitle() {
+      return this.showLabel ? '' : this.label;
+    },
+  },
   methods: {
     clicked() {
       this.$emit('click');
@@ -36,7 +45,9 @@ export default {
 
 <template>
   <button
+    v-tooltip
     :aria-label="label"
+    :title="tooltipTitle"
     type="button"
     class="btn-blank"
     @click.stop.prevent="clicked"
diff --git a/changelogs/unreleased/ide-header-buttons-tooltip.yml b/changelogs/unreleased/ide-header-buttons-tooltip.yml
new file mode 100644
index 00000000000..4c8f6fd554f
--- /dev/null
+++ b/changelogs/unreleased/ide-header-buttons-tooltip.yml
@@ -0,0 +1,5 @@
+---
+title: Added tooltips to tree list header
+merge_request: 21138
+author:
+type: added
diff --git a/spec/javascripts/ide/components/new_dropdown/button_spec.js b/spec/javascripts/ide/components/new_dropdown/button_spec.js
index ef083d06ba7..6a326b5bd92 100644
--- a/spec/javascripts/ide/components/new_dropdown/button_spec.js
+++ b/spec/javascripts/ide/components/new_dropdown/button_spec.js
@@ -46,4 +46,20 @@ describe('IDE new entry dropdown button component', () => {
       done();
     });
   });
+
+  describe('tooltipTitle', () => {
+    it('returns empty string when showLabel is true', () => {
+      expect(vm.tooltipTitle).toBe('');
+    });
+
+    it('returns label', done => {
+      vm.showLabel = false;
+
+      vm.$nextTick(() => {
+        expect(vm.tooltipTitle).toBe('Testing');
+
+        done();
+      });
+    });
+  });
 });