Add latest changes from gitlab-org/gitlab@master

2 files changed, 39 insertions, 24 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue b/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue
index 30ee18cc369..049a61e17c7 100644
--- a/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue
+++ b/app/assets/javascripts/super_sidebar/components/super_sidebar_toggle.vue
@@ -14,59 +14,75 @@ export default {
   },
   mixins: [Tracking.mixin()],
   props: {
-    tooltipContainer: {
+    type: {
       type: String,
       required: false,
-      default: null,
-    },
-    tooltipPlacement: {
-      type: String,
-      required: false,
-      default: 'right',
+      default: 'expand',
     },
   },
   i18n: {
-    collapseSidebar: __('Hide sidebar'),
-    expandSidebar: __('Keep sidebar visible'),
     primaryNavigationSidebar: __('Primary navigation sidebar'),
   },
+  tooltipCollapse: {
+    placement: 'bottom',
+    container: 'super-sidebar',
+    title: __('Hide sidebar'),
+  },
+  tooltipExpand: {
+    placement: 'right',
+    title: __('Keep sidebar visible'),
+  },
   data() {
     return sidebarState;
   },
   computed: {
-    canOpen() {
-      return this.isCollapsed || this.isPeek || this.isHoverPeek;
+    isTypeCollapse() {
+      return this.type === 'collapse';
     },
-    tooltipTitle() {
-      return this.canOpen ? this.$options.i18n.expandSidebar : this.$options.i18n.collapseSidebar;
+    isTypeExpand() {
+      return this.type === 'expand';
     },
     tooltip() {
-      return {
-        placement: this.tooltipPlacement,
-        container: this.tooltipContainer,
-        title: this.tooltipTitle,
-      };
+      return this.isTypeExpand ? this.$options.tooltipExpand : this.$options.tooltipCollapse;
     },
     ariaExpanded() {
-      return String(!this.canOpen);
+      return String(this.isTypeCollapse);
     },
   },
+  mounted() {
+    this.$root.$on('bv::tooltip::show', this.onTooltipShow);
+  },
+  beforeUnmount() {
+    this.$root.$off('bv::tooltip::show', this.onTooltipShow);
+  },
   methods: {
     toggle() {
-      this.track(this.canOpen ? 'nav_show' : 'nav_hide', {
+      this.track(this.isTypeExpand ? 'nav_show' : 'nav_hide', {
         label: 'nav_toggle',
         property: 'nav_sidebar',
       });
-      toggleSuperSidebarCollapsed(!this.canOpen, true);
+      toggleSuperSidebarCollapsed(!this.isTypeExpand, true);
       this.focusOtherToggle();
     },
     focusOtherToggle() {
       this.$nextTick(() => {
-        const classSelector = this.canOpen ? JS_TOGGLE_EXPAND_CLASS : JS_TOGGLE_COLLAPSE_CLASS;
+        const classSelector = this.isTypeExpand ? JS_TOGGLE_COLLAPSE_CLASS : JS_TOGGLE_EXPAND_CLASS;
         const otherToggle = document.querySelector(`.${classSelector}`);
         otherToggle?.focus();
       });
     },
+    onTooltipShow(bvEvent) {
+      if (
+        bvEvent.target !== this.$el ||
+        (this.isTypeCollapse && !this.isCollapsed) ||
+        (this.isTypeExpand && this.isCollapsed) ||
+        this.isPeek ||
+        this.isHoverPeek
+      )
+        return;
+
+      bvEvent.preventDefault();
+    },
   },
 };
 </script>
diff --git a/app/assets/javascripts/super_sidebar/components/user_bar.vue b/app/assets/javascripts/super_sidebar/components/user_bar.vue
index 49aee4f3470..ea634d43a96 100644
--- a/app/assets/javascripts/super_sidebar/components/user_bar.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_bar.vue
@@ -126,9 +126,8 @@ export default {
       <super-sidebar-toggle
         v-if="hasCollapseButton"
         :class="$options.JS_TOGGLE_COLLAPSE_CLASS"
-        tooltip-placement="bottom"
-        tooltip-container="super-sidebar"
         data-testid="super-sidebar-collapse-button"
+        type="collapse"
       />
       <create-menu
         v-if="sidebarData.is_logged_in && sidebarData.create_new_menu_groups.length > 0"