From ae463d006904b6a8ea7e9da3c0987712dce2a5b5 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Wed, 23 Jun 2021 09:59:42 -0700
Subject: [PATCH] Added restoration confirmation page

---
 ui/src/app/core/components/FormattedDate.js   | 11 ++-
 ui/src/app/metadata/Metadata.js               |  6 +-
 .../app/metadata/hoc/MetadataVersionLoader.js | 10 +--
 .../metadata/view/MetadataConfirmRestore.js   | 70 +++++++++++++++++++
 ui/src/app/metadata/view/MetadataRestore.js   |  6 +-
 ui/src/app/metadata/view/MetadataVersion.js   | 11 ++-
 6 files changed, 100 insertions(+), 14 deletions(-)
 create mode 100644 ui/src/app/metadata/view/MetadataConfirmRestore.js

diff --git a/ui/src/app/core/components/FormattedDate.js b/ui/src/app/core/components/FormattedDate.js
index e9298af73..4d74cc26d 100644
--- a/ui/src/app/core/components/FormattedDate.js
+++ b/ui/src/app/core/components/FormattedDate.js
@@ -1,8 +1,17 @@
 import React from 'react';
 import { format, parseISO } from 'date-fns';
 
+export function useDateFormatter() {
+    return (date, time) => format(parseISO(date), `MMM d, Y${time ? ' HH:mm:ss' : ''}`);
+}
+
+export function useFormattedDate (date, time = false) {
+    const formatter = useDateFormatter();
+    return React.useMemo(() => formatter(date, time), [date, time, formatter]);
+}
+
 export function FormattedDate ({ date, time = false }) {
-    const formatted = React.useMemo(() => format(parseISO(date), `MMM d, Y${time ? ' HH:mm:ss' : ''}`), [date, time]);
+    const formatted = useFormattedDate(date, time);
 
     return (<>{ formatted }</>);
 }
diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
index a9ff0b182..0d1e38b07 100644
--- a/ui/src/app/metadata/Metadata.js
+++ b/ui/src/app/metadata/Metadata.js
@@ -11,6 +11,7 @@ import { MetadataComparison } from './view/MetadataComparison';
 import { MetadataVersion } from './view/MetadataVersion';
 import { MetadataEdit } from './view/MetadataEdit';
 import { MetadataRestore } from './view/MetadataRestore';
+import { MetadataConfirmRestore } from './view/MetadataConfirmRestore';
 
 export function Metadata () {
 
@@ -51,7 +52,10 @@ export function Metadata () {
                             <Route path={`${path}/edit/:section`} render={ () =>
                                 <MetadataEdit />
                             } />
-                            <Route path={`${path}/restore/:versionId/:section`} render={ () =>
+                            <Route path={`${path}/restore/:versionId/:section`} exact render={ () =>
+                                <MetadataConfirmRestore />
+                            } />
+                            <Route path={`${path}/restore/:versionId/:section/edit`} render={ () =>
                                 <MetadataRestore />
                             } />
                             <Redirect exact path={`${path}`} to={`${path}/configuration/options`} />
diff --git a/ui/src/app/metadata/hoc/MetadataVersionLoader.js b/ui/src/app/metadata/hoc/MetadataVersionLoader.js
index b14e0f59a..e1d17747d 100644
--- a/ui/src/app/metadata/hoc/MetadataVersionLoader.js
+++ b/ui/src/app/metadata/hoc/MetadataVersionLoader.js
@@ -12,9 +12,7 @@ export function MetadataVersionLoader({children}) {
 
     const [metadata, setMetadata] = React.useState();
 
-    const { get, response } = useMetadataEntity(type, {
-        cachePolicy: 'no-cache',
-    }, []);
+    const { get, response, loading } = useMetadataEntity(type, {}, []);
 
     async function loadVersion(v) {
         const l = await get(`/${id}/Versions/${v}`);
@@ -29,10 +27,6 @@ export function MetadataVersionLoader({children}) {
     }, [versionId]);
 
     return (
-        <>
-            {metadata &&
-                <Provider value={metadata}>{children(metadata)}</Provider>
-            }
-        </>
+        <Provider value={metadata}>{children(metadata, loading)}</Provider>
     );
 }
diff --git a/ui/src/app/metadata/view/MetadataConfirmRestore.js b/ui/src/app/metadata/view/MetadataConfirmRestore.js
new file mode 100644
index 000000000..abf791fbb
--- /dev/null
+++ b/ui/src/app/metadata/view/MetadataConfirmRestore.js
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { MetadataVersionLoader } from '../hoc/MetadataVersionLoader';
+import { Translate } from '../../i18n/components/translate';
+import { useDateFormatter } from '../../core/components/FormattedDate';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function MetadataConfirmRestore () {
+
+    const formatter = useDateFormatter();
+
+    return (
+        <MetadataVersionLoader>
+            {(metadata, loading) =>
+                <div className="container-fluid p-3">
+                    <section className="section" tabIndex="0">
+                        <div className="section-body px-4 pb-4 border border-info">
+                            <nav aria-label="breadcrumb">
+                                <ol className="breadcrumb breadcrumb-bar">
+                                    <li className="breadcrumb-item">
+                                        <Link to="/dashboard"><Translate value="action.dashboard">Dashboard</Translate></Link>
+                                    </li>
+                                    <li className="breadcrumb-item active" aria-current="page">
+                                        <span className="display-6">
+                                            {metadata && (metadata.name || metadata.serviceProviderName)}
+                                        </span>
+                                    </li>
+                                </ol>
+                            </nav>
+                            <>{loading ?
+                                <div className="d-flex justify-content-center">
+                                    <FontAwesomeIcon icon={faSpinner} pulse size="4x" />
+                                    <span className="sr-only">Loading...</span>
+                                </div>
+                                :
+                                <>{metadata &&
+                                    <>
+                                    <h2 className="mb-4">
+                                        <Translate value="label.restore-version" params={{ date: formatter(metadata.modifiedDate, true) }}>
+                                            Restore Version ( date )
+                                        </Translate>
+                                    </h2>
+                                    <div className="d-flex justify-content-center align-items-center">
+                                        <div className="card m-4 w-50">
+                                            <div className="card-body">
+                                                <h3 className="card-title">
+                                                    <Translate value="message.create-new-version-from-version">Create New Version from Previous Settings</Translate>
+                                                </h3>
+                                                <p><Translate value="message.restoring-this-version-will-copy" params={{ date: formatter(metadata.modifiedDate, true) }}>
+                                                    Restoring this version will copy the Version ( date ) configuration and create a new Version from the selected version settings. You can then edit the configuration before saving the new version.</Translate>
+                                                </p>
+                                                <Link className="btn btn-light mr-2" to={`../../configuration/history`}><Translate value="action.cancel">Cancel</Translate></Link>
+                                                <Link className="btn btn-primary" to={`./common/edit`}><Translate value="action.restore">Restore</Translate></Link>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    </>
+                                }</>
+                                }
+                            </>
+                                
+                            
+                        </div>
+                    </section>
+                </div>
+            }
+        </MetadataVersionLoader>
+    )
+}
\ No newline at end of file
diff --git a/ui/src/app/metadata/view/MetadataRestore.js b/ui/src/app/metadata/view/MetadataRestore.js
index 9511c4c92..3dd257d4d 100644
--- a/ui/src/app/metadata/view/MetadataRestore.js
+++ b/ui/src/app/metadata/view/MetadataRestore.js
@@ -10,7 +10,8 @@ export function MetadataRestore() {
 
     return (
         <MetadataVersionLoader>
-            {(metadata) =>
+            {(metadata, loading) => <>
+                {metadata &&
                 <MetadataForm initial={{
                     ...metadata,
                     version: latest.version
@@ -20,7 +21,8 @@ export function MetadataRestore() {
                         version: latest.version
                     }} />
                 </MetadataForm>
-            }
+                }
+            </>}
         </MetadataVersionLoader>
     );
 }
diff --git a/ui/src/app/metadata/view/MetadataVersion.js b/ui/src/app/metadata/view/MetadataVersion.js
index 3bde185fa..16fda5c3e 100644
--- a/ui/src/app/metadata/view/MetadataVersion.js
+++ b/ui/src/app/metadata/view/MetadataVersion.js
@@ -5,7 +5,7 @@ import { Configuration } from '../hoc/Configuration';
 import { MetadataConfiguration } from '../component/MetadataConfiguration';
 import { Link, useParams } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowUp, faHistory, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faArrowUp, faHistory, faPlus, faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 import { scroller } from 'react-scroll';
 
@@ -35,7 +35,13 @@ export function MetadataVersion() {
 
     return (
         <MetadataVersionLoader>
-            {(metadata) =>
+            {(metadata, loading) =>
+                <>
+                    {loading && <div className="d-flex justify-content-center">
+                        <FontAwesomeIcon icon={faSpinner} pulse size="4x" />
+                        <span className="sr-only">Loading...</span>
+                    </div>}
+                {metadata &&
                 <Configuration entities={[metadata]} schema={processed} definition={definition}>
                     {(config) =>
                         <>
@@ -87,6 +93,7 @@ export function MetadataVersion() {
                         </>
                     }
                 </Configuration>
+                }</>
             }
         </MetadataVersionLoader>
     );