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

app/assets/javascripts/ide/components/new_dropdown/button.vue

 <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"

changelogs/unreleased/ide-header-buttons-tooltip.yml

+---
+title: Added tooltips to tree list header
+merge_request: 21138
+author:
+type: added

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();
+      });
+    });
+  });
 });