Merge branch '413478-pajamas-embed_dropdown' into 'master'

Migrates legacy dropdown in embed_dropdown

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/131584



Merged-by: Ankit Panchal <apanchal@gitlab.com>
Approved-by: Annabel Dunstone Gray <annabel.dunstone@gmail.com>
Approved-by: Ankit Panchal <apanchal@gitlab.com>
Approved-by: Minahil Nichols <minahilnichols@gitlab.com>
Reviewed-by: Artur Fedorov <afedorov@gitlab.com>
Reviewed-by: Ankit Panchal <apanchal@gitlab.com>
Co-authored-by: Artur Fedorov <afedorov@gitlab.com>

app/assets/javascripts/snippets/components/embed_dropdown.vue

 <script>
-import {
-  GlButton,
-  GlDropdown,
-  GlDropdownSectionHeader,
-  GlDropdownText,
-  GlFormInputGroup,
-  GlTooltipDirective,
-} from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown, GlFormInputGroup, GlTooltipDirective } from '@gitlab/ui';
 import { escape as esc } from 'lodash';
 import { __ } from '~/locale';
 
@@ -17,9 +10,7 @@ const MSG_COPY = __('Copy');
 export default {
   components: {
     GlButton,
-    GlDropdown,
-    GlDropdownSectionHeader,
-    GlDropdownText,
+    GlDisclosureDropdown,
     GlFormInputGroup,
   },
   directives: {
@@ -45,22 +36,16 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
-    right
-    :text="$options.MSG_EMBED"
-    menu-class="gl-px-1! gl-pb-5! gl-dropdown-menu-wide"
+  <gl-disclosure-dropdown
+    :auto-close="false"
+    fluid-width
+    placement="right"
+    :toggle-text="$options.MSG_EMBED"
   >
     <template v-for="{ name, value } in sections">
-      <gl-dropdown-section-header :key="`header_${name}`" data-testid="header">{{
-        name
-      }}</gl-dropdown-section-header>
-      <gl-dropdown-text
-        :key="`input_${name}`"
-        tag="div"
-        class="gl-dropdown-text-py-0 gl-dropdown-text-block"
-        data-testid="input"
-      >
-        <gl-form-input-group :value="value" readonly select-on-click :label="name">
+      <div :key="name" :data-testid="`section-${name}`" class="gl-px-4 gl-py-2">
+        <h5 class="gl-font-sm gl-mt-1 gl-mb-2" data-testid="header">{{ name }}</h5>
+        <gl-form-input-group class="gl-w-31" :value="value" readonly select-on-click :label="name">
           <template #append>
             <gl-button
               v-gl-tooltip.hover
@@ -73,7 +58,7 @@ export default {
             />
           </template>
         </gl-form-input-group>
-      </gl-dropdown-text>
+      </div>
     </template>
-  </gl-dropdown>
+  </gl-disclosure-dropdown>
 </template>

spec/frontend/snippets/components/embed_dropdown_spec.js

 import { GlFormInputGroup } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
 import { escape as esc } from 'lodash';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import { TEST_HOST } from 'helpers/test_constants';
 import EmbedDropdown from '~/snippets/components/embed_dropdown.vue';
 
@@ -10,56 +10,24 @@ describe('snippets/components/embed_dropdown', () => {
   let wrapper;
 
   const createComponent = () => {
-    wrapper = mount(EmbedDropdown, {
+    wrapper = shallowMountExtended(EmbedDropdown, {
       propsData: {
         url: TEST_URL,
       },
     });
   };
 
-  const findSectionsData = () => {
-    const sections = [];
-    let current = {};
-
-    wrapper.findAll('[data-testid="header"],[data-testid="input"]').wrappers.forEach((x) => {
-      const type = x.attributes('data-testid');
-
-      if (type === 'header') {
-        current = {
-          header: x.text(),
-        };
-
-        sections.push(current);
-      } else {
-        const value = x.findComponent(GlFormInputGroup).props('value');
-        const copyValue = x.find('button[title="Copy"]').attributes('data-clipboard-text');
-
-        Object.assign(current, {
-          value,
-          copyValue,
-        });
-      }
-    });
-
-    return sections;
-  };
+  const findEmbedSection = () => wrapper.findByTestId('section-Embed');
+  const findShareSection = () => wrapper.findByTestId('section-Share');
 
   it('renders dropdown items', () => {
     createComponent();
 
     const embedValue = `<script src="${esc(TEST_URL)}.js"></script>`;
 
-    expect(findSectionsData()).toEqual([
-      {
-        header: 'Embed',
-        value: embedValue,
-        copyValue: embedValue,
-      },
-      {
-        header: 'Share',
-        value: TEST_URL,
-        copyValue: TEST_URL,
-      },
-    ]);
+    expect(findEmbedSection().text()).toBe('Embed');
+    expect(findShareSection().text()).toBe('Share');
+    expect(findEmbedSection().findComponent(GlFormInputGroup).attributes('value')).toBe(embedValue);
+    expect(findShareSection().findComponent(GlFormInputGroup).attributes('value')).toBe(TEST_URL);
   });
 });