chore(core-connections): test connection & misc improvements

CB-247

webapp/packages/core-blocks/src/ObjectPropertyInfoForm/ObjectPropertyInfoForm.tsx

@@ -7,6 +7,7 @@
  */
 
 import { observer } from 'mobx-react';
+import { useCallback } from 'react';
 import styled from 'reshadow';
 
 import { InputField } from '@cloudbeaver/core-blocks';
@@ -37,6 +38,18 @@ export const ObjectPropertyInfoForm = observer(function ObjectPropertyInfoForm({
     return styled(useStyles(formStyles))(<center as="div">Properties empty</center>);
   }
 
+  const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement>) => {
+    if (e.target.type !== 'password') {
+      return;
+    }
+
+    const property = properties.find(property => property.id === e.target.name);
+
+    if (property?.value === e.target.value) {
+      credentials[e.target.name] = '';
+    }
+  }, [properties, credentials]);
+
   return styled(useStyles(formStyles))(
     <form-body as='div' className={className}>
       {properties.map(property => (
@@ -45,6 +58,7 @@ export const ObjectPropertyInfoForm = observer(function ObjectPropertyInfoForm({
             type={property.features.includes('password') ? 'password' : 'text'}
             name={property.id!}
             state={credentials}
+            onFocus={handleFocus}
             disabled={disabled}
             autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`}
             mod='surface'

webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/ConnectionForm.tsx

@@ -157,6 +157,14 @@ export const ConnectionForm = observer(function ConnectionForm({
           >
             {translate('ui_processing_cancel')}
           </Button>
+          <Button
+            type="button"
+            disabled={controller.isDisabled}
+            mod={['outlined']}
+            onClick={controller.test}
+          >
+            {translate('connections_connection_test')}
+          </Button>
           <Button
             type="button"
             disabled={controller.isDisabled}

webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Controller.ts

@@ -93,6 +93,19 @@ implements IInitializableController, IDestructibleController {
     }
   }
 
+  test = async () => {
+    this.isSaving = true;
+    this.error.clear();
+    try {
+      await this.connectionsResource.test(this.getConnectionConfig());
+      this.notificationService.logInfo({ title: 'Connection is established' });
+    } catch (exception) {
+      this.showError(exception, 'Connection test failed');
+    } finally {
+      this.isSaving = false;
+    }
+  }
+
   onShowDetails = () => {
     if (this.error.exception) {
       this.commonDialogService.open(ErrorDetailsDialog, this.error.exception);

webapp/packages/core-connections/src/Administration/Connections/ConnectionForm/Options/OptionsController.ts

@@ -54,7 +54,10 @@ implements IInitializableController {
   }
 
   onSelectDriver = (driverId: string | null, name: 'driverId', prevValue: string | null) => this.loadDriver(driverId, prevValue);
-  onFormChange = () => this.updateName();
+  onFormChange = () => {
+    this.updateName();
+    this.resetPassword();
+  }
 
   @action
   private setDefaults(prevDriverId: string | null) {
@@ -64,6 +67,29 @@ implements IInitializableController {
     this.cleanCredentials();
   }
 
+  private resetPassword() {
+    if (this.isCredentialsChanged()) {
+      for (const property of this.model.connection.authProperties) {
+        if (property.features.includes('password') && this.model.credentials[property.id!] === property.value) {
+          this.model.credentials[property.id!] = '';
+          return;
+        }
+      }
+    }
+  }
+
+  private isCredentialsChanged() {
+    if (!this.model.connection.authProperties.length) {
+      return true;
+    }
+    for (const property of this.model.connection.authProperties) {
+      if (this.model.credentials[property.id!] !== property.value) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   private cleanCredentials() {
     for (const property of Object.keys(this.model.credentials)) {
       delete this.model.credentials[property];

webapp/packages/core-connections/src/Administration/ConnectionsResource.ts

@@ -97,6 +97,12 @@ export class ConnectionsResource extends CachedMapResource<string, ConnectionInf
     return this.get(connection.id)!;
   }
 
+  async test(config: ConnectionConfig): Promise<void> {
+    await this.graphQLService.gql.testConnection({
+      config,
+    });
+  }
+
   async update(id: string, config: ConnectionConfig) {
     await this.performUpdate(id, () => this.updateConnection(id, config));
     return this.get(id)!;

webapp/packages/core-connections/src/locales/en.ts

@@ -18,4 +18,5 @@ export default [
   ['connections_connection_host', 'Host'],
   ['connections_connection_port', 'Port'],
   ['connections_connection_template', 'Template'],
+  ['connections_connection_test', 'Test Connection'],
 ];

webapp/packages/core-connections/src/locales/ru.ts

@@ -18,4 +18,5 @@ export default [
   ['connections_connection_host', 'Хост'],
   ['connections_connection_port', 'Порт'],
   ['connections_connection_template', 'Шаблон'],
+  ['connections_connection_test', 'Проверить подключение'],
 ];

webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/ConnectionForm/ConnectionForm.tsx

@@ -81,7 +81,7 @@ export const ConnectionForm = observer(function ConnectionForm({
             <InputGroup>{translate('connections_connection_edit_authentication')}</InputGroup>
           </group>
           <ObjectPropertyInfoForm
-            autofillToken={`section-${driver?.id || ''} section-auth`}
+            autofillToken='new-password'
             properties={controller.authModel.properties}
             credentials={controller.config.credentials}
             disabled={controller.isConnecting}