Merge branch 'replace-glbutton-geo-form-namespaces' into 'master'

Added GlDropdown geo node form

See merge request gitlab-org/gitlab!40632

ee/app/assets/javascripts/geo_node_form/components/geo_node_form_namespaces.vue

 <script>
-import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown, GlDeprecatedButton } from '@gitlab/ui';
+import { GlIcon, GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
 import { mapActions, mapState } from 'vuex';
 import { __, n__ } from '~/locale';
 import { SELECTIVE_SYNC_NAMESPACES } from '../constants';
@@ -9,8 +9,7 @@ export default {
   components: {
     GlIcon,
     GlSearchBoxByType,
-    GlDeprecatedDropdown,
-    GlDeprecatedButton,
+    GlDropdown,
   },
   props: {
     selectedNamespaces: {
@@ -48,14 +47,21 @@ export default {
 </script>
 
 <template>
-  <gl-deprecated-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
-    <gl-search-box-by-type class="gl-m-3" :debounce="500" @input="fetchSyncNamespaces" />
-    <li v-for="namespace in synchronizationNamespaces" :key="namespace.id">
-      <gl-deprecated-button class="d-flex align-items-center" @click="toggleNamespace(namespace)">
-        <gl-icon :class="[{ invisible: !isSelected(namespace) }]" name="mobile-issue-close" />
-        <span class="ml-1">{{ namespace.name }}</span>
-      </gl-deprecated-button>
-    </li>
-    <div v-if="noSyncNamespaces" class="text-secondary p-2">{{ __('Nothing found…') }}</div>
-  </gl-deprecated-dropdown>
+  <gl-dropdown :text="dropdownTitle" @show="fetchSyncNamespaces('')">
+    <gl-search-box-by-type class=".gl-m-3" :debounce="500" @input="fetchSyncNamespaces" />
+    <button
+      v-for="namespace in synchronizationNamespaces"
+      :key="namespace.id"
+      class="dropdown-item"
+      type="button"
+      @click="toggleNamespace(namespace)"
+    >
+      <gl-icon
+        :class="[{ 'gl-visibility-hidden': !isSelected(namespace) }]"
+        name="mobile-issue-close"
+      />
+      <span class="gl-ml-2">{{ namespace.name }}</span>
+    </button>
+    <div v-if="noSyncNamespaces" class="gl-text-gray-500 gl-p-3">{{ __('Nothing found…') }}</div>
+  </gl-dropdown>
 </template>

ee/spec/frontend/geo_node_form/components/geo_node_form_namespaces_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { GlIcon, GlSearchBoxByType, GlDeprecatedDropdown } from '@gitlab/ui';
+import { GlIcon, GlSearchBoxByType, GlDropdown } from '@gitlab/ui';
 import GeoNodeFormNamespaces from 'ee/geo_node_form/components/geo_node_form_namespaces.vue';
 import { MOCK_SYNC_NAMESPACES } from '../mock_data';
 
@@ -45,9 +45,9 @@ describe('GeoNodeFormNamespaces', () => {
     wrapper.destroy();
   });
 
-  const findGlDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findGlDropdown = () => wrapper.find(GlDropdown);
   const findGlDropdownSearch = () => findGlDropdown().find(GlSearchBoxByType);
-  const findDropdownItems = () => findGlDropdown().findAll('li');
+  const findDropdownItems = () => findGlDropdown().findAll('button');
   const findDropdownItemsText = () => findDropdownItems().wrappers.map(w => w.text());
   const findGlIcons = () => wrapper.findAll(GlIcon);
 
@@ -98,7 +98,7 @@ describe('GeoNodeFormNamespaces', () => {
       });
 
       it('hides GlIcon if namespace not in selectedNamespaces', () => {
-        expect(findGlIcons().wrappers.every(w => w.classes('invisible'))).toBe(true);
+        expect(findGlIcons().wrappers.every(w => w.classes('gl-visibility-hidden'))).toBe(true);
       });
     });
   });