feat(core-connections): CB-692 add new custom properties

webapp/packages/core-blocks/src/FormControls/Checkboxes/Checkbox.tsx

@@ -89,7 +89,15 @@ export const Checkbox: CheckboxType = observer(function Checkbox({
     return null;
   }
 
-  let checked = state ? state[name] : checkedControlled;
+  let checked = checkedControlled;
+
+  if (state) {
+    if (typeof state[name] === 'string') {
+      checked = state[name] === 'true';
+    } else {
+      checked = state[name];
+    }
+  }
 
   if (Array.isArray(checked)) {
     checked = checked.includes(value);

webapp/packages/core-blocks/src/FormControls/Checkboxes/CheckboxMarkup.tsx

@@ -78,10 +78,12 @@ interface ICheckboxMarkupProps extends React.InputHTMLAttributes<HTMLInputElemen
   indeterminate?: boolean;
 }
 
-export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxMarkup({ label, className, ...rest }) {
+export const CheckboxMarkup: React.FC<ICheckboxMarkupProps> = function CheckboxMarkup({
+  label, className, title, ...rest
+}) {
   return styled(useStyles(checkboxStyles, checkboxMod.primary, rest.disabled
     && checkboxState.disabled, rest.checked && checkboxState.checked))(
-    <checkbox-container className={className} as='div'>
+    <checkbox-container className={className} title={title} as='div'>
       <checkbox as='div'>
         <checkbox-input as='input' type='checkbox' {...rest} />
         <checkbox-background as='div'>

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

@@ -14,6 +14,7 @@ import { InputField } from '@cloudbeaver/core-blocks';
 import type { ObjectPropertyInfo } from '@cloudbeaver/core-sdk';
 import { useStyles } from '@cloudbeaver/core-theming';
 
+import { FieldCheckbox } from '../FormControls/Checkboxes/FieldCheckbox';
 import { FormFieldDescription } from '../FormControls/FormFieldDescription';
 import { FormGroup } from '../FormControls/FormGroup';
 import { isControlPresented } from '../FormControls/isControlPresented';
@@ -48,6 +49,7 @@ const RenderField: React.FC<RenderFieldProps> = observer(function RenderField({
 }) {
   const href = property.features.includes('href');
   const password = property.features.includes('password');
+  const checkbox = property.dataType === 'Boolean';
   let description: string | undefined;
 
   if (href) {
@@ -73,6 +75,19 @@ const RenderField: React.FC<RenderFieldProps> = observer(function RenderField({
     description = 'Password saved';
   }
 
+  if (checkbox) {
+    return (
+      <FieldCheckbox
+        name={property.id!}
+        state={state}
+        checkboxLabel={property.displayName}
+        title={property.description}
+        disabled={disabled}
+        mod='surface'
+      />
+    );
+  }
+
   return (
     <InputField
       type={password ? 'password' : 'text'}
@@ -93,7 +108,7 @@ const RenderField: React.FC<RenderFieldProps> = observer(function RenderField({
 
 interface ObjectPropertyFormProps {
   properties: ObjectPropertyInfo[] | undefined;
-  credentials: Record<string, string | number>;
+  state: Record<string, string | number>;
   editable?: boolean;
   autofillToken?: string;
   className?: string;
@@ -106,7 +121,7 @@ interface ObjectPropertyFormProps {
 
 export const ObjectPropertyInfoForm: React.FC<ObjectPropertyFormProps> = observer(function ObjectPropertyInfoForm({
   properties,
-  credentials,
+  state,
   editable = true,
   autofillToken = '',
   className,
@@ -134,7 +149,7 @@ export const ObjectPropertyInfoForm: React.FC<ObjectPropertyFormProps> = observe
         <FormGroup key={property.id}>
           <RenderField
             property={property}
-            state={credentials}
+            state={state}
             editable={editable}
             autofillToken={autofillToken}
             disabled={disabled}

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

@@ -26,7 +26,7 @@ interface IValidationStatus {
 }
 @injectable()
 export class ConnectionFormController
-implements IInitializableController {
+  implements IInitializableController {
   isSaving: boolean;
 
   readonly afterSave: IExecutor<string>;
@@ -80,7 +80,10 @@ implements IInitializableController {
     const connectionConfig = this.getConnectionConfig();
     const validation = this.validate(connectionConfig);
     if (!validation.status) {
-      this.notificationService.logError({ title: this.model.editing ? 'connections_administration_connection_save_error' : 'connections_administration_connection_create_error', message: validation.errorMessage });
+      this.notificationService.logError({
+        title: this.model.editing ? 'connections_administration_connection_save_error' : 'connections_administration_connection_create_error',
+        message: validation.errorMessage,
+      });
       return;
     }
 
@@ -133,7 +136,7 @@ implements IInitializableController {
     if (!config.name?.length) {
       validationStatus.errorMessage = "Field 'name' can't be empty";
     } else if (this.model.editing && this.isConnectionNameAlreadyExists(config.name)) {
-      validationStatus.errorMessage = 'Connection with this name already exists';
+      validationStatus.errorMessage = `Connection with ${config.name} name already exists`;
     }
 
     validationStatus.status = !validationStatus.errorMessage;
@@ -173,6 +176,10 @@ implements IInitializableController {
     }
     config.networkHandlersConfig = this.model.networkHandlersState;
 
+    if (Object.keys(this.model.connection.providerProperties).length > 0) {
+      config.providerProperties = this.model.connection.providerProperties;
+    }
+
     return config;
   }
 

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

@@ -140,7 +140,7 @@ export const Options = observer(function Options({
               <ObjectPropertyInfoForm
                 autofillToken='new-password'
                 properties={controller.properties}
-                credentials={model.credentials}
+                state={model.credentials}
                 disabled={disabled}
                 showRememberTip
               />
@@ -157,6 +157,18 @@ export const Options = observer(function Options({
             </>
           )}
         </FormBoxElement>
+        {controller.providerProperties && controller.providerProperties.length > 0 && (
+          <FormBoxElement>
+            <FormGroup>
+              <InputGroup>{translate('connections_connection_edit_settings')}</InputGroup>
+            </FormGroup>
+            <ObjectPropertyInfoForm
+              properties={controller.providerProperties}
+              state={model.connection.providerProperties}
+              disabled={disabled}
+            />
+          </FormBoxElement>
+        )}
       </FormBox>
     </SubmittingForm>
   );

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

@@ -18,7 +18,7 @@ import type { IConnectionFormModel } from '../IConnectionFormModel';
 
 @injectable()
 export class OptionsController
-implements IInitializableController {
+  implements IInitializableController {
   get drivers(): DBDriver[] {
     return Array.from(this.dbDriverResource.data.values())
       .filter(({ id }) => this.model.availableDrivers.includes(id));
@@ -46,6 +46,10 @@ implements IInitializableController {
     return this.authModel?.properties;
   }
 
+  get providerProperties(): ObjectPropertyInfo[] | undefined {
+    return this.dbDriverResource.get(this.model.connection.driverId)?.providerProperties;
+  }
+
   private model!: IConnectionFormModel;
   /** we want to save prev generated connection name to detect if user changed "name" field to turn off autofill */
   private prevGeneratedName: string | null = null;
@@ -87,6 +91,7 @@ implements IInitializableController {
     this.setDefaultParameters(prevDriverId);
     this.cleanCredentials();
     this.model.connection.properties = {};
+    this.model.connection.providerProperties = {};
     this.model.connection.authModel = this.driver?.defaultAuthModel;
   }
 

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

@@ -8,7 +8,7 @@
 
 import { observer } from 'mobx-react-lite';
 
-import { TextPlaceholder, useTab, ObjectPropertyInfoForm, FormBox, FormBoxElement, FormGroup, InputGroup, Loader, useTabState, ExceptionMessage } from '@cloudbeaver/core-blocks';
+import { TextPlaceholder, useTab, ObjectPropertyInfoForm, FormBox, FormBoxElement, FormGroup, Loader, useTabState, ExceptionMessage } from '@cloudbeaver/core-blocks';
 import type { TabContainerPanelComponent } from '@cloudbeaver/core-blocks';
 import { useService } from '@cloudbeaver/core-di';
 import { useTranslate } from '@cloudbeaver/core-localization';
@@ -94,7 +94,7 @@ export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = obse
         <FormGroup><br /></FormGroup>
         <ObjectPropertyInfoForm
           properties={state.properties}
-          credentials={state.state}
+          state={state.state}
           editable={false}
           autoHide
         />

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

@@ -71,6 +71,7 @@ export class ConnectionsResource extends CachedMapResource<string, AdminConnecti
       useUrl: false,
       authProperties: [],
       properties: {},
+      providerProperties: {},
       origin: {
         type: 'local',
         displayName: 'Local',

webapp/packages/core-connections/src/DBDriverResource.ts

@@ -15,21 +15,22 @@ import {
 import { MetadataMap } from '@cloudbeaver/core-utils';
 
 export type DBDriver = Pick<
-DriverInfo,
-| 'id'
-| 'name'
-| 'icon'
-| 'description'
-| 'defaultPort'
-| 'defaultDatabase'
-| 'defaultServer'
-| 'defaultUser'
-| 'sampleURL'
-| 'embedded'
-| 'anonymousAccess'
-| 'promotedScore'
-| 'defaultAuthModel'
-| 'applicableNetworkHandlers'
+  DriverInfo,
+  | 'id'
+  | 'name'
+  | 'icon'
+  | 'description'
+  | 'defaultPort'
+  | 'defaultDatabase'
+  | 'defaultServer'
+  | 'defaultUser'
+  | 'sampleURL'
+  | 'embedded'
+  | 'anonymousAccess'
+  | 'promotedScore'
+  | 'defaultAuthModel'
+  | 'applicableNetworkHandlers'
+  | 'providerProperties'
 >;
 
 @injectable()

webapp/packages/core-connections/src/DatabaseAuthDialog/DatabaseAuthDialog.tsx

@@ -101,7 +101,7 @@ export const DatabaseAuthDialog = observer(function DatabaseAuthDialog({
                 <ObjectPropertyInfoForm
                   autofillToken={`section-${connection.connectionInfo?.id || ''} section-auth`}
                   properties={connection.connectionInfo?.authProperties}
-                  credentials={controller.config.credentials}
+                  state={controller.config.credentials}
                   disabled={controller.isAuthenticating}
                 />
                 <FormGroup>

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

@@ -16,6 +16,7 @@ export default [
   ['connections_connection_create_search_database', 'Search'],
   ['connections_connection_edit_save_credentials', 'Save credentials'],
   ['connections_connection_edit_authentication', 'Authentication'],
+  ['connections_connection_edit_settings', 'Settings'],
   ['connections_connection_edit_access', 'Access'],
   ['connections_connection_edit_access_load_failed', 'Fail to get connection access'],
   ['connections_connection_edit_access_role', 'Role'],

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

@@ -15,6 +15,7 @@ export default [
   ['connections_connection_create_search_database', 'Найти'],
   ['connections_connection_edit_save_credentials', ' Запомнить данные'],
   ['connections_connection_edit_authentication', 'Авторизация'],
+  ['connections_connection_edit_settings', 'Настройки'],
   ['connections_connection_edit_access', 'Доступ'],
   ['connections_connection_edit_access_load_failed', 'Не удалось загрузить информацию доступа'],
   ['connections_connection_edit_access_role', 'Роль'],

webapp/packages/core-sdk/src/queries/connections/driverList.gql

@@ -15,6 +15,18 @@ query driverList {
 
     defaultAuthModel
     # applicableAuthModel
+
+    providerProperties {
+      id
+      displayName
+      description
+      category
+      dataType
+      defaultValue
+      validValues
+      features
+      order
+    }
     applicableNetworkHandlers
   }
-}
+}

webapp/packages/core-sdk/src/queries/fragments/AdminConnection.gql

@@ -15,6 +15,7 @@ fragment AdminConnection on ConnectionInfo {
   databaseName
   url
   properties
+  providerProperties
 
   features