2 files changed, 51 insertions, 39 deletions

diff --git a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
index 8bb093da771..b92fc8d125d 100644
--- a/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
+++ b/app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue
@@ -1,11 +1,14 @@
 <script>
+import { GlSafeHtmlDirective as SafeHtml, GlModal } from '@gitlab/ui';
 import { escape } from 'lodash';
-import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
-import { s__, sprintf } from '~/locale';
+import { __, s__, sprintf } from '~/locale';
 
 export default {
   components: {
-    DeprecatedModal,
+    GlModal,
+  },
+  directives: {
+    SafeHtml,
   },
   props: {
     deleteProjectUrl: {
@@ -62,51 +65,57 @@ export default {
         false,
       );
     },
-    primaryButtonLabel() {
-      return s__('AdminProjects|Delete project');
-    },
     canSubmit() {
       return this.enteredProjectName === this.projectName;
     },
+    primaryProps() {
+      return {
+        text: s__('Delete project'),
+        attributes: [{ variant: 'danger' }, { category: 'primary' }, { disabled: !this.canSubmit }],
+      };
+    },
   },
   methods: {
     onCancel() {
       this.enteredProjectName = '';
     },
     onSubmit() {
+      if (!this.canSubmit) {
+        return;
+      }
       this.$refs.form.submit();
       this.enteredProjectName = '';
     },
   },
+  cancelProps: {
+    text: __('Cancel'),
+  },
 };
 </script>
 
 <template>
-  <deprecated-modal
-    id="delete-project-modal"
+  <gl-modal
+    modal-id="delete-project-modal"
     :title="title"
-    :text="text"
-    :primary-button-label="primaryButtonLabel"
-    :submit-disabled="!canSubmit"
-    kind="danger"
-    @submit="onSubmit"
+    :action-primary="primaryProps"
+    :action-cancel="$options.cancelProps"
+    :ok-disabled="!canSubmit"
+    @primary="onSubmit"
     @cancel="onCancel"
   >
-    <template #body="props">
-      <p v-html="props.text"></p>
-      <p v-html="confirmationTextLabel"></p>
-      <form ref="form" :action="deleteProjectUrl" method="post">
-        <input ref="method" type="hidden" name="_method" value="delete" />
-        <input :value="csrfToken" type="hidden" name="authenticity_token" />
-        <input
-          v-model="enteredProjectName"
-          name="projectName"
-          class="form-control"
-          type="text"
-          aria-labelledby="input-label"
-          autocomplete="off"
-        />
-      </form>
-    </template>
-  </deprecated-modal>
+    <p v-safe-html="text"></p>
+    <p v-safe-html="confirmationTextLabel"></p>
+    <form ref="form" :action="deleteProjectUrl" method="post">
+      <input ref="method" type="hidden" name="_method" value="delete" />
+      <input :value="csrfToken" type="hidden" name="authenticity_token" />
+      <input
+        v-model="enteredProjectName"
+        name="projectName"
+        class="form-control"
+        type="text"
+        aria-labelledby="input-label"
+        autocomplete="off"
+      />
+    </form>
+  </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pages/admin/projects/index/index.js b/app/assets/javascripts/pages/admin/projects/index/index.js
index 6fa8760545d..ebb1a74e970 100644
--- a/app/assets/javascripts/pages/admin/projects/index/index.js
+++ b/app/assets/javascripts/pages/admin/projects/index/index.js
@@ -1,4 +1,3 @@
-import $ from 'jquery';
 import Vue from 'vue';
 
 import Translate from '~/vue_shared/translate';
@@ -17,6 +16,18 @@ document.addEventListener('DOMContentLoaded', () => {
       deleteProjectUrl: '',
       projectName: '',
     },
+    mounted() {
+      const deleteProjectButtons = document.querySelectorAll('.delete-project-button');
+      deleteProjectButtons.forEach(button => {
+        button.addEventListener('click', () => {
+          const buttonProps = button.dataset;
+          deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl;
+          deleteModal.projectName = buttonProps.projectName;
+
+          this.$root.$emit('bv::show::modal', 'delete-project-modal');
+        });
+      });
+    },
     render(createElement) {
       return createElement(deleteProjectModal, {
         props: {
@@ -27,12 +38,4 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     },
   });
-
-  $(document).on('shown.bs.modal', event => {
-    if (event.relatedTarget.classList.contains('delete-project-button')) {
-      const buttonProps = event.relatedTarget.dataset;
-      deleteModal.deleteProjectUrl = buttonProps.deleteProjectUrl;
-      deleteModal.projectName = buttonProps.projectName;
-    }
-  });
 });