From 768f6a56e900789d5c3452ae910cd4a7e093893e Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 11 May 2021 14:21:21 -0700
Subject: [PATCH] Implemented metadata editor

---
 ui/package.json                               |  1 +
 .../schema/provider/dynamic-http.schema.json  | 20 ++----
 ui/src/app/App.js                             | 40 +++++++-----
 .../app/core/components/UserConfirmation.js   | 48 +++++++++++++++
 .../component/templates/ArrayFieldTemplate.js |  8 +--
 .../form/component/templates/FieldTemplate.js | 46 +++++++-------
 .../templates/ObjectFieldTemplate.js          |  2 +-
 .../form/component/widgets/OptionWidget.js    |  5 +-
 ui/src/app/metadata/Metadata.js               |  3 +-
 .../component/properties/ArrayProperty.js     |  3 -
 .../domain/source/SourceDefinition.js         | 16 ++---
 ui/src/app/metadata/editor/MetadataEditor.js  | 50 +++++++++++----
 .../app/metadata/editor/MetadataEditorForm.js | 61 ++++++++++++++-----
 .../app/metadata/editor/MetadataEditorNav.js  |  4 +-
 .../app/metadata/hoc/MetadataFormContext.js   | 50 +++++++--------
 ui/src/app/metadata/hoc/MetadataSelector.js   | 15 +++--
 ui/src/app/metadata/hooks/schema.js           | 11 +++-
 ui/src/app/metadata/view/MetadataEdit.js      |  2 +-
 ui/yarn.lock                                  |  5 ++
 19 files changed, 252 insertions(+), 138 deletions(-)
 create mode 100644 ui/src/app/core/components/UserConfirmation.js

diff --git a/ui/package.json b/ui/package.json
index 056f197ea..d3a2c9833 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -14,6 +14,7 @@
     "@testing-library/user-event": "^12.1.10",
     "bootstrap": "^4.6.0",
     "date-fns": "^2.21.1",
+    "deep-object-diff": "^1.1.0",
     "file-saver": "^2.0.5",
     "http-proxy-middleware": "^1.2.0",
     "lodash": "^4.17.21",
diff --git a/ui/public/assets/schema/provider/dynamic-http.schema.json b/ui/public/assets/schema/provider/dynamic-http.schema.json
index e752ad491..5d0d1f428 100644
--- a/ui/public/assets/schema/provider/dynamic-http.schema.json
+++ b/ui/public/assets/schema/provider/dynamic-http.schema.json
@@ -433,7 +433,7 @@
                                 {
                                     "properties": {
                                         "requireSignedRoot": {
-                                            "enum": [true]
+                                            "const": true
                                         }
                                     },
                                     "required": [
@@ -443,7 +443,7 @@
                                 {
                                     "properties": {
                                         "requireSignedRoot": {
-                                            "enum": [false]
+                                            "const": false
                                         }
                                     }
                                 }
@@ -468,20 +468,8 @@
                                     "id": "select"
                                 },
                                 "type": "string",
-                                "oneOf": [
-                                    {
-                                        "enum": [
-                                            "SPSSODescriptor"
-                                        ],
-                                        "description": "value.spdescriptor"
-                                    },
-                                    {
-                                        "enum": [
-                                            "AttributeAuthorityDescriptor"
-                                        ],
-                                        "description": "value.attr-auth-descriptor"
-                                    }
-                                ]
+                                "enum": ["SPSSODescriptor", "AttributeAuthorityDescriptor"],
+                                "enumNames": ["value.spdescriptor", "value.attr-auth-descriptor"]
                             }
                         },
                         "removeRolelessEntityDescriptors": {
diff --git a/ui/src/app/App.js b/ui/src/app/App.js
index 547f0a45b..c0aefad0a 100644
--- a/ui/src/app/App.js
+++ b/ui/src/app/App.js
@@ -19,6 +19,9 @@ import { UserProvider } from './core/user/UserContext';
 import { Metadata } from './metadata/Metadata';
 import { Notifications } from './notifications/hoc/Notifications';
 import { NotificationList } from './notifications/component/NotificationList';
+import { UserConfirmation, ConfirmWindow } from './core/components/UserConfirmation';
+
+
 
 function App() {
 
@@ -38,22 +41,27 @@ function App() {
                 <Notifications>
                     <UserProvider>
                         <I18nProvider>
-                            <Router>
-                                <QueryParamProvider ReactRouterRoute={Route}>
-                                    <Header />
-                                    <main className="pad-content">
-                                        <Switch>
-                                            <Route exact path="/">
-                                                <Redirect to="/dashboard" />
-                                            </Route>
-                                            <Route path="/dashboard" component={Dashboard} />
-                                            <Route path="/metadata/:type/:id" component={Metadata} />
-                                        </Switch>
-                                        <NotificationList />
-                                    </main>
-                                    <Footer />
-                                </QueryParamProvider>
-                            </Router>
+                            <UserConfirmation>
+                                {(message, confirm, confirmCallback, setConfirm, getConfirmation) =>
+                                    <Router getUserConfirmation={getConfirmation}>
+                                        <ConfirmWindow message={message} confirm={confirm} confirmCallback={confirmCallback} setConfirm={setConfirm} /> 
+                                        <QueryParamProvider ReactRouterRoute={Route}>
+                                        <Header />
+                                        <main className="pad-content">
+                                            <Switch>
+                                                <Route exact path="/">
+                                                    <Redirect to="/dashboard" />
+                                                </Route>
+                                                <Route path="/dashboard" component={Dashboard} />
+                                                <Route path="/metadata/:type/:id" component={Metadata} />
+                                            </Switch>
+                                            <NotificationList />
+                                        </main>
+                                        <Footer />
+                                        </QueryParamProvider>
+                                    </Router>
+                                }
+                            </UserConfirmation>
                         </I18nProvider>
                     </UserProvider>
                 </Notifications>
diff --git a/ui/src/app/core/components/UserConfirmation.js b/ui/src/app/core/components/UserConfirmation.js
new file mode 100644
index 000000000..656995e07
--- /dev/null
+++ b/ui/src/app/core/components/UserConfirmation.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import Translate from '../../i18n/components/translate';
+
+
+export function UserConfirmation({children}) {
+    const [confirm, setConfirm] = React.useState(false);
+    const [confirmCallback, setConfirmCallback] = React.useState(null);
+    const [message, setMessage] = React.useState('');
+
+    function getConfirmation(message, callback) {
+        setConfirmCallback(() => callback);
+        setConfirm(true);
+        setMessage(message);
+    }
+
+    return (<>{children(message, confirm, confirmCallback, setConfirm, getConfirmation)}</>);
+}
+
+export function ConfirmWindow ({message, confirm, setConfirm, confirmCallback}) {
+    const allowTransition = () => {
+        setConfirm(false);
+        confirmCallback(true);
+    }
+
+    const blockTransition = () => {
+        setConfirm(false);
+        confirmCallback(false);
+    }
+
+    return (
+        <Modal show={confirm} onHide={blockTransition}>
+            <Modal.Header closeButton>
+                <Modal.Title>Are you sure?</Modal.Title>
+            </Modal.Header>
+
+            <Modal.Body>
+                <p><Translate value={message}>{message}</Translate></p>
+            </Modal.Body>
+
+            <Modal.Footer className="justify-content-start">
+                <Button variant="primary" onClick={allowTransition}><Translate value={`action.discard-changes`} /></Button>
+                <Button onClick={blockTransition} variant="outline-secondary"><Translate value={`action.cancel`} /></Button>
+            </Modal.Footer>
+        </Modal>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/form/component/templates/ArrayFieldTemplate.js b/ui/src/app/form/component/templates/ArrayFieldTemplate.js
index 3163c841a..7af4e2dde 100644
--- a/ui/src/app/form/component/templates/ArrayFieldTemplate.js
+++ b/ui/src/app/form/component/templates/ArrayFieldTemplate.js
@@ -74,7 +74,7 @@ const ObjectArrayItem = ({type, ...props}) => {
                         <Translate value={'label.new-of-type'} params={{type}} />
                     </Accordion.Toggle>
                     {props.hasToolbar && (
-                        <div className="d-flex flex-row align-items-center">
+                        <div className="d-flex flex-row align-items-start">
                             {(props.hasMoveUp || props.hasMoveDown) && (
                                 <div className="m-0 p-0">
                                     <IconButton
@@ -141,10 +141,10 @@ const DefaultArrayItem = (props) => {
 
     return (
         <div key={props.key} className={`mt-2 `}>
-            <div className="mb-2  d-flex align-items-center">
+            <div className="mb-2  d-flex align-items-start">
                 <div className={`mr-2 flex-grow-1 ${uiSchemaOptions.classNames}`}>{props.children}</div>
                 {props.hasToolbar && (
-                    <div className="d-flex flex-row align-items-center">
+                    <div className="d-flex flex-row align-items-start">
                         {(props.hasMoveUp || props.hasMoveDown) && (
                             <div className="m-0 p-0">
                                 <IconButton
@@ -175,7 +175,7 @@ const DefaultArrayItem = (props) => {
                         )}
 
                         {props.hasRemove && (
-                            <div className="m-0 pb-1">
+                            <div className="m-0 px-1 pt-3">
                                 <IconButton
                                     className="text-danger"
                                     variant='text'
diff --git a/ui/src/app/form/component/templates/FieldTemplate.js b/ui/src/app/form/component/templates/FieldTemplate.js
index c1228746e..2e196376f 100644
--- a/ui/src/app/form/component/templates/FieldTemplate.js
+++ b/ui/src/app/form/component/templates/FieldTemplate.js
@@ -11,35 +11,39 @@ export function FieldTemplate ({
     children,
     displayLabel,
     rawErrors = [],
+    errors = [],
     rawHelp,
     help,
     rawDescription,
     ...props
 }) {
+
     return (
         <>{!props.hidden ?
             <Form.Group>
-                {children}
-                {rawErrors.length > 0 && (
-                    <ListGroup as="ul">
-                        {rawErrors.map((error) => {
-                            return (
-                                <ListGroup.Item as="li" key={error} className="border-0 m-0 p-0">
-                                    <small className="m-0 text-danger">
-                                        {error}
-                                    </small>
-                                </ListGroup.Item>
-                            );
-                        })}
-                    </ListGroup>
-                )}
-                {rawHelp && (
-                    <Form.Text
-                        className={rawErrors.length > 0 ? "text-danger" : "text-muted"}
-                        id={id}>
-                        <Translate value={rawHelp} />
-                    </Form.Text>
-                )}
+                <div>
+                    {children}
+                </div>
+                <div>
+                    {rawErrors.length > 0 && (
+                        <ListGroup as="ul">
+                            {rawErrors.map((error, i) => {
+                                return (
+                                    <ListGroup.Item as="li" key={i} className={`border-0 m-0 p-0 bg-transparent ${i > 0 ? 'sr-only' : ''}`}>
+                                        <small className="m-0 text-danger">
+                                            {error}
+                                        </small>
+                                    </ListGroup.Item>
+                                );
+                            })}
+                        </ListGroup>
+                    )}
+                    {rawHelp && rawErrors.length < 1 && (
+                        <Form.Text className={rawErrors.length > 0 ? "text-danger" : "text-muted"} id={id}>
+                            <Translate value={rawHelp} />
+                        </Form.Text>
+                    )}
+                </div>
             </Form.Group>
             : <></>
         }</>
diff --git a/ui/src/app/form/component/templates/ObjectFieldTemplate.js b/ui/src/app/form/component/templates/ObjectFieldTemplate.js
index a6b21af7c..c925802f4 100644
--- a/ui/src/app/form/component/templates/ObjectFieldTemplate.js
+++ b/ui/src/app/form/component/templates/ObjectFieldTemplate.js
@@ -47,7 +47,7 @@ const ObjectFieldTemplate = ({
                         <Row>{uiSchema.layout.groups.map((group, rIdx) => (
                             <React.Fragment key={rIdx}>
                             {properties.some(p => group.fields.indexOf(p.name) > -1) &&
-                                <Col xs={group.size} key={rIdx} className={`d-empty-none ${group.classNames}`}>
+                                <Col lg={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}</React.Fragment>
diff --git a/ui/src/app/form/component/widgets/OptionWidget.js b/ui/src/app/form/component/widgets/OptionWidget.js
index b6b253315..370396c99 100644
--- a/ui/src/app/form/component/widgets/OptionWidget.js
+++ b/ui/src/app/form/component/widgets/OptionWidget.js
@@ -9,11 +9,12 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAsterisk, faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
 import { useTranslator } from "../../../i18n/hooks";
 
-const ToggleButton = ({ isOpen, onClick }) => (
+const ToggleButton = ({ isOpen, onClick, disabled }) => (
     <button
         type="button"
         className="btn btn-outline-secondary toggle-button"
         onClick={onClick}
+        disabled={disabled}
         onMouseDown={e => {
             // Prevent input from losing focus.
             e.preventDefault();
@@ -76,7 +77,7 @@ const OptionWidget = ({
                     return <span className={options.indexOf(text) === index ? 'font-weight-bold' : ''}>{option}</span>;
                 }}>
                 {({ isMenuShown, toggleMenu }) => (
-                    <ToggleButton isOpen={isMenuShown} onClick={e => toggleMenu()} />
+                    <ToggleButton isOpen={isMenuShown} onClick={e => toggleMenu()} disabled={disabled || readonly} />
                 )}
             </Typeahead>
         </Form.Group>
diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
index ecb53a3ec..71ec50574 100644
--- a/ui/src/app/metadata/Metadata.js
+++ b/ui/src/app/metadata/Metadata.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
 import { MetadataOptions } from './view/MetadataOptions';
 import { MetadataDetail } from './component/MetadataDetail';
 import { MetadataHistory } from './view/MetadataHistory';
@@ -49,6 +49,7 @@ export function Metadata () {
                         <Route path={`${path}/edit/:section`} render={ () =>
                             <MetadataEdit />
                         } />
+                        <Redirect exact path={`${path}`} to={`${path}/configuration/options`} />
                     </Switch>
                 </MetadataSchema>
             </MetadataXmlLoader>
diff --git a/ui/src/app/metadata/component/properties/ArrayProperty.js b/ui/src/app/metadata/component/properties/ArrayProperty.js
index 4b4b03919..321f8cd7a 100644
--- a/ui/src/app/metadata/component/properties/ArrayProperty.js
+++ b/ui/src/app/metadata/component/properties/ArrayProperty.js
@@ -30,9 +30,6 @@ export function ArrayProperty ({ property, columns, onPreview }) {
 
     React.useEffect(() => {
         setKeys(property.value.reduce((val, version) => version ? version.length > val ? version.length : val : val, 0));
-
-        console.log(property);
-
         setDataList(property.items?.enum);
     }, [property]);
 
diff --git a/ui/src/app/metadata/domain/source/SourceDefinition.js b/ui/src/app/metadata/domain/source/SourceDefinition.js
index 04c2d8f4c..80398a09b 100644
--- a/ui/src/app/metadata/domain/source/SourceDefinition.js
+++ b/ui/src/app/metadata/domain/source/SourceDefinition.js
@@ -1,5 +1,7 @@
 import defaultsDeep from 'lodash/defaultsDeep';
 // import API_BASE_PATH from '../../../App.constant';
+import {removeNull} from '../../../core/utility/remove_null';
+
 
 export const SourceBase = {
     label: 'Metadata Source',
@@ -9,19 +11,9 @@ export const SourceBase = {
     //${API_BASE_PATH}/ui/MetadataSources
     validatorParams: [/*getAllOtherIds*/],
 
-    parse: (data) => {
-        if (data?.securityInfo?.x509CertificateAvailable) {
-            if (!data?.securityInfo?.x509Certificates) {
-                data.securityInfo.x509Certificates = [];
-            }
-            data.securityInfo.x509Certificates.push({})
-        }
-        return data;
-    },
+    parser: (data) => removeNull(data, true),
 
-    formatter: (changes, schema) => {
-        return changes;
-    },
+    formatter: (changes, schema) => changes,
 
     getValidators: (entityIdList) => {
         const validators = {
diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
index 9400e2d9d..4e4e219b2 100644
--- a/ui/src/app/metadata/editor/MetadataEditor.js
+++ b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -1,17 +1,24 @@
+import React from 'react';
 import { faCogs, faExclamationTriangle, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import React from 'react';
-import { useHistory, useParams } from 'react-router';
+import { useHistory, useParams, Prompt } from 'react-router';
+import Alert from 'react-bootstrap/Alert';
+
 import Translate from '../../i18n/components/translate';
 import { MetadataFormContext, setFormDataAction, setFormErrorAction } from '../hoc/MetadataFormContext';
 import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 
 import { MetadataEditorForm } from './MetadataEditorForm';
 import { MetadataEditorNav } from './MetadataEditorNav';
+import { useMetadataEntity } from '../hooks/api';
 
 export function MetadataEditor () {
 
     const { type, id, section } = useParams();
+
+    const { put, response } = useMetadataEntity(type, {}, []);
+
+    
     const history = useHistory();
     const definition = React.useContext(MetadataDefinitionContext);
     const schema = React.useContext(MetadataSchemaContext);
@@ -20,27 +27,45 @@ export function MetadataEditor () {
     const [saving] = React.useState(false);
 
     const { state, dispatch } = React.useContext(MetadataFormContext);
-    const { metadata, errors } = state;
+    const { metadata, errors} = state;
 
     const onChange = (changes) => {
         dispatch(setFormDataAction(changes.formData));
         dispatch(setFormErrorAction(section, changes.errors));
+        // setBlocking(true);
     };
 
-    const save = () => {
-        console.log('save!');
+    async function save(metadata) {
+        await put(`/${id}`, definition.parser(metadata));
+        if (response.ok) {
+            gotoDetail({ refresh: true });
+        }
     };
 
     const cancel = () => {
-        console.log('cancel!');
+        gotoDetail();
+    };
+
+    const gotoDetail = (state = null) => {
+        setBlocking(false);
+        history.push(`/metadata/${type}/${id}`, state);
     };
 
     const onNavigate = (path) => {
         history.push(path)
     };
 
+    const [blocking, setBlocking] = React.useState(false);
+
+
     return (
         <div className="container-fluid p-3">
+            <Prompt
+                when={blocking}
+                message={location =>
+                    `message.unsaved-editor`
+                }
+            />
             <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">
@@ -67,7 +92,7 @@ export function MetadataEditor () {
                         <div className="col-6 col-lg-3 order-2 text-right">
                             <button className="btn btn-info"
                                 type="button"
-                                onClick={() => save()}
+                                onClick={() => save(metadata)}
                                 disabled={invalid || saving}
                                 aria-label="Save changes to the metadata source. You will return to the dashboard">
                                     <FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={ saving } />&nbsp;
@@ -80,11 +105,12 @@ export function MetadataEditor () {
                                 <Translate value="action.cancel">Cancel</Translate>
                             </button>
                         </div>
-                        <div className="col-xs-12 col-lg-9 order-lg-1 order-3">
-                            {invalid && <div className="alert alert-danger alert-compact mt-3 mt-lg-0">
-                                <FontAwesomeIcon icon={faExclamationTriangle} aria-hidden="true" />
-                                <Translate value="message.editor-invalid">All forms must be valid before changes can be saved!</Translate>
-                            </div>}
+                        <div className="col-xs-12 col-lg-9 order-lg-1 order-3 align-items-start">
+                            {errors.length > 0 &&
+                                <Alert variant="danger" className="align-self-start alert-compact mt-3 mt-lg-0">
+                                    <p className="m-0"><FontAwesomeIcon icon={faExclamationTriangle} size="lg" className="mr-2" /> <Translate value="message.editor-invalid" /></p>
+                                </Alert>
+                            }
                         </div>
                     </div>
                     <hr />
diff --git a/ui/src/app/metadata/editor/MetadataEditorForm.js b/ui/src/app/metadata/editor/MetadataEditorForm.js
index 82bca797b..0f948ec1b 100644
--- a/ui/src/app/metadata/editor/MetadataEditorForm.js
+++ b/ui/src/app/metadata/editor/MetadataEditorForm.js
@@ -1,14 +1,24 @@
 import React from 'react';
 
 import Form from '@rjsf/bootstrap-4';
+import FormCheck from 'react-bootstrap/FormCheck';
 
 import { fields, widgets } from '../../form/component';
 import { templates } from '../../form/component';
 import { useUiSchema } from '../hooks/schema';
+import Alert from 'react-bootstrap/esm/Alert';
+
+const invisErrors = ['const', 'oneOf']
+
+function ErrorListTemplate () {
+    return (<></>);
+}
 
 export function MetadataEditorForm ({ metadata, definition, schema, current, onChange }) {
 
-    const uiSchema = useUiSchema(definition, schema, current);
+    const [locked, setLocked] = React.useState(true);
+
+    const {uiSchema, step} = useUiSchema(definition, schema, current, locked);
 
     const [data, setData] = React.useState(metadata);
 
@@ -16,23 +26,46 @@ export function MetadataEditorForm ({ metadata, definition, schema, current, onC
 
     const onSubmit = () => {};
 
-
+    const transformErrors = (errors) => {
+        return errors.filter(e => invisErrors.indexOf(e.name) === -1);
+    }
     return (
         <>
-            <Form formData={data}
-                noHtml5Validate={true}
-                onChange={(form) => onChange(form) }
-                onSubmit={() => onSubmit()}
-                schema={schema}
-                uiSchema={uiSchema}
-                FieldTemplate={templates.FieldTemplate}
-                ObjectFieldTemplate={templates.ObjectFieldTemplate}
-                ArrayFieldTemplate={templates.ArrayFieldTemplate}
-                fields={ fields }
-                widgets={widgets}
-                liveValidate={true}>
+            {step.locked && <div className="">
+                <div className="row">
+                    <div className="col-9">
+                        <Alert variant="danger" className="d-flex justify-content-between align-items-center font-weight-bold mb-3">
+                            <FormCheck
+                                type="switch"
+                                id="custom-switch"
+                                label={locked ? 'Locked' : 'Unlocked'}
+                                onChange={() => setLocked(!locked)}
+                                size="lg"
+                            />
+                            <span className="p-1">For Advanced Knowledge Only</span>
+                        </Alert>
+                    </div>
+                </div>
+            </div>}
+            <div className="container-fluid">
+                <Form formData={data}
+                    noHtml5Validate={true}
+                    onChange={(form) => onChange(form)}
+                    onSubmit={() => onSubmit()}
+                    schema={schema}
+                    uiSchema={uiSchema}
+                    FieldTemplate={templates.FieldTemplate}
+                    ObjectFieldTemplate={templates.ObjectFieldTemplate}
+                    ArrayFieldTemplate={templates.ArrayFieldTemplate}
+                    fields={fields}
+                    widgets={widgets}
+                    liveValidate={true}
+                    transformErrors={transformErrors}
+                    ErrorList={ErrorListTemplate}>
                     <></>
                 </Form>
+            </div>
+            
         </>
     );
 }
\ No newline at end of file
diff --git a/ui/src/app/metadata/editor/MetadataEditorNav.js b/ui/src/app/metadata/editor/MetadataEditorNav.js
index ecbc587b1..20e2a8565 100644
--- a/ui/src/app/metadata/editor/MetadataEditorNav.js
+++ b/ui/src/app/metadata/editor/MetadataEditorNav.js
@@ -11,9 +11,7 @@ export function MetadataEditorNav ({ definition, current, base, children, format
     const [routes, setRoutes] = React.useState([]);
     const [active, setActive] = React.useState(null);
 
-    const errors = usePagesWithErrors();
-
-    console.log(errors);
+    const errors = usePagesWithErrors(definition);
 
     React.useEffect(() => {
         setRoutes(definition ? definition.steps.map(step => ({ path: step.id, label: step.label })) : [])
diff --git a/ui/src/app/metadata/hoc/MetadataFormContext.js b/ui/src/app/metadata/hoc/MetadataFormContext.js
index 36db6a4ad..f7f9c2ef5 100644
--- a/ui/src/app/metadata/hoc/MetadataFormContext.js
+++ b/ui/src/app/metadata/hoc/MetadataFormContext.js
@@ -1,10 +1,15 @@
 import React from 'react';
+
+import uniq from 'lodash/uniq';
+import intersection from 'lodash/intersection';
+
 import { MetadataDefinitionContext } from './MetadataSchema';
 import { MetadataObjectContext } from './MetadataSelector';
 
+
 const initialState = {
     metadata: {},
-    errors: {}
+    errors: []
 };
 
 const MetadataFormContext = React.createContext();
@@ -16,13 +21,6 @@ export const MetadataFormActions = {
     SET_FORM_DATA: 'set form data'
 };
 
-export const updateFormDataAction = (payload) => {
-    return {
-        type: MetadataFormActions.UPDATE_FORM_DATA,
-        payload
-    }
-}
-
 export const setFormDataAction = (payload) => {
     return {
         type: MetadataFormActions.SET_FORM_DATA,
@@ -45,24 +43,13 @@ function reducer(state, action) {
         case MetadataFormActions.SET_FORM_ERROR:
             return {
                 ...state,
-                errors: {
-                    ...state.errors,
-                    [action.payload.page]: action.payload.errors
-                }
+                errors: action.payload.errors
             };
         case MetadataFormActions.SET_FORM_DATA:
             return {
                 ...state,
                 metadata: action.payload
             };
-        case MetadataFormActions.UPDATE_FORM_DATA:
-            return {
-                ...state,
-                metadata: action.payload.metadata,
-                errors: {
-                    ...action.payload.errors
-                }
-            };
         default:
             return state;
     }
@@ -89,15 +76,28 @@ function useFormErrors () {
     const { state } = React.useContext(MetadataFormContext);
     const { errors } = state;
 
-    console.log(errors)
-
     return errors;
 }
 
-function usePagesWithErrors() {
-    const errors = useFormErrors();
+function usePagesWithErrors(definition) {
+    const errorList = useFormErrors();
+    const erroredProperties = uniq(errorList.map((e) => {
+        let name = e.property.split('.').filter((p) => !!p && p !== "")[0];
+        if (name.indexOf('[')) {
+            name = name.split('[')[0];
+        }
+        return name;
+    }));
+
+    const pages = definition.steps.reduce((list, step) => {
+        const intersectionFields = intersection(step.fields, erroredProperties);
+        if (intersectionFields.length > 0) {
+            list = [...list, step.id];
+        }
+        return list;
+    }, []);
 
-    return Object.keys(errors).filter(p => errors[p] && Array.isArray(errors[p]) && errors[p].length > 0);
+    return pages;
 }
 
 function useFormattedMetadata() {
diff --git a/ui/src/app/metadata/hoc/MetadataSelector.js b/ui/src/app/metadata/hoc/MetadataSelector.js
index 88ebc82a1..91f9d3438 100644
--- a/ui/src/app/metadata/hoc/MetadataSelector.js
+++ b/ui/src/app/metadata/hoc/MetadataSelector.js
@@ -1,27 +1,32 @@
 import React from 'react';
-import { useParams } from 'react-router';
+import { useLocation, useParams } from 'react-router';
 import { useMetadataEntity } from '../hooks/api';
 
 export const MetadataTypeContext = React.createContext();
 export const MetadataObjectContext = React.createContext();
 
-
+/*eslint-disable react-hooks/exhaustive-deps*/
 export function MetadataSelector ({ children }) {
 
     let { type, id } = useParams();
+    const location = useLocation();
+
+    React.useEffect(() => {
+        if (location.state?.refresh) {
+            loadMetadata(id);
+        }
+    }, [location, id])
 
     const { get, response } = useMetadataEntity(type);
 
     const [metadata, setMetadata] = React.useState([]);
 
     async function loadMetadata(id) {
-        const source = await get(`/${id}`)
+        const source = await get(`/${id}`);
         if (response.ok) {
             setMetadata(source);
         }
     }
-
-    /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => { loadMetadata(id) }, [id]);
 
     return (
diff --git a/ui/src/app/metadata/hooks/schema.js b/ui/src/app/metadata/hooks/schema.js
index 8318ac39b..302c4819a 100644
--- a/ui/src/app/metadata/hooks/schema.js
+++ b/ui/src/app/metadata/hooks/schema.js
@@ -9,7 +9,7 @@ const fillInRootProperties = (keys, ui) => {
     }, ui);
 }
 
-export function useUiSchema(definition, schema, current) {
+export function useUiSchema(definition, schema, current, locked = true) {
 
     const ui = React.useMemo(() => definition ? { ...definition.uiSchema } : {}, [definition]);
     const schemaKeys = React.useMemo(() => schema ? Object.keys(schema.properties) : [], [schema]);
@@ -28,7 +28,14 @@ export function useUiSchema(definition, schema, current) {
         }, {})
     }, [filled, step]);
 
-    return mapped;
+    const isLocked = React.useMemo(() => {
+        return {
+            ...mapped,
+            'ui:disabled': locked && step.locked ? true : false
+        };
+    }, [mapped, step.locked, locked])
+
+    return {uiSchema: isLocked, step};
 }
 
 
diff --git a/ui/src/app/metadata/view/MetadataEdit.js b/ui/src/app/metadata/view/MetadataEdit.js
index 65fce53bf..cca87a56a 100644
--- a/ui/src/app/metadata/view/MetadataEdit.js
+++ b/ui/src/app/metadata/view/MetadataEdit.js
@@ -5,7 +5,7 @@ import { MetadataEditor } from '../editor/MetadataEditor';
 export function MetadataEdit() {
     return (
         <MetadataForm>
-        <MetadataEditor />
+            <MetadataEditor />
         </MetadataForm>
     );
 }
\ No newline at end of file
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 25b5754e0..d0a681d71 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -4235,6 +4235,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deep-object-diff@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
+  integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"