feat(assets) add error management while editing a local asset (#2044)

Display an error message when an error occurs while editing a local asset
Display a specific error message when trying to save a malformed json file

Closes [BS-15784](https://bonitasoft.atlassian.net/browse/BS-15784)

.jshintrc

@@ -31,6 +31,7 @@
 
     // Jasmine
     "describe": false,
+    "fail": false,
     "beforeEach": false,
     "module": false,
     "inject": false,

frontend/app/js/assets/asset-edit-popup.js

@@ -17,10 +17,11 @@
 
   class AssetEditPopupCtrl {
 
-    constructor(asset, component, aceMode, $uibModalInstance, assetRepo) {
+    constructor(asset, component, aceMode, $uibModalInstance, assetRepo, assetErrorManagement) {
       this.asset = asset;
       this.component = component;
       this.$uibModalInstance = $uibModalInstance;
+      this.assetErrorManagement = assetErrorManagement;
       this.assetRepo = assetRepo;
       this.aceMode = aceMode;
       this.content = '';
@@ -33,6 +34,7 @@
     save() {
       this.assetRepo
         .updateLocalAssetContent(this.component.id, this.asset, this.content)
+        .then((response) => this.assetErrorManagement.manageErrorsFromResponse(response))
         .then(() => this.$uibModalInstance.close());
     }
   }

frontend/app/js/assets/asset-popup.controller.js

@@ -20,7 +20,7 @@
     .module('bonitasoft.designer.assets')
     .controller('AssetPopupCtrl', AssetPopupCtrl);
 
-  function AssetPopupCtrl($scope, $uibModalInstance, alerts, assetsService, assetRepo, asset, assets, mode, artifact, gettextCatalog) {
+  function AssetPopupCtrl($scope, $uibModalInstance, alerts, assetsService, assetRepo, asset, assets, mode, artifact, gettextCatalog, assetErrorManagement) {
 
     var urlPrefixForLocalAsset = 'rest/' + mode + 's/' + artifact.id + '/assets/';
 
@@ -63,28 +63,14 @@
       // else nothing to do, form will be submitted as standard multipart/form-data form
     }
 
-    function hasError(response) {
-      return response && response.type && response.message;
-    }
-
     /**
      * A local asset (file) is saved by the submit of the html form
      */
     function onComplete(response) {
-      //Even if a problem occurs in the backend a response is sent with a message
-      //If the message has a type and a message this an error
-      if (hasError(response)) {
-        if (response.type === 'MalformedJsonException') {
-          alerts.addError({
-            contentUrl: 'js/assets/malformed-json-error-message.html',
-            context: response
-          }, 12000);
-        } else {
-          alerts.addError(response.message);
-        }
-        vm.cancel();
-      }
-      $uibModalInstance.close(response);
+      assetErrorManagement.manageErrorsFromResponse(response).then(
+        (response) => $uibModalInstance.close(response),
+        () => vm.cancel()
+      );
     }
 
     /**

frontend/app/js/assets/error-management.service.js

+(() => {
+
+  class AsserErrorManagement {
+
+    /* @ngInject */
+    constructor(alerts, $q) {
+      this.alerts = alerts;
+      this.$q = $q;
+    }
+
+    displayError(response) {
+      if (response.type === 'MalformedJsonException') {
+        this.alerts.addError({
+          contentUrl: 'js/assets/malformed-json-error-message.html',
+          context: response
+        }, 12000);
+      } else {
+        this.alerts.addError(response.message);
+      }
+    }
+
+    hasError(response) {
+      return response && response.type && response.message;
+    }
+
+    manageErrorsFromResponse(response) {
+      if (this.hasError(response)) {
+        this.displayError(response);
+        return this.$q.reject(response);
+      } else {
+        return this.$q.when(response);
+      }
+    }
+  }
+
+  angular
+    .module('bonitasoft.designer.assets')
+    .service('assetErrorManagement', AsserErrorManagement);
+})();

frontend/app/js/assets/malformed-json-error-message.html

 <p>
     <strong translate>Malformed json file</strong>
-    <div translate>Asset has not been imported</div>
+    <div translate>Asset has not been saved</div>
     <div translate>Error at line <code>{{ infos.location.line }}</code>, column <code>{{ infos.location.column }}</code></div>
 </p>

frontend/app/js/common/repositories/asset-repository.service.js

@@ -60,7 +60,7 @@
             // See section 5.1.1. (Multipart Media Type / Common Syntax) of rfc2046 https://www.ietf.org/rfc/rfc2046.txt
             'Content-Type': undefined
           }
-        });
+        }).then(response => response.data);
       }
 
       loadLocalAssetContent(componentId, asset) {

frontend/test/unit/assets/asset-popup.controller.spec.js

@@ -9,7 +9,6 @@ describe('AssetPopupCtrl', function() {
       asset: asset,
       assets: assets,
       assetsService: assetsService,
-      alerts: alerts,
       mode: mode,
       artifact: { id: 12 },
       assetRepo: assetRepo
@@ -27,7 +26,8 @@ describe('AssetPopupCtrl', function() {
     assetsService = $injector.get('assetsService');
     injector = $injector;
     $uibModalInstance = jasmine.createSpyObj('$uibModalInstance', ['dismiss', 'close']);
-    alerts = jasmine.createSpyObj('alerts', ['addError']);
+    alerts = $injector.get('alerts');
+    spyOn(alerts, 'addError');
 
     assets = [];
     asset = {
@@ -56,21 +56,23 @@ describe('AssetPopupCtrl', function() {
     var response = { type: 'error', message: 'an error occured' };
 
     controller.onComplete(response);
+    $rootScope.$apply();
 
     expect(alerts.addError).toHaveBeenCalledWith(response.message);
-    expect($uibModalInstance.close).toHaveBeenCalled();
+    expect($uibModalInstance.dismiss).toHaveBeenCalled();
   });
 
   it('should display a specific error while uploading a malformed json file for json asset', function() {
     var response = { type: 'MalformedJsonException', message: 'an error occured', infos: { location: {column: 65, line: 12}} };
 
     controller.onComplete(response);
+    $rootScope.$apply();
 
     expect(alerts.addError).toHaveBeenCalledWith({
         contentUrl: 'js/assets/malformed-json-error-message.html',
         context: response
       }, 12000);
-    expect($uibModalInstance.close).toHaveBeenCalled();
+    expect($uibModalInstance.dismiss).toHaveBeenCalled();
   });
 
   it('should send external data to the caller when user want to save it', function() {

frontend/test/unit/assets/error-management.service.spec.js

+describe('AsserErrorManagement service', () => {
+
+  var assetErrorManagement, alerts, $scope;
+
+  beforeEach(angular.mock.module('bonitasoft.designer.assets'));
+
+  beforeEach(inject(function (_assetErrorManagement_, _alerts_, $rootScope) {
+    assetErrorManagement = _assetErrorManagement_;
+    alerts = _alerts_;
+    $scope = $rootScope;
+    spyOn(alerts, 'addError');
+  }));
+
+  it('should resolve promise when no error has occured', function () {
+    var response = {'id': '3fdf575e-f589-4b8e-807c-295f18bee9cc', 'name': 'localization.json', 'type': 'json', 'order': 2, 'active': true, 'external': false};
+
+    assetErrorManagement.manageErrorsFromResponse(response)
+
+      .then(
+      (promiseResponse) => expect(promiseResponse).toEqual(response),
+      () => fail('Promise should not be rejected'));
+    $scope.$apply();
+  });
+
+  it('should diplay error and reject promise when response contains error after form submit', function () {
+    var response = {type: 'error', message: 'an error occured'};
+
+    assetErrorManagement.manageErrorsFromResponse(response)
+
+      .then(
+      () => fail('Promise should not be resolved'),
+      (promiseResponse) => {
+        expect(alerts.addError).toHaveBeenCalledWith(response.message);
+        expect(promiseResponse).toEqual(response);
+      });
+    $scope.$apply();
+  });
+
+  it('should display a specific error while uploading a malformed json file for json asset', function () {
+    var response = {type: 'MalformedJsonException', message: 'an error occured', infos: {location: {column: 65, line: 12}}};
+
+    assetErrorManagement.manageErrorsFromResponse(response)
+
+      .then(
+      () => fail('Promise should not be resolved'),
+      (promiseResponse) => {
+        expect(alerts.addError).toHaveBeenCalledWith({
+          contentUrl: 'js/assets/malformed-json-error-message.html',
+          context: response
+        }, 12000);
+        expect(promiseResponse).toEqual(response);
+      });
+    $scope.$apply();
+  });
+});