add tooltip for notifications icon in collapsed sidebar

1 files changed, 29 insertions, 9 deletions

diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
index 104c4b14264..d5656397886 100644
--- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
+++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue
@@ -1,9 +1,19 @@
 <script>
+  import { __ } from '~/locale';
+  import icon from '~/vue_shared/components/icon.vue';
+  import toggleButton from '~/vue_shared/components/toggle_button.vue';
+  import tooltip from '~/vue_shared/directives/tooltip';
   import eventHub from '../../event_hub';
-  import icon from '../../../vue_shared/components/icon.vue';
-  import toggleButton from '../../../vue_shared/components/toggle_button.vue';
+
+  const ICON_ON = 'notifications';
+  const ICON_OFF = 'notifications-off';
+  const LABEL_ON = __('Notifications on');
+  const LABEL_OFF = __('Notifications off');
 
   export default {
+    directives: {
+      tooltip,
+    },
     components: {
       icon,
       toggleButton,
@@ -30,8 +40,11 @@
         return this.subscribed === null || this.loading;
       },
       notificationIcon() {
-        return this.subscribed ? 'notifications' : 'notifications-off';
+        return this.subscribed ? ICON_ON : ICON_OFF;
       },
+      notificationTooltip() {
+        return this.subscribed ? LABEL_ON : LABEL_OFF;
+      }
     },
     methods: {
       toggleSubscription() {
@@ -44,12 +57,19 @@
 <template>
   <div>
     <div class="sidebar-collapsed-icon">
-      <icon
-        :name="notificationIcon"
-        :size="16"
-        aria-hidden="true"
-        class="sidebar-item-icon is-active"
-      />
+      <span
+        v-tooltip
+        :title="notificationTooltip"
+        data-container="body"
+        data-placement="left"
+      >
+        <icon
+          :name="notificationIcon"
+          :size="16"
+          aria-hidden="true"
+          class="sidebar-item-icon is-active"
+        />
+      </span>
     </div>
     <span class="issuable-header-text hide-collapsed pull-left">
       {{ __('Notifications') }}