diff --git a/package.json b/package.json index a22e31ae..71a462cb 100644 --- a/package.json +++ b/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", diff --git a/src/components/InfoTooltip.tsx b/src/components/InfoTooltip.tsx index fd0181c4..7ba74091 100644 --- a/src/components/InfoTooltip.tsx +++ b/src/components/InfoTooltip.tsx @@ -10,6 +10,7 @@ export interface IInfoTooltipProps { description: React.ReactNode; buttonLabel?: string; defaultOpen?: boolean; + onClose?: () => void; buttonProps?: Partial>; tooltipProps?: Partial>; @@ -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 ( 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 || } diff --git a/src/components/Navigation/Breadcrumbs.tsx b/src/components/Navigation/Breadcrumbs.tsx index d639d0cf..fd112b53 100644 --- a/src/components/Navigation/Breadcrumbs.tsx +++ b/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( + "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 ( setDismissed((d) => [...d, table?.id])} /> )} diff --git a/yarn.lock b/yarn.lock index abd7bbe1..733cb9b8 100644 --- a/yarn.lock +++ b/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"