From c04ea7e7314fd8eab1752dc94356b3ba176b276e Mon Sep 17 00:00:00 2001
From: akhilmhdh <akhilmhdh@gmail.com>
Date: Sat, 24 Jun 2023 23:24:51 +0530
Subject: [PATCH] feat(integration-page): updated components and api hooks

---
 .../DeleteActionModal/DeleteActionModal.tsx   |   6 +-
 frontend/src/hooks/api/auth/index.tsx         |  11 +-
 frontend/src/hooks/api/bots/index.tsx         |   1 +
 frontend/src/hooks/api/bots/queries.tsx       |  38 ++
 frontend/src/hooks/api/bots/types.ts          |  20 +
 frontend/src/hooks/api/index.tsx              |   3 +
 .../src/hooks/api/integrationAuth/index.tsx   |  14 +-
 .../src/hooks/api/integrationAuth/queries.tsx | 363 ++++++++++--------
 .../src/hooks/api/integrationAuth/types.ts    |  41 +-
 frontend/src/hooks/api/integrations/index.tsx |   1 +
 .../src/hooks/api/integrations/queries.tsx    |  35 ++
 frontend/src/hooks/api/integrations/types.ts  |  33 ++
 frontend/src/hooks/api/types.ts               |   2 +
 frontend/src/hooks/api/workspace/index.tsx    |   2 +
 frontend/src/hooks/api/workspace/queries.tsx  |  63 ++-
 15 files changed, 423 insertions(+), 210 deletions(-)
 create mode 100644 frontend/src/hooks/api/bots/index.tsx
 create mode 100644 frontend/src/hooks/api/bots/queries.tsx
 create mode 100644 frontend/src/hooks/api/bots/types.ts
 create mode 100644 frontend/src/hooks/api/integrations/index.tsx
 create mode 100644 frontend/src/hooks/api/integrations/queries.tsx
 create mode 100644 frontend/src/hooks/api/integrations/types.ts

diff --git a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
index 9fd93c90f..ebe45bf9b 100644
--- a/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
+++ b/frontend/src/components/v2/DeleteActionModal/DeleteActionModal.tsx
@@ -13,6 +13,7 @@ type Props = {
   onChange?: (isOpen: boolean) => void;
   deleteKey: string;
   title: string;
+  subTitle?: string;
   onDeleteApproved: () => Promise<void>;
 };
 
@@ -22,7 +23,8 @@ export const DeleteActionModal = ({
   onChange,
   deleteKey,
   onDeleteApproved,
-  title
+  title,
+  subTitle = 'This action is irreversible!'
 }: Props): JSX.Element => {
   const [inputData, setInputData] = useState("");
   const [isLoading, setIsLoading] = useToggle();
@@ -52,7 +54,7 @@ export const DeleteActionModal = ({
     >
       <ModalContent
         title={title}
-        subTitle="This action is irreversible!"
+        subTitle={subTitle}
         footerContent={
           <div className="flex items-center">
             <Button
diff --git a/frontend/src/hooks/api/auth/index.tsx b/frontend/src/hooks/api/auth/index.tsx
index fb89ba3fe..2e66fe36f 100644
--- a/frontend/src/hooks/api/auth/index.tsx
+++ b/frontend/src/hooks/api/auth/index.tsx
@@ -1,6 +1,7 @@
 export {
-    useGetAuthToken,
-    useGetCommonPasswords,
-    useRevokeAllSessions,
-    useSendMfaToken, 
-    useVerifyMfaToken} from "./queries"
+  useGetAuthToken,
+  useGetCommonPasswords,
+  useRevokeAllSessions,
+  useSendMfaToken,
+  useVerifyMfaToken
+} from "./queries";
diff --git a/frontend/src/hooks/api/bots/index.tsx b/frontend/src/hooks/api/bots/index.tsx
new file mode 100644
index 000000000..aa2ee6030
--- /dev/null
+++ b/frontend/src/hooks/api/bots/index.tsx
@@ -0,0 +1 @@
+export { useGetWorkspaceBot, useUpdateBotActiveStatus } from './queries';
diff --git a/frontend/src/hooks/api/bots/queries.tsx b/frontend/src/hooks/api/bots/queries.tsx
new file mode 100644
index 000000000..14c5d4f94
--- /dev/null
+++ b/frontend/src/hooks/api/bots/queries.tsx
@@ -0,0 +1,38 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { TBot, TSetBotActiveStatusDto } from './types';
+
+const queryKeys = {
+  getBot: (workspaceId: string) => [{ workspaceId }, 'bot'] as const
+};
+
+const fetchWorkspaceBot = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ bot: TBot }>(`/api/v1/bot/${workspaceId}`);
+  return data.bot;
+};
+
+export const useGetWorkspaceBot = (workspaceId: string) =>
+  useQuery({
+    queryKey: queryKeys.getBot(workspaceId),
+    queryFn: () => fetchWorkspaceBot(workspaceId),
+    enabled: Boolean(workspaceId)
+  });
+
+// mutation
+
+export const useUpdateBotActiveStatus = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, TSetBotActiveStatusDto>({
+    mutationFn: ({ botId, isActive, botKey }) =>
+      apiRequest.patch(`/api/v1/bot/${botId}/active`, {
+        isActive,
+        botKey
+      }),
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(queryKeys.getBot(workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/bots/types.ts b/frontend/src/hooks/api/bots/types.ts
new file mode 100644
index 000000000..3ee4620bb
--- /dev/null
+++ b/frontend/src/hooks/api/bots/types.ts
@@ -0,0 +1,20 @@
+export type TBot = {
+  _id: string;
+  name: string;
+  workspace: string;
+  isActive: boolean;
+  publicKey: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
+
+export type TSetBotActiveStatusDto = {
+  workspaceId: string;
+  botId: string;
+  isActive: boolean;
+  botKey?: {
+    encryptedKey: string;
+    nonce: string;
+  };
+};
diff --git a/frontend/src/hooks/api/index.tsx b/frontend/src/hooks/api/index.tsx
index 1bbfaa3d1..075702bc7 100644
--- a/frontend/src/hooks/api/index.tsx
+++ b/frontend/src/hooks/api/index.tsx
@@ -1,5 +1,8 @@
 export * from "./auth";
+export * from "./bots";
 export * from "./incidentContacts";
+export * from "./integrationAuth";
+export * from "./integrations";
 export * from "./keys";
 export * from "./organization";
 export * from "./secretFolders";
diff --git a/frontend/src/hooks/api/integrationAuth/index.tsx b/frontend/src/hooks/api/integrationAuth/index.tsx
index e3997c82a..3b18be83f 100644
--- a/frontend/src/hooks/api/integrationAuth/index.tsx
+++ b/frontend/src/hooks/api/integrationAuth/index.tsx
@@ -1,7 +1,9 @@
 export {
-    useGetIntegrationAuthApps,
-    useGetIntegrationAuthById,
-    useGetIntegrationAuthRailwayEnvironments,
-    useGetIntegrationAuthRailwayServices,
-    useGetIntegrationAuthTeams,
-    useGetIntegrationAuthVercelBranches} from "./queries";
\ No newline at end of file
+  useDeleteIntegrationAuth,
+  useGetIntegrationAuthApps,
+  useGetIntegrationAuthById,
+  useGetIntegrationAuthRailwayEnvironments,
+  useGetIntegrationAuthRailwayServices,
+  useGetIntegrationAuthTeams,
+  useGetIntegrationAuthVercelBranches
+} from "./queries";
diff --git a/frontend/src/hooks/api/integrationAuth/queries.tsx b/frontend/src/hooks/api/integrationAuth/queries.tsx
index 5e6d02dda..aed885ff3 100644
--- a/frontend/src/hooks/api/integrationAuth/queries.tsx
+++ b/frontend/src/hooks/api/integrationAuth/queries.tsx
@@ -1,204 +1,237 @@
-import { useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import {
-    App,
-    Environment,
-    IntegrationAuth,
-    Service,
-    Team
-} from "./types";
+import { workspaceKeys } from "../workspace/queries";
+import { App, Environment, IntegrationAuth, Service, Team } from "./types";
 
 const integrationAuthKeys = {
-    getIntegrationAuthById: (integrationAuthId: string) => [{ integrationAuthId }, "integrationAuth"] as const,
-    getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) => [{ integrationAuthId, teamId }, "integrationAuthApps"] as const,
-    getIntegrationAuthTeams: (integrationAuthId: string) => [{ integrationAuthId }, "integrationAuthTeams"] as const,
-    getIntegrationAuthVercelBranches: ({
-        integrationAuthId,
-        appId,
-    }: {
-        integrationAuthId: string;
-        appId: string;
-    }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
-    getIntegrationAuthRailwayEnvironments: ({
-        integrationAuthId,
-        appId
-    }: {
-        integrationAuthId: string;
-        appId: string;
-    }) => [{ integrationAuthId, appId }, "integrationAuthRailwayEnvironments"] as const,
-    getIntegrationAuthRailwayServices: ({
-        integrationAuthId,
-        appId
-    }: {
-        integrationAuthId: string;
-        appId: string;
-    }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const
-}
-
-const fetchIntegrationAuthById = async (integrationAuthId: string) => {
-    const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(`/api/v1/integration-auth/${integrationAuthId}`);
-    return data.integrationAuth;
-}
-
-const fetchIntegrationAuthApps = async ({
-    integrationAuthId,
-    teamId
-}: {
-    integrationAuthId: string;
-    teamId?: string;
-}) => {
-    const searchParams = new URLSearchParams(teamId ? { teamId } : undefined);
-    const { data } = await apiRequest.get<{ apps: App[] }>(
-        `/api/v1/integration-auth/${integrationAuthId}/apps`, 
-        { params: searchParams }
-    );
-    return data.apps;
-}
-
-const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
-    const { data } = await apiRequest.get<{ teams: Team[] }>(`/api/v1/integration-auth/${integrationAuthId}/teams`);
-    return data.teams;
-}
-
-const fetchIntegrationAuthVercelBranches = async ({
+  getIntegrationAuthById: (integrationAuthId: string) =>
+    [{ integrationAuthId }, "integrationAuth"] as const,
+  getIntegrationAuthApps: (integrationAuthId: string, teamId?: string) =>
+    [{ integrationAuthId, teamId }, "integrationAuthApps"] as const,
+  getIntegrationAuthTeams: (integrationAuthId: string) =>
+    [{ integrationAuthId }, "integrationAuthTeams"] as const,
+  getIntegrationAuthVercelBranches: ({
     integrationAuthId,
     appId
-}: {
+  }: {
     integrationAuthId: string;
     appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthVercelBranches"] as const,
+  getIntegrationAuthRailwayEnvironments: ({
+    integrationAuthId,
+    appId
+  }: {
+    integrationAuthId: string;
+    appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayEnvironments"] as const,
+  getIntegrationAuthRailwayServices: ({
+    integrationAuthId,
+    appId
+  }: {
+    integrationAuthId: string;
+    appId: string;
+  }) => [{ integrationAuthId, appId }, "integrationAuthRailwayServices"] as const
+};
+
+const fetchIntegrationAuthById = async (integrationAuthId: string) => {
+  const { data } = await apiRequest.get<{ integrationAuth: IntegrationAuth }>(
+    `/api/v1/integration-auth/${integrationAuthId}`
+  );
+  return data.integrationAuth;
+};
+
+const fetchIntegrationAuthApps = async ({
+  integrationAuthId,
+  teamId
+}: {
+  integrationAuthId: string;
+  teamId?: string;
 }) => {
-    const { data: { branches } } = await apiRequest.get<{ branches: string[] }>(`/api/v1/integration-auth/${integrationAuthId}/vercel/branches`, {
-        params: {
-            appId
-        }
-    });
-    
-    return branches;
+  const searchParams = new URLSearchParams(teamId ? { teamId } : undefined);
+  const { data } = await apiRequest.get<{ apps: App[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/apps`,
+    { params: searchParams }
+  );
+  return data.apps;
+};
+
+const fetchIntegrationAuthTeams = async (integrationAuthId: string) => {
+  const { data } = await apiRequest.get<{ teams: Team[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/teams`
+  );
+  return data.teams;
+};
+
+const fetchIntegrationAuthVercelBranches = async ({
+  integrationAuthId,
+  appId
+}: {
+  integrationAuthId: string;
+  appId: string;
+}) => {
+  const {
+    data: { branches }
+  } = await apiRequest.get<{ branches: string[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/vercel/branches`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return branches;
 };
 
 const fetchIntegrationAuthRailwayEnvironments = async ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    const { data: { environments } } = await apiRequest.get<{ environments: Environment[] }>(`/api/v1/integration-auth/${integrationAuthId}/railway/environments`, {
-        params: {
-            appId
-        }
-    });
-    
-    return environments;
-}
+  const {
+    data: { environments }
+  } = await apiRequest.get<{ environments: Environment[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/railway/environments`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return environments;
+};
 
 const fetchIntegrationAuthRailwayServices = async ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    const { data: { services } } = await apiRequest.get<{ services: Service[] }>(`/api/v1/integration-auth/${integrationAuthId}/railway/services`, {
-        params: {
-            appId
-        }
-    });
-    
-    return services;
-}
+  const {
+    data: { services }
+  } = await apiRequest.get<{ services: Service[] }>(
+    `/api/v1/integration-auth/${integrationAuthId}/railway/services`,
+    {
+      params: {
+        appId
+      }
+    }
+  );
+
+  return services;
+};
 
 export const useGetIntegrationAuthById = (integrationAuthId: string) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
-        queryFn: () => fetchIntegrationAuthById(integrationAuthId),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthById(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthById(integrationAuthId),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthApps = ({
-    integrationAuthId,
-    teamId
+  integrationAuthId,
+  teamId
 }: {
-    integrationAuthId: string;
-    teamId?: string;
+  integrationAuthId: string;
+  teamId?: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId),
-        queryFn: () =>  fetchIntegrationAuthApps({
-            integrationAuthId,
-            teamId
-        }),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthApps(integrationAuthId, teamId),
+    queryFn: () =>
+      fetchIntegrationAuthApps({
+        integrationAuthId,
+        teamId
+      }),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthTeams = (integrationAuthId: string) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthTeams(integrationAuthId),
-        queryFn: () =>  fetchIntegrationAuthTeams(integrationAuthId),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthTeams(integrationAuthId),
+    queryFn: () => fetchIntegrationAuthTeams(integrationAuthId),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthVercelBranches = ({
-    integrationAuthId,
-    appId,
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthVercelBranches({
-            integrationAuthId,
-            appId,
-        }),
-        queryFn: () => fetchIntegrationAuthVercelBranches({
-            integrationAuthId,
-            appId,
-        }),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthVercelBranches({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthVercelBranches({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthRailwayEnvironments = ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthRailwayEnvironments({
-            integrationAuthId,
-            appId,
-        }),
-        queryFn: () => fetchIntegrationAuthRailwayEnvironments({
-            integrationAuthId,
-            appId,
-        }),
-        enabled: true
-    });
-}
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthRailwayEnvironments({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthRailwayEnvironments({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
 
 export const useGetIntegrationAuthRailwayServices = ({
-    integrationAuthId,
-    appId
+  integrationAuthId,
+  appId
 }: {
-    integrationAuthId: string;
-    appId: string;
+  integrationAuthId: string;
+  appId: string;
 }) => {
-    return useQuery({
-        queryKey: integrationAuthKeys.getIntegrationAuthRailwayServices({
-            integrationAuthId,
-            appId,
-        }),
-        queryFn: () => fetchIntegrationAuthRailwayServices({
-            integrationAuthId,
-            appId,
-        }),
-        enabled: true
-    });
-}
\ No newline at end of file
+  return useQuery({
+    queryKey: integrationAuthKeys.getIntegrationAuthRailwayServices({
+      integrationAuthId,
+      appId
+    }),
+    queryFn: () =>
+      fetchIntegrationAuthRailwayServices({
+        integrationAuthId,
+        appId
+      }),
+    enabled: true
+  });
+};
+
+export const useDeleteIntegrationAuth = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, { id: string; workspaceId: string }>({
+    mutationFn: ({ id }) => apiRequest.delete(`/api/v1/integration-auth/${id}`),
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceAuthorization(workspaceId));
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/integrationAuth/types.ts b/frontend/src/hooks/api/integrationAuth/types.ts
index 7ea8799a5..73440cc8d 100644
--- a/frontend/src/hooks/api/integrationAuth/types.ts
+++ b/frontend/src/hooks/api/integrationAuth/types.ts
@@ -1,28 +1,31 @@
 export type IntegrationAuth = {
-    _id: string;
-    workspace: string;
-    integration: string;
-    teamId?: string;
-    accountId?: string;
-}
+  _id: string;
+  integration: string;
+  workspace: string;
+  __v: number;
+  createdAt: string;
+  updatedAt: string;
+  algorithm: string;
+  keyEncoding: string;
+};
 
 export type App = {
-    name: string;
-    appId?: string;
-    owner?: string;
-}
+  name: string;
+  appId?: string;
+  owner?: string;
+};
 
 export type Team = {
-    name: string;
-    teamId: string;
-}
+  name: string;
+  teamId: string;
+};
 
 export type Environment = {
-    name: string;
-    environmentId: string;
-}
+  name: string;
+  environmentId: string;
+};
 
 export type Service = {
-    name: string;
-    serviceId: string;
-}
\ No newline at end of file
+  name: string;
+  serviceId: string;
+};
diff --git a/frontend/src/hooks/api/integrations/index.tsx b/frontend/src/hooks/api/integrations/index.tsx
new file mode 100644
index 000000000..9ea8edb17
--- /dev/null
+++ b/frontend/src/hooks/api/integrations/index.tsx
@@ -0,0 +1 @@
+export { useDeleteIntegration,useGetCloudIntegrations } from './queries';
diff --git a/frontend/src/hooks/api/integrations/queries.tsx b/frontend/src/hooks/api/integrations/queries.tsx
new file mode 100644
index 000000000..6f8db4882
--- /dev/null
+++ b/frontend/src/hooks/api/integrations/queries.tsx
@@ -0,0 +1,35 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+
+import { apiRequest } from '@app/config/request';
+
+import { workspaceKeys } from '../workspace/queries';
+import { TCloudIntegration } from './types';
+
+export const integrationQueryKeys = {
+  getIntegrations: () => ['integrations'] as const
+};
+
+const fetchIntegrations = async () => {
+  const { data } = await apiRequest.get<{ integrationOptions: TCloudIntegration[] }>(
+    '/api/v1/integration-auth/integration-options'
+  );
+
+  return data.integrationOptions;
+};
+
+export const useGetCloudIntegrations = () =>
+  useQuery({
+    queryKey: integrationQueryKeys.getIntegrations(),
+    queryFn: () => fetchIntegrations()
+  });
+
+export const useDeleteIntegration = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation<{}, {}, { id: string; workspaceId: string }>({
+    mutationFn: ({ id }) => apiRequest.delete(`/api/v1/integration/${id}`),
+    onSuccess: (_, { workspaceId }) => {
+      queryClient.invalidateQueries(workspaceKeys.getWorkspaceIntegrations(workspaceId));
+    }
+  });
+};
diff --git a/frontend/src/hooks/api/integrations/types.ts b/frontend/src/hooks/api/integrations/types.ts
new file mode 100644
index 000000000..5ff2bbac7
--- /dev/null
+++ b/frontend/src/hooks/api/integrations/types.ts
@@ -0,0 +1,33 @@
+export type TCloudIntegration = {
+  name: string;
+  slug: string;
+  image: string;
+  isAvailable: boolean;
+  type: string;
+  clientId: string;
+  docsLink: string;
+  clientSlug: string;
+};
+
+export type TIntegration = {
+  _id: string;
+  workspace: string;
+  environment: string;
+  isActive: boolean;
+  url: any;
+  app: string;
+  appId: string;
+  targetEnvironment: string;
+  targetEnvironmentId: string;
+  targetService: string;
+  targetServiceId: string;
+  owner: string;
+  path: string;
+  region: string;
+  integration: string;
+  integrationAuth: string;
+  secretPath: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+};
diff --git a/frontend/src/hooks/api/types.ts b/frontend/src/hooks/api/types.ts
index 324fc738a..1c4316410 100644
--- a/frontend/src/hooks/api/types.ts
+++ b/frontend/src/hooks/api/types.ts
@@ -1,5 +1,7 @@
 export type { GetAuthTokenAPI } from "./auth/types";
 export type { IncidentContact } from "./incidentContacts/types";
+export type { IntegrationAuth } from "./integrationAuth/types";
+export type { TCloudIntegration, TIntegration } from "./integrations/types";
 export type { UserWsKeyPair } from "./keys/types";
 export type { Organization } from "./organization/types";
 export type { CreateServiceTokenDTO, ServiceToken } from "./serviceTokens/types";
diff --git a/frontend/src/hooks/api/workspace/index.tsx b/frontend/src/hooks/api/workspace/index.tsx
index fa81acb58..bd06fedd3 100644
--- a/frontend/src/hooks/api/workspace/index.tsx
+++ b/frontend/src/hooks/api/workspace/index.tsx
@@ -6,8 +6,10 @@ export {
   useGetUserWorkspaceMemberships,
   useGetUserWorkspaces,
   useGetUserWsEnvironments,
+  useGetWorkspaceAuthorizations,
   useGetWorkspaceById,
   useGetWorkspaceIndexStatus,
+  useGetWorkspaceIntegrations,
   useGetWorkspaceSecrets,
   useNameWorkspaceSecrets,
   useRenameWorkspace,
diff --git a/frontend/src/hooks/api/workspace/queries.tsx b/frontend/src/hooks/api/workspace/queries.tsx
index 6bc1973ee..0e3233452 100644
--- a/frontend/src/hooks/api/workspace/queries.tsx
+++ b/frontend/src/hooks/api/workspace/queries.tsx
@@ -2,9 +2,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 import { apiRequest } from "@app/config/request";
 
-import {
-  EncryptedSecret
-} from "../secrets/types";
+import { IntegrationAuth } from "../integrationAuth/types";
+import { TIntegration } from "../integrations/types";
+import { EncryptedSecret } from "../secrets/types";
 import {
   CreateEnvironmentDTO,
   CreateWorkspaceDTO,
@@ -19,11 +19,14 @@ import {
   WorkspaceEnv
 } from "./types";
 
-const workspaceKeys = {
+export const workspaceKeys = {
   getWorkspaceById: (workspaceId: string) => [{ workspaceId }, "workspace"] as const,
   getWorkspaceSecrets: (workspaceId: string) => [{ workspaceId }, "workspace-secrets"] as const,
-  getWorkspaceIndexStatus: (workspaceId: string) => [{ workspaceId}, "workspace-index-status"] as const,
+  getWorkspaceIndexStatus: (workspaceId: string) =>
+    [{ workspaceId }, "workspace-index-status"] as const,
   getWorkspaceMemberships: (orgId: string) => [{ orgId }, "workspace-memberships"],
+  getWorkspaceAuthorization: (workspaceId: string) => [{ workspaceId }, "workspace-authorizations"],
+  getWorkspaceIntegrations: (workspaceId: string) => [{ workspaceId }, "workspace-integrations"],
   getAllUserWorkspace: ["workspaces"] as const,
   getUserWsEnvironments: (workspaceId: string) => ["workspace-env", { workspaceId }] as const
 };
@@ -42,15 +45,17 @@ const fetchWorkspaceIndexStatus = async (workspaceId: string) => {
   );
 
   return data;
-}
+};
 
 const fetchWorkspaceSecrets = async (workspaceId: string) => {
-  const { data: { secrets } } = await apiRequest.get<{ secrets: EncryptedSecret[] }>(
+  const {
+    data: { secrets }
+  } = await apiRequest.get<{ secrets: EncryptedSecret[] }>(
     `/api/v3/workspaces/${workspaceId}/secrets`
   );
-  
+
   return secrets;
-}
+};
 
 const fetchUserWorkspaces = async () => {
   const { data } = await apiRequest.get<{ workspaces: Workspace[] }>("/api/v1/workspace");
@@ -63,15 +68,15 @@ export const useGetWorkspaceIndexStatus = (workspaceId: string) => {
     queryFn: () => fetchWorkspaceIndexStatus(workspaceId),
     enabled: true
   });
-}
+};
 
 export const useGetWorkspaceSecrets = (workspaceId: string) => {
   return useQuery({
     queryKey: workspaceKeys.getWorkspaceSecrets(workspaceId),
     queryFn: () => fetchWorkspaceSecrets(workspaceId),
     enabled: true
-  })
-}
+  });
+};
 
 export const useGetWorkspaceById = (workspaceId: string) => {
   return useQuery({
@@ -126,7 +131,39 @@ export const useNameWorkspaceSecrets = () => {
       queryClient.invalidateQueries(workspaceKeys.getWorkspaceIndexStatus(variables.workspaceId));
     }
   });
-}
+};
+
+const fetchWorkspaceAuthorization = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ authorizations: IntegrationAuth[] }>(
+    `/api/v1/workspace/${workspaceId}/authorizations`
+  );
+  return data.authorizations;
+};
+
+export const useGetWorkspaceAuthorizations = <TData = IntegrationAuth[],>(
+  workspaceId: string,
+  select?: (data: IntegrationAuth[]) => TData
+) =>
+  useQuery({
+    queryKey: workspaceKeys.getWorkspaceAuthorization(workspaceId),
+    queryFn: () => fetchWorkspaceAuthorization(workspaceId),
+    enabled: Boolean(workspaceId),
+    select
+  });
+
+const fetchWorkspaceIntegrations = async (workspaceId: string) => {
+  const { data } = await apiRequest.get<{ integrations: TIntegration[] }>(
+    `/api/v1/workspace/${workspaceId}/integrations`
+  );
+  return data.integrations;
+};
+
+export const useGetWorkspaceIntegrations = (workspaceId: string) =>
+  useQuery({
+    queryKey: workspaceKeys.getWorkspaceIntegrations(workspaceId),
+    queryFn: () => fetchWorkspaceIntegrations(workspaceId),
+    enabled: Boolean(workspaceId)
+  });
 
 // mutation
 export const useCreateWorkspace = () => {