LegacyIntegrationPage.tsx143 lines · main

1	import Link from 'next/link'
2	import { useMemo } from 'react'
3	import {
4	BreadcrumbItem,
5	BreadcrumbLink,
6	BreadcrumbList,
7	BreadcrumbPage,
8	BreadcrumbSeparator,
9	NavMenu,
10	NavMenuItem,
11	} from 'ui'
12	import {
13	Admonition,
14	PageContainer,
15	PageHeader,
16	PageHeaderBreadcrumb,
17	PageHeaderDescription,
18	PageHeaderIcon,
19	PageHeaderMeta,
20	PageHeaderNavigationTabs,
21	PageHeaderSummary,
22	PageHeaderTitle,
23	PageSection,
24	PageSectionContent,
25	} from 'ui-patterns'
26	import ShimmeringLoader, { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
27
28	import { IntegrationLogo } from '@/components/interfaces/Integrations/Integration/IntegrationLogo'
29	import { InstallOAuthIntegrationButton } from '@/components/interfaces/Integrations/Integration/IntegrationOverviewTabV2/InstallIntegrationSheet/InstallOAuthIntegrationButton'
30	import { useIntegrationDetail } from '@/components/interfaces/Integrations/Landing/useIntegrationDetail'
31	import { UnknownInterface } from '@/components/ui/UnknownInterface'
32
33	const LegacyIntegrationPage = () => {
34	const {
35	ref,
36	id,
37	isReady,
38	isWrapperBlocked,
39	pageTitle,
40	pageSubTitle,
41	integration,
42	isAvailableLoading,
43	isInstalledLoading,
44	tabs,
45	Component,
46	} = useIntegrationDetail()
47
48	const content = useMemo(() => {
49	if (!isReady || isInstalledLoading || isAvailableLoading) {
50	return (
51	<PageContainer size="full">
52	<PageSection>
53	<PageSectionContent>
54	<GenericSkeletonLoader />
55	</PageSectionContent>
56	</PageSection>
57	</PageContainer>
58	)
59	} else if (!Component || !id || !integration) {
60	return (
61	<PageContainer size="full">
62	<PageSection>
63	<PageSectionContent>
64	<Admonition type="warning" title="This integration is not currently available">
65	Please try again later or contact support if the problem persists.
66	</Admonition>
67	</PageSectionContent>
68	</PageSection>
69	</PageContainer>
70	)
71	} else {
72	return <Component />
73	}
74	}, [isReady, isInstalledLoading, isAvailableLoading, id, integration, Component])
75
76	if (!isReady) return null
77	if (isWrapperBlocked) return <UnknownInterface urlBack={`/project/${ref}/integrations`} />
78
79	return (
80	<>
81	<PageHeader size="full">
82	<PageHeaderBreadcrumb className="mx-auto w-full">
83	<BreadcrumbList>
84	<BreadcrumbItem>
85	<BreadcrumbLink asChild>
86	<Link href={`/project/${ref}/integrations`}>Integrations</Link>
87	</BreadcrumbLink>
88	</BreadcrumbItem>
89	<BreadcrumbSeparator />
90	<BreadcrumbItem>
91	<BreadcrumbPage>{integration?.name || 'Integration not found'}</BreadcrumbPage>
92	</BreadcrumbItem>
93	</BreadcrumbList>
94	</PageHeaderBreadcrumb>
95
96	{isAvailableLoading ? (
97	<PageHeaderMeta className="mx-auto w-full">
98	<PageHeaderSummary>
99	<PageHeaderTitle>
100	<ShimmeringLoader className="w-64 py-4" />
101	</PageHeaderTitle>
102	<PageHeaderDescription>
103	<ShimmeringLoader />
104	</PageHeaderDescription>
105	</PageHeaderSummary>
106	</PageHeaderMeta>
107	) : (
108	<PageHeaderMeta className="mx-auto w-full">
109	{integration && (
110	<PageHeaderIcon>
111	<IntegrationLogo integration={integration} size="w-14 h-14" />
112	</PageHeaderIcon>
113	)}
114	<PageHeaderSummary className="gap-y-0.5">
115	<PageHeaderTitle>{pageTitle}</PageHeaderTitle>
116	<PageHeaderDescription>{pageSubTitle}</PageHeaderDescription>
117	</PageHeaderSummary>
118
119	{integration?.type === 'oauth' && (
120	<InstallOAuthIntegrationButton integration={integration} />
121	)}
122	</PageHeaderMeta>
123	)}
124
125	{tabs.length > 0 && (
126	<PageHeaderNavigationTabs className="mx-auto w-full">
127	<NavMenu>
128	{tabs.map((tab) => (
129	<NavMenuItem key={tab.href} active={tab.active}>
130	<Link href={tab.href}>{tab.label}</Link>
131	</NavMenuItem>
132	))}
133	</NavMenu>
134	</PageHeaderNavigationTabs>
135	)}
136	</PageHeader>
137
138	<div className="mx-auto w-full">{content}</div>
139	</>
140	)
141	}
142
143	export default LegacyIntegrationPage