Update delete environment modal to gl component

app/assets/javascripts/environments/components/delete_environment_modal.vue

 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { GlTooltipDirective, GlModal } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
   id: 'delete-environment-modal',
   name: 'DeleteEnvironmentModal',
-
   components: {
     GlModal,
   },
-
   directives: {
     GlTooltip: GlTooltipDirective,
   },
-
   props: {
     environment: {
       type: Object,
       required: true,
     },
   },
-
   computed: {
+    primaryProps() {
+      return {
+        text: s__('Environments|Delete environment'),
+        attributes: [{ variant: 'danger' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: s__('Cancel'),
+      };
+    },
     confirmDeleteMessage() {
       return sprintf(
         s__(
@@ -35,8 +41,12 @@ export default {
         false,
       );
     },
+    modalTitle() {
+      return sprintf(s__(`Environments|Delete '%{environmentName}'?`), {
+        environmentName: this.environment.name,
+      });
+    },
   },
-
   methods: {
     onSubmit() {
       eventHub.$emit('deleteEnvironment', this.environment);
@@ -47,20 +57,12 @@ export default {
 
 <template>
   <gl-modal
-    :id="$options.id"
-    :footer-primary-button-text="s__('Environments|Delete environment')"
-    footer-primary-button-variant="danger"
-    @submit="onSubmit"
+    :modal-id="$options.id"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    :title="modalTitle"
+    @primary="onSubmit"
   >
-    <template #header>
-      <h4 class="modal-title d-flex mw-100">
-        {{ __('Delete') }}
-        <span v-gl-tooltip :title="environment.name" class="text-truncate mx-1 flex-fill">
-          {{ environment.name }}?
-        </span>
-      </h4>
-    </template>
-
     <p>{{ confirmDeleteMessage }}</p>
   </gl-modal>
 </template>

app/assets/javascripts/environments/components/environment_delete.vue

@@ -4,7 +4,7 @@
  * Used in the environments table.
  */
 
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlModalDirective } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
@@ -14,6 +14,7 @@ export default {
   },
   directives: {
     GlTooltip: GlTooltipDirective,
+    GlModalDirective,
   },
   props: {
     environment: {
@@ -54,6 +55,7 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip="{ id: $options.deleteEnvironmentTooltipId }"
+    v-gl-modal-directive="'delete-environment-modal'"
     :loading="isLoading"
     :title="title"
     :aria-label="title"
@@ -61,8 +63,6 @@ export default {
     variant="danger"
     category="primary"
     icon="remove"
-    data-toggle="modal"
-    data-target="#delete-environment-modal"
     @click="onClick"
   />
 </template>

locale/gitlab.pot

@@ -10411,6 +10411,9 @@ msgstr ""
 msgid "Environments|Delete"
 msgstr ""
 
+msgid "Environments|Delete '%{environmentName}'?"
+msgstr ""
+
 msgid "Environments|Delete environment"
 msgstr ""