Make extra notification display customizable

src/components/extra_notifications/extra_notifications.js

@@ -3,15 +3,29 @@ import { mapGetters } from 'vuex'
 const ExtraNotifications = {
   computed: {
     shouldShowChats () {
-      return this.unreadChatCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
     },
     shouldShowAnnouncements () {
-      return this.unreadAnnouncementCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
     },
     shouldShowFollowRequests () {
-      return this.followRequestCount
+      return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
     },
-    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount'])
+    hasAnythingToShow () {
+      return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
+    },
+    shouldShowCustomizationTip () {
+      return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
+    },
+    ...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
+  },
+  methods: {
+    openNotificationSettings () {
+      return this.$store.dispatch('openSettingsModalTab', 'notifications')
+    },
+    dismissConfigurationTip () {
+      return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
+    }
   }
 }
 

src/components/extra_notifications/extra_notifications.vue

@@ -21,6 +21,29 @@
     >
       {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
     </router-link>
+    <i18n-t
+      v-if="shouldShowCustomizationTip"
+      tag="span"
+      class="extra-notification tip"
+      keypath="notifications.configuration_tip"
+    >
+      <template #theSettings>
+        <button
+          class="button-unstyled -link"
+          @click="openNotificationSettings"
+        >
+          {{ $t('notifications.configuration_tip_settings') }}
+        </button>
+      </template>
+      <template #dismiss>
+        <button
+          class="button-unstyled -link"
+          @click="dismissConfigurationTip"
+        >
+          {{ $t('notifications.configuration_tip_dismiss') }}
+        </button>
+      </template>
+    </i18n-t>
   </div>
 </template>
 
@@ -45,5 +68,9 @@
     border-color: $fallback--border;
     border-color: var(--border, $fallback--border);
   }
+
+  .tip {
+    display: inline;
+  }
 }
 </style>