Merge pull request #7593 from rekonder/aj_SCI_10742

Add project limit exceeded modal [SCI-10742]

app/javascript/vue/projects/list.vue

@@ -43,6 +43,7 @@
     :confirmText="i18n.t('projects.export_projects.export_button')"
     ref="exportModal"
   ></ConfirmationModal>
+  <ExportLimitExceededModal v-if="exportLimitExceded" :description="exportDescription" @close="exportLimitExceded = false"/>
   <EditProjectModal v-if="editProject" :userRolesUrl="userRolesUrl"
                     :project="editProject" @close="editProject = null" @update="updateTable(); updateNavigator()" />
   <EditFolderModal v-if="editFolder" :folder="editFolder"
@@ -76,6 +77,7 @@ import NewProjectModal from './modals/new.vue';
 import NewFolderModal from './modals/new_folder.vue';
 import MoveModal from './modals/move.vue';
 import AccessModal from '../shared/access_modal/modal.vue';
+import ExportLimitExceededModal from './modals/export_limit_exceeded_modal.vue';
 
 export default {
   name: 'ProjectsList',
@@ -89,7 +91,8 @@ export default {
     NewProjectModal,
     NewFolderModal,
     MoveModal,
-    AccessModal
+    AccessModal,
+    ExportLimitExceededModal
   },
   props: {
     dataSource: { type: String, required: true },
@@ -114,6 +117,7 @@ export default {
       editFolder: null,
       objectsToMove: null,
       reloadingTable: false,
+      exportLimitExceded: false,
       folderDeleteDescription: '',
       exportDescription: ''
     };
@@ -306,6 +310,7 @@ export default {
       this.newFolder = false;
       this.objectsToMove = null;
       this.reloadingTable = true;
+      this.exportLimitExceded = false;
     },
     updateNavigator(withExpanedChildren = false) {
       window.navigatorContainer.reloadNavigator(withExpanedChildren);
@@ -328,7 +333,7 @@ export default {
     async exportProjects(event, rows) {
       if (event.number_of_projects === 0) {
         HelperModule.flashAlertMsg(this.i18n.t('projects.export_projects.zero_projects_flash'), 'danger');
-      } else {
+      } else if (event.number_of_request_left > 0) {
         this.exportDescription = event.message;
         const ok = await this.$refs.exportModal.show();
         if (ok) {
@@ -342,6 +347,9 @@ export default {
             HelperModule.flashAlertMsg(error.response.data.error, 'danger');
           });
         }
+      } else {
+        this.exportDescription = event.message;
+        this.exportLimitExceded = true;
       }
     },
     move(event, rows) {

app/javascript/vue/projects/modals/export_limit_exceeded_modal.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <i class="sn-icon sn-icon-close"></i>
+          </button>
+          <h4 class="modal-title truncate !block" id="edit-project-modal-label">
+            {{ i18n.t('repositories.index.modal_export_limit_exceeded.title') }}
+          </h4>
+        </div>
+        <div class="modal-body" v-html="description"></div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.close') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import modalMixin from '../../shared/modal_mixin';
+
+export default {
+  name: 'ExportLimitExceededModal',
+  props: {
+    description: {
+      type: String,
+      required: true
+    }
+  },
+  mixins: [modalMixin]
+};
+</script>

app/services/toolbars/projects_service.rb

@@ -106,11 +106,16 @@ module Toolbars
       num_of_requests_left = @current_user.exports_left - 1
       team = @items.first.team
 
-      message = "<p>#{I18n.t('projects.export_projects.modal_text_p1_html',
-                 num_projects: num_projects,
-                 team: team.name)}</p>
-                 <p>#{I18n.t('projects.export_projects.modal_text_p2_html')}</p>"
-      unless limit.zero?
+      message = if limit.zero? || num_of_requests_left.positive?
+                  "<p>#{I18n.t('projects.export_projects.modal_text_p1_html',
+                               num_projects: num_projects,
+                               team: team.name)}</p>
+                   <p>#{I18n.t('projects.export_projects.modal_text_p2_html')}</p>"
+                else
+                  "<p>#{I18n.t('repositories.index.modal_export_limit_exceeded.error_p1_html', limit: limit)}</p>
+                   <p>#{I18n.t('repositories.index.modal_export_limit_exceeded.error_p2_html', limit: limit)}</p>"
+                end
+      unless limit.zero? || !num_of_requests_left.positive?
         message += "<p><i>#{I18n.t('projects.export_projects.modal_text_p3_html', limit: limit, num: num_of_requests_left)}</i></p>"
       end
 
@@ -120,6 +125,7 @@ module Toolbars
         label: I18n.t('projects.export_projects.export_button'),
         icon: 'sn-icon sn-icon-export',
         message: message,
+        number_of_request_left: limit.zero? ? 1 : num_of_requests_left,
         path: export_projects_team_path(team),
         number_of_projects: num_projects,
         type: :emit