Remove success step from inventory import [SCI-10790]

app/controllers/repositories_controller.rb

@@ -332,11 +332,14 @@ class RepositoriesController < ApplicationController
                  should_overwrite_with_empty_cells: import_params[:should_overwrite_with_empty_cells],
                  preview: import_params[:preview]
                ).import!
+      message = t('repositories.import_records.partial_success_flash',
+                  nr: status[:nr_of_added], total_nr: status[:total_nr])
+
       if status[:status] == :ok
         log_activity(:import_inventory_items, num_of_items: status[:nr_of_added])
-        render json: import_params[:preview] ? status : {}, status: :ok
+        render json: import_params[:preview] ? status : { message: message }, status: :ok
       else
-        render json: {}, status: :unprocessable_entity
+        render json: { message: message }, status: :unprocessable_entity
       end
     else
       render json: { error: t('repositories.import_records.error_message.mapping_error') },

app/javascript/vue/repositories/modals/import/container.vue

@@ -1,11 +1,12 @@
 <template>
-  <div v-if="modalOpened">
+  <div v-if="modalOpened" class="relative">
     <component
       v-if="activeStep !== 'ExportModal'"
       :is="activeStep"
       :params="params"
       :key="modalId"
       :uploading="uploading"
+      :loading="loading"
       @uploadFile="uploadFile"
       @generatePreview="generatePreview"
       @changeStep="changeStep"
@@ -23,13 +24,13 @@
 </template>
 
 <script>
+/* global HelperModule */
 
 import axios from '../../../../packs/custom_axios';
 import InfoModal from '../../../shared/info_modal.vue';
 import UploadStep from './upload_step.vue';
 import MappingStep from './mapping_step.vue';
 import PreviewStep from './preview_step.vue';
-import SuccessStep from './success_step.vue';
 import ExportModal from '../export.vue';
 
 export default {
@@ -39,7 +40,6 @@ export default {
     UploadStep,
     MappingStep,
     PreviewStep,
-    SuccessStep,
     ExportModal
   },
   props: {
@@ -52,7 +52,8 @@ export default {
       activeStep: 'UploadStep',
       uploading: false,
       params: {},
-      modalId: null
+      modalId: null,
+      loading: false
     };
   },
   created() {
@@ -98,6 +99,10 @@ export default {
       this.activeStep = step;
     },
     importRecords(preview) {
+      if (this.loading) {
+        return;
+      }
+
       const jsonData = {
         file_id: this.params.temp_file.id,
         mappings: this.params.mapping,
@@ -106,6 +111,9 @@ export default {
         should_overwrite_with_empty_cells: this.params.updateWithEmptyCells,
         can_edit_existing_items: !this.params.onlyAddNewItems
       };
+
+      this.loading = true;
+
       axios.post(this.params.attributes.urls.import_records, jsonData)
         .then((response) => {
           if (preview) {
@@ -113,8 +121,17 @@ export default {
             this.params.import_date = response.data.import_date;
             this.activeStep = 'PreviewStep';
           } else {
-            this.activeStep = 'SuccessStep';
+            HelperModule.flashAlertMsg(response.data.message, 'success');
+            this.modalOpened = false;
+            this.activeStep = null;
+            $('.dataTable.repository-dataTable').DataTable().ajax.reload(null, false);
           }
+
+          this.loading = false;
+        })
+        .catch((error) => {
+          HelperModule.flashAlertMsg(error.response.data.message, 'danger');
+          this.loading = false;
         });
     }
   }

app/javascript/vue/repositories/modals/import/mapping_step.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
+      <Loading v-if="loading" />
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-e2e="e2e-BT-newInventoryModal-close">
@@ -11,6 +12,7 @@
           </h4>
         </div>
         <div class="modal-body">
+
           <p class="text-sn-dark-grey">
             {{ this.i18n.t('repositories.import_records.steps.step2.subtitle') }}
           </p>
@@ -92,6 +94,7 @@ import axios from '../../../../packs/custom_axios';
 import SelectDropdown from '../../../shared/select_dropdown.vue';
 import MappingStepTableRow from './mapping_step_table_row.vue';
 import modalMixin from '../../../shared/modal_mixin';
+import Loading from '../../../shared/loading.vue';
 
 export default {
   name: 'MappingStep',
@@ -99,12 +102,17 @@ export default {
   mixins: [modalMixin],
   components: {
     SelectDropdown,
-    MappingStepTableRow
+    MappingStepTableRow,
+    Loading
   },
   props: {
     params: {
       type: Object,
       required: true
+    },
+    loading: {
+      type: Boolean,
+      required: true
     }
   },
   data() {

app/javascript/vue/repositories/modals/import/preview_step.vue

@@ -1,6 +1,7 @@
 <template>
   <div ref="modal" class="modal" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
+      <Loading v-if="loading" />
       <div class="modal-content grow">
         <div class="modal-header gap-4">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-e2e="e2e-BT-newInventoryModal-close">
@@ -11,6 +12,7 @@
           </h4>
         </div>
         <div class="modal-body">
+
           <p class="text-sn-dark-grey mb-6">
             {{ i18n.t('repositories.import_records.steps.step3.subtitle', { inventory: params.attributes.name }) }}
           </p>
@@ -81,7 +83,7 @@
 <script>
 import { AgGridVue } from 'ag-grid-vue3';
 import modalMixin from '../../../shared/modal_mixin';
-
+import Loading from '../../../shared/loading.vue';
 
 export default {
   name: 'PreviewStep',
@@ -90,10 +92,15 @@ export default {
     params: {
       type: Object,
       required: true
+    },
+    loading: {
+      type: Boolean,
+      required: true
     }
   },
   components: {
-    AgGridVue
+    AgGridVue,
+    Loading
   },
   data() {
     return {

app/javascript/vue/repositories/modals/import/success_step.vue

@@ -1,50 +0,0 @@
-<template>
-  <div ref="modal" class="modal" tabindex="-1" role="dialog">
-    <div class="modal-dialog modal-sm" role="document">
-      <div class="modal-content grow">
-        <div class="modal-header gap-4">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close" data-e2e="e2e-BT-newInventoryModal-close">
-            <i class="sn-icon sn-icon-close"></i>
-          </button>
-          <h4 class="modal-title truncate !block" id="edit-project-modal-label" data-e2e="e2e-TX-newInventoryModal-title">
-            {{ i18n.t('repositories.import_records.steps.step4.title') }}
-          </h4>
-        </div>
-        <div class="modal-body">
-          <p class="text-sn-dark-grey mb-6">
-            {{ i18n.t('repositories.import_records.steps.step4.subtitle', { inventory: params.attributes.name }) }}
-          </p>
-          <div>
-            <b>{{ i18n.t('repositories.import_records.steps.step4.import_date') }}</b>
-            {{ params.import_date }}
-          </div>
-          <div>
-            <b>{{ i18n.t('repositories.import_records.steps.step4.imported_file') }}</b>
-            {{ params.file_name }}
-          </div>
-        </div>
-        <div class="modal-footer">
-          <button type="button" class="btn btn-primary" @click="close">
-            {{ i18n.t('repositories.import_records.steps.step4.close') }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import modalMixin from '../../../shared/modal_mixin';
-
-
-export default {
-  name: 'SuccessStep',
-  mixins: [modalMixin],
-  props: {
-    params: {
-      type: Object,
-      required: true
-    }
-  }
-};
-</script>

app/javascript/vue/shared/loading.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="flex absolute top-0 items-center justify-center w-full flex-grow h-full z-[3000]">
+    <div class="absolute top-0 left-0 w-full h-full bg-black opacity-10"></div>
+    <img src="/images/medium/loading.svg" alt="Loading" class="" />
+  </div>
+</template>
+<script>
+export default {
+  name: 'Loading'
+};
+</script>

config/locales/en.yml

@@ -2339,7 +2339,7 @@ en:
       import: 'Import'
       no_header_name: 'No column name'
       success_flash: "%{number_of_rows} of %{total_nr} new item(s) successfully imported."
-      partial_success_flash: "%{nr} of %{total_nr} successfully imported. Other rows contained errors."
+      partial_success_flash: "%{nr} of %{total_nr} items successfully imported."
       error_message:
         items_limit: "The imported file contains too many rows. Max %{items_size} items allowed to upload at once."
         importing_duplicates: "Items with duplicates detected: %{duplicate_ids}. These will be ignored on import."