Feat: Integration UI improvements

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

@@ -5,9 +5,11 @@ 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 +20,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 +138,14 @@ export const useDeleteIntegration = () => {
   });
 };
 
+export const useGetIntegration = (integrationId: string) => {
+  return useQuery({
+    enabled: Boolean(integrationId),
+    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`),