From 099ccb8fb788e38b6a2c7f76015decfc4dce11bc Mon Sep 17 00:00:00 2001
From: Ryan Mathis <rmathis@unicon.net>
Date: Thu, 4 Aug 2022 14:24:22 -0700
Subject: [PATCH] Added initial UI for property list

---
 ui/public/assets/data/properties.json         |  1 +
 .../assets/schema/properties/property.json    | 30 ++++++
 ui/src/app/App.js                             |  6 ++
 ui/src/app/admin/Properties.js                | 34 +++++++
 ui/src/app/admin/component/PropertyForm.js    | 56 +++++++++++
 ui/src/app/admin/container/EditProperty.js    | 92 +++++++++++++++++++
 ui/src/app/admin/container/NewProperty.js     | 80 ++++++++++++++++
 ui/src/app/admin/container/PropertyList.js    | 80 ++++++++++++++++
 ui/src/app/admin/hoc/PropertiesProvider.js    | 42 +++++++++
 ui/src/app/admin/hoc/PropertyProvider.js      | 20 ++++
 ui/src/app/admin/hooks.js                     | 16 ++++
 ui/src/app/core/components/Header.js          |  6 +-
 12 files changed, 462 insertions(+), 1 deletion(-)
 create mode 100644 ui/public/assets/data/properties.json
 create mode 100644 ui/public/assets/schema/properties/property.json
 create mode 100644 ui/src/app/admin/Properties.js
 create mode 100644 ui/src/app/admin/component/PropertyForm.js
 create mode 100644 ui/src/app/admin/container/EditProperty.js
 create mode 100644 ui/src/app/admin/container/NewProperty.js
 create mode 100644 ui/src/app/admin/container/PropertyList.js
 create mode 100644 ui/src/app/admin/hoc/PropertiesProvider.js
 create mode 100644 ui/src/app/admin/hoc/PropertyProvider.js

diff --git a/ui/public/assets/data/properties.json b/ui/public/assets/data/properties.json
new file mode 100644
index 000000000..0637a088a
--- /dev/null
+++ b/ui/public/assets/data/properties.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/ui/public/assets/schema/properties/property.json b/ui/public/assets/schema/properties/property.json
new file mode 100644
index 000000000..f0e90ff49
--- /dev/null
+++ b/ui/public/assets/schema/properties/property.json
@@ -0,0 +1,30 @@
+{
+    "type": "object",
+    "required": [
+        "property",
+        "value"
+    ],
+    "properties": {
+        "property": {
+            "title": "label.property-key",
+            "description": "tooltip.property-key",
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 255
+        },
+        "description": {
+            "title": "label.property-descr",
+            "description": "tooltip.property-descr",
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 255
+        },
+        "value": {
+            "title": "label.property-value",
+            "description": "tooltip.property-value",
+            "type": "string",
+            "minLength": 1,
+            "maxLength": 255
+        }
+    }
+}
\ No newline at end of file
diff --git a/ui/src/app/App.js b/ui/src/app/App.js
index 546241f10..9c4e00422 100644
--- a/ui/src/app/App.js
+++ b/ui/src/app/App.js
@@ -34,6 +34,7 @@ import { Roles } from './admin/Roles';
 import { Groups } from './admin/Groups';
 import { BASE_PATH } from './App.constant';
 import { ProtectRoute } from './core/components/ProtectRoute';
+import { Properties } from './admin/Properties';
 
 
 function App() {
@@ -108,6 +109,11 @@ function App() {
                                                             <Groups />
                                                         </ProtectRoute>
                                                     } />
+                                                    <Route path="/properties" render={() =>
+                                                        <ProtectRoute redirectTo="/dashboard">
+                                                            <Properties />
+                                                        </ProtectRoute>
+                                                    } />
                                                     <Route path="*">
                                                         <Redirect to="/dashboard" />
                                                     </Route>
diff --git a/ui/src/app/admin/Properties.js b/ui/src/app/admin/Properties.js
new file mode 100644
index 000000000..b81e0af48
--- /dev/null
+++ b/ui/src/app/admin/Properties.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { PropertiesProvider } from './hoc/PropertiesProvider';
+import { NewProperty } from './container/NewProperty';
+import { EditProperty } from './container/EditProperty';
+import { PropertyList } from './container/PropertyList';
+
+export function Properties() {
+
+    let { path, url } = useRouteMatch();
+
+    return (
+        <>
+            <Switch>
+                <Route path={`${path}/list`} render={() =>
+                    <PropertiesProvider>
+                        {(properties, onDelete) =>
+                            <PropertyList properties={properties} onDelete={onDelete} />
+                        }
+                    </PropertiesProvider>
+                } />
+                <Route path={`${path}/new`} render={() =>
+                    <NewProperty />
+                } />
+                <Route path={`${path}/:id/edit`} render={() =>
+                    <EditProperty />
+                } />
+                <Route path={`${path}`} exact render={() => 
+                    <Redirect to={`${url}/list`} />
+                } />
+            </Switch>
+        </>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/component/PropertyForm.js b/ui/src/app/admin/component/PropertyForm.js
new file mode 100644
index 000000000..54a0800ea
--- /dev/null
+++ b/ui/src/app/admin/component/PropertyForm.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import Form from '../../form/Form';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSpinner, faSave } from '@fortawesome/free-solid-svg-icons';
+import Translate from '../../i18n/components/translate';
+
+import { usePropertyUiSchema } from '../hooks';
+import { FormContext, setFormDataAction, setFormErrorAction } from '../../form/FormManager';
+
+export function PropertyForm({ property = {}, errors = [], loading = false, schema, onSave, onCancel }) {
+
+    const { dispatch } = React.useContext(FormContext);
+    const onChange = ({ formData, errors }) => {
+        dispatch(setFormDataAction(formData));
+        dispatch(setFormErrorAction(errors));
+    };
+
+    const uiSchema = usePropertyUiSchema();
+
+    return (<>
+        <div className="container-fluid">
+            <div className="d-flex justify-content-end align-items-center">
+                <React.Fragment>
+                    <Button variant="info" className="me-2"
+                        type="button"
+                        onClick={() => onSave(property)}
+                        disabled={errors.length > 0 || loading}
+                        aria-label="Save changes to the metadata source. You will return to the dashboard">
+                        <FontAwesomeIcon icon={loading ? faSpinner : faSave} pulse={loading} />&nbsp;
+                        <Translate value="action.save">Save</Translate>
+                    </Button>
+                    <Button variant="secondary"
+                        type="button"
+                        onClick={() => onCancel()} aria-label="Cancel changes, go back to dashboard">
+                        <Translate value="action.cancel">Cancel</Translate>
+                    </Button>
+                </React.Fragment>
+            </div>
+            <hr />
+            <div className="row">
+                <div className="col-12 col-lg-6 order-2">
+                    <Form formData={property}
+                        noHtml5Validate={true}
+                        onChange={(form) => onChange(form)}
+                        schema={schema}
+                        uiSchema={uiSchema}
+                        liveValidate={true}>
+                        <></>
+                    </Form>
+                </div>
+            </div>
+        </div>
+    </>)
+}
+/**/
\ No newline at end of file
diff --git a/ui/src/app/admin/container/EditProperty.js b/ui/src/app/admin/container/EditProperty.js
new file mode 100644
index 000000000..beac8c5f8
--- /dev/null
+++ b/ui/src/app/admin/container/EditProperty.js
@@ -0,0 +1,92 @@
+import React from 'react';
+
+import { Prompt, useHistory } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+import Translate from '../../i18n/components/translate';
+import { useProperties } from '../hooks';
+import { Schema } from '../../form/Schema';
+import { FormManager } from '../../form/FormManager';
+
+import { PropertyForm } from '../component/PropertyForm';
+import { PropertyProvider } from '../hoc/PropertyProvider';
+import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
+import { useTranslator } from '../../i18n/hooks';
+import { BASE_PATH } from '../../App.constant';
+
+export function EditProperty() {
+
+    const { id } = useParams();
+
+    const notifier = useNotificationDispatcher();
+    const translator = useTranslator();
+
+    const history = useHistory();
+
+    const { put, response, loading } = useProperties();
+
+    const [blocking, setBlocking] = React.useState(false);
+
+    async function save(property) {
+        let toast;
+        const resp = await put(`/${property.resourceId}`, property);
+        if (response.ok) {
+            gotoDetail({ refresh: true });
+            toast = createNotificationAction(`Updated property successfully.`, NotificationTypes.SUCCESS);
+        } else {
+            toast = createNotificationAction(`${resp.errorCode} - ${translator(resp.errorMessage)}`, NotificationTypes.ERROR);
+        }
+        if (toast) {
+            notifier(toast);
+        }
+    };
+
+    const cancel = () => {
+        gotoDetail();
+    };
+
+    const gotoDetail = (state = null) => {
+        setBlocking(false);
+        history.push(`/properties`, state);
+    };
+
+    return (
+        <div className="container-fluid p-3">
+            <Prompt
+                when={blocking}
+                message={location =>
+                    `message.unsaved-editor`
+                }
+            />
+            <section className="section" tabIndex="0">
+                <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.edit-property">Edit property</Translate></span>
+                        </div>
+                    </div>
+                </div>
+                <div className="section-body p-4 border border-top-0 border-info">
+                    <PropertyProvider id={id}>
+                        {(property) =>
+                            <Schema path={`/${BASE_PATH}assets/schema/properties/property.json`}>
+                                {(schema) =>
+                                    <>{property &&
+                                        <FormManager initial={property}>
+                                            {(data, errors) =>
+                                                <PropertyForm
+                                                    property={data}
+                                                    errors={errors}
+                                                    schema={schema}
+                                                    loading={loading}
+                                                    onSave={(data) => save(data)}
+                                                    onCancel={() => cancel()} />}
+                                        </FormManager>
+                                    }</>}
+                            </Schema>
+                        }
+                    </PropertyProvider>
+                </div>
+            </section>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/container/NewProperty.js b/ui/src/app/admin/container/NewProperty.js
new file mode 100644
index 000000000..911a10bc8
--- /dev/null
+++ b/ui/src/app/admin/container/NewProperty.js
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { Prompt, useHistory } from 'react-router-dom';
+import Translate from '../../i18n/components/translate';
+import { useProperties } from '../hooks';
+import { Schema } from '../../form/Schema';
+import { FormManager } from '../../form/FormManager';
+import { PropertyForm } from '../component/PropertyForm';
+
+import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
+import { useTranslator } from '../../i18n/hooks';
+import { BASE_PATH } from '../../App.constant';
+
+export function NewProperty() {
+    const history = useHistory();
+    const notifier = useNotificationDispatcher();
+    const translator = useTranslator();
+
+    const { post, response, loading } = useProperties({});
+
+    const [blocking, setBlocking] = React.useState(false);
+
+    async function save(property) {
+        let toast;
+        const resp = await post(``, property);
+        if (response.ok) {
+            gotoDetail({ refresh: true });
+            toast = createNotificationAction(`Added property successfully.`, NotificationTypes.SUCCESS);
+        } else {
+            toast = createNotificationAction(`${resp.errorCode} - ${translator(resp.errorMessage)}`, NotificationTypes.ERROR);
+        }
+        if (toast) {
+            notifier(toast);
+        }
+    };
+
+    const cancel = () => {
+        gotoDetail();
+    };
+
+    const gotoDetail = (state = null) => {
+        setBlocking(false);
+        history.push(`/properties`, state);
+    };
+
+    return (
+        <div className="container-fluid p-3">
+            <Prompt
+                when={blocking}
+                message={location =>
+                    `message.unsaved-editor`
+                }
+            />
+            <section className="section" tabIndex="0">
+                <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-property">Add a new property</Translate></span>
+                        </div>
+                    </div>
+                </div>
+                <div className="section-body p-4 border border-top-0 border-info">
+                    <Schema path={`/${BASE_PATH}assets/schema/properties/property.json`}>
+                        {(schema) =>
+                            <FormManager initial={{}}>
+                                {(data, errors) =>
+                                    <PropertyForm
+                                        property={data}
+                                        errors={errors}
+                                        schema={schema}
+                                        loading={loading}
+                                        onSave={(data) => save(data)}
+                                        onCancel={() => cancel()} />}
+                            </FormManager>}
+                    </Schema>
+                </div>
+            </section>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/container/PropertyList.js b/ui/src/app/admin/container/PropertyList.js
new file mode 100644
index 000000000..2312cc1d2
--- /dev/null
+++ b/ui/src/app/admin/container/PropertyList.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { faEdit, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import Button from 'react-bootstrap/Button';
+import { Link } from 'react-router-dom';
+
+import { Translate } from '../../i18n/components/translate';
+
+import { DeleteConfirmation } from '../../core/components/DeleteConfirmation';
+
+export function PropertyList({ properties, onDelete }) {
+
+    const remove = (id) => {
+        onDelete(id);
+    }
+
+    return (
+        <DeleteConfirmation title={`message.delete-property-title`} body={`message.delete-property-body`}>
+            {(block) =>
+                <div className="container-fluid p-3">
+                    <section className="section">
+                        <div className="section-body border border-top-0 border-primary">
+                            <div className="section-header bg-primary p-2 text-light">
+                                <span className="lead">
+                                    <Translate value="label.properties-management">Roles Management</Translate>
+                                </span>
+                            </div>
+                            <div className="p-3">
+                                <div className="d-flex justify-content-end w-100">
+                                    <Link to="./new" className="btn btn-sm btn-success">
+                                        <FontAwesomeIcon icon={faPlusCircle} /> &nbsp;
+                                        <Translate value="action.add-new-property">Add new property</Translate>
+                                    </Link>
+                                </div>
+                                <div className="table-responsive mt-3">
+                                    <table className="table table-striped w-100 table-hover">
+                                        <thead>
+                                            <tr>
+                                                <th>
+                                                    <Translate value="label.property-name">Role Name</Translate>
+                                                </th>
+                                                <th><span className="sr-only"><Translate value="label.actions">Actions</Translate></span></th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {(properties?.length > 0) ? properties.map((property, i) =>
+                                                <tr key={i}>
+                                                    <td className="align-middle">{property.name}</td>
+                                                    <td className="text-end">
+                                                        <React.Fragment>
+                                                            <Link disabled={property.name === 'ROLE_ADMIN'} to={`../properties/${property.resourceId}/edit`} className={`btn btn-link text-primary ${property.name === 'ROLE_ADMIN' ? 'disabled' : ''}`}>
+                                                                <FontAwesomeIcon icon={faEdit} size="lg" />
+                                                                <span className="sr-only">
+                                                                    <Translate value="action.edit">Edit</Translate>
+                                                                </span>
+                                                            </Link>
+                                                            <Button disabled={property.name === 'ROLE_ADMIN'} variant="link" className="text-danger" onClick={() => block(() => remove(property.resourceId))}>
+                                                                <FontAwesomeIcon icon={faTrash} size="lg" />
+                                                                <span className="sr-only">
+                                                                    <Translate value="action.delete">Delete</Translate>
+                                                                </span>
+                                                            </Button>
+                                                        </React.Fragment>
+                                                    </td>
+                                                </tr>
+                                            ) : <tr>
+                                                <td colSpan="3">No properties defined.</td>
+                                            </tr>}
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            }
+        </DeleteConfirmation>
+    );
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/hoc/PropertiesProvider.js b/ui/src/app/admin/hoc/PropertiesProvider.js
new file mode 100644
index 000000000..341d7736f
--- /dev/null
+++ b/ui/src/app/admin/hoc/PropertiesProvider.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { useProperties } from '../hooks';
+import { createNotificationAction, NotificationTypes, useNotificationDispatcher } from '../../notifications/hoc/Notifications';
+import { useTranslator } from '../../i18n/hooks';
+
+export function PropertiesProvider({ children, cache = 'no-cache' }) {
+
+    const [properties, setProperties] = React.useState([]);
+
+    const notifier = useNotificationDispatcher();
+    const translator = useTranslator();
+
+    const { get, del, response, loading } = useProperties({
+        cachePolicy: cache
+    });
+
+    async function loadProperties() {
+        const list = await get(`assets/data/properties.json`);
+        if (response.ok) {
+            setProperties(list);
+        }
+    }
+
+    async function removeProperty(id) {
+        let toast;
+        const resp = await del(`/${id}`);
+        if (response.ok) {
+            loadProperties();
+            toast = createNotificationAction(`Deleted property successfully.`, NotificationTypes.SUCCESS);
+        } else {
+            toast = createNotificationAction(`${resp.errorCode} - ${translator(resp.errorMessage)}`, NotificationTypes.ERROR);
+        }
+        if (toast) {
+            notifier(toast);
+        }
+    }
+
+    /*eslint-disable react-hooks/exhaustive-deps*/
+    React.useEffect(() => { loadProperties() }, []);
+
+    return (<>{children(properties, removeProperty, loading)}</>);
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/hoc/PropertyProvider.js b/ui/src/app/admin/hoc/PropertyProvider.js
new file mode 100644
index 000000000..119f3d26d
--- /dev/null
+++ b/ui/src/app/admin/hoc/PropertyProvider.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useProperty } from '../hooks';
+
+export function PropertyProvider({ id, children }) {
+
+    const [property, setProperty] = React.useState();
+    const { get, response } = useProperty(id);
+
+    async function loadProperty() {
+        const r = await get(``);
+        if (response.ok) {
+            setProperty(r);
+        }
+    }
+
+    /*eslint-disable react-hooks/exhaustive-deps*/
+    React.useEffect(() => { loadProperty() }, []);
+
+    return (<>{children(property)}</>);
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/hooks.js b/ui/src/app/admin/hooks.js
index b2c63a7c3..955c510a6 100644
--- a/ui/src/app/admin/hooks.js
+++ b/ui/src/app/admin/hooks.js
@@ -46,3 +46,19 @@ export function useGroupUiValidator() {
 export function useRoleUiSchema() {
     return {};
 }
+
+export function useProperties (opts = { cachePolicy: 'no-cache' }) {
+    return useFetch(`${API_BASE_PATH}/admin/properties`, opts);
+}
+
+export function useProperty (id, opts = { cachePolicy: 'no-cache' }) {
+    return useFetch(`${API_BASE_PATH}/admin/property/${id}`, opts);
+}
+
+export function usePropertyUiSchema () {
+    return {
+        description: {
+            'ui:widget': 'textarea'
+        }
+    };
+}
diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
index ff979056b..d8773a709 100644
--- a/ui/src/app/core/components/Header.js
+++ b/ui/src/app/core/components/Header.js
@@ -7,7 +7,7 @@ import Dropdown from 'react-bootstrap/Dropdown';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import { faTh, faSignOutAlt, faPlusCircle, faCube, faCubes, faUsersCog, faSpinner, faUserCircle, faCog, faBoxOpen, faTags, faIdBadge } from '@fortawesome/free-solid-svg-icons';
+import { faTh, faSignOutAlt, faPlusCircle, faCube, faCubes, faUsersCog, faSpinner, faUserCircle, faCog, faBoxOpen, faTags, faIdBadge, faFileLines } from '@fortawesome/free-solid-svg-icons';
 
 import Translate from '../../i18n/components/translate';
 import { useTranslator } from '../../i18n/hooks';
@@ -88,6 +88,10 @@ export function Header () {
                                 <FontAwesomeIcon icon={faIdBadge} className="me-2" fixedWidth />
                                 <Translate value="action.roles" />
                             </Dropdown.Item>
+                            <Dropdown.Item as={Link} to="/properties" className="text-primary py-2" id="advanced-nav-dropdown-properties">
+                                <FontAwesomeIcon icon={faFileLines} className="me-2" fixedWidth />
+                                <Translate value="action.properties" />
+                            </Dropdown.Item>
                         </Dropdown.Menu>
                     </Dropdown>
                     }