store table description tooltip dismiss state in localstorage

package.json

@@ -33,7 +33,7 @@
     "file-saver": "^2.0.5",
     "firebase": "8.6.8",
     "hotkeys-js": "^3.7.2",
-    "jotai": "^1.4.2",
+    "jotai": "^1.5.3",
     "json-stable-stringify-without-jsonify": "^1.0.1",
     "json2csv": "^5.0.6",
     "jszip": "^3.6.0",

src/components/InfoTooltip.tsx

@@ -10,6 +10,7 @@ export interface IInfoTooltipProps {
   description: React.ReactNode;
   buttonLabel?: string;
   defaultOpen?: boolean;
+  onClose?: () => void;
 
   buttonProps?: Partial<React.ComponentProps<typeof IconButton>>;
   tooltipProps?: Partial<React.ComponentProps<typeof Tooltip>>;
@@ -20,6 +21,7 @@ export default function InfoTooltip({
   description,
   buttonLabel = "Info",
   defaultOpen,
+  onClose,
 
   buttonProps,
   tooltipProps,
@@ -27,6 +29,20 @@ export default function InfoTooltip({
 }: IInfoTooltipProps) {
   const [open, setOpen] = useState(defaultOpen || false);
 
+  const handleClose = () => {
+    setOpen(false);
+    if (onClose) onClose();
+  };
+
+  const toggleOpen = () => {
+    if (open) {
+      setOpen(false);
+      if (onClose) onClose();
+    } else {
+      setOpen(true);
+    }
+  };
+
   return (
     <Tooltip
       title={
@@ -35,7 +51,7 @@ export default function InfoTooltip({
           <IconButton
             aria-label={`Close ${buttonLabel}`}
             size="small"
-            onClick={() => setOpen(false)}
+            onClick={handleClose}
             sx={{
               m: -0.5,
               opacity: 0.8,
@@ -82,7 +98,7 @@ export default function InfoTooltip({
         aria-label={buttonLabel}
         size="small"
         {...buttonProps}
-        onClick={() => setOpen((x) => !x)}
+        onClick={toggleOpen}
       >
         {buttonProps?.children || <InfoIcon fontSize="small" {...iconProps} />}
       </IconButton>

src/components/Navigation/Breadcrumbs.tsx

@@ -3,6 +3,8 @@ import _find from "lodash/find";
 import queryString from "query-string";
 import { Link as RouterLink } from "react-router-dom";
 import _camelCase from "lodash/camelCase";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
 
 import {
   Breadcrumbs as MuiBreadcrumbs,
@@ -21,6 +23,11 @@ import { useProjectContext } from "@src/contexts/ProjectContext";
 import useRouter from "@src/hooks/useRouter";
 import routes from "@src/constants/routes";
 
+const tableDescriptionDismissedAtom = atomWithStorage<string[]>(
+  "tableDescriptionDismissed",
+  []
+);
+
 export default function Breadcrumbs({ sx = [], ...props }: BreadcrumbsProps) {
   const { userClaims } = useAppContext();
   const { tables, table, tableState } = useProjectContext();
@@ -38,7 +45,7 @@ export default function Breadcrumbs({ sx = [], ...props }: BreadcrumbsProps) {
   const section = table?.section || "";
   const getLabel = (id: string) => _find(tables, ["id", id])?.name || id;
 
-  const [openInfo, setOpenInfo] = useState(true);
+  const [dismissed, setDismissed] = useAtom(tableDescriptionDismissedAtom);
 
   return (
     <MuiBreadcrumbs
@@ -121,6 +128,8 @@ export default function Breadcrumbs({ sx = [], ...props }: BreadcrumbsProps) {
                       tooltip: { sx: { maxWidth: "75vw" } },
                     } as any,
                   }}
+                  defaultOpen={!dismissed.includes(table?.id)}
+                  onClose={() => setDismissed((d) => [...d, table?.id])}
                 />
               )}
             </div>

yarn.lock

@@ -10215,10 +10215,10 @@ join-path@^1.1.1:
     url-join "0.0.1"
     valid-url "^1"
 
-jotai@^1.4.2:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.4.2.tgz#0747581840c82ec0862d4c15ee0f7d59246ed46e"
-  integrity sha512-/NcK8DGvfGcVCqoOvjWIo8/KaUYtadXEl+6uxLiQJUxbyiqCtXkhAdrugk5jmpAFXXD2y6fNDw2Ln7h0EuY+ng==
+jotai@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/jotai/-/jotai-1.5.3.tgz#0157f962c6cd7d28389f9606a1eefebf223801ed"
+  integrity sha512-iD8MkbehxTjfRUtIJJdyQcjbAe2MqjW1+oFc5lvfgRjLHwjRQyWnZC3gdGAOQCOqUSPZHOBGgWyP/8gBDckaNQ==
 
 jpeg-js@^0.4.2:
   version "0.4.3"