|
-
+
{c.name}
|
@@ -117,7 +117,7 @@ export function ConfigurationList({ configurations, onDelete, loading }) {
-
+
Edit
diff --git a/ui/src/app/admin/container/EditConfiguration.js b/ui/src/app/admin/container/EditConfiguration.js
index d1950afdf..05978d9e7 100644
--- a/ui/src/app/admin/container/EditConfiguration.js
+++ b/ui/src/app/admin/container/EditConfiguration.js
@@ -1,6 +1,6 @@
import React from 'react';
import { useDispatch } from 'react-redux';
-import { Prompt, useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { useConfiguration } from '../hooks';
import { ConfigurationForm } from '../component/ConfigurationForm';
@@ -10,9 +10,10 @@ 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';
export function EditConfiguration({ configurations }) {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
const { id } = useParams();
@@ -27,7 +28,7 @@ export function EditConfiguration({ configurations }) {
let toast;
const resp = await put(`${config.resourceId}`, config);
if (response.ok) {
- gotoList({ refresh: true });
+ gotoList();
toast = createNotificationAction(`Updated configuration successfully.`, NotificationTypes.SUCCESS);
} else {
toast = createNotificationAction(`${resp.errorCode} - ${translator(resp.errorMessage)}`, NotificationTypes.ERROR);
@@ -51,19 +52,16 @@ export function EditConfiguration({ configurations }) {
gotoList();
};
- const gotoList = (state = null) => {
+ const gotoList = () => {
setBlocking(false);
- history.push(`/configurations`, state);
+ setTimeout(() => navigate(`/configurations`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/admin/container/EditGroup.js b/ui/src/app/admin/container/EditGroup.js
index 7e2d72acf..59ed06041 100644
--- a/ui/src/app/admin/container/EditGroup.js
+++ b/ui/src/app/admin/container/EditGroup.js
@@ -1,7 +1,6 @@
import React from 'react';
import { useDispatch } from 'react-redux';
-import { Prompt, useHistory } from 'react-router-dom';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { useGroups } from '../hooks';
import { Schema } from '../../form/Schema';
@@ -12,20 +11,20 @@ import { GroupProvider } from '../hoc/GroupProvider';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useTranslator } from '../../i18n/hooks';
import { BASE_PATH } from '../../App.constant';
-
+import { usePrompt } from '../../core/hooks/usePrompt';
export function EditGroup({ groups }) {
-
const { id } = useParams();
const notifier = useDispatch();
const translator = useTranslator();
- const history = useHistory();
+ const navigate = useNavigate();
const { put, response, loading } = useGroups();
const [blocking, setBlocking] = React.useState(false);
+
async function save(metadata) {
let toast;
@@ -45,19 +44,16 @@ export function EditGroup({ groups }) {
gotoDetail();
};
- const gotoDetail = (state = null) => {
+ const gotoDetail = () => {
setBlocking(false);
- history.push(`/groups`, state);
+ setTimeout(() => navigate(`/groups`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
@@ -81,6 +77,7 @@ export function EditGroup({ groups }) {
schema={schema}
loading={loading}
onSave={(data) => save(data)}
+ onTouched={() => setBlocking(true)}
onCancel={() => cancel()} />}
}}
diff --git a/ui/src/app/admin/container/EditRole.js b/ui/src/app/admin/container/EditRole.js
index d3a4e43fb..08fc66d6a 100644
--- a/ui/src/app/admin/container/EditRole.js
+++ b/ui/src/app/admin/container/EditRole.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { useRoles } from '../hooks';
@@ -13,6 +13,7 @@ import { createNotificationAction, NotificationTypes } from '../../store/notific
import { useTranslator } from '../../i18n/hooks';
import { BASE_PATH } from '../../App.constant';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function EditRole() {
@@ -21,7 +22,7 @@ export function EditRole() {
const notifier = useDispatch();
const translator = useTranslator();
- const history = useHistory();
+ const navigate = useNavigate();
const { put, response, loading } = useRoles();
@@ -45,19 +46,16 @@ export function EditRole() {
gotoDetail();
};
- const gotoDetail = (state = null) => {
+ const gotoDetail = () => {
setBlocking(false);
- history.push(`/roles`, state);
+ setTimeout(() => navigate(`/roles`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/admin/container/GroupsList.js b/ui/src/app/admin/container/GroupsList.js
index 35dd4625d..6172695a4 100644
--- a/ui/src/app/admin/container/GroupsList.js
+++ b/ui/src/app/admin/container/GroupsList.js
@@ -28,7 +28,7 @@ export function GroupsList({ groups, onDelete }) {
-
+
Add new group
@@ -56,7 +56,7 @@ export function GroupsList({ groups, onDelete }) {
{group.description || ''} |
{group.approversList?.length > 0 ? group.approversList[0].approverGroupIds.join(', ') : '-'} |
-
diff --git a/ui/src/app/admin/container/NewConfiguration.js b/ui/src/app/admin/container/NewConfiguration.js
index bc3131c6a..4e0f96a80 100644
--- a/ui/src/app/admin/container/NewConfiguration.js
+++ b/ui/src/app/admin/container/NewConfiguration.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { useConfiguration } from '../hooks';
import { Schema } from '../../form/Schema';
@@ -11,9 +11,10 @@ import { useTranslator } from '../../i18n/hooks';
import { BASE_PATH } from '../../App.constant';
import { PropertiesProvider } from '../hoc/PropertiesProvider';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function NewConfiguration({ configurations }) {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
@@ -39,21 +40,18 @@ export function NewConfiguration({ configurations }) {
gotoList();
};
- const gotoList = (state = null) => {
+ const [configuration] = React.useState({});
+
+ const gotoList = () => {
setBlocking(false);
- history.push(`/configurations`, state);
+ setTimeout(() => navigate(`/configurations`), 0);
};
- const [configuration] = React.useState({});
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/admin/container/NewGroup.js b/ui/src/app/admin/container/NewGroup.js
index 7bebbe49e..1fc3be470 100644
--- a/ui/src/app/admin/container/NewGroup.js
+++ b/ui/src/app/admin/container/NewGroup.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { useGroups } from '../hooks';
import { Schema } from '../../form/Schema';
@@ -11,9 +11,10 @@ import { createNotificationAction, NotificationTypes } from '../../store/notific
import { useTranslator } from '../../i18n/hooks';
import { BASE_PATH } from '../../App.constant';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function NewGroup({ groups }) {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
@@ -39,19 +40,16 @@ export function NewGroup({ groups }) {
gotoDetail();
};
- const gotoDetail = (state = null) => {
+ const gotoDetail = () => {
setBlocking(false);
- history.push(`/groups`, state);
+ setTimeout(() => navigate(`/groups`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
@@ -72,6 +70,7 @@ export function NewGroup({ groups }) {
errors={errors}
schema={schema}
loading={loading}
+ onTouched={() => setBlocking(true)}
onSave={(data) => save(data)}
onCancel={() => cancel()} />
}
diff --git a/ui/src/app/admin/container/NewRole.js b/ui/src/app/admin/container/NewRole.js
index 19b6a04d7..246410268 100644
--- a/ui/src/app/admin/container/NewRole.js
+++ b/ui/src/app/admin/container/NewRole.js
@@ -1,6 +1,6 @@
import React from 'react';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { useRoles } from '../hooks';
import { Schema } from '../../form/Schema';
@@ -11,9 +11,10 @@ import { createNotificationAction, NotificationTypes } from '../../store/notific
import { useTranslator } from '../../i18n/hooks';
import { BASE_PATH } from '../../App.constant';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function NewRole() {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
@@ -39,19 +40,16 @@ export function NewRole() {
gotoDetail();
};
- const gotoDetail = (state = null) => {
+ const gotoDetail = () => {
setBlocking(false);
- history.push(`/roles`, state);
+ setTimeout(() => navigate(`/roles`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/admin/container/RoleList.js b/ui/src/app/admin/container/RoleList.js
index 4bec939e8..a20ef9c4c 100644
--- a/ui/src/app/admin/container/RoleList.js
+++ b/ui/src/app/admin/container/RoleList.js
@@ -28,7 +28,7 @@ export function RoleList({ roles, onDelete }) {
-
+
Add new role
@@ -49,7 +49,7 @@ export function RoleList({ roles, onDelete }) {
{role.name} |
-
+
Edit
diff --git a/ui/src/app/core/Error.js b/ui/src/app/core/Error.js
new file mode 100644
index 000000000..3194f2d01
--- /dev/null
+++ b/ui/src/app/core/Error.js
@@ -0,0 +1,24 @@
+import React, { Fragment } from 'react';
+
+import { Alert } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+import Footer from './components/Footer';
+import Header from './components/Header';
+
+export function Error () {
+ return (
+
+
+
+
+ Oops!
+ There was a problem processing this request.
+
+ Go to dashboard
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/core/Prompt.js b/ui/src/app/core/Prompt.js
new file mode 100644
index 000000000..80e55a9d9
--- /dev/null
+++ b/ui/src/app/core/Prompt.js
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import Modal from 'react-bootstrap/Modal';
+import Button from 'react-bootstrap/Button';
+import Translate from '../i18n/components/translate';
+
+export function Prompt({
+ show,
+ message,
+ title,
+ onConfirm,
+ onCancel,
+ confirmButtonText,
+ cancelButtonText,
+}) {
+
+ return (
+
+
+ {title}
+
+
+
+ {message}
+
+
+
+
+
+
+
+ );
+}
diff --git a/ui/src/app/core/components/Header.js b/ui/src/app/core/components/Header.js
index 691d0478a..b98e84e99 100644
--- a/ui/src/app/core/components/Header.js
+++ b/ui/src/app/core/components/Header.js
@@ -122,7 +122,7 @@ export function Header () {
Groups
{name}
-
+
diff --git a/ui/src/app/core/components/ProtectRoute.js b/ui/src/app/core/components/ProtectRoute.js
index c8a7a299f..964026ae5 100644
--- a/ui/src/app/core/components/ProtectRoute.js
+++ b/ui/src/app/core/components/ProtectRoute.js
@@ -1,13 +1,14 @@
import React from 'react';
-import { Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom';
import { isUndefined } from 'lodash';
import { useCurrentUser, useIsAdmin } from '../user/UserContext';
export function ProtectRoute({ children, redirectTo, ...rest }) {
const user = useCurrentUser();
const isAdmin = useIsAdmin();
+
if (isUndefined(user?.role)) {
return <>
}
- return isAdmin ? children : ;
-}
\ No newline at end of file
+ return isAdmin ? children : ;
+}
diff --git a/ui/src/app/core/components/ProtectRoute.test.js b/ui/src/app/core/components/ProtectRoute.test.js
index 477707774..9041acdae 100644
--- a/ui/src/app/core/components/ProtectRoute.test.js
+++ b/ui/src/app/core/components/ProtectRoute.test.js
@@ -1,6 +1,6 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import { BrowserRouter, MemoryRouter, Route } from 'react-router-dom';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import { ProtectRoute } from './ProtectRoute';
const mockIsAdmin = jest.fn();
@@ -10,19 +10,13 @@ jest.mock('../user/UserContext', () => ({
useCurrentUser: () => ({role: 'ROLE_ADMIN'}),
}));
-const renderWithRouter = (ui, { route = '/' } = {}) => {
- window.history.pushState({}, 'Test page', route)
-
- return render(ui, { wrapper: BrowserRouter })
-}
-
describe('AdminRoute user is admin', () => {
beforeEach(() => {
mockIsAdmin.mockReturnValue(true);
});
it('should render the component if user is an admin', () => {
- render(hi there, { wrapper: MemoryRouter });
+ render(hi there, { wrapper: BrowserRouter });
expect(screen.getByText('hi there')).toBeInTheDocument();
});
});
@@ -33,10 +27,11 @@ describe('AdminRoute user is NOT admin', () => {
});
it('should redirect the user to the dashboard if not admin', () => {
- renderWithRouter(
- hi there
- 'dashboard' } />
- , {route: '/foo'});
+ render(
+ } />
+ dashboard } />
+ hi there } />
+ , { wrapper: BrowserRouter });
expect(screen.getByText('dashboard')).toBeInTheDocument();
});
});
\ No newline at end of file
diff --git a/ui/src/app/core/components/UserConfirmation.js b/ui/src/app/core/components/UserConfirmation.js
deleted file mode 100644
index 2b264f625..000000000
--- a/ui/src/app/core/components/UserConfirmation.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import Modal from 'react-bootstrap/Modal';
-import Button from 'react-bootstrap/Button';
-import Translate from '../../i18n/components/translate';
-import { useHistory } from 'react-router-dom';
-import { reload } from '../utility/window';
-
-export function UserConfirmation({children}) {
- const [confirm, setConfirm] = React.useState(false);
- const [confirmCallback, setConfirmCallback] = React.useState(null);
- const [message, setMessage] = React.useState('');
-
- function getConfirmation(message, callback) {
- setConfirmCallback(() => callback);
- setConfirm(true);
- setMessage(message);
- }
-
- return (<>{children(message, confirm, confirmCallback, setConfirm, getConfirmation)});
-}
-
-export function ConfirmWindow ({message, confirm, setConfirm, confirmCallback}) {
-
- const history = useHistory();
-
- const allowTransition = () => {
- setConfirm(false);
- confirmCallback(true);
- if (history.location.pathname.includes('provider/new')) {
- reload();
- }
- }
-
- const blockTransition = () => {
- setConfirm(false);
- confirmCallback(false);
- }
-
- return (
-
-
- Are you sure?
-
-
-
- {message}
-
-
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/ui/src/app/core/components/UserConfirmation.test.js b/ui/src/app/core/components/UserConfirmation.test.js
deleted file mode 100644
index 58f73c3b8..000000000
--- a/ui/src/app/core/components/UserConfirmation.test.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { UserConfirmation, ConfirmWindow } from './UserConfirmation';
-
-jest.mock('../../i18n/hooks', () => ({
- useTranslator: () => (value) => value,
- useTranslation: (value) => value
-}));
-
-const mockReload = jest.fn();
-
-jest.mock('../utility/window', () => ({
- reload: () => mockReload()
-}))
-
-const mockIncludes = jest.fn();
-
-jest.mock('react-router-dom', () => ({
- useHistory: () => ({
- location: {
- pathname: {
- includes: mockIncludes
- }
- }
- })
-}));
-
-const TestWindow = ({getConfirmation, message}) => {
- React.useEffect(() => getConfirmation('foo', jest.fn()), [])
- return {message};
-}
-
-describe('user confirmation context', () => {
- it('should render its children with a function', () => {
- render(
- {(message, confirm, confirmCallback, setConfirm, getConfirmation) => hi there }
- );
- expect(screen.getByText('hi there')).toBeInTheDocument();
- expect(screen.getByText('foo')).toBeInTheDocument();
- });
-});
-
-describe('confirmation window', () => {
-
- it('should provide buttons to confirm', async () => {
-
- const message = 'hi there';
- const confirm = true;
- const confirmCallback = jest.fn();
- const setConfirm = jest.fn();
-
- render( );
- expect(screen.getByText('hi there')).toBeInTheDocument();
-
- fireEvent.click(screen.getByText('action.discard-changes'));
-
- expect(confirmCallback).toHaveBeenCalledWith(true);
-
- });
-
- it('should provide buttons to stop', async () => {
-
- const message = 'hi there';
- const confirm = true;
- const confirmCallback = jest.fn();
- const setConfirm = jest.fn();
-
- render();
- expect(screen.getByText('hi there')).toBeInTheDocument();
-
- fireEvent.click(screen.getByText('action.cancel'));
-
- expect(confirmCallback).toHaveBeenCalledWith(false);
-
- });
-
- it('should redirect if on a provider', () => {
- mockIncludes.mockReturnValue(true);
-
- const message = 'hi there';
- const confirm = true;
- const confirmCallback = jest.fn();
- const setConfirm = jest.fn();
-
- render();
- expect(screen.getByText('hi there')).toBeInTheDocument();
-
- fireEvent.click(screen.getByText('action.discard-changes'));
-
- expect(confirmCallback).toHaveBeenCalledWith(true);
-
- expect(mockReload).toHaveBeenCalled();
- })
-});
-
diff --git a/ui/src/app/core/hooks/usePrompt.js b/ui/src/app/core/hooks/usePrompt.js
new file mode 100644
index 000000000..3220f6a4b
--- /dev/null
+++ b/ui/src/app/core/hooks/usePrompt.js
@@ -0,0 +1,48 @@
+import React, { createElement } from 'react';
+
+import { unstable_useBlocker as useBlocker } from 'react-router';
+import { Prompt } from '../Prompt';
+
+export function usePrompt(when, message, {
+ title = 'Are you sure?',
+ confirmButtonText = `action.discard-changes`,
+ cancelButtonText = `action.cancel`
+} = {
+ title: 'Are you sure?',
+ confirmButtonText: `action.discard-changes`,
+ cancelButtonText: `action.cancel`
+}) {
+ let blocker = useBlocker(when);
+ const [show, setShow] = React.useState(false);
+
+ React.useEffect(() => {
+ if (blocker.state === "blocked" && !when) {
+ blocker.reset();
+ }
+ }, [blocker, when]);
+
+ React.useEffect(() => {
+ if (blocker.state === "blocked") {
+ setShow(true);
+ }
+ }, [blocker]);
+
+ return createElement(
+ Prompt,
+ {
+ show,
+ message,
+ title,
+ confirmButtonText,
+ cancelButtonText,
+ onConfirm: () => {
+ setShow(false);
+ blocker.proceed();
+ },
+ onCancel: () => {
+ setShow(false);
+ blocker.reset();
+ }
+ });
+
+}
diff --git a/ui/src/app/dashboard/view/ActionsTab.js b/ui/src/app/dashboard/view/ActionsTab.js
index 030f870a1..4706be423 100644
--- a/ui/src/app/dashboard/view/ActionsTab.js
+++ b/ui/src/app/dashboard/view/ActionsTab.js
@@ -4,19 +4,14 @@ import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Badge from 'react-bootstrap/Badge';
import Nav from 'react-bootstrap/Nav';
-import { Switch, Route, useRouteMatch, Redirect, NavLink } from 'react-router-dom';
+import { NavLink, Outlet } from 'react-router-dom';
-import { MetadataActions } from '../../admin/container/MetadataActions';
-import UserActions from '../../admin/container/UserActions';
-import Spinner from '../../core/components/Spinner';
import Translate from '../../i18n/components/translate';
-import SourceList from '../../metadata/domain/source/component/SourceList';
-import { ProtectRoute } from '../../core/components/ProtectRoute';
-import { DynamicRegistrationList } from '../../dynamic-registration/component/DynamicRegistrationList';
+
import { useGetNewUsersQuery } from '../../store/user/UserSlice';
import { useGetDisabledSourcesQuery, useGetUnapprovedSourcesQuery } from '../../store/metadata/SourceSlice';
-import { DynamicRegistrationActions } from '../../dynamic-registration/hoc/DynamicRegistrationActions';
+
import {
useGetDisabledRegistrationsQuery,
useGetUnapprovedRegistrationsQuery
@@ -25,11 +20,9 @@ import { useIsAdmin, useIsApprover } from '../../core/user/UserContext';
export function ActionsTab() {
- const { path, url } = useRouteMatch();
-
- const {data: users, isFetching: loadingUsers, isError: usersError} = useGetNewUsersQuery();
- const {data: disabledSources, isFetching: loadingSources, isError: enableSourcesError} = useGetDisabledSourcesQuery();
- const {data: unApprovedSources, isFetching: loadingApprovals, isError: approveSourcesError} = useGetUnapprovedSourcesQuery();
+ const {data: users, isError: usersError} = useGetNewUsersQuery();
+ const {data: disabledSources, isError: enableSourcesError} = useGetDisabledSourcesQuery();
+ const {data: unApprovedSources, isError: approveSourcesError} = useGetUnapprovedSourcesQuery();
const {data: unApprovedRegistrations, isError: approveRegistrationsError } = useGetUnapprovedRegistrationsQuery();
const {data: disabledRegistrations, isError: enableRegistrationsError } = useGetDisabledRegistrationsQuery();
@@ -70,7 +63,7 @@ export function ActionsTab() {
>
{state.enableSources &&
-
+
Enable Metadata Sources
{ disabledSources?.length ? {disabledSources?.length} : '' }
@@ -78,7 +71,7 @@ export function ActionsTab() {
}
{isApprover && state.approveSources &&
-
+
Approve Metadata Sources
{ unApprovedSources?.length ? {unApprovedSources?.length} : '' }
@@ -86,7 +79,7 @@ export function ActionsTab() {
}
{state.enableRegistrations &&
-
+
Enable Dynamic Registrations
{ disabledRegistrations?.length ? {disabledRegistrations?.length} : '' }
@@ -94,7 +87,7 @@ export function ActionsTab() {
}
{isApprover && state.approveRegistrations &&
-
+
Approve Dynamic Registrations
{ unApprovedRegistrations?.length ? {unApprovedRegistrations?.length} : '' }
@@ -102,7 +95,7 @@ export function ActionsTab() {
}
{isAdmin && state.users &&
-
+
User Access Request
{ users?.length ? {users?.length} : '' }
@@ -111,69 +104,7 @@ export function ActionsTab() {
-
-
-
-
-
-
- {({approve, remove}) =>
- remove(id)}
- onApprove={(s, e) => approve(s, e)}>
- {loadingApprovals &&
}
-
- }
-
- } />
-
-
- {({approve}) =>
- approve({id, approved})}>
- {loadingSources &&
}
-
- }
-
- } />
-
-
-
- {({enable, remove}) =>
- remove(id)}
- onEnable={(s, e) => enable(s, e)}>
- {loadingSources &&
}
-
- }
-
-
-
-
-
-
- {({enable}) =>
- {
- console.log(id, enabled)
- enable({ id, enabled });
- }}>
- {loadingSources &&
}
-
- }
-
-
-
-
-
-
- {loadingUsers &&
}
-
-
- } />
-
+
diff --git a/ui/src/app/dashboard/view/ApproveRegistrations.js b/ui/src/app/dashboard/view/ApproveRegistrations.js
new file mode 100644
index 000000000..fb536450d
--- /dev/null
+++ b/ui/src/app/dashboard/view/ApproveRegistrations.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import Spinner from '../../core/components/Spinner';
+import { DynamicRegistrationList } from '../../dynamic-registration/component/DynamicRegistrationList';
+import { DynamicRegistrationActions } from '../../dynamic-registration/hoc/DynamicRegistrationActions';
+import { useGetUnapprovedRegistrationsQuery } from '../../store/dynamic-registration/DynamicRegistrationSlice';
+
+export function ApproveRegistrations () {
+
+ const {data: unApprovedRegistrations, isLoading } = useGetUnapprovedRegistrationsQuery();
+
+ return (
+
+ {({approve}) =>
+ approve({id, approved})}>
+ {isLoading &&
}
+
+ }
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/view/ApproveSources.js b/ui/src/app/dashboard/view/ApproveSources.js
new file mode 100644
index 000000000..b8adc082d
--- /dev/null
+++ b/ui/src/app/dashboard/view/ApproveSources.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { MetadataActions } from '../../admin/container/MetadataActions';
+import Spinner from '../../core/components/Spinner';
+import SourceList from '../../metadata/domain/source/component/SourceList';
+import { useGetUnapprovedSourcesQuery } from '../../store/metadata/SourceSlice';
+
+export function ApproveSources () {
+
+ const {data: unApprovedSources, isFetching: loadingApprovals} = useGetUnapprovedSourcesQuery();
+
+ return (
+
+ {({approve, remove}) =>
+ remove(id)}
+ onApprove={(s, e) => approve(s, e)}>
+ {loadingApprovals &&
}
+
+ }
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/view/Dashboard.js b/ui/src/app/dashboard/view/Dashboard.js
index b9618d7f2..e43753559 100644
--- a/ui/src/app/dashboard/view/Dashboard.js
+++ b/ui/src/app/dashboard/view/Dashboard.js
@@ -1,18 +1,12 @@
import React from 'react';
import Nav from 'react-bootstrap/Nav';
-import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
-import { ProtectRoute } from '../../core/components/ProtectRoute';
-import { SourcesTab } from './SourcesTab';
-import { ProvidersTab } from './ProvidersTab';
-import { AdminTab } from './AdminTab';
-import { ActionsTab } from './ActionsTab';
import { useCurrentUserLoading, useIsAdmin, useIsApprover } from '../../core/user/UserContext';
-import { DynamicRegistrationsTab } from './DynamicRegistrationsTab';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
import Badge from 'react-bootstrap/Badge';
@@ -22,8 +16,6 @@ import { useGetDisabledRegistrationsQuery, useGetUnapprovedRegistrationsQuery }
export function Dashboard () {
- const { path, url } = useRouteMatch();
-
const isAdmin = useIsAdmin();
const isApprover = useIsApprover();
@@ -57,26 +49,26 @@ export function Dashboard () {
-
-
-
-
-
-
-
-
- } />
-
-
- } />
-
-
-
-
- } />
-
-
-
-
+
}
diff --git a/ui/src/app/dashboard/view/EnableRegistrations.js b/ui/src/app/dashboard/view/EnableRegistrations.js
new file mode 100644
index 000000000..0d0fe2814
--- /dev/null
+++ b/ui/src/app/dashboard/view/EnableRegistrations.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { ProtectRoute } from '../../core/components/ProtectRoute';
+import Spinner from '../../core/components/Spinner';
+import { DynamicRegistrationList } from '../../dynamic-registration/component/DynamicRegistrationList';
+import { DynamicRegistrationActions } from '../../dynamic-registration/hoc/DynamicRegistrationActions';
+import { useGetDisabledRegistrationsQuery } from '../../store/dynamic-registration/DynamicRegistrationSlice';
+
+export function EnableRegistrations () {
+
+ const {data: disabledRegistrations, isLoading } = useGetDisabledRegistrationsQuery();
+
+ return (
+
+
+ {({enable}) =>
+ {
+ console.log(id, enabled)
+ enable({ id, enabled });
+ }}>
+ {isLoading &&
}
+
+ }
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/view/EnableSources.js b/ui/src/app/dashboard/view/EnableSources.js
new file mode 100644
index 000000000..27b2aaa53
--- /dev/null
+++ b/ui/src/app/dashboard/view/EnableSources.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { MetadataActions } from '../../admin/container/MetadataActions';
+import { ProtectRoute } from '../../core/components/ProtectRoute';
+import Spinner from '../../core/components/Spinner';
+import SourceList from '../../metadata/domain/source/component/SourceList';
+import { useGetDisabledSourcesQuery } from '../../store/metadata/SourceSlice';
+
+export function EnableSources () {
+
+ const {data: disabledSources, isFetching: loadingSources} = useGetDisabledSourcesQuery();
+
+ return (
+
+
+ {({enable, remove}) =>
+ remove(id)}
+ onEnable={(s, e) => enable(s, e)}>
+ {loadingSources &&
}
+
+ }
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard/view/UserAccess.js b/ui/src/app/dashboard/view/UserAccess.js
new file mode 100644
index 000000000..c26af6c89
--- /dev/null
+++ b/ui/src/app/dashboard/view/UserAccess.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import UserActions from '../../admin/container/UserActions';
+import { ProtectRoute } from '../../core/components/ProtectRoute';
+import Spinner from '../../core/components/Spinner';
+import { useGetNewUsersQuery } from '../../store/user/UserSlice';
+
+export function UserAccess () {
+
+ const {data: users, isFetching: loadingUsers} = useGetNewUsersQuery();
+
+ return (
+
+
+ {loadingUsers &&
}
+
+
+ );
+}
\ No newline at end of file
diff --git a/ui/src/app/dynamic-registration/DynamicRegistration.js b/ui/src/app/dynamic-registration/DynamicRegistration.js
index b3d08c046..fe32e5059 100644
--- a/ui/src/app/dynamic-registration/DynamicRegistration.js
+++ b/ui/src/app/dynamic-registration/DynamicRegistration.js
@@ -1,28 +1,11 @@
import React from 'react';
-import { Switch, Route, useRouteMatch } from 'react-router-dom';
-
-import { DynamicRegistrationDetail } from './view/DynamicRegistrationDetail';
-
-import { DynamicRegistrationEdit } from './view/DynamicRegistrationEdit';
-import { DynamicRegistrationCreate } from './view/DynamicRegistrationCreate';
+import { Outlet } from 'react-router-dom';
export function DynamicRegistration () {
- const { path } = useRouteMatch();
-
return (
-
-
-
- } />
-
-
- } />
-
-
- } />
-
+
)
}
\ No newline at end of file
diff --git a/ui/src/app/dynamic-registration/hoc/DynamicRegistrationActions.js b/ui/src/app/dynamic-registration/hoc/DynamicRegistrationActions.js
index 69a266490..768ff3172 100644
--- a/ui/src/app/dynamic-registration/hoc/DynamicRegistrationActions.js
+++ b/ui/src/app/dynamic-registration/hoc/DynamicRegistrationActions.js
@@ -1,5 +1,5 @@
import React, { Fragment, useMemo } from 'react';
-import { useHistory } from 'react-router';
+import { useNavigate } from 'react-router';
import { DeleteConfirmation } from '../../core/components/DeleteConfirmation';
import {
@@ -11,7 +11,7 @@ import {
export function DynamicRegistrationActions ({ children }) {
- const history = useHistory();
+ const navigate = useNavigate();
const [remove, {isSuccess: isDeleteSuccess}] = useDeleteDynamicRegistrationMutation();
const [approve] = useApproveDynamicRegistrationMutation();
@@ -28,9 +28,9 @@ export function DynamicRegistrationActions ({ children }) {
React.useEffect(() => {
if (isDeleteSuccess) {
- history.push('/dashboard/dynamic-registration');
+ navigate('/dashboard/dynamic-registration');
}
- }, [isDeleteSuccess, history]);
+ }, [isDeleteSuccess, navigate]);
return (
diff --git a/ui/src/app/dynamic-registration/view/DynamicRegistrationCreate.js b/ui/src/app/dynamic-registration/view/DynamicRegistrationCreate.js
index 5d707e32a..1aaee37e9 100644
--- a/ui/src/app/dynamic-registration/view/DynamicRegistrationCreate.js
+++ b/ui/src/app/dynamic-registration/view/DynamicRegistrationCreate.js
@@ -1,5 +1,5 @@
import React, {Fragment} from 'react';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { Schema } from '../../form/Schema';
@@ -8,19 +8,20 @@ import { DynamicRegistrationForm } from '../component/DynamicRegistrationForm';
import DynamicConfigurationDefinition from '../hoc/DynamicConfigurationDefinition';
import { useCreateDynamicRegistrationMutation } from '../../store/dynamic-registration/DynamicRegistrationSlice';
import Spinner from '../../core/components/Spinner';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function DynamicRegistrationCreate () {
- const history = useHistory();
+ const navigate = useNavigate();
const [create, {isSuccess, isLoading: loading}] = useCreateDynamicRegistrationMutation();
const save = React.useCallback(async (registration) => await create({registration}), [create]);
- const gotoDetail = React.useCallback((state = null) => {
+ const gotoDetail = React.useCallback(() => {
setBlocking(false);
- history.push(`/dashboard/dynamic-registration`, state);
- }, [history]);
+ setTimeout(() => navigate(`/dashboard/dynamic-registration`), 0);
+ }, [navigate]);
React.useEffect(() => {
if (isSuccess) {
@@ -30,14 +31,11 @@ export function DynamicRegistrationCreate () {
const [blocking, setBlocking] = React.useState(false);
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js b/ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js
index 7d5d800ea..f21eff8d0 100644
--- a/ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js
+++ b/ui/src/app/dynamic-registration/view/DynamicRegistrationDetail.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Link, useHistory, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
import Form from 'react-bootstrap/Form';
import Translate from '../../i18n/components/translate';
import FormattedDate from '../../core/components/FormattedDate';
@@ -21,12 +21,12 @@ import { GroupsProvider } from '../../admin/hoc/GroupsProvider';
export function DynamicRegistrationDetail () {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const { data: detail } = useSelectDynamicRegistrationQuery({id});
const edit = (section) => {
- history.push(`/dynamic-registration/${id}/edit`);
+ navigate(`/dynamic-registration/${id}/edit`);
};
const isAdmin = useIsAdmin();
diff --git a/ui/src/app/dynamic-registration/view/DynamicRegistrationEdit.js b/ui/src/app/dynamic-registration/view/DynamicRegistrationEdit.js
index 5050d6c0d..0170e45c6 100644
--- a/ui/src/app/dynamic-registration/view/DynamicRegistrationEdit.js
+++ b/ui/src/app/dynamic-registration/view/DynamicRegistrationEdit.js
@@ -1,5 +1,5 @@
import React, { Fragment, useCallback } from 'react';
-import { Prompt, useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { Schema } from '../../form/Schema';
@@ -8,11 +8,12 @@ import { DynamicRegistrationForm } from '../component/DynamicRegistrationForm';
import DynamicConfigurationDefinition from '../hoc/DynamicConfigurationDefinition';
import { useSelectDynamicRegistrationQuery, useUpdateDynamicRegistrationMutation } from '../../store/dynamic-registration/DynamicRegistrationSlice';
import Spinner from '../../core/components/Spinner';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function DynamicRegistrationEdit () {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const [update, {isSuccess}] = useUpdateDynamicRegistrationMutation();
const {data: detail, isFetching: loading} = useSelectDynamicRegistrationQuery({id});
@@ -21,10 +22,10 @@ export function DynamicRegistrationEdit () {
gotoDetail();
};
- const gotoDetail = useCallback((state = null) => {
+ const gotoDetail = useCallback(() => {
setBlocking(false);
- history.push(`/dynamic-registration/${id}`, state);
- }, [id, history]);
+ setTimeout(() => navigate(`/dynamic-registration/${id}`), 0);
+ }, [id, navigate]);
const [blocking, setBlocking] = React.useState(false);
@@ -34,16 +35,13 @@ export function DynamicRegistrationEdit () {
}
}, [isSuccess, gotoDetail]);
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
{detail &&
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
index 9fabd0661..be48a3473 100644
--- a/ui/src/app/form/component/fields/FilterTargetField.js
+++ b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -8,7 +8,6 @@ import { useTranslator } from '../../../i18n/hooks';
import { InfoIcon } from '../InfoIcon';
import { AsyncTypeahead } from 'react-bootstrap-typeahead';
import useFetch from 'use-http';
-import queryString from 'query-string';
import API_BASE_PATH from '../../../App.constant';
import isNil from 'lodash/isNil';
import capitalize from 'lodash/capitalize';
@@ -19,6 +18,7 @@ import Editor from 'react-simple-code-editor';
import { FilterTargetPreview } from '../../../metadata/hoc/FilterTargetPreview';
import { remove } from 'lodash';
+import { createSearchParams } from 'react-router-dom';
const ToggleButton = ({ isOpen, onClick, disabled }) => (
|
-
+
Edit
diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
index 0ae86bf51..e723ebc4f 100644
--- a/ui/src/app/metadata/editor/MetadataEditor.js
+++ b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -1,7 +1,7 @@
import React from 'react';
import { faCogs, faExclamationTriangle, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useHistory, useParams, Prompt } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Button from 'react-bootstrap/Button';
import Alert from 'react-bootstrap/Alert';
@@ -21,6 +21,7 @@ import { checkChanges } from '../hooks/utility';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useUserGroup } from '../../core/user/UserContext';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function MetadataEditor ({ restore, current, reload }) {
@@ -34,7 +35,7 @@ export function MetadataEditor ({ restore, current, reload }) {
const notificationDispatch = useDispatch();
const { data } = useMetadataEntities(type, {}, []);
- const history = useHistory();
+ const navigate = useNavigate();
const definition = React.useContext(MetadataDefinitionContext);
const schema = React.useContext(MetadataSchemaContext);
const base = React.useContext(MetadataObjectContext);
@@ -72,14 +73,14 @@ export function MetadataEditor ({ restore, current, reload }) {
const gotoDetail = (state = null) => {
setBlocking(false);
- setTimeout(() => history.push(`/metadata/${type}/${id}`, state) );
+ setTimeout(() => navigate(`/metadata/${type}/${id}`, { state }), 0);
};
const onNavigate = (path) => {
const resetBlock = blocking;
setBlocking(false);
setTimeout(() => {
- history.push(restore ? `../${path}/edit` : path);
+ navigate(restore ? `../edit` : `../edit/${path}`);
setBlocking(resetBlock);
});
};
@@ -92,14 +93,11 @@ export function MetadataEditor ({ restore, current, reload }) {
const canFilter = restore ? false : FilterableProviders.indexOf(definition.type) > -1;
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/metadata/editor/MetadataFilterList.js b/ui/src/app/metadata/editor/MetadataFilterList.js
index b67000c5a..48713f850 100644
--- a/ui/src/app/metadata/editor/MetadataFilterList.js
+++ b/ui/src/app/metadata/editor/MetadataFilterList.js
@@ -1,7 +1,7 @@
import React from 'react';
import { faArrowLeft, faCogs, faPlus } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useHistory, useParams } from 'react-router-dom';
+import { generatePath, useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
@@ -20,13 +20,13 @@ export function MetadataFilterList() {
const translator = useTranslator();
- const history = useHistory();
+ const navigate = useNavigate();
const definition = React.useContext(MetadataDefinitionContext);
const schema = React.useContext(MetadataSchemaContext);
const current = React.useContext(MetadataObjectContext);
const onNavigate = (path) => {
- history.push(`../edit/${path}`);
+ navigate(generatePath(`/metadata/provider/${id}/edit/${path}`));
};
return (
@@ -44,7 +44,7 @@ export function MetadataFilterList() {
-
+
Return to Provider
@@ -55,7 +55,7 @@ export function MetadataFilterList() {
current={section}
base={`/metadata/${type}/${id}/edit`}
format='dropdown'>
-
@@ -64,7 +64,7 @@ export function MetadataFilterList() {
-
+
Add Filter
@@ -79,7 +79,7 @@ export function MetadataFilterList() {
current={section}
base={`/metadata/${type}/${id}/edit`}
format='tabs'>
-
diff --git a/ui/src/app/metadata/new/NewAttribute.js b/ui/src/app/metadata/new/NewAttribute.js
index 01b9c8fae..d3b88d6b4 100644
--- a/ui/src/app/metadata/new/NewAttribute.js
+++ b/ui/src/app/metadata/new/NewAttribute.js
@@ -3,7 +3,7 @@ import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from 'react-bootstrap/Button';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataAttributeEditor } from '../editor/MetadataAttributeEditor';
import { useMetadataAttribute } from '../hooks/api';
@@ -13,9 +13,10 @@ import MetadataSchema from '../hoc/MetadataSchema';
import { MetadataForm } from '../hoc/MetadataFormContext';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function NewAttribute() {
- const history = useHistory();
+ const navigate = useNavigate();
const dispatch = useDispatch();
@@ -45,17 +46,14 @@ export function NewAttribute() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes`, state);
+ setTimeout(() => navigate(`/metadata/attributes`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/metadata/new/NewBundle.js b/ui/src/app/metadata/new/NewBundle.js
index 25d2903c8..141f7e7b9 100644
--- a/ui/src/app/metadata/new/NewBundle.js
+++ b/ui/src/app/metadata/new/NewBundle.js
@@ -3,7 +3,7 @@ import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from 'react-bootstrap/Button';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { AttributeBundleDefinition } from '../domain/attribute/AttributeBundleDefinition';
@@ -11,9 +11,10 @@ import MetadataSchema from '../hoc/MetadataSchema';
import { MetadataForm } from '../hoc/MetadataFormContext';
import { AttributeBundleEditor } from '../editor/AttributeBundleEditor';
import { AttributeBundleApi } from '../hoc/attribute/AttributeBundleApi';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function NewBundle() {
- const history = useHistory();
+ const navigate = useNavigate();
const definition = AttributeBundleDefinition;
@@ -25,19 +26,16 @@ export function NewBundle() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes/bundles`, state);
+ setTimeout(() => navigate(`/metadata/attributes/bundles`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
{(load, find, create, update, remove, loading) =>
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/metadata/new/NewFilter.js b/ui/src/app/metadata/new/NewFilter.js
index 197d2534d..631f5087c 100644
--- a/ui/src/app/metadata/new/NewFilter.js
+++ b/ui/src/app/metadata/new/NewFilter.js
@@ -2,7 +2,7 @@ import React from 'react';
import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from 'react-bootstrap/Button';
-import { Prompt, useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataFilterEditor } from '../editor/MetadataFilterEditor';
import { MetadataForm } from '../hoc/MetadataFormContext';
@@ -11,11 +11,12 @@ import { useMetadataFilters, useMetadataFilterTypes } from '../hooks/api';
import { MetadataFilterTypeSelector } from '../wizard/MetadataFilterTypeSelector';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function NewFilter() {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const types = useMetadataFilterTypes();
const dispatch = useDispatch();
@@ -41,7 +42,7 @@ export function NewFilter() {
const gotoDetail = (state = null) => {
setBlocking(false);
setTimeout(() => {
- history.push(`/metadata/provider/${id}`, state);
+ navigate(`/metadata/provider/${id}`);
});
};
@@ -49,19 +50,16 @@ export function NewFilter() {
const resetBlock = blocking;
setBlocking(false);
setTimeout(() => {
- history.push(path);
+ navigate(`../new/${path}`);
setBlocking(resetBlock);
- });
+ }, 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/metadata/new/NewSource.js b/ui/src/app/metadata/new/NewSource.js
index 3908165e5..8ea5d57cb 100644
--- a/ui/src/app/metadata/new/NewSource.js
+++ b/ui/src/app/metadata/new/NewSource.js
@@ -1,22 +1,17 @@
-import React from 'react';
-import { NavLink, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
+import React, { createContext } from 'react';
+import { NavLink, Outlet } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
-import { MetadataSchema } from '../hoc/MetadataSchema';
-import { MetadataWizard } from '../view/MetadataWizard';
-import { MetadataCopy } from '../view/MetadataCopy';
-import { MetadataUpload } from '../view/MetadataUpload';
+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCopy, faLink, faPlusSquare } from '@fortawesome/free-solid-svg-icons';
-import { MetadataSourceProtocolSelector } from '../wizard/MetadataSourceProtocolSelector';
-import { useMetadataSourceProtocols } from '../hooks/api';
-export function NewSource() {
+export const ShowNavContext = createContext(true);
- const { path, url } = useRouteMatch();
+export function NewSource() {
const [showNav, setShowNav] = React.useState(true);
- const protocols = useMetadataSourceProtocols();
+ const btnClasses = 'btn btn-lg btn-block d-flex flex-column justify-content-center align-items-center';
return (
@@ -38,10 +33,11 @@ export function NewSource() {
+ className={({ isActive }) =>
+ isActive ? `${btnClasses} btn-primary` : `${btnClasses} btn-secondary`
+ }>
Upload/URL
@@ -51,11 +47,12 @@ export function NewSource() {
+ className={({ isActive }) =>
+ isActive ? `${btnClasses} btn-info` : `${btnClasses} btn-secondary`
+ }>
Create
@@ -65,11 +62,12 @@ export function NewSource() {
+ className={({ isActive }) =>
+ isActive ? `${btnClasses} btn-warning` : `${btnClasses} btn-secondary`
+ }>
Copy
@@ -79,36 +77,9 @@ export function NewSource() {
}
-
-
-
- {(data, onRestart) =>
-
- { setShowNav(s) }}
- onCallback={onRestart}
- data={{
- protocol: data.protocol,
- serviceProviderName: data.serviceProviderName,
- entityId: data.entityId
- }} />
-
- }
-
-
- } />
-
-
- } />
-
-
- { setShowNav(s) } } />
-
- } />
-
-
- } />
-
+
+
+
diff --git a/ui/src/app/metadata/view/EditFilter.js b/ui/src/app/metadata/view/EditFilter.js
index 204c72f55..923378993 100644
--- a/ui/src/app/metadata/view/EditFilter.js
+++ b/ui/src/app/metadata/view/EditFilter.js
@@ -3,7 +3,7 @@ import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from 'react-bootstrap/Button';
-import { Prompt, useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataFilterEditor } from '../editor/MetadataFilterEditor';
import { MetadataForm } from '../hoc/MetadataFormContext';
@@ -13,6 +13,7 @@ import { useMetadataFilterObject } from '../hoc/MetadataFilterSelector';
import API_BASE_PATH from '../../App.constant';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function EditFilter() {
@@ -20,7 +21,7 @@ export function EditFilter() {
const { id, filterId } = useParams();
const filter = useMetadataFilterObject();
- const history = useHistory();
+ const navigate = useNavigate();
const { update, loading } = useMetadataUpdater(`${API_BASE_PATH}${getMetadataPath('provider')}/${id}/Filters/${filterId}`, filter);
@@ -30,7 +31,7 @@ export function EditFilter() {
const resetBlock = blocking;
setBlocking(false);
setTimeout(() => {
- history.push(path);
+ navigate(`../${filterId}/edit/${path}`);
setBlocking(resetBlock);
});
};
@@ -52,17 +53,14 @@ export function EditFilter() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/provider/${id}`, state);
+ setTimeout(() => navigate(`/metadata/provider/${id}`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
Edit filter
diff --git a/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js b/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
index 4948fc86f..3f6a31119 100644
--- a/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
+++ b/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
@@ -3,7 +3,7 @@ import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from 'react-bootstrap/Button';
-import { Prompt, useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataAttributeEditor } from '../editor/MetadataAttributeEditor';
@@ -12,10 +12,11 @@ import MetadataSchema from '../hoc/MetadataSchema';
import { MetadataForm } from '../hoc/MetadataFormContext';
import { AttributeBundleSelector } from '../hoc/attribute/AttributeBundleSelector';
import { AttributeBundleApi } from '../hoc/attribute/AttributeBundleApi';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function MetadataAttributeBundleEdit() {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const definition = AttributeBundleDefinition;
@@ -27,20 +28,17 @@ export function MetadataAttributeBundleEdit() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes/bundles`, state);
+ setTimeout(() => navigate(`/metadata/attributes/bundles`), 0);
};
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
{(load, find, create, update, remove, loading) =>
{(bundle) =>
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/metadata/view/MetadataAttributeBundles.js b/ui/src/app/metadata/view/MetadataAttributeBundles.js
index c1f977372..b0e805e19 100644
--- a/ui/src/app/metadata/view/MetadataAttributeBundles.js
+++ b/ui/src/app/metadata/view/MetadataAttributeBundles.js
@@ -29,7 +29,7 @@ export function MetadataAttributeBundles() {
-
+
Add new bundle
@@ -51,7 +51,7 @@ export function MetadataAttributeBundles() {
{ bundle.name } |
|
-
+
Edit
diff --git a/ui/src/app/metadata/view/MetadataAttributeEdit.js b/ui/src/app/metadata/view/MetadataAttributeEdit.js
index dc617d523..2b6967d61 100644
--- a/ui/src/app/metadata/view/MetadataAttributeEdit.js
+++ b/ui/src/app/metadata/view/MetadataAttributeEdit.js
@@ -3,7 +3,7 @@ import { faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import Button from 'react-bootstrap/Button';
-import { Prompt, useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataAttributeEditor } from '../editor/MetadataAttributeEditor';
import { useMetadataAttribute } from '../hooks/api';
@@ -13,10 +13,11 @@ import MetadataSchema from '../hoc/MetadataSchema';
import { MetadataForm } from '../hoc/MetadataFormContext';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useDispatch } from 'react-redux';
+import { usePrompt } from '../../core/hooks/usePrompt';
export function MetadataAttributeEdit() {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const definition = CustomAttributeDefinition;
@@ -55,7 +56,7 @@ export function MetadataAttributeEdit() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes`, state);
+ setTimeout(() => navigate(`/metadata/attributes`), 0);
};
const [attribute, setAttribute] = React.useState();
@@ -65,14 +66,11 @@ export function MetadataAttributeEdit() {
loadAttribute();
}, []);
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
diff --git a/ui/src/app/metadata/view/MetadataAttributeList.js b/ui/src/app/metadata/view/MetadataAttributeList.js
index a60101f3c..6b5431f40 100644
--- a/ui/src/app/metadata/view/MetadataAttributeList.js
+++ b/ui/src/app/metadata/view/MetadataAttributeList.js
@@ -31,7 +31,7 @@ export function MetadataAttributeList ({entities, onDelete}) {
-
+
Add new attribute
@@ -63,7 +63,7 @@ export function MetadataAttributeList ({entities, onDelete}) {
{attr.helpText} |
{attr.defaultValue?.toString()} |
-
+
Edit
diff --git a/ui/src/app/metadata/view/MetadataConfirmRestore.js b/ui/src/app/metadata/view/MetadataConfirmRestore.js
index e0c786de6..e8e35660f 100644
--- a/ui/src/app/metadata/view/MetadataConfirmRestore.js
+++ b/ui/src/app/metadata/view/MetadataConfirmRestore.js
@@ -50,8 +50,8 @@ export function MetadataConfirmRestore () {
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.
- Cancel
- Restore
+ Cancel
+ Restore
diff --git a/ui/src/app/metadata/view/MetadataCopy.js b/ui/src/app/metadata/view/MetadataCopy.js
index 5156fc6a2..e1855959b 100644
--- a/ui/src/app/metadata/view/MetadataCopy.js
+++ b/ui/src/app/metadata/view/MetadataCopy.js
@@ -2,14 +2,17 @@ import React from 'react';
import { CopySource } from '../copy/CopySource';
import { SaveCopy } from '../copy/SaveCopy';
import { useMetadataEntity } from '../hooks/api';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
import { useDispatch } from 'react-redux';
+import { ShowNavContext } from '../new/NewSource';
-export function MetadataCopy ({ onShowNav }) {
+export function MetadataCopy () {
const { post, response, loading } = useMetadataEntity('source');
- const history = useHistory();
+ const navigate = useNavigate();
+
+ const { setShowNav } = React.useContext(ShowNavContext);
const dispatch = useDispatch();
@@ -24,18 +27,18 @@ export function MetadataCopy ({ onShowNav }) {
const next = (data) => {
setCopy(data);
setConfirm(true);
- onShowNav(false);
+ setShowNav(false);
};
const back = (data) => {
setConfirm(false);
- onShowNav(true);
+ setShowNav(true);
};
async function save (data) {
await post('', data);
if (response.ok) {
- history.push('/');
+ navigate('/');
} else {
const { errorCode, errorMessage, cause } = response.data;
dispatch(createNotificationAction(
diff --git a/ui/src/app/metadata/view/MetadataEdit.js b/ui/src/app/metadata/view/MetadataEdit.js
index 6fcabd933..1e4c24d3d 100644
--- a/ui/src/app/metadata/view/MetadataEdit.js
+++ b/ui/src/app/metadata/view/MetadataEdit.js
@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useContext } from 'react';
import { MetadataForm } from '../hoc/MetadataFormContext';
import { MetadataEditor } from '../editor/MetadataEditor';
-import { useMetadataObject } from '../hoc/MetadataSelector';
+import { MetadataLoaderContext, useMetadataObject } from '../hoc/MetadataSelector';
-export function MetadataEdit({reload}) {
+export function MetadataEdit() {
const base = useMetadataObject();
+ const {reload} = useContext(MetadataLoaderContext);
return (
diff --git a/ui/src/app/metadata/view/MetadataHistory.js b/ui/src/app/metadata/view/MetadataHistory.js
index 7347f6e4a..fd5b3d991 100644
--- a/ui/src/app/metadata/view/MetadataHistory.js
+++ b/ui/src/app/metadata/view/MetadataHistory.js
@@ -1,7 +1,6 @@
import React from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { createSearchParams, useNavigate, useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
-import queryString from 'query-string';
import Button from 'react-bootstrap/Button';
import FormattedDate from '../../core/components/FormattedDate';
@@ -22,7 +21,7 @@ const sortVersionsByDate = (versions) => {
export function MetadataHistory () {
const { type, id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const { data, loading } = useMetadataHistory(type, id, {
cachePolicy: 'no-cache'
@@ -39,10 +38,10 @@ export function MetadataHistory () {
};
const compare = (versions) => {
const s = sortVersionsByDate(versions);
- const path = `/metadata/${type}/${id}/configuration/compare?${queryString.stringify({versions: s.map(s => s.id)}, {
+ const path = `/metadata/${type}/${id}/configuration/compare?${createSearchParams({versions: s.map(s => s.id)}, {
skipNull: true,
- })}`;
- history.push(path);
+ }).toString()}`;
+ navigate(path);
};
const [selected, setSelected] = React.useState([]);
diff --git a/ui/src/app/metadata/view/MetadataOptions.js b/ui/src/app/metadata/view/MetadataOptions.js
index 7ca972e4a..cc1494edf 100644
--- a/ui/src/app/metadata/view/MetadataOptions.js
+++ b/ui/src/app/metadata/view/MetadataOptions.js
@@ -1,13 +1,13 @@
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
import { faArrowDown, faArrowUp, faHistory, faPlus, faToggleOff, faToggleOn, faTrash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Link, useHistory, useParams } from 'react-router-dom';
+import { Link, useNavigate, useParams } from 'react-router-dom';
import Button from 'react-bootstrap/Button';
import { scroller } from 'react-scroll';
import Translate from '../../i18n/components/translate';
-import { MetadataObjectContext } from '../hoc/MetadataSelector';
+import { MetadataLoaderContext, MetadataObjectContext } from '../hoc/MetadataSelector';
import { MetadataHeader } from '../component/MetadataHeader';
import { MetadataConfiguration } from '../component/MetadataConfiguration';
import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
@@ -20,13 +20,15 @@ import { useMetadataSchema } from '../hooks/schema';
import { FilterableProviders } from '../domain/provider';
import { useCanEnable, useIsAdmin } from '../../core/user/UserContext';
-export function MetadataOptions ({reload}) {
+export function MetadataOptions () {
const metadata = React.useContext(MetadataObjectContext);
const definition = React.useContext(MetadataDefinitionContext);
const schema = React.useContext(MetadataSchemaContext);
const processed = useMetadataSchema(definition, schema);
- const history = useHistory();
+ const navigate = useNavigate();
+
+ const {reload} = useContext(MetadataLoaderContext);
const { type, id } = useParams();
@@ -40,10 +42,10 @@ export function MetadataOptions ({reload}) {
});
};
- const redirectOnDelete = () => history.push('/dashboard');
+ const redirectOnDelete = () => navigate('/dashboard');
const edit = (section) => {
- history.push(`/metadata/${type}/${id}/edit/${section}`);
+ navigate(`/metadata/${type}/${id}/edit/${section}`);
}
const canFilter = FilterableProviders.indexOf(definition.type) > -1;
diff --git a/ui/src/app/metadata/view/MetadataUpload.js b/ui/src/app/metadata/view/MetadataUpload.js
index 09868aac2..d21cce890 100644
--- a/ui/src/app/metadata/view/MetadataUpload.js
+++ b/ui/src/app/metadata/view/MetadataUpload.js
@@ -1,7 +1,7 @@
import React from 'react';
import Form from 'react-bootstrap/Form';
import { useForm } from "react-hook-form";
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import Button from 'react-bootstrap/Button';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import { faAsterisk, faSave, faSpinner } from '@fortawesome/free-solid-svg-icons';
@@ -16,7 +16,7 @@ import { useDispatch } from 'react-redux';
export function MetadataUpload() {
- const history = useHistory();
+ const navigate = useNavigate();
const dispatch = useDispatch();
const [saving, setSaving] = React.useState(false);
@@ -50,7 +50,7 @@ export function MetadataUpload() {
if (response.ok) {
setSaving(false);
- history.push('/dashboard');
+ navigate('/dashboard');
} else {
let msg;
if (f) {
diff --git a/ui/src/app/metadata/view/MetadataWizard.js b/ui/src/app/metadata/view/MetadataWizard.js
index c41c57ea6..92379f720 100644
--- a/ui/src/app/metadata/view/MetadataWizard.js
+++ b/ui/src/app/metadata/view/MetadataWizard.js
@@ -6,14 +6,17 @@ import { MetadataProviderWizard } from '../wizard/MetadataProviderWizard';
import { Wizard } from '../wizard/Wizard';
import { useMetadataEntity } from '../hooks/api';
import { createNotificationAction, NotificationTypes } from '../../store/notifications/NotificationSlice';
-import { Prompt, useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
import { useTranslator } from '../../i18n/hooks';
import { useDispatch } from 'react-redux';
+import { ShowNavContext } from '../new/NewSource';
+import { usePrompt } from '../../core/hooks/usePrompt';
-export function MetadataWizard ({type, data, onCallback, onContinue}) {
+export function MetadataWizard ({type, data, onCallback}) {
- const history = useHistory();
+ const navigate = useNavigate();
const translator = useTranslator();
+ const { setShowNav } = React.useContext(ShowNavContext);
const { post, loading, response } = useMetadataEntity(type === 'source' ? 'source' : 'provider');
@@ -23,7 +26,7 @@ export function MetadataWizard ({type, data, onCallback, onContinue}) {
const gotoDetail = () => {
setTimeout(() => {
- history.push(`/dashboard/metadata/manager/${type === 'source' ? 'resolvers' : 'providers'}`);
+ navigate(`/dashboard/metadata/manager/${type === 'source' ? 'resolvers' : 'providers'}`);
}, 1);
};
@@ -48,17 +51,14 @@ export function MetadataWizard ({type, data, onCallback, onContinue}) {
}
}
+ const prompt = usePrompt(blocking, `message.unsaved-editor`);
+
return (
-
- `message.unsaved-editor`
- }
- />
+ {prompt}
{type === 'source' ?
-
+
:
}
diff --git a/ui/src/app/metadata/wizard/MetadataSourceProtocolSelector.js b/ui/src/app/metadata/wizard/MetadataSourceProtocolSelector.js
index cb0847d95..ae4436e51 100644
--- a/ui/src/app/metadata/wizard/MetadataSourceProtocolSelector.js
+++ b/ui/src/app/metadata/wizard/MetadataSourceProtocolSelector.js
@@ -7,11 +7,13 @@ import Form from 'react-bootstrap/Form';
import Translate from '../../i18n/components/translate';
import { InfoIcon } from '../../form/component/InfoIcon';
import { useTranslator } from '../../i18n/hooks';
-import { useMetadataSources } from '../hooks/api';
+import { useMetadataSourceProtocols, useMetadataSources } from '../hooks/api';
import { useUserGroup } from '../../core/user/UserContext';
import Button from 'react-bootstrap/Button';
-export function MetadataSourceProtocolSelector({ types = [], loading, children}) {
+export function MetadataSourceProtocolSelector({ loading, children}) {
+
+ const types = useMetadataSourceProtocols();
const [sourceNames, setSourceNames] = React.useState([]);
const [sourceIds, setSourceIds] = React.useState([]);
diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
index bbd4523b8..f3e901ecd 100644
--- a/ui/src/setupProxy.js
+++ b/ui/src/setupProxy.js
@@ -3,7 +3,7 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
- const port = 8080;
+ const port = 8081;
app.use(
'/api',
| | | | |