From e3648da9cb4948324ba5c8ef39e04917540c0b0e Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Sun, 21 Sep 2025 10:58:45 +0800 Subject: [PATCH 1/4] misc: move gateway and relay to networking page --- .../components/OrgSidebar/OrgSidebar.tsx | 23 +- .../GatewayListPage/GatewayListPage.tsx | 267 ------------------ .../Gateways/GatewayListPage/route.tsx | 16 -- .../Relay/RelayListPage/RelayListPage.tsx | 214 -------------- .../Gateways/Relay/RelayListPage/route.tsx | 16 -- .../NetworkingPage/NetworkingPage.tsx | 25 ++ .../components/GatewayTab/GatewayTab.tsx | 251 ++++++++++++++++ .../components/EditGatewayDetailsModal.tsx | 0 .../components/GatewayTab/index.tsx | 1 + .../NetworkingTabGroup/NetworkingTabGroup.tsx | 37 +++ .../components/NetworkingTabGroup/index.tsx | 1 + .../components/RelayTab/RelayTab.tsx | 198 +++++++++++++ .../components/RelayTab/index.tsx | 1 + .../NetworkingPage/components/index.tsx | 3 + .../organization/NetworkingPage/route.tsx | 26 ++ frontend/src/routeTree.gen.ts | 168 +++-------- frontend/src/routes.ts | 3 +- 17 files changed, 596 insertions(+), 654 deletions(-) delete mode 100644 frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx delete mode 100644 frontend/src/pages/organization/Gateways/GatewayListPage/route.tsx delete mode 100644 frontend/src/pages/organization/Gateways/Relay/RelayListPage/RelayListPage.tsx delete mode 100644 frontend/src/pages/organization/Gateways/Relay/RelayListPage/route.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx rename frontend/src/pages/organization/{Gateways/GatewayListPage => NetworkingPage/components/GatewayTab}/components/EditGatewayDetailsModal.tsx (100%) create mode 100644 frontend/src/pages/organization/NetworkingPage/components/GatewayTab/index.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/index.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/components/RelayTab/index.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/components/index.tsx create mode 100644 frontend/src/pages/organization/NetworkingPage/route.tsx diff --git a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx index e1c1e89f9..d330ea872 100644 --- a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx @@ -1,11 +1,10 @@ import { faBook, faCog, - faDoorClosed, faInfinity, faMoneyBill, + faNetworkWired, faPlug, - faRoute, faShare, faTable, faUsers, @@ -125,26 +124,16 @@ export const OrgSidebar = ({ isHidden }: Props) => { )} - + + + {({ isActive }) => (
- +
- Gateways -
- - )} - - - {({ isActive }) => ( - -
-
- -
- Relays + Networking
)} diff --git a/frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx b/frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx deleted file mode 100644 index a0d440872..000000000 --- a/frontend/src/pages/organization/Gateways/GatewayListPage/GatewayListPage.tsx +++ /dev/null @@ -1,267 +0,0 @@ -import { useState } from "react"; -import { Helmet } from "react-helmet"; -import { - faArrowUpRightFromSquare, - faBookOpen, - faCopy, - faDoorClosed, - faEdit, - faEllipsisV, - faInfoCircle, - faMagnifyingGlass, - faSearch, - faTrash -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { useQuery } from "@tanstack/react-query"; -import { formatRelative } from "date-fns"; - -import { createNotification } from "@app/components/notifications"; -import { OrgPermissionCan } from "@app/components/permissions"; -import { - DeleteActionModal, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - EmptyState, - IconButton, - Input, - Modal, - ModalContent, - PageHeader, - Table, - TableContainer, - TableSkeleton, - TBody, - Td, - Th, - THead, - Tooltip, - Tr -} from "@app/components/v2"; -import { - OrgGatewayPermissionActions, - OrgPermissionAppConnectionActions, - OrgPermissionSubjects -} from "@app/context/OrgPermissionContext/types"; -import { withPermission } from "@app/hoc"; -import { usePopUp } from "@app/hooks"; -import { gatewaysQueryKeys, useDeleteGatewayById } from "@app/hooks/api/gateways"; -import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2"; - -import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal"; - -export const GatewayListPage = withPermission( - () => { - const [search, setSearch] = useState(""); - const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list()); - - const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ - "deleteGateway", - "editDetails" - ] as const); - - const deleteGatewayById = useDeleteGatewayById(); - const deleteGatewayV2ById = useDeleteGatewayV2ById(); - - const handleDeleteGateway = async () => { - const data = popUp.deleteGateway.data as { id: string; isV1: boolean }; - if (data.isV1) { - await deleteGatewayById.mutateAsync(data.id); - } else { - await deleteGatewayV2ById.mutateAsync(data.id); - } - - handlePopUpToggle("deleteGateway"); - createNotification({ - type: "success", - text: "Successfully deleted gateway" - }); - }; - - const filteredGateway = gateways?.filter((el) => - el.name.toLowerCase().includes(search.toLowerCase()) - ); - - return ( -
- - Infisical | Gateways - - -
-
- - Gateways - -
- - Docs - -
- -
- } - description="Create and configure gateway to access private network resources from Infisical" - /> -
-
-
- setSearch(e.target.value)} - leftIcon={} - placeholder="Search gateway..." - className="flex-1" - /> -
- - - - - - - - - - - {isGatewaysLoading && ( - - )} - {filteredGateway?.map((el) => ( - - - - - - - ))} - -
NameIdentity - Health Check - - - - -
-
- {el.name} - - Gateway v{el.isV1 ? "1" : "2"} - -
- 		{el.identity.name} - {el.heartbeat - ? formatRelative(new Date(el.heartbeat), new Date()) - : "-"} - - - - - - - - - - } - onClick={() => navigator.clipboard.writeText(el.id)} - > - Copy ID - - {el.isV1 && ( - - {(isAllowed: boolean) => ( - } - onClick={() => handlePopUpOpen("editDetails", el)} - > - Edit Details - - )} - - )} - - {(isAllowed: boolean) => ( - } - className="text-red" - onClick={() => handlePopUpOpen("deleteGateway", el)} - > - Delete Gateway - - )} - - - - -
- handlePopUpToggle("editDetails", isOpen)} - > - - handlePopUpToggle("editDetails")} - /> - - - {!isGatewaysLoading && !filteredGateway?.length && ( - - )} - handlePopUpToggle("deleteGateway", isOpen)} - deleteKey="confirm" - onDeleteApproved={() => handleDeleteGateway()} - /> - -
-
-
-
- - ); - }, - { action: OrgGatewayPermissionActions.ListGateways, subject: OrgPermissionSubjects.Gateway } -); diff --git a/frontend/src/pages/organization/Gateways/GatewayListPage/route.tsx b/frontend/src/pages/organization/Gateways/GatewayListPage/route.tsx deleted file mode 100644 index 88a263b4c..000000000 --- a/frontend/src/pages/organization/Gateways/GatewayListPage/route.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; - -import { GatewayListPage } from "./GatewayListPage"; - -export const Route = createFileRoute( - "/_authenticate/_inject-org-details/_org-layout/organization/gateways/" -)({ - component: GatewayListPage, - context: () => ({ - breadcrumbs: [ - { - label: "Gateways" - } - ] - }) -}); diff --git a/frontend/src/pages/organization/Gateways/Relay/RelayListPage/RelayListPage.tsx b/frontend/src/pages/organization/Gateways/Relay/RelayListPage/RelayListPage.tsx deleted file mode 100644 index 255763182..000000000 --- a/frontend/src/pages/organization/Gateways/Relay/RelayListPage/RelayListPage.tsx +++ /dev/null @@ -1,214 +0,0 @@ -import { useState } from "react"; -import { Helmet } from "react-helmet"; -import { - faArrowUpRightFromSquare, - faBookOpen, - faCopy, - faDoorClosed, - faEllipsisV, - faMagnifyingGlass, - faSearch, - faTrash -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { formatRelative } from "date-fns"; - -import { createNotification } from "@app/components/notifications"; -import { OrgPermissionCan } from "@app/components/permissions"; -import { - DeleteActionModal, - DropdownMenu, - DropdownMenuContent, - DropdownMenuItem, - DropdownMenuTrigger, - EmptyState, - IconButton, - Input, - PageHeader, - Table, - TableContainer, - TableSkeleton, - TBody, - Td, - Th, - THead, - Tooltip, - Tr -} from "@app/components/v2"; -import { - OrgPermissionSubjects, - OrgRelayPermissionActions -} from "@app/context/OrgPermissionContext/types"; -import { withPermission } from "@app/hoc"; -import { usePopUp } from "@app/hooks"; -import { useDeleteRelayById, useGetRelays } from "@app/hooks/api/relays"; - -export const RelayListPage = withPermission( - () => { - const [search, setSearch] = useState(""); - const { data: relays, isPending: isRelaysLoading } = useGetRelays(); - - const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteRelay"] as const); - - const deleteRelayById = useDeleteRelayById(); - - const handleDeleteRelay = async () => { - const data = popUp.deleteRelay.data as { id: string }; - await deleteRelayById.mutateAsync(data.id); - - handlePopUpToggle("deleteRelay"); - createNotification({ - type: "success", - text: "Successfully deleted relay" - }); - }; - - const filteredRelays = relays?.filter((el) => - el.name.toLowerCase().includes(search.toLowerCase()) - ); - - return ( -
- - Infisical | Relays - - -
-
- - Relays - -
- - Docs - -
- -
- } - description="Create and configure relays to securely access private network resources from Infisical" - /> -
-
-
- setSearch(e.target.value)} - leftIcon={} - placeholder="Search relay..." - className="flex-1" - /> -
- - - - - - - - - - - {isRelaysLoading && ( - - )} - {filteredRelays?.map((el) => ( - - - - - - - ))} - -
NameHostCreated -
-
- {el.name} - {!el.orgId && ( - - - Managed - - - )} -
- 		{el.host}{formatRelative(new Date(el.createdAt), new Date())} - - - - - - - - - } - onClick={() => navigator.clipboard.writeText(el.id)} - > - Copy ID - - - {(isAllowed: boolean) => ( - } - className="text-red" - onClick={() => handlePopUpOpen("deleteRelay", el)} - > - Delete Relay - - )} - - - - -
- {!isRelaysLoading && !filteredRelays?.length && ( - - )} - handlePopUpToggle("deleteRelay", isOpen)} - deleteKey="confirm" - onDeleteApproved={() => handleDeleteRelay()} - /> - -
-
-
-
- - ); - }, - { action: OrgRelayPermissionActions.ListRelays, subject: OrgPermissionSubjects.Relay } -); diff --git a/frontend/src/pages/organization/Gateways/Relay/RelayListPage/route.tsx b/frontend/src/pages/organization/Gateways/Relay/RelayListPage/route.tsx deleted file mode 100644 index 125f1c58c..000000000 --- a/frontend/src/pages/organization/Gateways/Relay/RelayListPage/route.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createFileRoute } from "@tanstack/react-router"; - -import { RelayListPage } from "./RelayListPage"; - -export const Route = createFileRoute( - "/_authenticate/_inject-org-details/_org-layout/organization/relays/" -)({ - component: RelayListPage, - context: () => ({ - breadcrumbs: [ - { - label: "Relays" - } - ] - }) -}); diff --git a/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx b/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx new file mode 100644 index 000000000..660e4b26d --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/NetworkingPage.tsx @@ -0,0 +1,25 @@ +import { Helmet } from "react-helmet"; + +import { PageHeader } from "@app/components/v2"; + +import { NetworkingTabGroup } from "./components/NetworkingTabGroup/NetworkingTabGroup"; + +export const NetworkingPage = () => { + return ( + <> + + Infisical | Networking + + +
+
+ + +
+
+ + ); +}; diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx new file mode 100644 index 000000000..20c7c0a5c --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx @@ -0,0 +1,251 @@ +import { useState } from "react"; +import { + faArrowUpRightFromSquare, + faBookOpen, + faCopy, + faDoorClosed, + faEdit, + faEllipsisV, + faInfoCircle, + faMagnifyingGlass, + faSearch, + faTrash +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { useQuery } from "@tanstack/react-query"; +import { formatRelative } from "date-fns"; + +import { createNotification } from "@app/components/notifications"; +import { OrgPermissionCan } from "@app/components/permissions"; +import { + DeleteActionModal, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + EmptyState, + IconButton, + Input, + Modal, + ModalContent, + Table, + TableContainer, + TableSkeleton, + TBody, + Td, + Th, + THead, + Tooltip, + Tr +} from "@app/components/v2"; +import { + OrgGatewayPermissionActions, + OrgPermissionAppConnectionActions, + OrgPermissionSubjects +} from "@app/context/OrgPermissionContext/types"; +import { withPermission } from "@app/hoc"; +import { usePopUp } from "@app/hooks"; +import { gatewaysQueryKeys, useDeleteGatewayById } from "@app/hooks/api/gateways"; +import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2"; + +import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal"; + +export const GatewayTab = withPermission( + () => { + const [search, setSearch] = useState(""); + const { data: gateways, isPending: isGatewaysLoading } = useQuery(gatewaysQueryKeys.list()); + + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ + "deleteGateway", + "editDetails" + ] as const); + + const deleteGatewayById = useDeleteGatewayById(); + const deleteGatewayV2ById = useDeleteGatewayV2ById(); + + const handleDeleteGateway = async () => { + const data = popUp.deleteGateway.data as { id: string; isV1: boolean }; + if (data.isV1) { + await deleteGatewayById.mutateAsync(data.id); + } else { + await deleteGatewayV2ById.mutateAsync(data.id); + } + + handlePopUpToggle("deleteGateway"); + createNotification({ + type: "success", + text: "Successfully deleted gateway" + }); + }; + + const filteredGateway = gateways?.filter((el) => + el.name.toLowerCase().includes(search.toLowerCase()) + ); + + return ( +
+
+
+

Gateways

+ +
+ + Docs + +
+ +
+
+

+ Create and configure gateway to access private network resources from Infisical +

+
+
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search gateway..." + className="flex-1" + /> +
+ + + + + + + + + + + {isGatewaysLoading && ( + + )} + {filteredGateway?.map((el) => ( + + + + + + + ))} + +
NameIdentity + Health Check + + + + +
+
+ {el.name} + + Gateway v{el.isV1 ? "1" : "2"} + +
+ 		{el.identity.name} + {el.heartbeat ? formatRelative(new Date(el.heartbeat), new Date()) : "-"} + + + + + + + + + + } + onClick={() => navigator.clipboard.writeText(el.id)} + > + Copy ID + + {el.isV1 && ( + + {(isAllowed: boolean) => ( + } + onClick={() => handlePopUpOpen("editDetails", el)} + > + Edit Details + + )} + + )} + + {(isAllowed: boolean) => ( + } + className="text-red" + onClick={() => handlePopUpOpen("deleteGateway", el)} + > + Delete Gateway + + )} + + + + +
+ handlePopUpToggle("editDetails", isOpen)} + > + + handlePopUpToggle("editDetails")} + /> + + + {!isGatewaysLoading && !filteredGateway?.length && ( + + )} + handlePopUpToggle("deleteGateway", isOpen)} + deleteKey="confirm" + onDeleteApproved={() => handleDeleteGateway()} + /> + +
+
+ ); + }, + { action: OrgGatewayPermissionActions.ListGateways, subject: OrgPermissionSubjects.Gateway } +); diff --git a/frontend/src/pages/organization/Gateways/GatewayListPage/components/EditGatewayDetailsModal.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/EditGatewayDetailsModal.tsx similarity index 100% rename from frontend/src/pages/organization/Gateways/GatewayListPage/components/EditGatewayDetailsModal.tsx rename to frontend/src/pages/organization/NetworkingPage/components/GatewayTab/components/EditGatewayDetailsModal.tsx diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/index.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/index.tsx new file mode 100644 index 000000000..2bd4af1b2 --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/index.tsx @@ -0,0 +1 @@ +export { GatewayTab } from "./GatewayTab"; diff --git a/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx b/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx new file mode 100644 index 000000000..c59d64e1b --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/NetworkingTabGroup.tsx @@ -0,0 +1,37 @@ +import { useState } from "react"; +import { useSearch } from "@tanstack/react-router"; + +import { Tab, TabList, TabPanel, Tabs } from "@app/components/v2"; + +import { GatewayTab } from "../GatewayTab/GatewayTab"; +import { RelayTab } from "../RelayTab/RelayTab"; + +export const NetworkingTabGroup = () => { + const search = useSearch({ + from: "/_authenticate/_inject-org-details/_org-layout/organization/networking/" + }); + + const tabs = [ + { name: "Gateways", key: "gateways", component: GatewayTab }, + { name: "Relays", key: "relays", component: RelayTab } + ]; + + const [selectedTab, setSelectedTab] = useState(search.selectedTab || tabs[0].key); + + return ( + + + {tabs.map((tab) => ( + + {tab.name} + + ))} + + {tabs.map(({ key, component: Component }) => ( + + + + ))} + + ); +}; diff --git a/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/index.tsx b/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/index.tsx new file mode 100644 index 000000000..47fdae2d2 --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/NetworkingTabGroup/index.tsx @@ -0,0 +1 @@ +export { NetworkingTabGroup } from "./NetworkingTabGroup"; diff --git a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx new file mode 100644 index 000000000..4eda269d5 --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/RelayTab.tsx @@ -0,0 +1,198 @@ +import { useState } from "react"; +import { + faArrowUpRightFromSquare, + faBookOpen, + faCopy, + faDoorClosed, + faEllipsisV, + faMagnifyingGlass, + faSearch, + faTrash +} from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { formatRelative } from "date-fns"; + +import { createNotification } from "@app/components/notifications"; +import { OrgPermissionCan } from "@app/components/permissions"; +import { + DeleteActionModal, + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, + EmptyState, + IconButton, + Input, + Table, + TableContainer, + TableSkeleton, + TBody, + Td, + Th, + THead, + Tooltip, + Tr +} from "@app/components/v2"; +import { + OrgPermissionSubjects, + OrgRelayPermissionActions +} from "@app/context/OrgPermissionContext/types"; +import { withPermission } from "@app/hoc"; +import { usePopUp } from "@app/hooks"; +import { useDeleteRelayById, useGetRelays } from "@app/hooks/api/relays"; + +export const RelayTab = withPermission( + () => { + const [search, setSearch] = useState(""); + const { data: relays, isPending: isRelaysLoading } = useGetRelays(); + + const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp(["deleteRelay"] as const); + + const deleteRelayById = useDeleteRelayById(); + + const handleDeleteRelay = async () => { + const data = popUp.deleteRelay.data as { id: string }; + await deleteRelayById.mutateAsync(data.id); + + handlePopUpToggle("deleteRelay"); + createNotification({ + type: "success", + text: "Successfully deleted relay" + }); + }; + + const filteredRelays = relays?.filter((el) => + el.name.toLowerCase().includes(search.toLowerCase()) + ); + + return ( +
+
+
+

Relays

+ +
+ + Docs + +
+ +
+
+

+ Create and configure relays to securely access private network resources from Infisical +

+
+
+ setSearch(e.target.value)} + leftIcon={} + placeholder="Search relay..." + className="flex-1" + /> +
+ + + + + + + + + + + {isRelaysLoading && ( + + )} + {filteredRelays?.map((el) => ( + + + + + + + ))} + +
NameHostCreated +
+
+ {el.name} + {!el.orgId && ( + + + Managed + + + )} +
+ 		{el.host}{formatRelative(new Date(el.createdAt), new Date())} + + + + + + + + + } + onClick={() => navigator.clipboard.writeText(el.id)} + > + Copy ID + + + {(isAllowed: boolean) => ( + } + className="text-red" + onClick={() => handlePopUpOpen("deleteRelay", el)} + > + Delete Relay + + )} + + + + +
+ {!isRelaysLoading && !filteredRelays?.length && ( + + )} + handlePopUpToggle("deleteRelay", isOpen)} + deleteKey="confirm" + onDeleteApproved={() => handleDeleteRelay()} + /> + +
+
+ ); + }, + { action: OrgRelayPermissionActions.ListRelays, subject: OrgPermissionSubjects.Relay } +); diff --git a/frontend/src/pages/organization/NetworkingPage/components/RelayTab/index.tsx b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/index.tsx new file mode 100644 index 000000000..743febde6 --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/RelayTab/index.tsx @@ -0,0 +1 @@ +export { RelayTab } from "./RelayTab"; diff --git a/frontend/src/pages/organization/NetworkingPage/components/index.tsx b/frontend/src/pages/organization/NetworkingPage/components/index.tsx new file mode 100644 index 000000000..1f7fa2ac0 --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/components/index.tsx @@ -0,0 +1,3 @@ +export { GatewayTab } from "./GatewayTab/GatewayTab"; +export { NetworkingTabGroup } from "./NetworkingTabGroup/NetworkingTabGroup"; +export { RelayTab } from "./RelayTab/RelayTab"; diff --git a/frontend/src/pages/organization/NetworkingPage/route.tsx b/frontend/src/pages/organization/NetworkingPage/route.tsx new file mode 100644 index 000000000..906b12806 --- /dev/null +++ b/frontend/src/pages/organization/NetworkingPage/route.tsx @@ -0,0 +1,26 @@ +import { createFileRoute, stripSearchParams } from "@tanstack/react-router"; +import { zodValidator } from "@tanstack/zod-adapter"; +import { z } from "zod"; + +import { NetworkingPage } from "./NetworkingPage"; + +const NetworkingPageQueryParams = z.object({ + selectedTab: z.string().catch("") +}); + +export const Route = createFileRoute( + "/_authenticate/_inject-org-details/_org-layout/organization/networking/" +)({ + component: NetworkingPage, + validateSearch: zodValidator(NetworkingPageQueryParams), + search: { + middlewares: [stripSearchParams({ selectedTab: "" })] + }, + context: () => ({ + breadcrumbs: [ + { + label: "Networking" + } + ] + }) +}); diff --git a/frontend/src/routeTree.gen.ts b/frontend/src/routeTree.gen.ts index 0b4ea1426..0cf7a92d6 100644 --- a/frontend/src/routeTree.gen.ts +++ b/frontend/src/routeTree.gen.ts @@ -62,8 +62,7 @@ import { Route as organizationIdentityDetailsByIDPageRouteImport } from './pages import { Route as organizationGroupDetailsByIDPageRouteImport } from './pages/organization/GroupDetailsByIDPage/route' import { Route as organizationSettingsPageRouteImport } from './pages/organization/SettingsPage/route' import { Route as organizationSecretSharingPageRouteImport } from './pages/organization/SecretSharingPage/route' -import { Route as organizationGatewaysRelayRelayListPageRouteImport } from './pages/organization/Gateways/Relay/RelayListPage/route' -import { Route as organizationGatewaysGatewayListPageRouteImport } from './pages/organization/Gateways/GatewayListPage/route' +import { Route as organizationNetworkingPageRouteImport } from './pages/organization/NetworkingPage/route' import { Route as organizationAppConnectionsAppConnectionsPageRouteImport } from './pages/organization/AppConnections/AppConnectionsPage/route' import { Route as sshLayoutImport } from './pages/ssh/layout' import { Route as secretScanningLayoutImport } from './pages/secret-scanning/layout' @@ -256,13 +255,9 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingImport = createFileRoute( '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing', )() -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysImport = +const AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingImport = createFileRoute( - '/_authenticate/_inject-org-details/_org-layout/organization/relays', - )() -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport = - createFileRoute( - '/_authenticate/_inject-org-details/_org-layout/organization/gateways', + '/_authenticate/_inject-org-details/_org-layout/organization/networking', )() const AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsImport = createFileRoute( @@ -564,18 +559,10 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute = AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute, } as any) -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRoute = - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysImport.update({ - id: '/relays', - path: '/relays', - getParentRoute: () => - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute, - } as any) - -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute = - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport.update({ - id: '/gateways', - path: '/gateways', +const AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRoute = + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingImport.update({ + id: '/networking', + path: '/networking', getParentRoute: () => AuthenticateInjectOrgDetailsOrgLayoutOrganizationRoute, } as any) @@ -778,20 +765,12 @@ const organizationSecretSharingPageRouteRoute = AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute, } as any) -const organizationGatewaysRelayRelayListPageRouteRoute = - organizationGatewaysRelayRelayListPageRouteImport.update({ +const organizationNetworkingPageRouteRoute = + organizationNetworkingPageRouteImport.update({ id: '/', path: '/', getParentRoute: () => - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRoute, - } as any) - -const organizationGatewaysGatewayListPageRouteRoute = - organizationGatewaysGatewayListPageRouteImport.update({ - id: '/', - path: '/', - getParentRoute: () => - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute, + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRoute, } as any) const organizationAppConnectionsAppConnectionsPageRouteRoute = @@ -2390,18 +2369,11 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsImport parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport } - '/_authenticate/_inject-org-details/_org-layout/organization/gateways': { - id: '/_authenticate/_inject-org-details/_org-layout/organization/gateways' - path: '/gateways' - fullPath: '/organization/gateways' - preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport - parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport - } - '/_authenticate/_inject-org-details/_org-layout/organization/relays': { - id: '/_authenticate/_inject-org-details/_org-layout/organization/relays' - path: '/relays' - fullPath: '/organization/relays' - preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysImport + '/_authenticate/_inject-org-details/_org-layout/organization/networking': { + id: '/_authenticate/_inject-org-details/_org-layout/organization/networking' + path: '/networking' + fullPath: '/organization/networking' + preLoaderRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingImport parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationImport } '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing': { @@ -2432,19 +2404,12 @@ declare module '@tanstack/react-router' { preLoaderRoute: typeof organizationAppConnectionsAppConnectionsPageRouteImport parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsImport } - '/_authenticate/_inject-org-details/_org-layout/organization/gateways/': { - id: '/_authenticate/_inject-org-details/_org-layout/organization/gateways/' + '/_authenticate/_inject-org-details/_org-layout/organization/networking/': { + id: '/_authenticate/_inject-org-details/_org-layout/organization/networking/' path: '/' - fullPath: '/organization/gateways/' - preLoaderRoute: typeof organizationGatewaysGatewayListPageRouteImport - parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysImport - } - '/_authenticate/_inject-org-details/_org-layout/organization/relays/': { - id: '/_authenticate/_inject-org-details/_org-layout/organization/relays/' - path: '/' - fullPath: '/organization/relays/' - preLoaderRoute: typeof organizationGatewaysRelayRelayListPageRouteImport - parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysImport + fullPath: '/organization/networking/' + preLoaderRoute: typeof organizationNetworkingPageRouteImport + parentRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingImport } '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/': { id: '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/' @@ -3754,34 +3719,18 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithCh AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteChildren, ) -interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteChildren { - organizationGatewaysGatewayListPageRouteRoute: typeof organizationGatewaysGatewayListPageRouteRoute +interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteChildren { + organizationNetworkingPageRouteRoute: typeof organizationNetworkingPageRouteRoute } -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteChildren: AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteChildren = +const AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteChildren: AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteChildren = { - organizationGatewaysGatewayListPageRouteRoute: - organizationGatewaysGatewayListPageRouteRoute, + organizationNetworkingPageRouteRoute: organizationNetworkingPageRouteRoute, } -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren = - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute._addFileChildren( - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteChildren, - ) - -interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteChildren { - organizationGatewaysRelayRelayListPageRouteRoute: typeof organizationGatewaysRelayRelayListPageRouteRoute -} - -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteChildren: AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteChildren = - { - organizationGatewaysRelayRelayListPageRouteRoute: - organizationGatewaysRelayRelayListPageRouteRoute, - } - -const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteWithChildren = - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRoute._addFileChildren( - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteChildren, +const AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteWithChildren = + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRoute._addFileChildren( + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteChildren, ) interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteChildren { @@ -3825,8 +3774,7 @@ interface AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren { organizationBillingPageRouteRoute: typeof organizationBillingPageRouteRoute organizationProjectsPageRouteRoute: typeof organizationProjectsPageRouteRoute AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteWithChildren + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteWithChildren AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren AuthenticateInjectOrgDetailsOrgLayoutOrganizationSettingsRoute: typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSettingsRouteWithChildren organizationGroupDetailsByIDPageRouteRoute: typeof organizationGroupDetailsByIDPageRouteRoute @@ -3844,10 +3792,8 @@ const AuthenticateInjectOrgDetailsOrgLayoutOrganizationRouteChildren: Authentica organizationProjectsPageRouteRoute: organizationProjectsPageRouteRoute, AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRoute: AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren, - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRoute: - AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren, - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRoute: - AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteWithChildren, + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRoute: + AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteWithChildren, AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRoute: AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren, AuthenticateInjectOrgDetailsOrgLayoutOrganizationSettingsRoute: @@ -4746,14 +4692,12 @@ export interface FileRoutesByFullPath { '/admin/environment': typeof adminEnvironmentPageRouteRoute '/admin/integrations': typeof adminIntegrationsPageRouteRoute '/organization/app-connections': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren - '/organization/gateways': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren - '/organization/relays': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteWithChildren + '/organization/networking': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteWithChildren '/organization/secret-sharing': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren '/organization/settings': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSettingsRouteWithChildren '/secret-manager/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdRouteWithChildren '/organization/app-connections/': typeof organizationAppConnectionsAppConnectionsPageRouteRoute - '/organization/gateways/': typeof organizationGatewaysGatewayListPageRouteRoute - '/organization/relays/': typeof organizationGatewaysRelayRelayListPageRouteRoute + '/organization/networking/': typeof organizationNetworkingPageRouteRoute '/organization/secret-sharing/': typeof organizationSecretSharingPageRouteRoute '/organization/settings/': typeof organizationSettingsPageRouteRoute '/organization/groups/$groupId': typeof organizationGroupDetailsByIDPageRouteRoute @@ -4969,8 +4913,7 @@ export interface FileRoutesByTo { '/admin/integrations': typeof adminIntegrationsPageRouteRoute '/secret-manager/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdRouteWithChildren '/organization/app-connections': typeof organizationAppConnectionsAppConnectionsPageRouteRoute - '/organization/gateways': typeof organizationGatewaysGatewayListPageRouteRoute - '/organization/relays': typeof organizationGatewaysRelayRelayListPageRouteRoute + '/organization/networking': typeof organizationNetworkingPageRouteRoute '/organization/secret-sharing': typeof organizationSecretSharingPageRouteRoute '/organization/settings': typeof organizationSettingsPageRouteRoute '/organization/groups/$groupId': typeof organizationGroupDetailsByIDPageRouteRoute @@ -5189,14 +5132,12 @@ export interface FileRoutesById { '/_authenticate/_inject-org-details/admin/_admin-layout/environment': typeof adminEnvironmentPageRouteRoute '/_authenticate/_inject-org-details/admin/_admin-layout/integrations': typeof adminIntegrationsPageRouteRoute '/_authenticate/_inject-org-details/_org-layout/organization/app-connections': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationAppConnectionsRouteWithChildren - '/_authenticate/_inject-org-details/_org-layout/organization/gateways': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationGatewaysRouteWithChildren - '/_authenticate/_inject-org-details/_org-layout/organization/relays': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationRelaysRouteWithChildren + '/_authenticate/_inject-org-details/_org-layout/organization/networking': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationNetworkingRouteWithChildren '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSecretSharingRouteWithChildren '/_authenticate/_inject-org-details/_org-layout/organization/settings': typeof AuthenticateInjectOrgDetailsOrgLayoutOrganizationSettingsRouteWithChildren '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId': typeof AuthenticateInjectOrgDetailsOrgLayoutSecretManagerProjectIdRouteWithChildren '/_authenticate/_inject-org-details/_org-layout/organization/app-connections/': typeof organizationAppConnectionsAppConnectionsPageRouteRoute - '/_authenticate/_inject-org-details/_org-layout/organization/gateways/': typeof organizationGatewaysGatewayListPageRouteRoute - '/_authenticate/_inject-org-details/_org-layout/organization/relays/': typeof organizationGatewaysRelayRelayListPageRouteRoute + '/_authenticate/_inject-org-details/_org-layout/organization/networking/': typeof organizationNetworkingPageRouteRoute '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/': typeof organizationSecretSharingPageRouteRoute '/_authenticate/_inject-org-details/_org-layout/organization/settings/': typeof organizationSettingsPageRouteRoute '/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId': typeof organizationGroupDetailsByIDPageRouteRoute @@ -5422,14 +5363,12 @@ export interface FileRouteTypes { | '/admin/environment' | '/admin/integrations' | '/organization/app-connections' - | '/organization/gateways' - | '/organization/relays' + | '/organization/networking' | '/organization/secret-sharing' | '/organization/settings' | '/secret-manager/$projectId' | '/organization/app-connections/' - | '/organization/gateways/' - | '/organization/relays/' + | '/organization/networking/' | '/organization/secret-sharing/' | '/organization/settings/' | '/organization/groups/$groupId' @@ -5644,8 +5583,7 @@ export interface FileRouteTypes { | '/admin/integrations' | '/secret-manager/$projectId' | '/organization/app-connections' - | '/organization/gateways' - | '/organization/relays' + | '/organization/networking' | '/organization/secret-sharing' | '/organization/settings' | '/organization/groups/$groupId' @@ -5862,14 +5800,12 @@ export interface FileRouteTypes { | '/_authenticate/_inject-org-details/admin/_admin-layout/environment' | '/_authenticate/_inject-org-details/admin/_admin-layout/integrations' | '/_authenticate/_inject-org-details/_org-layout/organization/app-connections' - | '/_authenticate/_inject-org-details/_org-layout/organization/gateways' - | '/_authenticate/_inject-org-details/_org-layout/organization/relays' + | '/_authenticate/_inject-org-details/_org-layout/organization/networking' | '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing' | '/_authenticate/_inject-org-details/_org-layout/organization/settings' | '/_authenticate/_inject-org-details/_org-layout/secret-manager/$projectId' | '/_authenticate/_inject-org-details/_org-layout/organization/app-connections/' - | '/_authenticate/_inject-org-details/_org-layout/organization/gateways/' - | '/_authenticate/_inject-org-details/_org-layout/organization/relays/' + | '/_authenticate/_inject-org-details/_org-layout/organization/networking/' | '/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/' | '/_authenticate/_inject-org-details/_org-layout/organization/settings/' | '/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId' @@ -6290,8 +6226,7 @@ export const routeTree = rootRoute "/_authenticate/_inject-org-details/_org-layout/organization/billing", "/_authenticate/_inject-org-details/_org-layout/organization/projects", "/_authenticate/_inject-org-details/_org-layout/organization/app-connections", - "/_authenticate/_inject-org-details/_org-layout/organization/gateways", - "/_authenticate/_inject-org-details/_org-layout/organization/relays", + "/_authenticate/_inject-org-details/_org-layout/organization/networking", "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing", "/_authenticate/_inject-org-details/_org-layout/organization/settings", "/_authenticate/_inject-org-details/_org-layout/organization/groups/$groupId", @@ -6366,18 +6301,11 @@ export const routeTree = rootRoute "/_authenticate/_inject-org-details/_org-layout/organization/app-connections/$appConnection/oauth/callback" ] }, - "/_authenticate/_inject-org-details/_org-layout/organization/gateways": { + "/_authenticate/_inject-org-details/_org-layout/organization/networking": { "filePath": "", "parent": "/_authenticate/_inject-org-details/_org-layout/organization", "children": [ - "/_authenticate/_inject-org-details/_org-layout/organization/gateways/" - ] - }, - "/_authenticate/_inject-org-details/_org-layout/organization/relays": { - "filePath": "", - "parent": "/_authenticate/_inject-org-details/_org-layout/organization", - "children": [ - "/_authenticate/_inject-org-details/_org-layout/organization/relays/" + "/_authenticate/_inject-org-details/_org-layout/organization/networking/" ] }, "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing": { @@ -6407,13 +6335,9 @@ export const routeTree = rootRoute "filePath": "organization/AppConnections/AppConnectionsPage/route.tsx", "parent": "/_authenticate/_inject-org-details/_org-layout/organization/app-connections" }, - "/_authenticate/_inject-org-details/_org-layout/organization/gateways/": { - "filePath": "organization/Gateways/GatewayListPage/route.tsx", - "parent": "/_authenticate/_inject-org-details/_org-layout/organization/gateways" - }, - "/_authenticate/_inject-org-details/_org-layout/organization/relays/": { - "filePath": "organization/Gateways/Relay/RelayListPage/route.tsx", - "parent": "/_authenticate/_inject-org-details/_org-layout/organization/relays" + "/_authenticate/_inject-org-details/_org-layout/organization/networking/": { + "filePath": "organization/NetworkingPage/route.tsx", + "parent": "/_authenticate/_inject-org-details/_org-layout/organization/networking" }, "/_authenticate/_inject-org-details/_org-layout/organization/secret-sharing/": { "filePath": "organization/SecretSharingPage/route.tsx", diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts index a81e9a619..936f01885 100644 --- a/frontend/src/routes.ts +++ b/frontend/src/routes.ts @@ -40,8 +40,7 @@ const organizationRoutes = route("/organization", [ "organization/AppConnections/OauthCallbackPage/route.tsx" ) ]), - route("/gateways", [index("organization/Gateways/GatewayListPage/route.tsx")]), - route("/relays", [index("organization/Gateways/Relay/RelayListPage/route.tsx")]) + route("/networking", [index("organization/NetworkingPage/route.tsx")]) ]); const secretManagerRoutes = route("/projects/secret-management/$projectId", [ From f93226f6c2347a71b2ce514b71f69b7905038b2b Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Mon, 22 Sep 2025 01:52:02 +0800 Subject: [PATCH 2/4] misc: moved networking to resources group --- .../OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx index d330ea872..5a08c2b30 100644 --- a/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx +++ b/frontend/src/layouts/OrganizationLayout/components/OrgSidebar/OrgSidebar.tsx @@ -124,8 +124,6 @@ export const OrgSidebar = ({ isHidden }: Props) => { )} - - {({ isActive }) => ( From 8861ac6a99ab03231e55d6fbc0562afd73efceb7 Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Mon, 22 Sep 2025 10:48:36 +0800 Subject: [PATCH 3/4] misc: updated gateway table view --- .../components/GatewayTab/GatewayTab.tsx | 26 +++++++++++++++---- 1 file changed, 21 insertions(+), 5 deletions(-) diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx index 20c7c0a5c..d9f9eff7b 100644 --- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx +++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx @@ -13,7 +13,6 @@ import { } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { useQuery } from "@tanstack/react-query"; -import { formatRelative } from "date-fns"; import { createNotification } from "@app/components/notifications"; import { OrgPermissionCan } from "@app/components/permissions"; @@ -50,6 +49,25 @@ import { useDeleteGatewayV2ById } from "@app/hooks/api/gateways-v2"; import { EditGatewayDetailsModal } from "./components/EditGatewayDetailsModal"; +const GatewayHealthStatus = ({ heartbeat }: { heartbeat?: string }) => { + const heartbeatDate = heartbeat ? new Date(heartbeat) : null; + const now = new Date(); + const oneHourAgo = new Date(now.getTime() - 60 * 60 * 1000); + + const isHealthy = heartbeatDate && heartbeatDate >= oneHourAgo; + const tooltipContent = heartbeatDate + ? `Last heartbeat: ${heartbeatDate.toLocaleString()}` + : "No heartbeat data available"; + + return ( + + + {isHealthy ? "Healthy" : "Unreachable"} + + + ); +}; + export const GatewayTab = withPermission( () => { const [search, setSearch] = useState(""); @@ -120,8 +138,7 @@ export const GatewayTab = withPermission( - - +
NameIdentityName Health Check - {el.identity.name} - {el.heartbeat ? formatRelative(new Date(el.heartbeat), new Date()) : "-"} + From 073e8b249604d94d79139371d95a692d393c487d Mon Sep 17 00:00:00 2001 From: Sheen Capadngan Date: Mon, 22 Sep 2025 10:51:50 +0800 Subject: [PATCH 4/4] misc: updated gateway permission check --- .../NetworkingPage/components/GatewayTab/GatewayTab.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx index d9f9eff7b..0e3069aee 100644 --- a/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx +++ b/frontend/src/pages/organization/NetworkingPage/components/GatewayTab/GatewayTab.tsx @@ -39,7 +39,6 @@ import { } from "@app/components/v2"; import { OrgGatewayPermissionActions, - OrgPermissionAppConnectionActions, OrgPermissionSubjects } from "@app/context/OrgPermissionContext/types"; import { withPermission } from "@app/hoc"; @@ -206,8 +205,8 @@ export const GatewayTab = withPermission( )} {(isAllowed: boolean) => (