Replace $.post in importer status with axios

1 files changed, 44 insertions, 24 deletions

diff --git a/app/assets/javascripts/importer_status.js b/app/assets/javascripts/importer_status.js
index 1dc70872d92..134a503864e 100644
--- a/app/assets/javascripts/importer_status.js
+++ b/app/assets/javascripts/importer_status.js
@@ -1,3 +1,7 @@
+import { __ } from './locale';
+import axios from './lib/utils/axios_utils';
+import flash from './flash';
+
 class ImporterStatus {
   constructor(jobsUrl, importUrl) {
     this.jobsUrl = jobsUrl;
@@ -9,29 +13,7 @@ class ImporterStatus {
   initStatusPage() {
     $('.js-add-to-import')
       .off('click')
-      .on('click', (event) => {
-        const $btn = $(event.currentTarget);
-        const $tr = $btn.closest('tr');
-        const $targetField = $tr.find('.import-target');
-        const $namespaceInput = $targetField.find('.js-select-namespace option:selected');
-        const id = $tr.attr('id').replace('repo_', '');
-        let targetNamespace;
-        let newName;
-        if ($namespaceInput.length > 0) {
-          targetNamespace = $namespaceInput[0].innerHTML;
-          newName = $targetField.find('#path').prop('value');
-          $targetField.empty().append(`${targetNamespace}/${newName}`);
-        }
-        $btn.disable().addClass('is-loading');
-
-        return $.post(this.importUrl, {
-          repo_id: id,
-          target_namespace: targetNamespace,
-          new_name: newName,
-        }, {
-          dataType: 'script',
-        });
-      });
+      .on('click', this.addToImport.bind(this));
 
     $('.js-import-all')
       .off('click')
@@ -44,6 +26,39 @@ class ImporterStatus {
       });
   }
 
+  addToImport(event) {
+    const $btn = $(event.currentTarget);
+    const $tr = $btn.closest('tr');
+    const $targetField = $tr.find('.import-target');
+    const $namespaceInput = $targetField.find('.js-select-namespace option:selected');
+    const id = $tr.attr('id').replace('repo_', '');
+    let targetNamespace;
+    let newName;
+    if ($namespaceInput.length > 0) {
+      targetNamespace = $namespaceInput[0].innerHTML;
+      newName = $targetField.find('#path').prop('value');
+      $targetField.empty().append(`${targetNamespace}/${newName}`);
+    }
+    $btn.disable().addClass('is-loading');
+
+    return axios.post(this.importUrl, {
+      repo_id: id,
+      target_namespace: targetNamespace,
+      new_name: newName,
+    })
+    .then(({ data }) => {
+      const job = $(`tr#repo_${id}`);
+      job.attr('id', `project_${data.id}`);
+
+      job.find('.import-target').html(`<a href="${data.full_path}">${data.full_path}</a>`);
+      $('table.import-jobs tbody').prepend(job);
+
+      job.addClass('active');
+      job.find('.import-actions').html('<i class="fa fa-spinner fa-spin" aria-label="importing"></i> started');
+    })
+    .catch(() => flash(__('An error occurred while importing project')));
+  }
+
   setAutoUpdate() {
     return setInterval(() => $.get(this.jobsUrl, data => $.each(data, (i, job) => {
       const jobItem = $(`#project_${job.id}`);
@@ -71,7 +86,7 @@ class ImporterStatus {
 }
 
 // eslint-disable-next-line consistent-return
-export default function initImporterStatus() {
+function initImporterStatus() {
   const importerStatus = document.querySelector('.js-importer-status');
 
   if (importerStatus) {
@@ -79,3 +94,8 @@ export default function initImporterStatus() {
     return new ImporterStatus(data.jobsImportPath, data.importPath);
   }
 }
+
+export {
+  initImporterStatus as default,
+  ImporterStatus,
+};