feat(integration-page): updated components and api hooks

This commit is contained in:
akhilmhdh
2023-06-24 23:24:51 +05:30
parent 6b222bad01
commit c04ea7e731
15 changed files with 423 additions and 210 deletions

View File

@@ -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

View File

@@ -1,6 +1,7 @@
export {
useGetAuthToken,
useGetCommonPasswords,
useRevokeAllSessions,
useSendMfaToken,
useVerifyMfaToken} from "./queries"
useGetAuthToken,
useGetCommonPasswords,
useRevokeAllSessions,
useSendMfaToken,
useVerifyMfaToken
} from "./queries";

View File

@@ -0,0 +1 @@
export { useGetWorkspaceBot, useUpdateBotActiveStatus } from './queries';

View File

@@ -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));
}
});
};

View File

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

View File

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

View File

@@ -1,7 +1,9 @@
export {
useGetIntegrationAuthApps,
useGetIntegrationAuthById,
useGetIntegrationAuthRailwayEnvironments,
useGetIntegrationAuthRailwayServices,
useGetIntegrationAuthTeams,
useGetIntegrationAuthVercelBranches} from "./queries";
useDeleteIntegrationAuth,
useGetIntegrationAuthApps,
useGetIntegrationAuthById,
useGetIntegrationAuthRailwayEnvironments,
useGetIntegrationAuthRailwayServices,
useGetIntegrationAuthTeams,
useGetIntegrationAuthVercelBranches
} from "./queries";

View File

@@ -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
});
}
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));
}
});
};

View File

@@ -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;
}
name: string;
serviceId: string;
};

View File

@@ -0,0 +1 @@
export { useDeleteIntegration,useGetCloudIntegrations } from './queries';

View File

@@ -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));
}
});
};

View File

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

View File

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

View File

@@ -6,8 +6,10 @@ export {
useGetUserWorkspaceMemberships,
useGetUserWorkspaces,
useGetUserWsEnvironments,
useGetWorkspaceAuthorizations,
useGetWorkspaceById,
useGetWorkspaceIndexStatus,
useGetWorkspaceIntegrations,
useGetWorkspaceSecrets,
useNameWorkspaceSecrets,
useRenameWorkspace,

View File

@@ -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 = () => {