Merge pull request #2429 from Infisical/daniel/integration-ui-improvements

feat: integration details page with logging

frontend/src/hooks/api/auditLogs/constants.tsx

@@ -79,7 +79,8 @@ export const eventToNameMap: { [K in EventType]: string } = {
   [EventType.UPDATE_CERTIFICATE_TEMPLATE_EST_CONFIG]:
     "Update certificate template EST configuration",
   [EventType.UPDATE_PROJECT_SLACK_CONFIG]: "Update project slack configuration",
-  [EventType.GET_PROJECT_SLACK_CONFIG]: "Get project slack configuration"
+  [EventType.GET_PROJECT_SLACK_CONFIG]: "Get project slack configuration",
+  [EventType.INTEGRATION_SYNCED]: "Integration sync"
 };
 
 export const userAgentTTypeoNameMap: { [K in UserAgentType]: string } = {

frontend/src/hooks/api/auditLogs/enums.tsx

@@ -1,4 +1,5 @@
 export enum ActorType {
+  PLATFORM = "platform",
   USER = "user",
   SERVICE = "service",
   IDENTITY = "identity"
@@ -91,5 +92,6 @@ export enum EventType {
   UPDATE_CERTIFICATE_TEMPLATE_EST_CONFIG = "update-certificate-template-est-config",
   GET_CERTIFICATE_TEMPLATE_EST_CONFIG = "get-certificate-template-est-config",
   UPDATE_PROJECT_SLACK_CONFIG = "update-project-slack-config",
-  GET_PROJECT_SLACK_CONFIG = "get-project-slack-config"
+  GET_PROJECT_SLACK_CONFIG = "get-project-slack-config",
+  INTEGRATION_SYNCED = "integration-synced"
 }

frontend/src/hooks/api/auditLogs/queries.tsx

@@ -1,35 +1,58 @@
-import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, UseInfiniteQueryOptions, useQuery } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import { Actor, AuditLog, AuditLogFilters } from "./types";
+import { Actor, AuditLog, TGetAuditLogsFilter } from "./types";
 
 export const auditLogKeys = {
-  getAuditLogs: (workspaceId: string | null, filters: AuditLogFilters) =>
+  getAuditLogs: (workspaceId: string | null, filters: TGetAuditLogsFilter) =>
     [{ workspaceId, filters }, "audit-logs"] as const,
   getAuditLogActorFilterOpts: (workspaceId: string) =>
     [{ workspaceId }, "audit-log-actor-filters"] as const
 };
 
-export const useGetAuditLogs = (filters: AuditLogFilters, workspaceId: string | null) => {
+export const useGetAuditLogs = (
+  filters: TGetAuditLogsFilter,
+  projectId: string | null,
+  options: Omit<
+    UseInfiniteQueryOptions<
+      AuditLog[],
+      unknown,
+      AuditLog[],
+      AuditLog[],
+      ReturnType<typeof auditLogKeys.getAuditLogs>
+    >,
+    "queryFn" | "queryKey" | "getNextPageParam"
+  > = {}
+) => {
   return useInfiniteQuery({
-    queryKey: auditLogKeys.getAuditLogs(workspaceId, filters),
+    queryKey: auditLogKeys.getAuditLogs(projectId, filters),
     queryFn: async ({ pageParam }) => {
-      const auditLogEndpoint = workspaceId
-        ? `/api/v1/workspace/${workspaceId}/audit-logs`
-        : "/api/v1/organization/audit-logs";
-      const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(auditLogEndpoint, {
-        params: {
-          ...filters,
-          offset: pageParam,
-          startDate: filters?.startDate?.toISOString(),
-          endDate: filters?.endDate?.toISOString()
+      const { data } = await apiRequest.get<{ auditLogs: AuditLog[] }>(
+        "/api/v1/organization/audit-logs",
+        {
+          params: {
+            ...filters,
+            offset: pageParam,
+            startDate: filters?.startDate?.toISOString(),
+            endDate: filters?.endDate?.toISOString(),
+            ...(filters.eventMetadata && Object.keys(filters.eventMetadata).length
+              ? {
+                  eventMetadata: Object.entries(filters.eventMetadata)
+                    .map(([key, value]) => `${key}=${value}`)
+                    .join(",")
+                }
+              : {}),
+            ...(filters.eventType?.length ? { eventType: filters.eventType.join(",") } : {}),
+            ...(projectId ? { projectId } : {})
+          }
         }
-      });
+      );
       return data.auditLogs;
     },
     getNextPageParam: (lastPage, pages) =>
-      lastPage.length !== 0 ? pages.length * filters.limit : undefined
+      lastPage.length !== 0 ? pages.length * filters.limit : undefined,
+    ...options
   });
 };
 

frontend/src/hooks/api/auditLogs/types.tsx

@@ -3,6 +3,17 @@ import { IdentityTrustedIp } from "../identities/types";
 import { PkiItemType } from "../pkiCollections/constants";
 import { ActorType, EventType, UserAgentType } from "./enums";
 
+export type TGetAuditLogsFilter = {
+  eventType?: EventType[];
+  userAgentType?: UserAgentType;
+  eventMetadata?: Record<string, string>;
+  actorType?: ActorType;
+  actorId?: string; // user ID format
+  startDate?: Date;
+  endDate?: Date;
+  limit: number;
+};
+
 interface UserActorMetadata {
   userId: string;
   email: string;
@@ -33,7 +44,13 @@ export interface IdentityActor {
   metadata: IdentityActorMetadata;
 }
 
-export type Actor = UserActor | ServiceActor | IdentityActor;
+export interface PlatformActorMetadata {}
+export interface PlatformActor {
+  type: ActorType.PLATFORM;
+  metadata: PlatformActorMetadata;
+}
+
+export type Actor = UserActor | ServiceActor | IdentityActor | PlatformActor;
 
 interface GetSecretsEvent {
   type: EventType.GET_SECRETS;
@@ -761,6 +778,22 @@ interface GetProjectSlackConfig {
   };
 }
 
+export enum IntegrationSyncedEventTrigger {
+  MANUAL = "manual",
+  AUTO = "auto"
+}
+
+interface IntegrationSyncedEvent {
+  type: EventType.INTEGRATION_SYNCED;
+  metadata: {
+    integrationId: string;
+    lastSyncJobId: string;
+    lastUsed: Date;
+    syncMessage: string;
+    isSynced: boolean;
+  };
+}
+
 export type Event =
   | GetSecretsEvent
   | GetSecretEvent
@@ -838,7 +871,8 @@ export type Event =
   | CreateCertificateTemplateEstConfig
   | GetCertificateTemplateEstConfig
   | UpdateProjectSlackConfig
-  | GetProjectSlackConfig;
+  | GetProjectSlackConfig
+  | IntegrationSyncedEvent;
 
 export type AuditLog = {
   id: string;
@@ -856,12 +890,3 @@ export type AuditLog = {
     slug: string;
   };
 };
-
-export type AuditLogFilters = {
-  eventType?: EventType;
-  userAgentType?: UserAgentType;
-  actor?: string;
-  limit: number;
-  startDate?: Date;
-  endDate?: Date;
-};

frontend/src/hooks/api/integrations/index.tsx

@@ -1 +1,6 @@
-export { useCreateIntegration, useDeleteIntegration, useGetCloudIntegrations } from "./queries";
+export {
+  useCreateIntegration,
+  useDeleteIntegration,
+  useGetCloudIntegrations,
+  useGetIntegration
+} from "./queries";

frontend/src/hooks/api/integrations/queries.tsx

@@ -1,13 +1,14 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient, UseQueryOptions } from "@tanstack/react-query";
 
 import { createNotification } from "@app/components/notifications";
 import { apiRequest } from "@app/config/request";
 
 import { workspaceKeys } from "../workspace";
-import { TCloudIntegration } from "./types";
+import { TCloudIntegration, TIntegrationWithEnv } from "./types";
 
 export const integrationQueryKeys = {
-  getIntegrations: () => ["integrations"] as const
+  getIntegrations: () => ["integrations"] as const,
+  getIntegration: (id: string) => ["integration", id] as const
 };
 
 const fetchIntegrations = async () => {
@@ -18,6 +19,14 @@ const fetchIntegrations = async () => {
   return data.integrationOptions;
 };
 
+const fetchIntegration = async (id: string) => {
+  const { data } = await apiRequest.get<{ integration: TIntegrationWithEnv }>(
+    `/api/v1/integration/${id}`
+  );
+
+  return data.integration;
+};
+
 export const useGetCloudIntegrations = () =>
   useQuery({
     queryKey: integrationQueryKeys.getIntegrations(),
@@ -128,6 +137,26 @@ export const useDeleteIntegration = () => {
   });
 };
 
+export const useGetIntegration = (
+  integrationId: string,
+  options?: Omit<
+    UseQueryOptions<
+      TIntegrationWithEnv,
+      unknown,
+      TIntegrationWithEnv,
+      ReturnType<typeof integrationQueryKeys.getIntegration>
+    >,
+    "queryFn" | "queryKey"
+  >
+) => {
+  return useQuery({
+    ...options,
+    enabled: Boolean(integrationId && options?.enabled === undefined ? true : options?.enabled),
+    queryKey: integrationQueryKeys.getIntegration(integrationId),
+    queryFn: () => fetchIntegration(integrationId)
+  });
+};
+
 export const useSyncIntegration = () => {
   return useMutation<{}, {}, { id: string; workspaceId: string; lastUsed: string }>({
     mutationFn: ({ id }) => apiRequest.post(`/api/v1/integration/${id}/sync`),

frontend/src/hooks/api/integrations/types.ts

@@ -36,14 +36,34 @@ export type TIntegration = {
   metadata?: {
     githubVisibility?: string;
     githubVisibilityRepoIds?: string[];
+    shouldAutoRedeploy?: boolean;
+    secretAWSTag?: {
+      key: string;
+      value: string;
+    }[];
 
+    kmsKeyId?: string;
     secretSuffix?: string;
+    secretPrefix?: string;
     syncBehavior?: IntegrationSyncBehavior;
     mappingBehavior?: IntegrationMappingBehavior;
     scope: string;
     org: string;
     project: string;
     environment: string;
+
+    shouldDisableDelete?: boolean;
+    shouldMaskSecrets?: boolean;
+    shouldProtectSecrets?: boolean;
+    shouldEnableDelete?: boolean;
+  };
+};
+
+export type TIntegrationWithEnv = TIntegration & {
+  environment: {
+    id: string;
+    name: string;
+    slug: string;
   };
 };