From ce19fcd44a84c512be55074ed266ca0a0c710221 Mon Sep 17 00:00:00 2001 From: Wroud Date: Mon, 12 Oct 2020 01:19:57 +0300 Subject: [PATCH] fix(core-blocks): CB-399 PropertiesTable value's jumping --- .../packages/core-blocks/src/PropertiesTable/IProperty.ts | 2 ++ .../core-blocks/src/PropertiesTable/PropertiesTable.tsx | 4 +++- .../core-blocks/src/PropertiesTable/PropertyItem.tsx | 2 ++ .../DriverProperties/DriverPropertiesController.ts | 7 +++++-- .../DriverProperties/DriverPropertiesController.ts | 6 ++++-- .../plugin-data-export/src/Dialog/DataExportController.ts | 5 +++-- 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/webapp/packages/core-blocks/src/PropertiesTable/IProperty.ts b/webapp/packages/core-blocks/src/PropertiesTable/IProperty.ts index e4dd204865..75e2b7cff1 100644 --- a/webapp/packages/core-blocks/src/PropertiesTable/IProperty.ts +++ b/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; } diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx index 5fc99c699e..a4d5ca4094 100644 --- a/webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx +++ b/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]; diff --git a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx b/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx index 27f2642698..63e55fc5c4 100644 --- a/webapp/packages/core-blocks/src/PropertiesTable/PropertyItem.tsx +++ b/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({ { 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(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, diff --git a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/DriverProperties/DriverPropertiesController.ts b/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/DriverProperties/DriverPropertiesController.ts index 37c8bf27b0..dfc3c9e2ed 100644 --- a/webapp/packages/plugin-connection-custom/src/CustomConnection/ConnectionFormDialog/DriverProperties/DriverPropertiesController.ts +++ b/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(property => ({ id: property.id!, key: property.id!, displayName: property.displayName!, defaultValue: property.defaultValue, + valuePlaceholder: property.defaultValue, description: property.description, validValues: property.validValues, }))); diff --git a/webapp/packages/plugin-data-export/src/Dialog/DataExportController.ts b/webapp/packages/plugin-data-export/src/Dialog/DataExportController.ts index e020fccf9a..b6ce543471 100644 --- a/webapp/packages/plugin-data-export/src/Dialog/DataExportController.ts +++ b/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(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 = {};