Merge branch 'migrate-gl-new-dropdown-item' into 'master'

Migrate GlNewDropdownItem to GlDropdownItem

See merge request gitlab-org/gitlab!42143

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

 <script>
-import { GlDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import allVersionsMixin from '../../mixins/all_versions';
 import { findVersionId } from '../../utils/design_management_utils';
@@ -7,7 +7,7 @@ import { findVersionId } from '../../utils/design_management_utils';
 export default {
   components: {
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlSprintf,
   },
   mixins: [allVersionsMixin],
@@ -64,7 +64,7 @@ export default {
 
 <template>
   <gl-dropdown :text="dropdownText" size="small">
-    <gl-new-dropdown-item
+    <gl-dropdown-item
       v-for="(version, index) in allVersions"
       :key="version.id"
       :is-check-item="true"
@@ -76,6 +76,6 @@ export default {
           {{ allVersions.length - index }}
         </template>
       </gl-sprintf>
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
   </gl-dropdown>
 </template>

app/assets/javascripts/incidents_settings/components/alerts_form.vue

@@ -7,7 +7,7 @@ import {
   GlFormGroup,
   GlFormCheckbox,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
 } from '@gitlab/ui';
 import {
   I18N_ALERT_SETTINGS_FORM,
@@ -25,7 +25,7 @@ export default {
     GlIcon,
     GlFormCheckbox,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
   },
   inject: ['service', 'alertSettings'],
   data() {
@@ -107,7 +107,7 @@ export default {
           :text="issueTemplateHeader"
           :block="true"
         >
-          <gl-new-dropdown-item
+          <gl-dropdown-item
             v-for="template in templates"
             :key="template.key"
             data-qa-selector="incident_templates_item"
@@ -116,7 +116,7 @@ export default {
             @click="selectIssueTemplate(template.key)"
           >
             {{ template.name }}
-          </gl-new-dropdown-item>
+          </gl-dropdown-item>
         </gl-dropdown>
       </gl-form-group>
 

app/assets/javascripts/integrations/edit/components/override_dropdown.vue

 <script>
 import { mapState } from 'vuex';
-import { GlDropdown, GlNewDropdownItem, GlLink } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlLink } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import { defaultIntegrationLevel, overrideDropdownDescriptions } from '../constants';
 
@@ -20,7 +20,7 @@ export default {
   name: 'OverrideDropdown',
   components: {
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlLink,
   },
   props: {
@@ -74,13 +74,13 @@ export default {
     </span>
     <input name="service[inherit_from_id]" :value="override ? '' : inheritFromId" type="hidden" />
     <gl-dropdown :text="selected.text">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="option in $options.dropdownOptions"
         :key="option.value"
         @click="onClick(option)"
       >
         {{ option.text }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>

app/assets/javascripts/jira_import/components/jira_import_form.vue

@@ -3,7 +3,7 @@ import {
   GlAlert,
   GlButton,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlDropdownText,
   GlFormGroup,
   GlFormSelect,
@@ -35,7 +35,7 @@ export default {
     GlAlert,
     GlButton,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlDropdownText,
     GlFormGroup,
     GlFormSelect,
@@ -305,14 +305,14 @@ export default {
 
             <gl-loading-icon v-if="isFetching" />
 
-            <gl-new-dropdown-item
+            <gl-dropdown-item
               v-for="user in users"
               v-else
               :key="user.id"
               @click="updateMapping(data.item.jiraAccountId, user.id, user.username)"
             >
               {{ user.username }} ({{ user.name }})
-            </gl-new-dropdown-item>
+            </gl-dropdown-item>
 
             <gl-dropdown-text v-show="shouldShowNoMatchesFoundText" class="text-secondary">
               {{ __('No matches found') }}

app/assets/javascripts/milestones/project_milestone_combobox.vue

@@ -3,7 +3,7 @@ import {
   GlDropdown,
   GlDropdownDivider,
   GlNewDropdownHeader,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlLoadingIcon,
   GlSearchBoxByType,
   GlIcon,
@@ -20,7 +20,7 @@ export default {
     GlDropdown,
     GlDropdownDivider,
     GlNewDropdownHeader,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlLoadingIcon,
     GlSearchBoxByType,
     GlIcon,
@@ -211,11 +211,11 @@ export default {
       @keydown.enter.prevent="onSearchBoxEnter"
     />
 
-    <gl-new-dropdown-item @click="onMilestoneClicked(null)">
+    <gl-dropdown-item @click="onMilestoneClicked(null)">
       <span :class="{ 'pl-4': true, 'selected-item': selectedMilestones.length === 0 }">
         {{ $options.translations.noMilestone }}
       </span>
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
 
     <gl-dropdown-divider />
 
@@ -230,7 +230,7 @@ export default {
       <gl-dropdown-divider />
     </template>
     <template v-else-if="dropdownItems.length">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="item in dropdownItems"
         :key="item"
         role="milestone option"
@@ -239,12 +239,12 @@ export default {
         <span :class="{ 'pl-4': true, 'selected-item': isSelectedMilestone(item) }">
           {{ item }}
         </span>
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
       <gl-dropdown-divider />
     </template>
 
-    <gl-new-dropdown-item v-for="(item, idx) in extraLinks" :key="idx" :href="item.url">
+    <gl-dropdown-item v-for="(item, idx) in extraLinks" :key="idx" :href="item.url">
       <span class="pl-4">{{ item.text }}</span>
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
   </gl-dropdown>
 </template>

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

@@ -8,7 +8,7 @@ import {
   GlFormGroup,
   GlFormInput,
   GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlModal,
   GlTooltipDirective,
   GlIcon,

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

@@ -4,7 +4,7 @@ import {
   GlDeprecatedButton,
   GlDropdown,
   GlDropdownDivider,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlModal,
   GlIcon,
   GlModalDirective,
@@ -25,7 +25,7 @@ export default {
     GlDeprecatedButton,
     GlDropdown,
     GlDropdownDivider,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlModal,
     GlIcon,
     DuplicateDashboardModal,
@@ -157,13 +157,13 @@ export default {
     </template>
 
     <template v-if="addingMetricsAvailable">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-gl-modal="$options.modalIds.addMetric"
         data-qa-selector="add_metric_button"
         data-testid="add-metric-item"
       >
         {{ $options.i18n.addMetric }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
       <gl-modal
         ref="addMetricModal"
         :modal-id="$options.modalIds.addMetric"
@@ -194,20 +194,20 @@ export default {
       </gl-modal>
     </template>
 
-    <gl-new-dropdown-item
+    <gl-dropdown-item
       v-if="isMenuItemEnabled.addPanel"
       data-testid="add-panel-item-enabled"
       :to="newPanelPageLocation"
     >
       {{ $options.i18n.addPanel }}
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
 
     <!--
       wrapper for tooltip as button can be `disabled`
       https://bootstrap-vue.org/docs/components/tooltip#disabled-elements
     -->
     <div v-else v-gl-tooltip :title="$options.i18n.addPanelInfo">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         :alt="$options.i18n.addPanelInfo"
         :to="newPanelPageLocation"
         data-testid="add-panel-item-disabled"
@@ -215,24 +215,24 @@ export default {
         class="gl-cursor-not-allowed"
       >
         <span class="gl-text-gray-400">{{ $options.i18n.addPanel }}</span>
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </div>
 
-    <gl-new-dropdown-item
+    <gl-dropdown-item
       v-if="isMenuItemEnabled.editDashboard"
       :href="selectedDashboard ? selectedDashboard.project_blob_path : null"
       data-qa-selector="edit_dashboard_button_enabled"
       data-testid="edit-dashboard-item-enabled"
     >
       {{ $options.i18n.editDashboard }}
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
 
     <!--
       wrapper for tooltip as button can be `disabled`
       https://bootstrap-vue.org/docs/components/tooltip#disabled-elements
     -->
     <div v-else v-gl-tooltip :title="$options.i18n.editDashboardInfo">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         :alt="$options.i18n.editDashboardInfo"
         :href="selectedDashboard ? selectedDashboard.project_blob_path : null"
         data-testid="edit-dashboard-item-disabled"
@@ -240,16 +240,16 @@ export default {
         class="gl-cursor-not-allowed"
       >
         <span class="gl-text-gray-400">{{ $options.i18n.editDashboard }}</span>
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </div>
 
     <template v-if="isMenuItemShown.duplicateDashboard">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-gl-modal="$options.modalIds.duplicateDashboard"
         data-testid="duplicate-dashboard-item"
       >
         {{ $options.i18n.duplicateDashboard }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
 
       <duplicate-dashboard-modal
         :default-branch="defaultBranch"
@@ -259,25 +259,25 @@ export default {
       />
     </template>
 
-    <gl-new-dropdown-item
+    <gl-dropdown-item
       v-if="selectedDashboard"
       data-testid="star-dashboard-item"
       :disabled="isUpdatingStarredValue"
       @click="toggleStarredValue()"
     >
       {{ selectedDashboard.starred ? $options.i18n.unstarDashboard : $options.i18n.starDashboard }}
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
 
     <gl-dropdown-divider />
 
-    <gl-new-dropdown-item
+    <gl-dropdown-item
       v-gl-modal="$options.modalIds.createDashboard"
       data-testid="create-dashboard-item"
       :disabled="!isMenuItemEnabled.createDashboard"
       :class="{ 'monitoring-actions-item-disabled': !isMenuItemEnabled.createDashboard }"
     >
       {{ $options.i18n.createDashboard }}
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
 
     <template v-if="isMenuItemEnabled.createDashboard">
       <create-dashboard-modal

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

@@ -5,7 +5,7 @@ import {
   GlButton,
   GlDropdown,
   GlLoadingIcon,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlNewDropdownHeader,
   GlSearchBoxByType,
   GlModalDirective,
@@ -30,7 +30,7 @@ export default {
     GlButton,
     GlDropdown,
     GlLoadingIcon,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlNewDropdownHeader,
 
     GlSearchBoxByType,
@@ -196,7 +196,7 @@ export default {
 
           <gl-loading-icon v-if="environmentsLoading" :inline="true" />
           <div v-else class="flex-fill overflow-auto">
-            <gl-new-dropdown-item
+            <gl-dropdown-item
               v-for="environment in filteredEnvironments"
               :key="environment.id"
               :is-check-item="true"
@@ -204,7 +204,7 @@ export default {
               :href="getEnvironmentPath(environment.id)"
             >
               {{ environment.name }}
-            </gl-new-dropdown-item>
+            </gl-dropdown-item>
           </div>
           <div
             v-show="shouldShowEnvironmentsDropdownNoMatchedMsg"

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

@@ -7,7 +7,7 @@ import {
   GlLink,
   GlLoadingIcon,
   GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlDropdownDivider,
   GlModal,
   GlModalDirective,

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

@@ -3,7 +3,7 @@ import { mapState, mapGetters } from 'vuex';
 import {
   GlIcon,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlNewDropdownHeader,
   GlDropdownDivider,
   GlSearchBoxByType,
@@ -18,7 +18,7 @@ export default {
   components: {
     GlIcon,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlNewDropdownHeader,
     GlDropdownDivider,
     GlSearchBoxByType,
@@ -87,7 +87,7 @@ export default {
       />
 
       <div class="flex-fill overflow-auto">
-        <gl-new-dropdown-item
+        <gl-dropdown-item
           v-for="dashboard in starredDashboards"
           :key="dashboard.path"
           :is-check-item="true"
@@ -100,13 +100,13 @@ export default {
             </span>
             <gl-icon class="text-muted gl-flex-shrink-0 gl-ml-3 gl-align-self-center" name="star" />
           </div>
-        </gl-new-dropdown-item>
+        </gl-dropdown-item>
         <gl-dropdown-divider
           v-if="starredDashboards.length && nonStarredDashboards.length"
           ref="starredListDivider"
         />
 
-        <gl-new-dropdown-item
+        <gl-dropdown-item
           v-for="dashboard in nonStarredDashboards"
           :key="dashboard.path"
           :is-check-item="true"
@@ -116,7 +116,7 @@ export default {
           <span class="gl-overflow-hidden gl-overflow-wrap-break">
             {{ dashboardDisplayName(dashboard) }}
           </span>
-        </gl-new-dropdown-item>
+        </gl-dropdown-item>
       </div>
 
       <div

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

@@ -5,7 +5,7 @@ import {
   GlButtonGroup,
   GlButton,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlDropdownDivider,
   GlTooltipDirective,
 } from '@gitlab/ui';
@@ -49,7 +49,7 @@ export default {
     GlButtonGroup,
     GlButton,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlDropdownDivider,
   },
   directives: {
@@ -158,20 +158,20 @@ export default {
       :title="s__('Metrics|Set refresh rate')"
       :text="dropdownText"
     >
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         :is-check-item="true"
         :is-checked="refreshInterval === null"
         @click="removeRefreshInterval()"
-        >{{ __('Off') }}</gl-new-dropdown-item
+        >{{ __('Off') }}</gl-dropdown-item
       >
       <gl-dropdown-divider />
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="(option, i) in $options.refreshIntervals"
         :key="i"
         :is-check-item="true"
         :is-checked="isChecked(option)"
         @click="setRefreshInterval(option)"
-        >{{ option.label }}</gl-new-dropdown-item
+        >{{ option.label }}</gl-dropdown-item
       >
     </gl-dropdown>
   </gl-button-group>

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -10,7 +10,7 @@ import {
   GlFormSelect,
   GlLink,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlSearchBoxByType,
   GlSprintf,
 } from '@gitlab/ui';
@@ -38,7 +38,7 @@ export default {
     GlFormSelect,
     GlLink,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlSearchBoxByType,
     GlSprintf,
   },
@@ -179,7 +179,7 @@ export default {
           :placeholder="__('Search branches and tags')"
           class="gl-p-2"
         />
-        <gl-new-dropdown-item
+        <gl-dropdown-item
           v-for="(ref, index) in filteredRefs"
           :key="index"
           class="gl-font-monospace"
@@ -188,7 +188,7 @@ export default {
           @click="setRefSelected(ref)"
         >
           {{ ref }}
-        </gl-new-dropdown-item>
+        </gl-dropdown-item>
       </gl-dropdown>
 
       <template #description>

app/assets/javascripts/projects/commits/components/author_select.vue

@@ -4,7 +4,7 @@ import { mapState, mapActions } from 'vuex';
 import {
   GlDropdown,
   GlNewDropdownHeader,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlSearchBoxByType,
   GlDropdownDivider,
   GlTooltipDirective,
@@ -20,7 +20,7 @@ export default {
   components: {
     GlDropdown,
     GlNewDropdownHeader,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlSearchBoxByType,
     GlDropdownDivider,
   },
@@ -123,11 +123,11 @@ export default {
         :placeholder="__('Search')"
         @input="searchAuthors"
       />
-      <gl-new-dropdown-item :is-checked="!currentAuthor" @click="selectAuthor(null)">
+      <gl-dropdown-item :is-checked="!currentAuthor" @click="selectAuthor(null)">
         {{ __('Any Author') }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
       <gl-dropdown-divider />
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="author in commitsAuthors"
         :key="author.id"
         :is-checked="author.name === currentAuthor"
@@ -136,7 +136,7 @@ export default {
         @click="selectAuthor(author)"
       >
         {{ author.name }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>

app/assets/javascripts/ref/components/ref_results_section.vue

 <script>
-import { GlNewDropdownHeader, GlNewDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
+import { GlNewDropdownHeader, GlDropdownItem, GlBadge, GlIcon } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 export default {
   name: 'RefResultsSection',
   components: {
     GlNewDropdownHeader,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlBadge,
     GlIcon,
   },
@@ -97,7 +97,7 @@ export default {
       </div>
     </template>
     <template v-else>
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="item in items"
         :key="item.name"
         @click="$emit('selected', item.value || item.name)"
@@ -118,7 +118,7 @@ export default {
             s__('DefaultBranchLabel|default')
           }}</gl-badge>
         </div>
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </template>
   </div>
 </template>

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_header.vue

@@ -6,7 +6,7 @@ import {
   GlButton,
   GlDropdown,
   GlNewDropdownHeader as GlDropdownHeader,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlTooltipDirective,
 } from '@gitlab/ui';
 import { n__, s__, sprintf } from '~/locale';

app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue

@@ -4,7 +4,7 @@ import {
   GlButtonGroup,
   GlButton,
   GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlTooltipDirective,
 } from '@gitlab/ui';
 

ee/app/assets/javascripts/analytics/cycle_analytics/components/stage_dropdown_filter.vue

 <script>
-import {
-  GlDropdown,
-  GlNewDropdownHeader as GlDropdownHeader,
-  GlNewDropdownItem as GlDropdownItem,
-} from '@gitlab/ui';
+import { GlDropdown, GlNewDropdownHeader as GlDropdownHeader, GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 
 export default {

ee/app/assets/javascripts/analytics/cycle_analytics/components/value_stream_select.vue

@@ -3,7 +3,7 @@ import {
   GlAlert,
   GlButton,
   GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlDropdownDivider,
   GlForm,
   GlFormInput,

ee/app/assets/javascripts/analytics/shared/components/groups_dropdown_filter.vue

@@ -6,7 +6,7 @@ import {
   GlAvatar,
   GlDropdown,
   GlNewDropdownHeader as GlDropdownHeader,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlSearchBoxByType,
   GlSafeHtmlDirective as SafeHtml,
 } from '@gitlab/ui';

ee/app/assets/javascripts/analytics/shared/components/projects_dropdown_filter.vue

@@ -6,7 +6,7 @@ import {
   GlAvatar,
   GlDropdown,
   GlNewDropdownHeader as GlDropdownHeader,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlSearchBoxByType,
 } from '@gitlab/ui';
 import { n__, s__, __ } from '~/locale';

ee/app/assets/javascripts/audit_events/components/sorting_field.vue

 <script>
-import { GlDropdown, GlNewDropdownHeader, GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlNewDropdownHeader, GlDropdownItem } from '@gitlab/ui';
 import { s__ } from '~/locale';
 
 const SORTING_TITLE = s__('SortOptions|Sort by:');
@@ -18,7 +18,7 @@ export default {
   components: {
     GlDropdown,
     GlNewDropdownHeader,
-    GlNewDropdownItem,
+    GlDropdownItem,
   },
   props: {
     sortBy: {
@@ -49,7 +49,7 @@ export default {
   <div>
     <gl-dropdown :text="selectedOption.text" class="w-100 flex-column flex-lg-row form-group">
       <gl-new-dropdown-header> {{ $options.SORTING_TITLE }}</gl-new-dropdown-header>
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="option in $options.SORTING_OPTIONS"
         :key="option.key"
         :is-check-item="true"
@@ -57,7 +57,7 @@ export default {
         @click="onItemClick(option.key)"
       >
         {{ option.text }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>

ee/app/assets/javascripts/boards/components/toggle_epics_swimlanes.vue

 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {

ee/app/assets/javascripts/feature_flags/components/new_environments_dropdown.vue

@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
 import {
   GlDropdown,
   GlDropdownDivider,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlIcon,
   GlLoadingIcon,
   GlSearchBoxByType,
@@ -16,7 +16,7 @@ export default {
   components: {
     GlDropdown,
     GlDropdownDivider,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlSearchBoxByType,
     GlIcon,
     GlLoadingIcon,
@@ -85,22 +85,22 @@ export default {
       @keyup="fetchEnvironments"
     />
     <gl-loading-icon v-if="isLoading" />
-    <gl-new-dropdown-item
+    <gl-dropdown-item
       v-for="environment in results"
       v-else-if="results.length"
       :key="environment"
       @click="addEnvironment(environment)"
     >
       {{ environment }}
-    </gl-new-dropdown-item>
+    </gl-dropdown-item>
     <template v-else-if="environmentSearch.length">
       <span ref="noResults" class="text-secondary gl-p-3">
         {{ $options.translations.noMatchingResults }}
       </span>
       <gl-dropdown-divider />
-      <gl-new-dropdown-item @click="addEnvironment(environmentSearch)">
+      <gl-dropdown-item @click="addEnvironment(environmentSearch)">
         {{ createEnvironmentLabel }}
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </template>
   </gl-dropdown>
 </template>

ee/app/assets/javascripts/iterations/components/iteration_report.vue

@@ -7,7 +7,7 @@ import {
   GlEmptyState,
   GlIcon,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
 } from '@gitlab/ui';
 import { formatDate } from '~/lib/utils/datetime_utility';
 import { __ } from '~/locale';
@@ -36,7 +36,7 @@ export default {
     GlEmptyState,
     GlIcon,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     IterationForm,
     IterationReportSummary,
     IterationReportTabs,
@@ -205,9 +205,7 @@ export default {
           <template #button-content>
             <gl-icon name="ellipsis_v" /><span class="gl-sr-only">{{ __('Actions') }}</span>
           </template>
-          <gl-new-dropdown-item @click="loadEditPage">{{
-            __('Edit iteration')
-          }}</gl-new-dropdown-item>
+          <gl-dropdown-item @click="loadEditPage">{{ __('Edit iteration') }}</gl-dropdown-item>
         </gl-dropdown>
       </div>
       <h3 ref="title" class="page-title">{{ iteration.title }}</h3>

ee/app/assets/javascripts/on_demand_scans/components/on_demand_scans_form.vue

@@ -9,7 +9,7 @@ import {
   GlIcon,
   GlLink,
   GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlSkeletonLoader,
   GlSprintf,
   GlTooltipDirective,

ee/app/assets/javascripts/registrations/components/visibility_level_dropdown.vue

 <script>
-import { GlDropdown, GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 export default {
   components: {
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
   },
   props: {
     visibilityLevelOptions: {
@@ -35,14 +35,14 @@ export default {
   <div>
     <input type="hidden" name="group[visibility_level]" :value="selectedOption.level" />
     <gl-dropdown :text="selectedOption.label" class="gl-w-full" menu-class="gl-w-full! gl-mb-0">
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="option in visibilityLevelOptions"
         :key="option.level"
         :secondary-text="option.description"
         @click="onClick(option)"
       >
         <div class="gl-font-weight-bold gl-mb-1">{{ option.label }}</div>
-      </gl-new-dropdown-item>
+      </gl-dropdown-item>
     </gl-dropdown>
   </div>
 </template>

ee/app/assets/javascripts/roadmap/components/roadmap_filters.vue

@@ -4,7 +4,7 @@ import {
   GlFormGroup,
   GlSegmentedControl,
   GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
+  GlDropdownItem,
   GlDropdownDivider,
 } from '@gitlab/ui';
 

ee/app/assets/javascripts/sidebar/components/iteration_select.vue

@@ -3,7 +3,7 @@ import {
   GlButton,
   GlLink,
   GlDropdown,
-  GlNewDropdownItem,
+  GlDropdownItem,
   GlSearchBoxByType,
   GlNewDropdownHeader,
   GlIcon,
@@ -25,7 +25,7 @@ export default {
     GlButton,
     GlLink,
     GlDropdown,
-    GlNewDropdownItem,
+    GlDropdownItem,
     GlSearchBoxByType,
     GlNewDropdownHeader,
     GlIcon,
@@ -199,13 +199,13 @@ export default {
         __('Assign Iteration')
       }}</gl-new-dropdown-header>
       <gl-search-box-by-type ref="search" v-model="searchTerm" class="gl-m-3" />
-      <gl-new-dropdown-item
+      <gl-dropdown-item
         v-for="iterationItem in iterations"
         :key="iterationItem.id"
         :is-check-item="true"
         :is-checked="isIterationChecked(iterationItem.id)"
         @click="setIteration(iterationItem.id)"
-        >{{ iterationItem.title }}</gl-new-dropdown-item
+        >{{ iterationItem.title }}</gl-dropdown-item
       >
     </gl-dropdown>
   </div>

ee/app/assets/javascripts/threat_monitoring/components/policy_editor/policy_rule_entity.vue

 <script>
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 import { EntityTypes } from './constants';
 

ee/spec/frontend/analytics/cycle_analytics/components/duration_chart_spec.js

 import Vuex from 'vuex';
 import { shallowMount, mount, createLocalVue } from '@vue/test-utils';
-import { GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import Scatterplot from 'ee/analytics/shared/components/scatterplot.vue';
 import DurationChart from 'ee/analytics/cycle_analytics/components/duration_chart.vue';
 import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';
@@ -66,7 +66,7 @@ describe('DurationChart', () => {
 
   const selectStage = (_wrapper, index = 0) => {
     findStageDropdown(_wrapper)
-      .findAll(GlNewDropdownItem)
+      .findAll(GlDropdownItem)
       .at(index)
       .vm.$emit('click');
   };

ee/spec/frontend/analytics/cycle_analytics/components/stage_dropdown_filter_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import StageDropdownFilter from 'ee/analytics/cycle_analytics/components/stage_dropdown_filter.vue';
 
 const stages = [

ee/spec/frontend/analytics/cycle_analytics/helpers.js

-import { GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 
 export function renderTotalTime(selector, element, totalTime = {}) {
   const { days, hours, mins, seconds } = totalTime;

ee/spec/frontend/analytics/shared/components/groups_dropdown_filter_spec.js

 import { mount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import GroupsDropdownFilter from 'ee/analytics/shared/components/groups_dropdown_filter.vue';
 import { TEST_HOST } from 'helpers/test_constants';
 import Api from '~/api';

ee/spec/frontend/analytics/shared/components/projects_dropdown_filter_spec.js

 import { mount } from '@vue/test-utils';
 import ProjectsDropdownFilter from 'ee/analytics/shared/components/projects_dropdown_filter.vue';
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { LAST_ACTIVITY_AT } from 'ee/analytics/shared/constants';
 import { TEST_HOST } from 'helpers/test_constants';
 import Api from '~/api';

ee/spec/frontend/audit_events/components/sorting_field_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import SortingField from 'ee/audit_events/components/sorting_field.vue';
 
 describe('SortingField component', () => {
@@ -10,13 +10,13 @@ describe('SortingField component', () => {
       propsData: { ...props },
       stubs: {
         GlNewDropdown: true,
-        GlNewDropdownItem: true,
+        GlDropdownItem: true,
       },
     });
   };
 
   const getCheckedOptions = () =>
-    wrapper.findAll(GlNewDropdownItem).filter(item => item.props().isChecked);
+    wrapper.findAll(GlDropdownItem).filter(item => item.props().isChecked);
 
   beforeEach(() => {
     initComponent();
@@ -29,7 +29,7 @@ describe('SortingField component', () => {
 
   describe('when initialized', () => {
     it('should have sorting options', () => {
-      expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(2);
+      expect(wrapper.findAll(GlDropdownItem)).toHaveLength(2);
     });
 
     it('should set the sorting option to `created_desc` by default', () => {
@@ -58,7 +58,7 @@ describe('SortingField component', () => {
     beforeEach(() => {
       initComponent();
       wrapper
-        .findAll(GlNewDropdownItem)
+        .findAll(GlDropdownItem)
         .at(1)
         .vm.$emit('click');
     });

ee/spec/frontend/boards/components/toggle_epics_swimlanes_spec.js

 import Vue from 'vue';
 import Vuex from 'vuex';
 import { mount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import ToggleEpicsSwimlanes from 'ee/boards/components/toggle_epics_swimlanes.vue';
 
 Vue.use(Vuex);

ee/spec/frontend/feature_flags/components/new_environments_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import { GlLoadingIcon, GlSearchBoxByType, GlNewDropdownItem } from '@gitlab/ui';
+import { GlLoadingIcon, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import NewEnvironmentsDropdown from 'ee/feature_flags/components/new_environments_dropdown.vue';
 import axios from '~/lib/utils/axios_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
@@ -36,7 +36,7 @@ describe('New Environments Dropdown', () => {
 
     it('should not show any dropdown items', () => {
       axiosMock.onGet(TEST_HOST).reply(() => {
-        expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(0);
+        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(0);
       });
       wrapper.find(GlSearchBoxByType).vm.$emit('focus');
       return axios.waitForAll();
@@ -53,7 +53,7 @@ describe('New Environments Dropdown', () => {
         .waitForAll()
         .then(() => wrapper.vm.$nextTick())
         .then(() => {
-          item = wrapper.find(GlNewDropdownItem);
+          item = wrapper.find(GlDropdownItem);
         });
     });
 
@@ -78,7 +78,7 @@ describe('New Environments Dropdown', () => {
       wrapper.find(GlSearchBoxByType).vm.$emit('focus');
       wrapper.find(GlSearchBoxByType).vm.$emit('input', 'prod');
       return axios.waitForAll().then(() => {
-        items = wrapper.findAll(GlNewDropdownItem);
+        items = wrapper.findAll(GlDropdownItem);
       });
     });
 

ee/spec/frontend/iterations/components/iteration_report_spec.js

 import { shallowMount } from '@vue/test-utils';
-import {
-  GlDropdown,
-  GlNewDropdownItem,
-  GlEmptyState,
-  GlLoadingIcon,
-  GlTab,
-  GlTabs,
-} from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlEmptyState, GlLoadingIcon, GlTab, GlTabs } from '@gitlab/ui';
 import IterationReport from 'ee/iterations/components/iteration_report.vue';
 import IterationForm from 'ee/iterations/components/iteration_form.vue';
 import IterationReportSummary from 'ee/iterations/components/iteration_report_summary.vue';
@@ -26,7 +19,7 @@ describe('Iterations report', () => {
   const findActionsDropdown = () => wrapper.find('[data-testid="actions-dropdown"]');
   const clickEditButton = () => {
     findActionsDropdown().vm.$emit('click');
-    wrapper.find(GlNewDropdownItem).vm.$emit('click');
+    wrapper.find(GlDropdownItem).vm.$emit('click');
   };
 
   const mountComponent = ({ props = defaultProps, loading = false } = {}) => {

ee/spec/frontend/registrations/components/visibility_level_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import Component from 'ee/registrations/components/visibility_level_dropdown.vue';
 
 describe('Visibility Level Dropdown', () => {
@@ -33,7 +33,7 @@ describe('Visibility Level Dropdown', () => {
     wrapper.find("input[name='group[visibility_level]']").attributes('value');
   const dropdownText = () => wrapper.find(GlDropdown).props('text');
   const findDropdownItems = () =>
-    wrapper.findAll(GlNewDropdownItem).wrappers.map(option => ({
+    wrapper.findAll(GlDropdownItem).wrappers.map(option => ({
       text: option.text(),
       secondaryText: option.props('secondaryText'),
     }));
@@ -57,7 +57,7 @@ describe('Visibility Level Dropdown', () => {
   describe('Selecting an option', () => {
     beforeEach(() => {
       wrapper
-        .findAll(GlNewDropdownItem)
+        .findAll(GlDropdownItem)
         .at(1)
         .vm.$emit('click');
     });

ee/spec/frontend/roadmap/components/roadmap_filters_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlSegmentedControl, GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlSegmentedControl, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 import RoadmapFilters from 'ee/roadmap/components/roadmap_filters.vue';
 import createStore from 'ee/roadmap/store';

ee/spec/frontend/sidebar/components/iteration_select_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem, GlButton, GlLink, GlSearchBoxByType } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlButton, GlLink, GlSearchBoxByType } from '@gitlab/ui';
 import IterationSelect from 'ee/sidebar/components/iteration_select.vue';
 import { iterationSelectTextMap } from 'ee/sidebar/constants';
 import setIterationOnIssue from 'ee/sidebar/queries/set_iteration_on_issue.mutation.graphql';
@@ -141,7 +141,7 @@ describe('IterationSelect', () => {
           it('renders title $title', () => {
             expect(
               wrapper
-                .findAll(GlNewDropdownItem)
+                .findAll(GlDropdownItem)
                 .filter(w => w.text() === title)
                 .at(0)
                 .text(),
@@ -151,7 +151,7 @@ describe('IterationSelect', () => {
           it('checks the correct dropdown item', () => {
             expect(
               wrapper
-                .findAll(GlNewDropdownItem)
+                .findAll(GlDropdownItem)
                 .filter(w => w.props('isChecked') === true)
                 .at(0)
                 .text(),
@@ -164,12 +164,12 @@ describe('IterationSelect', () => {
             createComponent({});
           });
 
-          it('finds GlNewDropdownItem with "No iteration"', () => {
-            expect(wrapper.find(GlNewDropdownItem).text()).toBe('No iteration');
+          it('finds GlDropdownItem with "No iteration"', () => {
+            expect(wrapper.find(GlDropdownItem).text()).toBe('No iteration');
           });
 
           it('"No iteration" is checked', () => {
-            expect(wrapper.find(GlNewDropdownItem).props('isChecked')).toBe(true);
+            expect(wrapper.find(GlDropdownItem).props('isChecked')).toBe(true);
           });
         });
 
@@ -181,7 +181,7 @@ describe('IterationSelect', () => {
               });
 
               wrapper
-                .findAll(GlNewDropdownItem)
+                .findAll(GlDropdownItem)
                 .filter(w => w.text() === 'title')
                 .at(0)
                 .vm.$emit('click');
@@ -201,7 +201,7 @@ describe('IterationSelect', () => {
                 });
 
                 wrapper
-                  .findAll(GlNewDropdownItem)
+                  .findAll(GlDropdownItem)
                   .filter(w => w.text() === 'title')
                   .at(0)
                   .vm.$emit('click');
@@ -241,7 +241,7 @@ describe('IterationSelect', () => {
                   bootstrapComponent(mutationResp);
 
                   wrapper
-                    .findAll(GlNewDropdownItem)
+                    .findAll(GlDropdownItem)
                     .filter(w => w.text() === 'title')
                     .at(0)
                     .vm.$emit('click');

ee/spec/frontend/threat_monitoring/components/policy_editor/policy_rule_entity_spec.js

 import { shallowMount } from '@vue/test-utils';
 import PolicyRuleEntity from 'ee/threat_monitoring/components/policy_editor/policy_rule_entity.vue';
-import { GlDropdown, GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
 import { EntityTypes } from 'ee/threat_monitoring/components/policy_editor/constants';
 
 describe('PolicyRuleEntity component', () => {

spec/frontend/design_management/components/upload/__snapshots__/design_version_dropdown_spec.js.snap

@@ -10,7 +10,7 @@ exports[`Design management design version dropdown component renders design vers
   text="Showing latest version"
   variant="default"
 >
-  <gl-new-dropdown-item-stub
+  <gl-dropdown-item-stub
     avatarurl=""
     iconcolor=""
     iconname=""
@@ -22,8 +22,8 @@ exports[`Design management design version dropdown component renders design vers
     Version 
         2
        (latest)
-  </gl-new-dropdown-item-stub>
-  <gl-new-dropdown-item-stub
+  </gl-dropdown-item-stub>
+  <gl-dropdown-item-stub
     avatarurl=""
     iconcolor=""
     iconname=""
@@ -34,7 +34,7 @@ exports[`Design management design version dropdown component renders design vers
     Version 
         1
       
-  </gl-new-dropdown-item-stub>
+  </gl-dropdown-item-stub>
 </gl-dropdown-stub>
 `;
 
@@ -48,7 +48,7 @@ exports[`Design management design version dropdown component renders design vers
   text="Showing latest version"
   variant="default"
 >
-  <gl-new-dropdown-item-stub
+  <gl-dropdown-item-stub
     avatarurl=""
     iconcolor=""
     iconname=""
@@ -60,8 +60,8 @@ exports[`Design management design version dropdown component renders design vers
     Version 
         2
        (latest)
-  </gl-new-dropdown-item-stub>
-  <gl-new-dropdown-item-stub
+  </gl-dropdown-item-stub>
+  <gl-dropdown-item-stub
     avatarurl=""
     iconcolor=""
     iconname=""
@@ -72,6 +72,6 @@ exports[`Design management design version dropdown component renders design vers
     Version 
         1
       
-  </gl-new-dropdown-item-stub>
+  </gl-dropdown-item-stub>
 </gl-dropdown-stub>
 `;

spec/frontend/design_management/components/upload/design_version_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem, GlSprintf } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlSprintf } from '@gitlab/ui';
 import DesignVersionDropdown from '~/design_management/components/upload/design_version_dropdown.vue';
 import mockAllVersions from './mock_data/all_versions';
 
@@ -42,7 +42,7 @@ describe('Design management design version dropdown component', () => {
     wrapper.destroy();
   });
 
-  const findVersionLink = index => wrapper.findAll(GlNewDropdownItem).at(index);
+  const findVersionLink = index => wrapper.findAll(GlDropdownItem).at(index);
 
   it('renders design version dropdown button', () => {
     createComponent();
@@ -107,7 +107,7 @@ describe('Design management design version dropdown component', () => {
       createComponent();
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.findAll(GlNewDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
+        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(wrapper.vm.allVersions.length);
       });
     });
   });

spec/frontend/incidents_settings/components/__snapshots__/alerts_form_spec.js.snap

@@ -55,7 +55,7 @@ exports[`Alert integration settings form default state should match the default
         text="selecte_tmpl"
         variant="default"
       >
-        <gl-new-dropdown-item-stub
+        <gl-dropdown-item-stub
           avatarurl=""
           data-qa-selector="incident_templates_item"
           iconcolor=""
@@ -67,7 +67,7 @@ exports[`Alert integration settings form default state should match the default
           
           No template selected
         
-        </gl-new-dropdown-item-stub>
+        </gl-dropdown-item-stub>
       </gl-dropdown-stub>
     </gl-form-group-stub>
      

spec/frontend/monitoring/components/dashboard_actions_menu_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { createStore } from '~/monitoring/stores';
 import { DASHBOARD_PAGE, PANEL_NEW_PAGE } from '~/monitoring/router/constants';
 import { setupAllDashboards, setupStoreWithData } from '../store_utils';
@@ -146,8 +146,8 @@ describe('Actions menu', () => {
   });
 
   describe('add panel item', () => {
-    const GlNewDropdownItemStub = {
-      extends: GlNewDropdownItem,
+    const GlDropdownItemStub = {
+      extends: GlDropdownItem,
       props: {
         to: [String, Object],
       },
@@ -164,7 +164,7 @@ describe('Actions menu', () => {
         },
         {
           mocks: { $route },
-          stubs: { GlNewDropdownItem: GlNewDropdownItemStub },
+          stubs: { GlDropdownItem: GlDropdownItemStub },
         },
       );
     });

spec/frontend/monitoring/components/dashboard_header_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
+import { GlDropdownItem, GlSearchBoxByType, GlLoadingIcon, GlButton } from '@gitlab/ui';
 import { createStore } from '~/monitoring/stores';
 import * as types from '~/monitoring/stores/mutation_types';
 import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
@@ -31,7 +31,7 @@ describe('Dashboard header', () => {
   const findDashboardDropdown = () => wrapper.find(DashboardsDropdown);
 
   const findEnvsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
-  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlNewDropdownItem);
+  const findEnvsDropdownItems = () => findEnvsDropdown().findAll(GlDropdownItem);
   const findEnvsDropdownSearch = () => findEnvsDropdown().find(GlSearchBoxByType);
   const findEnvsDropdownSearchMsg = () => wrapper.find({ ref: 'monitorEnvironmentsDropdownMsg' });
   const findEnvsDropdownLoadingIcon = () => findEnvsDropdown().find(GlLoadingIcon);

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { shallowMount } from '@vue/test-utils';
 import AxiosMockAdapter from 'axios-mock-adapter';
 import { setTestTimeout } from 'helpers/timeout';
-import { GlNewDropdownItem as GlDropdownItem } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import invalidUrl from '~/lib/utils/invalid_url';
 import axios from '~/lib/utils/axios_utils';
 import AlertWidget from '~/monitoring/components/alert_widget.vue';

spec/frontend/monitoring/components/dashboards_dropdown_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlNewDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
 
 import DashboardsDropdown from '~/monitoring/components/dashboards_dropdown.vue';
 
@@ -33,8 +33,8 @@ describe('DashboardsDropdown', () => {
     });
   }
 
-  const findItems = () => wrapper.findAll(GlNewDropdownItem);
-  const findItemAt = i => wrapper.findAll(GlNewDropdownItem).at(i);
+  const findItems = () => wrapper.findAll(GlDropdownItem);
+  const findItemAt = i => wrapper.findAll(GlDropdownItem).at(i);
   const findSearchInput = () => wrapper.find({ ref: 'monitorDashboardsDropdownSearch' });
   const findNoItemsMsg = () => wrapper.find({ ref: 'monitorDashboardsDropdownMsg' });
   const findStarredListDivider = () => wrapper.find({ ref: 'starredListDivider' });

spec/frontend/monitoring/components/refresh_button_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Visibility from 'visibilityjs';
-import { GlDropdown, GlNewDropdownItem, GlButton } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui';
 import { createStore } from '~/monitoring/stores';
 import RefreshButton from '~/monitoring/components/refresh_button.vue';
 
@@ -16,7 +16,7 @@ describe('RefreshButton', () => {
 
   const findRefreshBtn = () => wrapper.find(GlButton);
   const findDropdown = () => wrapper.find(GlDropdown);
-  const findOptions = () => findDropdown().findAll(GlNewDropdownItem);
+  const findOptions = () => findDropdown().findAll(GlDropdownItem);
   const findOptionAt = index => findOptions().at(index);
 
   const expectFetchDataToHaveBeenCalledTimes = times => {

spec/frontend/pipeline_new/components/pipeline_new_form_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GlDropdown, GlNewDropdownItem, GlForm } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlForm } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import axios from '~/lib/utils/axios_utils';
@@ -24,7 +24,7 @@ describe('Pipeline New Form', () => {
 
   const findForm = () => wrapper.find(GlForm);
   const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownItems = () => wrapper.findAll(GlNewDropdownItem);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
   const findVariableRows = () => wrapper.findAll('[data-testid="ci-variable-row"]');
   const findRemoveIcons = () => wrapper.findAll('[data-testid="remove-ci-variable-row"]');
   const findKeyInputs = () => wrapper.findAll('[data-testid="pipeline-form-ci-variable-key"]');

spec/frontend/projects/commits/components/author_select_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlDropdown, GlNewDropdownHeader, GlSearchBoxByType, GlNewDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlNewDropdownHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
 import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
@@ -61,7 +61,7 @@ describe('Author Select', () => {
   const findDropdown = () => wrapper.find(GlDropdown);
   const findDropdownHeader = () => wrapper.find(GlNewDropdownHeader);
   const findSearchBox = () => wrapper.find(GlSearchBoxByType);
-  const findDropdownItems = () => wrapper.findAll(GlNewDropdownItem);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
   describe('user is searching via "filter by commit message"', () => {
     it('disables dropdown container', () => {

spec/frontend/ref/components/ref_selector_spec.js

@@ -2,7 +2,7 @@ import Vuex from 'vuex';
 import { mount, createLocalVue } from '@vue/test-utils';
 import axios from 'axios';
 import MockAdapter from 'axios-mock-adapter';
-import { GlLoadingIcon, GlSearchBoxByType, GlNewDropdownItem, GlIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlSearchBoxByType, GlDropdownItem, GlIcon } from '@gitlab/ui';
 import { trimText } from 'helpers/text_helper';
 import { sprintf } from '~/locale';
 import { ENTER_KEY } from '~/lib/utils/keys';
@@ -87,15 +87,15 @@ describe('Ref selector component', () => {
   const findSearchBox = () => wrapper.find(GlSearchBoxByType);
 
   const findBranchesSection = () => wrapper.find('[data-testid="branches-section"]');
-  const findBranchDropdownItems = () => findBranchesSection().findAll(GlNewDropdownItem);
+  const findBranchDropdownItems = () => findBranchesSection().findAll(GlDropdownItem);
   const findFirstBranchDropdownItem = () => findBranchDropdownItems().at(0);
 
   const findTagsSection = () => wrapper.find('[data-testid="tags-section"]');
-  const findTagDropdownItems = () => findTagsSection().findAll(GlNewDropdownItem);
+  const findTagDropdownItems = () => findTagsSection().findAll(GlDropdownItem);
   const findFirstTagDropdownItem = () => findTagDropdownItems().at(0);
 
   const findCommitsSection = () => wrapper.find('[data-testid="commits-section"]');
-  const findCommitDropdownItems = () => findCommitsSection().findAll(GlNewDropdownItem);
+  const findCommitDropdownItems = () => findCommitsSection().findAll(GlDropdownItem);
   const findFirstCommitDropdownItem = () => findCommitDropdownItems().at(0);
 
   //

spec/frontend/vue_shared/components/filtered_search_bar/filtered_search_bar_root_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
-import {
-  GlFilteredSearch,
-  GlButtonGroup,
-  GlButton,
-  GlDropdown,
-  GlNewDropdownItem as GlDropdownItem,
-} from '@gitlab/ui';
+import { GlFilteredSearch, GlButtonGroup, GlButton, GlDropdown, GlDropdownItem } from '@gitlab/ui';
 
 import FilteredSearchBarRoot from '~/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue';
 import { uniqueTokens } from '~/vue_shared/components/filtered_search_bar/filtered_search_utils';