Skip to content

Commit 9d5cf03

Browse files
SaxonFCopilotjoshenlim
authored
Integration page components (supabase#41093)
* integration page components * Remove unnecessary component check Co-authored-by: Copilot <[email protected]> * Minor clean up * Fit --------- Co-authored-by: Copilot <[email protected]> Co-authored-by: Joshen Lim <[email protected]>
1 parent 16e03f0 commit 9d5cf03

File tree

6 files changed

+306
-180
lines changed

6 files changed

+306
-180
lines changed

‎apps/studio/components/interfaces/Integrations/CronJobs/CronJobPage.tsx‎

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,16 @@ import { useRouter } from 'next/router'
55
import { useState } from 'react'
66

77
import { useParams } from 'common'
8-
import { NavigationItem, PageLayout } from 'components/layouts/PageLayout/PageLayout'
98
import { useCronJobQuery } from 'data/database-cron-jobs/database-cron-job-query'
109
import { useEdgeFunctionsQuery } from 'data/edge-functions/edge-functions-query'
1110
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
1211
import { useConfirmOnClose, type ConfirmOnCloseModalProps } from 'hooks/ui/useConfirmOnClose'
1312
import {
13+
BreadcrumbItem_Shadcn_ as BreadcrumbItem,
14+
BreadcrumbLink_Shadcn_ as BreadcrumbLink,
15+
BreadcrumbList_Shadcn_ as BreadcrumbList,
16+
BreadcrumbPage_Shadcn_ as BreadcrumbPage,
17+
BreadcrumbSeparator_Shadcn_ as BreadcrumbSeparator,
1418
Button,
1519
cn,
1620
CodeBlock,
@@ -21,6 +25,15 @@ import {
2125
TooltipTrigger,
2226
} from 'ui'
2327
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
28+
import {
29+
PageHeader,
30+
PageHeaderAside,
31+
PageHeaderBreadcrumb,
32+
PageHeaderDescription,
33+
PageHeaderMeta,
34+
PageHeaderSummary,
35+
PageHeaderTitle,
36+
} from 'ui-patterns/PageHeader'
2437
import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
2538
import { CreateCronJobSheet } from './CreateCronJobSheet/CreateCronJobSheet'
2639
import { isSecondsFormat, parseCronJobCommand } from './CronJobs.utils'
@@ -60,24 +73,6 @@ export const CronJobPage = () => {
6073
},
6174
})
6275

63-
const breadcrumbItems = [
64-
{
65-
label: 'Integrations',
66-
href: `/project/${ref}/integrations`,
67-
},
68-
{
69-
label: 'Cron',
70-
href: pageId
71-
? `/project/${ref}/integrations/${id}/${pageId}`
72-
: `/project/${ref}/integrations/${id}`,
73-
},
74-
{
75-
label: childLabel ?? job?.jobname ?? '',
76-
},
77-
]
78-
79-
const navigationItems: NavigationItem[] = []
80-
8176
const pageTitle = childLabel || childId || 'Cron Job'
8277

8378
const pageSubtitle = job ? (
@@ -164,17 +159,37 @@ export const CronJobPage = () => {
164159

165160
return (
166161
<>
167-
<PageLayout
168-
title={pageTitle}
169-
size="full"
170-
breadcrumbs={breadcrumbItems}
171-
navigationItems={navigationItems}
172-
secondaryActions={secondaryActions}
173-
subtitle={isLoading ? <ShimmeringLoader className="py-0 h-[20px] w-96" /> : pageSubtitle}
174-
className="border-b-0"
175-
>
176-
<PreviousRunsTab />
177-
</PageLayout>
162+
<PageHeader size="full" className="pb-6">
163+
<PageHeaderBreadcrumb>
164+
<BreadcrumbList>
165+
<BreadcrumbItem>
166+
<BreadcrumbLink asChild>
167+
<Link href={`/project/${ref}/integrations`}>Integrations</Link>
168+
</BreadcrumbLink>
169+
</BreadcrumbItem>
170+
<BreadcrumbSeparator />
171+
<BreadcrumbItem>
172+
<BreadcrumbLink asChild>
173+
<Link href={`/project/${ref}/integrations/${id}/${pageId}`}>Cron</Link>
174+
</BreadcrumbLink>
175+
</BreadcrumbItem>
176+
<BreadcrumbSeparator />
177+
<BreadcrumbItem>
178+
<BreadcrumbPage>{childLabel ?? job?.jobname ?? 'Cron Job'}</BreadcrumbPage>
179+
</BreadcrumbItem>
180+
</BreadcrumbList>
181+
</PageHeaderBreadcrumb>
182+
<PageHeaderMeta>
183+
<PageHeaderSummary>
184+
<PageHeaderTitle>{pageTitle}</PageHeaderTitle>
185+
<PageHeaderDescription>
186+
{isLoading ? <ShimmeringLoader className="py-0 h-[20px] w-96" /> : pageSubtitle}
187+
</PageHeaderDescription>
188+
</PageHeaderSummary>
189+
{secondaryActions.length > 0 && <PageHeaderAside>{secondaryActions}</PageHeaderAside>}
190+
</PageHeaderMeta>
191+
</PageHeader>
192+
<PreviousRunsTab />
178193

179194
<Sheet open={isEditSheetOpen} onOpenChange={setIsEditSheetOpen}>
180195
<SheetContent size="lg">

‎apps/studio/components/interfaces/Integrations/Queues/QueuePage.tsx‎

Lines changed: 54 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,26 @@
11
import dayjs from 'dayjs'
2+
import Link from 'next/link'
23
import { useRouter } from 'next/router'
34

45
import { useParams } from 'common'
5-
import { NavigationItem, PageLayout } from 'components/layouts/PageLayout/PageLayout'
66
import { useQueuesQuery } from 'data/database-queues/database-queues-query'
77
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
88
import { DATETIME_FORMAT } from 'lib/constants'
9+
import {
10+
BreadcrumbItem_Shadcn_ as BreadcrumbItem,
11+
BreadcrumbLink_Shadcn_ as BreadcrumbLink,
12+
BreadcrumbList_Shadcn_ as BreadcrumbList,
13+
BreadcrumbPage_Shadcn_ as BreadcrumbPage,
14+
BreadcrumbSeparator_Shadcn_ as BreadcrumbSeparator,
15+
} from 'ui'
16+
import {
17+
PageHeader,
18+
PageHeaderBreadcrumb,
19+
PageHeaderDescription,
20+
PageHeaderMeta,
21+
PageHeaderSummary,
22+
PageHeaderTitle,
23+
} from 'ui-patterns/PageHeader'
924
import { QueueTab } from './QueueTab'
1025

1126
export const QueuePage = () => {
@@ -21,24 +36,6 @@ export const QueuePage = () => {
2136

2237
const currentQueue = queues?.find((queue) => queue.queue_name === childId)
2338

24-
const breadcrumbItems = [
25-
{
26-
label: 'Integrations',
27-
href: `/project/${ref}/integrations`,
28-
},
29-
{
30-
label: 'Queues',
31-
href: pageId
32-
? `/project/${ref}/integrations/${id}/${pageId}`
33-
: `/project/${ref}/integrations/${id}`,
34-
},
35-
{
36-
label: childId,
37-
},
38-
]
39-
40-
const navigationItems: NavigationItem[] = []
41-
4239
const pageTitle = childLabel || childId || 'Queue'
4340

4441
const getQueueType = (queue: typeof currentQueue) => {
@@ -51,14 +48,44 @@ export const QueuePage = () => {
5148
: undefined
5249

5350
return (
54-
<PageLayout
55-
title={pageTitle}
56-
subtitle={pageSubtitle}
57-
size="full"
58-
breadcrumbs={breadcrumbItems}
59-
navigationItems={navigationItems}
60-
>
51+
<>
52+
<PageHeader size="full" className="pb-6">
53+
<PageHeaderBreadcrumb>
54+
<BreadcrumbList>
55+
<BreadcrumbItem>
56+
<BreadcrumbLink asChild>
57+
<Link href={`/project/${ref}/integrations`}>Integrations</Link>
58+
</BreadcrumbLink>
59+
</BreadcrumbItem>
60+
<BreadcrumbSeparator />
61+
<BreadcrumbItem>
62+
<BreadcrumbLink asChild>
63+
<Link
64+
href={
65+
pageId
66+
? `/project/${ref}/integrations/${id}/${pageId}`
67+
: `/project/${ref}/integrations/${id}`
68+
}
69+
>
70+
Queues
71+
</Link>
72+
</BreadcrumbLink>
73+
</BreadcrumbItem>
74+
<BreadcrumbSeparator />
75+
<BreadcrumbItem>
76+
<BreadcrumbPage>{childId}</BreadcrumbPage>
77+
</BreadcrumbItem>
78+
</BreadcrumbList>
79+
</PageHeaderBreadcrumb>
80+
<PageHeaderMeta>
81+
<PageHeaderSummary>
82+
<PageHeaderTitle>{pageTitle}</PageHeaderTitle>
83+
{pageSubtitle && <PageHeaderDescription>{pageSubtitle}</PageHeaderDescription>}
84+
</PageHeaderSummary>
85+
</PageHeaderMeta>
86+
</PageHeader>
87+
6188
<QueueTab />
62-
</PageLayout>
89+
</>
6390
)
6491
}

‎apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/[childId]/index.tsx‎

Lines changed: 36 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,23 @@
1+
import { useRouter } from 'next/router'
2+
import { useEffect, useMemo } from 'react'
3+
14
import { useParams } from 'common'
25
import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integrations.constants'
36
import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
4-
import DefaultLayout from 'components/layouts/DefaultLayout'
7+
import { DefaultLayout } from 'components/layouts/DefaultLayout'
58
import IntegrationsLayout from 'components/layouts/Integrations/layout'
6-
import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
7-
import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
89
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
9-
import { useRouter } from 'next/compat/router'
10-
import { useEffect, useMemo } from 'react'
1110
import type { NextPageWithLayout } from 'types'
1211
import { Admonition } from 'ui-patterns'
12+
import { PageContainer } from 'ui-patterns/PageContainer'
13+
import {
14+
PageHeader,
15+
PageHeaderDescription,
16+
PageHeaderMeta,
17+
PageHeaderSummary,
18+
PageHeaderTitle,
19+
} from 'ui-patterns/PageHeader'
20+
import { PageSection, PageSectionContent } from 'ui-patterns/PageSection'
1321

1422
const IntegrationPage: NextPageWithLayout = () => {
1523
const router = useRouter()
@@ -49,27 +57,35 @@ const IntegrationPage: NextPageWithLayout = () => {
4957
const content = useMemo(() => {
5058
if (!router?.isReady || isIntegrationsLoading) {
5159
return (
52-
<ScaffoldContainer size="full">
53-
<ScaffoldSection isFullWidth>
54-
<GenericSkeletonLoader />
55-
</ScaffoldSection>
56-
</ScaffoldContainer>
60+
<PageContainer size="full">
61+
<PageSection>
62+
<PageSectionContent>
63+
<GenericSkeletonLoader />
64+
</PageSectionContent>
65+
</PageSection>
66+
</PageContainer>
5767
)
5868
} else if (!Component || !id || !integration) {
5969
return (
60-
<PageLayout
61-
title="Integration not found"
62-
subtitle="If you think this is an error, please contact support"
63-
size="full"
64-
>
65-
<ScaffoldContainer size="full">
66-
<ScaffoldSection isFullWidth>
70+
<PageContainer size="full">
71+
<PageHeader size="full">
72+
<PageHeaderMeta>
73+
<PageHeaderSummary>
74+
<PageHeaderTitle>Integration not found</PageHeaderTitle>
75+
<PageHeaderDescription>
76+
If you think this is an error, please contact support.
77+
</PageHeaderDescription>
78+
</PageHeaderSummary>
79+
</PageHeaderMeta>
80+
</PageHeader>
81+
<PageSection>
82+
<PageSectionContent>
6783
<Admonition type="warning" title="This integration is not currently available">
6884
Please try again later or contact support if the problem persists.
6985
</Admonition>
70-
</ScaffoldSection>
71-
</ScaffoldContainer>
72-
</PageLayout>
86+
</PageSectionContent>
87+
</PageSection>
88+
</PageContainer>
7389
)
7490
} else {
7591
return <Component />

0 commit comments

Comments
 (0)