Help toggle and page default in local storage (#3547)

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": {

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<HelpContextProps | undefined>(
 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 (
-    <HelpContext.Provider value={{ enabled, toggleHelp }}>
+    <HelpContext.Provider value={{ enabled: enabled === "true", toggleHelp }}>
       {children}
     </HelpContext.Provider>
   );

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<T>({
   const [unPaginatedData, setUnPaginatedData] = useState<T[]>();
   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<string>("");
   const prevSearch = useRef<string>();
@@ -403,6 +408,7 @@ export function KeycloakDataTable<T>({
           onPerPageSelect={(first, max) => {
             setFirst(first);
             setMax(max);
+            setDefaultPageSize(`${max}`);
           }}
           inputGroupName={
             searchPlaceholderKey ? `${ariaLabelKey}input` : undefined

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,