Add latest changes from gitlab-org/gitlab@master

5 files changed, 6 insertions, 81 deletions

diff --git a/app/assets/javascripts/super_sidebar/components/context_switcher.vue b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
index d1297b19579..c5f3410a68f 100644
--- a/app/assets/javascripts/super_sidebar/components/context_switcher.vue
+++ b/app/assets/javascripts/super_sidebar/components/context_switcher.vue
@@ -5,7 +5,6 @@ import { s__ } from '~/locale';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '~/lib/utils/constants';
 import searchUserProjectsAndGroups from '../graphql/queries/search_user_groups_and_projects.query.graphql';
 import { trackContextAccess, formatContextSwitcherItems } from '../utils';
-import { maxSize, applyMaxSize } from '../popper_max_size_modifier';
 import NavItem from './nav_item.vue';
 import ProjectsList from './projects_list.vue';
 import GroupsList from './groups_list.vue';
@@ -142,9 +141,6 @@ export default {
     },
   },
   DEFAULT_DEBOUNCE_AND_THROTTLE_MS,
-  popperOptions: {
-    modifiers: [maxSize, applyMaxSize],
-  },
 };
 </script>
 
@@ -153,7 +149,6 @@ export default {
     ref="disclosure-dropdown"
     class="context-switcher gl-w-full"
     placement="center"
-    :popper-options="$options.popperOptions"
     @shown="onDisclosureDropdownShown"
     @hidden="onDisclosureDropdownHidden"
   >
diff --git a/app/assets/javascripts/super_sidebar/components/create_menu.vue b/app/assets/javascripts/super_sidebar/components/create_menu.vue
index 8e5aeba1ec2..0ce856c9af8 100644
--- a/app/assets/javascripts/super_sidebar/components/create_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/create_menu.vue
@@ -44,16 +44,7 @@ export default {
     },
   },
   toggleId: 'create-menu-toggle',
-  popperOptions: {
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [DROPDOWN_X_OFFSET, DROPDOWN_Y_OFFSET],
-        },
-      },
-    ],
-  },
+  dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET },
   TRIGGER_ELEMENT_DISCLOSURE_DROPDOWN,
 };
 </script>
@@ -67,7 +58,7 @@ export default {
       text-sr-only
       :toggle-text="$options.i18n.createNew"
       :toggle-id="$options.toggleId"
-      :popper-options="$options.popperOptions"
+      :dropdown-offset="$options.dropdownOffset"
       data-qa-selector="new_menu_toggle"
       data-testid="new-menu-toggle"
       @shown="dropdownOpen = true"
diff --git a/app/assets/javascripts/super_sidebar/components/help_center.vue b/app/assets/javascripts/super_sidebar/components/help_center.vue
index 03f6a9c2122..1a965f21ef5 100644
--- a/app/assets/javascripts/super_sidebar/components/help_center.vue
+++ b/app/assets/javascripts/super_sidebar/components/help_center.vue
@@ -204,22 +204,13 @@ export default {
       });
     },
   },
-  popperOptions: {
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [DROPDOWN_X_OFFSET, DROPDOWN_Y_OFFSET],
-        },
-      },
-    ],
-  },
+  dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET },
 };
 </script>
 
 <template>
   <gl-disclosure-dropdown
-    :popper-options="$options.popperOptions"
+    :dropdown-offset="$options.dropdownOffset"
     @shown="trackDropdownToggle(true)"
     @hidden="trackDropdownToggle(false)"
   >
diff --git a/app/assets/javascripts/super_sidebar/components/user_menu.vue b/app/assets/javascripts/super_sidebar/components/user_menu.vue
index e08fb630fb7..7d4991fbe96 100644
--- a/app/assets/javascripts/super_sidebar/components/user_menu.vue
+++ b/app/assets/javascripts/super_sidebar/components/user_menu.vue
@@ -221,16 +221,7 @@ export default {
       });
     },
   },
-  popperOptions: {
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [DROPDOWN_X_OFFSET, DROPDOWN_Y_OFFSET],
-        },
-      },
-    ],
-  },
+  dropdownOffset: { mainAxis: DROPDOWN_Y_OFFSET, crossAxis: DROPDOWN_X_OFFSET },
 };
 </script>
 
@@ -238,7 +229,7 @@ export default {
   <div>
     <gl-disclosure-dropdown
       ref="userDropdown"
-      :popper-options="$options.popperOptions"
+      :dropdown-offset="$options.dropdownOffset"
       data-testid="user-dropdown"
       data-qa-selector="user_menu"
       :auto-close="false"
diff --git a/app/assets/javascripts/super_sidebar/popper_max_size_modifier.js b/app/assets/javascripts/super_sidebar/popper_max_size_modifier.js
deleted file mode 100644
index 6581d521107..00000000000
--- a/app/assets/javascripts/super_sidebar/popper_max_size_modifier.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import { detectOverflow } from '@popperjs/core';
-
-/**
- * These modifiers were copied from the community modifier popper-max-size-modifier
- * https://www.npmjs.com/package/popper-max-size-modifier.
- * We are considering upgrading Popper.js to Floating UI, at which point the behavior this
- * introduces will be available out of the box.
- * https://gitlab.com/gitlab-org/gitlab-ui/-/issues/2213
- */
-
-export const maxSize = {
-  name: 'maxSize',
-  enabled: true,
-  phase: 'main',
-  requiresIfExists: ['offset', 'preventOverflow', 'flip'],
-  fn({ state, name }) {
-    const overflow = detectOverflow(state);
-    const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
-    const { width, height } = state.rects.popper;
-    const [basePlacement] = state.placement.split('-');
-
-    const widthProp = basePlacement === 'left' ? 'left' : 'right';
-    const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
-
-    state.modifiersData[name] = {
-      width: width - overflow[widthProp] - x,
-      height: height - overflow[heightProp] - y,
-    };
-  },
-};
-
-export const applyMaxSize = {
-  name: 'applyMaxSize',
-  enabled: true,
-  phase: 'write',
-  requires: ['maxSize'],
-  fn({ state }) {
-    // The `maxSize` modifier provides this data
-    const { width, height } = state.modifiersData.maxSize;
-    state.elements.popper.style.maxWidth = `${width}px`;
-    state.elements.popper.style.maxHeight = `${height}px`;
-  },
-};