From d02ebe88ffecc721fc038c523e15cc68db80405e Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 13 May 2021 08:27:58 -0700
Subject: [PATCH] Implemented copy

---
 ui/src/app/form/component/InfoIcon.js    |   4 +-
 ui/src/app/metadata/copy/CopySource.js   |  14 ++-
 ui/src/app/metadata/copy/SaveCopy.js     | 107 +++++++++++++++++++++--
 ui/src/app/metadata/view/MetadataCopy.js |  40 ++++++---
 4 files changed, 136 insertions(+), 29 deletions(-)

diff --git a/ui/src/app/form/component/InfoIcon.js b/ui/src/app/form/component/InfoIcon.js
index da27ca22f..5e0ba1b0f 100644
--- a/ui/src/app/form/component/InfoIcon.js
+++ b/ui/src/app/form/component/InfoIcon.js
@@ -5,9 +5,9 @@ import Popover from 'react-bootstrap/Popover';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Translate from '../../i18n/components/translate';
 
-export function InfoIcon ({ value, ...props }) {
+export function InfoIcon ({ value, placement='left', ...props }) {
     return(
-        <OverlayTrigger trigger={['hover', 'focus']} placement="left" overlay={(
+        <OverlayTrigger trigger={['hover', 'focus']} placement={placement} overlay={(
             <Popover variant="info">
                 <Popover.Content><Translate value={value} /></Popover.Content>
             </Popover>
diff --git a/ui/src/app/metadata/copy/CopySource.js b/ui/src/app/metadata/copy/CopySource.js
index 19f40a821..99ce15bbf 100644
--- a/ui/src/app/metadata/copy/CopySource.js
+++ b/ui/src/app/metadata/copy/CopySource.js
@@ -6,9 +6,10 @@ import { faArrowCircleRight, faAsterisk, faCheck, faTimes } from '@fortawesome/f
 
 import { Translate } from '../../i18n/components/translate';
 import { EntityTypeahead } from './EntityTypeahead';
+import kebabCase from 'lodash/kebabCase';
 
 const sections = [
-    { i18nKey: 'organizationInfo', property: 'organization' },
+    { i18nKey: 'organizationInformation', property: 'organization' },
     { i18nKey: 'contacts', property: 'contacts' },
     { i18nKey: 'uiMduiInfo', property: 'mdui' },
     { i18nKey: 'spSsoDescriptorInfo', property: 'serviceProviderSsoDescriptor' },
@@ -19,9 +20,9 @@ const sections = [
     { i18nKey: 'attributeRelease', property: 'attributeRelease' }
 ];
 
-export function CopySource({ onNext }) {
+export function CopySource({ copy, onNext }) {
 
-    const [selected, setSelected] = React.useState([]);
+    const [selected, setSelected] = React.useState(copy.properties);
     const onSelect = (item, checked) => {
         let s = [...selected];
         if (checked) {
@@ -42,10 +43,7 @@ export function CopySource({ onNext }) {
         mode: 'onChange',
         reValidateMode: 'onBlur',
         defaultValues: {
-            target: null,
-            serviceProviderName: null,
-            entityId: null,
-            properties: selected
+            ...copy
         },
         resolver: undefined,
         context: undefined,
@@ -157,7 +155,7 @@ export function CopySource({ onNext }) {
                         <tbody>
                             {sections.map((item, i) =>
                                 <tr key={i}>
-                                    <td><label className="mb-0" htmlFor={`property-checkbox-${i}`}><Translate value={item.i18nKey} /></label></td>
+                                    <td><label className="mb-0" htmlFor={`property-checkbox-${i}`}><Translate value={`label.${kebabCase(item.i18nKey)}`} /></label></td>
                                     <td>
                                         <Check
                                             custom
diff --git a/ui/src/app/metadata/copy/SaveCopy.js b/ui/src/app/metadata/copy/SaveCopy.js
index afac0d6cb..09e607c6b 100644
--- a/ui/src/app/metadata/copy/SaveCopy.js
+++ b/ui/src/app/metadata/copy/SaveCopy.js
@@ -1,26 +1,119 @@
 import React from 'react';
+import Check from 'react-bootstrap/FormCheck';
+import { faArrowCircleLeft, faCheck, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useForm } from 'react-hook-form';
+
 import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 import { useMetadataConfiguration } from '../hooks/configuration';
 import { removeNull } from '../../core/utility/remove_null';
 
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
+import Translate from '../../i18n/components/translate';
+
+import { InfoIcon } from '../../form/component/InfoIcon';
 
-export function useCopiedConfiguration(copy, schema, definition) {
+
+export function useCopiedModel (copy) {
     const { properties, target, serviceProviderName, entityId } = copy;
     const copied = removeNull(properties.reduce((c, section) => ({ ...c, ...{ [section]: target[section] } }), {}));
-    const model = [{
+    const model = {
         serviceProviderName,
         entityId,
         ...copied
-    }];
-    return useMetadataConfiguration(model, schema, definition);
+    };
+    return model;
+}
+
+export function useCopiedConfiguration(model, schema, definition) {
+    return useMetadataConfiguration([model], schema, definition);
 }
 
-export function SaveCopy ({ copy }) {
+export function SaveCopy ({ copy, saving, onSave, onBack }) {
     const definition = React.useContext(MetadataDefinitionContext);
     const schema = React.useContext(MetadataSchemaContext);
 
-    const configuration = useCopiedConfiguration(copy, schema, definition);
+    const model = useCopiedModel(copy);
+    const configuration = useCopiedConfiguration(model, schema, definition);
+
+    const { register, handleSubmit, getValues } = useForm({
+        mode: 'onChange',
+        reValidateMode: 'onBlur',
+        defaultValues: {
+            serviceEnabled: false
+        },
+        resolver: undefined,
+        context: undefined,
+        criteriaMode: "firstError",
+        shouldFocusError: true,
+        shouldUnregister: false,
+    });
+
+    const onFinish = (data) => {
+        onSave({
+            ...model,
+            ...data
+        })
+    };
+
+    return (
+    <>
+            <div className="row">
+                <div className="col col-xs-12 col-xl-6">
+                    <ul className="nav nav-wizard m-3">
+                        <li className="nav-item">
+                            <button type="button" className="nav-link previous btn d-flex justify-content-between align-items-start" onClick={onBack}>
+                                <span className="direction d-flex flex-column align-items-center">
+                                    <FontAwesomeIcon icon={faArrowCircleLeft} size="2x" />
+                                    <Translate value="action.back">Back</Translate>
+                                </span>
+                                <span className="label">
+                                    <Translate value="label.name-and-entityid">
+                                    Name and Entity ID.
+                                    </Translate>
+                                </span>
+                            </button>
+                        </li>
+                        <li className="nav-item">
+                            <h3 className="tag tag-primary">
+                                <span className="index">
+                                    <FontAwesomeIcon icon={faCheck} />
+                                </span>
+                                <Translate value="label.finish-summary-validation">Finished!</Translate>
+                            </h3>
+                        </li>
+                        <li className="nav-item">
+                            <button className="nav-link save btn d-flex justify-content-between align-items-start" aria-label="Save" onClick={() => handleSubmit(onFinish)()} type="button">
+                                <span className="label"><Translate value="action.save">Save</Translate></span>
+                                <span className="direction d-flex flex-column align-items-center">
+                                    <FontAwesomeIcon icon={saving ? faSpinner : faSave} pulse={saving} size="2x" />
+                                    <Translate value="action.save">Save</Translate>
+                                </span>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <form onSubmit={ handleSubmit(onFinish) }>
+                <div className="row">
+                    <fieldset className="col-xl-6 form-section">
+                        <section className="entity-section">
+                            <div className="form-group d-flex">
+                                <label htmlFor="serviceEnabled" className="mr-2"><Translate value="label.enable-this-service" /></label>
+                                <Check custom
+                                    id="serviceEnabled"
+                                    className="mr-2"
+                                    type={'checkbox'}
+                                    {...register('serviceEnabled')}
+                                />
+                                <InfoIcon value={`tooltip.enable-this-service-upon-saving`} placement="right" />
+                            </div>
+                        </section>
+                    </fieldset>
+                </div>
+            </form>
 
-    return (<MetadataConfiguration configuration={configuration} />);
+        <MetadataConfiguration configuration={configuration} />
+    </>
+    );
 }
\ No newline at end of file
diff --git a/ui/src/app/metadata/view/MetadataCopy.js b/ui/src/app/metadata/view/MetadataCopy.js
index 03031cad8..bc2c19f79 100644
--- a/ui/src/app/metadata/view/MetadataCopy.js
+++ b/ui/src/app/metadata/view/MetadataCopy.js
@@ -7,32 +7,48 @@ import { MetadataSchema } from '../hoc/MetadataSchema';
 
 import {CopySource} from '../copy/CopySource';
 import { SaveCopy } from '../copy/SaveCopy';
+import { useMetadataEntity } from '../hooks/api';
+import { useHistory } from 'react-router';
 
 export function MetadataCopy () {
 
+    const { post, response, loading } = useMetadataEntity('source');
+    const history = useHistory();
+
+    const [copy, setCopy] = React.useState({
+        target: null,
+        serviceProviderName: null,
+        entityId: null,
+        properties: []
+    });
+    const [confirm, setConfirm] = React.useState(false);
+
     const next = (data) => {
         setCopy(data);
+        setConfirm(true)
+    };
+
+    const back = (data) => {
+        setConfirm(false);
     };
 
-    const [copy, setCopy] = React.useState();
+    async function save (data) {
+        await post('', data);
+        if (response.ok) {
+            history.push('/');
+        }
+    }
 
     return (
         <React.Fragment>
-            {!copy && 
-            <CopySource onNext={next} />
+            {!confirm && 
+            <CopySource copy={copy} onNext={next} />
             }
-            {copy &&
+            {confirm && copy &&
                 <MetadataSchema type="source">
-                    <SaveCopy copy={copy} />
+                    <SaveCopy copy={copy} onBack={back} onSave={save} saving={loading} />
                 </MetadataSchema>
             }
-            <button type="button"
-                className="btn btn-primary sr-only"
-                disabled={!copy}
-                onClick={() => next()}>
-                <Translate value="action.next">Next</Translate>
-                <FontAwesomeIcon icon={faArrowCircleRight} size="lg" />
-            </button>
         </React.Fragment>
     );
 }
\ No newline at end of file