Update dropdown to gl components

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

@@ -6,9 +6,9 @@ import {
   GlFormInput,
   GlFormSelect,
   GlLoadingIcon,
-  GlDeprecatedDropdown,
-  GlDeprecatedDropdownHeader,
-  GlDeprecatedDropdownItem,
+  GlDropdown,
+  GlDropdownSectionHeader,
+  GlDropdownItem,
   GlSprintf,
 } from '@gitlab/ui';
 import { s__ } from '~/locale';
@@ -76,9 +76,9 @@ export default {
     GlFormSelect,
     GlLoadingIcon,
     LabelsSelector,
-    GlDeprecatedDropdown,
-    GlDeprecatedDropdownHeader,
-    GlDeprecatedDropdownItem,
+    GlDropdown,
+    GlDropdownSectionHeader,
+    GlDropdownItem,
     GlSprintf,
   },
   props: {
@@ -257,21 +257,24 @@ export default {
   <form v-else class="custom-stage-form m-4 mt-0">
     <div class="mb-1 d-flex flex-row justify-content-between">
       <h4>{{ formTitle }}</h4>
-      <gl-deprecated-dropdown
+      <gl-dropdown
         :text="__('Recover hidden stage')"
         class="js-recover-hidden-stage-dropdown"
+        category="tertiary"
+        variant="default"
+        size="medium"
       >
-        <gl-deprecated-dropdown-header>{{ __('Default stages') }}</gl-deprecated-dropdown-header>
+        <gl-dropdown-section-header>{{ __('Default stages') }}</gl-dropdown-section-header>
         <template v-if="hasHiddenStages">
-          <gl-deprecated-dropdown-item
+          <gl-dropdown-item
             v-for="stage in hiddenStages"
             :key="stage.id"
             @click="handleRecoverStage(stage.id)"
-            >{{ stage.title }}</gl-deprecated-dropdown-item
+            >{{ stage.title }}</gl-dropdown-item
           >
         </template>
         <p v-else class="mx-3 my-2">{{ __('All default stages are currently visible') }}</p>
-      </gl-deprecated-dropdown>
+      </gl-dropdown>
     </div>
     <gl-form-group
       ref="name"