misc: added root workflow integration structure

This commit is contained in:
Sheen Capadngan
2024-09-08 13:49:32 +08:00
parent dbc5b5a3d1
commit ecf177fecc
23 changed files with 380 additions and 116 deletions
@@ -8,5 +8,6 @@ export {
fetchSlackReinstallUrl,
useGetSlackIntegrationById,
useGetSlackIntegrationChannels,
useGetSlackIntegrations
useGetSlackIntegrations,
useGetWorkflowIntegrations
} from "./queries";
@@ -37,7 +37,7 @@ export const useDeleteSlackIntegration = () => {
},
onSuccess: (_, { orgId, id }) => {
queryClient.invalidateQueries(workflowIntegrationKeys.getSlackIntegration(id));
queryClient.invalidateQueries(workflowIntegrationKeys.getSlackIntegrations(orgId));
queryClient.invalidateQueries(workflowIntegrationKeys.getIntegrations(orgId));
}
});
};
@@ -2,9 +2,10 @@ import { useQuery } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { SlackIntegration, SlackIntegrationChannel } from "./types";
import { SlackIntegration, SlackIntegrationChannel, WorkflowIntegration } from "./types";
export const workflowIntegrationKeys = {
getIntegrations: (orgId?: string) => [{ orgId }, "workflow-integrations"],
getSlackIntegrations: (orgId?: string) => [{ orgId }, "slack-workflow-integrations"],
getSlackIntegration: (id?: string) => [{ id }, "slack-workflow-integration"],
getSlackIntegrationChannels: (id?: string) => [{ id }, "slack-workflow-integration-channels"]
@@ -27,14 +28,10 @@ export const fetchSlackInstallUrl = async ({
return data;
};
export const fetchSlackReinstallUrl = async ({
slackIntegrationId
}: {
slackIntegrationId: string;
}) => {
export const fetchSlackReinstallUrl = async ({ id }: { id: string }) => {
const { data } = await apiRequest.get<string>("/api/v1/workflow-integrations/slack/reinstall", {
params: {
slackIntegrationId
id
}
});
@@ -63,6 +60,12 @@ export const fetchSlackIntegrationChannels = async (id?: string) => {
return data;
};
export const fetchWorkflowIntegrations = async () => {
const { data } = await apiRequest.get<WorkflowIntegration[]>("/api/v1/workflow-integrations");
return data;
};
export const useGetSlackIntegrations = (orgId?: string) =>
useQuery({
queryKey: workflowIntegrationKeys.getSlackIntegrations(orgId),
@@ -83,3 +86,10 @@ export const useGetSlackIntegrationChannels = (id?: string) =>
queryFn: () => fetchSlackIntegrationChannels(id),
enabled: Boolean(id)
});
export const useGetWorkflowIntegrations = (id?: string) =>
useQuery({
queryKey: workflowIntegrationKeys.getIntegrations(id),
queryFn: () => fetchWorkflowIntegrations(),
enabled: Boolean(id)
});
@@ -1,7 +1,14 @@
export enum WorkflowIntegrationPlatform {
SLACK = "Slack"
SLACK = "slack"
}
export type WorkflowIntegration = {
id: string;
slug: string;
description: string;
integration: WorkflowIntegrationPlatform;
};
export type SlackIntegration = {
id: string;
slug: string;
@@ -11,9 +11,12 @@ type Props = {
};
export const IntegrationFormDetails = ({ isOpen, id, onOpenChange, workflowPlatform }: Props) => {
const modalTitle =
workflowPlatform === WorkflowIntegrationPlatform.SLACK ? "Slack integration" : "Integration";
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange}>
<ModalContent title={`${WorkflowIntegrationPlatform.SLACK} integration`}>
<ModalContent title={modalTitle}>
{workflowPlatform === WorkflowIntegrationPlatform.SLACK && (
<SlackIntegrationForm id={id} onClose={() => onOpenChange(false)} />
)}
@@ -29,7 +29,7 @@ import { usePopUp } from "@app/hooks";
import {
fetchSlackReinstallUrl,
useDeleteSlackIntegration,
useGetSlackIntegrations
useGetWorkflowIntegrations
} from "@app/hooks/api";
import { WorkflowIntegrationPlatform } from "@app/hooks/api/workflowIntegrations/types";
@@ -46,8 +46,9 @@ export const OrgWorkflowIntegrationTab = withPermission(
const { currentOrg } = useOrganization();
const router = useRouter();
const { data: slackIntegrations, isLoading: isSlackIntegrationsLoading } =
useGetSlackIntegrations(currentOrg?.id);
const { data: workflowIntegrations, isLoading: isWorkflowIntegrationsLoading } =
useGetWorkflowIntegrations(currentOrg?.id);
const { mutateAsync: deleteSlackIntegration } = useDeleteSlackIntegration();
const handleRemoveIntegration = async () => {
@@ -74,7 +75,7 @@ export const OrgWorkflowIntegrationTab = withPermission(
if (platform === WorkflowIntegrationPlatform.SLACK) {
try {
const slackReinstallUrl = await fetchSlackReinstallUrl({
slackIntegrationId: id
id
});
if (slackReinstallUrl) {
@@ -91,8 +92,6 @@ export const OrgWorkflowIntegrationTab = withPermission(
}
};
const isIntegrationsLoading = isSlackIntegrationsLoading;
return (
<div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
<div className="flex justify-between">
@@ -123,23 +122,25 @@ export const OrgWorkflowIntegrationTab = withPermission(
</Tr>
</THead>
<TBody>
{isIntegrationsLoading && (
{isWorkflowIntegrationsLoading && (
<TableSkeleton columns={2} innerKey="integrations-loading" />
)}
{!isIntegrationsLoading && slackIntegrations && slackIntegrations.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState title="No workflow integrations found" icon={faGear} />
</Td>
</Tr>
)}
{slackIntegrations?.map((slackIntegration) => (
<Tr key={slackIntegration.id}>
{!isWorkflowIntegrationsLoading &&
workflowIntegrations &&
workflowIntegrations.length === 0 && (
<Tr>
<Td colSpan={5}>
<EmptyState title="No workflow integrations found" icon={faGear} />
</Td>
</Tr>
)}
{workflowIntegrations?.map((workflowIntegration) => (
<Tr key={workflowIntegration.id}>
<Td className="flex max-w-xs items-center overflow-hidden text-ellipsis hover:overflow-auto hover:break-all">
<FontAwesomeIcon icon={faSlack} />
<div className="ml-2">SLACK</div>
<div className="ml-2">{workflowIntegration.integration.toUpperCase()}</div>
</Td>
<Td>{slackIntegration.slug}</Td>
<Td>{workflowIntegration.slug}</Td>
<Td>
<DropdownMenu>
<DropdownMenuTrigger asChild className="rounded-lg">
@@ -153,8 +154,8 @@ export const OrgWorkflowIntegrationTab = withPermission(
e.stopPropagation();
handlePopUpOpen("integrationDetails", {
id: slackIntegration.id,
platform: WorkflowIntegrationPlatform.SLACK
id: workflowIntegration.id,
platform: workflowIntegration.integration
});
}}
>
@@ -174,8 +175,8 @@ export const OrgWorkflowIntegrationTab = withPermission(
e.stopPropagation();
triggerReinstall(
WorkflowIntegrationPlatform.SLACK,
slackIntegration.id
workflowIntegration.integration,
workflowIntegration.id
);
}}
>
@@ -197,9 +198,9 @@ export const OrgWorkflowIntegrationTab = withPermission(
e.stopPropagation();
handlePopUpOpen("removeIntegration", {
id: slackIntegration.id,
slug: slackIntegration.slug,
platform: WorkflowIntegrationPlatform.SLACK
id: workflowIntegration.id,
slug: workflowIntegration.slug,
platform: workflowIntegration.integration
});
}}
>