webhook table was carried out as webhook table view / redirect to history was added

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/WebhooksTableRow.js

@@ -6,26 +6,26 @@ import Text from "@docspace/components/text";
 import { ToggleButton } from "@docspace/components";
 import SettingsIcon from "PUBLIC_DIR/images/settings.webhooks.react.svg?url";
 import HistoryIcon from "PUBLIC_DIR/images/history.react.svg?url";
-import RetryIcon from "PUBLIC_DIR/images/refresh.react.svg?url";
 import DeleteIcon from "PUBLIC_DIR/images/delete.react.svg?url";
-import WebhookDialog from "../WebhookDialog";
-import { DeleteWebhookDialog } from "../DeleteWebhookDialog";
-import { StatusBadge } from "../StatusBadge";
+import WebhookDialog from "../../WebhookDialog";
+import { DeleteWebhookDialog } from "../../DeleteWebhookDialog";
+import { StatusBadge } from "../../StatusBadge";
+
+import { useHistory } from "react-router-dom";
+
+export const WebhooksTableRow = ({ webhook, toggleEnabled, deleteWebhook, editWebhook }) => {
+  const history = useHistory();
 
-export const WebhooksTableRow = ({
-  webhook,
-  toggleEnabled,
-  deleteWebhook,
-  editWebhook,
-  retryWebhookEvent,
-}) => {
   const [isChecked, setIsChecked] = useState(webhook.isEnabled);
   const [isSettingsOpened, setIsSettingsOpened] = useState(false);
   const [isDeleteOpened, setIsDeleteOpened] = useState(false);
 
   const closeSettings = () => setIsSettingsOpened(false);
   const openSettings = () => setIsSettingsOpened(true);
+  const onDeleteOpen = () => setIsDeleteOpened(true);
   const onDeleteClose = () => setIsDeleteOpened(false);
+  const redirectToHistory = () =>
+    history.push(`/portal-settings/developer/tools/webhooks/history/${webhook.id}`);
 
   const handleWebhookUpdate = (webhookInfo) => editWebhook(webhook, webhookInfo);
   const handleWebhookDelete = () => deleteWebhook(webhook);
@@ -45,14 +45,8 @@ export const WebhooksTableRow = ({
       key: "Webhook history dropdownItem",
       label: "Webhook history",
       icon: HistoryIcon,
-      onClick: () => console.log("webhooks history"),
+      onClick: redirectToHistory,
     },
-    // {
-    //   key: "Retry dropdownItem",
-    //   label: "Retry",
-    //   icon: RetryIcon,
-    //   onClick: () => retryWebhookEvent(webhook.id),
-    // },
     {
       key: "Separator dropdownItem",
       isSeparator: true,
@@ -61,7 +55,7 @@ export const WebhooksTableRow = ({
       key: "Delete webhook dropdownItem",
       label: "Delete webhook",
       icon: DeleteIcon,
-      onClick: () => setIsDeleteOpened(true),
+      onClick: onDeleteOpen,
     },
   ];
 

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/WebhooksTableView/index.js

@@ -0,0 +1,44 @@
+import React, { useRef } from "react";
+
+import styled from "styled-components";
+
+import TableContainer from "@docspace/components/table-container/TableContainer";
+import TableBody from "@docspace/components/table-container/TableBody";
+
+import { WebhooksTableRow } from "./WebhooksTableRow";
+
+import { WebhookTableHeader } from "./WebhookTableHeader";
+
+const TableWrapper = styled(TableContainer)`
+  margin-top: 16px;
+`;
+
+const WebhooksTableView = (props) => {
+  const { webhooks, toggleEnabled, deleteWebhook, editWebhook, sectionWidth } = props;
+
+  const tableRef = useRef(null);
+
+  return (
+    <TableWrapper
+      forwardedRef={tableRef}
+      style={{
+        gridTemplateColumns: "200px 500px 110px 24px",
+      }}>
+      <WebhookTableHeader sectionWidth={sectionWidth} tableRef={tableRef} />
+      <TableBody>
+        {webhooks.map((webhook, index) => (
+          <WebhooksTableRow
+            key={webhook.id}
+            webhook={webhook}
+            index={index}
+            toggleEnabled={toggleEnabled}
+            deleteWebhook={deleteWebhook}
+            editWebhook={editWebhook}
+          />
+        ))}
+      </TableBody>
+    </TableWrapper>
+  );
+};
+
+export default WebhooksTableView;

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/sub-components/WebhooksTable/index.js

@@ -1,50 +1,24 @@
-import React, { useRef } from "react";
-
-import styled from "styled-components";
-
-import TableContainer from "@docspace/components/table-container/TableContainer";
-import TableBody from "@docspace/components/table-container/TableBody";
-
-import { WebhooksTableRow } from "./WebhooksTableRow";
+import React from "react";
 
 import { Consumer } from "@docspace/components/utils/context";
 
 import { inject, observer } from "mobx-react";
-import { WebhookTableHeader } from "./WebhookTableHeader";
-
-const TableWrapper = styled(TableContainer)`
-  margin-top: 16px;
-`;
+import WebhooksTableView from "./WebhooksTableView";
 
 const WebhooksTable = (props) => {
-  const { webhooks, toggleEnabled, deleteWebhook, editWebhook, retryWebhookEvent, viewAs } = props;
-
-  const tableRef = useRef(null);
+  const { webhooks, toggleEnabled, deleteWebhook, editWebhook, viewAs } = props;
 
   return (
     <Consumer>
       {(context) =>
         viewAs === "table" ? (
-          <TableWrapper
-            forwardedRef={tableRef}
-            style={{
-              gridTemplateColumns: "200px 500px 110px 24px",
-            }}>
-            <WebhookTableHeader sectionWidth={context.sectionWidth} tableRef={tableRef} />
-            <TableBody>
-              {webhooks.map((webhook, index) => (
-                <WebhooksTableRow
-                  key={webhook.id}
-                  webhook={webhook}
-                  index={index}
+          <WebhooksTableView
+            webhooks={webhooks}
             toggleEnabled={toggleEnabled}
             deleteWebhook={deleteWebhook}
             editWebhook={editWebhook}
-                  retryWebhookEvent={retryWebhookEvent}
+            sectionWidth={context.sectionWidth}
           />
-              ))}
-            </TableBody>
-          </TableWrapper>
         ) : (
           <></>
         )