Implemented create from url

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

Hide file tree

Showing 4 changed files with 58 additions and 30 deletions.
diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js
@@ -188,6 +188,17 @@ export function CopySource({ copy, onNext }) {
                         </tbody>
                     </table>
                 </div>
+                <button className="nav-link next btn d-flex justify-content-between align-items-start sr-only"
+                    onClick={() => onNext(getValues())}
+                    disabled={!isValid}
+                    aria-label="Next: Step 2, Organization information"
+                    type="button">
+                    <span className="label">
+                        <Translate value="label.finish-summary-validation">
+                            Finished!
+                                    </Translate>
+                    </span>
+                </button>
             </div>
         </>
     );

diff --git a/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js b/ui/src/app/metadata/domain/source/component/DeleteSourceConfirmation.js
@@ -38,7 +38,7 @@ export function DeleteSourceConfirmation ({children}) {
         <>
             {children(onDeleteSource)}
             <Modal show={!!deleting} onHide={() => setDeleting(null)}>
-                <Modal.Header toggle={() => setDeleting(null)}><Translate value="message.delete-source-title">Delete Metadata Source?</Translate></Modal.Header>
+                <Modal.Header><Translate value="message.delete-source-title">Delete Metadata Source?</Translate></Modal.Header>
                 <Modal.Body className="d-flex align-content-center">
                     <FontAwesomeIcon className="text-danger mr-4" size="4x" icon={faExclamationTriangle} />
                     <p className="text-danger font-weight-bold mb-0">

diff --git a/ui/src/app/metadata/view/MetadataCopy.js b/ui/src/app/metadata/view/MetadataCopy.js
@@ -1,11 +1,7 @@
 import React from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowCircleRight } from '@fortawesome/free-solid-svg-icons';
-
-import { Translate } from '../../i18n/components/translate';
 import { MetadataSchema } from '../hoc/MetadataSchema';
 
-import {CopySource} from '../copy/CopySource';
+import { CopySource } from '../copy/CopySource';
 import { SaveCopy } from '../copy/SaveCopy';
 import { useMetadataEntity } from '../hooks/api';
 import { useHistory } from 'react-router';

diff --git a/ui/src/app/metadata/view/MetadataUpload.js b/ui/src/app/metadata/view/MetadataUpload.js
@@ -4,7 +4,7 @@ import { useForm } from "react-hook-form";
 import { useHistory } from 'react-router-dom';
 
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import { faAsterisk, faSave } from '@fortawesome/free-solid-svg-icons';
+import { faAsterisk, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 import Translate from '../../i18n/components/translate';
 import { readFileContents } from '../../core/utility/read_file_contents';
@@ -18,26 +18,42 @@ export function MetadataUpload() {
     const history = useHistory();
     const dispatch = useNotificationDispatcher();
 
+    const [saving, setSaving] = React.useState(false);
+
     async function save({serviceProviderName, file, url}) {
-        const f = file.length > 0 ? file[0] : null;
+
+        setSaving(true);
+
+        const f = file?.length > 0 ? file[0] : null;
+
+        let body = '';
+        let type = '';
+
         if (f) {
-            const body = await readFileContents(f);
-            const response = await fetch(`${API_BASE_PATH}${getMetadataPath('source')}?spName=${serviceProviderName}`, {
-                method: 'POST',
-                cache: 'no-cache',
-                headers: {
-                    'Content-Type': 'application/xml',
-                    'X-XSRF-TOKEN': get_cookie('XSRF-TOKEN')
-                },
-                body
-            });
-
-            if (response.ok) {
-                history.push('/dashboard');
-            } else {
-                const message = await response.json();
-                dispatch(createNotificationAction(`${message.errorCode}: Unable to upload file ... ${message.errorMessage}`, 'danger', 5000));
-            }
+            body = await readFileContents(f);
+            type = 'application/xml';
+        } else if (url) {
+            body = `metadataUrl=${url}`;
+            type = 'application/x-www-form-urlencoded';
+        }
+
+        const response = await fetch(`${API_BASE_PATH}${getMetadataPath('source')}?spName=${serviceProviderName}`, {
+            method: 'POST',
+            cache: 'no-cache',
+            headers: {
+                'Content-Type': type,
+                'X-XSRF-TOKEN': get_cookie('XSRF-TOKEN')
+            },
+            body
+        });
+
+        if (response.ok) {
+            setSaving(false);
+            history.push('/dashboard');
+        } else {
+            const message = await response.json();
+            dispatch(createNotificationAction(`${message.errorCode}: Unable to create file ... ${message.errorMessage}`, 'danger', 5000));
+            setSaving(false);
         }
     }
 
@@ -54,13 +70,11 @@ export function MetadataUpload() {
 
     const { errors, isValid } = formState;
 
-    // React.useEffect(() => console.log(formState), [formState]);
+    React.useEffect(() => console.log(isValid), [isValid]);
 
     const watchFile = watch('file');
     const watchUrl = watch('url');
 
-    // console.log(watchFile, errors);
-
     return (
         <div className="row">
             <div className="col col-xl-6 col-lg-9 col-xs-12">
@@ -82,7 +96,7 @@ export function MetadataUpload() {
                                     </Translate>
                                 </span>
                                 <span className="direction d-flex flex-column align-items-center">
-                                    <FontAwesomeIcon icon={faSave} className="d-block" size="2x" />
+                                    <FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={saving} size="2x" />
                                     <Translate value="action.save">Save</Translate>
                                 </span>
                             </button>
@@ -124,12 +138,19 @@ export function MetadataUpload() {
                         </div>
                         <div className="form-group">
                             <label><Translate value="label.service-resolver-metadata-url" for="url">Service Resolver Metadata URL</Translate></label>
-                            <input id="url" disabled={ watchFile && watchFile.length > 0 } type="text" className="form-control" placeholder="" {...register('url')} />
+                            <input id="url" disabled={ watchFile && watchFile.length > 0 } type="text" className="form-control"{...register('url')} />
                         </div>
                         <div className="alert alert-danger" role="alert">
                             <span><Translate value="message.file-upload-alert">Note: You can only import a file with a single entityID (EntityDescriptor element) in it. Anything more in that file will result in an error.</Translate></span>
                         </div>
                     </fieldset>
+                    <button className="nav-link next btn d-flex justify-content-between align-items-start sr-only"
+                        disabled={!isValid}
+                        aria-label="Save metadata resolver">
+                        <span className="label">
+                            <Translate value="action.save">Save</Translate>
+                        </span>
+                    </button>
                 </form>
             </div>
         </div>