Fix user routes for admin panel

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)

src/main/webapp/resources/js/pages/admin/components/Admin.jsx

@@ -19,17 +19,28 @@ 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;
 
 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 (
-  <Provider store={store}>
-    <Layout>
-      <AdminSideMenu />
+    <Provider store={store}>
       <Layout>
-        <AdminHeader />
-        <Content>
-          <Suspense fallback={<ContentLoading />}>
-            <Routes>
-              <Route path={DEFAULT_URL} element={<AdminContent />}>
-                <Route index element={<BasicStats />} />
-                <Route
-                  path={`${ADMIN.STATISTICS}/:statType`}
-                  element={<AdvancedStatistics />}
-                />
-                <Route path={ADMIN.USERS} element={<AdminUsersPage />} />
-
-                <Route
-                  path={`${ADMIN.USERGROUPS}/list`}
-                  element={
-                    <UserGroupsPage
-                      baseUrl={`${DEFAULT_URL}/${ADMIN.USERGROUPS}`}
-                    />
-                  }
-                />
-                <Route
-                  path={`${ADMIN.USERGROUPS}/:id`}
-                  element={<UserGroupsDetailsPage />}
-                />
-                <Route path={ADMIN.CLIENTS} element={<ClientListingPage />} />
-                <Route
-                  path={ADMIN.REMOTEAPI}
-                  element={<AdminRemoteApiPage />}
-                />
-                <Route
-                  path={ADMIN.SEQUENCINGRUNS}
-                  element={<AdminSequencingRunsPage />}
-                />
-                <Route
-                  path={ADMIN.NCBIEXPORTS}
-                  element={<AdminNcbiExportsPage />}
-                />
-                <Route
-                  path={ADMIN.ANNOUNCEMENTS}
-                  element={<AnnouncementAdminPage />}
-                />
-              </Route>
-            </Routes>
-          </Suspense>
-        </Content>
+        <AdminSideMenu />
+        <Layout>
+          <AdminHeader />
+          <Content>
+            <Suspense fallback={<ContentLoading />}>
+              <Routes>
+                <Route path={DEFAULT_URL} element={<AdminContent />}>
+                  <Route index element={<BasicStats />} />
+                  <Route
+                    path={`${ADMIN.STATISTICS}/:statType`}
+                    element={<AdvancedStatistics />}
+                  />
+                  <Route path={ADMIN.USERS} element={<AdminUsersPage />} />
+                  <Route
+                    path={`${ADMIN.USERS}/:userId`}
+                    element={<UserAccountLayout />}
+                  >
+                    <Route index element={<UserDetailsPage />} />
+                    <Route path="*" element={<UserDetailsPage />} />
+                    <Route path="projects" element={<UserProjectsPage />} />
+                    <Route path="security" element={<UserSecurityPage />} />
+                  </Route>
+                  <Route
+                    path={`${ADMIN.USERGROUPS}/list`}
+                    element={
+                      <UserGroupsPage
+                        baseUrl={`${DEFAULT_URL}/${ADMIN.USERGROUPS}`}
+                      />
+                    }
+                  />
+                  <Route
+                    path={`${ADMIN.USERGROUPS}/:id`}
+                    element={<UserGroupsDetailsPage />}
+                  />
+                  <Route path={ADMIN.CLIENTS} element={<ClientListingPage />} />
+                  <Route
+                    path={ADMIN.REMOTEAPI}
+                    element={<AdminRemoteApiPage />}
+                  />
+                  <Route
+                    path={ADMIN.SEQUENCINGRUNS}
+                    element={<AdminSequencingRunsPage />}
+                  />
+                  <Route
+                    path={ADMIN.NCBIEXPORTS}
+                    element={<AdminNcbiExportsPage />}
+                  />
+                  <Route
+                    path={ADMIN.ANNOUNCEMENTS}
+                    element={<AnnouncementAdminPage />}
+                  />
+                </Route>
+              </Routes>
+            </Suspense>
+          </Content>
+        </Layout>
       </Layout>
-    </Layout>
-  </Provider>
+    </Provider>
   );
 }

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
+    ),
+});

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 (
     <NarrowPageWrapper
@@ -36,7 +28,7 @@ export default function UserAccountLayout() {
           ? i18n("UserAccountLayout.page.title", userDetails.user?.username)
           : userDetails.user?.username
       }
-      onBack={showBack ? goToAdminUserListPage : undefined}
+      onBack={showBack ? () => navigate(-1) : undefined}
     >
       <Layout style={{ backgroundColor: grey1 }}>
         <Sider width={200}>

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 ? (
-          <a className="t-username" href={setBaseUrl(`users/${full.id}`)}>
+          <Link className="t-username" to={`${BASE_URL}/${full.id}`}>
             {text}
-          </a>
+          </Link>
         ) : (
           text
         );