Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

2 files changed, 33 insertions, 13 deletions

diff --git a/app/assets/javascripts/nav/components/top_nav_app.vue b/app/assets/javascripts/nav/components/top_nav_app.vue
index 08a2c6952c8..ca6e6567f74 100644
--- a/app/assets/javascripts/nav/components/top_nav_app.vue
+++ b/app/assets/javascripts/nav/components/top_nav_app.vue
@@ -1,14 +1,18 @@
 <script>
-import { GlNav, GlNavItemDropdown, GlDropdownForm } from '@gitlab/ui';
+import { GlNav, GlIcon, GlNavItemDropdown, GlDropdownForm, GlTooltipDirective } from '@gitlab/ui';
 import TopNavDropdownMenu from './top_nav_dropdown_menu.vue';
 
 export default {
   components: {
+    GlIcon,
     GlNav,
     GlNavItemDropdown,
     GlDropdownForm,
     TopNavDropdownMenu,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     navData: {
       type: Object,
@@ -21,15 +25,20 @@ export default {
 <template>
   <gl-nav class="navbar-sub-nav">
     <gl-nav-item-dropdown
-      :text="navData.activeTitle"
+      v-gl-tooltip.bottom="navData.menuTooltip"
       data-qa-selector="navbar_dropdown"
-      :data-qa-title="navData.activeTitle"
-      icon="hamburger"
+      data-qa-title="Menu"
       menu-class="gl-mt-3! gl-max-w-none! gl-max-h-none! gl-sm-w-auto! js-top-nav-dropdown-menu"
       toggle-class="top-nav-toggle js-top-nav-dropdown-toggle gl-px-3!"
       no-flip
       no-caret
     >
+      <template #button-content>
+        <gl-icon name="hamburger" />
+        <span v-if="navData.menuTitle" class="gl-ml-3">
+          {{ navData.menuTitle }}
+        </span>
+      </template>
       <gl-dropdown-form>
         <top-nav-dropdown-menu
           :primary="navData.primary"
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
index b8555df53df..97e63c7324e 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
+++ b/app/assets/javascripts/nav/components/top_nav_menu_sections.vue
@@ -49,15 +49,26 @@ export default {
       :class="getMenuSectionClasses(sectionIndex)"
       data-testid="menu-section"
     >
-      <top-nav-menu-item
-        v-for="(menuItem, menuItemIndex) in menuItems"
-        :key="menuItem.id"
-        :menu-item="menuItem"
-        data-testid="menu-item"
-        class="gl-w-full"
-        :class="{ 'gl-mt-1': menuItemIndex > 0 }"
-        @click="onClick(menuItem)"
-      />
+      <template v-for="(menuItem, menuItemIndex) in menuItems">
+        <strong
+          v-if="menuItem.type == 'header'"
+          :key="menuItem.title"
+          class="gl-px-4 gl-py-2 gl-text-gray-900 gl-display-block"
+          :class="{ 'gl-pt-3!': menuItemIndex > 0 }"
+          data-testid="menu-header"
+        >
+          {{ menuItem.title }}
+        </strong>
+        <top-nav-menu-item
+          v-else
+          :key="menuItem.id"
+          :menu-item="menuItem"
+          data-testid="menu-item"
+          class="gl-w-full"
+          :class="{ 'gl-mt-1': menuItemIndex > 0 }"
+          @click="onClick(menuItem)"
+        />
+      </template>
     </div>
   </div>
 </template>