Skip to content

Commit

Permalink
Fixed editor discrepency
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed May 6, 2021
1 parent 8ead05a commit 289d2e5
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 52 deletions.
77 changes: 40 additions & 37 deletions ui/src/app/metadata/component/properties/ArrayProperty.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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) =>
Expand All @@ -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>
}
Expand All @@ -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) =>
Expand All @@ -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)}>
Expand All @@ -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>
)}
</>
: ''}
}
</>
}
</>
Expand Down
11 changes: 11 additions & 0 deletions ui/src/app/metadata/domain/source/SourceDefinition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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': [
{
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/metadata/editor/MetadataEditorForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
25 changes: 11 additions & 14 deletions ui/src/app/metadata/hooks/utility.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ export function getStepProperty(property, model, definitions) {
property,
model,
definitions
),
widget: property.widget instanceof String ? { id: property.widget } : { ...property.widget }
)
};
}

Expand Down Expand Up @@ -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)
}))
Expand All @@ -150,7 +150,10 @@ export const assignValueToProperties = (models, properties, definition) => {
value: models.map(model => {
return model[prop.id];
}),
widget
items: {
...prop.items,
...items
}
};
}
});
Expand All @@ -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);
}
Expand Down

0 comments on commit 289d2e5

Please sign in to comment.