|
At least one property is required.
diff --git a/ui/src/app/admin/component/PropertyInput.js b/ui/src/app/admin/component/PropertyInput.js
new file mode 100644
index 000000000..5db0b6d1b
--- /dev/null
+++ b/ui/src/app/admin/component/PropertyInput.js
@@ -0,0 +1,57 @@
+import React, { Fragment } from 'react';
+import FloatingLabel from 'react-bootstrap/FloatingLabel';
+import Form from 'react-bootstrap/Form';
+import { useValidator } from '../../core/hooks/useValidator';
+import { useTranslator } from '../../i18n/hooks';
+
+export function PropertyInput({ property, onChange }) {
+
+ const translate = useTranslator();
+
+ const value = React.useMemo(() => {
+ const { propertyValue, displayType } = property;
+ switch (displayType) {
+ case 'number':
+ return parseInt(propertyValue);
+ case 'boolean':
+ return propertyValue ? Boolean(propertyValue) : false;
+ default:
+ return propertyValue || '';
+ }
+ }, [property]);
+
+ const { errors } = useValidator({ value }, {
+ value: {
+ custom: {
+ isValid: (value) => !value || value?.length <= 255,
+ message: translate(`message.must-be-unique`),
+ }
+ }
+ });
+
+ return (
+
+ {property.displayType !== 'boolean' ?
+
+ onChange({ id: property.resourceId, propertyValue: evt.target.value }) }
+ maxLength={255}
+ isInvalid={ errors.value } />
+
+ :
+ onChange({ id: property.resourceId, propertyValue: evt.target.checked }) }
+ className="my-3" />
+ }
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/admin/component/PropertySelector.js b/ui/src/app/admin/component/PropertySelector.js
index 9f219e403..30091f98a 100644
--- a/ui/src/app/admin/component/PropertySelector.js
+++ b/ui/src/app/admin/component/PropertySelector.js
@@ -20,6 +20,7 @@ export function PropertySelector ({ properties, options, onAddProperties }) {
}
const cat = {category: item, propertyName: item, isCategory: true};
const catSelected = selected.some(s => s.propertyName === item);
+ const sorted = orderBy(grouped[item], 'propertyName');
return (
{index !== 0 && }
@@ -32,7 +33,7 @@ export function PropertySelector ({ properties, options, onAddProperties }) {
{item} - Add all
- {grouped[item].map((i) => {
+ {sorted.map((i) => {
if (!properties.some((p) => p.propertyName === i.propertyName)) {
index = index + 1;
const item =
diff --git a/ui/src/app/admin/container/ConfigurationList.js b/ui/src/app/admin/container/ConfigurationList.js
index 6595dbe78..d025db4bc 100644
--- a/ui/src/app/admin/container/ConfigurationList.js
+++ b/ui/src/app/admin/container/ConfigurationList.js
@@ -15,8 +15,9 @@ import { useTranslator } from '../../i18n/hooks';
import useFetch from 'use-http';
import API_BASE_PATH from '../../App.constant';
import { downloadAsZip } from '../../core/utility/download_as';
+import { useGetConfigurationsQuery } from '../../store/configurations/ConfigurationApi';
-export function ConfigurationList({ configurations, onDelete, loading }) {
+export function ConfigurationList({ onDelete, loading }) {
const remove = (id) => {
onDelete(id);
@@ -24,6 +25,8 @@ export function ConfigurationList({ configurations, onDelete, loading }) {
const translate = useTranslator();
+ const { data: configurations } = useGetConfigurationsQuery();
+
const downloader = useFetch(`${API_BASE_PATH}/shib/property/set`, {
cachePolicy: 'no-cache',
headers: {
diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js
index 05978d9e7..5555e7fdc 100644
--- a/ui/src/app/admin/container/EditConfiguration.js
+++ b/ui/src/app/admin/container/EditConfiguration.js
@@ -1,64 +1,52 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
+import React, { Fragment } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
-import { useConfiguration } from '../hooks';
import { ConfigurationForm } from '../component/ConfigurationForm';
-import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
-import { useTranslator } from '../../i18n/hooks';
-import { PropertiesProvider } from '../hoc/PropertiesProvider';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import { usePrompt } from '../../core/hooks/usePrompt';
+import { useGetConfigurationQuery, useGetConfigurationsQuery, useUpdateConfigurationMutation } from '../../store/configurations/ConfigurationApi';
+import { configurationReceived } from '../../store/configurations/ConfigurationSlice';
+import { useDispatch } from 'react-redux';
-export function EditConfiguration({ configurations }) {
+export function EditConfiguration() {
const navigate = useNavigate();
- const notifier = useDispatch();
- const translator = useTranslator();
const { id } = useParams();
+ const dispatch = useDispatch();
- const { put, get, response, loading } = useConfiguration({});
+ const { data: configuration = {}, isFetching: loadingDetail, isSuccess: loaded } = useGetConfigurationQuery(id);
+ const { data: configurations = [], isFetching: loadingList } = useGetConfigurationsQuery();
const [blocking, setBlocking] = React.useState(false);
- const [configuration, setConfiguration] = React.useState();
-
- async function save(config) {
- let toast;
- const resp = await put(`${config.resourceId}`, config);
- if (response.ok) {
- gotoList();
- toast = createNotificationAction(`Updated configuration successfully.`, NotificationTypes.SUCCESS);
- } else {
- toast = createNotificationAction(`${resp.errorCode} - ${translator(resp.errorMessage)}`, NotificationTypes.ERROR);
- }
- if (toast) {
- notifier(toast);
- }
- };
-
- async function loadConfiguration(id) {
- const config = await get(`/${id}`);
- if (response.ok) {
- setConfiguration(config);
- }
- }
-
- /*eslint-disable react-hooks/exhaustive-deps*/
- React.useEffect(() => { loadConfiguration(id) }, []);
+ const [update, {isSuccess}] = useUpdateConfigurationMutation();
const cancel = () => {
gotoList();
};
- const gotoList = () => {
+ const gotoList = React.useCallback(() => {
setBlocking(false);
setTimeout(() => navigate(`/configurations`), 0);
- };
+ }, [navigate]);
+
+ React.useEffect(() => {
+ if (isSuccess) {
+ gotoList({ refresh: true });
+ }
+ }, [isSuccess, gotoList]);
+
+ React.useEffect(() => {
+ if (loaded) {
+ dispatch(configurationReceived(configuration));
+ }
+ }, [loaded, configuration, dispatch]);
const prompt = usePrompt(blocking, `message.unsaved-editor`);
+ const { resourceId } = configuration;
+
return (
{prompt}
@@ -71,19 +59,23 @@ export function EditConfiguration({ configurations }) {
- {loading ?
+ {loadingDetail || loadingList ?
:
-
+
{configuration && save(data)}
- onCancel={() => cancel()} /> }
-
+ loading={loadingDetail || loadingList}
+ onSave={(configuration) => update({ id: resourceId, configuration: {
+ ...configuration,
+ resourceId
+ } })}
+ onCancel={() => cancel()} />
+ }
+
}
-
-
- {(schema) =>
- save(data)}
- onCancel={() => cancel()} />}
-
-
+ save(data)}
+ onCancel={() => cancel()} />
|