fix: properties table

CB-113 CB-112

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

@@ -8,7 +8,8 @@
 
 export interface IProperty {
   id: string;
-  name: string;
+  key: string;
+  displayName?: string;
   defaultValue?: string;
   description?: string;
   validValues?: string[];

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

@@ -26,7 +26,7 @@ type PropertiesState = {
 type PropertiesTableProps = {
   properties: IProperty[];
   propertiesState?: PropertiesState;
-  onNameChange?(id: string, name: string): void;
+  onKeyChange?(id: string, name: string): void;
   onChange?(state: PropertiesState): void;
   onAdd?(): void;
   onRemove?(id: string): void;
@@ -36,7 +36,7 @@ type PropertiesTableProps = {
 export const PropertiesTable = observer(function PropertiesTable({
   propertiesState,
   properties,
-  onNameChange,
+  onKeyChange,
   onChange,
   onAdd,
   onRemove,
@@ -44,22 +44,22 @@ export const PropertiesTable = observer(function PropertiesTable({
 }: PropertiesTableProps) {
   const translate = useTranslate();
   const state = useLocalStore<PropertiesState>(() => (propertiesState || {}));
-  const changeName = useCallback((id: string, name: string) => {
+  const changeName = useCallback((id: string, key: string) => {
     const property = properties.find(property => property.id === id);
 
     if (!property) {
       return;
     }
 
-    if (state[property.name] !== undefined) {
-      state[name] = state[property.name];
-      delete state[property.name];
+    if (state[property.key] !== undefined) {
+      state[key] = state[property.key];
+      delete state[property.key];
     }
 
-    if (onNameChange) {
-      onNameChange(property.name, name);
+    if (onKeyChange) {
+      onKeyChange(property.key, key);
     }
-    property.name = name;
+    property.key = key;
   }, [properties]);
 
   const changeValue = useCallback((id: string, value: string) => {
@@ -69,7 +69,7 @@ export const PropertiesTable = observer(function PropertiesTable({
       return;
     }
 
-    state[property.name] = value;
+    state[property.key] = value;
 
     if (onChange) {
       onChange(state);
@@ -83,8 +83,8 @@ export const PropertiesTable = observer(function PropertiesTable({
       return;
     }
 
-    if (state[property.name] !== undefined) {
-      delete state[property.name];
+    if (state[property.key] !== undefined) {
+      delete state[property.key];
     }
 
     if (onRemove) {
@@ -93,8 +93,8 @@ export const PropertiesTable = observer(function PropertiesTable({
     properties.splice(properties.indexOf(property), 1);
   }, [properties, onRemove]);
 
-  const isNameUnique = useCallback(
-    (name: string) => properties.filter(property => property.name === name).length === 1,
+  const isKeyUnique = useCallback(
+    (key: string) => properties.filter(property => property.key === key).length === 1,
     []
   );
 
@@ -116,11 +116,11 @@ export const PropertiesTable = observer(function PropertiesTable({
           <PropertyItem
             key={property.id}
             property={property}
-            value={state[property.name]}
+            value={state[property.key]}
             onNameChange={changeName}
             onValueChange={changeValue}
             onRemove={removeProperty}
-            error={!isNameUnique(property.name)}
+            error={!isKeyUnique(property.key)}
           />
         ))}
       </properties-list>

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

@@ -80,7 +80,7 @@ const styles = composes(
       &[|edited] {
         font-weight: 600;
       }
-      &:not(:focus):not([|focus]) {
+      &:global([readonly]), &:not(:focus):not([|focus]) {
         background: transparent;
         border: solid 1px transparent;
       }
@@ -105,7 +105,7 @@ const styles = composes(
   `
 );
 
-type PropertyItemProps = {
+type Props = {
   property: IProperty;
   value?: string;
   onNameChange(staticId: string, newId: string): void;
@@ -121,12 +121,12 @@ export const PropertyItem = observer(function PropertyItem({
   onValueChange,
   onRemove,
   error,
-}: PropertyItemProps) {
-  const isEditable = property.name !== property.id;
+}: Props) {
+  const isKeyEditable = !property.displayName;
   const edited = value !== undefined && value !== property.defaultValue;
   const [focus, setFocus] = useState(false);
-  const nameInputRef = useRef<HTMLInputElement>(null);
-  const handleNameChange = useCallback((value: string) => onNameChange(property.id, value), [property]);
+  const keyInputRef = useRef<HTMLInputElement>(null);
+  const handleKeyChange = useCallback((key: string) => onNameChange(property.id, key), [property]);
   const handleValueChange = useCallback(
     (value: string) => onValueChange(property.id, value),
     [property]
@@ -134,8 +134,8 @@ export const PropertyItem = observer(function PropertyItem({
   const handleRemove = useCallback(() => onRemove(property.id), [property]);
 
   useEffect(() => {
-    if (nameInputRef.current && isEditable) {
-      nameInputRef.current.focus();
+    if (keyInputRef.current && isKeyEditable) {
+      keyInputRef.current.focus();
     }
   }, []);
 
@@ -145,12 +145,12 @@ export const PropertyItem = observer(function PropertyItem({
         <ShadowInput
           type='text'
           name={property.id}
-          onChange={handleNameChange}
-          ref={nameInputRef}
-          readOnly={!isEditable}
+          onChange={handleKeyChange}
+          ref={keyInputRef}
+          readOnly={!isKeyEditable}
           autoComplete='none'
         >
-          {property.name || property.id}
+          {property.displayName || property.key}
         </ShadowInput>
       </property-name>
       <property-value as='div'>
@@ -176,7 +176,7 @@ export const PropertyItem = observer(function PropertyItem({
           </DriverPropertyValueSelector>
         </property-select>
       )}
-      {isEditable && (
+      {isKeyEditable && (
         <property-remove as="div">
           <button type="button" onClick={handleRemove}><Icon name="reject" viewBox="0 0 11 11" /></button>
         </property-remove>

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

@@ -47,7 +47,7 @@ export class DriverPropertiesController implements IInitializableController {
   onAddProperty = () => {
     this.driverProperties.unshift({
       id: uuid(),
-      name: 'property',
+      key: 'property',
       defaultValue: '',
     });
   }
@@ -60,8 +60,9 @@ export class DriverPropertiesController implements IInitializableController {
     try {
       const driverProperties = await this.customConnectionService.loadDriverProperties(this.driver.id);
       this.driverProperties = observable(driverProperties.map(property => ({
-        id: property.displayName!,
-        name: property.displayName!,
+        id: property.id!,
+        key: property.id!,
+        displayName: property.displayName!,
         defaultValue: property.defaultValue,
         description: property.description,
         validValues: property.validValues,

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

@@ -89,8 +89,9 @@ export class DataExportController implements IInitializableController {
       .get(processorId)!;
 
     this.properties = this.processor.properties?.map(property => ({
-      id: property.displayName!,
-      name: property.displayName!,
+      id: property.id!,
+      key: property.id!,
+      displayName: property.displayName!,
       description: property.description,
       validValues: property.validValues,
       defaultValue: property.defaultValue,