-
+
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..fa17062ab 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';
@@ -13,7 +13,7 @@ import { PropertiesProvider } from '../hoc/PropertiesProvider';
import { useDispatch } from 'react-redux';
export function NewConfiguration({ configurations }) {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
@@ -41,19 +41,19 @@ export function NewConfiguration({ configurations }) {
const gotoList = (state = null) => {
setBlocking(false);
- history.push(`/configurations`, state);
+ navigate(`/configurations`);
};
const [configuration] = React.useState({});
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/admin/container/NewGroup.js b/ui/src/app/admin/container/NewGroup.js
index 7bebbe49e..587f8f330 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';
@@ -13,7 +13,7 @@ import { BASE_PATH } from '../../App.constant';
import { useDispatch } from 'react-redux';
export function NewGroup({ groups }) {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
@@ -41,17 +41,17 @@ export function NewGroup({ groups }) {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/groups`, state);
+ navigate(`/groups`);
};
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/admin/container/NewRole.js b/ui/src/app/admin/container/NewRole.js
index 19b6a04d7..a818508ca 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';
@@ -13,7 +13,7 @@ import { BASE_PATH } from '../../App.constant';
import { useDispatch } from 'react-redux';
export function NewRole() {
- const history = useHistory();
+ const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
@@ -41,17 +41,17 @@ export function NewRole() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/roles`, state);
+ navigate(`/roles`);
};
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
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/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..9ecc515dd 100644
--- a/ui/src/app/core/components/ProtectRoute.test.js
+++ b/ui/src/app/core/components/ProtectRoute.test.js
@@ -11,7 +11,7 @@ jest.mock('../user/UserContext', () => ({
}));
const renderWithRouter = (ui, { route = '/' } = {}) => {
- window.history.pushState({}, 'Test page', route)
+ window.navigateState({}, 'Test page', route)
return render(ui, { wrapper: BrowserRouter })
}
diff --git a/ui/src/app/core/components/UserConfirmation.js b/ui/src/app/core/components/UserConfirmation.js
index 2b264f625..16e7d3c10 100644
--- a/ui/src/app/core/components/UserConfirmation.js
+++ b/ui/src/app/core/components/UserConfirmation.js
@@ -2,7 +2,7 @@ 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 { useNavigate } from 'react-router-dom';
import { reload } from '../utility/window';
export function UserConfirmation({children}) {
@@ -21,14 +21,14 @@ export function UserConfirmation({children}) {
export function ConfirmWindow ({message, confirm, setConfirm, confirmCallback}) {
- const history = useHistory();
+ const navigate = useNavigate();
const allowTransition = () => {
setConfirm(false);
confirmCallback(true);
- if (history.location.pathname.includes('provider/new')) {
+ /*if (history.location.pathname.includes('provider/new')) {
reload();
- }
+ }*/
}
const blockTransition = () => {
diff --git a/ui/src/app/core/components/UserConfirmation.test.js b/ui/src/app/core/components/UserConfirmation.test.js
index 58f73c3b8..ceb48f48d 100644
--- a/ui/src/app/core/components/UserConfirmation.test.js
+++ b/ui/src/app/core/components/UserConfirmation.test.js
@@ -16,7 +16,7 @@ jest.mock('../utility/window', () => ({
const mockIncludes = jest.fn();
jest.mock('react-router-dom', () => ({
- useHistory: () => ({
+ useNavigate: () => ({
location: {
pathname: {
includes: mockIncludes
diff --git a/ui/src/app/core/hooks/useBlocker.tsx b/ui/src/app/core/hooks/useBlocker.tsx
new file mode 100644
index 000000000..0fd76a5fc
--- /dev/null
+++ b/ui/src/app/core/hooks/useBlocker.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { UNSAFE_NavigationContext as NavigationContext } from "react-router-dom";
+
+///console.log(router);
+
+export function useBlocker(blocker, when = true) {
+ const { navigator } = React.useContext(NavigationContext);
+
+ console.log(navigator);
+
+ React.useEffect(() => {
+ if (!when) return;
+
+ const unblock = navigator.block((tx) => {
+ const autoUnblockingTx = {
+ ...tx,
+ retry() {
+ unblock();
+ tx.retry();
+ },
+ };
+
+ blocker(autoUnblockingTx);
+ });
+
+ return unblock;
+ }, [navigator, blocker, when]);
+}
+
+export default function usePrompt(message, when = true) {
+ const blocker = React.useCallback(
+ (tx) => {
+ if (window.confirm(message)) tx.retry();
+ },
+ [message]
+ );
+
+ useBlocker(blocker, when);
+}
diff --git a/ui/src/app/dashboard/view/ActionsTab.js b/ui/src/app/dashboard/view/ActionsTab.js
index 030f870a1..5c716ce02 100644
--- a/ui/src/app/dashboard/view/ActionsTab.js
+++ b/ui/src/app/dashboard/view/ActionsTab.js
@@ -4,7 +4,7 @@ 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 { Routes, Route, Navigate, NavLink } from 'react-router-dom';
import { MetadataActions } from '../../admin/container/MetadataActions';
import UserActions from '../../admin/container/UserActions';
@@ -25,8 +25,6 @@ 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();
@@ -70,7 +68,7 @@ export function ActionsTab() {
>
{state.enableSources &&
-
+
Enable Metadata Sources
{ disabledSources?.length ? {disabledSources?.length} : '' }
@@ -78,7 +76,7 @@ export function ActionsTab() {
}
{isApprover && state.approveSources &&
-
+
Approve Metadata Sources
{ unApprovedSources?.length ? {unApprovedSources?.length} : '' }
@@ -86,7 +84,7 @@ export function ActionsTab() {
}
{state.enableRegistrations &&
-
+
Enable Dynamic Registrations
{ disabledRegistrations?.length ? {disabledRegistrations?.length} : '' }
@@ -94,7 +92,7 @@ export function ActionsTab() {
}
{isApprover && state.approveRegistrations &&
-
+
Approve Dynamic Registrations
{ unApprovedRegistrations?.length ? {unApprovedRegistrations?.length} : '' }
@@ -102,7 +100,7 @@ export function ActionsTab() {
}
{isAdmin && state.users &&
-
+
User Access Request
{ users?.length ? {users?.length} : '' }
@@ -111,11 +109,9 @@ export function ActionsTab() {
-
-
-
-
-
+
+ } />
+
{({approve, remove}) =>
} />
-
+
{({approve}) =>
} />
-
+
{({enable, remove}) =>
@@ -149,8 +145,8 @@ export function ActionsTab() {
}
-
-
+ } />
+
{({enable}) =>
@@ -165,15 +161,15 @@ export function ActionsTab() {
}
-
-
+ } />
+
{loadingUsers &&
}
} />
-
+
diff --git a/ui/src/app/dashboard/view/Dashboard.js b/ui/src/app/dashboard/view/Dashboard.js
index b9618d7f2..09f6ad8b6 100644
--- a/ui/src/app/dashboard/view/Dashboard.js
+++ b/ui/src/app/dashboard/view/Dashboard.js
@@ -1,7 +1,7 @@
import React from 'react';
import Nav from 'react-bootstrap/Nav';
-import { Switch, Route, Redirect, useRouteMatch } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
@@ -22,8 +22,6 @@ import { useGetDisabledRegistrationsQuery, useGetUnapprovedRegistrationsQuery }
export function Dashboard () {
- const { path, url } = useRouteMatch();
-
const isAdmin = useIsAdmin();
const isApprover = useIsApprover();
@@ -57,26 +55,26 @@ export function Dashboard () {
-
-
-
-
-
-
-
-
- } />
-
+
+ } />
+ } />
+ } />
+ } />
+
} />
-
+
} />
-
-
-
-
+ } />
+
}
diff --git a/ui/src/app/dynamic-registration/DynamicRegistration.js b/ui/src/app/dynamic-registration/DynamicRegistration.js
index b3d08c046..dd3bd933e 100644
--- a/ui/src/app/dynamic-registration/DynamicRegistration.js
+++ b/ui/src/app/dynamic-registration/DynamicRegistration.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch, Route, useRouteMatch } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
import { DynamicRegistrationDetail } from './view/DynamicRegistrationDetail';
@@ -8,21 +8,19 @@ import { DynamicRegistrationCreate } from './view/DynamicRegistrationCreate';
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..822d7c781 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';
@@ -11,16 +11,16 @@ import Spinner from '../../core/components/Spinner';
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]);
+ navigate(`/dashboard/dynamic-registration`);
+ }, [navigate]);
React.useEffect(() => {
if (isSuccess) {
@@ -32,12 +32,12 @@ export function DynamicRegistrationCreate () {
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
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..8198ee124 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';
@@ -12,7 +12,7 @@ import Spinner from '../../core/components/Spinner';
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 +21,10 @@ export function DynamicRegistrationEdit () {
gotoDetail();
};
- const gotoDetail = useCallback((state = null) => {
+ const gotoDetail = useCallback(() => {
setBlocking(false);
- history.push(`/dynamic-registration/${id}`, state);
- }, [id, history]);
+ navigate(`/dynamic-registration/${id}`);
+ }, [id, navigate]);
const [blocking, setBlocking] = React.useState(false);
@@ -38,12 +38,12 @@ export function DynamicRegistrationEdit () {
{detail &&
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/metadata/Attribute.js b/ui/src/app/metadata/Attribute.js
index 2a9847d19..3026dedaa 100644
--- a/ui/src/app/metadata/Attribute.js
+++ b/ui/src/app/metadata/Attribute.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
import { MetadataAttributes } from './hoc/MetadataAttributes';
import { NewAttribute } from './new/NewAttribute';
import { MetadataAttributeEdit } from './view/MetadataAttributeEdit';
@@ -10,35 +10,33 @@ import { MetadataAttributeBundleEdit } from './view/MetadataAttributeBundleEdit'
export function Attribute() {
- let { path, url } = useRouteMatch();
-
return (
-
-
+
+
{(entities, onDelete) =>
}
} />
-
+
} />
-
+
} />
-
+
} />
-
+
} />
-
+
} />
-
-
+
} />
-
+
);
}
\ No newline at end of file
diff --git a/ui/src/app/metadata/Filter.js b/ui/src/app/metadata/Filter.js
index 4c1bc707c..881873d1e 100644
--- a/ui/src/app/metadata/Filter.js
+++ b/ui/src/app/metadata/Filter.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
import { MetadataFilterList } from './editor/MetadataFilterList';
import MetadataFilterSelector from './hoc/MetadataFilterSelector';
import MetadataSchema from './hoc/MetadataSchema';
@@ -9,11 +9,9 @@ import { EditFilter } from './view/EditFilter';
export function Filter() {
- const { path, url } = useRouteMatch();
-
return (
-
-
+
+
{(entity) =>
@@ -22,17 +20,17 @@ export function Filter() {
}
} />
-
+
} />
-
+
} />
-
-
+
} />
-
+
);
}
\ No newline at end of file
diff --git a/ui/src/app/metadata/Metadata.js b/ui/src/app/metadata/Metadata.js
index 604156d8d..426f99f07 100644
--- a/ui/src/app/metadata/Metadata.js
+++ b/ui/src/app/metadata/Metadata.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { Routes, Route, Navigate } from 'react-router-dom';
import { MetadataOptions } from './view/MetadataOptions';
import { MetadataDetail } from './component/MetadataDetail';
import { MetadataHistory } from './view/MetadataHistory';
@@ -15,52 +15,50 @@ import { MetadataConfirmRestore } from './view/MetadataConfirmRestore';
export function Metadata () {
- const { url, path } = useRouteMatch();
-
return (
{(entity, reload) =>
-
-
+
+
} />
-
+
} />
-
+
} />
-
+
} />
-
+
} />
-
+
} />
-
+
} />
-
+
} />
- {
-
+ {
} />}
-
+
}
diff --git a/ui/src/app/metadata/component/MetadataViewToggle.js b/ui/src/app/metadata/component/MetadataViewToggle.js
index 59975b9fb..bdb32cff5 100644
--- a/ui/src/app/metadata/component/MetadataViewToggle.js
+++ b/ui/src/app/metadata/component/MetadataViewToggle.js
@@ -11,11 +11,18 @@ export function MetadataViewToggle () {
<>
{xml ?
-
+
+ isActive ? 'btn btn-primary' : 'btn btn-outline-primary'
+ }
+ aria-pressed="true">
Toggle view:
Options
-
+
+ isActive ? 'btn btn-primary' : 'btn btn-outline-primary'
+ }>
Toggle view:
XML
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
index befeef819..94216054f 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
@@ -56,7 +56,7 @@ export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate
|
-
+
Edit
diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
index 0ae86bf51..cf488cbe7 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';
@@ -34,7 +34,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 +72,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}`) );
};
const onNavigate = (path) => {
const resetBlock = blocking;
setBlocking(false);
setTimeout(() => {
- history.push(restore ? `../${path}/edit` : path);
+ navigate(restore ? `../edit` : `../edit/${path}`);
setBlocking(resetBlock);
});
};
@@ -94,12 +94,12 @@ export function MetadataEditor ({ restore, current, reload }) {
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/metadata/editor/MetadataFilterList.js b/ui/src/app/metadata/editor/MetadataFilterList.js
index b67000c5a..a888a6efc 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, matchPath, 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..f7bee6e03 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';
@@ -15,7 +15,7 @@ import { createNotificationAction, NotificationTypes } from '../../store/notific
import { useDispatch } from 'react-redux';
export function NewAttribute() {
- const history = useHistory();
+ const navigate = useNavigate();
const dispatch = useDispatch();
@@ -45,17 +45,17 @@ export function NewAttribute() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes`, state);
+ navigate(`/metadata/attributes`);
};
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/metadata/new/NewBundle.js b/ui/src/app/metadata/new/NewBundle.js
index 25d2903c8..955d0352e 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';
@@ -13,7 +13,7 @@ import { AttributeBundleEditor } from '../editor/AttributeBundleEditor';
import { AttributeBundleApi } from '../hoc/attribute/AttributeBundleApi';
export function NewBundle() {
- const history = useHistory();
+ const navigate = useNavigate();
const definition = AttributeBundleDefinition;
@@ -25,19 +25,19 @@ export function NewBundle() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes/bundles`, state);
+ navigate(`/metadata/attributes/bundles`);
};
return (
{(load, find, create, update, remove, loading) =>
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/metadata/new/NewFilter.js b/ui/src/app/metadata/new/NewFilter.js
index 197d2534d..bf5c064af 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';
@@ -15,7 +15,7 @@ import { useDispatch } from 'react-redux';
export function NewFilter() {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const types = useMetadataFilterTypes();
const dispatch = useDispatch();
@@ -41,7 +41,7 @@ export function NewFilter() {
const gotoDetail = (state = null) => {
setBlocking(false);
setTimeout(() => {
- history.push(`/metadata/provider/${id}`, state);
+ navigate(`/metadata/provider/${id}`);
});
};
@@ -49,19 +49,19 @@ export function NewFilter() {
const resetBlock = blocking;
setBlocking(false);
setTimeout(() => {
- history.push(path);
+ navigate(path);
setBlocking(resetBlock);
});
};
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
diff --git a/ui/src/app/metadata/new/NewSource.js b/ui/src/app/metadata/new/NewSource.js
index 3908165e5..e98821f46 100644
--- a/ui/src/app/metadata/new/NewSource.js
+++ b/ui/src/app/metadata/new/NewSource.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { NavLink, Redirect, Route, Switch, useRouteMatch } from 'react-router-dom';
+import { NavLink, Navigate, Route, Routes } from 'react-router-dom';
import Translate from '../../i18n/components/translate';
import { MetadataSchema } from '../hoc/MetadataSchema';
import { MetadataWizard } from '../view/MetadataWizard';
@@ -12,12 +12,12 @@ import { useMetadataSourceProtocols } from '../hooks/api';
export function NewSource() {
- const { path, url } = useRouteMatch();
-
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 +38,11 @@ export function NewSource() {
+ className={({ isActive }) =>
+ isActive ? `${btnClasses} btn-primary` : `${btnClasses} btn-secondary`
+ }>
Upload/URL
@@ -51,11 +52,12 @@ export function NewSource() {
+ className={({ isActive }) =>
+ isActive ? `${btnClasses} btn-info` : `${btnClasses} btn-secondary`
+ }>
Create
@@ -65,11 +67,12 @@ export function NewSource() {
+ className={({ isActive }) =>
+ isActive ? `${btnClasses} btn-warning` : `${btnClasses} btn-secondary`
+ }>
Copy
@@ -79,8 +82,8 @@ export function NewSource() {
}
-
-
+
+
{(data, onRestart) =>
@@ -97,18 +100,18 @@ export function NewSource() {
} />
-
+
} />
-
+
{ setShowNav(s) } } />
} />
-
-
+
} />
-
+
diff --git a/ui/src/app/metadata/view/EditFilter.js b/ui/src/app/metadata/view/EditFilter.js
index 204c72f55..32838a785 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';
@@ -20,7 +20,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 +30,7 @@ export function EditFilter() {
const resetBlock = blocking;
setBlocking(false);
setTimeout(() => {
- history.push(path);
+ navigate(path);
setBlocking(resetBlock);
});
};
@@ -52,17 +52,17 @@ export function EditFilter() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/provider/${id}`, state);
+ navigate(`/metadata/provider/${id}`);
};
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
Edit filter
diff --git a/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js b/ui/src/app/metadata/view/MetadataAttributeBundleEdit.js
index 4948fc86f..a08082395 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';
@@ -15,7 +15,7 @@ import { AttributeBundleApi } from '../hoc/attribute/AttributeBundleApi';
export function MetadataAttributeBundleEdit() {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const definition = AttributeBundleDefinition;
@@ -27,7 +27,7 @@ export function MetadataAttributeBundleEdit() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes/bundles`, state);
+ navigate(`/metadata/attributes/bundles`);
};
return (
@@ -35,12 +35,12 @@ export function MetadataAttributeBundleEdit() {
{(load, find, create, update, remove, loading) =>
{(bundle) =>
-
`message.unsaved-editor`
}
- />
+ />*/}
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..5ef0b14be 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';
@@ -16,7 +16,7 @@ import { useDispatch } from 'react-redux';
export function MetadataAttributeEdit() {
const { id } = useParams();
- const history = useHistory();
+ const navigate = useNavigate();
const definition = CustomAttributeDefinition;
@@ -55,7 +55,7 @@ export function MetadataAttributeEdit() {
const gotoDetail = (state = null) => {
setBlocking(false);
- history.push(`/metadata/attributes`, state);
+ navigate(`/metadata/attributes`);
};
const [attribute, setAttribute] = React.useState();
@@ -67,12 +67,12 @@ export function MetadataAttributeEdit() {
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
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/MetadataCopy.js b/ui/src/app/metadata/view/MetadataCopy.js
index 5156fc6a2..5a0d44673 100644
--- a/ui/src/app/metadata/view/MetadataCopy.js
+++ b/ui/src/app/metadata/view/MetadataCopy.js
@@ -2,14 +2,14 @@ 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';
export function MetadataCopy ({ onShowNav }) {
const { post, response, loading } = useMetadataEntity('source');
- const history = useHistory();
+ const navigate = useNavigate();
const dispatch = useDispatch();
@@ -35,7 +35,7 @@ export function MetadataCopy ({ onShowNav }) {
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/MetadataHistory.js b/ui/src/app/metadata/view/MetadataHistory.js
index 6df6a7c2e..09cac6981 100644
--- a/ui/src/app/metadata/view/MetadataHistory.js
+++ b/ui/src/app/metadata/view/MetadataHistory.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
import { Link } from 'react-router-dom';
import queryString from 'query-string';
import Button from 'react-bootstrap/Button';
@@ -22,7 +22,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'
@@ -42,7 +42,7 @@ export function MetadataHistory () {
const path = `/metadata/${type}/${id}/configuration/compare?${queryString.stringify({versions: s.map(s => s.id)}, {
skipNull: true,
})}`;
- history.push(path);
+ 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 9d0f5e8d5..5ae6202d8 100644
--- a/ui/src/app/metadata/view/MetadataOptions.js
+++ b/ui/src/app/metadata/view/MetadataOptions.js
@@ -1,7 +1,7 @@
import React, { 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';
@@ -28,7 +28,7 @@ export function MetadataOptions ({reload}) {
const definition = React.useContext(MetadataDefinitionContext);
const schema = React.useContext(MetadataSchemaContext);
const processed = useMetadataSchema(definition, schema);
- const history = useHistory();
+ const navigate = useNavigate();
const { type, id } = useParams();
@@ -42,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..264a2d022 100644
--- a/ui/src/app/metadata/view/MetadataWizard.js
+++ b/ui/src/app/metadata/view/MetadataWizard.js
@@ -6,13 +6,13 @@ 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 { Prompt, useNavigate } from 'react-router-dom';
import { useTranslator } from '../../i18n/hooks';
import { useDispatch } from 'react-redux';
export function MetadataWizard ({type, data, onCallback, onContinue}) {
- const history = useHistory();
+ const navigate = useNavigate();
const translator = useTranslator();
const { post, loading, response } = useMetadataEntity(type === 'source' ? 'source' : 'provider');
@@ -23,7 +23,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);
};
@@ -50,12 +50,12 @@ export function MetadataWizard ({type, data, onCallback, onContinue}) {
return (
-
`message.unsaved-editor`
}
- />
+ />*/}
{type === 'source' ?
| | | |