Migrate `popperOptions` usages to `dropdownOffset`

GitLab UI dropdowns don't expose a `popperOptions` prop anymore. It has
been replaced with `dropdownOffset` which only controls the dropdown's
offsets relative to its reference elements. This migrates existing
usages of the deprecated prop to the new one.

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"
   >

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"

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)"
   >

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"

app/assets/javascripts/super_sidebar/popper_max_size_modifier.js

-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`;
-  },
-};

spec/frontend/alerts_settings/components/__snapshots__/alerts_form_spec.js.snap

@@ -61,7 +61,6 @@ exports[`Alert integration settings form default state should match the default
         items="[object Object]"
         noresultstext="No results found"
         placement="left"
-        popperoptions="[object Object]"
         resetbuttonlabel=""
         searchplaceholder="Search"
         selected="selecte_tmpl"

spec/frontend/branches/components/__snapshots__/delete_merged_branches_spec.js.snap

@@ -8,8 +8,8 @@ exports[`Delete merged branches component Delete merged branches confirmation mo
     data-qa-selector="delete_merged_branches_dropdown_button"
     icon="ellipsis_v"
     nocaret="true"
+    offset="[object Object]"
     placement="right"
-    popperoptions="[object Object]"
     size="medium"
     textsronly="true"
     toggleid="dropdown-toggle-btn-25"

spec/frontend/comment_templates/components/__snapshots__/list_item_spec.js.snap

@@ -58,7 +58,7 @@ exports[`Comment templates list item component renders list item 1`] = `
         </button>
          
         <div
-          class="gl-new-dropdown-panel gl-w-31"
+          class="gl-new-dropdown-panel gl-w-31!"
           data-testid="base-dropdown-menu"
           id="base-dropdown-7"
         >

spec/frontend/super_sidebar/components/context_switcher_spec.js

@@ -158,12 +158,6 @@ describe('ContextSwitcher component', () => {
       expect(findContextSwitcherToggle().props('expanded')).toEqual(false);
     });
 
-    it("passes Popper.js' options to the disclosure dropdown", () => {
-      expect(findDisclosureDropdown().props('popperOptions')).toMatchObject({
-        modifiers: expect.any(Array),
-      });
-    });
-
     it('does not emit the `toggle` event initially', () => {
       expect(wrapper.emitted('toggle')).toBe(undefined);
     });

spec/frontend/super_sidebar/components/create_menu_spec.js

@@ -37,11 +37,12 @@ describe('CreateMenu component', () => {
       createWrapper();
     });
 
-    it('passes popper options to the dropdown', () => {
+    it('passes custom offset to the dropdown', () => {
       createWrapper();
 
-      expect(findGlDisclosureDropdown().props('popperOptions')).toEqual({
-        modifiers: [{ name: 'offset', options: { offset: [-147, 4] } }],
+      expect(findGlDisclosureDropdown().props('dropdownOffset')).toEqual({
+        crossAxis: -147,
+        mainAxis: 4,
       });
     });
 

spec/frontend/super_sidebar/components/help_center_spec.js

@@ -91,9 +91,10 @@ describe('HelpCenter component', () => {
       ]);
     });
 
-    it('passes popper options to the dropdown', () => {
-      expect(findDropdown().props('popperOptions')).toEqual({
-        modifiers: [{ name: 'offset', options: { offset: [-4, 4] } }],
+    it('passes custom offset to the dropdown', () => {
+      expect(findDropdown().props('dropdownOffset')).toEqual({
+        crossAxis: -4,
+        mainAxis: 4,
       });
     });
 

spec/frontend/super_sidebar/components/user_menu_spec.js

@@ -41,11 +41,12 @@ describe('UserMenu component', () => {
     trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
   };
 
-  it('passes popper options to the dropdown', () => {
+  it('passes custom offset to the dropdown', () => {
     createWrapper();
 
-    expect(findDropdown().props('popperOptions')).toEqual({
-      modifiers: [{ name: 'offset', options: { offset: [-211, 4] } }],
+    expect(findDropdown().props('dropdownOffset')).toEqual({
+      crossAxis: -211,
+      mainAxis: 4,
     });
   });