1 files changed, 20 insertions, 10 deletions
diff --git a/app/assets/javascripts/badges/components/badge_settings.vue b/app/assets/javascripts/badges/components/badge_settings.vue
index 531742e49e3..19781783100 100644
--- a/app/assets/javascripts/badges/components/badge_settings.vue
+++ b/app/assets/javascripts/badges/components/badge_settings.vue
@@ -1,9 +1,8 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlSprintf } from '@gitlab/ui';
+import { GlSprintf, GlModal } from '@gitlab/ui';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__ } from '~/locale';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
 import Badge from './badge.vue';
 import BadgeForm from './badge_form.vue';
 import BadgeList from './badge_list.vue';
@@ -14,7 +13,7 @@ export default {
     Badge,
     BadgeForm,
     BadgeList,
-    GlModal: DeprecatedModal2,
+    GlModal,
     GlSprintf,
   },
   i18n: {
@@ -24,6 +23,17 @@ export default {
   },
   computed: {
     ...mapState(['badgeInModal', 'isEditing']),
+    primaryProps() {
+      return {
+        text: s__('Delete badge'),
+        attributes: [{ category: 'primary' }, { variant: 'danger' }],
+      };
+    },
+    cancelProps() {
+      return {
+        text: s__('Cancel'),
+      };
+    },
   },
   methods: {
     ...mapActions(['deleteBadge']),
@@ -44,11 +54,11 @@ export default {
 <template>
   <div class="badge-settings">
     <gl-modal
-      id="delete-badge-modal"
-      :header-title-text="s__('Badges|Delete badge?')"
-      :footer-primary-button-text="s__('Badges|Delete badge')"
-      footer-primary-button-variant="danger"
-      @submit="onSubmitModal"
+      modal-id="delete-badge-modal"
+      :title="s__('Badges|Delete badge?')"
+      :action-primary="primaryProps"
+      :action-cancel="cancelProps"
+      @primary="onSubmitModal"
     >
       <div class="well">
         <badge
@@ -65,9 +75,9 @@ export default {
       </p>
     </gl-modal>
 
-    <badge-form v-show="isEditing" :is-editing="true" />
+    <badge-form v-show="isEditing" :is-editing="true" data-testid="edit-badge" />
 
-    <badge-form v-show="!isEditing" :is-editing="false" />
+    <badge-form v-show="!isEditing" :is-editing="false" data-testid="add-new-badge" />
     <badge-list v-show="!isEditing" />
   </div>
 </template>