misc: updated no license behavior for PAM

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 {

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" }
 };

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={<FontAwesomeIcon icon={faPlus} />}
                 onClick={() => handlePopUpOpen("addAccount")}
-                isDisabled={!isAllowedToCreateAccounts || !subscription.pam}
+                isDisabled={!isAllowedToCreateAccounts}
                 className={`h-10 transition-colors ${accountView === AccountView.Flat ? "" : "rounded-r-none"}`}
               >
                 Add Account

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={<FontAwesomeIcon icon={faPlus} />}
                     onClick={() => handlePopUpOpen("addResource")}
-                    isDisabled={
-                      !isAllowed || !isGatewayAllowed || !subscription.gateway || !subscription.pam
-                    }
+                    isDisabled={!isAllowed || !isGatewayAllowed}
                   >
                     Add Resource
                   </Button>

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 (
       <div className="flex h-full flex-col items-center justify-center py-2.5">
@@ -62,7 +93,7 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
           return (
             <button
               type="button"
-              onClick={() => onSelect(option.resource)}
+              onClick={() => handleResourceSelect(option.resource)}
               className="group relative flex h-28 cursor-pointer flex-col items-center justify-center rounded-md border border-mineshaft-600 bg-mineshaft-700 p-4 duration-200 hover:bg-mineshaft-600"
             >
               <div className="relative">
@@ -136,6 +167,13 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
           perPageList={[16]}
         />
       )}
+      {subscription && (
+        <UpgradePlanModal
+          isOpen={popUp.upgradePlan.isOpen}
+          onOpenChange={(isOpen) => handlePopUpToggle("upgradePlan", isOpen)}
+          text="PAM (Privileged Access Management) requires an enterprise plan."
+        />
+      )}
     </div>
   );
 };