diff --git a/apps/admin-ui/package.json b/apps/admin-ui/package.json index a1f3b3eafe..c9d2330339 100644 --- a/apps/admin-ui/package.json +++ b/apps/admin-ui/package.json @@ -68,6 +68,7 @@ "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-router-dom-v5-compat": "^6.4.2", + "react-use-localstorage": "^3.5.3", "use-react-router-breadcrumbs": "^2.0.2" }, "devDependencies": { diff --git a/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx b/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx index 2e376d5af2..2c62072a39 100644 --- a/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx +++ b/apps/admin-ui/src/components/help-enabler/HelpHeader.tsx @@ -11,6 +11,7 @@ import { import { ExternalLinkAltIcon, HelpIcon } from "@patternfly/react-icons"; import { FunctionComponent, useState } from "react"; import { useTranslation } from "react-i18next"; +import useLocalStorage from "react-use-localstorage"; import { createNamedContext } from "../../utils/createNamedContext"; import useRequiredContext from "../../utils/useRequiredContext"; @@ -31,13 +32,13 @@ export const HelpContext = createNamedContext( export const useHelp = () => useRequiredContext(HelpContext); export const Help: FunctionComponent = ({ children }) => { - const [enabled, setHelp] = useState(true); + const [enabled, setHelp] = useLocalStorage("helpEnabled", "true"); function toggleHelp() { - setHelp((help) => !help); + setHelp(enabled === "true" ? "false" : "true"); } return ( - + {children} ); diff --git a/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx b/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx index baf2d80259..d2adcaf7eb 100644 --- a/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx +++ b/apps/admin-ui/src/components/table-toolbar/KeycloakDataTable.tsx @@ -21,6 +21,7 @@ import { TableVariant, } from "@patternfly/react-table"; import { get, cloneDeep, differenceBy } from "lodash-es"; +import useLocalStorage from "react-use-localstorage"; import { PaginatingTableToolbar } from "./PaginatingTableToolbar"; import { ListEmptyState } from "../list-empty-state/ListEmptyState"; @@ -205,7 +206,11 @@ export function KeycloakDataTable({ const [unPaginatedData, setUnPaginatedData] = useState(); const [loading, setLoading] = useState(false); - const [max, setMax] = useState(10); + const [defaultPageSize, setDefaultPageSize] = useLocalStorage( + "pageSize", + "10" + ); + const [max, setMax] = useState(parseInt(defaultPageSize)); const [first, setFirst] = useState(0); const [search, setSearch] = useState(""); const prevSearch = useRef(); @@ -403,6 +408,7 @@ export function KeycloakDataTable({ onPerPageSelect={(first, max) => { setFirst(first); setMax(max); + setDefaultPageSize(`${max}`); }} inputGroupName={ searchPlaceholderKey ? `${ariaLabelKey}input` : undefined diff --git a/package-lock.json b/package-lock.json index 604be1a038..75034bebc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -104,6 +104,7 @@ "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-router-dom-v5-compat": "^6.4.2", + "react-use-localstorage": "^3.5.3", "use-react-router-breadcrumbs": "^2.0.2" }, "devDependencies": { @@ -11883,6 +11884,14 @@ "react": ">=16.8" } }, + "node_modules/react-use-localstorage": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/react-use-localstorage/-/react-use-localstorage-3.5.3.tgz", + "integrity": "sha512-1oNvJmo72G4v5P9ytJZZTb6ywD3UzWBiainTtfbNlb+U08hc+SOD5HqgiLTKUF0MxGcIR9JSnZGmBttNLXaQYA==", + "peerDependencies": { + "react": ">=16.8.1" + } + }, "node_modules/readable-stream": { "version": "2.3.7", "dev": true, @@ -17764,6 +17773,7 @@ "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-router-dom-v5-compat": "^6.4.2", + "react-use-localstorage": "*", "tar-fs": "^2.1.1", "ts-node": "^10.9.1", "use-react-router-breadcrumbs": "^2.0.2", @@ -22573,6 +22583,12 @@ } } }, + "react-use-localstorage": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/react-use-localstorage/-/react-use-localstorage-3.5.3.tgz", + "integrity": "sha512-1oNvJmo72G4v5P9ytJZZTb6ywD3UzWBiainTtfbNlb+U08hc+SOD5HqgiLTKUF0MxGcIR9JSnZGmBttNLXaQYA==", + "requires": {} + }, "readable-stream": { "version": "2.3.7", "dev": true,