InstalledIntegrations.tsx39 lines · main

1	import { IntegrationCard, IntegrationLoadingCard } from './IntegrationCard'
2	import { useInstalledIntegrations } from './useInstalledIntegrations'
3	import AlertError from '@/components/ui/AlertError'
4
5	export const InstalledIntegrations = () => {
6	const { installedIntegrations, error, isLoading, isSuccess, isError } = useInstalledIntegrations()
7
8	return (
9	<div className="px-4 md:px-10 py-6 flex flex-col gap-y-5">
10	<h2>Installed integrations</h2>
11	<div className="grid xl:grid-cols-3 2xl:grid-cols-4 gap-x-4 gap-y-3">
12	{isLoading &&
13	new Array(3)
14	.fill(0)
15	.map((_, idx) => <IntegrationLoadingCard key={`integration-loading-${idx}`} />)}
16	{isError && (
17	<AlertError
18	className="xl:col-span-3 2xl:col-span-4"
19	subject="Failed to retrieve installed integrations"
20	error={error}
21	/>
22	)}
23	{isSuccess && (
24	<>
25	{installedIntegrations.length === 0 ? (
26	<div className="xl:col-span-3 2xl:col-span-4 w-full h-[110px] border rounded-sm flex items-center justify-center">
27	{/* [Joshen] Not high priority imo - very low chance this state will be seen cause Vault is always installed */}
28	{/* Some placeholder image when no integrations are installed */}
29	<p className="text-sm text-foreground-light">No integrations installed yet</p>
30	</div>
31	) : (
32	installedIntegrations.map((i) => <IntegrationCard key={i.id} {...i} />)
33	)}
34	</>
35	)}
36	</div>
37	</div>
38	)
39	}