From 75eaf3e87ffd0e7f7f2edf8412724b2edbad8b1e Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Mon, 20 Jun 2022 13:20:33 -0500 Subject: [PATCH 1/5] creating new store for admin panel --- .../js/pages/admin/components/Admin.jsx | 125 ++++++++++-------- .../webapp/resources/js/pages/admin/store.js | 27 ++++ .../js/pages/user/components/UserTable.jsx | 2 +- 3 files changed, 100 insertions(+), 54 deletions(-) create mode 100644 src/main/webapp/resources/js/pages/admin/store.js 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/UserTable.jsx b/src/main/webapp/resources/js/pages/user/components/UserTable.jsx index 006d0127bb9..d5489221e64 100644 --- a/src/main/webapp/resources/js/pages/user/components/UserTable.jsx +++ b/src/main/webapp/resources/js/pages/user/components/UserTable.jsx @@ -56,7 +56,7 @@ export function UserTable() { fixed: "left", render(text, full) { return IS_ADMIN ? ( - + {text} ) : ( From a64a6c7a7f360dbc1fbc3928dffcdb3692c25b4d Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Mon, 20 Jun 2022 13:29:19 -0500 Subject: [PATCH 2/5] updating changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4d05a96faac..6226ca057cd 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) From 86d766fba49fc0d5d30bc37fd410ac4731dc2c5b Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Tue, 21 Jun 2022 08:49:01 -0500 Subject: [PATCH 3/5] adding missing closing bracket in changelog --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6226ca057cd..30150a29c43 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +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 +* [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) From 76696f26e0d14c5aec0ae664becfb4d8cf83643a Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Tue, 21 Jun 2022 09:00:24 -0500 Subject: [PATCH 4/5] moving base_url outside component --- .../webapp/resources/js/pages/user/components/UserTable.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) 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 d5489221e64..05fe663dd3f 100644 --- a/src/main/webapp/resources/js/pages/user/components/UserTable.jsx +++ b/src/main/webapp/resources/js/pages/user/components/UserTable.jsx @@ -8,6 +8,8 @@ import { setBaseUrl } from "../../../utilities/url-utilities"; import { dateColumnFormat } from "../../../components/ant.design/table-renderers"; import { useSetUserStatusMutation } from "../../../apis/users/users"; +const BASE_URL = setBaseUrl("admin/users"); + /** * React component for displaying paged table of all users in the system * @returns {string|*} @@ -56,7 +58,7 @@ export function UserTable() { fixed: "left", render(text, full) { return IS_ADMIN ? ( - + {text} ) : ( From 3f60e2b8bbe9a05d6c1071af053fc660257f3ac2 Mon Sep 17 00:00:00 2001 From: Katherine Thiessen Date: Tue, 21 Jun 2022 11:19:34 -0500 Subject: [PATCH 5/5] using link component from react router --- .../user/components/UserAccountLayout.jsx | 18 +++++------------- .../js/pages/user/components/UserTable.jsx | 5 +++-- 2 files changed, 8 insertions(+), 15 deletions(-) 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 05fe663dd3f..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,7 @@ 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"); @@ -58,9 +59,9 @@ export function UserTable() { fixed: "left", render(text, full) { return IS_ADMIN ? ( - + {text} - + ) : ( text );