Handle connection errors in UI

assets/stylesheets/common/create/listing/imports_options.scss

@@ -74,6 +74,22 @@ $w: $sLayout-width;
     padding-top: 12px;
   }
 
+  &__form-error {
+    position: relative;
+    width: 465px;
+    padding-left: 20px;
+    color: $cHighlight-negative;
+    font-size: 12px;
+    line-height: 16px;
+
+    &::before {
+      content: '🚫';
+      position: absolute;
+      left: 0;
+      line-height: 18px;
+    }
+  }
+
   &__input-error {
     margin-top: -4px;
     padding: 0 12px;

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-connect-form-view.js

@@ -25,7 +25,10 @@ module.exports = CoreView.extend({
   },
 
   render: function () {
-    this.$el.html(template(this.options));
+    this.$el.html(template({
+      title: this.options.title,
+      errorMessage: this.model.get('errorMessage')
+    }));
     this._addSidebar();
 
     this.form = {
@@ -37,6 +40,13 @@ module.exports = CoreView.extend({
       password: this.$('.js-password')
     };
 
+    if (this._model.connection) {
+      this.form.server.val(this._model.connection.server);
+      this.form.port.val(this._model.connection.port);
+      this.form.database.val(this._model.connection.database);
+      this.form.username.val(this._model.connection.username);
+      this.form.password.val(this._model.connection.password);
+    }
     return this;
   },
 
@@ -52,7 +62,7 @@ module.exports = CoreView.extend({
 
   _checkVisibility: function () {
     const state = this._model.get('state');
-    if (state === 'idle' || state === 'error') {
+    if (state === 'idle') {
       this.show();
     } else {
       this.hide();
@@ -96,22 +106,24 @@ module.exports = CoreView.extend({
 
     client.checkDBConnectorsConnection(this._service, params, (errors, _response, data) => {
       if (errors) {
-        this._checkConnectionError();
+        this._checkConnectionError(data);
+      } else if (data && data.connected) {
+        this._checkConnectionSuccess();
       }
-      this._checkConnectionSuccess(data);
     });
   },
 
-  _checkConnectionSuccess: function (data) {
-    if (data && data.connected) {
-      this._model.set('state', 'connected');
-      this._model.set('service_name', 'connector');
-    } else {
-      this._model.set('state', 'error');
-    }
+  _checkConnectionSuccess: function () {
+    this._model.set('state', 'connected');
+    this._model.set('service_name', 'connector');
   },
 
-  _checkConnectionError: function () {
-    this._model.set('state', 'error');
+  _checkConnectionError: function (data) {
+    if (data.responseJSON && data.responseJSON.connected === false) {
+      this._model.set('errorMessage', _t('components.modals.add-layer.imports.database.connection-error'));
+    } else {
+      this._model.set('errorMessage', _t('components.modals.add-layer.imports.database.general-error'));
+    }
+    this.render();
   }
 });

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-connect-form.tpl

@@ -50,6 +50,14 @@
         </div>
       </div>
 
+      <% if (errorMessage) { %>
+        <div class="Form-row">
+          <div class="ImportOptions__form-error CDB-Text">
+            <%- errorMessage %>
+          </div>
+        </div>
+      <% } %>
+
       <div class="Form-row">
         <div class="Form-rowLabel Form-rowLabel--small"></div>
         <div class="Form-rowData u-flex__justify--end">

lib/assets/javascripts/builder/components/modals/add-layer/content/imports/import-database/import-database-query-form-view.js

@@ -20,6 +20,10 @@ module.exports = ImportDataView.extend({
     );
 
     this._initCodeMirror();
+
+    if (this.sqlQuery) {
+      this.codeEditor.setValue(this.sqlQuery);
+    }
     return this;
   },
 
@@ -55,6 +59,8 @@ module.exports = ImportDataView.extend({
       return;
     }
 
+    this.sqlQuery = query;
+
     this.trigger('urlSelected', this);
 
     // Change model
@@ -95,7 +101,7 @@ module.exports = ImportDataView.extend({
         this.model.set('service_item_id', JSON.stringify(connector));
       } catch (e) {
         this.model.set('errorMessage', _t('components.modals.add-layer.imports.database.sql-error'));
-        this.model.set('state', 'list');
+        this.model.set('state', 'connected');
         this.model.setUpload({
           value: '',
           service_item_id: ''

lib/assets/javascripts/locale/en.json

@@ -1373,6 +1373,8 @@
                         "label-password": "Password",
                         "placeholder-password": "Type your password",
                         "connect-button": "Connect",
+                        "connection-error": "The connection could not be established. Please, check the entered parameters.",
+                        "general-error": "Unfortunately, there was an error. Please, try again.",
                         "field-sql-query": "SQL query",
                         "sql-hint": "If your query contains geographic data in EPSG:4326 format, name that column with an accepted name so that it’s imported correctly: “the_geom”, “geom“, “geometry“...",
                         "sql-error": "There has been an error parsing your query",

lib/assets/test/spec/builder/components/modals/add-layer/content/imports/import-database/import-database-connect-form-view.spec.js

@@ -99,26 +99,21 @@ describe('components/modals/add-layer/content/imports/import-database/import-dat
   });
 
   describe('_checkConnectionSuccess', function () {
-    it('should set model state `connected` if Import API call succeeds', function () {
-      this.view._checkConnectionSuccess({ status: 200, connected: true });
+    it('should set model state `connected`', function () {
+      this.view._checkConnectionSuccess();
       expect(this.view.model.get('state')).toEqual('connected');
     });
-
-    it('should set model service_name `connector` if Import API call succeeds', function () {
-      this.view._checkConnectionSuccess({ status: 200, connected: true });
-      expect(this.view.model.get('state')).toEqual('connected');
-    });
-
-    it('should set model state `error` if Import API call succeeds but does not connect', function () {
-      this.view._checkConnectionSuccess({ status: 400, connected: false });
-      expect(this.view.model.get('state')).toEqual('error');
-    });
   });
 
   describe('_checkConnectionError', function () {
-    it('should set model state `error` if Import API call does not succeed', function () {
-      this.view._checkConnectionSuccess({ status: 400, connected: false });
-      expect(this.view.model.get('state')).toEqual('error');
+    it('should set an error message if Import API call returns errors and `connected` is false', function () {
+      this.view._checkConnectionError({ status: 400, responseJSON: { connected: false } });
+      expect(this.view.model.get('errorMessage')).toBe('components.modals.add-layer.imports.database.connection-error');
+    });
+
+    it('should set a general error message if Import API call returns errors', function () {
+      this.view._checkConnectionError({ status: 400 });
+      expect(this.view.model.get('errorMessage')).toBe('components.modals.add-layer.imports.database.general-error');
     });
   });
 });