Add latest changes from gitlab-org/gitlab@master

1 files changed, 62 insertions, 13 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue
index 6c82a4bbf86..ed4b0d4772e 100644
--- a/app/assets/javascripts/super_sidebar/components/help_center.vue
+++ b/app/assets/javascripts/super_sidebar/components/help_center.vue
@@ -1,12 +1,16 @@
 <script>
-import { GlDisclosureDropdown } from '@gitlab/ui';
+import { GlBadge, GlButton, GlDisclosureDropdown, GlDisclosureDropdownGroup } from '@gitlab/ui';
 import { helpPagePath } from '~/helpers/help_page_helper';
 import { PROMO_URL } from 'jh_else_ce/lib/utils/url_utility';
 import { __ } from '~/locale';
+import { STORAGE_KEY } from '~/whats_new/utils/notification';
 
 export default {
   components: {
+    GlBadge,
+    GlButton,
     GlDisclosureDropdown,
+    GlDisclosureDropdownGroup,
   },
   i18n: {
     help: __('Help'),
@@ -27,7 +31,12 @@ export default {
   },
   data() {
     return {
-      items: [
+      showWhatsNewNotification: this.shouldShowWhatsNewNotification(),
+    };
+  },
+  computed: {
+    items() {
+      return [
         {
           items: [
             { text: this.$options.i18n.help, href: helpPagePath() },
@@ -44,23 +53,49 @@ export default {
         },
         {
           items: [
-            { text: this.$options.i18n.shortcuts, action: this.showKeyboardShortcuts },
+            {
+              text: this.$options.i18n.shortcuts,
+              action: this.showKeyboardShortcuts,
+              shortcut: '?',
+            },
             this.sidebarData.display_whats_new && {
               text: this.$options.i18n.whatsnew,
               action: this.showWhatsNew,
+              count:
+                this.showWhatsNewNotification &&
+                this.sidebarData.whats_new_most_recent_release_items_count,
             },
           ].filter(Boolean),
         },
-      ],
-    };
+      ];
+    },
   },
   methods: {
+    shouldShowWhatsNewNotification() {
+      if (
+        !this.sidebarData.display_whats_new ||
+        localStorage.getItem(STORAGE_KEY) === this.sidebarData.whats_new_version_digest
+      ) {
+        return false;
+      }
+      return true;
+    },
+
+    handleAction({ action }) {
+      if (action) {
+        action();
+      }
+    },
+
     showKeyboardShortcuts() {
       this.$refs.dropdown.close();
       window?.toggleShortcutsHelp();
     },
+
     async showWhatsNew() {
       this.$refs.dropdown.close();
+      this.showWhatsNewNotification = false;
+
       if (!this.toggleWhatsNewDrawer) {
         const appEl = document.getElementById('whats-new-app');
         const { default: toggleWhatsNewDrawer } = await import(
@@ -77,12 +112,26 @@ export default {
 </script>
 
 <template>
-  <gl-disclosure-dropdown
-    ref="dropdown"
-    icon="question-o"
-    :items="items"
-    :toggle-text="$options.i18n.help"
-    category="tertiary"
-    no-caret
-  />
+  <gl-disclosure-dropdown ref="dropdown">
+    <template #toggle>
+      <gl-button category="tertiary" icon="question-o" class="btn-with-notification">
+        <span v-if="showWhatsNewNotification" class="notification"></span>
+        {{ $options.i18n.help }}
+      </gl-button>
+    </template>
+
+    <gl-disclosure-dropdown-group :group="items[0]" />
+    <gl-disclosure-dropdown-group :group="items[1]" bordered @action="handleAction">
+      <template #list-item="{ item }">
+        <button
+          tabindex="-1"
+          class="gl-bg-transparent gl-w-full gl-border-none gl-display-flex gl-justify-content-space-between gl-p-0 gl-text-gray-900"
+        >
+          {{ item.text }}
+          <gl-badge v-if="item.count" pill size="sm" variant="info">{{ item.count }}</gl-badge>
+          <kbd v-else-if="item.shortcut" class="flat">?</kbd>
+        </button>
+      </template>
+    </gl-disclosure-dropdown-group>
+  </gl-disclosure-dropdown>
 </template>