From 289d2e5ef4c8e9e1962dd226aebf8a36cacd995b Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 6 May 2021 15:20:25 -0700
Subject: [PATCH] Fixed editor discrepency

---
 .../component/properties/ArrayProperty.js     | 77 ++++++++++---------
 .../domain/source/SourceDefinition.js         | 11 +++
 .../app/metadata/editor/MetadataEditorForm.js |  2 +-
 ui/src/app/metadata/hooks/utility.js          | 25 +++---
 4 files changed, 63 insertions(+), 52 deletions(-)

diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
index 1e23ca383..446abfdd9 100644
--- a/ui/src/app/metadata/component/properties/ArrayProperty.js
+++ b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -1,6 +1,6 @@
 import { faEye } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
+import React, { useState } from 'react';
 import Translate from '../../../i18n/components/translate';
 import { usePropertyWidth } from './hooks';
 import { PropertyValue } from './PropertyValue';
@@ -16,30 +16,33 @@ const isUri = (value) => {
     return true;
 }
 
-const getItemType = (property) => {
-    const items = property.items;
-    const def = 'default';
-    return items ? items.widget ? items.widget.id : def : def;
-}
-
 const isUrl = (str) => {
     return isUri(str);
 }
 
-export function ArrayProperty ({ property, columns, index, onPreview }) {
+export function ArrayProperty ({ property, columns, onPreview }) {
 
-    const keys = property.value.reduce((val, version) => version ? version.length > val ? version.length : val : val, 0);
-    const range = [...Array(keys).keys()];
+    const width = usePropertyWidth(columns);
 
-    const dataList = property.widget?.data;
+    const [keys, setKeys] = React.useState(0);
+    const [range, setRange] = React.useState([]);
+    const [dataList, setDataList] = React.useState([]);
 
-    const width = usePropertyWidth(columns);
+    React.useEffect(() => {
+        setKeys(property.value.reduce((val, version) => version ? version.length > val ? version.length : val : val, 0));
+        setDataList(property.items?.enum);
 
-    const type = getItemType(property);
+
+        console.log(property, keys);
+    }, [property]);
+
+    React.useEffect(() => {
+        setRange([...Array(keys).keys()])
+    }, [keys]);
 
     return (
         <>
-            {property.items.type === 'object' &&
+            {property?.items?.type === 'object' &&
                 <div className={ property.differences ? 'bg-diff' : '' }>
                     <div className="p-2" role="term"><Translate value={property.name}>{ property.name }</Translate></div>
                     {range.map((i) =>
@@ -54,10 +57,11 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
                                     }
                                     { property.value.map((version, vIdx) => 
                                         <React.Fragment key={vIdx}>
-                                            {version && version[vIdx] &&
+                                            {version && version[i] &&
                                                 <PropertyValue name={property.name} columns={columns} value={version[i][prop]} />
                                             }
-                                            {(!version || !version[vIdx]) && <div style={{ width }}>
+                                            {(!version || !version[i]) &&
+                                            <div style={{ width }}>
                                                 -
                                             </div>
                                             }
@@ -70,11 +74,25 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
                     )}
                 </div>
             }
-            {property.items.type === 'string' &&
+            {property?.items?.type === 'string' &&
                 <>
-                    { (type  === 'datalist' || type === 'select' || !property.width || !property.widget.id) ?
-                        <div className={`d-flex align-items-start border-bottom border-light ${ property.differences ? 'bg-diff' : '' }`}
-                            tabIndex="0">
+                    { property?.items?.enum?.length ?
+                        <>
+                            {dataList.map((item, itemIdx) => 
+                                <div className={`d-flex justify-content-start border-bottom border-light ${ property.differences ? 'bg-diff' : '' }`} tabIndex="0" key={itemIdx}>
+                                    {item.differences && <span className="sr-only">Changed:</span> }
+                                    <span className="p-2" role="term" style={ {width} }><Translate value={item.label}>{ item.label }</Translate></span>
+                                    { property.value.map((v, vIdx) =>
+                                        <div className="py-2" style={ {width} } key={vIdx}>
+                                            {v && v.indexOf(item.key) > -1 && <span><Translate value="value.true">true</Translate></span> }
+                                            {(!v || !(v.indexOf(item.key) > -1)) && <span><Translate value="value.false">false</Translate></span> }
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        </>
+                    :
+                        <div className={`d-flex align-items-start border-bottom border-light ${ property.differences ? 'bg-diff' : '' }`} tabIndex="0">
                             {property.differences && <span className="sr-only">Changed:</span> }
                             <span className="p-2" role="term" style={ {width} } ><Translate value={property.name}>{ property.name }</Translate></span>
                             {property.value.map((v, vidx) => 
@@ -83,7 +101,7 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
                                     {(v && v.length > 0) &&
                                         <ul style={ {width} } className="list-unstyled py-2 m-0">
                                             {v.map((item, idx) => 
-                                                <li key={idx} className={`text-truncate border-bottom border-light ${v.length > 1 ? 'py-2' : ''} ${'border-0'}`}>
+                                                <li key={idx} className={`text-truncate border-bottom border-light py-2 ${v.length > 1 ? '' : 'border-0'}`}>
                                                     {onPreview && isUrl(item) &&
                                                         <>
                                                         <button className="btn btn-link" onClick={() => onPreview(item)}>
@@ -99,22 +117,7 @@ export function ArrayProperty ({ property, columns, index, onPreview }) {
                                 </React.Fragment>
                             )}
                         </div>
-                    : property.widget && property.widget.data ?
-                        <>
-                            {dataList.map((item, itemIdx) => 
-                                <div className={`d-flex justify-content-start border-bottom border-light ${ property.differences && item.differences ? 'bg-diff' : '' }`} tabIndex="0" key={itemIdx}>
-                                    {item.differences && <span className="sr-only">Changed:</span> }
-                                    <span className="p-2" role="term" style={ {width} }><Translate value={item.label}>{ item.label }</Translate></span>
-                                    { property.value.map((v, vIdx) =>
-                                    <div className="py-2" style={ {width} }>
-                                        {v && v.indexOf(item.key) > -1 && <span><Translate value="value.true">true</Translate></span> }
-                                        {(!v || !(v.indexOf(item.key) > -1)) && <span><Translate value="value.false">false</Translate></span> }
-                                    </div>
-                                    )}
-                                </div>
-                            )}
-                        </>
-                    : ''}
+                    }
                 </>
             }
         </>
diff --git a/ui/src/app/metadata/domain/source/SourceDefinition.js b/ui/src/app/metadata/domain/source/SourceDefinition.js
index 332e6f9a3..18b4b55b2 100644
--- a/ui/src/app/metadata/domain/source/SourceDefinition.js
+++ b/ui/src/app/metadata/domain/source/SourceDefinition.js
@@ -9,6 +9,17 @@ export const SourceBase = {
     //${API_BASE_PATH}/ui/MetadataSources
     validatorParams: [/*getAllOtherIds*/],
 
+    parse: (data) => {
+        const parsed = {...data};
+        if (parsed?.securityInfo?.x509CertificateAvailable) {
+            if (!parsed?.securityInfo?.x509Certificates) {
+                parsed.securityInfo.x509Certificates = [];
+            }
+            parsed.securityInfo.x509Certificates.push({})
+        }
+        return parsed;
+    },
+
     bindings: {
         '/securityInfo/x509CertificateAvailable': [
             {
diff --git a/ui/src/app/metadata/editor/MetadataEditorForm.js b/ui/src/app/metadata/editor/MetadataEditorForm.js
index 1d0d9adc5..20e885950 100644
--- a/ui/src/app/metadata/editor/MetadataEditorForm.js
+++ b/ui/src/app/metadata/editor/MetadataEditorForm.js
@@ -20,7 +20,7 @@ export function MetadataEditorForm ({ metadata, definition, schema, current }) {
         <>
             <Form formData={data}
                 noHtml5Validate={true}
-                onChange={ ({ formData }) => setData(formData) }
+                onChange={({ formData }) => setData(definition.parse(formData)) }
                 onSubmit={() => onSubmit()}
                 schema={schema}
                 uiSchema={uiSchema}
diff --git a/ui/src/app/metadata/hooks/utility.js b/ui/src/app/metadata/hooks/utility.js
index ad5acdb65..1ff365e91 100644
--- a/ui/src/app/metadata/hooks/utility.js
+++ b/ui/src/app/metadata/hooks/utility.js
@@ -20,8 +20,7 @@ export function getStepProperty(property, model, definitions) {
             property,
             model,
             definitions
-        ),
-        widget: property.widget instanceof String ? { id: property.widget } : { ...property.widget }
+        )
     };
 }
 
@@ -119,14 +118,15 @@ export const assignValueToProperties = (models, properties, definition) => {
     return properties.map(prop => {
         const differences = getDifferences(models, prop);
 
-        const widget = prop.type === 'array' && prop.widget && prop.widget.data ? ({
-            ...prop.widget,
-            data: prop.widget.data.map(item => ({
-                ...item,
+        const items = prop.type === 'array' && prop.items?.enum ? ({
+            ...prop.items,
+            enum: prop.items.enum.map(item => ({
+                key: item,
+                label: `label.attribute-${item}`,
                 differences: models
                     .map((model) => {
                         const value = model[prop.id];
-                        return value ? value.indexOf(item.key) > -1 : false;
+                        return value ? value.indexOf(item) > -1 : false;
                     })
                     .reduce((current, val) => current !== val ? true : false, false)
             }))
@@ -150,7 +150,10 @@ export const assignValueToProperties = (models, properties, definition) => {
                     value: models.map(model => {
                         return model[prop.id];
                     }),
-                    widget
+                    items: {
+                        ...prop.items,
+                        ...items
+                    }
                 };
         }
     });
@@ -162,12 +165,6 @@ export const getLimitedPropertiesFn = (properties) => {
             .filter(p => p.differences)
             .map(p => {
                 const parsed = { ...p };
-                if (p.widget && p.widget.data) {
-                    parsed.widget = {
-                        ...p.widget,
-                        data: p.widget.data.filter(item => item.differences)
-                    };
-                }
                 if (p.properties) {
                     parsed.properties = getLimitedPropertiesFn(p.properties);
                 }