Fixed issues with validation from page to page

TIER · May 10, 2021 · 8ff8d41 · 8ff8d41
1 parent b48bb4e
commit 8ff8d41
Show file tree

Hide file tree

Showing 18 changed files with 198 additions and 73 deletions.
diff --git a/ui/public/assets/schema/provider/dynamic-http.schema.json b/ui/public/assets/schema/provider/dynamic-http.schema.json
@@ -391,7 +391,6 @@
             "title": "",
             "description": "",
             "type": "array",
-            "additionalItems": true,
             "items": [
                 {
                     "$id": "RequiredValidUntil",

diff --git a/ui/public/assets/schema/provider/filebacked-http.schema.json b/ui/public/assets/schema/provider/filebacked-http.schema.json
@@ -333,7 +333,6 @@
             "title": "",
             "description": "",
             "type": "array",
-            "additionalItems": true,
             "items": [
                 {
                     "$id": "RequiredValidUntil",
@@ -376,9 +375,7 @@
                                 {
                                     "properties": {
                                         "requireSignedRoot": {
-                                            "enum": [
-                                                true
-                                            ]
+                                            "const": true
                                         }
                                     },
                                     "required": [
@@ -388,9 +385,7 @@
                                 {
                                     "properties": {
                                         "requireSignedRoot": {
-                                            "enum": [
-                                                false
-                                            ]
+                                            "const": false
                                         }
                                     }
                                 }

diff --git a/ui/src/app/form/component/templates/ObjectFieldTemplate.js b/ui/src/app/form/component/templates/ObjectFieldTemplate.js
@@ -21,8 +21,6 @@ const ObjectFieldTemplate = ({
 
     const displayTitle = (uiSchema["ui:title"] || (title && schema.title));
 
-    console.log(properties);
-
     return (
         <>
             {!hidden &&
@@ -52,7 +50,7 @@ const ObjectFieldTemplate = ({
                                 <Col xs={group.size} key={rIdx} className={`d-empty-none ${group.classNames}`}>
                                     {group.title && <legend><Translate value={group.title} /></legend>}
                                     {properties.filter(p => group.fields.indexOf(p.name) > -1).map((element, eIdx) => (
-                                        <React.Fragment key={eIdx}>{element.content}{console.log(element.content)}</React.Fragment>
+                                        <React.Fragment key={eIdx}>{element.content}</React.Fragment>
                                     ))}
                                 </Col>
                             }

diff --git a/ui/src/app/form/component/widgets/CheckboxWidget.js b/ui/src/app/form/component/widgets/CheckboxWidget.js
@@ -29,7 +29,7 @@ const CheckboxWidget = (props) => {
         target: { checked },
     }) => onFocus(id, checked);
 
-    const desc = label || schema.description;
+    // const desc = label || schema.description;
     return (
         <Form.Group className={`checkbox ${disabled || readonly ? "disabled" : ""}`}>
             <Form.Check

diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -6,7 +6,7 @@ import { InfoIcon } from "../InfoIcon";
 
 import { Typeahead } from 'react-bootstrap-typeahead';
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowDown, faArrowUp, faAsterisk, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
+import { faAsterisk, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { useTranslator } from "../../../i18n/hooks";
 
 const ToggleButton = ({ isOpen, onClick }) => (
@@ -44,7 +44,7 @@ const OptionWidget = ({
     const _onChange = (selected) => onChange(selected[0] === '' ? options.emptyValue : selected[0]);
     const _onBlur = ({ target: { value } }) => onBlur(id, value);
     const _onFocus = ({ target: { value } }) => onFocus(id, value);
-    const inputType = (type || schema.type) === 'string' ? 'text' : `${type || schema.type}`;
+    // const inputType = (type || schema.type) === 'string' ? 'text' : `${type || schema.type}`;
 
     const opts = Array.isArray(options) || options.enumOptions ? options : schema.examples ? schema.examples : uiSchema.options ? uiSchema.options : [];
 

diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
@@ -28,7 +28,6 @@ const TextWidget = ({
     const _onBlur = ({ target: { value } }) => onBlur(id, value);
     const _onFocus = ({target: { value }} ) => onFocus(id, value);
     const inputType = (type || schema.type) === 'string' ? 'text' : `${type || schema.type}`;
-    console.log(props)
 
     // const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (

diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
@@ -3,13 +3,13 @@ import { Switch, Route, useRouteMatch } from 'react-router-dom';
 import { MetadataOptions } from './view/MetadataOptions';
 import { MetadataDetail } from './component/MetadataDetail';
 import { MetadataHistory } from './view/MetadataHistory';
-import { MetadataEditor } from './editor/MetadataEditor';
 import { MetadataSelector } from './hoc/MetadataSelector';
 import { MetadataSchema } from './hoc/MetadataSchema';
 import { MetadataXmlLoader } from './hoc/MetadataXmlLoader';
 import { MetadataXml } from './view/MetadataXml';
 import { MetadataComparison } from './view/MetadataComparison';
 import { MetadataVersion } from './view/MetadataVersion';
+import { MetadataEdit } from './view/MetadataEdit';
 
 export function Metadata () {
 
@@ -46,7 +46,9 @@ export function Metadata () {
                                 <MetadataVersion></MetadataVersion>
                             </MetadataDetail>
                         } />
-                        <Route path={`${path}/edit/:section`} component={ MetadataEditor } />
+                        <Route path={`${path}/edit/:section`} render={ () =>
+                            <MetadataEdit />
+                        } />
                     </Switch>
                 </MetadataSchema>
             </MetadataXmlLoader>

diff --git 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, { useState } from 'react';
+import React from 'react';
 import Translate from '../../../i18n/components/translate';
 import { usePropertyWidth } from './hooks';
 import { PropertyValue } from './PropertyValue';
@@ -30,10 +30,10 @@ export function ArrayProperty ({ property, columns, onPreview }) {
 
     React.useEffect(() => {
         setKeys(property.value.reduce((val, version) => version ? version.length > val ? version.length : val : val, 0));
-        setDataList(property.items?.enum);
 
+        console.log(property);
 
-        console.log(property, keys);
+        setDataList(property.items?.enum);
     }, [property]);
 
     React.useEffect(() => {
@@ -76,7 +76,7 @@ export function ArrayProperty ({ property, columns, onPreview }) {
             }
             {property?.items?.type === 'string' &&
                 <>
-                    { property?.items?.enum?.length ?
+                    { property?.items?.enum?.length && property.uniqueItems ?
                         <>
                             {dataList.map((item, itemIdx) => 
                                 <div className={`d-flex justify-content-start border-bottom border-light ${ property.differences ? 'bg-diff' : '' }`} tabIndex="0" key={itemIdx}>
@@ -97,7 +97,7 @@ export function ArrayProperty ({ property, columns, onPreview }) {
                             <span className="p-2" role="term" style={ {width} } ><Translate value={property.name}>{ property.name }</Translate></span>
                             {property.value.map((v, vidx) => 
                                 <React.Fragment key={vidx}>
-                                    {(!v || !v.length) && <p style={ {width} } className="text-secondary m-0">-</p> }
+                                    {(!v || !v.length) && <p style={ {width} } className="text-secondary m-0 align-self-center">-</p> }
                                     {(v && v.length > 0) &&
                                         <ul style={ {width} } className="list-unstyled py-2 m-0">
                                             {v.map((item, idx) => 

diff --git a/ui/src/app/metadata/domain/provider/BaseProviderDefinition.js b/ui/src/app/metadata/domain/provider/BaseProviderDefinition.js
@@ -7,7 +7,7 @@ export const BaseProviderDefinition = {
         ...changes,
         metadataFilters: [
             ...changes.metadataFilters.filter((filter, filterName) => (
-                Object.keys(filter).length > 1
+                Object.keys(filter).length > 0
             ))
         ]
     }) : changes),

diff --git a/ui/src/app/metadata/domain/provider/DynamicHttpMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/DynamicHttpMetadataProviderDefinition.js
@@ -1,7 +1,7 @@
 // import { metadataFilterProcessor } from './utility/providerFilterProcessor';
 
 import { BaseProviderDefinition, HttpMetadataResolverAttributesSchema, MetadataFilterPluginsSchema } from './BaseProviderDefinition';
-import API_BASE_PATH from '../../../App.constant';
+// import API_BASE_PATH from '../../../App.constant';
 import defaultsDeep from 'lodash/defaultsDeep';
 import { DurationOptions } from '../data';
 

diff --git a/ui/src/app/metadata/domain/provider/FileSystemMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/FileSystemMetadataProviderDefinition.js
@@ -1,5 +1,5 @@
 import defaultsDeep from 'lodash/defaultsDeep';
-import API_BASE_PATH from "../../../App.constant";
+// import API_BASE_PATH from "../../../App.constant";
 import { BaseProviderDefinition } from "./BaseProviderDefinition";
 import { DurationOptions } from '../data';
 

diff --git a/ui/src/app/metadata/domain/provider/LocalDynamicMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/LocalDynamicMetadataProviderDefinition.js
@@ -1,6 +1,6 @@
 import defaultsDeep from 'lodash/defaultsDeep';
 
-import API_BASE_PATH from "../../../App.constant";
+// import API_BASE_PATH from "../../../App.constant";
 import {DurationOptions} from '../data';
 import { BaseProviderDefinition } from "./BaseProviderDefinition";
 

diff --git a/ui/src/app/metadata/domain/source/SourceDefinition.js b/ui/src/app/metadata/domain/source/SourceDefinition.js
@@ -1,5 +1,5 @@
 import defaultsDeep from 'lodash/defaultsDeep';
-import API_BASE_PATH from '../../../App.constant';
+// import API_BASE_PATH from '../../../App.constant';
 
 export const SourceBase = {
     label: 'Metadata Source',

diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -1,35 +1,32 @@
 import { faCogs, faExclamationTriangle, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
-import { useParams } from 'react-router';
+import { useHistory, useParams } from 'react-router';
 import Translate from '../../i18n/components/translate';
+import { MetadataFormContext, setFormDataAction, setFormErrorAction } from '../hoc/MetadataFormContext';
 import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 
-import { MetadataObjectContext } from '../hoc/MetadataSelector';
 import { MetadataEditorForm } from './MetadataEditorForm';
 import { MetadataEditorNav } from './MetadataEditorNav';
 
 export function MetadataEditor () {
 
     const { type, id, section } = useParams();
-
-    const base = React.useContext(MetadataObjectContext);
+    const history = useHistory();
     const definition = React.useContext(MetadataDefinitionContext);
     const schema = React.useContext(MetadataSchemaContext);
 
-    const [invalid, setInvalid] = React.useState(false);
-    const [saving, setSaving] = React.useState(false);
+    const [invalid] = React.useState(false);
+    const [saving] = React.useState(false);
 
-    const [updates, setUpdates] = React.useState(base);
+    const { state, dispatch } = React.useContext(MetadataFormContext);
+    const { metadata, errors } = state;
 
-    const onChange = (updates) => {
-        setUpdates(definition.parser(updates));
+    const onChange = (changes) => {
+        dispatch(setFormDataAction(changes.formData));
+        dispatch(setFormErrorAction(section, changes.errors));
     };
 
-    React.useEffect(() => {
-        setUpdates(base);
-    }, [base]);
-
     const save = () => {
         console.log('save!');
     };
@@ -38,15 +35,19 @@ export function MetadataEditor () {
         console.log('cancel!');
     };
 
+    const onNavigate = (path) => {
+        history.push(path)
+    };
+
     return (
         <div className="container-fluid p-3">
-            <section className="section" aria-label={`Edit metadata ${type} - ${base.serviceProviderName || base.name}`} tabIndex="0">
+            <section className="section" aria-label={`Edit metadata ${type} - ${metadata.serviceProviderName || metadata.name}`} tabIndex="0">
                 <div className="section-header bg-info p-2 text-white">
                     <div className="row justify-content-between">
                         <div className="col-md-12">
                             <span className="display-6">
                                 <FontAwesomeIcon icon={faCogs} />&nbsp;
-                                Edit metadata {type} - {base.serviceProviderName || base.name}
+                                Edit metadata {type} - {metadata.serviceProviderName || metadata.name}
                             </span>
                         </div>
                     </div>
@@ -55,10 +56,12 @@ export function MetadataEditor () {
                     <div className="row">
                         <div className="col-6 d-lg-none order-1">
                             <MetadataEditorNav
+                                onNavigate={onNavigate}
                                 definition={definition}
                                 current={section}
                                 base={`/metadata/${type}/${id}/edit`}
-                                format='dropdown'>
+                                format='dropdown'
+                                errors={errors}>
                             </MetadataEditorNav>
                         </div>
                         <div className="col-6 col-lg-3 order-2 text-right">
@@ -88,15 +91,23 @@ export function MetadataEditor () {
                     <div className="row">
                         <div className="col-lg-3 d-none d-lg-block">
                             <MetadataEditorNav
+                                onNavigate={onNavigate}
                                 definition={definition}
                                 current={ section }
                                 base={`/metadata/${type}/${id}/edit`}
-                                format='tabs'>
-
+                                format='tabs'
+                                errors={errors}>
                             </MetadataEditorNav>
                         </div>
                         <div className="col-lg-9">
-                            <MetadataEditorForm metadata={definition.formatter(updates)} definition={definition} schema={schema} current={section} />
+                            {definition && schema && metadata &&
+                            <MetadataEditorForm
+                                metadata={metadata}
+                                definition={definition}
+                                schema={schema}
+                                current={section}
+                                onChange={onChange} />
+                            }
                         </div>
                     </div>
                 </div>

diff --git a/ui/src/app/metadata/editor/MetadataEditorForm.js b/ui/src/app/metadata/editor/MetadataEditorForm.js
@@ -16,17 +16,12 @@ export function MetadataEditorForm ({ metadata, definition, schema, current, onC
 
     const onSubmit = () => {};
 
-    const [context, setContext] = React.useState(definition.steps.find(s => s.id === current));
-
-    React.useEffect(() => {
-        setContext(definition.steps.find(s => s.id === current))
-    }, [current, definition]);
 
     return (
         <>
             <Form formData={data}
                 noHtml5Validate={true}
-                onChange={({ formData }) => setData(formData) }
+                onChange={(form) => onChange(form) }
                 onSubmit={() => onSubmit()}
                 schema={schema}
                 uiSchema={uiSchema}
@@ -35,18 +30,9 @@ export function MetadataEditorForm ({ metadata, definition, schema, current, onC
                 ArrayFieldTemplate={templates.ArrayFieldTemplate}
                 fields={ fields }
                 widgets={widgets}
-                liveValidate={true}
-                formContext={context}>
+                liveValidate={true}>
                     <></>
                 </Form>
-            <div className="row">
-                <div className="col-6">
-                    <pre>{JSON.stringify(data, null, 4)}</pre>
-                </div>
-                <div className="col-6">
-                    <pre>{JSON.stringify(schema, null, 4)}</pre>
-                </div>
-            </div>
         </>
     );
 }