Added source wizard

TIER · May 13, 2021 · bef53e2 · bef53e2
1 parent 0d22718
commit bef53e2
Show file tree

Hide file tree

Showing 26 changed files with 660 additions and 162 deletions.
diff --git a/ui/src/app/App.js b/ui/src/app/App.js
@@ -21,6 +21,7 @@ import { Notifications } from './notifications/hoc/Notifications';
 import { NotificationList } from './notifications/component/NotificationList';
 import { UserConfirmation, ConfirmWindow } from './core/components/UserConfirmation';
 import { NewSource } from './metadata/NewSource';
+import { NewProvider } from './metadata/NewProvider';
 
 
 
@@ -55,6 +56,7 @@ function App() {
                                                 </Route>
                                                 <Route path="/dashboard" component={Dashboard} />
                                                 <Route path="/metadata/source/new" component={NewSource} />
+                                                <Route path="/metadata/provider/new" component={NewProvider} />
                                                 <Route path="/metadata/:type/:id" component={Metadata} />
                                             </Switch>
                                             <NotificationList />
@@ -71,11 +73,4 @@ function App() {
         </div>
     );
 }
-
-/*
-<main >
-                    <page-title className="sr-only sr-only-focusable"></page-title>
-                </main>
-*/
-
 export default App;
diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
@@ -32,11 +32,11 @@ export function Header () {
                             <Translate value={'action.add-new'} />
                         </Dropdown.Toggle>
                         <Dropdown.Menu>
-                            <Link to="/metadata/source/new" className="dropdown-item text-primary">
+                            <Link to="/metadata/source/new" className="dropdown-item text-primary py-2">
                                 <FontAwesomeIcon icon={faCube} className="mr-2" />
                                 Metadata Source
                             </Link>
-                            <Link to="/metadata/provider/new" className="dropdown-item text-primary">
+                            <Link to="/metadata/provider/new" className="dropdown-item text-primary py-2">
                                 <FontAwesomeIcon icon={faCubes} className="mr-2" />
                                 Metadata Provider
                             </Link>
@@ -57,36 +57,4 @@ export function Header () {
     );
 }
 
-/*
-<li className="dropdown d-flex align-items-center"
-    ngbDropdown
-    placement="bottom-right"
-    #dropdown="ngbDropdown">
-    <button
-        className="btn btn-outline-primary btn-sm"
-        id="addNewDropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-        ngbDropdownToggle>
-        
-        
-    </button>
-    <div ngbDropdownMenu aria-labelledby="addNewDropdown">
-        <ng-container *ngFor="let action of nav$ | async">
-            <a href=""
-                className="nav-link"
-                (click)="action.action($event); dropdown.close()"
-                [attr.aria-label]="action.label | translate"
-                role="button">
-                <ng-container *ngIf="action.icon">
-                    <i className="fa fa-fw" [ngClass]="action.icon"></i>
-                    &nbsp;
-                </ng-container>
-                {{ action.content | translate }}
-            </a>
-        </ng-container>
-    </div>
-</li>
-*/
-
 export default Header;
diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
@@ -29,10 +29,17 @@ const TextWidget = ({
     const _onFocus = ({target: { value }} ) => onFocus(id, value);
     const inputType = (type || schema.type) === 'string' ? 'text' : `${type || schema.type}`;
 
+    const [touched, setTouched] = React.useState(false);
+
+    const onCustomBlur = (evt) => {
+        setTouched(true);
+        _onBlur(evt);
+    };
+
     // const classNames = [rawErrors.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (
         <Form.Group className="mb-0">
-            <Form.Label className={`${rawErrors.length > 0 ? "text-danger" : ""}`}>
+            <Form.Label className={`${rawErrors.length > 0 && touched ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
                     {(label || schema.title) && required ?
@@ -47,12 +54,12 @@ const TextWidget = ({
                 required={required}
                 disabled={disabled}
                 readOnly={readonly}
-                className={rawErrors.length > 0 ? "is-invalid" : ""}
+                className={rawErrors.length > 0 && touched ? "is-invalid" : ""}
                 list={schema.examples ? `examples_${id}` : undefined}
                 type={inputType}
                 value={value || value === 0 ? value : ""}
                 onChange={_onChange}
-                onBlur={_onBlur}
+                onBlur={onCustomBlur}
                 onFocus={_onFocus}
             />
             {schema.examples ? (

diff --git a/ui/src/app/i18n/context/I18n.provider.js b/ui/src/app/i18n/context/I18n.provider.js
@@ -25,7 +25,9 @@ function I18nProvider ({ children }) {
 
     const [messages, setMessages] = React.useState({});
     return (
-        <Provider value={messages}>{children}</Provider>
+        <>
+            {Object.keys(messages).length > 1 && <Provider value={messages}>{children}</Provider>}
+        </>
     );
 }
 

diff --git a/ui/src/app/metadata/NewProvider.js b/ui/src/app/metadata/NewProvider.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import Translate from '../i18n/components/translate';
+import { MetadataSchema } from './hoc/MetadataSchema';
+import { MetadataWizard } from './view/MetadataWizard';
+
+export function NewProvider() {
+
+    return (
+        <div className="container-fluid p-3">
+            <section className="section" aria-label="Add a new metadata source - how are you adding the metadata information?" 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"><Translate value="label.add-a-new-metadata-provider">Add a new metadata provider</Translate></span>
+                        </div>
+                    </div>
+                </div>
+                <div className="section-body p-4 border border-top-0 border-info">
+                    <MetadataSchema type={'provider'}>
+                        <MetadataWizard type="provider" />
+                    </MetadataSchema>
+                </div>
+            </section>
+        </div>
+    );
+}
diff --git a/ui/src/app/metadata/NewSource.js b/ui/src/app/metadata/NewSource.js
@@ -10,7 +10,9 @@ import { faCopy, faLink, faPlusSquare } from '@fortawesome/free-solid-svg-icons'
 
 export function NewSource() {
 
-    let { path } = useRouteMatch();
+    const { path } = useRouteMatch();
+
+    const [showNav, setShowNav] = React.useState(true);
 
     return (
         <div className="container-fluid p-3">
@@ -23,64 +25,66 @@ export function NewSource() {
                     </div>
                 </div>
                 <div className="section-body p-4 border border-top-0 border-info">
-                    <h3><Translate value="label.how-are-you-adding-the-metadata-information">How are you adding the metadata information?</Translate></h3>
-                    <br />
-                    <div className="row">
-                        <div className="col col-xl-6 col-lg-9 col-xs-12">
-                            <div className="d-flex justify-content-between">
-                                <div className="resolver-nav-option">
-                                    <NavLink type="button"
-                                        to="upload"
-                                        className="btn btn-lg btn-block btn-secondary d-flex flex-column justify-content-center align-items-center"
-                                        aria-label="Upload local metadata file or use a metadata URL"
-                                        role="button"
-                                        activeClassName='btn-success'>
-                                        <Translate value="label.upload-url">Upload/URL</Translate>
-                                        <FontAwesomeIcon icon={faLink} size="2x" />
-                                    </NavLink>
-                                </div>
-                                <div className="">
-                                    <span className="subheading-1">&nbsp;<Translate value="label.or">or</Translate>&nbsp;</span>
-                                </div>
-                                <div className="resolver-nav-option">
-                                    <NavLink type="button"
-                                        className="btn btn-lg btn-block btn-secondary d-flex flex-column justify-content-center align-items-center"
-                                        aria-label="Create metadata source using the wizard"
-                                        role="button"
-                                        to="blank"
-                                        activeClassName='btn-info'>
-                                        <Translate value="action.create">Create</Translate>
-                                        <FontAwesomeIcon icon={faPlusSquare} size="2x" />
-                                    </NavLink>
-                                </div>
-                                <div className="">
-                                    <span className="subheading-1">&nbsp;<Translate value="label.or">or</Translate>&nbsp;</span>
-                                </div>
-                                <div className="resolver-nav-option">
-                                    <NavLink type="button"
-                                        className="btn btn-lg btn-block btn-secondary d-flex flex-column justify-content-center align-items-center"
-                                        aria-label="Copy a metadata source"
-                                        role="button"
-                                        to="copy"
-                                        activeClassName='btn-warning'>
-                                        <Translate value="action.copy">Copy</Translate>
-                                        <FontAwesomeIcon icon={faCopy} size="2x"/>
-                                    </NavLink>
+                    {showNav && <>
+                        <h3><Translate value="label.how-are-you-adding-the-metadata-information">How are you adding the metadata information?</Translate></h3>
+                        <br />
+                        <div className="row">
+                            <div className="col col-xl-6 col-lg-9 col-xs-12">
+                                <div className="d-flex justify-content-between">
+                                    <div className="resolver-nav-option">
+                                        <NavLink type="button"
+                                            to="upload"
+                                            className="btn btn-lg btn-block btn-secondary d-flex flex-column justify-content-center align-items-center"
+                                            aria-label="Upload local metadata file or use a metadata URL"
+                                            role="button"
+                                            activeClassName='btn-success'>
+                                            <Translate value="label.upload-url">Upload/URL</Translate>
+                                            <FontAwesomeIcon icon={faLink} size="2x" />
+                                        </NavLink>
+                                    </div>
+                                    <div className="">
+                                        <span className="subheading-1">&nbsp;<Translate value="label.or">or</Translate>&nbsp;</span>
+                                    </div>
+                                    <div className="resolver-nav-option">
+                                        <NavLink type="button"
+                                            className="btn btn-lg btn-block btn-secondary d-flex flex-column justify-content-center align-items-center"
+                                            aria-label="Create metadata source using the wizard"
+                                            role="button"
+                                            to="blank"
+                                            activeClassName='btn-info'>
+                                            <Translate value="action.create">Create</Translate>
+                                            <FontAwesomeIcon icon={faPlusSquare} size="2x" />
+                                        </NavLink>
+                                    </div>
+                                    <div className="">
+                                        <span className="subheading-1">&nbsp;<Translate value="label.or">or</Translate>&nbsp;</span>
+                                    </div>
+                                    <div className="resolver-nav-option">
+                                        <NavLink type="button"
+                                            className="btn btn-lg btn-block btn-secondary d-flex flex-column justify-content-center align-items-center"
+                                            aria-label="Copy a metadata source"
+                                            role="button"
+                                            to="copy"
+                                            activeClassName='btn-warning'>
+                                            <Translate value="action.copy">Copy</Translate>
+                                            <FontAwesomeIcon icon={faCopy} size="2x"/>
+                                        </NavLink>
+                                    </div>
                                 </div>
+                                <hr />
                             </div>
-                            <hr />
                         </div>
-                    </div>
-                    <MetadataSchema type={'source'}>
+                    </>}
+                    <MetadataSchema type={'source'} wizard={true}>
                         <Switch>
                             <Route path={`${path}/blank`} render={() =>
-                                <MetadataWizard></MetadataWizard>
+                                <MetadataWizard type="source" onShowNav={(s) => { setShowNav(s) }} />
                             } />
                             <Route path={`${path}/upload`} render={() =>
-                                <MetadataUpload></MetadataUpload>
+                                <MetadataUpload />
                             } />
                             <Route path={`${path}/copy`} render={() =>
-                                <MetadataCopy></MetadataCopy>
+                                <MetadataCopy onShowNav={ (s) => { setShowNav(s) } } />
                             } />
                             <Redirect exact path={`${path}`} to={`${path}/blank`} />
                         </Switch>

diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js
@@ -56,7 +56,7 @@ export function CopySource({ copy, onNext }) {
 
     React.useEffect(() => {
         setValue('properties', selected);
-    }, [selected]);
+    }, [selected, setValue]);
 
     return (
         <>

diff --git a/ui/src/app/metadata/copy/SaveCopy.js b/ui/src/app/metadata/copy/SaveCopy.js
@@ -36,7 +36,7 @@ export function SaveCopy ({ copy, saving, onSave, onBack }) {
     const model = useCopiedModel(copy);
     const configuration = useCopiedConfiguration(model, schema, definition);
 
-    const { register, handleSubmit, getValues } = useForm({
+    const { register, handleSubmit } = useForm({
         mode: 'onChange',
         reValidateMode: 'onBlur',
         defaultValues: {

diff --git a/ui/src/app/metadata/domain/index.js b/ui/src/app/metadata/domain/index.js
@@ -1,18 +1,27 @@
 import { MetadataFilterEditorTypes } from './filter';
 import { MetadataProviderEditorTypes } from './provider';
-import { SourceEditor } from "./source/SourceDefinition";
+import { SourceEditor, SourceWizard } from "./source/SourceDefinition";
 
 export const editors = {
     source: SourceEditor
 };
 
+export const wizards = {
+    source: SourceWizard
+};
+
 export const ProviderEditorTypes = [
     ...MetadataProviderEditorTypes
 ];
 export const FilterEditorTypes = [
     ...MetadataFilterEditorTypes
 ];
 
+export const getWizard = (type) =>
+    ProviderEditorTypes.find(def => def.type === type) ||
+    FilterEditorTypes.find(def => def.type === type) ||
+    SourceWizard;
+
 export const getDefinition = (type) =>
     ProviderEditorTypes.find(def => def.type === type) ||
     FilterEditorTypes.find(def => def.type === type) ||

diff --git a/ui/src/app/metadata/domain/provider/BaseProviderDefinition.js b/ui/src/app/metadata/domain/provider/BaseProviderDefinition.js
@@ -59,15 +59,15 @@ export const HttpMetadataResolverAttributesSchema = {
         groups: [
             {
                 title: 'label.http-security-attributes',
-                classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                 size: 12,
                 fields: [
                     'disregardTLSCertificate'
                 ]
             },
             {
                 title: 'label.http-connection-attributes',
-                classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                 size: 12,
                 fields: [
                     'connectionRequestTimeout',
@@ -77,7 +77,7 @@ export const HttpMetadataResolverAttributesSchema = {
             },
             {
                 title: 'label.http-proxy-attributes',
-                classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                 size: 12,
                 fields: [
                     'proxyHost',
@@ -88,7 +88,7 @@ export const HttpMetadataResolverAttributesSchema = {
             },
             {
                 title: 'label.http-caching-attributes',
-                classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                 size: 12,
                 fields: [
                     'httpCaching',
@@ -153,7 +153,7 @@ export const MetadataFilterPluginsSchema = {
     'ui:title': false,
     items: {
         'ui:options': {
-            classNames: 'bg-light border rounded px-4 pt-4 pb-1'
+            classNames: 'bg-light border rounded px-4 pt-4 pb-3'
         },
         '@type': {
             'ui:widget': 'hidden'

diff --git a/ui/src/app/metadata/domain/provider/DynamicHttpMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/DynamicHttpMetadataProviderDefinition.js
@@ -57,7 +57,7 @@ export const DynamicHttpMetadataProviderWizard = {
             groups: [
                 {
                     size: 9,
-                    classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                    classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
                         '@type',

diff --git a/ui/src/app/metadata/domain/provider/FileBackedHttpMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/FileBackedHttpMetadataProviderDefinition.js
@@ -61,7 +61,7 @@ export const FileBackedHttpMetadataProviderWizard = {
             groups: [
                 {
                     size: 9,
-                    classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                    classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
                         '@type',

diff --git a/ui/src/app/metadata/domain/provider/FileSystemMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/FileSystemMetadataProviderDefinition.js
@@ -74,7 +74,7 @@ export const FileSystemMetadataProviderWizard = {
             groups: [
                 {
                     size: 9,
-                    classNames: 'bg-light border rounded px-4 pt-4 pb-1 mb-4',
+                    classNames: 'bg-light border rounded px-4 pt-4 pb-3 mb-4',
                     fields: [
                         'name',
                         '@type',