Implemented metadata editor

TIER · May 11, 2021 · 768f6a5 · 768f6a5
1 parent 8ff8d41
commit 768f6a5
Show file tree

Hide file tree

Showing 19 changed files with 252 additions and 138 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
+    );
+}
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 = {