1 files changed, 6 insertions, 20 deletions
diff --git a/app/assets/javascripts/environments/components/environment_terminal_button.vue b/app/assets/javascripts/environments/components/environment_terminal_button.vue
index 4750b8ef01b..0df07f0457f 100644
--- a/app/assets/javascripts/environments/components/environment_terminal_button.vue
+++ b/app/assets/javascripts/environments/components/environment_terminal_button.vue
@@ -3,15 +3,12 @@
  * Renders a terminal button to open a web terminal.
  * Used in environments table.
  */
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDropdownItem } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
-    GlIcon,
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
+    GlDropdownItem,
   },
   props: {
     terminalPath: {
@@ -25,22 +22,11 @@ export default {
       default: false,
     },
   },
-  computed: {
-    title() {
-      return __('Terminal');
-    },
-  },
+  title: __('Terminal'),
 };
 </script>
 <template>
-  <a
-    v-gl-tooltip
-    :title="title"
-    :aria-label="title"
-    :href="terminalPath"
-    :class="{ disabled: disabled }"
-    class="btn terminal-button d-none d-md-block text-secondary"
-  >
-    <gl-icon name="terminal" />
-  </a>
+  <gl-dropdown-item :href="terminalPath" :disabled="disabled">
+    {{ $options.title }}
+  </gl-dropdown-item>
 </template>