1 files changed, 44 insertions, 62 deletions

diff --git a/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue b/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue
index 2fdf8456615..0154cd2a3ec 100644
--- a/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue
+++ b/app/assets/javascripts/ci/runner/components/registration/registration_dropdown.vue
@@ -1,5 +1,11 @@
 <script>
-import { GlDropdown, GlDropdownForm, GlDropdownItem, GlDropdownDivider, GlIcon } from '@gitlab/ui';
+import {
+  GlDisclosureDropdown,
+  GlDropdownForm,
+  GlDisclosureDropdownItem,
+  GlDisclosureDropdownGroup,
+  GlIcon,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue';
@@ -20,12 +26,15 @@ export default {
     showInstallationInstructions: s__(
       'Runners|Show runner installation and registration instructions',
     ),
+    supportForRegistrationTokensDeprecated: s__(
+      'Runners|Support for registration tokens is deprecated',
+    ),
   },
   components: {
-    GlDropdown,
+    GlDisclosureDropdown,
+    GlDisclosureDropdownItem,
+    GlDisclosureDropdownGroup,
     GlDropdownForm,
-    GlDropdownItem,
-    GlDropdownDivider,
     GlIcon,
     RegistrationToken,
     RunnerInstructionsModal,
@@ -51,14 +60,6 @@ export default {
     };
   },
   computed: {
-    isDeprecated() {
-      // Show a compact version when used as secondary option
-      // create_runner_workflow_for_admin or create_runner_workflow_for_namespace
-      return (
-        this.glFeatures?.createRunnerWorkflowForAdmin ||
-        this.glFeatures?.createRunnerWorkflowForNamespace
-      );
-    },
     actionText() {
       switch (this.type) {
         case INSTANCE_TYPE:
@@ -71,30 +72,6 @@ export default {
           return I18N_REGISTER_RUNNER;
       }
     },
-    dropdownText() {
-      if (this.isDeprecated) {
-        return '';
-      }
-      return this.actionText;
-    },
-    dropdownToggleClass() {
-      if (this.isDeprecated) {
-        return ['gl-px-3!'];
-      }
-      return [];
-    },
-    dropdownCategory() {
-      if (this.isDeprecated) {
-        return 'tertiary';
-      }
-      return 'primary';
-    },
-    dropdownVariant() {
-      if (this.isDeprecated) {
-        return 'default';
-      }
-      return 'confirm';
-    },
   },
   methods: {
     onShowInstructionsClick() {
@@ -103,46 +80,51 @@ export default {
     onTokenReset(token) {
       this.currentRegistrationToken = token;
 
-      this.$refs.runnerRegistrationDropdown.hide(true);
+      this.$refs.runnerRegistrationDropdown.close();
+    },
+    onCopy() {
+      this.$refs.runnerRegistrationDropdown.close();
     },
   },
 };
 </script>
 
 <template>
-  <gl-dropdown
+  <gl-disclosure-dropdown
     ref="runnerRegistrationDropdown"
-    menu-class="gl-w-auto!"
-    :text="dropdownText"
-    :toggle-class="dropdownToggleClass"
-    :variant="dropdownVariant"
-    :category="dropdownCategory"
+    :toggle-text="actionText"
+    toggle-class="gl-px-3!"
+    variant="default"
+    category="tertiary"
     v-bind="$attrs"
+    icon="ellipsis_v"
+    text-sr-only
+    no-caret
   >
-    <template v-if="isDeprecated" #button-content>
-      <span class="gl-sr-only">{{ actionText }}</span>
-      <gl-icon name="ellipsis_v" />
-    </template>
     <gl-dropdown-form class="gl-p-4!">
-      <registration-token input-id="token-value" :value="currentRegistrationToken">
-        <template v-if="isDeprecated" #label-description>
+      <registration-token input-id="token-value" :value="currentRegistrationToken" @copy="onCopy">
+        <template #label-description>
           <gl-icon name="warning" class="gl-text-orange-500" />
           <span class="gl-text-secondary">
-            {{ s__('Runners|Support for registration tokens is deprecated') }}
+            {{ $options.i18n.supportForRegistrationTokensDeprecated }}
           </span>
         </template>
       </registration-token>
     </gl-dropdown-form>
-    <gl-dropdown-divider />
-    <gl-dropdown-item @click.capture.native.stop="onShowInstructionsClick">
-      {{ $options.i18n.showInstallationInstructions }}
-      <runner-instructions-modal
-        ref="runnerInstructionsModal"
-        :registration-token="currentRegistrationToken"
-        data-testid="runner-instructions-modal"
-      />
-    </gl-dropdown-item>
-    <gl-dropdown-divider />
-    <registration-token-reset-dropdown-item :type="type" @tokenReset="onTokenReset" />
-  </gl-dropdown>
+    <gl-disclosure-dropdown-group bordered>
+      <gl-disclosure-dropdown-item @action="onShowInstructionsClick">
+        <template #list-item>
+          {{ $options.i18n.showInstallationInstructions }}
+          <runner-instructions-modal
+            ref="runnerInstructionsModal"
+            :registration-token="currentRegistrationToken"
+            data-testid="runner-instructions-modal"
+          />
+        </template>
+      </gl-disclosure-dropdown-item>
+    </gl-disclosure-dropdown-group>
+    <gl-disclosure-dropdown-group bordered>
+      <registration-token-reset-dropdown-item :type="type" @tokenReset="onTokenReset" />
+    </gl-disclosure-dropdown-group>
+  </gl-disclosure-dropdown>
 </template>