Quick fix for Composer slowdown after a lot of typing
[osm/UI.git] / skyquake / plugins / composer / src / src / components / EditDescriptorModelProperties.js
index 4ee4345..41e87b3 100644 (file)
  *
  * This class generates the form fields used to edit the CONFD JSON model.
  */
-'use strict';
 
-import _ from 'lodash'
+import _includes from 'lodash/includes'
+import _isArray from 'lodash/isArray'
+import _cloneDeep from 'lodash/cloneDeep'
+import _debounce from 'lodash/debounce';
 import utils from '../libraries/utils'
 import React from 'react'
 import ClassNames from 'classnames'
@@ -47,12 +49,12 @@ import imgRemove from '../../../node_modules/open-iconic/svg/trash.svg'
 import '../styles/EditDescriptorModelProperties.scss'
 
 function getDescriptorMetaBasicForType(type) {
-       const basicPropertiesFilter = d => _.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name);
+       const basicPropertiesFilter = d => _includes(DESCRIPTOR_MODEL_FIELDS[type], d.name);
        return DescriptorModelMetaFactory.getModelMetaForType(type, basicPropertiesFilter) || {properties: []};
 }
 
 function getDescriptorMetaAdvancedForType(type) {
-       const advPropertiesFilter = d => !_.includes(DESCRIPTOR_MODEL_FIELDS[type], d.name);
+       const advPropertiesFilter = d => !_includes(DESCRIPTOR_MODEL_FIELDS[type], d.name);
        return DescriptorModelMetaFactory.getModelMetaForType(type, advPropertiesFilter) || {properties: []};
 }
 
@@ -136,7 +138,10 @@ export default function EditDescriptorModelProperties(props) {
                                create(model, path, property);
                        } else {
                                const name = path.join('.');
-                               const value = Property.createModelInstance(property);
+                               // get a unique name for the new list item based on the current list content
+                               // some lists, based on the key, may not get a uniqueName generated here
+                               const uniqueName = DescriptorModelMetaFactory.generateItemUniqueName(container.model[property.name], property);
+                               const value = Property.createModelInstance(property, uniqueName);
                                utils.assignPathValue(this.model, name, value);
                        }
                        CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
@@ -163,30 +168,43 @@ export default function EditDescriptorModelProperties(props) {
                );
        }
 
-       function onFormFieldValueChanged(event) {
-               if (DescriptorModelFactory.isContainer(this)) {
-                       event.preventDefault();
-                       const name = event.target.name;
-                       const value = event.target.value;
-                       utils.assignPathValue(this.model, name, value);
-                       CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
-               }
-       }
-
        function buildField(container, property, path, value, fieldKey) {
                let cds = CatalogDataStore;
                let catalogs = cds.getTransientCatalogs();
 
-               const name = path.join('.');
+               const pathToProperty = path.join('.');
                const isEditable = true;
                const isGuid = Property.isGuid(property);
-               const onChange = onFormFieldValueChanged.bind(container);
+               const isBoolean = Property.isBoolean(property);
                const isEnumeration = Property.isEnumeration(property);
                const isLeafRef = Property.isLeafRef(property);
                const onFocus = onFocusPropertyFormInputElement.bind(container, property, path, value);
                const placeholder = changeCase.title(property.name);
                const className = ClassNames(property.name + '-input', {'-is-guid': isGuid});
-               const fieldValue = value ? (value.constructor.name != "Object") ? value : '' : undefined;
+               const fieldValue = value ? (value.constructor.name != "Object") ? value : '' : (isNaN(value) ? undefined : value);
+
+               // process the named field value change
+               function processFieldValueChange(name, value) {
+                       console.debug('processed change for -- ' + name + ' -- with value -- ' + value);
+                       // this = the container being edited
+                       if (DescriptorModelFactory.isContainer(this)) {
+                               utils.assignPathValue(this.model, name, value);
+                               CatalogItemsActions.catalogItemDescriptorChanged(this.getRoot());
+                       }
+               }
+
+               // change handler used for onChange event
+               const changeHandler = (handleValueChange, event) => {
+                       event.preventDefault();
+                       console.debug(event.target.value);
+                       handleValueChange(event.target.value);
+               };
+               // create an onChange event handler for a text field for the specified field path (debounced to accumulate chars)
+               const onTextChange = changeHandler.bind(null, _debounce(
+                       processFieldValueChange.bind(container, pathToProperty), 2000, {maxWait: 5000})); // max wait for short-name
+               // create an onChange event handler for a select field for the specified field path
+               const onSelectChange = changeHandler.bind(null, processFieldValueChange.bind(container, pathToProperty));
+               
                if (isEnumeration) {
                        const enumeration = Property.getEnumeration(property, value);
                        const options = enumeration.map((d, i) => {
@@ -194,56 +212,135 @@ export default function EditDescriptorModelProperties(props) {
                                // so we categorically ignore them
                                // https://trello.com/c/uzEwVx6W/230-bug-enum-should-not-use-index-only-name
                                //return <option key={fieldKey + ':' + i} value={d.value}>{d.name}</option>;
-                               return <option key={fieldKey.toString() + ':' + i} value={d.name}>{d.name}</option>;
+                               return <option key={':' + i} value={d.name}>{d.name}</option>;
                        });
                        const isValueSet = enumeration.filter(d => d.isSelected).length > 0;
                        if (!isValueSet || property.cardinality === '0..1') {
                                const noValueDisplayText = changeCase.title(property.name);
-                               options.unshift(<option key={'(value-not-in-enum)' + fieldKey.toString()} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
+                               options.unshift(<option key={'(value-not-in-enum)'} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
                        }
-                       return <select key={fieldKey.toString()} id={fieldKey.toString()} className={ClassNames({'-value-not-set': !isValueSet})} name={name} value={value} title={name} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} readOnly={!isEditable}>{options}</select>;
+                       return (
+                               <select 
+                                       key={fieldKey} 
+                                       id={fieldKey}
+                                       className={ClassNames({'-value-not-set': !isValueSet})} 
+                                       defaultValue={value} 
+                                       title={pathToProperty} 
+                                       onChange={onSelectChange} 
+                                       onFocus={onFocus} 
+                                       onBlur={endEditing} 
+                                       onMouseDown={startEditing} 
+                                       onMouseOver={startEditing} 
+                                       readOnly={!isEditable}>
+                                               {options}
+                               </select>
+                       );
                }
 
                if (isLeafRef) {
-                       let fullFieldKey = _.isArray(fieldKey) ? fieldKey.join(':') : fieldKey;
+                       let fullPathString = container.key + ':' + path.join(':');
                        let containerRef = container;
                        while (containerRef.parent) {
-                               fullFieldKey = containerRef.parent.key + ':' + fullFieldKey;
+                               fullPathString = containerRef.parent.key + ':' + fullPathString;
                                containerRef = containerRef.parent;
                        }
-                       const leafRefPathValues = Property.getLeafRef(property, path, value, fullFieldKey, catalogs, container);
+                       const leafRefPathValues = Property.getLeafRef(property, path, value, fullPathString, catalogs, container);
 
                        const options = leafRefPathValues && leafRefPathValues.map((d, i) => {
-                               return <option key={fieldKey.toString() + ':' + i} value={d.value}>{d.value}</option>;
+                               return <option key={':' + i} value={d.value}>{d.value}</option>;
                        });
                        const isValueSet = leafRefPathValues.filter(d => d.isSelected).length > 0;
                        if (!isValueSet || property.cardinality === '0..1') {
                                const noValueDisplayText = changeCase.title(property.name);
-                               options.unshift(<option key={'(value-not-in-leafref)' + fieldKey.toString()} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
+                               options.unshift(<option key={'(value-not-in-leafref)'} value="" placeholder={placeholder}>{noValueDisplayText}</option>);
+                       }
+                       return (
+                               <select 
+                                       key={fieldKey} 
+                                       id={fieldKey} 
+                                       className={ClassNames({'-value-not-set': !isValueSet})} 
+                                       defaultValue={value} 
+                                       title={pathToProperty} 
+                                       onChange={onSelectChange} 
+                                       onFocus={onFocus} 
+                                       onBlur={endEditing} 
+                                       onMouseDown={startEditing} 
+                                       onMouseOver={startEditing} 
+                                       readOnly={!isEditable}>
+                                               {options}
+                               </select>
+                       );
+               }
+
+               if (isBoolean) {
+                       const options = [
+                               <option key={'true'} value="TRUE">TRUE</option>,
+                               <option key={'false'} value="FALSE">FALSE</option>
+                       ]
+
+                       // if (!isValueSet) {
+                               const noValueDisplayText = changeCase.title(property.name);
+                               options.unshift(<option key={'(value-not-in-leafref)'} value="" placeholder={placeholder}></option>);
+                       // }
+                       let val = value;
+                       if(typeof(val) == 'number') {
+                               val = value ? "TRUE" : "FALSE"
                        }
-                       return <select key={fieldKey.toString()} id={fieldKey.toString()} className={ClassNames({'-value-not-set': !isValueSet})} name={name} value={value} title={name} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} readOnly={!isEditable}>{options}</select>;
+                       const isValueSet = (val != '' && val)
+                       return (
+                               <select 
+                                       key={fieldKey} 
+                                       id={fieldKey} 
+                                       className={ClassNames({'-value-not-set': !isValueSet})} 
+                                       defaultValue={val && val.toUpperCase()} title={pathToProperty} 
+                                       onChange={onSelectChange} 
+                                       onFocus={onFocus} 
+                                       onBlur={endEditing} 
+                                       onMouseDown={startEditing} 
+                                       onMouseOver={startEditing} 
+                                       readOnly={!isEditable}>
+                                               {options}
+                               </select>
+                       );
                }
 
                if (property['preserve-line-breaks']) {
-                       return <textarea key={fieldKey.toString()} cols="5" id={fieldKey.toString()} name={name} value={value} placeholder={placeholder} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} onMouseOut={endEditing} onMouseLeave={endEditing} readOnly={!isEditable} />;
+                       return (
+                               <textarea 
+                                       key={fieldKey} 
+                                       cols="5" 
+                                       id={fieldKey} 
+                                       defaultValue={value} 
+                                       placeholder={placeholder} 
+                                       onChange={onTextChange} 
+                                       onFocus={onFocus} 
+                                       onBlur={endEditing} 
+                                       onMouseDown={startEditing} 
+                                       onMouseOver={startEditing} 
+                                       onMouseOut={endEditing} 
+                                       onMouseLeave={endEditing} 
+                                       readOnly={!isEditable} />
+                       );
                }
 
-               return <input key={fieldKey.toString()}
-                                         id={fieldKey.toString()}
-                                         type="text"
-                                         name={name}
-                                         value={fieldValue}
-                                         className={className}
-                                         placeholder={placeholder}
-                                         onChange={onChange}
-                                         onFocus={onFocus}
-                                         onBlur={endEditing}
-                                         onMouseDown={startEditing}
-                                         onMouseOver={startEditing}
-                                         onMouseOut={endEditing}
-                                         onMouseLeave={endEditing}
-                                         readOnly={!isEditable}
-               />;
+               return (
+                       <input 
+                               key={fieldKey}
+                               id={fieldKey}
+                               type="text"
+                               defaultValue={fieldValue}
+                               className={className}
+                               placeholder={placeholder}
+                               onChange={onTextChange}
+                               onFocus={onFocus}
+                               onBlur={endEditing}
+                               onMouseDown={startEditing}
+                               onMouseOver={startEditing}
+                               onMouseOut={endEditing}
+                               onMouseLeave={endEditing}
+                               readOnly={!isEditable}
+                       />
+               );
 
        }
 
@@ -264,15 +361,9 @@ export default function EditDescriptorModelProperties(props) {
 
        function buildChoice(container, property, path, value, key) {
 
-               function onFormFieldValueChanged(event) {
+               function processChoiceChange(name, value) {
                        if (DescriptorModelFactory.isContainer(this)) {
 
-                               event.preventDefault();
-
-                               let name = event.target.name;
-                               const value = event.target.value;
-
-
                                /*
                                        Transient State is stored for convenience in the uiState field.
                                        The choice yang type uses case elements to describe the "options".
@@ -309,7 +400,7 @@ export default function EditDescriptorModelProperties(props) {
                                        isTopCase = true;
                                        choiceObject = utils.resolvePath(this.model, [selected].join('.'));
                                }
-                               utils.assignPathValue(stateObject, [selected].join('.'), _.cloneDeep(choiceObject));
+                               utils.assignPathValue(stateObject, [selected].join('.'), _cloneDeep(choiceObject));
 
                                if(selected) {
                                        if(this.model.uiState.choice.hasOwnProperty(name)) {
@@ -331,7 +422,6 @@ export default function EditDescriptorModelProperties(props) {
                                        utils.assignPathValue(this.model, [value].join('.'), newChoiceObject)
                                }
 
-
                                // update the selected name
                                utils.assignPathValue(this.model, statePath.concat('selected').join('.'), value);
 
@@ -339,13 +429,20 @@ export default function EditDescriptorModelProperties(props) {
                        }
                }
 
+               const pathToChoice = path.join('.');
                const caseByNameMap = {};
 
-               const onChange = onFormFieldValueChanged.bind(container);
+               const choiceChangeHandler = processChoiceChange.bind(container, pathToChoice);
+               const onChange = ((handleChoiceChange, event) => {
+                       event.preventDefault();
+                       handleChoiceChange(event.target.value);
+               }).bind(null, choiceChangeHandler);
+
 
                const cases = property.properties.map(d => {
                        if (d.type === 'case') {
-                               caseByNameMap[d.name] = d.properties[0];
+                               //Previous it was assumed that a case choice would have only one property. Now we pass on either the only item or the
+                               caseByNameMap[d.name] = d.properties && (d.properties.length == 1 ? d.properties[0] : d.properties);
                                return {
                                        optionName: d.name,
                                        optionTitle: d.description,
@@ -366,39 +463,40 @@ export default function EditDescriptorModelProperties(props) {
                        );
                });
 
-               const selectName = path.join('.');
-               let selectedOptionPath = ['uiState.choice', selectName, 'selected'].join('.');
+               let selectedOptionPath = ['uiState.choice', pathToChoice, 'selected'].join('.');
                //Currently selected choice/case statement on UI model
                let selectedOptionValue = utils.resolvePath(container.model, selectedOptionPath);
                //If first time loaded, and none is selected, check if there is a value corresponding to a case statement in the container model
                if(!selectedOptionValue) {
                        //get field properties for choice on container model
-                       let fieldProperties = utils.resolvePath(container.model, selectName);
+                       let fieldProperties = utils.resolvePath(container.model, pathToChoice);
                        if(fieldProperties) {
                                //Check each case statement in model and see if it is present in container model.
                                cases.map(function(c){
                                        if(fieldProperties.hasOwnProperty(c.optionValue.split('.')[1])) {
-                                               utils.assignPathValue(container.model, ['uiState.choice', selectName, 'selected'].join('.'), c.optionValue);
+                                               utils.assignPathValue(container.model, ['uiState.choice', pathToChoice, 'selected'].join('.'), c.optionValue);
                                        }
                                });
-                               selectedOptionValue = utils.resolvePath(container.model, ['uiState.choice', selectName, 'selected'].join('.'));
+                               selectedOptionValue = utils.resolvePath(container.model, ['uiState.choice', pathToChoice, 'selected'].join('.'));
                        } else {
                                property.properties.map(function(p) {
                                        let pname = p.properties[0].name;
                                        if(container.model.hasOwnProperty(pname)) {
-                                               utils.assignPathValue(container.model, ['uiState.choice', selectName, 'selected'].join('.'), [p.name, pname].join('.'));
+                                               utils.assignPathValue(container.model, ['uiState.choice', pathToChoice, 'selected'].join('.'), [p.name, pname].join('.'));
                                        }
                                })
-                               selectedOptionValue = utils.resolvePath(container.model, ['uiState.choice', selectName, 'selected'].join('.'));
+                               selectedOptionValue = utils.resolvePath(container.model, ['uiState.choice', pathToChoice, 'selected'].join('.'));
                        }
                }
                //If selectedOptionValue is present, take first item in string which represents the case name.
                const valueProperty = caseByNameMap[selectedOptionValue ? selectedOptionValue.split('.')[0] : undefined] || {properties: []};
                const isLeaf = Property.isLeaf(valueProperty);
-               const hasProperties = _.isArray(valueProperty.properties) && valueProperty.properties.length;
+               const hasProperties = _isArray(valueProperty.properties) && valueProperty.properties.length;
                const isMissingDescriptorMeta = !hasProperties && !Property.isLeaf(valueProperty);
                //Some magic that prevents errors for arising
-               const valueResponse = valueProperty.properties.length ? valueProperty.properties.map((d, i) => {
+               const valueResponse = valueProperty.properties && valueProperty.properties.length ? valueProperty.properties.map(valuePropertyFn) : (!isMissingDescriptorMeta) ? build(container, valueProperty, path.concat(valueProperty.name), utils.resolvePath(container.model, path.concat(valueProperty.name).join('.')) || container.model[valueProperty.name]) :
+               valueProperty.map && valueProperty.map(valuePropertyFn);
+               function valuePropertyFn(d, i) {
                        const childPath = path.concat(valueProperty.name, d.name);
                        const childValue = utils.resolvePath(container.model, childPath.join('.'));
                        return (
@@ -406,13 +504,24 @@ export default function EditDescriptorModelProperties(props) {
                                        {build(container, d, childPath, childValue, props)}
                                </div>
                        );
-               }) : (!isMissingDescriptorMeta) ? build(container, valueProperty, path.concat(valueProperty.name), utils.resolvePath(container.model, path.concat(valueProperty.name).join('.')) || container.model[valueProperty.name]) : null
+               }
                // end magic
                const onFocus = onFocusPropertyFormInputElement.bind(container, property, path, value);
 
                return (
                        <div key={key} className="choice">
-                               <select key={Date.now()} className={ClassNames({'-value-not-set': !selectedOptionValue})} name={selectName} value={selectedOptionValue} onChange={onChange} onFocus={onFocus} onBlur={endEditing} onMouseDown={startEditing} onMouseOver={startEditing} onMouseOut={endEditing} onMouseLeave={endEditing}>
+                               <select 
+                                       key={Date.now()} 
+                                       className={ClassNames({'-value-not-set': !selectedOptionValue})} 
+                                       defaultValue={selectedOptionValue} 
+                                       onChange={onChange} 
+                                       onFocus={onFocus} 
+                                       onBlur={endEditing} 
+                                       onMouseDown={startEditing} 
+                                       onMouseOver={startEditing} 
+                                       onMouseOut={endEditing} 
+                                       onMouseLeave={endEditing}
+                               >
                                        {options}
                                </select>
                                {valueResponse}
@@ -421,13 +530,13 @@ export default function EditDescriptorModelProperties(props) {
 
        }
 
-       function buildSimpleListItem(container, property, path, value, key, index) {
+       function buildSimpleListItem(container, property, path, value, uniqueId, index) {
                // todo need to abstract this better
                const title = getTitle(value);
                var req = require.context("../", true, /\.svg/);
                return (
-                       <div>
-                               <a href="#select-list-item" key={Date.now()} className={property.name + '-list-item simple-list-item '} onClick={onClickSelectItem.bind(container, property, path, value)}>
+                       <div key={uniqueId} >
+                               <a href="#select-list-item" className={property.name + '-list-item simple-list-item '} onClick={onClickSelectItem.bind(container, property, path, value)}>
                                        <img src={req('./' + DescriptorModelIconFactory.getUrlForType(property.name))} width="20px" />
                                        <span>{title}</span>
                                </a>
@@ -436,10 +545,10 @@ export default function EditDescriptorModelProperties(props) {
                );
        }
 
-       function buildRemoveListItem(container, property, valuePath, fieldKey, index) {
+       function buildRemoveListItem(container, property, valuePath, index) {
                const className = ClassNames(property.name + '-remove actions');
                return (
-                       <div key={fieldKey.concat(index).join(':')} className={className}>
+                       <div className={className}>
                                <h3>
                                        <span className={property.type + '-name name'}>{changeCase.title(property.name)}</span>
                                        <span className="info">{index + 1}</span>
@@ -449,12 +558,12 @@ export default function EditDescriptorModelProperties(props) {
                );
        }
 
-       function buildLeafListItem(container, property, valuePath, value, key, index) {
+       function buildLeafListItem(container, property, valuePath, value, uniqueId, index) {
                // look at the type to determine how to parse the value
                return (
-                       <div>
-                               {buildRemoveListItem(container, property, valuePath, key, index)}
-                               {buildField(container, property, valuePath, value, key)}
+                       <div key={uniqueId}>
+                               {buildRemoveListItem(container, property, valuePath, index)}
+                               {buildField(container, property, valuePath, value, uniqueId)}
                        </div>
 
                );
@@ -467,19 +576,28 @@ export default function EditDescriptorModelProperties(props) {
                const isArray = Property.isArray(property);
                const isObject = Property.isObject(property);
                const isLeafList = Property.isLeafList(property);
-               const fieldKey = [container.id].concat(path);
                const isRequired = Property.isRequired(property);
                const title = changeCase.titleCase(property.name);
                const columnCount = property.properties.length || 1;
                const isColumnar = isArray && (Math.round(props.width / columnCount) > 155);
                const classNames = {'-is-required': isRequired, '-is-columnar': isColumnar};
 
+               // create a unique Id for use as react component keys and html element ids
+               // use uid (from ui info) instead of id property (which is not stable)
+               let uniqueId = container.uid;
+               let containerRef = container;
+               while (containerRef.parent) {
+                       uniqueId = containerRef.parent.uid + ':' + uniqueId;
+                       containerRef = containerRef.parent;
+               }
+               uniqueId += ':' + path.join(':')
+
                if (!property.properties && isObject) {
                        const uiState = DescriptorModelMetaFactory.getModelMetaForType(property.name) || {};
                        property.properties = uiState.properties;
                }
 
-               const hasProperties = _.isArray(property.properties) && property.properties.length;
+               const hasProperties = _isArray(property.properties) && property.properties.length;
                const isMissingDescriptorMeta = !hasProperties && !Property.isLeaf(property);
 
                // ensure value is not undefined for non-leaf property types
@@ -488,7 +606,7 @@ export default function EditDescriptorModelProperties(props) {
                                value = isArray ? [] : {};
                        }
                }
-               const valueAsArray = _.isArray(value) ? value : isLeafList && typeof value === 'undefined' ? [] : [value];
+               const valueAsArray = _isArray(value) ? value : isLeafList && typeof value === 'undefined' ? [] : [value];
 
                const isMetaField = property.name === 'meta';
                const isCVNFD = property.name === 'constituent-vnfd';
@@ -497,12 +615,16 @@ export default function EditDescriptorModelProperties(props) {
                valueAsArray.forEach((value, index) => {
 
                        let field;
-                       const key = fieldKey.slice();
                        const valuePath = path.slice();
+                       // create a unique field Id for use as react component keys and html element ids
+                       // notes: 
+                       //   keys only need to be unique on components in the same array
+                       //   html element ids should be unique with the document (or form)
+                       let fieldId = uniqueId;
 
                        if (isArray) {
                                valuePath.push(index);
-                               key.push(index);
+                               fieldId += index;
                        }
 
                        if (isMetaField) {
@@ -514,17 +636,17 @@ export default function EditDescriptorModelProperties(props) {
                        }
 
                        if (isMissingDescriptorMeta) {
-                               field = <span key={key.concat('warning').join(':')} className="warning">No Descriptor Meta for {property.name}</span>;
+                               field = <span key={fieldId} className="warning">No Descriptor Meta for {property.name}</span>;
                        } else if (property.type === 'choice') {
-                               field = buildChoice(container, property, valuePath, value, key.join(':'));
+                               field = buildChoice(container, property, valuePath, value, fieldId);
                        } else if (isSimpleListView) {
-                               field = buildSimpleListItem(container, property, valuePath, value, key, index);
+                               field = buildSimpleListItem(container, property, valuePath, value, fieldId, index);
                        } else if (isLeafList) {
-                               field = buildLeafListItem(container, property, valuePath, value, key, index);
+                               field = buildLeafListItem(container, property, valuePath, value, fieldId, index);
                        } else if (hasProperties) {
-                               field = buildElement(container, property, valuePath, value, key.join(':'))
+                               field = buildElement(container, property, valuePath, value, fieldId)
                        } else {
-                               field = buildField(container, property, valuePath, value, key.join(':'));
+                               field = buildField(container, property, valuePath, value, fieldId);
                        }
 
                        function onClickLeaf(property, path, value, event) {
@@ -534,7 +656,7 @@ export default function EditDescriptorModelProperties(props) {
                                event.preventDefault();
                                event.stopPropagation();
                                this.getRoot().uiState.focusedPropertyPath = path.join('.');
-                               console.log('property selected', path.join('.'));
+                               console.debug('property selected', path.join('.'));
                                ComposerAppActions.propertySelected([path.join('.')]);
                        }
 
@@ -542,10 +664,10 @@ export default function EditDescriptorModelProperties(props) {
                        const isContainerList = isArray && !(isSimpleListView || isLeafList);
 
                        fields.push(
-                               <div key={fieldKey.concat(['property-content', index]).join(':')}
+                               <div key={fieldId}
                                         className={ClassNames('property-content', {'simple-list': isSimpleListView})}
                                         onClick={clickHandler.bind(container, property, valuePath, value)}>
-                                       {isContainerList ? buildRemoveListItem(container, property, valuePath, fieldKey, index) : null}
+                                       {isContainerList ? buildRemoveListItem(container, property, valuePath, index) : null}
                                        {field}
                                </div>
                        );
@@ -574,9 +696,9 @@ export default function EditDescriptorModelProperties(props) {
                const onFocus = isLeaf ? event => event.target.classList.add('-is-focused') : false;
 
                return (
-                       <div key={fieldKey.join(':')} className={ClassNames(property.type + '-property property', classNames)} onFocus={onFocus}>
+                       <div key={uniqueId} className={ClassNames(property.type + '-property property', classNames)} onFocus={onFocus}>
                                <h3 className="property-label">
-                                       <label htmlFor={fieldKey.join(':')}>
+                                       <label htmlFor={uniqueId}>
                                                <span className={property.type + '-name name'}>{title}</span>
                                                <small>
                                                        <span className={property.type + '-info info'}>{displayValueInfo}</span>
@@ -663,5 +785,5 @@ export default function EditDescriptorModelProperties(props) {
                        {buildAdvancedGroup()}
                </div>
        );
+};
 
-}