Only show the database login fields when necessary (#2615)

* DB login fields visibility controled by CSS

The database login field’s visibility is now controled by CSS styling.

* Change field name from Database to Database file.

Change field name from Database to Database file.

* Use full db name as CSS classes

Use full db name instead of diminutives for the CSS classes.

* Added translation to placeholders

Added translation to the Input placeholders.

* Undo a change, remerge Database field & File

remerge Database field and DatabaseFile Field like before.

* Created DatabaseSourceUI._updateDatabaseType(dbType)

Created Refine.DatabaseSourceUI.prototype._updateDatabaseType(databaseType)

* Make MySQL the default database

<option value="mysql" selected="selected"">MySQL</option>

* Update database-import-form.html

Fixed typo. (<option value="mysql" selected="selected">MySQL</option>)

* New default connection name value

New default connection name value, translation of it, changing cssClassName from options to dbtype-options, adding the prefix "dbt-" to the db types and fix the changing of placeholder databaseName/databaseFileName when neccessary.

* Fix issue with « saved connections »

Fix issue with « saved connections » and added 2 defaults values for dbHost and dbType.

* Default DB back to MySQL.

<option value="mysql" selected="selected">MySQL</option>

* Update extensions/database/module/langs/translation-en.json

Co-authored-by: Thad Guidry <thadguidry@gmail.com>

* Better default with « mysql »

* Fix sqlite #databaseHost before calling self._updateDatabaseType()

Fix $( "#databaseHost" ).val(self._defaultDatabaseHost) to be set before calling self._updateDatabaseType(self._defaultDatabaseType) that may change it.

* Removed field name & fixed default connection name

Removed field name text since it's populated from i18n and fixed the default connection name so that it has no space in it.

* Little update to placeholder text

Co-authored-by: Thad Guidry <thadguidry@gmail.com>

extensions/database/module/langs/translation-en.json

@@ -20,8 +20,18 @@
     "database-source/databasePortLabel": "Port:",
     "database-source/databaseUserLabel": "User:",
     "database-source/databasePasswordLabel": "Password:",
-    "database-source/databaseNameLabel": "Database:",
+    "database-source/databaseNameLabel": "Database name:",
+    "database-source/databaseFileNameLabel": "Database file:",
     "database-source/databaseSchemaLabel": "Schema:",
+    "database-source/connectionNamePlaceholder": "Enter a new Connection Name",
+    "database-source/databaseHostPlaceholder": "Enter the database server domain or IP",
+    "database-source/databasePortPlaceholder": "Enter the database port e.g. 3306",
+    "database-source/databaseUserPlaceholder": "Enter the database user",
+    "database-source/databasePasswordPlaceholder": "Enter the database password",
+    "database-source/databaseNamePlaceholder": "Enter the name of the database",
+    "database-source/databaseFileNamePlaceholder": "Enter the full path to the database file",
+    "database-source/databaseSchemaPlaceholder": "Enter the initial schema of the database",
+    "database-source/connectionNameDefaultValue": "New_Connection_Name",
     "database-source/databaseTestButton": "Test",
     "database-source/databaseSaveButton": "Save",
     "database-source/databaseConnectButton": "Connect",

extensions/database/module/langs/translation-en_GB.json

@@ -28,6 +28,7 @@
     "database-source/databaseTestButton": "Test",
     "database-source/databaseSchemaLabel": "Schema:",
     "database-source/databaseNameLabel": "Database:",
+    "database-source/databaseFileNameLabel": "Database file:",
     "database-source/databasePasswordLabel": "Password:",
     "database-source/databaseUserLabel": "User:",
     "database-source/databasePortLabel": "Port:",

extensions/database/module/langs/translation-fr.json

@@ -21,7 +21,17 @@
     "database-source/databaseUserLabel": "Utilisateur :",
     "database-source/databasePasswordLabel": "Mot de passe :",
     "database-source/databaseNameLabel": "Base de données :",
+    "database-source/databaseFileNameLabel": "Fichier de données :",
     "database-source/databaseSchemaLabel": "Schéma :",
+    "database-source/connectionNamePlaceholder": "Entrez le nom de la connexion",
+    "database-source/databaseHostPlaceholder": "Entrez l’adresse de l’hôte de la base de données",
+    "database-source/databasePortPlaceholder": "Entrez le port de la base de données e.g. 3306",
+    "database-source/databaseUserPlaceholder": "Entrez l’utilisateur de la base de données",
+    "database-source/databasePasswordPlaceholder": "Entrez le mot de passe de l’utilisateur",
+    "database-source/databaseNamePlaceholder": "Entrez le nom de la base de données",
+    "database-source/databaseFileNamePlaceholder": "Entrez le chemin du fichier base de données",
+    "database-source/databaseSchemaPlaceholder": "Entrez le schéma initial",
+    "database-source/connectionNameDefaultValue": "Nom_nouvelle_connexion",
     "database-source/databaseTestButton": "Test",
     "database-source/databaseSaveButton": "Enregistrer",
     "database-source/databaseConnectButton": "Connexion",

extensions/database/module/langs/translation-it.json

@@ -20,6 +20,7 @@
     "database-source/databaseUserLabel": "Utente:",
     "database-source/databasePasswordLabel": "Password:",
     "database-source/databaseNameLabel": "Database:",
+    "database-source/databaseFileNameLabel": "Database file:",
     "database-source/databaseSchemaLabel": "Schema:",
     "database-source/databaseTestButton": "Test",
     "database-source/databaseSaveButton": "Salva",

extensions/database/module/langs/translation-jp.json

@@ -21,6 +21,7 @@
     "database-source/databaseUserLabel": "User:",
     "database-source/databasePasswordLabel": "Password:",
     "database-source/databaseNameLabel": "Database:",
+    "database-source/databaseFileNameLabel": "Database file:",
     "database-source/databaseSchemaLabel": "スキーマ :",
     "database-source/databaseTestButton": "テスト",
     "database-source/databaseSaveButton": "保存",

extensions/database/module/langs/translation-ko.json

@@ -21,6 +21,7 @@
     "database-source/databaseUserLabel": "사용자:",
     "database-source/databasePasswordLabel": "비밀번호:",
     "database-source/databaseNameLabel": "데이터베이스:",
+    "database-source/databaseFileNameLabel": "데이터베이스:",
     "database-source/databaseSchemaLabel": "스키마:",
     "database-source/databaseTestButton": "테스트",
     "database-source/databaseSaveButton": "저장",

extensions/database/module/langs/translation-nb_NO.json

@@ -19,6 +19,7 @@
     "database-source/databaseUserLabel": "Bruker:",
     "database-source/databasePasswordLabel": "Passord:",
     "database-source/databaseNameLabel": "Database:",
+    "database-source/databaseFileNameLabel": "Database file:",
     "database-source/databaseSchemaLabel": "Skjema:",
     "database-source/databaseTestButton": "Test",
     "database-source/databaseSaveButton": "Lagre",

extensions/database/module/langs/translation-sv.json

@@ -21,6 +21,7 @@
     "database-source/databaseUserLabel": "Användare:",
     "database-source/databasePasswordLabel": "Lösenord:",
     "database-source/databaseNameLabel": "Databas:",
+    "database-source/databaseFileNameLabel": "Databas file:",
     "database-source/databaseSchemaLabel": "Schema:",
     "database-source/databaseTestButton": "Test",
     "database-source/databaseSaveButton": "Spara",

extensions/database/module/scripts/database-extension.js

@@ -139,33 +139,30 @@ DatabaseExtension.handleDeleteConnectionClicked = function(connectionName) {
 }
 
 DatabaseExtension.handleEditConnectionClicked = function(connectionName) {
-    
-     $.get(
-             "command/database/saved-connection" + '?' + $.param({"connectionName": connectionName}),
-                 null,
-                 function(savedDatabaseConfig) {
-                     
-                     if(savedDatabaseConfig){
-                       
-                           var savedConfig = savedDatabaseConfig.savedConnections[0];
-                           $( "#connectionName" ).val(savedConfig.connectionName);
-                           $( "#databaseTypeSelect" ).val(savedConfig.databaseType);
-                           $( "#databaseHost" ).val(savedConfig.databaseHost);
-                           $( "#databasePort" ).val(savedConfig.databasePort);
-                           $( "#databaseUser" ).val(savedConfig.databaseUser);
-                           $( "#databasePassword" ).val(savedConfig.databasePassword);
-                           $( "#initialDatabase" ).val(savedConfig.databaseName);
-                           $( "#initialSchema" ).val(savedConfig.databaseSchema);
-                           $( "#newConnectionControlDiv" ).hide();
-                           $( "#editConnectionControlDiv" ).show();
-                           $( "#newConnectionDiv" ).show();
-                           $('#sqlEditorDiv').hide();
-                           $("#connectionName").attr('readonly', 'readonly');
-                   
-                     }
-                         
-                 },
-                 "json"
-       );
+  $.get(
+    "command/database/saved-connection" + '?' + $.param({ "connectionName": connectionName }),
+    null,
+    function(savedDatabaseConfig) {
+      if (savedDatabaseConfig) {
+        var savedConfig = savedDatabaseConfig.savedConnections[0];
 
+        $( "#connectionName" ).val(savedConfig.connectionName);
+        $( "select#databaseTypeSelect" ).val(savedConfig.databaseType);
+        Refine.DatabaseSourceUI.prototype._updateDatabaseType(savedConfig.databaseType);
+        
+        $( "#databaseHost" ).val(savedConfig.databaseHost);
+        $( "#databasePort" ).val(savedConfig.databasePort);
+        $( "#databaseUser" ).val(savedConfig.databaseUser);
+        $( "#databasePassword" ).val(savedConfig.databasePassword);
+        $( "#initialDatabase" ).val(savedConfig.databaseName);
+        $( "#initialSchema" ).val(savedConfig.databaseSchema);
+        $( "#newConnectionControlDiv" ).hide();
+        $( "#editConnectionControlDiv" ).show();
+        $( "#newConnectionDiv" ).show();
+        $('#sqlEditorDiv').hide();
+        $("#connectionName").attr('readonly', 'readonly');
+      }
+    },
+    "json"
+  );
 }

extensions/database/module/scripts/index/database-import-form.html

@@ -28,45 +28,44 @@
                                       <legend class="new-connection-legend pure-input-1-2">New Connection Editor</legend>
                                   
                                       <div class="pure-control-group">
-                                           <label id="connectionNameLabel" for="name">Name:</label>
-                                           <input bind="connectionNameInput" id="connectionName" type="text" placeholder="Enter Connection Name" value="127.0.0.1" class="pure-input-1-3" required>
+                                           <label id="connectionNameLabel" for="name"></label>
+                                           <input bind="connectionNameInput" id="connectionName" type="text" placeholder="" value="" class="pure-input-1-3" required>
                                        </div>
                                
                                        <div class="pure-control-group">
-                                           <label id="databaseTypeLabel" for="databaseType">Database Type:</label>
+                                           <label id="databaseTypeLabel" for="databaseType"></label>
                                             <select name="selection" id="databaseTypeSelect" bind="databaseTypeSelect" class="pure-input-1-3" required>
                                             	  <option value="postgresql">PostgreSQL</option>  
-                                               <option value="mysql">MySQL</option>
+                                               <option value="mysql" selected="selected">MySQL</option>
                                                <option value="mariadb">MariaDB</option>
                                                 <option value="sqlite">SQLite</option>
                                             </select>
                                        </div>
-                               
-                                       <div class="pure-control-group">
-                                           <label id="databaseHostLabel" for="databaseHost">Database Host:</label>
-                                           <input bind="databaseHostInput" id="databaseHost" type="text" placeholder="Enter Database Host Address" value="localhost" class="pure-input-1-3" required>
-                                       </div>
-                               
-                                       <div class="pure-control-group">
-                                           <label id="databasePortLabel" for="databasePort">Database Port:</label>
-                                           <input bind="databasePortInput" id="databasePort" type="text" placeholder="Enter Database Port e.g. 3306" value="5432" class="pure-input-1-3" required>
-                                       </div>
-                                        <div class="pure-control-group">
-                                           <label id="databaseUserLabel" for="databaseUser">Database User:</label>
-                                           <input bind="databaseUserInput" id="databaseUser" type="text" placeholder="Enter Database User" value="postgres" class="pure-input-1-3" required>
-                                       </div>
-                                        <div class="pure-control-group">
-                                           <label id="databasePasswordLabel" for="databasePassword">Database Password:</label>
-                                           <input bind="databasePasswordInput" id="databasePassword" type="password" placeholder="Enter Database Password" class="pure-input-1-3" required>
-                                       </div>
-                                        <div class="pure-control-group">
-                                           <label id="databaseNameLabel" for="initialDatabase">Database Name:</label>
-                                           <input bind="initialDatabaseInput" id="initialDatabase" type="text" placeholder="Enter Database" class="pure-input-1-3" required>
-                                       </div>
-                                       <div class="pure-control-group" style="display:none;">
-                                           <label id="databaseSchemaLabel" for="initialSchema">Schema Name:</label>
-                                           <input bind="initialSchemaInput" id="initialSchema" type="text" placeholder="Enter Initial Schema" class="pure-input-1-3" required>
-                                       </div>
+
+                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
+                                          <label id="databaseHostLabel" for="databaseHost"></label> 
+                                          <input bind="databaseHostInput" id="databaseHost" type="text" placeholder="" value="localhost" class="pure-input-1-3" required>
+                                        </div>
+                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
+                                          <label id="databasePortLabel" for="databasePort"></label> 
+                                          <input bind="databasePortInput" id="databasePort" type="text" placeholder="" value="5432" class="pure-input-1-3" required>
+                                        </div>
+                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
+                                          <label id="databaseUserLabel" for="databaseUser"></label> 
+                                          <input bind="databaseUserInput" id="databaseUser" type="text" placeholder="" value="postgres" class="pure-input-1-3" required>
+                                        </div>
+                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb">
+                                          <label id="databasePasswordLabel" for="databasePassword"></label> 
+                                          <input bind="databasePasswordInput" id="databasePassword" type="password" placeholder="" class="pure-input-1-3" required>
+                                        </div>
+                                        <div class="pure-control-group dbtype-options dbt-postgresql dbt-mysql dbt-mariadb dbt-sqlite">
+                                          <label id="databaseNameLabel" for="initialDatabase"></label> 
+                                          <input bind="initialDatabaseInput" id="initialDatabase" type="text" placeholder="" class="pure-input-1-3" required>
+                                        </div>
+                                        <div class="pure-control-group dbtype-options">
+                                          <label id="databaseSchemaLabel" for="initialSchema"></label> 
+                                          <input bind="initialSchemaInput" id="initialSchema" type="text" placeholder="" class="pure-input-1-3" required>
+                                        </div>
                                        
                                         <div class="pure-controls" id="newConnectionControlDiv">
                                            <button type="button" id="databaseTestButton" bind="testDatabaseButton" class="pure-button pure-button-primary"><span>Test</span></button>

extensions/database/module/scripts/index/database-source-ui.js

@@ -64,6 +64,10 @@ Refine.DatabaseSourceUI.prototype.attachUI = function(body) {
   this._elmts = DOM.bind(this._body);
   var self = this;
   
+  self._defaultDatabaseHost = "localhost";
+  self._defaultDatabaseType = $( "select#databaseTypeSelect" ).val();
+  if (self._defaultDatabaseType == "") { self._defaultDatabaseType = "mysql"; }
+  
   $('#database-title').text($.i18n('database-import/title')); 
   $('#connectionNameLabel').html($.i18n('database-source/connectionNameLabel'));
   $('#databaseTypeLabel').html($.i18n('database-source/databaseTypeLabel'));
@@ -79,38 +83,33 @@ Refine.DatabaseSourceUI.prototype.attachUI = function(body) {
   $('#newConnectionButtonDiv').text($.i18n('database-source/newConnectionButtonDiv'));
   $('#savedConnectionSpan').text($.i18n('database-source/savedConnectionSpan'));
  
-  
+  $('input#connectionName').attr('placeholder', $.i18n('database-source/connectionNamePlaceholder'));
+  $('input#databaseHost').attr('placeholder', $.i18n('database-source/databaseHostPlaceholder'));
+  $('input#databasePort').attr('placeholder', $.i18n('database-source/databasePortPlaceholder'));
+  $('input#databaseUser').attr('placeholder', $.i18n('database-source/databaseUserPlaceholder'));
+  $('input#databasePassword').attr('placeholder', $.i18n('database-source/databasePasswordPlaceholder'));
+  $('input#initialDatabase').attr('placeholder', $.i18n('database-source/databaseNamePlaceholder'));
+  $('input#initialSchema').attr('placeholder', $.i18n('database-source/databaseSchemaPlaceholder'));
+
+  $('input#connectionName').attr('value', $.i18n('database-source/connectionNameDefaultValue'));
+
   this._elmts.newConnectionButton.click(function(evt) {
       self._resetDatabaseImportForm();
       $( "#newConnectionDiv" ).show();
       $( "#sqlEditorDiv" ).hide();
     //   self._body.find('.newConnectionDiv').show();  
     //   self._body.find('.sqlEditorDiv').hide();
-     
   });
   
-  
   this._elmts.databaseTypeSelect.change(function(event) {
-      var type = $( "#databaseTypeSelect" ).val(); 
-      if(type === "postgresql"){ 
-          $( "#databaseUser" ).val("postgres");
-          $( "#databasePort" ).val("5432");	  
-      }else if(type === "mysql"){	  
-          $( "#databaseUser" ).val("root");
-          $( "#databasePort" ).val("3306");	  
-      }else if(type === "mariadb"){
-          $( "#databaseUser" ).val("root");
-          $( "#databasePort" ).val("3306");
-      }else if(type === "sqlite"){
-          $( "#databaseUser" ).val("na");
-          $( "#databasePort" ).val("0");
-          $( "#databaseHost" ).val("na");
-      }else{
-          $( "#databaseUser" ).val("root");
-          $( "#databasePort" ).val("3306");
-      }
+    var type = $( "select#databaseTypeSelect" ).val();
+
+    self._updateDatabaseType(type);
   });
   
+  var defaultDatabase = $( "select#databaseTypeSelect" ).val();
+  self._updateDatabaseType(defaultDatabase);
+
   this._elmts.testDatabaseButton.click(function(evt) {
       
           if(self._validateNewConnectionForm() === true){
@@ -190,7 +189,6 @@ Refine.DatabaseSourceUI.prototype.attachUI = function(body) {
 Refine.DatabaseSourceUI.prototype.focus = function() {
 };
 
-
 Refine.DatabaseSourceUI.prototype.validateQuery = function(query) {
      //alert("query::" + query);
      if(!query || query.length <= 0 ) {
@@ -234,6 +232,43 @@ Refine.DatabaseSourceUI.prototype.validateQuery = function(query) {
      return true;
 };
 
+Refine.DatabaseSourceUI.prototype._updateDatabaseType = function(databaseType) {
+  if(databaseType === "postgresql") {
+      $( "#databaseUser" ).val("postgres");
+      $( "#databasePort" ).val("5432");
+    
+  } else if(databaseType === "mysql") {
+      $( "#databaseUser" ).val("root");
+      $( "#databasePort" ).val("3306");
+    
+  } else if(databaseType === "mariadb") {
+      $( "#databaseUser" ).val("root");
+      $( "#databasePort" ).val("3306");
+    
+  } else if(databaseType === "sqlite") {
+      $( "#databaseUser" ).val("na");
+      $( "#databasePort" ).val("0");
+      $( "#databaseHost" ).val("na");
+    
+  } else {
+      $( "#databaseUser" ).val("root");
+      $( "#databasePort" ).val("3306");
+      databaseType = "mysql";
+  }
+  
+  $("div.pure-control-group.dbtype-options").hide();
+  $("div.pure-control-group.dbtype-options.dbt-"+databaseType).show();
+  
+  if (databaseType == "sqlite") {
+    $('#databaseNameLabel').text($.i18n('database-source/databaseFileNameLabel'));
+    $('input#initialDatabase').attr('placeholder', $.i18n('database-source/databaseFileNamePlaceholder'));
+    
+  } else {
+    $('#databaseNameLabel').text($.i18n('database-source/databaseNameLabel'));
+    $('input#initialDatabase').attr('placeholder', $.i18n('database-source/databaseNamePlaceholder'));
+  }
+};
+  
 Refine.DatabaseSourceUI.prototype._editConnection = function(connectionInfo) {	
     //alert("database user:" + connectionInfo.databaseUser);
     var self = this;
@@ -473,19 +508,20 @@ Refine.DatabaseSourceUI.prototype._validateNewConnectionForm = function() {
        return true;
 };	
 
-Refine.DatabaseSourceUI.prototype._resetDatabaseImportForm = function() {	
-    var self = this;
-    $( "#connectionName" ).val("127.0.0.1");
-    $( "#databaseTypeSelect" ).val("postgresql");
-    $( "#databaseHost" ).val("127.0.0.1");
-    $( "#databasePort" ).val("5432");
-    $( "#databaseUser" ).val("postgres");
-    $( "#databasePassword" ).val("");
-    $( "#initialDatabase" ).val("");
-    $( "#initialSchema" ).val("");
-    
-    $( "#editConnectionControlDiv" ).hide();
-    $( "#newConnectionControlDiv" ).show();
-    $('#connectionName').removeAttr('readonly');
-    
+Refine.DatabaseSourceUI.prototype._resetDatabaseImportForm = function() {
+  var self = this;
+  
+  $( "#databaseHost" ).val(self._defaultDatabaseHost);
+
+  $('input#connectionName').attr('value', $.i18n('database-source/connectionNameDefaultValue'));
+  $( "select#databaseTypeSelect" ).val(self._defaultDatabaseType);
+  self._updateDatabaseType(self._defaultDatabaseType);
+  
+  $( "#databasePassword" ).val("");
+  $( "#initialDatabase" ).val("");
+  $( "#initialSchema" ).val("");
+
+  $( "#editConnectionControlDiv" ).hide();
+  $( "#newConnectionControlDiv" ).show();
+  $('#connectionName').removeAttr('readonly');
 };