basic logs

src/components/Table/TableHeader/Webhooks/WebhookList.tsx

@@ -19,7 +19,7 @@ import {
 } from "@mui/material";
 import AddIcon from "@mui/icons-material/Add";
 import WebhookIcon from "assets/icons/Webhook";
-import DuplicateIcon from "assets/icons/Copy";
+import LogsIcon from "assets/icons/CloudLogs";
 import EditIcon from "@mui/icons-material/EditOutlined";
 import DeleteIcon from "@mui/icons-material/DeleteOutlined";
 
@@ -32,7 +32,7 @@ export interface IWebhookListProps {
   webhooks: IWebhook[];
   handleAddWebhook: (type: WebhookType) => void;
   handleUpdateActive: (index: number, active: boolean) => void;
-  handleDuplicate: (index: number) => void;
+  handleOpenLogs: (index: number) => void;
   handleEdit: (index: number) => void;
   handleDelete: (index: number) => void;
 }
@@ -41,7 +41,7 @@ export default function WebhookList({
   webhooks,
   handleAddWebhook,
   handleUpdateActive,
-  handleDuplicate,
+  handleOpenLogs,
   handleEdit,
   handleDelete,
 }: IWebhookListProps) {
@@ -190,12 +190,12 @@ export default function WebhookList({
                       />
                     </Tooltip>
 
-                    <Tooltip title="Duplicate">
+                    <Tooltip title="Logs">
                       <IconButton
-                        aria-label="Duplicate"
-                        onClick={() => handleDuplicate(index)}
+                        aria-label="Logs"
+                        onClick={() => handleOpenLogs(index)}
                       >
-                        <DuplicateIcon />
+                        <LogsIcon />
                       </IconButton>
                     </Tooltip>
                     <Tooltip title="Edit">

src/components/Table/TableHeader/Webhooks/WebhookLogs.tsx

@@ -0,0 +1,74 @@
+import _isEqual from "lodash/isEqual";
+import _upperFirst from "lodash/upperFirst";
+
+import Modal, { IModalProps } from "components/Modal";
+
+import { IWebhook } from "./utils";
+import useCollection from "@src/hooks/useCollection";
+import { useEffect } from "react";
+import { useProjectContext } from "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/Table/TableHeader/Webhooks/index.tsx

@@ -8,6 +8,7 @@ import WebhookIcon from "assets/icons/Webhook";
 import Modal from "components/Modal";
 import WebhookList from "./WebhookList";
 import WebhookModal from "./WebhookModal";
+import WebhookLogs from "./WebhookLogs";
 
 import { useProjectContext } from "contexts/ProjectContext";
 import { useAppContext } from "contexts/AppContext";
@@ -33,6 +34,7 @@ export default function Webhooks() {
     webhookObject: IWebhook;
     index?: number;
   } | null>(null);
+  const [webhookLogs, setWebhookLogs] = useState<IWebhook | null>();
 
   const edited = !_isEqual(currentwebhooks, localWebhooksObjects);
 
@@ -130,18 +132,12 @@ export default function Webhooks() {
     );
   };
 
-  const handleDuplicate = (index: number) => {
-    setLocalWebhooksObjects([
-      ...localWebhooksObjects,
-      {
-        ...localWebhooksObjects[index],
-        name: `${localWebhooksObjects[index].name} (duplicate)`,
-        active: false,
-        lastEditor: currentEditor(),
-      },
-    ]);
-    analytics.logEvent("duplicated_webhook", {
-      type: localWebhooksObjects[index].type,
+  const handleOpenLogs = (index: number) => {
+    const _webhook = localWebhooksObjects[index];
+
+    setWebhookLogs(_webhook);
+    analytics.logEvent("view_webhook_logs", {
+      type: _webhook.type,
     });
   };
 
@@ -203,7 +199,7 @@ export default function Webhooks() {
                 }}
                 handleUpdateActive={handleUpdateActive}
                 handleEdit={handleEdit}
-                handleDuplicate={handleDuplicate}
+                handleOpenLogs={handleOpenLogs}
                 handleDelete={handleDelete}
               />
             </>
@@ -234,6 +230,14 @@ export default function Webhooks() {
           webhookObject={webhookModal.webhookObject}
         />
       )}
+      {webhookLogs && (
+        <WebhookLogs
+          webhookObject={webhookLogs}
+          handleClose={() => {
+            setWebhookLogs(null);
+          }}
+        />
+      )}
     </>
   );
 }