Fixes #413

Author: oharsta

client/src/api/index.js

@@ -185,7 +185,7 @@ export function hasProvisionings(manageId) {
 
 //Roles
 export function rolesByApplication(force = true, pagination = {}) {
-    const queryPart = paginationQueryParams(pagination, {force: !!force})
+    const queryPart = paginationQueryParams(pagination, {force: !!force});
     return fetchJson(`/api/v1/roles?${queryPart}`);
 }
 

client/src/components/Entities.jsx

@@ -6,7 +6,7 @@ import {sortObjects, valueForSort} from "../utils/Sort";
 import {headerIcon} from "../utils/Forms";
 import "./Entities.scss";
 import {Button, Loader, Pagination, Tooltip} from "@surfnet/sds";
-import {pageCount} from "../utils/Pagination";
+import {pageCount, searchParameterFromQueryParams, storeSearchQueryParameter} from "../utils/Pagination";
 import {useNavigate} from "react-router-dom";
 
 export const Entities = ({
@@ -41,11 +41,10 @@ export const Entities = ({
                              busy = false
                          }) => {
 
-    const [initial, setInitial] = useState(!isEmpty(customSearch));
     const [query, setQuery] = useState("");
-    const [sorted, setSorted] = useState(defaultSort);
-    const [reverse, setReverse] = useState(false);
-    const [page, setPage] = useState(1);
+    const [sorted, setSorted] = useState(searchParameterFromQueryParams("sort", false, defaultSort));
+    const [reverse, setReverse] = useState("DESC" === searchParameterFromQueryParams("sortDirection", false, "ASC"));
+    const [page, setPage] = useState(searchParameterFromQueryParams("page", true, 1));
 
     const searchRef = useRef();
     const navigate = useNavigate();
@@ -126,15 +125,16 @@ export const Entities = ({
     const setSortedKey = key => {
         const newReserve = (sorted === key ? !reverse : false);
         setSorted(key);
+        storeSearchQueryParameter("sort", key);
         setReverse(newReserve);
+        storeSearchQueryParameter("sortDirection", newReserve ? "ASC" : "DESC");
         callCustomSearch(query, key, newReserve, page);
     }
 
     const callCustomSearch = (newQuery, newSorted, newReversed, newPage) => {
         if (customSearch) {
             //Adjust page, as serverSide is zero-based
             customSearch(newQuery, newSorted, newReversed, newPage - 1);
-            setInitial(false);
         }
         if (searchCallback) {
             const searchResult = filterEntities(query);
@@ -206,12 +206,13 @@ export const Entities = ({
                             </tbody>
                         </table>
                     </div>}
-                {(!hasEntities && !initial && !customEmptySearch && !loading && !hideTitle && !busy) &&
+                {(!hasEntities && !customEmptySearch && !loading && !hideTitle && !busy) &&
                     <p className="no-entities">{customNoEntities || I18n.t(`${modelName}.noEntities`)}</p>}
                 <Pagination currentPage={page}
                             onChange={nbr => {
                                 setPage(nbr);
                                 callCustomSearch(query, sorted, reverse, nbr);
+                                storeSearchQueryParameter("page", nbr);
                             }}
                             total={totalElements || total}
                             pageCount={pageCount}/>

client/src/tabs/ApplicationUsers.jsx

@@ -45,7 +45,9 @@ export const ApplicationUsers = () => {
     }
 
     const search = (query, sorted, reverse, page) => {
-        if (isEmpty(query) || query.trim().length > 2) {
+        const paginationQueryParamsChanged = sorted !== paginationQueryParams.sort || reverse !== paginationQueryParams.sortDirection ||
+            page !== paginationQueryParams.pageNumber;
+        if ((!isEmpty(query) && query.trim().length > 2) || paginationQueryParamsChanged) {
             delayedAutocomplete(query, sorted, reverse, page);
         }
     };

client/src/tabs/Invitations.jsx

@@ -73,7 +73,9 @@ export const Invitations = ({
         [user, paginationQueryParams]) // eslint-disable-line react-hooks/exhaustive-deps
 
     const search = (query, sorted, reverse, page) => {
-        if (isEmpty(query) || query.trim().length > 2) {
+        const paginationQueryParamsChanged = sorted !== paginationQueryParams.sort || reverse !== paginationQueryParams.sortDirection ||
+            page !== paginationQueryParams.pageNumber;
+        if ((!isEmpty(query) && query.trim().length > 2) || paginationQueryParamsChanged) {
             delayedAutocomplete(query, sorted, reverse, page);
         }
     };

client/src/tabs/Roles.jsx

@@ -65,7 +65,9 @@ export const Roles = () => {
     };
 
     const search = (query, sorted, reverse, page) => {
-        if (isEmpty(query) || query.trim().length > 2) {
+        const paginationQueryParamsChanged = sorted !== paginationQueryParams.sort || reverse !== paginationQueryParams.sortDirection ||
+            page !== paginationQueryParams.pageNumber;
+        if ((!isEmpty(query) && query.trim().length > 2) || paginationQueryParamsChanged) {
             delayedAutocomplete(query, sorted, reverse, page);
         }
     };

client/src/tabs/UserRoles.jsx

@@ -58,7 +58,9 @@ export const UserRoles = ({role, guests}) => {
         [guests, user, paginationQueryParams]);// eslint-disable-line react-hooks/exhaustive-deps
 
     const search = (query, sorted, reverse, page) => {
-        if (isEmpty(query) || query.trim().length > 2) {
+        const paginationQueryParamsChanged = sorted !== paginationQueryParams.sort || reverse !== paginationQueryParams.sortDirection ||
+            page !== paginationQueryParams.pageNumber;
+        if ((!isEmpty(query) && query.trim().length > 2) || paginationQueryParamsChanged) {
             delayedAutocomplete(query, sorted, reverse, page);
         }
     };

client/src/tabs/Users.jsx

@@ -35,7 +35,7 @@ export const Users = () => {
                     setSearching(false);
                 });
         },
-        [paginationQueryParams]); 
+        [paginationQueryParams]);
 
     const openUser = (e, user) => {
         const path = `/profile/${user.id}`
@@ -48,7 +48,9 @@ export const Users = () => {
     };
 
     const search = (query, sorted, reverse, page) => {
-        if (isEmpty(query) || query.trim().length > 2) {
+        const paginationQueryParamsChanged = sorted !== paginationQueryParams.sort || reverse !== paginationQueryParams.sortDirection ||
+            page !== paginationQueryParams.pageNumber;
+        if ((!isEmpty(query) && query.trim().length > 2) || paginationQueryParamsChanged) {
             delayedAutocomplete(query, sorted, reverse, page);
         }
     };

client/src/utils/Pagination.js

@@ -1,4 +1,5 @@
 import {isEmpty} from "./Utils";
+import {getParameterByName} from "./QueryParameters";
 
 export const pageCount = 10;
 
@@ -32,10 +33,22 @@ export const paginationQueryParams = (page, queryParams = {}) => {
 export const defaultPagination = (sort = "name", sortDirection = "ASC") => {
     const dp = {
         query: "",
-        pageNumber: 0,
+        pageNumber: searchParameterFromQueryParams("page", true, 1) - 1,
         pageSize: pageCount,
-        sort: sort,
-        sortDirection: sortDirection
+        sort: searchParameterFromQueryParams("sort", false, sort),
+        sortDirection: searchParameterFromQueryParams("sortDirection", false, sortDirection)
     };
     return {...dp};
+}
+
+export const storeSearchQueryParameter = (parameterName, value) => {
+    const url = new URL(window.location);
+    url.searchParams.set(parameterName, value);
+    window.history.pushState({[parameterName]: value}, "", url);
+}
+
+export const searchParameterFromQueryParams = (parameterName, isNumeric, defaultValue) => {
+    const parameterByName = getParameterByName(parameterName, window.location.search);
+    const value = parameterByName || defaultValue;
+    return isNumeric ? parseInt(value, 10) : value;
 }