Merge branch '229686-update-delete-project-modal' into 'master'

Update delete project modal to gl-modal

Closes #229686

See merge request gitlab-org/gitlab!41011

app/assets/javascripts/pages/admin/projects/index/components/delete_project_modal.vue

 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+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,
@@ -66,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-safe-html="props.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>
-    </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>

app/assets/javascripts/pages/admin/projects/index/index.js

-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;
-    }
-  });
 });

app/views/admin/projects/_projects.html.haml

@@ -5,10 +5,7 @@
         %li.project-row{ class: ('no-description' if project.description.blank?) }
           .controls
             = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn"
-            %button.delete-project-button.btn.btn-danger{ data: { toggle: 'modal',
-              target: '#delete-project-modal',
-              delete_project_url: admin_project_path(project),
-              project_name: project.name }, type: 'button' }
+            %button.delete-project-button.btn.btn-danger{ data: { delete_project_url: admin_project_path(project), project_name: project.name } }
               = s_('AdminProjects|Delete')
 
           .stats

locale/gitlab.pot

@@ -1833,9 +1833,6 @@ msgstr ""
 msgid "AdminProjects|Delete Project %{projectName}?"
 msgstr ""
 
-msgid "AdminProjects|Delete project"
-msgstr ""
-
 msgid "AdminSettings|Apply integration settings to all Projects"
 msgstr ""