diff --git a/frontend/public/images/integrations/RDP.png b/frontend/public/images/integrations/RDP.png new file mode 100644 index 000000000..1336888b7 Binary files /dev/null and b/frontend/public/images/integrations/RDP.png differ diff --git a/frontend/public/images/integrations/SSH.png b/frontend/public/images/integrations/SSH.png new file mode 100644 index 000000000..ff7708f9f Binary files /dev/null and b/frontend/public/images/integrations/SSH.png differ diff --git a/frontend/src/hooks/api/pam/enums.ts b/frontend/src/hooks/api/pam/enums.ts index c6c66961b..b6e5ce64c 100644 --- a/frontend/src/hooks/api/pam/enums.ts +++ b/frontend/src/hooks/api/pam/enums.ts @@ -1,5 +1,8 @@ export enum PamResourceType { - Postgres = "postgres" + Postgres = "postgres", + RDP = "rdp", + SSH = "ssh", + Kubernetes = "kubernetes" } export enum PamSessionStatus { diff --git a/frontend/src/hooks/api/pam/maps.ts b/frontend/src/hooks/api/pam/maps.ts index c8dfb9d26..a27507d7d 100644 --- a/frontend/src/hooks/api/pam/maps.ts +++ b/frontend/src/hooks/api/pam/maps.ts @@ -4,5 +4,8 @@ export const PAM_RESOURCE_TYPE_MAP: Record< PamResourceType, { name: string; image: string; size?: number } > = { - [PamResourceType.Postgres]: { name: "PostgreSQL", image: "Postgres.png" } + [PamResourceType.Postgres]: { name: "PostgreSQL", image: "Postgres.png" }, + [PamResourceType.RDP]: { name: "RDP", image: "RDP.png" }, + [PamResourceType.SSH]: { name: "SSH", image: "SSH.png" }, + [PamResourceType.Kubernetes]: { name: "Kubernetes", image: "Kubernetes.png" } }; diff --git a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx index 9138d7ba8..588e69810 100644 --- a/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx +++ b/frontend/src/pages/pam/PamAccountsPage/components/PamAccountsTable.tsx @@ -35,7 +35,6 @@ import { Tr } from "@app/components/v2"; import { ROUTE_PATHS } from "@app/const/routes"; -import { useSubscription } from "@app/context"; import { ProjectPermissionActions, ProjectPermissionPamAccountActions, @@ -71,7 +70,6 @@ type Props = { }; export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => { - const { subscription } = useSubscription(); const navigate = useNavigate({ from: ROUTE_PATHS.Pam.AccountsPage.path }); const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([ @@ -357,7 +355,7 @@ export const PamAccountsTable = ({ accounts, folders, projectId }: Props) => { variant="outline_bg" leftIcon={} onClick={() => handlePopUpOpen("addAccount")} - isDisabled={!isAllowedToCreateAccounts || !subscription.pam} + isDisabled={!isAllowedToCreateAccounts} className={`h-10 transition-colors ${accountView === AccountView.Flat ? "" : "rounded-r-none"}`} > Add Account diff --git a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx index 7a87f0dd4..8d8f310e4 100644 --- a/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx +++ b/frontend/src/pages/pam/PamResourcesPage/components/PamResourcesTable.tsx @@ -34,7 +34,7 @@ import { Tr } from "@app/components/v2"; import { ROUTE_PATHS } from "@app/const/routes"; -import { ProjectPermissionActions, ProjectPermissionSub, useSubscription } from "@app/context"; +import { ProjectPermissionActions, ProjectPermissionSub } from "@app/context"; import { OrgGatewayPermissionActions, OrgPermissionSubjects @@ -62,8 +62,6 @@ type Props = { }; export const PamResourcesTable = ({ projectId, resources }: Props) => { - const { subscription } = useSubscription(); - const navigate = useNavigate({ from: ROUTE_PATHS.Pam.ResourcesPage.path }); const { popUp, handlePopUpOpen, handlePopUpToggle } = usePopUp([ @@ -246,9 +244,7 @@ export const PamResourcesTable = ({ projectId, resources }: Props) => { colorSchema="secondary" leftIcon={} onClick={() => handlePopUpOpen("addResource")} - isDisabled={ - !isAllowed || !isGatewayAllowed || !subscription.gateway || !subscription.pam - } + isDisabled={!isAllowed || !isGatewayAllowed} > Add Resource diff --git a/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx b/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx index 82de8f759..5104fb452 100644 --- a/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx +++ b/frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx @@ -2,8 +2,10 @@ import { useMemo } from "react"; import { faInfoCircle, faMagnifyingGlass, faSearch } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal"; import { EmptyState, Input, Pagination, Spinner, Tooltip } from "@app/components/v2"; -import { usePagination, useResetPageHelper } from "@app/hooks"; +import { useSubscription } from "@app/context"; +import { usePagination, usePopUp, useResetPageHelper } from "@app/hooks"; import { PAM_RESOURCE_TYPE_MAP, PamResourceType, @@ -16,6 +18,18 @@ type Props = { export const ResourceTypeSelect = ({ onSelect }: Props) => { const { isPending, data: resourceOptions } = useListPamResourceOptions(); + const { subscription } = useSubscription(); + const { popUp, handlePopUpToggle } = usePopUp(["upgradePlan"] as const); + + const appendedResourceOptions = useMemo(() => { + if (!resourceOptions) return []; + return [ + ...resourceOptions, + { name: "RDP", resource: PamResourceType.RDP }, + { name: "SSH", resource: PamResourceType.SSH }, + { name: "Kubernetes", resource: PamResourceType.Kubernetes } + ]; + }, [resourceOptions]); const { search, setSearch, setPage, page, perPage, setPerPage, offset } = usePagination("", { initPerPage: 16 @@ -23,12 +37,12 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => { const filteredOptions = useMemo( () => - resourceOptions?.filter( + appendedResourceOptions?.filter( ({ name, resource }) => name.toLowerCase().includes(search.trim().toLowerCase()) || resource.toLowerCase().includes(search.trim().toLowerCase()) ) ?? [], - [resourceOptions, search] + [appendedResourceOptions, search] ); useResetPageHelper({ @@ -37,6 +51,23 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => { setPage }); + const handleResourceSelect = (resource: PamResourceType) => { + if (!subscription?.pam) { + handlePopUpToggle("upgradePlan", true); + return; + } + + if ( + resource === PamResourceType.RDP || + resource === PamResourceType.SSH || + resource === PamResourceType.Kubernetes + ) { + return; + } + + onSelect(resource); + }; + if (isPending) { return (
@@ -62,7 +93,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => { return (