diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d05a96faac..30150a29c43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * [Developer/UI]: Added in typescript support to webpack build, moving forward all new frontend development will use typescript. See [PR 1294](https://github.com/phac-nml/irida/pull/1294) for more. * [Developer/UI]: Removed `styled-components` from page header and replaced with CSS variables. See [PR 1284](https://github.com/phac-nml/irida/pull/1284) * [Developer/UI]: Updated eslint rule to check for object and array destructuring. See [PR 1322](https://github.com/phac-nml/irida/pull/1322) +* [UI]: Fixed user routes for admin panel. See [PR 1323](https://github.com/phac-nml/irida/pull/1323) ## [22.05.4] - 2022/06/16 * [UI]: Fixed bug preventing filter samples by file to fail on invalid url. See [PR 1318](https://github.com/phac-nml/irida/pull/1318) diff --git a/src/main/webapp/resources/js/pages/admin/components/Admin.jsx b/src/main/webapp/resources/js/pages/admin/components/Admin.jsx index ac5740e2f82..eafba50d0ea 100644 --- a/src/main/webapp/resources/js/pages/admin/components/Admin.jsx +++ b/src/main/webapp/resources/js/pages/admin/components/Admin.jsx @@ -19,8 +19,8 @@ import { AdminContent } from "./AdminContent"; import AdminHeader from "./AdminHeader"; import AdminSideMenu from "./AdminSideMenu"; -import store from '../../user/store' -import { Provider } from 'react-redux' +import store from "../store"; +import { Provider } from "react-redux"; const { Content } = Layout; @@ -28,8 +28,19 @@ const AdvancedStatistics = lazy(() => import("./statistics/AdvancedStatistics") ); const BasicStats = lazy(() => import("./statistics/BasicStats")); - const AdminUsersPage = lazy(() => import("./AdminUsersPage")); +const UserAccountLayout = React.lazy(() => + import("../../user/components/UserAccountLayout") +); +const UserDetailsPage = React.lazy(() => + import("../../user/components/UserDetailsPage") +); +const UserProjectsPage = React.lazy(() => + import("../../user/components/UserProjectsPage") +); +const UserSecurityPage = React.lazy(() => + import("../../user/components/UserSecurityPage") +); const UserGroupsPage = lazy(() => import("../../UserGroupsPage/components/UserGroupsPage") ); @@ -58,57 +69,65 @@ export default function Admin() { * the components are only loaded if the corresponding tab is clicked */ return ( - - - + - - - }> - - }> - } /> - } - /> - } /> - - - } - /> - } - /> - } /> - } - /> - } - /> - } - /> - } - /> - - - - + + + + + }> + + }> + } /> + } + /> + } /> + } + > + } /> + } /> + } /> + } /> + + + } + /> + } + /> + } /> + } + /> + } + /> + } + /> + } + /> + + + + + - - + ); } diff --git a/src/main/webapp/resources/js/pages/admin/store.js b/src/main/webapp/resources/js/pages/admin/store.js new file mode 100644 index 00000000000..87ac3621db4 --- /dev/null +++ b/src/main/webapp/resources/js/pages/admin/store.js @@ -0,0 +1,27 @@ +import { configureStore } from "@reduxjs/toolkit"; +import { sequencingRunsApi } from "../../apis/sequencing-runs/sequencing-runs"; +import { userApi } from "../../apis/users/users"; +import { settingsApi } from "../../apis/settings/settings"; +import { passwordResetApi } from "../../apis/password-reset"; +import { projectSubscriptionsApi } from "../../apis/projects/project-subscriptions"; +/* +Redux Store for admin panel. +For more information on redux stores see: https://redux.js.org/tutorials/fundamentals/part-4-store + */ +export default configureStore({ + reducer: { + [passwordResetApi.reducerPath]: passwordResetApi.reducer, + [projectSubscriptionsApi.reducerPath]: projectSubscriptionsApi.reducer, + [userApi.reducerPath]: userApi.reducer, + [settingsApi.reducerPath]: settingsApi.reducer, + [sequencingRunsApi.reducerPath]: sequencingRunsApi.reducer, + }, + middleware: (getDefaultMiddleware) => + getDefaultMiddleware().concat( + passwordResetApi.middleware, + projectSubscriptionsApi.middleware, + userApi.middleware, + settingsApi.middleware, + sequencingRunsApi.middleware + ), +}); diff --git a/src/main/webapp/resources/js/pages/user/components/UserAccountLayout.jsx b/src/main/webapp/resources/js/pages/user/components/UserAccountLayout.jsx index dd86cc30c4b..5d5600341a9 100644 --- a/src/main/webapp/resources/js/pages/user/components/UserAccountLayout.jsx +++ b/src/main/webapp/resources/js/pages/user/components/UserAccountLayout.jsx @@ -1,7 +1,6 @@ import React from "react"; -import { Outlet, useParams } from "react-router-dom"; +import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom"; import UserAccountNav from "./UserAccountNav"; -import { setBaseUrl } from "../../../utilities/url-utilities"; import { useGetUserDetailsQuery } from "../../../apis/users/users"; import { ContentLoading } from "../../../components/loader"; import { NarrowPageWrapper } from "../../../components/page/NarrowPageWrapper"; @@ -10,24 +9,17 @@ import { SPACE_LG } from "../../../styles/spacing"; import { Layout } from "antd"; const { Content, Sider } = Layout; - /** * React component that layouts the user account page. * @returns {*} * @constructor */ export default function UserAccountLayout() { - const ADMIN_USERS_URL = "admin/users"; - const CREATE_USER_URL = "/users/create"; - + const navigate = useNavigate(); + const location = useLocation(); const { userId } = useParams(); const { data: userDetails = {} } = useGetUserDetailsQuery(userId); - const showBack = - userDetails.admin && - (document.referrer.includes(ADMIN_USERS_URL, 0) || - document.referrer.includes(CREATE_USER_URL, 0)); - const goToAdminUserListPage = () => - (window.location.href = setBaseUrl(ADMIN_USERS_URL)); + const showBack = location.pathname.includes("admin"); return ( navigate(-1) : undefined} > diff --git a/src/main/webapp/resources/js/pages/user/components/UserTable.jsx b/src/main/webapp/resources/js/pages/user/components/UserTable.jsx index 006d0127bb9..9ffdddd98c7 100644 --- a/src/main/webapp/resources/js/pages/user/components/UserTable.jsx +++ b/src/main/webapp/resources/js/pages/user/components/UserTable.jsx @@ -7,6 +7,9 @@ import { Checkbox } from "antd"; import { setBaseUrl } from "../../../utilities/url-utilities"; import { dateColumnFormat } from "../../../components/ant.design/table-renderers"; import { useSetUserStatusMutation } from "../../../apis/users/users"; +import { Link } from "react-router-dom"; + +const BASE_URL = setBaseUrl("admin/users"); /** * React component for displaying paged table of all users in the system @@ -56,9 +59,9 @@ export function UserTable() { fixed: "left", render(text, full) { return IS_ADMIN ? ( - + {text} - + ) : ( text );