Rename GlDropdown to GlDeprecatedDropdown

The GlDropdown component has been deprecated in favor of
GlNewDropdown. During this transition GlDropdown has been
renamed to GlDeprecatedDropdown. This rename effects
GlDropdownItem, GlDropdownHeader, and GlDropdownDivider
as well.

app/assets/javascripts/alert_management/components/alert_status.vue

 <script>
-import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Tracking from '~/tracking';
 import { trackAlertStatusUpdateOptions } from '../constants';
@@ -18,8 +18,8 @@ export default {
     RESOLVED: s__('AlertManagement|Resolved'),
   },
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlButton,
   },
   props: {
@@ -91,7 +91,7 @@ export default {
 <template>
   <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-    <gl-dropdown
+    <gl-deprecated-dropdown
       ref="dropdown"
       right
       :text="$options.statuses[alert.status]"
@@ -112,7 +112,7 @@ export default {
         />
       </div>
       <div class="dropdown-content dropdown-body">
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="(label, field) in $options.statuses"
           :key="field"
           data-testid="statusDropdownItem"
@@ -122,8 +122,8 @@ export default {
           @click="updateAlertStatus(label)"
         >
           {{ label }}
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
       </div>
-    </gl-dropdown>
+    </gl-deprecated-dropdown>
   </div>
 </template>

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignee.vue

 <script>
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdownItem } from '@gitlab/ui';
 export default {
   components: {
-    GlDropdownItem,
+    GlDeprecatedDropdownItem,
   },
   props: {
     user: {
@@ -24,7 +24,7 @@ export default {
 </script>
 <template>
-  <gl-dropdown-item
+  <gl-deprecated-dropdown-item
     :key="user.username"
     data-testid="assigneeDropdownItem"
     class="assignee-dropdown-item gl-vertical-align-middle"
@@ -47,5 +47,5 @@ export default {
       </strong>
       <span class="dropdown-menu-user-username"> {{ user.username }}</span>
     </span>
-  </gl-dropdown-item>
+  </gl-deprecated-dropdown-item>
 </template>

app/assets/javascripts/alert_management/components/sidebar/sidebar_assignees.vue

 <script>
 import {
   GlIcon,
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownHeader,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
   GlLoadingIcon,
   GlTooltip,
   GlButton,
@@ -33,10 +33,10 @@ export default {
   },
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
-    GlDropdownHeader,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownHeader,
     GlLoadingIcon,
     GlTooltip,
     GlButton,
@@ -213,7 +213,7 @@ export default {
       </p>
       <div class="dropdown dropdown-menu-selectable" :class="dropdownClass">
-        <gl-dropdown
+        <gl-deprecated-dropdown
           ref="dropdown"
           :text="assignedUser"
           class="w-100"
@@ -243,18 +243,18 @@ export default {
           </div>
           <div class="dropdown-content dropdown-body">
             <template v-if="userListValid">
-              <gl-dropdown-item
+              <gl-deprecated-dropdown-item
                 :active="!userName"
                 active-class="is-active"
                 @click="updateAlertAssignees('')"
               >
                 {{ __('Unassigned') }}
-              </gl-dropdown-item>
-              <gl-dropdown-divider />
-              <gl-dropdown-header class="mt-0">
+              </gl-deprecated-dropdown-item>
+              <gl-deprecated-dropdown-divider />
+              <gl-deprecated-dropdown-header class="mt-0">
                 {{ __('Assignee') }}
-              </gl-dropdown-header>
+              </gl-deprecated-dropdown-header>
               <sidebar-assignee
                 v-for="user in sortedUsers"
                 :key="user.username"
@@ -263,12 +263,12 @@ export default {
                 @update-alert-assignees="updateAlertAssignees"
               />
             </template>
-            <gl-dropdown-item v-else-if="userListEmpty">
+            <gl-deprecated-dropdown-item v-else-if="userListEmpty">
               {{ __('No Matching Results') }}
-            </gl-dropdown-item>
+            </gl-deprecated-dropdown-item>
             <gl-loading-icon v-else />
           </div>
-        </gl-dropdown>
+        </gl-deprecated-dropdown>
       </div>
       <gl-loading-icon v-if="isUpdating" :inline="true" />

app/assets/javascripts/boards/components/boards_selector.vue

@@ -3,10 +3,10 @@ import { throttle } from 'lodash';
 import {
   GlLoadingIcon,
   GlSearchBoxByType,
-  GlDropdown,
-  GlDropdownDivider,
-  GlDropdownHeader,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownDivider,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
 } from '@gitlab/ui';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -26,10 +26,10 @@ export default {
     BoardForm,
     GlLoadingIcon,
     GlSearchBoxByType,
-    GlDropdown,
-    GlDropdownDivider,
-    GlDropdownHeader,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownDivider,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
   },
   props: {
     currentBoard: {
@@ -235,7 +235,7 @@ export default {
 <template>
   <div class="boards-switcher js-boards-selector gl-mr-3">
     <span class="boards-selector-wrapper js-boards-selector-wrapper">
-      <gl-dropdown
+      <gl-deprecated-dropdown
         data-qa-selector="boards_dropdown"
         toggle-class="dropdown-menu-toggle js-dropdown-toggle"
         menu-class="flex-column dropdown-extended-height"
@@ -248,9 +248,9 @@ export default {
           </div>
         </div>
-        <gl-dropdown-header class="mt-0">
+        <gl-deprecated-dropdown-header class="mt-0">
           <gl-search-box-by-type ref="searchBox" v-model="filterTerm" />
-        </gl-dropdown-header>
+        </gl-deprecated-dropdown-header>
         <div
           v-if="!loading"
@@ -259,26 +259,26 @@ export default {
           class="dropdown-content flex-fill"
           @scroll.passive="throttledSetScrollFade"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-show="filteredBoards.length === 0"
             class="no-pointer-events text-secondary"
           >
             {{ s__('IssueBoards|No matching boards found') }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
           <h6 v-if="showRecentSection" class="dropdown-bold-header my-0">
             {{ __('Recent') }}
           </h6>
           <template v-if="showRecentSection">
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               v-for="recentBoard in recentBoards"
               :key="`recent-${recentBoard.id}`"
               class="js-dropdown-item"
               :href="`${boardBaseUrl}/${recentBoard.id}`"
             >
               {{ recentBoard.name }}
-            </gl-dropdown-item>
+            </gl-deprecated-dropdown-item>
           </template>
           <hr v-if="showRecentSection" class="my-1" />
@@ -287,21 +287,21 @@ export default {
             {{ __('All') }}
           </h6>
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="otherBoard in filteredBoards"
             :key="otherBoard.id"
             class="js-dropdown-item"
             :href="`${boardBaseUrl}/${otherBoard.id}`"
           >
             {{ otherBoard.name }}
-          </gl-dropdown-item>
-          <gl-dropdown-item v-if="hasMissingBoards" class="small unclickable">
+          </gl-deprecated-dropdown-item>
+          <gl-deprecated-dropdown-item v-if="hasMissingBoards" class="small unclickable">
             {{
               s__(
                 'IssueBoards|Some of your boards are hidden, activate a license to see them again.',
               )
             }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
         </div>
         <div
@@ -313,25 +313,25 @@ export default {
         <gl-loading-icon v-if="loading" />
         <div v-if="canAdminBoard">
-          <gl-dropdown-divider />
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-divider />
+          <gl-deprecated-dropdown-item
             v-if="multipleIssueBoardsAvailable"
             data-qa-selector="create_new_board_button"
             @click.prevent="showPage('new')"
           >
             {{ s__('IssueBoards|Create new board') }}
-          </gl-dropdown-item>
-          <gl-dropdown-item
+          </gl-deprecated-dropdown-item>
+          <gl-deprecated-dropdown-item
             v-if="showDelete"
             class="text-danger js-delete-board"
             @click.prevent="showPage('delete')"
           >
             {{ s__('IssueBoards|Delete board') }}
-          </gl-dropdown-item>
+          </gl-deprecated-dropdown-item>
         </div>
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
       <board-form
         v-if="currentPage"

app/assets/javascripts/ci_variable_list/components/ci_environments_dropdown.vue

 <script>
 import {
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlSearchBoxByType,
   GlIcon,
 } from '@gitlab/ui';
@@ -12,9 +12,9 @@ import { mapGetters } from 'vuex';
 export default {
   name: 'CiEnvironmentsDropdown',
   components: {
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlSearchBoxByType,
     GlIcon,
   },
@@ -66,9 +66,9 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown :text="value">
+  <gl-deprecated-dropdown :text="value">
     <gl-search-box-by-type v-model.trim="searchTerm" class="m-2" />
-    <gl-dropdown-item
+    <gl-deprecated-dropdown-item
       v-for="environment in filteredResults"
       :key="environment"
       @click="selectEnvironment(environment)"
@@ -79,15 +79,15 @@ export default {
         class="vertical-align-middle"
       />
       {{ environment }}
-    </gl-dropdown-item>
-    <gl-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
+    </gl-deprecated-dropdown-item>
+    <gl-deprecated-dropdown-item v-if="!filteredResults.length" ref="noMatchingResults">{{
       __('No matching results')
-    }}</gl-dropdown-item>
+    }}</gl-deprecated-dropdown-item>
     <template v-if="shouldRenderCreateButton">
-      <gl-dropdown-divider />
-      <gl-dropdown-item @click="createClicked">
+      <gl-deprecated-dropdown-divider />
+      <gl-deprecated-dropdown-item @click="createClicked">
         {{ composedCreateButtonLabel }}
-      </gl-dropdown-item>
+      </gl-deprecated-dropdown-item>
     </template>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>

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

 <script>
-import { GlDropdown, GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem, GlIcon } from '@gitlab/ui';
 import { s__ } from '../../locale';
 export default {
   name: 'CrossplaneProviderStack',
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlIcon,
   },
   props: {
@@ -67,17 +67,21 @@ export default {
     <label>
       {{ s__('ClusterIntegration|Enabled stack') }}
     </label>
-    <gl-dropdown
+    <gl-deprecated-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-dropdown-item v-for="stack in stacks" :key="stack.code" @click="selectStack(stack)">
+      <gl-deprecated-dropdown-item
+        v-for="stack in stacks"
+        :key="stack.code"
+        @click="selectStack(stack)"
+      >
         <span class="ml-1">{{ stack.name }}</span>
-      </gl-dropdown-item>
-    </gl-dropdown>
+      </gl-deprecated-dropdown-item>
+    </gl-deprecated-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

@@ -4,8 +4,8 @@ import { APPLICATION_STATUS, FLUENTD } from '~/clusters/constants';
 import {
   GlAlert,
   GlDeprecatedButton,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlFormCheckbox,
 } from '@gitlab/ui';
 import eventHub from '~/clusters/event_hub';
@@ -17,8 +17,8 @@ export default {
   components: {
     GlAlert,
     GlDeprecatedButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlFormCheckbox,
   },
   props: {
@@ -203,15 +203,15 @@ export default {
         <label for="fluentd-protocol">
           <strong>{{ s__('ClusterIntegration|SIEM Protocol') }}</strong>
         </label>
-        <gl-dropdown :text="protocolName" class="w-100">
-          <gl-dropdown-item
+        <gl-deprecated-dropdown :text="protocolName" class="w-100">
+          <gl-deprecated-dropdown-item
             v-for="(value, index) in protocols"
             :key="index"
             @click="selectProtocol(value.toLowerCase())"
           >
             {{ value }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-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

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

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

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

app/assets/javascripts/confidential_merge_request/components/dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     Icon,
   },
   props: {
@@ -38,7 +38,7 @@ export default {
 </script>
 <template>
-  <gl-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
+  <gl-deprecated-dropdown toggle-class="d-flex align-items-center w-100" class="w-100">
     <template #button-content>
       <span class="str-truncated-100 mr-2">
         <icon name="lock" />
@@ -46,13 +46,17 @@ export default {
       </span>
       <icon name="chevron-down" class="ml-auto" />
     </template>
-    <gl-dropdown-item v-for="project in projects" :key="project.id" @click="selectProject(project)">
+    <gl-deprecated-dropdown-item
+      v-for="project in projects"
+      :key="project.id"
+      @click="selectProject(project)"
+    >
       <icon
         name="mobile-issue-close"
         :class="{ icon: project.id !== selectedProject.id }"
         class="js-active-project-check"
       />
       <span class="ml-1">{{ project.name }}</span>
-    </gl-dropdown-item>
-  </gl-dropdown>
+    </gl-deprecated-dropdown-item>
+  </gl-deprecated-dropdown>
 </template>

app/assets/javascripts/design_management/components/upload/design_version_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import allVersionsMixin from '../../mixins/all_versions';
 import { findVersionId } from '../../utils/design_management_utils';
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   mixins: [allVersionsMixin],
   computed: {
@@ -50,8 +50,8 @@ export default {
 </script>
 <template>
-  <gl-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
-    <gl-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
+  <gl-deprecated-dropdown :text="dropdownText" variant="link" class="design-version-dropdown">
+    <gl-deprecated-dropdown-item v-for="(version, index) in allVersions" :key="version.node.id">
       <router-link
         class="d-flex js-version-link"
         :to="{ path: $route.path, query: { version: findVersionId(version.node.id) } }"
@@ -71,6 +71,6 @@ export default {
           class="fa fa-check pull-right"
         ></i>
       </router-link>
-    </gl-dropdown-item>
-  </gl-dropdown>
+    </gl-deprecated-dropdown-item>
+  </gl-deprecated-dropdown>
 </template>

app/assets/javascripts/error_tracking/components/error_details.vue

@@ -9,9 +9,9 @@ import {
   GlBadge,
   GlAlert,
   GlSprintf,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
 } from '@gitlab/ui';
 import { __, sprintf, n__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -43,9 +43,9 @@ export default {
     GlBadge,
     GlAlert,
     GlSprintf,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     TimeAgoTooltip,
   },
   directives: {
@@ -331,38 +331,38 @@ export default {
               </gl-button>
             </form>
           </div>
-          <gl-dropdown
+          <gl-deprecated-dropdown
             text="Options"
             class="error-details-options d-md-none"
             right
             :disabled="issueUpdateInProgress"
           >
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               data-qa-selector="update_ignore_status_button"
               @click="onIgnoreStatusUpdate"
-              >{{ ignoreBtnLabel }}</gl-dropdown-item
+              >{{ ignoreBtnLabel }}</gl-deprecated-dropdown-item
             >
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               data-qa-selector="update_resolve_status_button"
               @click="onResolveStatusUpdate"
-              >{{ resolveBtnLabel }}</gl-dropdown-item
+              >{{ resolveBtnLabel }}</gl-deprecated-dropdown-item
             >
-            <gl-dropdown-divider />
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-divider />
+            <gl-deprecated-dropdown-item
               v-if="error.gitlabIssuePath"
               data-qa-selector="view_issue_button"
               :href="error.gitlabIssuePath"
               variant="success"
-              >{{ __('View issue') }}</gl-dropdown-item
+              >{{ __('View issue') }}</gl-deprecated-dropdown-item
             >
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               v-if="!error.gitlabIssuePath"
               :loading="issueCreationInProgress"
               data-qa-selector="create_issue_button"
               @click="createIssue"
-              >{{ __('Create issue') }}</gl-dropdown-item
+              >{{ __('Create issue') }}</gl-deprecated-dropdown-item
             >
-          </gl-dropdown>
+          </gl-deprecated-dropdown>
         </div>
       </div>
       <div>

app/assets/javascripts/error_tracking/components/error_tracking_list.vue

@@ -8,9 +8,9 @@ import {
   GlLoadingIcon,
   GlTable,
   GlFormInput,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlTooltipDirective,
   GlPagination,
 } from '@gitlab/ui';
@@ -72,9 +72,9 @@ export default {
   components: {
     GlEmptyState,
     GlButton,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlIcon,
     GlLink,
     GlLoadingIcon,
@@ -233,7 +233,7 @@ export default {
       >
         <div class="search-box flex-fill mb-1 mb-md-0">
           <div class="filtered-search-box mb-0">
-            <gl-dropdown
+            <gl-deprecated-dropdown
               :text="__('Recent searches')"
               class="filtered-search-history-dropdown-wrapper"
               toggle-class="filtered-search-history-dropdown-toggle-button"
@@ -243,19 +243,19 @@ export default {
                 {{ __('This feature requires local storage to be enabled') }}
               </div>
               <template v-else-if="recentSearches.length > 0">
-                <gl-dropdown-item
+                <gl-deprecated-dropdown-item
                   v-for="searchQuery in recentSearches"
                   :key="searchQuery"
                   @click="setSearchText(searchQuery)"
                   >{{ searchQuery }}
-                </gl-dropdown-item>
-                <gl-dropdown-divider />
-                <gl-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
+                </gl-deprecated-dropdown-item>
+                <gl-deprecated-dropdown-divider />
+                <gl-deprecated-dropdown-item ref="clearRecentSearches" @click="clearRecentSearches"
                   >{{ __('Clear recent searches') }}
-                </gl-dropdown-item>
+                </gl-deprecated-dropdown-item>
               </template>
               <div v-else class="px-3">{{ __("You don't have any recent searches") }}</div>
-            </gl-dropdown>
+            </gl-deprecated-dropdown>
             <div class="filtered-search-input-container flex-fill">
               <gl-form-input
                 v-model="errorSearchQuery"
@@ -280,13 +280,13 @@ export default {
           </div>
         </div>
-        <gl-dropdown
+        <gl-deprecated-dropdown
           :text="$options.statusFilters[statusFilter]"
           class="status-dropdown mx-md-1 mb-1 mb-md-0"
           menu-class="dropdown"
           :disabled="loading"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="(label, status) in $options.statusFilters"
             :key="status"
             @click="filterErrors(status, label)"
@@ -299,16 +299,16 @@ export default {
               />
               {{ label }}
             </span>
-          </gl-dropdown-item>
-        </gl-dropdown>
-        <gl-dropdown
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
+        <gl-deprecated-dropdown
           :text="$options.sortFields[sortField]"
           left
           :disabled="loading"
           menu-class="dropdown"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="(label, field) in $options.sortFields"
             :key="field"
             @click="sortByField(field)"
@@ -321,8 +321,8 @@ export default {
               />
               {{ label }}
             </span>
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </div>
       <div v-if="loading" class="py-3">

app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 import { getDisplayName } from '../utils';
 export default {
   components: {
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   props: {
     dropdownLabel: {
@@ -52,7 +52,7 @@ export default {
   <div :class="{ 'gl-show-field-errors': isProjectInvalid }">
     <label class="label-bold" for="project-dropdown">{{ __('Project') }}</label>
     <div class="row">
-      <gl-dropdown
+      <gl-deprecated-dropdown
         id="project-dropdown"
         class="col-8 col-md-9 gl-pr-0"
         :disabled="!hasProjects"
@@ -60,14 +60,14 @@ export default {
         toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
         :text="dropdownLabel"
       >
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="project in projects"
           :key="`${project.organizationSlug}.${project.slug}`"
           class="w-100"
           @click="$emit('select-project', project)"
-          >{{ getDisplayName(project) }}</gl-dropdown-item
+          >{{ getDisplayName(project) }}</gl-deprecated-dropdown-item
         >
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
     </div>
     <p v-if="isProjectInvalid" class="js-project-dropdown-error gl-field-error">
       {{ invalidProjectLabel }}

app/assets/javascripts/logs/components/environment_logs.vue

@@ -5,10 +5,10 @@ import {
   GlSprintf,
   GlIcon,
   GlAlert,
-  GlDropdown,
-  GlDropdownHeader,
-  GlDropdownItem,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownDivider,
   GlInfiniteScroll,
 } from '@gitlab/ui';
@@ -25,10 +25,10 @@ export default {
     GlSprintf,
     GlIcon,
     GlAlert,
-    GlDropdown,
-    GlDropdownHeader,
-    GlDropdownItem,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownDivider,
     GlInfiniteScroll,
     LogSimpleFilters,
     LogAdvancedFilters,
@@ -174,16 +174,16 @@ export default {
     <div class="top-bar d-md-flex border bg-secondary-50 pt-2 pr-1 pb-0 pl-2">
       <div class="flex-grow-0">
-        <gl-dropdown
+        <gl-deprecated-dropdown
           id="environments-dropdown"
           :text="environments.current || managedApps.current"
           :disabled="environments.isLoading"
           class="mb-2 gl-h-32 pr-2 d-flex d-md-block js-environments-dropdown"
         >
-          <gl-dropdown-header class="gl-text-center">
+          <gl-deprecated-dropdown-header class="gl-text-center">
             {{ s__('Environments|Environments') }}
-          </gl-dropdown-header>
-          <gl-dropdown-item
+          </gl-deprecated-dropdown-header>
+          <gl-deprecated-dropdown-item
             v-for="env in environments.options"
             :key="env.id"
             @click="showEnvironment(env.name)"
@@ -195,12 +195,12 @@ export default {
               />
               <div class="gl-flex-grow-1">{{ env.name }}</div>
             </div>
-          </gl-dropdown-item>
-          <gl-dropdown-divider />
-          <gl-dropdown-header class="gl-text-center">
+          </gl-deprecated-dropdown-item>
+          <gl-deprecated-dropdown-divider />
+          <gl-deprecated-dropdown-header class="gl-text-center">
             {{ s__('Environments|Managed apps') }}
-          </gl-dropdown-header>
-          <gl-dropdown-item
+          </gl-deprecated-dropdown-header>
+          <gl-deprecated-dropdown-item
             v-for="app in managedApps.options"
             :key="app.id"
             @click="showManagedApp(app.name)"
@@ -212,8 +212,8 @@ export default {
               />
               <div class="gl-flex-grow-1">{{ app.name }}</div>
             </div>
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </div>
       <log-advanced-filters

app/assets/javascripts/logs/components/log_simple_filters.vue

 <script>
 import { s__ } from '~/locale';
 import { mapActions, mapState } from 'vuex';
-import { GlIcon, GlDropdown, GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
+import {
+  GlIcon,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownItem,
+} from '@gitlab/ui';
 export default {
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownHeader,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownItem,
   },
   props: {
     disabled: {
@@ -39,22 +44,22 @@ export default {
 </script>
 <template>
   <div>
-    <gl-dropdown
+    <gl-deprecated-dropdown
       ref="podsDropdown"
       :text="podDropdownText"
       :disabled="disabled"
       class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
     >
-      <gl-dropdown-header class="text-center">
+      <gl-deprecated-dropdown-header class="text-center">
         {{ s__('Environments|Select pod') }}
-      </gl-dropdown-header>
-      <gl-dropdown-item v-if="!pods.options.length" disabled>
+      </gl-deprecated-dropdown-header>
+      <gl-deprecated-dropdown-item v-if="!pods.options.length" disabled>
         <span ref="noPodsMsg" class="text-muted">
           {{ s__('Environments|No pods to display') }}
         </span>
-      </gl-dropdown-item>
-      <gl-dropdown-item
+      </gl-deprecated-dropdown-item>
+      <gl-deprecated-dropdown-item
         v-for="podName in pods.options"
         :key="podName"
         class="text-nowrap"
@@ -67,7 +72,7 @@ export default {
           />
           <div class="flex-grow-1">{{ podName }}</div>
         </div>
-      </gl-dropdown-item>
-    </gl-dropdown>
+      </gl-deprecated-dropdown-item>
+    </gl-deprecated-dropdown>
   </div>
 </template>

app/assets/javascripts/monitoring/components/alert_widget_form.vue

@@ -7,8 +7,8 @@ import {
   GlButtonGroup,
   GlFormGroup,
   GlFormInput,
-  GlDropdown,
-  GlDropdownItem,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
   GlModal,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -40,8 +40,8 @@ export default {
     GlButtonGroup,
     GlFormGroup,
     GlFormInput,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
     GlModal,
     GlLink,
     Icon,
@@ -244,20 +244,20 @@ export default {
         </template>
       </gl-form-group>
       <gl-form-group v-else label-for="alert-query-dropdown" :label="$options.alertQueryText.label">
-        <gl-dropdown
+        <gl-deprecated-dropdown
           id="alert-query-dropdown"
           :text="queryDropdownLabel"
           toggle-class="dropdown-menu-toggle qa-alert-query-dropdown"
         >
-          <gl-dropdown-item
+          <gl-deprecated-dropdown-item
             v-for="query in relevantQueries"
             :key="query.metricId"
             data-qa-selector="alert_query_option"
             @click="selectQuery(query.metricId)"
           >
             {{ query.label }}
-          </gl-dropdown-item>
-        </gl-dropdown>
+          </gl-deprecated-dropdown-item>
+        </gl-deprecated-dropdown>
       </gl-form-group>
       <gl-button-group class="mb-2" :label="s__('PrometheusAlerts|Operator')">
         <gl-deprecated-button

app/assets/javascripts/monitoring/components/dashboard_header.vue

@@ -5,10 +5,10 @@ import {
   GlButton,
   GlIcon,
   GlDeprecatedButton,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownHeader,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownDivider,
   GlNewDropdown,
   GlNewDropdownDivider,
   GlNewDropdownItem,
@@ -41,11 +41,11 @@ export default {
     GlButton,
     GlIcon,
     GlDeprecatedButton,
-    GlDropdown,
+    GlDeprecatedDropdown,
     GlLoadingIcon,
-    GlDropdownItem,
-    GlDropdownHeader,
-    GlDropdownDivider,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownDivider,
     GlNewDropdown,
     GlNewDropdownDivider,
     GlNewDropdownItem,
@@ -240,7 +240,7 @@ export default {
     <span aria-hidden="true" class="gl-pl-3 border-left gl-mb-3 d-none d-sm-block"></span>
     <div class="mb-2 pr-2 d-flex d-sm-block">
-      <gl-dropdown
+      <gl-deprecated-dropdown
         id="monitor-environments-dropdown"
         ref="monitorEnvironmentsDropdown"
         class="flex-grow-1"
@@ -250,20 +250,20 @@ export default {
         :text="currentEnvironmentName"
       >
         <div class="d-flex flex-column overflow-hidden">
-          <gl-dropdown-header class="monitor-environment-dropdown-header text-center">
+          <gl-deprecated-dropdown-header class="monitor-environment-dropdown-header text-center">
             {{ __('Environment') }}
-          </gl-dropdown-header>
-          <gl-dropdown-divider />
+          </gl-deprecated-dropdown-header>
+          <gl-deprecated-dropdown-divider />
           <gl-search-box-by-type class="m-2" @input="debouncedEnvironmentsSearch" />
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
-            <gl-dropdown-item
+            <gl-deprecated-dropdown-item
               v-for="environment in filteredEnvironments"
               :key="environment.id"
               :active="environment.name === currentEnvironmentName"
               active-class="is-active"
               :href="getEnvironmentPath(environment.id)"
-              >{{ environment.name }}</gl-dropdown-item
+              >{{ environment.name }}</gl-deprecated-dropdown-item
             >
           </div>
           <div
@@ -274,7 +274,7 @@ export default {
             {{ __('No matching results') }}
           </div>
         </div>
-      </gl-dropdown>
+      </gl-deprecated-dropdown>
     </div>
     <div class="mb-2 pr-2 d-flex d-sm-block">

app/assets/javascripts/monitoring/components/dashboards_dropdown.vue

@@ -2,10 +2,10 @@
 import { mapState, mapActions, mapGetters } from 'vuex';
 import {
   GlIcon,
-  GlDropdown,
-  GlDropdownItem,
-  GlDropdownHeader,
-  GlDropdownDivider,
+  GlDeprecatedDropdown,
+  GlDeprecatedDropdownItem,
+  GlDeprecatedDropdownHeader,
+  GlDeprecatedDropdownDivider,
   GlSearchBoxByType,
   GlModalDirective,
 } from '@gitlab/ui';
@@ -17,10 +17,10 @@ const events = {
 export default {
   components: {
     GlIcon,
-    GlDropdown,
-    GlDropdownItem,
-    GlDropdownHeader,
-    GlDropdownDivider,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
+    GlDeprecatedDropdownHeader,
+    GlDeprecatedDropdownDivider,
     GlSearchBoxByType,
   },
   directives: {
@@ -81,16 +81,16 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown
+  <gl-deprecated-dropdown
     toggle-class="dropdown-menu-toggle"
     menu-class="monitor-dashboard-dropdown-menu"
     :text="selectedDashboardText"
   >
     <div class="d-flex flex-column overflow-hidden">
-      <gl-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
+      <gl-deprecated-dropdown-header class="monitor-dashboard-dropdown-header text-center">{{
         __('Dashboard')
-      }}</gl-dropdown-header>
-      <gl-dropdown-divider />
+      }}</gl-deprecated-dropdown-header>
+      <gl-deprecated-dropdown-divider />
       <gl-search-box-by-type
         ref="monitorDashboardsDropdownSearch"
         v-model="searchTerm"
@@ -98,7 +98,7 @@ export default {
       />
       <div class="flex-fill overflow-auto">
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="dashboard in starredDashboards"
           :key="dashboard.path"
           :active="dashboard.path === selectedDashboardPath"
@@ -109,14 +109,14 @@ export default {
             {{ dashboardDisplayName(dashboard) }}
             <gl-icon class="text-muted ml-auto" name="star" />
           </div>
-        </gl-dropdown-item>
-        <gl-dropdown-divider
+        </gl-deprecated-dropdown-item>
+        <gl-deprecated-dropdown-divider
           v-if="starredDashboards.length && nonStarredDashboards.length"
           ref="starredListDivider"
         />
-        <gl-dropdown-item
+        <gl-deprecated-dropdown-item
           v-for="dashboard in nonStarredDashboards"
           :key="dashboard.path"
           :active="dashboard.path === selectedDashboardPath"
@@ -124,7 +124,7 @@ export default {
           @click="selectDashboard(dashboard)"
         >
           {{ dashboardDisplayName(dashboard) }}
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
       </div>
       <div
@@ -140,12 +140,12 @@ export default {
            in https://gitlab.com/gitlab-org/gitlab/-/issues/223223
       -->
       <template v-if="isOutOfTheBoxDashboard">
-        <gl-dropdown-divider />
-        <gl-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">
+        <gl-deprecated-dropdown-divider />
+        <gl-deprecated-dropdown-item v-gl-modal="modalId" data-testid="duplicateDashboardItem">
           {{ s__('Metrics|Duplicate dashboard') }}
-        </gl-dropdown-item>
+        </gl-deprecated-dropdown-item>
       </template>
     </div>
-  </gl-dropdown>
+  </gl-deprecated-dropdown>
 </template>

app/assets/javascripts/monitoring/components/variables/dropdown_field.vue

 <script>
-import { GlFormGroup, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlFormGroup, GlDeprecatedDropdown, GlDeprecatedDropdownItem } from '@gitlab/ui';
 export default {
   components: {
     GlFormGroup,
-    GlDropdown,
-    GlDropdownItem,
+    GlDeprecatedDropdown,
+    GlDeprecatedDropdownItem,
   },
   props: {
     name: {
@@ -41,13 +41,16 @@ export default {
 </script>
 <template>
   <gl-form-group :label="label">
-    <gl-dropdown toggle-class="dropdown-menu-toggle" :text="text || s__('Metrics|Select a value')">
-      <gl-dropdown-item
+    <gl-deprecated-dropdown
+      toggle-class="dropdown-menu-toggle"
+      :text="text || s__('Metrics|Select a value')"
+    >
+      <gl-deprecated-dropdown-item
         v-for="val in options.values"
         :key="val.value"
         @click="onUpdate(val.value)"
-        >{{ val.text }}</gl-dropdown-item
+        >{{ val.text }}</gl-deprecated-dropdown-item
       >
-    </gl-dropdown>
+    </gl-deprecated-dropdown>
   </gl-form-group>
 </template>