Merge branch 'develop' of https://github.com/rowyio/rowy into develop

src/components/TableHeader/Webhooks/WebhookList.tsx

@@ -16,6 +16,7 @@ import {
   Switch,
   Tooltip,
   Typography,
+  Link,
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import WebhookIcon from "@src/assets/icons/Webhook";
@@ -27,12 +28,16 @@ import EmptyState from "@src/components/EmptyState";
 import { webhookTypes, webhookNames, IWebhook, WebhookType } from "./utils";
 import { DATE_TIME_FORMAT } from "@src/constants/dates";
 import { useProjectContext } from "@src/contexts/ProjectContext";
+import { useAtom } from "jotai";
+import {
+  modalAtom,
+  cloudLogFiltersAtom,
+} from "@src/components/TableHeader/CloudLogs/utils";
 
 export interface IWebhookListProps {
   webhooks: IWebhook[];
   handleAddWebhook: (type: WebhookType) => void;
   handleUpdateActive: (index: number, active: boolean) => void;
-  handleOpenLogs: (index: number) => void;
   handleEdit: (index: number) => void;
   handleDelete: (index: number) => void;
 }
@@ -41,7 +46,6 @@ export default function WebhookList({
   webhooks,
   handleAddWebhook,
   handleUpdateActive,
-  handleOpenLogs,
   handleEdit,
   handleDelete,
 }: IWebhookListProps) {
@@ -49,6 +53,8 @@ export default function WebhookList({
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const addButtonRef = useRef(null);
 
+  const [, setModal] = useAtom(modalAtom);
+  const [, setCloudLogFilters] = useAtom(cloudLogFiltersAtom);
   const activeWebhookCount = webhooks.filter(
     (webhook) => webhook.active
   ).length;
@@ -191,7 +197,14 @@ export default function WebhookList({
                     <Tooltip title="Logs">
                       <IconButton
                         aria-label="Logs"
-                        onClick={() => handleOpenLogs(index)}
+                        onClick={() => {
+                          setModal("cloudLogs");
+                          setCloudLogFilters({
+                            type: "webhook",
+                            timeRange: { type: "days", value: 7 },
+                            webhook: [webhook.endpoint],
+                          });
+                        }}
                       >
                         <LogsIcon />
                       </IconButton>

src/components/TableHeader/Webhooks/WebhookLogs.tsx

@@ -1,74 +0,0 @@
-import _isEqual from "lodash/isEqual";
-import _upperFirst from "lodash/upperFirst";
-
-import Modal, { IModalProps } from "@src/components/Modal";
-
-import { IWebhook } from "./utils";
-import useCollection from "@src/hooks/useCollection";
-import { useEffect } from "react";
-import { useProjectContext } from "@src/contexts/ProjectContext";
-import { Typography } from "@mui/material";
-import { orderBy } from "lodash";
-
-export interface IWebhookLogsProps {
-  handleClose: IModalProps["onClose"];
-  webhookObject: IWebhook;
-}
-
-export default function WebhookModal({
-  handleClose,
-  webhookObject,
-}: IWebhookLogsProps) {
-  const { tableState } = useProjectContext();
-  const [logsCollection, logsDispatch] = useCollection({});
-  useEffect(() => {
-    if (webhookObject && tableState?.tablePath) {
-      logsDispatch({
-        path: "_rowy_/webhooks/logs",
-        filters: [
-          {
-            field: "params.endpoint",
-            operator: "==",
-            value: webhookObject.endpoint,
-          },
-          {
-            field: "params.tablePath",
-            operator: "==",
-            value: tableState?.tablePath,
-          },
-        ],
-        orderBy: { key: "createdAt", direction: "desc" },
-        limit: 50,
-      });
-    }
-  }, [webhookObject, tableState?.tablePath]);
-  return (
-    <Modal
-      onClose={handleClose}
-      disableBackdropClick
-      disableEscapeKeyDown
-      fullWidth
-      title={`Webhook logs: ${webhookObject.name}`}
-      sx={{
-        "& .MuiPaper-root": {
-          maxWidth: 742 + 20,
-          height: 980,
-        },
-      }}
-      children={
-        <>
-          {logsCollection.documents.map((doc) => (
-            <Typography>{`${doc.createdAt.toDate()} - ${
-              doc.response
-            }`}</Typography>
-          ))}
-        </>
-      }
-      actions={{
-        primary: {
-          onClick: () => {},
-        },
-      }}
-    />
-  );
-}

src/components/TableHeader/Webhooks/index.tsx

@@ -8,7 +8,6 @@ import WebhookIcon from "@src/assets/icons/Webhook";
 import Modal from "@src/components/Modal";
 import WebhookList from "./WebhookList";
 import WebhookModal from "./WebhookModal";
-import WebhookLogs from "./WebhookLogs";
 
 import { useProjectContext } from "@src/contexts/ProjectContext";
 import { useAppContext } from "@src/contexts/AppContext";
@@ -35,7 +34,6 @@ export default function Webhooks() {
     webhookObject: IWebhook;
     index?: number;
   } | null>(null);
-  const [webhookLogs, setWebhookLogs] = useState<IWebhook | null>();
   if (!compatibleRowyRunVersion?.({ minVersion: "1.2.0" })) return <></>;
   const edited = !_isEqual(currentWebhooks, localWebhooksObjects);
 
@@ -134,15 +132,6 @@ export default function Webhooks() {
     );
   };
 
-  const handleOpenLogs = (index: number) => {
-    const _webhook = localWebhooksObjects[index];
-
-    setWebhookLogs(_webhook);
-    analytics.logEvent("view_webhook_logs", {
-      type: _webhook.type,
-    });
-  };
-
   const handleEdit = (index: number) => {
     setWebhookModal({
       mode: "update",
@@ -201,7 +190,6 @@ export default function Webhooks() {
                 }}
                 handleUpdateActive={handleUpdateActive}
                 handleEdit={handleEdit}
-                handleOpenLogs={handleOpenLogs}
                 handleDelete={handleDelete}
               />
             </>
@@ -232,14 +220,6 @@ export default function Webhooks() {
           webhookObject={webhookModal.webhookObject}
         />
       )}
-      {webhookLogs && (
-        <WebhookLogs
-          webhookObject={webhookLogs}
-          handleClose={() => {
-            setWebhookLogs(null);
-          }}
-        />
-      )}
     </>
   );
 }