Skip to content

Commit

Permalink
Updated router
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmathis
rmathis committed Jan 31, 2023
1 parent 02017bc commit 7d95cee
Show file tree
Hide file tree
Showing 48 changed files with 504 additions and 530 deletions.
332 changes: 147 additions & 185 deletions ui/package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@
"react-hook-form": "^7.42.1",
"react-infinite-scroll-component": "^6.1.0",
"react-redux": "^8.0.5",
"react-router": "^5.1.0",
"react-router-dom": "^5.1.0",
"react-router": "^6.8.0",
"react-router-dom": "^6.8.0",
"react-scroll": "^1.8.9",
"react-simple-code-editor": "^0.13.1",
"use-http": "^1.0.27",
Expand Down
122 changes: 56 additions & 66 deletions ui/src/app/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import React from 'react';
import {
BrowserRouter as Router,
Redirect,
} from "react-router-dom";

import {
Switch,
BrowserRouter,
Navigate,
Routes,
Route,
} from "react-router";
} from "react-router-dom";
import { QueryParamProvider } from 'use-query-params';
import { Provider as HttpProvider } from 'use-http';
import { ReactRouter6Adapter } from 'use-query-params/adapters/react-router-6';
import Button from 'react-bootstrap/Button';

import './App.scss';
Expand All @@ -23,7 +21,6 @@ import { UserProvider } from './core/user/UserContext';
import { Metadata } from './metadata/Metadata';
import { Attribute } from './metadata/Attribute';
import { NotificationList } from './notifications/component/NotificationList';
import { UserConfirmation, ConfirmWindow } from './core/components/UserConfirmation';
import { NewSource } from './metadata/new/NewSource';
import { NewProvider } from './metadata/new/NewProvider';
import { Filter } from './metadata/Filter';
Expand All @@ -36,6 +33,8 @@ import { ProtectRoute } from './core/components/ProtectRoute';
import { IdpConfiguration } from './admin/IdpConfiguration';
import { DynamicRegistration } from './dynamic-registration/DynamicRegistration';

// import { useBlocker } from './core/hooks/useBlocker';

function App() {

const [showTimeout] = React.useState();
Expand Down Expand Up @@ -68,64 +67,55 @@ function App() {
<Button variant="primary" onClick={() => window.location.reload()}>Log in</Button>
</SessionModal>
<Contention>
<UserConfirmation>
{(message, confirm, confirmCallback, setConfirm, getConfirmation) =>
<Router getUserConfirmation={getConfirmation} basename={BASE_PATH}>
<ConfirmWindow message={message} confirm={confirm} confirmCallback={confirmCallback} setConfirm={setConfirm} />
<QueryParamProvider ReactRouterRoute={Route}>
<Header />
<main className="pad-content">
<Switch>
<Route exact path="/">
<Redirect to="/dashboard" />
</Route>
<Route path="/dashboard" component={Dashboard} />
<Route path="/metadata/source/new" component={NewSource} />
<Route path="/dynamic-registration" render={() =>
<DynamicRegistration />
} />
<Route path="/metadata/provider/new" render={() =>
<ProtectRoute redirectTo="/dashboard">
<NewProvider />
</ProtectRoute>
} />
<Route path="/metadata/attributes" render={() =>
<ProtectRoute redirectTo="/dashboard">
<Attribute />
</ProtectRoute>
} />
<Route path="/metadata/provider/:id/filter" render={() =>
<ProtectRoute redirectTo="/dashboard">
<Filter />
</ProtectRoute>
} />
<Route path="/metadata/:type/:id" component={Metadata} />
<Route path="/roles" render={() =>
<ProtectRoute redirectTo="/dashboard">
<Roles />
</ProtectRoute>
} />
<Route path="/groups" render={() =>
<ProtectRoute redirectTo="/dashboard">
<Groups />
</ProtectRoute>
} />
<Route path="/configurations" render={() =>
<ProtectRoute redirectTo="/dashboard">
<IdpConfiguration />
</ProtectRoute>
} />
<Route path="*">
<Redirect to="/dashboard" />
</Route>
</Switch>
<NotificationList />
</main>
<Footer />
</QueryParamProvider>
</Router>
}
</UserConfirmation>
<BrowserRouter basename={BASE_PATH}>
<QueryParamProvider adapter={ReactRouter6Adapter}>
<Header />
<main className="pad-content">
<Routes>
<Route exact path="/" element={<Navigate to="/dashboard" />} />
<Route path="dashboard/*" element={<Dashboard />} />
<Route path="metadata/source/new/*" element={<NewSource />} />
<Route path="dynamic-registration/*" element={
<DynamicRegistration />
} />
<Route path="metadata/provider/new/*" element={
<ProtectRoute redirectTo="/dashboard">
<NewProvider />
</ProtectRoute>
} />
<Route path="metadata/attributes/*" element={
<ProtectRoute redirectTo="/dashboard">
<Attribute />
</ProtectRoute>
} />
<Route path="metadata/provider/:id/filter/*" element={
<ProtectRoute redirectTo="/dashboard">
<Filter />
</ProtectRoute>
} />
<Route path="metadata/:type/:id/*" element={<Metadata />} />
<Route path="roles/*" element={
<ProtectRoute redirectTo="/dashboard">
<Roles />
</ProtectRoute>
} />
<Route path="groups/*" element={
<ProtectRoute redirectTo="/dashboard">
<Groups />
</ProtectRoute>
} />
<Route path="configurations/*" element={
<ProtectRoute redirectTo="/dashboard">
<IdpConfiguration />
</ProtectRoute>
} />
<Route path="*" element={ <Navigate to="/dashboard" />} />
</Routes>
<NotificationList />
</main>
<Footer />
</QueryParamProvider>
</BrowserRouter>
</Contention>
</I18nProvider>
</UserProvider>
Expand Down
18 changes: 8 additions & 10 deletions ui/src/app/admin/Groups.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Fragment } from 'react';
import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
import { Routes, Route, Navigate } from 'react-router-dom';
import { GroupsProvider } from './hoc/GroupsProvider';
import { NewGroup } from './container/NewGroup';
import { EditGroup } from './container/EditGroup';
Expand All @@ -8,36 +8,34 @@ import Spinner from '../core/components/Spinner';

export function Groups() {

let { path, url } = useRouteMatch();

return (
<>
<Switch>
<Route path={`${path}/list`} render={() =>
<Routes>
<Route path={`list`} element={
<GroupsProvider>
{(groups, onDelete) =>
<GroupsList groups={groups} onDelete={onDelete} />
}
</GroupsProvider>
} />
<Route path={`${path}/new`} render={() =>
<Route path={`new`} element={
<GroupsProvider>
{(groups, onDelete, loading) =>
<Fragment>{ loading ? <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> : <NewGroup groups={groups} /> }</Fragment>
}
</GroupsProvider>
} />
<Route path={`${path}/:id/edit`} render={() =>
<Route path={`:id/edit`} element={
<GroupsProvider>
{(groups, onDelete, loading) =>
<Fragment>{ loading ? <div className="d-flex justify-content-center text-primary"><Spinner size="4x" /></div> : <EditGroup groups={groups} /> }</Fragment>
}
</GroupsProvider>
} />
<Route path={`${path}`} exact render={() =>
<Redirect to={`${url}/list`} />
<Route path={``} exact element={
<Navigate to={`list`} />
} />
</Switch>
</Routes>
</>
);
}
18 changes: 8 additions & 10 deletions ui/src/app/admin/IdpConfiguration.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,41 @@
import React from 'react';
import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
import { Routes, Route, Navigate } from 'react-router-dom';
import { ConfigurationsProvider } from './hoc/ConfigurationsProvider';
import { NewConfiguration } from './container/NewConfiguration';
import { EditConfiguration } from './container/EditConfiguration';
import { ConfigurationList } from './container/ConfigurationList';

export function IdpConfiguration() {

let { path, url } = useRouteMatch();

return (
<>
<Switch>
<Route path={`${path}/list`} render={() =>
<Routes>
<Route path={`list`} element={
<ConfigurationsProvider>
{(configurations, onDelete) =>
<ConfigurationList configurations={configurations} onDelete={onDelete} />
}
</ConfigurationsProvider>
} />
<Route path={`${path}/new`} render={() =>
<Route path={`new`} element={
<ConfigurationsProvider>
{(configurations) =>
<NewConfiguration configurations={configurations} />
}
</ConfigurationsProvider>

} />
<Route path={`${path}/:id/edit`} render={() =>
<Route path={`:id/edit`} element={
<ConfigurationsProvider>
{(configurations) =>
<EditConfiguration configurations={configurations} />
}
</ConfigurationsProvider>
} />
<Route path={`${path}`} exact render={() =>
<Redirect to={`${url}/list`} />
<Route path={``} exact element={
<Navigate to={`list`} />
} />
</Switch>
</Routes>
</>
);
}
19 changes: 8 additions & 11 deletions ui/src/app/admin/Roles.js
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,31 @@
import React from 'react';
import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
import { Routes, Route, Navigate } from 'react-router-dom';
import { RolesProvider } from './hoc/RolesProvider';
import { NewRole } from './container/NewRole';
import { EditRole } from './container/EditRole';
import { RoleList } from './container/RoleList';

export function Roles() {

let { path, url } = useRouteMatch();

return (
<>
<Switch>
<Route path={`${path}/list`} render={() =>
<Routes>
<Route path={`list`} element={
<RolesProvider>
{(roles, onDelete) =>
<RoleList roles={roles} onDelete={onDelete} />
}
</RolesProvider>
} />
<Route path={`${path}/new`} render={() =>
<Route path={`new`} element={
<NewRole />
} />
<Route path={`${path}/:id/edit`} render={() =>
<Route path={`:id/edit`} element={
<EditRole />
} />
<Route path={`${path}`} exact render={() =>
<Redirect to={`${url}/list`} />
<Route path={``} exact element={
<Navigate to={`list`} />
} />
</Switch>
</Routes>
</>
);
}
4 changes: 2 additions & 2 deletions ui/src/app/admin/container/ConfigurationList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export function ConfigurationList({ configurations, onDelete, loading }) {
</div>
<div className="p-3">
<div className="d-flex justify-content-end w-100">
<Link to="./new" className="btn btn-sm btn-success">
<Link to="../new" className="btn btn-sm btn-success">
<FontAwesomeIcon icon={faPlusCircle} /> &nbsp;
<Translate value="action.create-new-configuration">Create new configuration</Translate>
</Link>
Expand All @@ -82,7 +82,7 @@ export function ConfigurationList({ configurations, onDelete, loading }) {
{(configurations?.length > 0) ? configurations.map((c, i) =>
<tr key={i}>
<td className="align-middle">
<Link to={`../configurations/${c.resourceId}/edit`}>
<Link to={`../${c.resourceId}/edit`}>
{c.name}
</Link>
</td>
Expand Down
14 changes: 7 additions & 7 deletions ui/src/app/admin/container/EditConfiguration.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -12,7 +12,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';

export function EditConfiguration({ configurations }) {
const history = useHistory();
const navigate = useNavigate();
const notifier = useDispatch();
const translator = useTranslator();
const { id } = useParams();
Expand All @@ -27,7 +27,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);
Expand All @@ -51,19 +51,19 @@ export function EditConfiguration({ configurations }) {
gotoList();
};

const gotoList = (state = null) => {
const gotoList = () => {
setBlocking(false);
history.push(`/configurations`, state);
navigate(`/configurations`);
};

return (
<div className="container-fluid p-3">
<Prompt
{/*<Prompt
when={blocking}
message={location =>
`message.unsaved-editor`
}
/>
/>*/}
<section className="section" tabIndex="0">
<div className="section-header bg-info p-2 text-white">
<div className="row justify-content-between">
Expand Down
Loading

0 comments on commit 7d95cee

Please sign in to comment.