Replace deprecated cluster dropdowns with updated dropdowns

app/assets/javascripts/clusters/components/crossplane_provider_stack.vue

 <script>
-import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
 
 export default {
   name: 'CrossplaneProviderStack',
   components: {
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
   },
   props: {
@@ -67,21 +67,17 @@ export default {
     <label>
       {{ s__('ClusterIntegration|Enabled stack') }}
     </label>
-    <gl-deprecated-dropdown
+    <gl-dropdown
       :disabled="crossplane.installed"
       :text="dropdownText"
       toggle-class="dropdown-menu-toggle gl-field-error-outline"
       class="w-100"
       :class="{ 'gl-show-field-errors': validationError }"
     >
-      <gl-deprecated-dropdown-item
-        v-for="stack in stacks"
-        :key="stack.code"
-        @click="selectStack(stack)"
-      >
+      <gl-dropdown-item v-for="stack in stacks" :key="stack.code" @click="selectStack(stack)">
         <span class="ml-1">{{ stack.name }}</span>
-      </gl-deprecated-dropdown-item>
-    </gl-deprecated-dropdown>
+      </gl-dropdown-item>
+    </gl-dropdown>
     <span v-if="validationError" class="gl-field-error">{{ validationError }}</span>
     <p class="form-text text-muted">
       {{ s__(`You must select a stack for configuring your cloud provider. Learn more about`) }}

app/assets/javascripts/clusters/components/fluentd_output_settings.vue

 <script>
-import {
-  GlAlert,
-  GlButton,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
-  GlFormCheckbox,
-} from '@gitlab/ui';
+import { GlAlert, GlButton, GlDropdown, GlDropdownItem, GlFormCheckbox } from '@gitlab/ui';
 import { mapValues } from 'lodash';
 import { __ } from '~/locale';
 import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
@@ -17,8 +11,8 @@ export default {
   components: {
     GlAlert,
     GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlFormCheckbox,
   },
   props: {
@@ -203,15 +197,15 @@ export default {
         <label for="fluentd-protocol">
           <strong>{{ s__('ClusterIntegration|SIEM Protocol') }}</strong>
         </label>
-        <gl-deprecated-dropdown :text="protocolName" class="w-100">
-          <gl-deprecated-dropdown-item
+        <gl-dropdown :text="protocolName" class="w-100">
+          <gl-dropdown-item
             v-for="(value, index) in protocols"
             :key="index"
             @click="selectProtocol(value.toLowerCase())"
           >
             {{ value }}
-          </gl-deprecated-dropdown-item>
-        </gl-deprecated-dropdown>
+          </gl-dropdown-item>
+        </gl-dropdown>
       </div>
       <div class="form-group flex flex-wrap">
         <gl-form-checkbox :checked="wafLogEnabled" @input="wafLogChanged">

app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue

@@ -6,8 +6,8 @@ import {
   GlLink,
   GlToggle,
   GlButton,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownItem,
   GlIcon,
 } from '@gitlab/ui';
 import modSecurityLogo from 'images/cluster_app_logos/gitlab.png';
@@ -26,8 +26,8 @@ export default {
     GlLink,
     GlToggle,
     GlButton,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownItem,
     GlIcon,
   },
   props: {
@@ -221,15 +221,11 @@ export default {
                   </strong>
                 </p>
               </div>
-              <gl-deprecated-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled">
-                <gl-deprecated-dropdown-item
-                  v-for="(mode, key) in modes"
-                  :key="key"
-                  @click="selectMode(key)"
-                >
+              <gl-dropdown :text="modSecurityModeName" :disabled="saveButtonDisabled">
+                <gl-dropdown-item v-for="(mode, key) in modes" :key="key" @click="selectMode(key)">
                   {{ mode.name }}
-                </gl-deprecated-dropdown-item>
-              </gl-deprecated-dropdown>
+                </gl-dropdown-item>
+              </gl-dropdown>
             </div>
           </div>
           <div v-if="showButtons" class="gl-mt-5 gl-display-flex">

app/assets/javascripts/clusters/components/knative_domain_editor.vue

 <script>
 import {
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownDivider,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownDivider,
+  GlDropdownItem,
   GlLoadingIcon,
   GlSearchBoxByType,
   GlSprintf,
@@ -20,9 +20,9 @@ export default {
     GlButton,
     ClipboardButton,
     GlLoadingIcon,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownDivider,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownDivider,
+    GlDropdownItem,
     GlSearchBoxByType,
     GlSprintf,
   },
@@ -121,7 +121,7 @@ export default {
         <strong>{{ s__('ClusterIntegration|Knative Domain Name:') }}</strong>
       </label>
 
-      <gl-deprecated-dropdown
+      <gl-dropdown
         v-if="showDomainsDropdown"
         :text="domainDropdownText"
         toggle-class="dropdown-menu-toggle"
@@ -132,16 +132,16 @@ export default {
           :placeholder="s__('ClusterIntegration|Search domains')"
           class="gl-m-3"
         />
-        <gl-deprecated-dropdown-item
+        <gl-dropdown-item
           v-for="domain in filteredDomains"
           :key="domain.id"
           @click="selectDomain(domain)"
         >
           <span class="ml-1">{{ domain.domain }}</span>
-        </gl-deprecated-dropdown-item>
+        </gl-dropdown-item>
         <template v-if="searchQuery">
-          <gl-deprecated-dropdown-divider />
-          <gl-deprecated-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)">
+          <gl-dropdown-divider />
+          <gl-dropdown-item key="custom-domain" @click="selectCustomDomain(searchQuery)">
             <span class="ml-1">
               <gl-sprintf :message="s__('ClusterIntegration|Use %{query}')">
                 <template #query>
@@ -149,9 +149,9 @@ export default {
                 </template>
               </gl-sprintf>
             </span>
-          </gl-deprecated-dropdown-item>
+          </gl-dropdown-item>
         </template>
-      </gl-deprecated-dropdown>
+      </gl-dropdown>
 
       <input
         v-else

changelogs/unreleased/Replace-GlDeprecatedDropdown-with-GlDropdown-in-app-assets-javascripts-cl.yml

+---
+title: Replace deprecated cluster dropdowns with updated dropdowns
+merge_request: 41414
+author: nuwe1
+type: other

spec/frontend/clusters/components/fluentd_output_settings_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlDeprecatedDropdown, GlFormCheckbox } from '@gitlab/ui';
+import { GlAlert, GlDropdown, GlFormCheckbox } from '@gitlab/ui';
 import FluentdOutputSettings from '~/clusters/components/fluentd_output_settings.vue';
 import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
 import eventHub from '~/clusters/event_hub';
@@ -36,7 +36,7 @@ describe('FluentdOutputSettings', () => {
   };
   const findSaveButton = () => wrapper.find({ ref: 'saveBtn' });
   const findCancelButton = () => wrapper.find({ ref: 'cancelBtn' });
-  const findProtocolDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findProtocolDropdown = () => wrapper.find(GlDropdown);
   const findCheckbox = name =>
     wrapper.findAll(GlFormCheckbox).wrappers.find(x => x.text() === name);
   const findHost = () => wrapper.find('#fluentd-host');

spec/frontend/clusters/components/ingress_modsecurity_settings_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlAlert, GlToggle, GlDeprecatedDropdown } from '@gitlab/ui';
+import { GlAlert, GlToggle, GlDropdown } from '@gitlab/ui';
 import IngressModsecuritySettings from '~/clusters/components/ingress_modsecurity_settings.vue';
 import { APPLICATION_STATUS, INGRESS } from '~/clusters/constants';
 import eventHub from '~/clusters/event_hub';
@@ -33,7 +33,7 @@ describe('IngressModsecuritySettings', () => {
   const findCancelButton = () =>
     wrapper.find('[data-qa-selector="cancel_ingress_modsecurity_settings"]');
   const findModSecurityToggle = () => wrapper.find(GlToggle);
-  const findModSecurityDropdown = () => wrapper.find(GlDeprecatedDropdown);
+  const findModSecurityDropdown = () => wrapper.find(GlDropdown);
 
   describe('when ingress is installed', () => {
     beforeEach(() => {

spec/frontend/clusters/components/knative_domain_editor_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDropdownItem, GlButton } from '@gitlab/ui';
 import KnativeDomainEditor from '~/clusters/components/knative_domain_editor.vue';
 import { APPLICATION_STATUS } from '~/clusters/constants';
 
@@ -112,7 +112,7 @@ describe('KnativeDomainEditor', () => {
       createComponent({ knative: { ...knative, availableDomains: [newDomain] } });
       jest.spyOn(wrapper.vm, 'selectDomain');
 
-      wrapper.find(GlDeprecatedDropdownItem).vm.$emit('click');
+      wrapper.find(GlDropdownItem).vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.selectDomain).toHaveBeenCalledWith(newDomain);

spec/frontend/clusters/services/crossplane_provider_stack_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 import CrossplaneProviderStack from '~/clusters/components/crossplane_provider_stack.vue';
 
 describe('CrossplaneProviderStack component', () => {
@@ -37,7 +37,7 @@ describe('CrossplaneProviderStack component', () => {
     createComponent({ crossplane });
   });
 
-  const findDropdownElements = () => wrapper.findAll(GlDeprecatedDropdownItem);
+  const findDropdownElements = () => wrapper.findAll(GlDropdownItem);
   const findFirstDropdownElement = () => findDropdownElements().at(0);
 
   afterEach(() => {