From 0e0eff995a2ea0d7846b0bd435b6554c1239f0b9 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 30 Aug 2022 09:59:56 -0700
Subject: [PATCH 1/2] Added spinners

---
 .../app/admin/component/ConfigurationForm.js  | 11 ++++---
 .../app/admin/container/ConfigurationList.js  | 29 +++++++++++++------
 .../app/admin/container/EditConfiguration.js  | 22 ++++++++------
 3 files changed, 40 insertions(+), 22 deletions(-)

diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js
index e48062f01..61e82dba6 100644
--- a/ui/src/app/admin/component/ConfigurationForm.js
+++ b/ui/src/app/admin/component/ConfigurationForm.js
@@ -7,12 +7,12 @@ import { faSpinner, faSave, faTrash } from '@fortawesome/free-solid-svg-icons';
 import Translate from '../../i18n/components/translate';
 import PropertySelector from './PropertySelector';
 
-import { useProperties, usePropertiesLoading } from '../hoc/PropertiesProvider';
+import { useProperties } from '../hoc/PropertiesProvider';
 
 import Form from 'react-bootstrap/Form';
 import FloatingLabel from 'react-bootstrap/FloatingLabel';
 
-export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel }) {
+export function ConfigurationForm({ configuration = {}, loading, onSave, onCancel }) {
 
     const { control, register, getValues, watch, formState: { errors } } = useForm({
         defaultValues: {
@@ -26,7 +26,6 @@ export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel
     });
 
     const properties = useProperties();
-    const loading = usePropertiesLoading();
 
     const addProperties = (props) => {
         const parsed = props.reduce((coll, prop, idx) => {
@@ -52,6 +51,8 @@ export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel
         });
     };
 
+    React.useEffect(() => console.log(configuration), [configuration]);
+
     return (<>
         <div className="container-fluid">
             <div className="d-flex justify-content-end align-items-center">
@@ -66,7 +67,9 @@ export function ConfigurationForm({ configuration = {}, schema, onSave, onCancel
                     </Button>
                     <Button variant="secondary"
                         type="button"
-                        onClick={() => onCancel()} aria-label="Cancel changes, go back to dashboard">
+                        onClick={() => onCancel()}
+                        disabled={loading}
+                        aria-label="Cancel changes, go back to dashboard">
                         <Translate value="action.cancel">Cancel</Translate>
                     </Button>
                 </React.Fragment>
diff --git a/ui/src/app/admin/container/ConfigurationList.js b/ui/src/app/admin/container/ConfigurationList.js
index 4acffc1c2..527f65c50 100644
--- a/ui/src/app/admin/container/ConfigurationList.js
+++ b/ui/src/app/admin/container/ConfigurationList.js
@@ -1,15 +1,16 @@
 import React from 'react';
-import { faDownload, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faDownload, faEdit, faPlusCircle, faSpinner, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from 'react-bootstrap/Button';
+import ButtonGroup from 'react-bootstrap/ButtonGroup';
 import { Link } from 'react-router-dom';
 
 import { Translate } from '../../i18n/components/translate';
 
 import { DeleteConfirmation } from '../../core/components/DeleteConfirmation';
 
-export function ConfigurationList({ configurations, onDelete }) {
+export function ConfigurationList({ configurations, onDelete, loading }) {
 
     const remove = (id) => {
         onDelete(id);
@@ -19,6 +20,11 @@ export function ConfigurationList({ configurations, onDelete }) {
         <DeleteConfirmation title={`message.delete-property-title`} body={`message.delete-property-body`}>
             {(block) =>
                 <div className="container-fluid p-3">
+                    {loading ? 
+                        <div className="d-flex justify-content-end flex-fill">
+                            <FontAwesomeIcon icon={faSpinner} spin={true} pulse={true} size="lg" />
+                        </div>
+                    :
                     <section className="section">
                         <div className="section-body border border-top-0 border-primary">
                             <div className="section-header bg-primary p-2 text-light">
@@ -52,16 +58,20 @@ export function ConfigurationList({ configurations, onDelete }) {
                                                         </Link>
                                                     </td>
                                                     <td className="text-end">
-                                                        <React.Fragment>
-                                                            <Button onClick={() => console.log('clicked')} className={`btn btn-primary`}>
-                                                                <FontAwesomeIcon icon={faDownload} size="lg" />
-                                                                &nbsp; <Translate value="action.download">Download</Translate>
-                                                            </Button>
-                                                            <Button variant="danger" className="ms-2" onClick={() => block(() => remove(c.resourceId))}>
+                                                        <Button onClick={() => console.log('clicked')} className={`btn btn-success`}>
+                                                            <FontAwesomeIcon icon={faDownload} size="lg" />
+                                                            &nbsp; <Translate value="action.download">Download single file</Translate>
+                                                        </Button>
+                                                        <ButtonGroup aria-label="Actions" className="ms-4" >
+                                                            <Link className="btn btn-primary" to={`../configurations/${c.resourceId}/edit`}>
+                                                                <FontAwesomeIcon icon={faEdit} size="lg" />
+                                                                &nbsp; Edit
+                                                            </Link>
+                                                            <Button variant="danger"onClick={() => block(() => remove(c.resourceId))}>
                                                                 <FontAwesomeIcon icon={faTrash} size="lg" />
                                                                 &nbsp; <Translate value="action.delete">Delete</Translate>
                                                             </Button>
-                                                        </React.Fragment>
+                                                        </ButtonGroup>
                                                     </td>
                                                 </tr>
                                             ) : <tr>
@@ -73,6 +83,7 @@ export function ConfigurationList({ configurations, onDelete }) {
                             </div>
                         </div>
                     </section>
+                    }
                 </div>
             }
         </DeleteConfirmation>
diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js
index 7ff66b46d..692c353c9 100644
--- a/ui/src/app/admin/container/EditConfiguration.js
+++ b/ui/src/app/admin/container/EditConfiguration.js
@@ -10,6 +10,8 @@ import { createNotificationAction, NotificationTypes, useNotificationDispatcher
 import { useTranslator } from '../../i18n/hooks';
 import { BASE_PATH } from '../../App.constant';
 import { PropertiesProvider } from '../hoc/PropertiesProvider';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
 export function EditConfiguration() {
     const history = useHistory();
@@ -73,17 +75,19 @@ export function EditConfiguration() {
                     </div>
                 </div>
                 <div className="section-body p-4 border border-top-0 border-info">
+                    {loading ? 
+                    <div className="d-flex justify-content-end flex-fill">
+                        <FontAwesomeIcon icon={faSpinner} spin={true} pulse={true} size="lg" />
+                    </div>
+                    :
                     <PropertiesProvider>
-                        <Schema path={`/${BASE_PATH}assets/schema/configuration/configuration.json`}>
-                            {(schema) =>
-                                <ConfigurationForm
-                                    configuration={configuration}
-                                    schema={schema}
-                                    loading={loading}
-                                    onSave={(data) => save(data)}
-                                    onCancel={() => cancel()} />}
-                        </Schema>
+                        {configuration && <ConfigurationForm
+                            configuration={configuration}
+                            loading={loading}
+                            onSave={(data) => save(data)}
+                            onCancel={() => cancel()} /> }
                     </PropertiesProvider>
+                    }
                 </div>
             </section>
         </div>

From 0563ebdfc03b3c5f5adc08bc549e1334b28f4025 Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 30 Aug 2022 10:42:04 -0700
Subject: [PATCH 2/2] Fixed label

---
 backend/src/main/resources/i18n/messages.properties | 1 +
 ui/src/app/admin/container/EditConfiguration.js     | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/src/main/resources/i18n/messages.properties b/backend/src/main/resources/i18n/messages.properties
index ddfa6947f..19ab8999c 100644
--- a/backend/src/main/resources/i18n/messages.properties
+++ b/backend/src/main/resources/i18n/messages.properties
@@ -538,6 +538,7 @@ label.role=Role
 label.configuration-management=Manage Shibboleth configurations
 label.configuration-name=Shibboleth configuration sets
 label.new-configuration=Create new configuration set
+label.edit-configuration=Edit configuration set
 
 message.delete-role-title=Delete Role?
 
diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js
index 692c353c9..bad543b69 100644
--- a/ui/src/app/admin/container/EditConfiguration.js
+++ b/ui/src/app/admin/container/EditConfiguration.js
@@ -70,7 +70,7 @@ export function EditConfiguration() {
                 <div className="section-header bg-info p-2 text-white">
                     <div className="row justify-content-between">
                         <div className="col-md-12">
-                            <span className="lead"><Translate value="label.new-configuration">Create new configuration set</Translate></span>
+                            <span className="lead"><Translate value="label.edit-configuration">Edit configuration set</Translate></span>
                         </div>
                     </div>
                 </div>