From 86e0b01be6fee4826c934eca704113bd4c7d621f Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Tue, 23 Aug 2022 10:35:56 -0700
Subject: [PATCH] Updated POC

Former-commit-id: f7ef7669f75f2cc4e0ebf4bf4c0bf978e64387ba
---
 ui/public/assets/data/configurations.json     |  6 +++
 ui/public/assets/data/properties.json         |  1 -
 ui/src/app/admin/IdpConfiguration.js          |  4 +-
 .../app/admin/component/ConfigurationForm.js  | 48 +++++++++++--------
 .../app/admin/container/ConfigurationList.js  | 16 +++----
 .../app/admin/hoc/ConfigurationsProvider.js   |  2 +-
 ui/src/app/admin/hooks.js                     |  2 +-
 7 files changed, 47 insertions(+), 32 deletions(-)
 create mode 100644 ui/public/assets/data/configurations.json
 delete mode 100644 ui/public/assets/data/properties.json

diff --git a/ui/public/assets/data/configurations.json b/ui/public/assets/data/configurations.json
new file mode 100644
index 000000000..82d601b1e
--- /dev/null
+++ b/ui/public/assets/data/configurations.json
@@ -0,0 +1,6 @@
+[
+    {
+        "resourceId": "foo",
+        "name": "Configuration 1"
+    }
+]
\ No newline at end of file
diff --git a/ui/public/assets/data/properties.json b/ui/public/assets/data/properties.json
deleted file mode 100644
index 0637a088a..000000000
--- a/ui/public/assets/data/properties.json
+++ /dev/null
@@ -1 +0,0 @@
-[]
\ No newline at end of file
diff --git a/ui/src/app/admin/IdpConfiguration.js b/ui/src/app/admin/IdpConfiguration.js
index 621b54e71..6f774d9ea 100644
--- a/ui/src/app/admin/IdpConfiguration.js
+++ b/ui/src/app/admin/IdpConfiguration.js
@@ -14,8 +14,8 @@ export function IdpConfiguration() {
             <Switch>
                 <Route path={`${path}/list`} render={() =>
                     <ConfigurationsProvider>
-                        {(properties, onDelete) =>
-                            <ConfigurationList properties={properties} onDelete={onDelete} />
+                        {(configurations, onDelete) =>
+                            <ConfigurationList configurations={configurations} onDelete={onDelete} />
                         }
                     </ConfigurationsProvider>
                 } />
diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js
index 7229a27c3..3f30f6445 100644
--- a/ui/src/app/admin/component/ConfigurationForm.js
+++ b/ui/src/app/admin/component/ConfigurationForm.js
@@ -9,6 +9,8 @@ import { ToggleButton } from '../../form/component/ToggleButton';
 import { useProperties, usePropertiesLoading } from '../hoc/PropertiesProvider';
 import { groupBy } from 'lodash';
 import { useCallback } from 'react';
+import Form from 'react-bootstrap/Form';
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
 
 export function ConfigurationForm({ configuration = {}, errors = [], schema, onSave, onCancel }) {
 
@@ -140,26 +142,34 @@ export function ConfigurationForm({ configuration = {}, errors = [], schema, onS
             <div className="my-4"></div>
             <div className='row'>
                 <div className='col-12'>
-                    <table className='w-100 table'>
-                        <thead>
-                            <tr>
-                                <th>Property</th>
-                                <th>Category</th>
-                                <th>Type</th>
-                                <th>Value</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            {config.properties.map((p, idx) => (
-                                <tr key={idx}>
-                                    <td>{ p.propertyName }</td>
-                                    <td></td>
-                                    <td></td>
-                                    <td></td>
+                    <Form>
+                        <table className='w-100 table align-middle'>
+                            <thead>
+                                <tr>
+                                    <th>Property</th>
+                                    <th>Category</th>
+                                    <th>Type</th>
+                                    <th>Value</th>
                                 </tr>
-                            ))}
-                        </tbody>
-                    </table>
+                            </thead>
+                            <tbody>
+                                {config.properties.map((p, idx) => (
+                                    <tr key={idx}>
+                                        <td>{ p.propertyName }</td>
+                                        <td>{ p.category }</td>
+                                        <td>{ p.displayType }</td>
+                                        <td>
+                                            <FloatingLabel
+                                                controlId={`valueInput-${p.propertyName}`}
+                                                label="value">
+                                                <Form.Control type="text" placeholder="Value" />
+                                            </FloatingLabel>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </Form>
                 </div>
             </div>
         </div>
diff --git a/ui/src/app/admin/container/ConfigurationList.js b/ui/src/app/admin/container/ConfigurationList.js
index 300aab019..15351312c 100644
--- a/ui/src/app/admin/container/ConfigurationList.js
+++ b/ui/src/app/admin/container/ConfigurationList.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { faEdit, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faDownload, faEdit, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import Button from 'react-bootstrap/Button';
@@ -9,7 +9,7 @@ import { Translate } from '../../i18n/components/translate';
 
 import { DeleteConfirmation } from '../../core/components/DeleteConfirmation';
 
-export function ConfigurationList({ properties, onDelete }) {
+export function ConfigurationList({ configurations, onDelete }) {
 
     const remove = (id) => {
         onDelete(id);
@@ -44,18 +44,18 @@ export function ConfigurationList({ properties, onDelete }) {
                                             </tr>
                                         </thead>
                                         <tbody>
-                                            {(properties?.length > 0) ? properties.map((property, i) =>
+                                            {(configurations?.length > 0) ? configurations.map((c, i) =>
                                                 <tr key={i}>
-                                                    <td className="align-middle">{property.name}</td>
+                                                    <td className="align-middle">{c.name}</td>
                                                     <td className="text-end">
                                                         <React.Fragment>
-                                                            <Link disabled={property.name === 'ROLE_ADMIN'} to={`../configurations/${property.resourceId}/edit`} className={`btn btn-link text-primary ${property.name === 'ROLE_ADMIN' ? 'disabled' : ''}`}>
-                                                                <FontAwesomeIcon icon={faEdit} size="lg" />
+                                                            <Link to={`../configurations/${c.resourceId}/edit`} className={`btn btn-link text-primary`}>
+                                                                <FontAwesomeIcon icon={faDownload} size="lg" />
                                                                 <span className="sr-only">
-                                                                    <Translate value="action.edit">Edit</Translate>
+                                                                    <Translate value="action.download">Download</Translate>
                                                                 </span>
                                                             </Link>
-                                                            <Button disabled={property.name === 'ROLE_ADMIN'} variant="link" className="text-danger" onClick={() => block(() => remove(property.resourceId))}>
+                                                            <Button variant="link" className="text-danger" onClick={() => block(() => remove(c.resourceId))}>
                                                                 <FontAwesomeIcon icon={faTrash} size="lg" />
                                                                 <span className="sr-only">
                                                                     <Translate value="action.delete">Delete</Translate>
diff --git a/ui/src/app/admin/hoc/ConfigurationsProvider.js b/ui/src/app/admin/hoc/ConfigurationsProvider.js
index 495743cc2..661c00d80 100644
--- a/ui/src/app/admin/hoc/ConfigurationsProvider.js
+++ b/ui/src/app/admin/hoc/ConfigurationsProvider.js
@@ -15,7 +15,7 @@ export function ConfigurationsProvider({ children, cache = 'no-cache' }) {
     });
 
     async function loadConfigurations() {
-        const list = await get(`assets/data/properties.json`);
+        const list = await get(`assets/data/configurations.json`);
         if (response.ok) {
             setConfigurations(list);
         }
diff --git a/ui/src/app/admin/hooks.js b/ui/src/app/admin/hooks.js
index 328391778..50f0b51c7 100644
--- a/ui/src/app/admin/hooks.js
+++ b/ui/src/app/admin/hooks.js
@@ -48,7 +48,7 @@ export function useRoleUiSchema() {
 }
 
 export function useConfigurations (opts = { cachePolicy: 'no-cache' }) {
-    return useFetch(`${API_BASE_PATH}/admin/configurations`, opts);
+    return useFetch(`${BASE_PATH}/`, opts);
 }
 
 export function useConfiguration(id, opts = { cachePolicy: 'no-cache' }) {