fix(connections): glitches and inconsistencies with the edit form

Author: luis-dk

testgen/ui/components/frontend/js/components/connection_form.js

@@ -58,8 +58,10 @@ import { FileInput } from './file_input.js';
 const { div, hr, span } = van.tags;
 const secretsPlaceholder = '<hidden for safety reasons>';
 const defaultPorts = {
-    mssql: '1433',
     redshift: '5439',
+    azure_mssql: '1433',
+    synapse_mssql: '1433',
+    mssql: '1433',
     postgresql: '5432',
     snowflake: '443',
     databricks: '443',
@@ -153,6 +155,7 @@ const ConnectionForm = (props, saveButton) => {
 
     const authenticationForms = {
         redshift: () => PasswordConnectionForm(
+            connection,
             connectionPassword,
             (value, state) => {
                 connectionPassword.val = value;
@@ -161,6 +164,7 @@ const ConnectionForm = (props, saveButton) => {
             isEditMode,
         ),
         mssql: () => PasswordConnectionForm(
+            connection,
             connectionPassword,
             (value, state) => {
                 connectionPassword.val = value;
@@ -169,6 +173,7 @@ const ConnectionForm = (props, saveButton) => {
             isEditMode,
         ),
         postgresql: () => PasswordConnectionForm(
+            connection,
             connectionPassword,
             (value, state) => {
                 connectionPassword.val = value;
@@ -177,6 +182,7 @@ const ConnectionForm = (props, saveButton) => {
             isEditMode,
         ),
         snowflake: () => KeyPairConnectionForm(
+            connection,
             connectByKey,
             connectionPassword,
             privateKey,
@@ -191,6 +197,7 @@ const ConnectionForm = (props, saveButton) => {
             isEditMode,
         ),
         databricks: () => HttpPathConnectionForm(
+            connection,
             connectionPassword,
             httpPath,
             (value, state) => {
@@ -204,12 +211,18 @@ const ConnectionForm = (props, saveButton) => {
     const authenticationForm = van.derive(() => {
         const selectedFlavorCode = connectionFlavor.val;
         const flavor = getValue(props.flavors).find(f => f.value === selectedFlavorCode);
-
-        connectionPort.val = defaultPorts[flavor.flavor];
-
         return authenticationForms[flavor.flavor]();
     });
 
+    van.derive(() => {
+        const selectedFlavorCode = connectionFlavor.val;
+        const previousFlavorCode = connectionFlavor.oldVal;
+        const isCustomPort = connectionPort.rawVal !== defaultPorts[previousFlavorCode];
+        if (selectedFlavorCode !== previousFlavorCode && (!isCustomPort || !connectionPort.rawVal)) {
+            connectionPort.val = defaultPorts[selectedFlavorCode];
+        }
+    });
+
     return div(
         { class: 'flex-column fx-gap-3 fx-align-stretch', style: 'overflow-y: auto;' },
         div(
@@ -338,6 +351,7 @@ const ConnectionForm = (props, saveButton) => {
                     disabled: true,
                     value: connectionStringPrefix,
                     height: 38,
+                    width: 255,
                     name: 'url_prefix',
                 }),
                 Input({
@@ -378,7 +392,7 @@ const ConnectionForm = (props, saveButton) => {
     );
 };
 
-const PasswordConnectionForm = (password, onValueChange, useSecretsPlaceholder) => {
+const PasswordConnectionForm = (connection, password, onValueChange, useSecretsPlaceholder) => {
     return div(
         { class: 'flex-row fx-gap-3 fx-align-stretch' },
         div(
@@ -389,7 +403,7 @@ const PasswordConnectionForm = (password, onValueChange, useSecretsPlaceholder)
                 value: password,
                 height: 38,
                 type: 'password',
-                placeholder: useSecretsPlaceholder ? secretsPlaceholder : '',
+                placeholder: (useSecretsPlaceholder && connection.password) ? secretsPlaceholder : '',
                 onChange: onValueChange,
             }),
         ),
@@ -401,6 +415,7 @@ const PasswordConnectionForm = (password, onValueChange, useSecretsPlaceholder)
 };
 
 const HttpPathConnectionForm = (
+    connection,
     password,
     httpPath,
     onValueChange,
@@ -425,7 +440,7 @@ const HttpPathConnectionForm = (
                 value: password,
                 height: 38,
                 type: 'password',
-                placeholder: useSecretsPlaceholder ? secretsPlaceholder : '',
+                placeholder: (useSecretsPlaceholder && connection.password) ? secretsPlaceholder : '',
                 onChange: (value, state) => passwordFieldState.val = {value, valid: state.valid},
             }),
             Input({
@@ -446,6 +461,7 @@ const HttpPathConnectionForm = (
 };
 
 const KeyPairConnectionForm = (
+    connection,
     connectByKey,
     password,
     privateKey,
@@ -503,12 +519,13 @@ const KeyPairConnectionForm = (
                         height: 38,
                         type: 'password',
                         help: 'Passphrase used when creating the private key. Leave empty if the private key is not encrypted.',
-                        placeholder: useSecretsPlaceholder ? secretsPlaceholder : '',
+                        placeholder: (useSecretsPlaceholder && connection.private_key_passphrase) ? secretsPlaceholder : '',
                         onChange: (value, state) => privateKeyPhraseFieldState.val = {value, valid: state.valid},
                     }),
                     FileInput({
                         name: 'private_key',
                         label: 'Upload private key (rsa_key.p8)',
+                        placeholder: connection.private_key ? 'Drop file here or browse files to replace existing key' : undefined,
                         value: privateKey,
                         onChange: (value, state) => privateKeyFieldState.val = {value, valid: state.valid},
                         validators: [
@@ -524,7 +541,7 @@ const KeyPairConnectionForm = (
                 value: password,
                 height: 38,
                 type: 'password',
-                placeholder: useSecretsPlaceholder ? secretsPlaceholder : '',
+                placeholder: (useSecretsPlaceholder && connection.password) ? secretsPlaceholder : '',
                 onChange: (value, state) => passwordFieldState.val = {value, valid: state.valid},
             });
         },

testgen/ui/components/frontend/js/components/file_input.js

@@ -11,6 +11,7 @@
  * @typedef Options
  * @type {object}
  * @property {string} label
+ * @property {string?} placeholder
  * @property {string} name
  * @property {string} value
  * @property {string?} class
@@ -38,6 +39,7 @@ const FileInput = (options) => {
 
     const value = van.state(getValue(options.value));
     const inputId = `file-uploader-${getRandomId()}`;
+    const fileOver = van.state(false);
     const cssClass = van.derive(() => `tg-file-uploader flex-column fx-gap-2 ${getValue(options.class) ?? ''}`)
     const showLoading = van.state(false);
     const loadingIndicatorProgress = van.state(0);
@@ -108,10 +110,27 @@ const FileInput = (options) => {
             options.label,
         ),
         div(
-            { class: 'tg-file-uploader--dropzone flex-column clickable' },
+            { class: () => `tg-file-uploader--dropzone flex-column clickable ${fileOver.val ? 'on-dragover' : ''}` },
             div(
                 {
                     onclick: browseFile,
+                    ondragenter: (event) => {
+                        event.preventDefault();
+                        fileOver.val = true;
+                    },
+                    ondragleave: () => fileOver.val = false,
+                    ondragover: (event) => event.preventDefault(),
+                    ondrop: (/** @type {DragEvent} */event) => {
+                        event.preventDefault();
+                        fileOver.val = false;
+
+                        let files = [...(event.dataTransfer.items ?? [])].filter((item) => item.kind === 'file').map((item) => item.getAsFile());
+                        if (!event.dataTransfer.items) {
+                            files = [...(event.dataTransfer.files ?? [])];
+                        }
+
+                        loadFile({ target: { files }});
+                    },
                 },
                 input({
                     id: inputId,
@@ -122,7 +141,7 @@ const FileInput = (options) => {
                 }),
                 () => value.val
                     ? FileSummary(value.val, unloadFile)
-                    : FileSelectionDropZone(sizeLimit)
+                    : FileSelectionDropZone(options.placeholder ?? 'Drop file here or browse files', sizeLimit)
             ),
             () => showLoading.val
                 ? div({ class: 'tg-file-uploader--loading', style: loadingIndicatorStyle }, '')
@@ -133,16 +152,17 @@ const FileInput = (options) => {
 
 /**
  * 
+ * @param {string} placeholder
  * @param {number} sizeLimit
  * @returns 
  */
-const FileSelectionDropZone = (sizeLimit) => {
+const FileSelectionDropZone = (placeholder, sizeLimit) => {
     return div(
         { class: 'flex-row fx-gap-4' },
         Icon({size: 48}, 'cloud_upload'),
         div(
             { class: 'flex-column fx-gap-1' },
-            span({}, 'Drop file here or Browse files'),
+            span({}, placeholder),
             span({ class: 'text-secondary text-caption' }, `Limit ${humanReadableSize(sizeLimit)} per file`),
         ),
     );
@@ -180,6 +200,11 @@ stylesheet.replace(`
     background: var(--form-field-color);
     padding: 16px;
     position: relative;
+    border: 1px transparent dashed;
+}
+
+.tg-file-uploader--dropzone.on-dragover {
+    border-color: var(--primary-color);
 }
 
 .tg-file-uploader--dropzone input[type="file"] {

testgen/ui/components/frontend/js/display_utils.js

@@ -58,7 +58,7 @@ function humanReadableSize(bytes) {
 
     for (const [unit, startsAt] of Object.entries(thresholds)) {
         if (bytes > startsAt) {
-            return `${(bytes / startsAt).toFixed(2)}${unit}`;
+            return `${(bytes / startsAt).toFixed()}${unit}`;
         }
     }
 

testgen/ui/services/connection_service.py

@@ -170,7 +170,7 @@ def form_overwritten_connection_url(connection) -> str:
 
     connection_credentials = {
         "flavor": flavor,
-        "user": "<user>",
+        "user": "<username>",
         "host": connection["project_host"],
         "port": connection["project_port"],
         "dbname": connection["project_db"],
@@ -188,3 +188,27 @@ def form_overwritten_connection_url(connection) -> str:
     connection_string = flavor_service.get_connection_string("<password>")
 
     return connection_string
+
+
+def get_connection_string_by_flavor(flavors: list[str]) -> str:
+    result = {}
+    for flavor in flavors:
+        db_type = get_db_type(flavor)
+        flavor_service = get_flavor_service(db_type)
+        flavor_service.init({
+            "flavor": flavor,
+            "user": "<username>",
+            "host": "<host>",
+            "port": "<port>",
+            "dbname": "<db_name>",
+            "url": None,
+            "connect_by_url": None,
+            "connect_by_key": False,
+            "private_key": None,
+            "private_key_passphrase": "",
+            "dbschema": "",
+        })
+        result[flavor] = flavor_service.get_connection_string(
+            "<password>"
+        ).replace("%3E", ">").replace("%3C", "<")
+    return result

testgen/ui/views/connections/page.py testgen/ui/views/connections.pytestgen/ui/views/connections/page.py renamed to testgen/ui/views/connections.py

@@ -1,7 +1,7 @@
 import base64
 import logging
 import typing
-from dataclasses import asdict, dataclass
+from dataclasses import asdict, dataclass, field
 
 import streamlit as st
 from sqlalchemy.exc import DatabaseError
@@ -16,7 +16,6 @@
 from testgen.ui.navigation.page import Page
 from testgen.ui.services import connection_service, table_group_service, user_session_service
 from testgen.ui.session import session, temp_value
-from testgen.ui.views.connections.models import ConnectionStatus
 from testgen.utils import format_field
 
 LOG = logging.getLogger("testgen")
@@ -222,11 +221,18 @@ def _format_connection(self, connection: dict, should_test: bool = False) -> dic
         if should_test:
             formatted_connection["status"] = asdict(self.test_connection(connection))
 
-        formatted_connection["password"] = "***"  # noqa S105
-        formatted_connection["private_key"] = "***"  # S105
-        formatted_connection["private_key_passphrase"] = "***"  # noqa S105
+        if formatted_connection["password"]:
+            formatted_connection["password"] = "***"  # noqa S105
+        if formatted_connection["private_key"]:
+            formatted_connection["private_key"] = "***"  # S105
+        if formatted_connection["private_key_passphrase"]:
+            formatted_connection["private_key_passphrase"] = "***"  # noqa S105
 
-        flavors = [f for f in self.flavor_options if f.value == connection["sql_flavor_code"]]
+        first_match = [f for f in self.flavor_options if f.flavor == formatted_connection.get("sql_flavor")]
+        if formatted_connection["sql_flavor"] and not formatted_connection.get("sql_flavor_code") and first_match:
+            formatted_connection["sql_flavor_code"] = first_match[0].flavor
+
+        flavors = [f for f in self.flavor_options if f.value == formatted_connection["sql_flavor_code"]]
         if flavors and (flavor := flavors[0]):
             formatted_connection["flavor"] = asdict(flavor)
 
@@ -353,3 +359,10 @@ def on_go_to_profiling_runs(params: dict) -> None:
                 "GoToProfilingRunsClicked": on_go_to_profiling_runs,
             },
         )
+
+
+@dataclass(frozen=True, slots=True)
+class ConnectionStatus:
+    message: str
+    successful: bool
+    details: str | None = field(default=None)