Merge branch '418064-convert-sites-actions-to-disclosure-dropdown' into 'master'

Geo Sites - Migrate GlDropdown

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



Merged-by: Payton Burdette <pburdette@gitlab.com>
Approved-by: Scott de Jonge <sdejonge@gitlab.com>
Approved-by: Payton Burdette <pburdette@gitlab.com>
Reviewed-by: Zack Cuddy <zcuddy@gitlab.com>
Reviewed-by: Scott de Jonge <sdejonge@gitlab.com>
Co-authored-by: Zachary Cuddy <zcuddy@gitlab.com>

ee/app/assets/javascripts/geo_sites/components/header/geo_site_actions_mobile.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 // eslint-disable-next-line no-restricted-imports
 import { mapGetters } from 'vuex';
 import { __ } from '~/locale';
@@ -7,13 +7,12 @@ import { __ } from '~/locale';
 export default {
   name: 'GeoSiteActionsMobile',
   i18n: {
+    toggleText: __('Actions'),
     editButtonLabel: __('Edit'),
     removeButtonLabel: __('Remove'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlIcon,
+    GlDisclosureDropdown,
   },
   props: {
     site: {
@@ -23,25 +22,39 @@ export default {
   },
   computed: {
     ...mapGetters(['canRemoveSite']),
+    dropdownItems() {
+      return [
+        {
+          text: this.$options.i18n.editButtonLabel,
+          href: this.site.webEditUrl,
+        },
+        {
+          text: this.$options.i18n.removeButtonLabel,
+          action: () => {
+            this.$emit('remove');
+          },
+          extraAttrs: {
+            'data-testid': 'geo-mobile-remove-action',
+            class: this.dropdownRemoveClass,
+            disabled: !this.canRemoveSite(this.site.id),
+          },
+        },
+      ];
+    },
     dropdownRemoveClass() {
-      return this.canRemoveSite(this.site.id) ? 'gl-text-red-500' : 'gl-text-gray-400';
+      return this.canRemoveSite(this.site.id) ? 'gl-text-red-500!' : 'gl-text-gray-400!';
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown toggle-class="gl-shadow-none! gl-bg-transparent! gl-p-3!" right>
-    <template #button-content>
-      <gl-icon name="ellipsis_h" />
-    </template>
-    <gl-dropdown-item :href="site.webEditUrl">{{ $options.i18n.editButtonLabel }}</gl-dropdown-item>
-    <gl-dropdown-item
-      :disabled="!canRemoveSite(site.id)"
-      data-testid="geo-mobile-remove-action"
-      @click="$emit('remove')"
-    >
-      <span :class="dropdownRemoveClass">{{ $options.i18n.removeButtonLabel }}</span>
-    </gl-dropdown-item>
-  </gl-dropdown>
+  <gl-disclosure-dropdown
+    icon="ellipsis_v"
+    :toggle-text="$options.i18n.toggleText"
+    text-sr-only
+    category="tertiary"
+    no-caret
+    :items="dropdownItems"
+  />
 </template>

ee/spec/frontend/geo_sites/components/header/geo_site_actions_mobile_spec.js

-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 import Vue from 'vue';
 // eslint-disable-next-line no-restricted-imports
 import Vuex from 'vuex';
-import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import GeoSiteActionsMobile from 'ee/geo_sites/components/header/geo_site_actions_mobile.vue';
 import { MOCK_PRIMARY_SITE } from 'ee_jest/geo_sites/mock_data';
 
@@ -15,7 +15,7 @@ describe('GeoSiteActionsMobile', () => {
     site: MOCK_PRIMARY_SITE,
   };
 
-  const createComponent = (props, getters) => {
+  const createComponent = (props, getters, mountFn = shallowMountExtended) => {
     const store = new Vuex.Store({
       getters: {
         canRemoveSite: () => () => true,
@@ -23,7 +23,7 @@ describe('GeoSiteActionsMobile', () => {
       },
     });
 
-    wrapper = shallowMountExtended(GeoSiteActionsMobile, {
+    wrapper = mountFn(GeoSiteActionsMobile, {
       store,
       propsData: {
         ...defaultProps,
@@ -32,11 +32,11 @@ describe('GeoSiteActionsMobile', () => {
     });
   };
 
-  const findGeoMobileActionsDropdown = () => wrapper.findComponent(GlDropdown);
-  const findGeoMobileActionsDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findGeoMobileActionsDisclosureDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+  const findGeoMobileActionsDisclosureDropdownItems = () =>
+    findGeoMobileActionsDisclosureDropdown().props('items');
   const findGeoMobileActionsRemoveDropdownItem = () =>
     wrapper.findByTestId('geo-mobile-remove-action');
-  const findGeoMobileActionsRemoveDropdownItemText = () => wrapper.findByText('Remove');
 
   describe('template', () => {
     describe('always', () => {
@@ -45,36 +45,41 @@ describe('GeoSiteActionsMobile', () => {
       });
 
       it('renders Dropdown', () => {
-        expect(findGeoMobileActionsDropdown().exists()).toBe(true);
+        expect(findGeoMobileActionsDisclosureDropdown().exists()).toBe(true);
       });
 
       it('renders an Edit and Remove dropdown item', () => {
-        expect(findGeoMobileActionsDropdownItems().wrappers.map((w) => w.text())).toStrictEqual([
-          'Edit',
-          'Remove',
-        ]);
+        expect(
+          findGeoMobileActionsDisclosureDropdownItems().map((item) => item.text),
+        ).toStrictEqual(['Edit', 'Remove']);
       });
 
       it('renders edit link correctly', () => {
-        expect(findGeoMobileActionsDropdownItems().at(0).attributes('href')).toBe(
+        expect(findGeoMobileActionsDisclosureDropdownItems()[0].href).toBe(
           MOCK_PRIMARY_SITE.webEditUrl,
         );
       });
+    });
+
+    describe('actions', () => {
+      beforeEach(() => {
+        createComponent(null, null, mountExtended);
+      });
 
       it('emits remove when remove button is clicked', () => {
-        findGeoMobileActionsRemoveDropdownItem().vm.$emit('click');
+        findGeoMobileActionsRemoveDropdownItem().trigger('click');
 
         expect(wrapper.emitted('remove')).toHaveLength(1);
       });
     });
 
     describe.each`
-      canRemoveSite | disabled     | dropdownClass
-      ${false}      | ${'true'}    | ${'gl-text-gray-400'}
-      ${true}       | ${undefined} | ${'gl-text-red-500'}
+      canRemoveSite | disabled      | dropdownClass
+      ${false}      | ${'disabled'} | ${'gl-text-gray-400!'}
+      ${true}       | ${undefined}  | ${'gl-text-red-500!'}
     `(`conditionally`, ({ canRemoveSite, disabled, dropdownClass }) => {
       beforeEach(() => {
-        createComponent({}, { canRemoveSite: () => () => canRemoveSite });
+        createComponent({}, { canRemoveSite: () => () => canRemoveSite }, mountExtended);
       });
 
       describe(`when canRemoveSite is ${canRemoveSite}`, () => {
@@ -82,7 +87,7 @@ describe('GeoSiteActionsMobile', () => {
           canRemoveSite ? 'not ' : ''
         }disable the Mobile Remove dropdown item and adds proper class`, () => {
           expect(findGeoMobileActionsRemoveDropdownItem().attributes('disabled')).toBe(disabled);
-          expect(findGeoMobileActionsRemoveDropdownItemText().classes(dropdownClass)).toBe(true);
+          expect(findGeoMobileActionsRemoveDropdownItem().classes(dropdownClass)).toBe(true);
         });
       });
     });