open extensions, webhooks, export modals from URL

src/atoms/Table.ts

@@ -0,0 +1,5 @@
+import { atomWithHash } from "jotai/utils";
+
+export const modalAtom = atomWithHash<
+  "cloudLogs" | "extensions" | "webhooks" | "export" | ""
+>("modal", "");

src/components/TableHeader/CloudLogs/BuildLogs/BuildLogsSnack.tsx

@@ -15,7 +15,8 @@ import CircularProgressOptical from "@src/components/CircularProgressOptical";
 import { isTargetInsideBox } from "utils/fns";
 import { useSnackLogContext } from "@src/contexts/SnackLogContext";
 import useBuildLogs from "./useBuildLogs";
-import { modalAtom, cloudLogFiltersAtom } from "../utils";
+import { modalAtom } from "@src/atoms/Table";
+import { cloudLogFiltersAtom } from "../utils";
 
 export interface IBuildLogsSnackProps {
   onClose: () => void;

src/components/TableHeader/CloudLogs/index.tsx

@@ -4,11 +4,9 @@ import TableHeaderButton from "../TableHeaderButton";
 import LogsIcon from "@src/assets/icons/CloudLogs";
 import CloudLogsModal from "./CloudLogsModal";
 
-import { modalAtom } from "./utils";
+import { modalAtom } from "@src/atoms/Table";
 
-export interface ICloudLogsProps {}
-
-export default function CloudLogs(props: ICloudLogsProps) {
+export default function CloudLogs() {
   const [modal, setModal] = useAtom(modalAtom);
   const open = modal === "cloudLogs";
   const setOpen = (open: boolean) => setModal(open ? "cloudLogs" : "");

src/components/TableHeader/CloudLogs/utils.ts

@@ -3,8 +3,6 @@ import { sub } from "date-fns";
 
 import type { IProjectContext } from "@src/contexts/ProjectContext";
 
-export const modalAtom = atomWithHash<"cloudLogs" | "">("modal", "");
-
 export type CloudLogFilters = {
   type: "webhook" | "audit" | "build";
   timeRange:

src/components/TableHeader/Export/index.tsx

@@ -1,4 +1,5 @@
 import { useState, useMemo } from "react";
+import { useAtom } from "jotai";
 
 import { makeStyles, createStyles } from "@mui/styles";
 import { DialogContent, Tab, Divider } from "@mui/material";
@@ -14,8 +15,9 @@ import ExportDetails from "./Export";
 import DownloadDetails from "./Download";
 
 import { useProjectContext } from "@src/contexts/ProjectContext";
-import { db } from "../../../firebase";
+import { db } from "@src/firebase";
 import { isCollectionGroup } from "@src/utils/fns";
+import { modalAtom } from "@src/atoms/Table";
 
 const useStyles = makeStyles((theme) =>
   createStyles({
@@ -47,7 +49,11 @@ const useStyles = makeStyles((theme) =>
 
 export default function Export() {
   const classes = useStyles();
-  const [open, setOpen] = useState(false);
+
+  const [modal, setModal] = useAtom(modalAtom);
+  const open = modal === "export";
+  const setOpen = (open: boolean) => setModal(open ? "export" : "");
+
   const [mode, setMode] = useState<"Export" | "Download">("Export");
   const { tableState } = useProjectContext();
 

src/components/TableHeader/Extensions/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useAtom } from "jotai";
 import _isEqual from "lodash/isEqual";
 
 import TableHeaderButton from "../TableHeaderButton";
@@ -17,6 +18,7 @@ import { useSnackLogContext } from "@src/contexts/SnackLogContext";
 import { emptyExtensionObject, IExtension, ExtensionType } from "./utils";
 import { runRoutes } from "@src/constants/runRoutes";
 import { analytics } from "@src/analytics";
+import { modalAtom } from "@src/atoms/Table";
 
 export default function Extensions() {
   const { tableState, tableActions, rowyRun } = useProjectContext();
@@ -28,7 +30,11 @@ export default function Extensions() {
   const [localExtensionsObjects, setLocalExtensionsObjects] = useState(
     currentExtensionObjects
   );
-  const [openExtensionList, setOpenExtensionList] = useState(false);
+
+  const [modal, setModal] = useAtom(modalAtom);
+  const open = modal === "extensions";
+  const setOpen = (open: boolean) => setModal(open ? "extensions" : "");
+
   const [openMigrationGuide, setOpenMigrationGuide] = useState(false);
   const [extensionModal, setExtensionModal] = useState<{
     mode: "add" | "update";
@@ -45,26 +51,26 @@ export default function Extensions() {
       console.log("Extension migration required.");
       setOpenMigrationGuide(true);
     } else {
-      setOpenExtensionList(true);
+      setOpen(true);
     }
   };
 
   const handleClose = (
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    _setOpen: React.Dispatch<React.SetStateAction<boolean>>
   ) => {
     if (edited) {
-      setOpen(true);
+      _setOpen(true);
       requestConfirmation({
         title: "Discard changes?",
         confirm: "Discard",
         handleConfirm: () => {
-          setOpen(false);
+          _setOpen(false);
           setLocalExtensionsObjects(currentExtensionObjects);
-          setOpenExtensionList(false);
+          setOpen(false);
         },
       });
     } else {
-      setOpenExtensionList(false);
+      setOpen(false);
     }
   };
 
@@ -73,7 +79,7 @@ export default function Extensions() {
       "extensionObjects",
       localExtensionsObjects
     );
-    setOpenExtensionList(false);
+    setOpen(false);
   };
 
   const handleSaveDeploy = async () => {
@@ -189,7 +195,7 @@ export default function Extensions() {
         icon={<ExtensionIcon />}
       />
 
-      {openExtensionList && !!tableState && (
+      {open && !!tableState && (
         <Modal
           onClose={handleClose}
           disableBackdropClick={edited}
@@ -236,9 +242,7 @@ export default function Extensions() {
 
       {extensionModal && (
         <ExtensionModal
-          handleClose={() => {
-            setExtensionModal(null);
-          }}
+          handleClose={() => setExtensionModal(null)}
           handleAdd={handleAddExtension}
           handleUpdate={handleUpdateExtension}
           mode={extensionModal.mode}
@@ -248,12 +252,10 @@ export default function Extensions() {
 
       {openMigrationGuide && (
         <ExtensionMigration
-          handleClose={() => {
-            setOpenMigrationGuide(false);
-          }}
+          handleClose={() => setOpenMigrationGuide(false)}
           handleUpgradeComplete={() => {
             setOpenMigrationGuide(false);
-            setOpenExtensionList(true);
+            setOpen(true);
           }}
         />
       )}

src/components/TableHeader/Webhooks/WebhookList.tsx

@@ -22,10 +22,8 @@ import EmptyState from "@src/components/EmptyState";
 import { webhookNames, IWebhook } from "./utils";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
 import { useProjectContext } from "@src/contexts/ProjectContext";
-import {
-  modalAtom,
-  cloudLogFiltersAtom,
-} from "@src/components/TableHeader/CloudLogs/utils";
+import { modalAtom } from "@src/atoms/Table";
+import { cloudLogFiltersAtom } from "@src/components/TableHeader/CloudLogs/utils";
 
 export interface IWebhookListProps {
   webhooks: IWebhook[];

src/components/TableHeader/Webhooks/index.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import { useAtom } from "jotai";
 import _isEqual from "lodash/isEqual";
 
 import TableHeaderButton from "../TableHeaderButton";
@@ -16,6 +17,7 @@ import { emptyWebhookObject, IWebhook, WebhookType } from "./utils";
 import { runRoutes } from "@src/constants/runRoutes";
 import { analytics } from "@src/analytics";
 import { useSnackbar } from "notistack";
+import { modalAtom } from "@src/atoms/Table";
 
 export default function Webhooks() {
   const { tableState, tableActions, rowyRun, compatibleRowyRunVersion } =
@@ -27,7 +29,11 @@ export default function Webhooks() {
   const currentWebhooks = (tableState?.config.webhooks ?? []) as IWebhook[];
   const [localWebhooksObjects, setLocalWebhooksObjects] =
     useState(currentWebhooks);
-  const [openWebhookList, setOpenWebhookList] = useState(false);
+
+  const [modal, setModal] = useAtom(modalAtom);
+  const open = modal === "webhooks";
+  const setOpen = (open: boolean) => setModal(open ? "webhooks" : "");
+
   const [webhookModal, setWebhookModal] = useState<{
     mode: "add" | "update";
     webhookObject: IWebhook;
@@ -38,32 +44,30 @@ export default function Webhooks() {
 
   const edited = !_isEqual(currentWebhooks, localWebhooksObjects);
 
-  const handleOpen = () => {
-    setOpenWebhookList(true);
-  };
+  const handleOpen = () => setOpen(true);
 
   const handleClose = (
-    setOpen: React.Dispatch<React.SetStateAction<boolean>>
+    _setOpen: React.Dispatch<React.SetStateAction<boolean>>
   ) => {
     if (edited) {
-      setOpen(true);
+      _setOpen(true);
       requestConfirmation({
         title: "Discard changes?",
         confirm: "Discard",
         handleConfirm: () => {
-          setOpen(false);
+          _setOpen(false);
           setLocalWebhooksObjects(currentWebhooks);
-          setOpenWebhookList(false);
+          setOpen(false);
         },
       });
     } else {
-      setOpenWebhookList(false);
+      setOpen(false);
     }
   };
 
   const handleSaveWebhooks = async () => {
     tableActions?.table.updateConfig("webhooks", localWebhooksObjects);
-    setOpenWebhookList(false);
+    setOpen(false);
     // TODO: convert to async function that awaits for the document write to complete
     await new Promise((resolve) => setTimeout(resolve, 500));
   };
@@ -169,7 +173,7 @@ export default function Webhooks() {
         icon={<WebhookIcon />}
       />
 
-      {openWebhookList && !!tableState && (
+      {open && !!tableState && (
         <Modal
           onClose={handleClose}
           disableBackdropClick={edited}
@@ -215,9 +219,7 @@ export default function Webhooks() {
 
       {webhookModal && (
         <WebhookModal
-          handleClose={() => {
-            setWebhookModal(null);
-          }}
+          handleClose={() => setWebhookModal(null)}
           handleAdd={handleAddWebhook}
           handleUpdate={handleUpdateWebhook}
           mode={webhookModal.mode}