fix(core-connections): driver custom properties

CB-246

webapp/packages/core-blocks/src/PropertiesTable/IProperty.ts

@@ -13,4 +13,5 @@ export interface IProperty {
   defaultValue?: string;
   description?: string;
   validValues?: string[];
+  new?: boolean;
 }

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

@@ -105,7 +105,7 @@ export const PropertiesTable = observer(function PropertiesTable({
           {translate('block_properties_table_value')}
         </properties-header-value>
         <properties-header-right as="div">
-          {onAdd && <Button type='button' mod={['outlined']} onClick={onAdd}>{translate('block_properties_table_add')}</Button> }
+          {onAdd && <Button type='button' mod={['outlined']} onClick={() => onAdd()}>{translate('block_properties_table_add')}</Button> }
         </properties-header-right>
       </properties-header>
       <properties-list as="div">

webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx

@@ -134,10 +134,10 @@ export const PropertyItem = observer(function PropertyItem({
   const handleRemove = useCallback(() => onRemove(property.id), [property]);
 
   useLayoutEffect(() => {
-    if (keyInputRef.current && isKeyEditable) {
+    if (keyInputRef.current && isKeyEditable && property.new) {
       keyInputRef.current.focus();
     }
-  }, []);
+  }, [property]);
 
   return styled(useStyles(styles))(
     <property-item as="div">

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

@@ -39,7 +39,7 @@ export const DriverProperties = observer(function DriverProperties({
   state,
   loadProperties,
 }: DriverPropertiesProps) {
-  const controller = useController(DriverPropertiesController, driverId);
+  const controller = useController(DriverPropertiesController, driverId, state);
 
   useMemo(() => {
     if (loadProperties) {
@@ -54,7 +54,7 @@ export const DriverProperties = observer(function DriverProperties({
         <PropertiesTable
           properties={controller.driverProperties}
           propertiesState={state}
-          onAdd={controller.onAddProperty}
+          onAdd={controller.addProperty}
         />
       )}
     </properties>

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

@@ -32,20 +32,24 @@ export class DriverPropertiesController implements IInitializableController {
 
   loaded = false;
 
+  private state!: Record<string, string>;
+
   constructor(
     private driverPropertiesService: DriverPropertiesService,
     private notificationService: NotificationService
   ) { }
 
-  init(driverId: string) {
+  init(driverId: string, state: Record<string, string>) {
     this.driverId = driverId;
+    this.state = state;
   }
 
-  onAddProperty = () => {
+  addProperty = (key?: string, value?: string) => {
     this.driverProperties.unshift({
       id: uuid(),
-      key: 'property',
-      defaultValue: '',
+      key: key ?? 'property',
+      defaultValue: value ?? '',
+      new: !key,
     });
   }
 
@@ -64,6 +68,14 @@ export class DriverPropertiesController implements IInitializableController {
         description: property.description,
         validValues: property.validValues,
       })));
+
+      for (const key of Object.keys(this.state)) {
+        if (this.driverProperties.some(property => property.key === key)) {
+          continue;
+        }
+
+        this.addProperty(key, this.state[key]);
+      }
       this.loaded = true;
     } catch (exception) {
       this.notificationService.logException(exception, 'Can\'t load driver properties');

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

@@ -41,7 +41,7 @@ export const DriverProperties = observer(function DriverProperties({
   state,
   loadProperties,
 }: DriverPropertiesProps) {
-  const controller = useController(DriverPropertiesController, driver);
+  const controller = useController(DriverPropertiesController, driver, state);
 
   useEffect(() => {
     if (loadProperties) {
@@ -56,7 +56,7 @@ export const DriverProperties = observer(function DriverProperties({
         <PropertiesTable
           properties={controller.driverProperties}
           propertiesState={state}
-          onAdd={controller.onAddProperty}
+          onAdd={controller.addProperty}
         />
       )}
     </properties>

webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/DriverProperties/DriverPropertiesController.ts

@@ -34,21 +34,24 @@ export class DriverPropertiesController implements IInitializableController {
   @observable driverProperties = observable<IProperty>([])
 
   private loaded = false;
+  private state!: Record<string, string>;
 
   constructor(
     private driverPropertiesService: DriverPropertiesService,
     private notificationService: NotificationService
   ) { }
 
-  init(driver: DBDriver) {
+  init(driver: DBDriver, state: Record<string, string>) {
     this.driver = driver;
+    this.state = state;
   }
 
-  onAddProperty = () => {
+  addProperty = (key?: string, value?: string) => {
     this.driverProperties.unshift({
       id: uuid(),
-      key: 'property',
-      defaultValue: '',
+      key: key ?? 'property',
+      defaultValue: value ?? '',
+      new: !key,
     });
   }
 
@@ -67,6 +70,14 @@ export class DriverPropertiesController implements IInitializableController {
         description: property.description,
         validValues: property.validValues,
       })));
+
+      for (const key of Object.keys(this.state)) {
+        if (this.driverProperties.some(property => property.key === key)) {
+          continue;
+        }
+
+        this.addProperty(key, this.state[key]);
+      }
       this.loaded = true;
     } catch (exception) {
       this.notificationService.logException(exception, 'Can\'t load driver properties');