fix(core-blocks): CB-399 PropertiesTable value's jumping

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

@@ -12,6 +12,8 @@ export interface IProperty {
   displayName?: string;
   defaultValue?: string;
   description?: string;
+  keyPlaceholder?: string;
+  valuePlaceholder?: string;
   validValues?: string[];
   new?: boolean;
 }

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

@@ -49,7 +49,9 @@ export const PropertiesTable = observer(function PropertiesTable({
       return;
     }
 
-    if (state[property.key] !== undefined) {
+    const isUnique = properties.filter(({ key }) => key === property.key).length === 1;
+
+    if (state[property.key] !== undefined && isUnique) {
       state[key] = state[property.key];
       // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
       delete state[property.key];

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

@@ -146,6 +146,7 @@ export const PropertyItem = observer(function PropertyItem({
           ref={keyInputRef}
           type='text'
           name={property.id}
+          placeholder={property.keyPlaceholder}
           readOnly={!isKeyEditable}
           autoComplete='none'
           onChange={handleKeyChange}
@@ -157,6 +158,7 @@ export const PropertyItem = observer(function PropertyItem({
         <ShadowInput
           type='text'
           name={`${property.id}_value`}
+          placeholder={property.valuePlaceholder}
           autoComplete='none'
           onChange={handleValueChange}
           {...use({ focus, edited })}

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

@@ -47,8 +47,9 @@ export class DriverPropertiesController implements IInitializableController {
   addProperty = (key?: string, value?: string) => {
     this.driverProperties.unshift({
       id: uuid(),
-      key: key ?? 'property',
+      key: key ?? '',
       defaultValue: value ?? '',
+      keyPlaceholder: 'property',
       new: !key,
     });
   };
@@ -60,10 +61,12 @@ export class DriverPropertiesController implements IInitializableController {
     this.isLoading = true;
     try {
       const driverProperties = await this.driverPropertiesService.loadDriverProperties(this.driverId);
-      this.driverProperties = observable(driverProperties.map(property => ({
+      this.driverProperties = observable(driverProperties.map<IProperty>(property => ({
         id: property.id!,
         key: property.id!,
+        keyPlaceholder: property.id,
         displayName: property.displayName,
+        valuePlaceholder: property.defaultValue,
         defaultValue: property.defaultValue,
         description: property.description,
         validValues: property.validValues,

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

@@ -49,7 +49,8 @@ export class DriverPropertiesController implements IInitializableController {
   addProperty = (key?: string, value?: string) => {
     this.driverProperties.unshift({
       id: uuid(),
-      key: key ?? 'property',
+      key: key ?? '',
+      keyPlaceholder: 'property',
       defaultValue: value ?? '',
       new: !key,
     });
@@ -62,11 +63,12 @@ export class DriverPropertiesController implements IInitializableController {
     this.isLoading = true;
     try {
       const driverProperties = await this.driverPropertiesService.loadDriverProperties(this.driver.id);
-      this.driverProperties = observable(driverProperties.map(property => ({
+      this.driverProperties = observable(driverProperties.map<IProperty>(property => ({
         id: property.id!,
         key: property.id!,
         displayName: property.displayName!,
         defaultValue: property.defaultValue,
+        valuePlaceholder: property.defaultValue,
         description: property.description,
         validValues: property.validValues,
       })));

webapp/packages/plugin-data-export/src/Dialog/DataExportController.ts

@@ -101,13 +101,14 @@ export class DataExportController implements IInitializableController, IDestruct
       .data
       .get(processorId)!;
 
-    this.properties = this.processor.properties?.map(property => ({
+    this.properties = this.processor.properties?.map<IProperty>(property => ({
       id: property.id!,
       key: property.id!,
-      displayName: property.displayName!,
+      displayName: property.displayName,
       description: property.description,
       validValues: property.validValues,
       defaultValue: property.defaultValue,
+      valuePlaceholder: property.defaultValue,
     })) || [];
 
     this.processorProperties = {};