withRouter and history were substituted with useNavigate

packages/client/src/pages/PortalSettings/categories/developer-tools/JavascriptSDK/index.js

@@ -14,7 +14,7 @@ import { objectToGetParams, loadScript } from "@docspace/common/utils";
 import { inject, observer } from "mobx-react";
 import { isMobile } from "react-device-detect";
 import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
-import { SortByFieldName } from "../../../../helpers/constants";
+import { SortByFieldName } from "../../../../../helpers/constants";
 
 const Controls = styled(Box)`
   width: 500px;
@@ -337,9 +337,7 @@ const PortalIntegration = (props) => {
             </ControlsGroup>
             <ControlsGroup>
               <Label className="label" text={t("SearchTerm")} />
-              <Box
-                style={{ flexDirection: "row", display: "flex", gap: "16px" }}
-              >
+              <Box style={{ flexDirection: "row", display: "flex", gap: "16px" }}>
                 <TextInput
                   scale={true}
                   onChange={onChangeSearch}
@@ -393,18 +391,8 @@ const PortalIntegration = (props) => {
             </Frame>
 
             <Buttons>
-              <Button
-                primary
-                size="normal"
-                label={t("Common:Preview")}
-                onClick={loadFrame}
-              />
-              <Button
-                primary
-                size="normal"
-                label={t("Destroy")}
-                onClick={destroyFrame}
-              />
+              <Button primary size="normal" label={t("Common:Preview")} onClick={loadFrame} />
+              <Button primary size="normal" label={t("Destroy")} onClick={destroyFrame} />
             </Buttons>
 
             <Heading level={1} size="xsmall">
@@ -429,6 +417,6 @@ export default inject(({ setup, auth }) => {
   };
 })(
   withTranslation(["JavascriptSdk", "Files", "EmbeddingPanel", "Common"])(
-    observer(PortalIntegration)
-  )
+    observer(PortalIntegration),
+  ),
 );

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails/sub-components/DetailsNavigationHeader.js

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+
+import { useNavigate } from "react-router-dom";
 
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 
@@ -30,10 +31,10 @@ const HeaderContainer = styled.div`
   }
 `;
 
-const DetailsNavigationHeader = (props) => {
-  const { history } = props;
+const DetailsNavigationHeader = () => {
+  const navigate = useNavigate();
   const onBack = () => {
-    history.goBack();
+    navigate(-1);
   };
 
   return (
@@ -52,4 +53,4 @@ const DetailsNavigationHeader = (props) => {
   );
 };
 
-export default withRouter(DetailsNavigationHeader);
+export default DetailsNavigationHeader;

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/HistoryHeader.js

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { withRouter } from "react-router";
+import { useNavigate } from "react-router-dom";
 
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 
@@ -32,10 +32,10 @@ const HeaderContainer = styled.div`
   }
 `;
 
-const HistoryHeader = (props) => {
-  const { history } = props;
+const HistoryHeader = () => {
+  const navigate = useNavigate();
   const onBack = () => {
-    history.goBack();
+    navigate(-1);
   };
 
   return (
@@ -57,4 +57,4 @@ const HistoryHeader = (props) => {
   );
 };
 
-export default withRouter(HistoryHeader);
+export default HistoryHeader;

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryRowView/HistoryRow.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import Row from "@docspace/components/row";
 import { HistoryRowContent } from "./HistoryRowContent";
@@ -9,10 +9,9 @@ import RetryIcon from "PUBLIC_DIR/images/refresh.react.svg?url";
 import InfoIcon from "PUBLIC_DIR/images/info.outline.react.svg?url";
 
 export const HistoryRow = ({ historyItem, sectionWidth }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const redirectToDetails = () =>
-    history.push(window.location.pathname + `/event/${historyItem.id}`);
+  const redirectToDetails = () => navigate(window.location.pathname + `/${historyItem.id}`);
 
   const contextOptions = [
     {

packages/client/src/pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory/sub-components/WebhookHistoryTable/HistoryTableView/HistoryTableRow.js

@@ -1,14 +1,12 @@
 import React, { useMemo } from "react";
 import moment from "moment";
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 import TableRow from "@docspace/components/table-container/TableRow";
 import TableCell from "@docspace/components/table-container/TableCell";
 import Text from "@docspace/components/text";
 import Checkbox from "@docspace/components/checkbox";
 import { StatusBadge } from "../../../../sub-components/StatusBadge";
-
-import { withRouter } from "react-router";
 import withFileActions from "@docspace/client/src/HOCs/withFileActions";
 
 import RetryIcon from "PUBLIC_DIR/images/refresh.react.svg?url";
@@ -16,9 +14,9 @@ import InfoIcon from "PUBLIC_DIR/images/info.outline.react.svg?url";
 
 const HistoryTableRow = (props) => {
   const { item, checkedProps, onContentFileSelect } = props;
-  const history = useHistory();
+  const navigate = useNavigate();
 
-  const redirectToDetails = () => history.push(window.location.pathname + `/event/${item.id}`);
+  const redirectToDetails = () => navigate(window.location.pathname + `/${item.id}`);
 
   const contextOptions = [
     {
@@ -64,4 +62,4 @@ const HistoryTableRow = (props) => {
   );
 };
 
-export default withRouter(withFileActions(HistoryTableRow));
+export default withFileActions(HistoryTableRow);

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

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from "react";
 import WebhookDialog from "./sub-components/WebhookDialog";
 import { WebhookInfo } from "./sub-components/WebhookInfo";
 import WebhooksTable from "./sub-components/WebhooksTable";
-import { setDocumentTitle } from "SRC_DIR/helpers/utils";
 
 import { inject, observer } from "mobx-react";
 
@@ -20,7 +19,10 @@ const MainWrapper = styled.div`
 `;
 
 const Webhooks = (props) => {
-  const { state, loadWebhooks, addWebhook, isWebhookExist, isWebhooksEmpty } = props;
+  const { state, loadWebhooks, addWebhook, isWebhookExist, isWebhooksEmpty, setDocumentTitle } =
+    props;
+
+  setDocumentTitle("Webhooks");
 
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -35,7 +37,6 @@ const Webhooks = (props) => {
   const openModal = () => setIsModalOpen(true);
 
   useEffect(() => {
-    setDocumentTitle("Developer Tools");
     loadWebhooks();
   }, []);
 
@@ -60,8 +61,9 @@ const Webhooks = (props) => {
   );
 };
 
-export default inject(({ webhooksStore }) => {
+export default inject(({ webhooksStore, auth }) => {
   const { state, loadWebhooks, addWebhook, isWebhookExist, isWebhooksEmpty } = webhooksStore;
+  const { setDocumentTitle } = auth;
 
   return {
     state,
@@ -69,5 +71,6 @@ export default inject(({ webhooksStore }) => {
     addWebhook,
     isWebhookExist,
     isWebhooksEmpty,
+    setDocumentTitle,
   };
 })(observer(Webhooks));

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

@@ -10,7 +10,7 @@ import SettingsIcon from "PUBLIC_DIR/images/settings.webhooks.react.svg?url";
 import HistoryIcon from "PUBLIC_DIR/images/history.react.svg?url";
 import DeleteIcon from "PUBLIC_DIR/images/delete.react.svg?url";
 
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 export const WebhookRow = ({
   webhook,
@@ -19,7 +19,7 @@ export const WebhookRow = ({
   deleteWebhook,
   editWebhook,
 }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [isChecked, setIsChecked] = useState(webhook.enabled);
   const [isSettingsOpened, setIsSettingsOpened] = useState(false);
@@ -29,8 +29,7 @@ export const WebhookRow = ({
   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 redirectToHistory = () => navigate(window.location.pathname + `/${webhook.id}`);
 
   const handleWebhookUpdate = (webhookInfo) => editWebhook(webhook, webhookInfo);
   const handleWebhookDelete = () => deleteWebhook(webhook);

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

@@ -11,10 +11,10 @@ import WebhookDialog from "../../WebhookDialog";
 import { DeleteWebhookDialog } from "../../DeleteWebhookDialog";
 import { StatusBadge } from "../../StatusBadge";
 
-import { useHistory } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 export const WebhooksTableRow = ({ webhook, toggleEnabled, deleteWebhook, editWebhook }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const [isChecked, setIsChecked] = useState(webhook.enabled);
   const [isSettingsOpened, setIsSettingsOpened] = useState(false);
@@ -24,8 +24,7 @@ export const WebhooksTableRow = ({ webhook, toggleEnabled, deleteWebhook, editWe
   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 redirectToHistory = () => navigate(window.location.pathname + `/${webhook.id}`);
 
   const handleWebhookUpdate = (webhookInfo) => editWebhook(webhook, webhookInfo);
   const handleWebhookDelete = () => deleteWebhook(webhook);

packages/client/src/pages/PortalSettings/categories/developer-tools/index.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import Submenu from "@docspace/components/submenu";
-import { withRouter } from "react-router";
-import { withTranslation } from "react-i18next";
 import { inject, observer } from "mobx-react";
 import { combineUrl } from "@docspace/common/utils";
 import config from "PACKAGE_FILE";
 
+import { useNavigate } from "react-router-dom";
+
 import JavascriptSDK from "./JavascriptSDK";
 import Webhooks from "./Webhooks";
 
@@ -13,40 +13,39 @@ import AppLoader from "@docspace/common/components/AppLoader";
 import SSOLoader from "./sub-components/ssoLoader";
 
 const DeveloperToolsWrapper = (props) => {
-  const { t, tReady, history, loadBaseInfo, setDocumentTitle } = props;
+  const { loadBaseInfo } = props;
   const [currentTab, setCurrentTab] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
-
-  setDocumentTitle("Developer Tools");
+  const navigate = useNavigate();
 
   const data = [
     {
       id: "javascript-sdk",
-      name: t("Javascript sdk"),
+      name: "Javascript sdk",
       content: <JavascriptSDK />,
     },
     {
       id: "webhooks",
-      name: t("Webhooks"),
+      name: "Webhooks",
       content: <Webhooks />,
     },
   ];
 
   const load = async () => {
-    const path = location.pathname;
-    const currentTab = data.findIndex((item) => path.includes(item.id));
-    if (currentTab !== -1) setCurrentTab(currentTab);
-
     await loadBaseInfo();
     setIsLoading(true);
   };
 
   useEffect(() => {
+    const path = location.pathname;
+    const currentTab = data.findIndex((item) => path.includes(item.id));
+    if (currentTab !== -1) setCurrentTab(currentTab);
+
     load();
   }, []);
 
   const onSelect = (e) => {
-    history.push(
+    navigate(
       combineUrl(
         window.DocSpaceConfig?.proxy?.url,
         config.homepage,
@@ -55,23 +54,17 @@ const DeveloperToolsWrapper = (props) => {
     );
   };
 
-  if (!isLoading && !tReady) return currentTab === 0 ? <SSOLoader /> : <AppLoader />;
+  if (!isLoading) return currentTab === 0 ? <SSOLoader /> : <AppLoader />;
 
   return <Submenu data={data} startSelect={currentTab} onSelect={onSelect} />;
 };
 
-export default inject(({ setup, auth }) => {
+export default inject(({ setup }) => {
   const { initSettings } = setup;
-  const { setDocumentTitle } = auth;
 
   return {
     loadBaseInfo: async () => {
       await initSettings();
     },
-    setDocumentTitle,
   };
-})(
-  withTranslation(["Settings", "SingleSignOn", "Translations"])(
-    withRouter(observer(DeveloperToolsWrapper)),
-  ),
-);
+})(observer(DeveloperToolsWrapper));

packages/client/src/routes/portalSettings.js

@@ -10,85 +10,65 @@ import Error404 from "SRC_DIR/pages/Errors/404";
 const PortalSettings = loadable(() => import("../pages/PortalSettings"));
 
 const CustomizationSettings = loadable(() =>
-  import("../pages/PortalSettings/categories/common/index.js")
+  import("../pages/PortalSettings/categories/common/index.js"),
 );
 const LanguageAndTimeZoneSettings = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/common/Customization/language-and-time-zone"
-  )
+  import("../pages/PortalSettings/categories/common/Customization/language-and-time-zone"),
 );
 const WelcomePageSettings = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/common/Customization/welcome-page-settings"
-  )
+  import("../pages/PortalSettings/categories/common/Customization/welcome-page-settings"),
 );
 const DNSSettings = loadable(() =>
-  import("../pages/PortalSettings/categories/common/Customization/dns-settings")
+  import("../pages/PortalSettings/categories/common/Customization/dns-settings"),
 );
 const PortalRenaming = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/common/Customization/portal-renaming"
-  )
+  import("../pages/PortalSettings/categories/common/Customization/portal-renaming"),
 );
 const WhiteLabel = loadable(() =>
-  import("../pages/PortalSettings/categories/common/Branding/whitelabel")
+  import("../pages/PortalSettings/categories/common/Branding/whitelabel"),
 );
 const SecuritySettings = loadable(() =>
-  import("../pages/PortalSettings/categories/security/index.js")
+  import("../pages/PortalSettings/categories/security/index.js"),
 );
 const TfaPage = loadable(() =>
-  import("../pages/PortalSettings/categories/security/access-portal/tfa")
+  import("../pages/PortalSettings/categories/security/access-portal/tfa"),
 );
 const PasswordStrengthPage = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/security/access-portal/passwordStrength"
-  )
+  import("../pages/PortalSettings/categories/security/access-portal/passwordStrength"),
 );
 const TrustedMailPage = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/security/access-portal/trustedMail"
-  )
+  import("../pages/PortalSettings/categories/security/access-portal/trustedMail"),
 );
 const IpSecurityPage = loadable(() =>
-  import("../pages/PortalSettings/categories/security/access-portal/ipSecurity")
+  import("../pages/PortalSettings/categories/security/access-portal/ipSecurity"),
 );
 const AdminMessagePage = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/security/access-portal/adminMessage"
-  )
+  import("../pages/PortalSettings/categories/security/access-portal/adminMessage"),
 );
 const SessionLifetimePage = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/security/access-portal/sessionLifetime"
-  )
-);
-const Integration = loadable(() =>
-  import("../pages/PortalSettings/categories/integration")
-);
-const Payments = loadable(() =>
-  import("../pages/PortalSettings/categories/payments")
+  import("../pages/PortalSettings/categories/security/access-portal/sessionLifetime"),
 );
+const Integration = loadable(() => import("../pages/PortalSettings/categories/integration"));
+const Payments = loadable(() => import("../pages/PortalSettings/categories/payments"));
 const ThirdParty = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings"
-  )
+  import("../pages/PortalSettings/categories/integration/ThirdPartyServicesSettings"),
 );
 const SingleSignOn = loadable(() =>
-  import("../pages/PortalSettings/categories/integration/SingleSignOn")
+  import("../pages/PortalSettings/categories/integration/SingleSignOn"),
 );
 const DeveloperTools = loadable(() =>
-  import("../pages/PortalSettings/categories/developer-tools/index.js")
+  import("../pages/PortalSettings/categories/developer-tools/index.js"),
 );
-const Backup = loadable(() =>
-  import("../pages/PortalSettings/categories/data-management/index")
+const WebhookHistory = loadable(() =>
+  import("../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory"),
 );
-const DeleteDataPage = loadable(() =>
-  import("../pages/PortalSettings/categories/delete-data")
+const WebhookDetails = loadable(() =>
+  import("../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails"),
 );
+const Backup = loadable(() => import("../pages/PortalSettings/categories/data-management/index"));
+const DeleteDataPage = loadable(() => import("../pages/PortalSettings/categories/delete-data"));
 const RestoreBackup = loadable(() =>
-  import(
-    "../pages/PortalSettings/categories/data-management/backup/restore-backup/index"
-  )
+  import("../pages/PortalSettings/categories/data-management/backup/restore-backup/index"),
 );
 
 const PortalSettingsRoutes = {
@@ -200,12 +180,28 @@ const PortalSettingsRoutes = {
     },
     {
       path: "developer",
-      element: <Navigate to="developer/tools" />,
+      element: <Navigate to="tools/javascript-sdk" />,
     },
     {
       path: "developer/tools",
+      element: <Navigate to="javascript-sdk" />,
+    },
+    {
+      path: "developer/tools/javascript-sdk",
       element: <DeveloperTools />,
     },
+    {
+      path: "developer/tools/webhooks",
+      element: <DeveloperTools />,
+    },
+    {
+      path: "developer/tools/webhooks/:id",
+      element: <WebhookHistory />,
+    },
+    {
+      path: "developer/tools/webhooks/:id/:eventId",
+      element: <WebhookDetails />,
+    },
     {
       path: "backup",
       element: <Navigate to="backup/data-backup" />,