Web: Client: PortalSettings: Added base OAuth page

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

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import styled from "styled-components";
+import Box from "@docspace/components/box";
+import TextInput from "@docspace/components/text-input";
+import Textarea from "@docspace/components/textarea";
+import Label from "@docspace/components/label";
+import Checkbox from "@docspace/components/checkbox";
+import Button from "@docspace/components/button";
+import ComboBox from "@docspace/components/combobox";
+import Heading from "@docspace/components/heading";
+import { inject, observer } from "mobx-react";
+import { isMobile } from "react-device-detect";
+import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
+
+const Container = styled.div`
+  width: 100%;
+  margin-top: 5px;
+`;
+
+const OAuthDetails = (props) => {
+  const { t, setDocumentTitle } = props;
+
+  setDocumentTitle("OAuth");
+
+  return (
+    <>
+      {isMobile ? (
+        <BreakpointWarning sectionName={"OAuth"} />
+      ) : (
+        <Container>Test</Container>
+      )}
+    </>
+  );
+};
+
+export default inject(({ setup, auth }) => {
+  const { settingsStore, setDocumentTitle } = auth;
+  const { theme } = settingsStore;
+
+  return {
+    theme,
+    setDocumentTitle,
+  };
+})(withTranslation(["Common"])(observer(OAuthDetails)));

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

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from "react";
+import { withTranslation } from "react-i18next";
+import styled from "styled-components";
+import Box from "@docspace/components/box";
+import TextInput from "@docspace/components/text-input";
+import Textarea from "@docspace/components/textarea";
+import Label from "@docspace/components/label";
+import Checkbox from "@docspace/components/checkbox";
+import Button from "@docspace/components/button";
+import ComboBox from "@docspace/components/combobox";
+import Heading from "@docspace/components/heading";
+import { inject, observer } from "mobx-react";
+import { isMobile } from "react-device-detect";
+import BreakpointWarning from "SRC_DIR/components/BreakpointWarning";
+import List from "./sub-components/List";
+
+const OAuth = (props) => {
+  const { t, setDocumentTitle } = props;
+
+  setDocumentTitle("OAuth");
+
+  return (
+    <>
+      {isMobile ? (
+        <BreakpointWarning sectionName={"OAuth"} />
+      ) : (
+        <List openSettingsModal={() => {}} openDeleteModal={() => {}} />
+      )}
+    </>
+  );
+};
+
+export default inject(({ setup, auth }) => {
+  const { settingsStore, setDocumentTitle } = auth;
+  const { theme } = settingsStore;
+
+  return {
+    theme,
+    setDocumentTitle,
+  };
+})(withTranslation(["Common"])(observer(OAuth)));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/Row.js

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { inject, observer } from "mobx-react";
+
+import { Row as ComponentRow } from "@docspace/components/row";
+
+import { RowContent } from "./RowContent";
+
+import SettingsIcon from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
+import HistoryIcon from "PUBLIC_DIR/images/history.react.svg?url";
+import DeleteIcon from "PUBLIC_DIR/images/delete.react.svg?url";
+
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+export const Row = (props) => {
+  const {
+    webhook,
+    sectionWidth,
+    toggleEnabled,
+    openSettingsModal,
+    openDeleteModal,
+    setCurrentWebhook,
+  } = props;
+  const navigate = useNavigate();
+  const { t } = useTranslation(["Webhooks", "Common"]);
+
+  const [isChecked, setIsChecked] = useState(webhook.enabled);
+
+  const handleToggleEnabled = () => {
+    toggleEnabled(webhook);
+    setIsChecked((prevIsChecked) => !prevIsChecked);
+  };
+
+  const redirectToHistory = () => {
+    navigate(window.location.pathname + `/${webhook.id}`);
+  };
+  const handleRowClick = (e) => {
+    if (
+      e.target.closest(".table-container_row-context-menu-wrapper") ||
+      e.target.closest(".toggleButton") ||
+      e.target.closest(".row_context-menu-wrapper") ||
+      e.detail === 0
+    ) {
+      return;
+    }
+
+    redirectToHistory();
+  };
+
+  const onSettingsOpen = () => {
+    setCurrentWebhook(webhook);
+    openSettingsModal();
+  };
+  const onDeleteOpen = () => {
+    setCurrentWebhook(webhook);
+    openDeleteModal();
+  };
+
+  const contextOptions = [
+    {
+      key: "Settings dropdownItem",
+      label: t("Common:Settings"),
+      icon: SettingsIcon,
+      onClick: onSettingsOpen,
+    },
+    {
+      key: "Webhook history dropdownItem",
+      label: t("WebhookHistory"),
+      icon: HistoryIcon,
+      onClick: redirectToHistory,
+    },
+    {
+      key: "Separator dropdownItem",
+      isSeparator: true,
+    },
+    {
+      key: "Delete webhook dropdownItem",
+      label: t("DeleteWebhook"),
+      icon: DeleteIcon,
+      onClick: onDeleteOpen,
+    },
+  ];
+
+  return (
+    <>
+      <ComponentRow
+        sectionWidth={sectionWidth}
+        key={webhook.id}
+        data={webhook}
+        contextOptions={contextOptions}
+        onClick={handleRowClick}
+      >
+        <RowContent
+          sectionWidth={sectionWidth}
+          webhook={webhook}
+          isChecked={isChecked}
+          handleToggleEnabled={handleToggleEnabled}
+        />
+      </ComponentRow>
+    </>
+  );
+};
+
+export default inject(({ webhooksStore }) => {
+  const { toggleEnabled, deleteWebhook, editWebhook, setCurrentWebhook } =
+    webhooksStore;
+
+  return { toggleEnabled, deleteWebhook, editWebhook, setCurrentWebhook };
+})(observer(Row));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/RowContent.js

@@ -0,0 +1,78 @@
+import React from "react";
+import styled from "styled-components";
+
+import Text from "@docspace/components/text";
+import { RowContent as ComponentRowContent } from "@docspace/components/row-content";
+import ToggleButton from "@docspace/components/toggle-button";
+
+//import StatusBadge from "../../StatusBadge";
+
+import { isMobileOnly } from "react-device-detect";
+
+const StyledRowContent = styled(ComponentRowContent)`
+  display: flex;
+  padding-bottom: 10px;
+
+  .rowMainContainer {
+    height: 100%;
+    width: 100%;
+  }
+
+  .mainIcons {
+    min-width: 76px;
+  }
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+`;
+
+const ToggleButtonWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-left: -52px;
+`;
+
+const FlexWrapper = styled.div`
+  display: flex;
+`;
+
+export const RowContent = ({
+  sectionWidth,
+  webhook,
+  isChecked,
+  handleToggleEnabled,
+}) => {
+  return (
+    <StyledRowContent sectionWidth={sectionWidth}>
+      <ContentWrapper>
+        <FlexWrapper>
+          <Text fontWeight={600} fontSize="14px" style={{ marginRight: "8px" }}>
+            {webhook.name}
+          </Text>
+          {/* <StatusBadge status={webhook.status} /> */}
+        </FlexWrapper>
+
+        {!isMobileOnly && (
+          <Text fontWeight={600} fontSize="12px" color="#A3A9AE">
+            {webhook.uri}
+          </Text>
+        )}
+      </ContentWrapper>
+
+      <ToggleButtonWrapper>
+        <ToggleButton
+          className="toggle toggleButton"
+          id="toggle id"
+          isChecked={isChecked}
+          onChange={handleToggleEnabled}
+        />
+      </ToggleButtonWrapper>
+    </StyledRowContent>
+  );
+};

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/RowView/index.js

@@ -0,0 +1,60 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+import { inject, observer } from "mobx-react";
+
+import { isMobile } from "react-device-detect";
+
+import RowContainer from "@docspace/components/row-container";
+
+import Row from "./Row";
+
+const StyledRowContainer = styled(RowContainer)`
+  margin-top: 16px;
+`;
+
+const RowView = (props) => {
+  const {
+    webhooks,
+    sectionWidth,
+    viewAs,
+    setViewAs,
+    openSettingsModal,
+    openDeleteModal,
+  } = props;
+
+  useEffect(() => {
+    if (viewAs !== "table" && viewAs !== "row") return;
+
+    if (sectionWidth < 1025 || isMobile) {
+      viewAs !== "row" && setViewAs("row");
+    } else {
+      viewAs !== "table" && setViewAs("table");
+    }
+  }, [sectionWidth]);
+
+  return (
+    <StyledRowContainer useReactWindow={false}>
+      {webhooks.map((webhook) => (
+        <Row
+          key={webhook.id}
+          webhook={webhook}
+          sectionWidth={sectionWidth}
+          openSettingsModal={openSettingsModal}
+          openDeleteModal={openDeleteModal}
+        />
+      ))}
+    </StyledRowContainer>
+  );
+};
+
+export default inject(({ webhooksStore, setup }) => {
+  const { webhooks } = webhooksStore;
+
+  const { viewAs, setViewAs } = setup;
+
+  return {
+    webhooks,
+    viewAs,
+    setViewAs,
+  };
+})(observer(RowView));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableHeader.js

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { TableHeader as Header } from "@docspace/components/table-container/TableHeader";
+
+import { useTranslation } from "react-i18next";
+import { inject, observer } from "mobx-react";
+
+const TABLE_VERSION = "5";
+const TABLE_COLUMNS = `webhooksConfigColumns_ver-${TABLE_VERSION}`;
+
+const getColumns = (defaultColumns, userId) => {
+  const storageColumns = localStorage.getItem(`${TABLE_COLUMNS}=${userId}`);
+  const columns = [];
+
+  if (storageColumns) {
+    const splitColumns = storageColumns.split(",");
+
+    for (let col of defaultColumns) {
+      const column = splitColumns.find((key) => key === col.key);
+      column ? (col.enable = true) : (col.enable = false);
+
+      columns.push(col);
+    }
+    return columns;
+  } else {
+    return defaultColumns;
+  }
+};
+
+const TableHeader = (props) => {
+  const {
+    userId,
+    sectionWidth,
+    tableRef,
+    columnStorageName,
+    columnInfoPanelStorageName,
+    setHideColumns,
+  } = props;
+  const { t } = useTranslation(["Webhooks", "Common"]);
+
+  const defaultColumns = [
+    {
+      key: "Name",
+      title: t("Common:Name"),
+      resizable: true,
+      enable: true,
+      default: true,
+      active: true,
+      minWidth: 150,
+      onChange: onColumnChange,
+    },
+    {
+      key: "URL",
+      title: t("URL"),
+      enable: true,
+      resizable: true,
+      onChange: onColumnChange,
+    },
+    {
+      key: "State",
+      title: t("State"),
+      enable: true,
+      resizable: true,
+      onChange: onColumnChange,
+    },
+  ];
+
+  const [columns, setColumns] = useState(getColumns(defaultColumns, userId));
+
+  function onColumnChange(key, e) {
+    const columnIndex = columns.findIndex((c) => c.key === key);
+
+    if (columnIndex === -1) return;
+
+    setColumns((prevColumns) =>
+      prevColumns.map((item, index) =>
+        index === columnIndex ? { ...item, enable: !item.enable } : item
+      )
+    );
+
+    const tableColumns = columns.map((c) => c.enable && c.key);
+    localStorage.setItem(`${TABLE_COLUMNS}=${userId}`, tableColumns);
+  }
+
+  return (
+    <Header
+      checkboxSize="48px"
+      containerRef={tableRef}
+      columns={columns}
+      columnStorageName={columnStorageName}
+      columnInfoPanelStorageName={columnInfoPanelStorageName}
+      sectionWidth={sectionWidth}
+      checkboxMargin="12px"
+      showSettings={false}
+      useReactWindow
+      setHideColumns={setHideColumns}
+      infoPanelVisible={false}
+    />
+  );
+};
+
+export default inject(({ auth }) => {
+  return {
+    userId: auth.userStore.user.id,
+  };
+})(observer(TableHeader));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/TableRow.js

@@ -0,0 +1,155 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { TableRow as Row } from "@docspace/components/table-container/TableRow";
+import TableCell from "@docspace/components/table-container/TableCell";
+import Text from "@docspace/components/text";
+
+import ToggleButton from "@docspace/components/toggle-button";
+import SettingsIcon from "PUBLIC_DIR/images/catalog.settings.react.svg?url";
+import HistoryIcon from "PUBLIC_DIR/images/history.react.svg?url";
+import DeleteIcon from "PUBLIC_DIR/images/delete.react.svg?url";
+//import StatusBadge from "../../StatusBadge";
+
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+
+import { inject, observer } from "mobx-react";
+
+const StyledWrapper = styled.div`
+  display: contents;
+`;
+
+const StyledTableRow = styled(Row)`
+  .table-container_cell {
+    padding-right: 30px;
+    text-overflow: ellipsis;
+  }
+
+  .mr-8 {
+    margin-right: 8px;
+  }
+  .textOverflow {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+
+const TableRow = (props) => {
+  const {
+    webhook,
+    toggleEnabled,
+    openSettingsModal,
+    openDeleteModal,
+    setCurrentWebhook,
+    hideColumns,
+  } = props;
+  const navigate = useNavigate();
+
+  const { t } = useTranslation(["Webhooks", "Common"]);
+
+  const [isChecked, setIsChecked] = useState(webhook.enabled);
+
+  const redirectToHistory = () => {
+    navigate(window.location.pathname + `/${webhook.id}`);
+  };
+
+  const handleRowClick = (e) => {
+    if (
+      e.target.closest(".checkbox") ||
+      e.target.closest(".table-container_row-checkbox") ||
+      e.target.closest(".type-combobox") ||
+      e.target.closest(".table-container_row-context-menu-wrapper") ||
+      e.target.closest(".toggleButton") ||
+      e.detail === 0
+    ) {
+      return;
+    }
+
+    redirectToHistory();
+  };
+  const handleToggleEnabled = () => {
+    toggleEnabled(webhook);
+    setIsChecked((prevIsChecked) => !prevIsChecked);
+  };
+
+  const onSettingsOpen = () => {
+    setCurrentWebhook(webhook);
+    openSettingsModal();
+  };
+  const onDeleteOpen = () => {
+    setCurrentWebhook(webhook);
+    openDeleteModal();
+  };
+
+  const contextOptions = [
+    {
+      key: "Settings dropdownItem",
+      label: t("Common:Settings"),
+      icon: SettingsIcon,
+      onClick: onSettingsOpen,
+    },
+    {
+      key: "Webhook history dropdownItem",
+      label: t("WebhookHistory"),
+      icon: HistoryIcon,
+      onClick: redirectToHistory,
+    },
+    {
+      key: "Separator dropdownItem",
+      isSeparator: true,
+    },
+    {
+      key: "Delete webhook dropdownItem",
+      label: t("DeleteWebhook"),
+      icon: DeleteIcon,
+      onClick: onDeleteOpen,
+    },
+  ];
+
+  return (
+    <>
+      <StyledWrapper onClick={handleRowClick}>
+        <StyledTableRow
+          contextOptions={contextOptions}
+          hideColumns={hideColumns}
+        >
+          <TableCell>
+            <Text as="span" fontWeight={600} className="mr-8 textOverflow">
+              {webhook.name}{" "}
+            </Text>
+            {/* <StatusBadge status={webhook.status} /> */}
+          </TableCell>
+          <TableCell>
+            <Text
+              as="span"
+              fontSize="11px"
+              color="#A3A9AE"
+              fontWeight={600}
+              className="textOverflow"
+            >
+              {webhook.uri}
+            </Text>
+          </TableCell>
+          <TableCell>
+            <ToggleButton
+              className="toggle toggleButton"
+              id="toggle id"
+              isChecked={isChecked}
+              onChange={handleToggleEnabled}
+            />
+          </TableCell>
+        </StyledTableRow>
+      </StyledWrapper>
+    </>
+  );
+};
+
+export default inject(({ webhooksStore }) => {
+  const { toggleEnabled, setCurrentWebhook } = webhooksStore;
+
+  return {
+    toggleEnabled,
+    setCurrentWebhook,
+  };
+})(observer(TableRow));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/TableView/index.js

@@ -0,0 +1,117 @@
+import React, { useState, useRef, useEffect } from "react";
+import { inject, observer } from "mobx-react";
+import { isMobile } from "react-device-detect";
+
+import styled from "styled-components";
+
+import TableContainer from "@docspace/components/table-container/TableContainer";
+import TableBody from "@docspace/components/table-container/TableBody";
+
+import TableRow from "./TableRow";
+import TableHeader from "./TableHeader";
+
+import { Base } from "@docspace/components/themes";
+
+const TableWrapper = styled(TableContainer)`
+  margin-top: 16px;
+
+  .header-container-text {
+    font-size: 12px;
+  }
+
+  .table-container_header {
+    position: absolute;
+  }
+
+  .table-list-item {
+    margin-top: -1px;
+    &:hover {
+      cursor: pointer;
+      background-color: ${(props) =>
+        props.theme.isBase ? "#F8F9F9" : "#282828"};
+    }
+  }
+`;
+
+TableWrapper.defaultProps = { theme: Base };
+
+const TABLE_VERSION = "5";
+const COLUMNS_SIZE = `webhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
+const INFO_PANEL_COLUMNS_SIZE = `infoPanelWebhooksConfigColumnsSize_ver-${TABLE_VERSION}`;
+
+const TableView = (props) => {
+  const {
+    webhooks,
+    loadWebhooks,
+    sectionWidth,
+    viewAs,
+    setViewAs,
+    openSettingsModal,
+    openDeleteModal,
+    userId,
+  } = props;
+
+  const tableRef = useRef(null);
+  const [hideColumns, setHideColumns] = useState(false);
+
+  useEffect(() => {
+    if (!sectionWidth) return;
+    if (sectionWidth < 1025 || isMobile) {
+      viewAs !== "row" && setViewAs("row");
+    } else {
+      viewAs !== "table" && setViewAs("table");
+    }
+  }, [sectionWidth]);
+
+  const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
+  const columnInfoPanelStorageName = `${INFO_PANEL_COLUMNS_SIZE}=${userId}`;
+
+  return (
+    <TableWrapper forwardedRef={tableRef} useReactWindow>
+      <TableHeader
+        sectionWidth={sectionWidth}
+        tableRef={tableRef}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
+        setHideColumns={setHideColumns}
+      />
+      <TableBody
+        itemHeight={49}
+        useReactWindow
+        infoPanelVisible={false}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
+        filesLength={webhooks.length}
+        fetchMoreFiles={loadWebhooks}
+        hasMoreFiles={false}
+        itemCount={webhooks.length}
+      >
+        {webhooks.map((webhook, index) => (
+          <TableRow
+            key={webhook.id}
+            webhook={webhook}
+            index={index}
+            openSettingsModal={openSettingsModal}
+            openDeleteModal={openDeleteModal}
+            hideColumns={hideColumns}
+          />
+        ))}
+      </TableBody>
+    </TableWrapper>
+  );
+};
+
+export default inject(({ webhooksStore, setup, auth }) => {
+  const { webhooks, loadWebhooks } = webhooksStore;
+
+  const { viewAs, setViewAs } = setup;
+  const { id: userId } = auth.userStore.user;
+
+  return {
+    webhooks,
+    viewAs,
+    setViewAs,
+    loadWebhooks,
+    userId,
+  };
+})(observer(TableView));

packages/client/src/pages/PortalSettings/categories/developer-tools/OAuth/sub-components/List/index.js

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { inject, observer } from "mobx-react";
+import { Consumer } from "@docspace/components/utils/context";
+
+import TableView from "./TableView";
+import RowView from "./RowView";
+
+const List = (props) => {
+  const { viewAs, openSettingsModal, openDeleteModal } = props;
+
+  return (
+    <Consumer>
+      {(context) =>
+        viewAs === "table" ? (
+          <TableView
+            sectionWidth={context.sectionWidth}
+            openSettingsModal={openSettingsModal}
+            openDeleteModal={openDeleteModal}
+          />
+        ) : (
+          <RowView
+            sectionWidth={context.sectionWidth}
+            openSettingsModal={openSettingsModal}
+            openDeleteModal={openDeleteModal}
+          />
+        )
+      }
+    </Consumer>
+  );
+};
+export default inject(({ setup }) => {
+  const { viewAs } = setup;
+
+  return {
+    viewAs,
+  };
+})(observer(List));

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

@@ -9,6 +9,7 @@ import { useNavigate } from "react-router-dom";
 
 import JavascriptSDK from "./JavascriptSDK";
 import Webhooks from "./Webhooks";
+import OAuth from "./OAuth";
 
 import AppLoader from "@docspace/common/components/AppLoader";
 import SSOLoader from "./sub-components/ssoLoader";
@@ -48,6 +49,11 @@ const DeveloperToolsWrapper = (props) => {
       name: t("Webhooks:Webhooks"),
       content: <Webhooks />,
     },
+    {
+      id: "oauth",
+      name: "OAuth",
+      content: <OAuth />,
+    },
   ];
 
   const load = async () => {
@@ -71,8 +77,8 @@ const DeveloperToolsWrapper = (props) => {
       combineUrl(
         window.DocSpaceConfig?.proxy?.url,
         config.homepage,
-        `/portal-settings/developer-tools/${e.id}`,
+        `/portal-settings/developer-tools/${e.id}`
-      ),
+      )
     );
   };
 
@@ -85,7 +91,9 @@ const DeveloperToolsWrapper = (props) => {
       <AppLoader />
     );
 
-  return <StyledSubmenu data={data} startSelect={currentTab} onSelect={onSelect} />;
+  return (
+    <StyledSubmenu data={data} startSelect={currentTab} onSelect={onSelect} />
+  );
 };
 
 export default inject(({ setup, webhooksStore }) => {

packages/client/src/pages/PortalSettings/utils/settingsTree.js

@@ -304,6 +304,14 @@ export const settingsTree = [
         tKey: "DeveloperTools",
         isCategory: true,
       },
+      {
+        id: "portal-settings_catalog-oauth",
+        key: "5-2",
+        icon: "",
+        link: "oauth",
+        tKey: "OAuth",
+        isCategory: true,
+      },
     ],
   },
   {

packages/client/src/routes/portalSettings.js

@@ -12,65 +12,100 @@ import { generalRoutes } from "./general";
 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"),
+  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 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 WebhookHistory = loadable(() =>
-  import("../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory"),
+  import(
+    "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookHistory"
+  )
 );
 const WebhookDetails = loadable(() =>
-  import("../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails"),
+  import(
+    "../pages/PortalSettings/categories/developer-tools/Webhooks/WebhookEventDetails"
+  )
+);
+const OAuthDetails = loadable(() =>
+  import(
+    "../pages/PortalSettings/categories/developer-tools/OAuth/OAuthDetails"
+  )
+);
+const Backup = loadable(() =>
+  import("../pages/PortalSettings/categories/data-management/index")
+);
+const DeleteDataPage = loadable(() =>
+  import("../pages/PortalSettings/categories/delete-data")
 );
-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 = {
@@ -192,6 +227,14 @@ const PortalSettingsRoutes = {
       path: "developer-tools/webhooks",
       element: <DeveloperTools />,
     },
+    {
+      path: "developer-tools/oauth",
+      element: <DeveloperTools />,
+    },
+    {
+      path: "developer-tools/oauth/:id",
+      element: <OAuthDetails />,
+    },
     {
       path: "developer-tools/webhooks/:id",
       element: <WebhookHistory />,