Merge pull request #4859 from Infisical/ENG-4144

PAM: add more resource type previews

docs/documentation/platform/pam/session-recording.mdx

@@ -21,7 +21,7 @@ The content captured during a session depends on the type of resource being acce
 For database connections, Infisical captures all queries executed and their corresponding responses.
 
 <Note>
-Support for additional resource types like SSH and RDP is coming soon.
+Support for additional resource types like SSH, RDP, Kubernetes, and MCP is coming soon.
 </Note>
 
 ## Viewing Recordings

frontend/src/hooks/api/pam/enums.ts

@@ -4,7 +4,18 @@ export enum PamResourceType {
   RDP = "rdp",
   SSH = "ssh",
   Kubernetes = "kubernetes",
-  MCP = "mcp"
+  OracleDB = "oracledb",
+  SQLite = "sqlite",
+  MsSQL = "mssql",
+  MCP = "mcp",
+  Redis = "redis",
+  MongoDB = "mongodb",
+  WebApp = "webapp",
+  Cassandra = "cassandra",
+  CockroachDB = "cockroachdb",
+  Elasticsearch = "elasticsearch",
+  Snowflake = "snowflake",
+  DynamoDB = "dynamodb"
 }
 
 export enum PamSessionStatus {

frontend/src/hooks/api/pam/maps.ts

@@ -9,5 +9,16 @@ export const PAM_RESOURCE_TYPE_MAP: Record<
   [PamResourceType.RDP]: { name: "RDP", image: "RDP.png" },
   [PamResourceType.SSH]: { name: "SSH", image: "SSH.png" },
   [PamResourceType.Kubernetes]: { name: "Kubernetes", image: "Kubernetes.png" },
-  [PamResourceType.MCP]: { name: "MCP", image: "MCP.png" }
+  [PamResourceType.OracleDB]: { name: "OracleDB", image: "Oracle.png", size: 55 },
+  [PamResourceType.SQLite]: { name: "SQLite", image: "SQLite.png" },
+  [PamResourceType.MsSQL]: { name: "Microsoft SQL Server", image: "MsSql.png" },
+  [PamResourceType.MCP]: { name: "MCP", image: "MCP.png" },
+  [PamResourceType.Redis]: { name: "Redis", image: "Redis.png" },
+  [PamResourceType.MongoDB]: { name: "MongoDB", image: "MongoDB.png" },
+  [PamResourceType.WebApp]: { name: "Web Application", image: "Web.png" },
+  [PamResourceType.Cassandra]: { name: "Cassandra", image: "Cassandra.png", size: 55 },
+  [PamResourceType.CockroachDB]: { name: "CockroachDB", image: "CockroachDB.png" },
+  [PamResourceType.Elasticsearch]: { name: "Elasticsearch", image: "Elastic.png" },
+  [PamResourceType.Snowflake]: { name: "Snowflake", image: "Snowflake.png" },
+  [PamResourceType.DynamoDB]: { name: "DynamoDB", image: "DynamoDB.png", size: 55 }
 };

frontend/src/pages/pam/PamResourcesPage/components/ResourceTypeSelect.tsx

@@ -26,10 +26,21 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
     return [
       ...resourceOptions,
       // We are temporarily showing these resources so that we can gauge interest before committing
+      { name: "OracleDB", resource: PamResourceType.OracleDB },
+      { name: "SQLite", resource: PamResourceType.SQLite },
+      { name: "Microsoft SQL Server", resource: PamResourceType.MsSQL },
+      { name: "MongoDB", resource: PamResourceType.MongoDB },
+      { name: "Cassandra", resource: PamResourceType.Cassandra },
+      { name: "CockroachDB", resource: PamResourceType.CockroachDB },
+      { name: "DynamoDB", resource: PamResourceType.DynamoDB },
+      { name: "Snowflake", resource: PamResourceType.Snowflake },
+      { name: "Elasticsearch", resource: PamResourceType.Elasticsearch },
+      { name: "Redis", resource: PamResourceType.Redis },
       { name: "RDP", resource: PamResourceType.RDP },
       { name: "SSH", resource: PamResourceType.SSH },
       { name: "Kubernetes", resource: PamResourceType.Kubernetes },
-      { name: "MCP", resource: PamResourceType.MCP }
+      { name: "MCP", resource: PamResourceType.MCP },
+      { name: "Web Application", resource: PamResourceType.WebApp }
     ];
   }, [resourceOptions]);
 
@@ -39,11 +50,13 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
 
   const filteredOptions = useMemo(
     () =>
-      appendedResourceOptions?.filter(
+      appendedResourceOptions
-        ({ name, resource }) =>
+        ?.filter(
-          name.toLowerCase().includes(search.trim().toLowerCase()) ||
+          ({ name, resource }) =>
-          resource.toLowerCase().includes(search.trim().toLowerCase())
+            name.toLowerCase().includes(search.trim().toLowerCase()) ||
-      ) ?? [],
+            resource.toLowerCase().includes(search.trim().toLowerCase())
+        )
+        .sort((a, b) => a.name.localeCompare(b.name)) ?? [],
     [appendedResourceOptions, search]
   );
 
@@ -67,7 +80,15 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
       resource === PamResourceType.RDP ||
       resource === PamResourceType.SSH ||
       resource === PamResourceType.Kubernetes ||
-      resource === PamResourceType.MCP
+      resource === PamResourceType.MCP ||
+      resource === PamResourceType.Redis ||
+      resource === PamResourceType.MongoDB ||
+      resource === PamResourceType.WebApp ||
+      resource === PamResourceType.Cassandra ||
+      resource === PamResourceType.CockroachDB ||
+      resource === PamResourceType.Elasticsearch ||
+      resource === PamResourceType.Snowflake ||
+      resource === PamResourceType.DynamoDB
     ) {
       handlePopUpOpen("upgradePlan", {
         text: "Your current plan does not include access to this resource type. To unlock this feature, please upgrade to Infisical Enterprise plan.",
@@ -107,17 +128,16 @@ export const ResourceTypeSelect = ({ onSelect }: Props) => {
               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">
+              <div className="relative my-auto">
                 <img
                   src={`/images/integrations/${image}`}
                   style={{
                     width: `${size}px`
                   }}
-                  className="mt-auto"
                   alt={`${name} logo`}
                 />
               </div>
-              <div className="mt-auto max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
+              <div className="max-w-xs text-center text-xs font-medium text-gray-300 duration-200 group-hover:text-gray-200">
                 {name}
               </div>
             </button>