Update stop environment modal to gl-modal

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

@@ -4,7 +4,7 @@
  * Used in 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,14 +55,13 @@ export default {
 <template>
   <gl-button
     v-gl-tooltip="{ id: $options.stopEnvironmentTooltipId }"
+    v-gl-modal-directive="'stop-environment-modal'"
     :loading="isLoading"
     :title="title"
     :aria-label="title"
     icon="stop"
     category="primary"
     variant="danger"
-    data-toggle="modal"
-    data-target="#stop-environment-modal"
     @click="onClick"
   />
 </template>

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

 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlSprintf, GlTooltipDirective } from '@gitlab/ui';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
+import { GlSprintf, GlTooltipDirective, GlModal } from '@gitlab/ui';
 import eventHub from '../event_hub';
+import { __, s__ } from '~/locale';
 
 export default {
   id: 'stop-environment-modal',
   name: 'StopEnvironmentModal',
 
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
     GlSprintf,
   },
 
@@ -24,6 +23,20 @@ export default {
     },
   },
 
+  computed: {
+    primaryProps() {
+      return {
+        text: s__('Environments|Stop environment'),
+        attributes: [{ variant: 'danger' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: __('Cancel'),
+      };
+    },
+  },
+
   methods: {
     onSubmit() {
       eventHub.$emit('stopEnvironment', this.environment);
@@ -34,18 +47,23 @@ export default {
 
 <template>
   <gl-modal
-    :id="$options.id"
-    :footer-primary-button-text="s__('Environments|Stop environment')"
-    footer-primary-button-variant="danger"
-    @submit="onSubmit"
+    :modal-id="$options.id"
+    :action-primary="primaryProps"
+    :action-cancel="cancelProps"
+    @primary="onSubmit"
   >
-    <template #header>
-      <h4 class="modal-title d-flex mw-100">
-        Stopping
-        <span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">
-          {{ environment.name }}?
-        </span>
-      </h4>
+    <template #modal-title>
+      <gl-sprintf :message="s__('Environments|Stopping %{environmentName}')">
+        <template #environmentName>
+          <span
+            v-gl-tooltip
+            :title="environment.name"
+            class="gl-text-truncate gl-ml-2 gl-mr-2 gl-flex-fill"
+          >
+            {{ environment.name }}?
+          </span>
+        </template>
+      </gl-sprintf>
     </template>
 
     <p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>

locale/gitlab.pot

@@ -10427,6 +10427,9 @@ msgstr ""
 msgid "Environments|Stopping"
 msgstr ""
 
+msgid "Environments|Stopping %{environmentName}"
+msgstr ""
+
 msgid "Environments|There was an error fetching the logs. Please try again."
 msgstr ""