1 files changed, 13 insertions, 11 deletions
diff --git a/app/assets/javascripts/environments/components/environment_delete.vue b/app/assets/javascripts/environments/components/environment_delete.vue
index 63169b790c7..6072d923b5f 100644
--- a/app/assets/javascripts/environments/components/environment_delete.vue
+++ b/app/assets/javascripts/environments/components/environment_delete.vue
@@ -4,14 +4,14 @@
  * Used in the environments table.
  */
 
-import { GlDropdownItem, GlModalDirective } from '@gitlab/ui';
+import { GlDisclosureDropdownItem, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 import setEnvironmentToDelete from '../graphql/mutations/set_environment_to_delete.mutation.graphql';
 
 export default {
   components: {
-    GlDropdownItem,
+    GlDisclosureDropdownItem,
   },
   directives: {
     GlModalDirective,
@@ -30,11 +30,15 @@ export default {
   data() {
     return {
       isLoading: false,
+      item: {
+        text: s__('Environments|Delete environment'),
+        extraAttrs: {
+          variant: 'danger',
+          class: 'gl-text-red-500!',
+        },
+      },
     };
   },
-  i18n: {
-    title: s__('Environments|Delete environment'),
-  },
   mounted() {
     if (!this.graphql) {
       eventHub.$on('deleteEnvironment', this.onDeleteEnvironment);
@@ -65,12 +69,10 @@ export default {
 };
 </script>
 <template>
-  <gl-dropdown-item
+  <gl-disclosure-dropdown-item
     v-gl-modal-directive.delete-environment-modal
+    :item="item"
     :loading="isLoading"
-    variant="danger"
-    @click="onClick"
-  >
-    {{ $options.i18n.title }}
-  </gl-dropdown-item>
+    @action="onClick"
+  />
 </template>