-
-
-
{name}
- {status && (
-
- {status}
+ if (featured) {
+ return (
+
+
+ {/* Full-width image/icon at the top */}
+
+ {image ? (
+
+ ) : (
+
+ {icon({ className: 'w-full h-full text-foreground' })}
+
+ )}
+
+
{name}
+
{description}
+
+ {status && (
+
+ {status}
+
+ )}
+
+ Official
- )}
+
+
+
+ {icon()}
-
{description}
-
-
- Official
-
{isInstalled && (
-
- Installed
+
+ Installed
)}
-
+
+
{name}
+
+
{description}
+
+ {status && (
+
+ {status}
+
+ )}
+
+ Official
+
+
+
+
+
)
}
diff --git a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
index 528a6438755e4..2e10655b7f4d8 100644
--- a/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
+++ b/apps/studio/components/interfaces/Integrations/Landing/Integrations.constants.tsx
@@ -87,7 +87,7 @@ const supabaseIntegrations: IntegrationDefinition[] = [
],
navigate: (id: string, pageId: string = 'overview', childId: string | undefined) => {
if (childId) {
- return dynamic(() => import('../Queues/QueueTab').then((mod) => mod.QueueTab), {
+ return dynamic(() => import('../Queues/QueuePage').then((mod) => mod.QueuePage), {
loading: Loading,
})
}
@@ -121,7 +121,7 @@ const supabaseIntegrations: IntegrationDefinition[] = [
icon: ({ className, ...props } = {}) => (
),
- description: 'Schedule recurring Jobs in Postgres.',
+ description: 'Schedule recurring Jobs in Postgres',
docsUrl: 'https://github.com/citusdata/pg_cron',
author: {
name: 'Citus Data',
@@ -143,12 +143,9 @@ const supabaseIntegrations: IntegrationDefinition[] = [
],
navigate: (id: string, pageId: string = 'overview', childId: string | undefined) => {
if (childId) {
- return dynamic(
- () => import('../CronJobs/PreviousRunsTab').then((mod) => mod.PreviousRunsTab),
- {
- loading: Loading,
- }
- )
+ return dynamic(() => import('../CronJobs/CronJobPage').then((mod) => mod.CronJobPage), {
+ loading: Loading,
+ })
}
switch (pageId) {
case 'overview':
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx
new file mode 100644
index 0000000000000..a8d5179608433
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueueCells.tsx
@@ -0,0 +1,87 @@
+import dayjs from 'dayjs'
+import { Check, Loader2, X } from 'lucide-react'
+
+import { useQueuesMetricsQuery } from 'data/database-queues/database-queues-metrics-query'
+import { PostgresQueue } from 'data/database-queues/database-queues-query'
+import { useTablesQuery } from 'data/tables/tables-query'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { DATETIME_FORMAT } from 'lib/constants'
+
+export interface QueueWithMetrics extends PostgresQueue {
+ id: string // Add unique id for DataGrid
+}
+
+interface QueueCellProps {
+ queue: QueueWithMetrics
+}
+
+export const QueueNameCell = ({ queue }: QueueCellProps) => (
+
+
+ {queue.queue_name}
+
+
+)
+
+export const QueueTypeCell = ({ queue }: QueueCellProps) => {
+ const type = queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic'
+ return (
+
+
+ {type}
+
+
+ )
+}
+
+export const QueueRLSCell = ({ queue }: QueueCellProps) => {
+ const { data: selectedProject } = useSelectedProjectQuery()
+
+ const { data: queueTables } = useTablesQuery({
+ projectRef: selectedProject?.ref,
+ connectionString: selectedProject?.connectionString,
+ schema: 'pgmq',
+ })
+
+ const queueTable = queueTables?.find((x) => x.name === `q_${queue.queue_name}`)
+ const isRlsEnabled = !!queueTable?.rls_enabled
+
+ return (
+
+ {isRlsEnabled ? : }
+
+ )
+}
+
+export const QueueCreatedAtCell = ({ queue }: QueueCellProps) => (
+
+ {dayjs(queue.created_at).format(DATETIME_FORMAT)}
+
+)
+
+export const QueueSizeCell = ({ queue }: QueueCellProps) => {
+ const { data: selectedProject } = useSelectedProjectQuery()
+
+ const { data: metrics, isLoading } = useQueuesMetricsQuery(
+ {
+ queueName: queue.queue_name,
+ projectRef: selectedProject?.ref,
+ connectionString: selectedProject?.connectionString,
+ },
+ {
+ staleTime: 30 * 1000, // 30 seconds
+ }
+ )
+
+ return (
+
+ {isLoading ? (
+
+ ) : (
+
+ {metrics?.queue_length} {metrics?.method === 'estimated' ? '(Approximate)' : null}
+
+ )}
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuePage.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuePage.tsx
new file mode 100644
index 0000000000000..c015278f8bb5d
--- /dev/null
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuePage.tsx
@@ -0,0 +1,64 @@
+import dayjs from 'dayjs'
+import { useRouter } from 'next/router'
+
+import { useParams } from 'common'
+import { NavigationItem, PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { useQueuesQuery } from 'data/database-queues/database-queues-query'
+import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
+import { DATETIME_FORMAT } from 'lib/constants'
+import { QueueTab } from './QueueTab'
+
+export const QueuePage = () => {
+ const router = useRouter()
+ const { ref, id, pageId, childId } = useParams()
+ const childLabel = router?.query?.['child-label'] as string
+ const { data: project } = useSelectedProjectQuery()
+
+ const { data: queues } = useQueuesQuery({
+ projectRef: project?.ref,
+ connectionString: project?.connectionString,
+ })
+
+ const currentQueue = queues?.find((queue) => queue.queue_name === childId)
+
+ const breadcrumbItems = [
+ {
+ label: 'Integrations',
+ href: `/project/${ref}/integrations`,
+ },
+ {
+ label: 'Queues',
+ href: pageId
+ ? `/project/${ref}/integrations/${id}/${pageId}`
+ : `/project/${ref}/integrations/${id}`,
+ },
+ {
+ label: childId,
+ },
+ ]
+
+ const navigationItems: NavigationItem[] = []
+
+ const pageTitle = childLabel || childId || 'Queue'
+
+ const getQueueType = (queue: typeof currentQueue) => {
+ if (!queue) return 'Unknown'
+ return queue.is_partitioned ? 'Partitioned' : queue.is_unlogged ? 'Unlogged' : 'Basic'
+ }
+
+ const pageSubtitle = currentQueue
+ ? `${getQueueType(currentQueue)} queue created on ${dayjs(currentQueue.created_at).format(DATETIME_FORMAT)}`
+ : undefined
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
index f595ec0faa0b4..fe207c0c946a4 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueueTab.tsx
@@ -4,8 +4,8 @@ import { useMemo, useState } from 'react'
import { toast } from 'sonner'
import { useParams } from 'common'
-import DeleteQueue from 'components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue'
-import PurgeQueue from 'components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue'
+import { DeleteQueue } from 'components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue'
+import { PurgeQueue } from 'components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue'
import { QUEUE_MESSAGE_TYPE } from 'components/interfaces/Integrations/Queues/SingleQueue/Queue.utils'
import { QueueMessagesDataGrid } from 'components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid'
import { QueueFilters } from 'components/interfaces/Integrations/Queues/SingleQueue/QueueFilters'
@@ -100,7 +100,8 @@ export const QueueTab = () => {
return (
-
+
+
@@ -238,8 +239,8 @@ You may opt to manage your queues via any Supabase client libraries or PostgREST
-
+
[] => {
+ return [
+ {
+ key: 'queue_name',
+ name: 'Name',
+ resizable: true,
+ minWidth: 200,
+ headerCellClass: undefined,
+ renderHeaderCell: () => {
+ return (
+
+ )
+ },
+ renderCell: (props) => {
+ return
+ },
+ },
+ {
+ key: 'type',
+ name: 'Type',
+ resizable: true,
+ minWidth: 120,
+ headerCellClass: undefined,
+ renderHeaderCell: () => {
+ return (
+
+ )
+ },
+ renderCell: (props) => {
+ return
+ },
+ },
+ {
+ key: 'rls_enabled',
+ name: 'RLS enabled',
+ resizable: true,
+ minWidth: 120,
+ headerCellClass: undefined,
+ renderHeaderCell: () => {
+ return (
+
+ )
+ },
+ renderCell: (props) => {
+ return
+ },
+ },
+ {
+ key: 'created_at',
+ name: 'Created at',
+ resizable: true,
+ minWidth: 180,
+ headerCellClass: undefined,
+ renderHeaderCell: () => {
+ return (
+
+ )
+ },
+ renderCell: (props) => {
+ return
+ },
+ },
+ {
+ key: 'queue_size',
+ name: 'Size',
+ resizable: true,
+ minWidth: 120,
+ headerCellClass: undefined,
+ renderHeaderCell: () => {
+ return (
+
+ )
+ },
+ renderCell: (props) => {
+ return
+ },
+ },
+ ]
+}
+
+export const prepareQueuesForDataGrid = (queues: PostgresQueue[]): QueueWithMetrics[] => {
+ return queues.map((queue) => ({
+ ...queue,
+ id: queue.queue_name, // Use queue_name as unique id
+ }))
+}
diff --git a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
index f3be8b1f7823c..60ffde22d84c3 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/QueuesTab.tsx
@@ -1,19 +1,27 @@
-import { Search } from 'lucide-react'
-import { useQueryState } from 'nuqs'
-import { useState } from 'react'
+import { RefreshCw, Search, X } from 'lucide-react'
+import { useRouter } from 'next/router'
+import { parseAsString, useQueryState } from 'nuqs'
+import { useMemo, useState } from 'react'
+import DataGrid, { Row } from 'react-data-grid'
-import Table from 'components/to-be-cleaned/Table'
+import { useParams } from 'common'
import AlertError from 'components/ui/AlertError'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import { useQueuesQuery } from 'data/database-queues/database-queues-query'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { Button, Input, Sheet, SheetContent } from 'ui'
+import { Button, cn, LoadingLine, Sheet, SheetContent } from 'ui'
+import { Input } from 'ui-patterns/DataInputs/Input'
import { CreateQueueSheet } from './CreateQueueSheet'
-import { QueuesRows } from './QueuesRows'
+import { formatQueueColumns, prepareQueuesForDataGrid } from './Queues.utils'
export const QueuesTab = () => {
+ const router = useRouter()
+ const { ref } = useParams()
const { data: project } = useSelectedProjectQuery()
+ const [searchQuery, setSearchQuery] = useQueryState('search', parseAsString.withDefault(''))
+ const [search, setSearch] = useState(searchQuery)
+
// used for confirmation prompt in the Create Queue Sheet
const [isClosingCreateQueueSheet, setIsClosingCreateQueueSheet] = useState(false)
const [createQueueSheetShown, setCreateQueueSheetShown] = useState(false)
@@ -23,77 +31,135 @@ export const QueuesTab = () => {
error,
isLoading,
isError,
+ isRefetching,
+ refetch,
} = useQueuesQuery({
projectRef: project?.ref,
connectionString: project?.connectionString,
})
- const [searchQuery, setSearchQuery] = useQueryState('search')
-
- if (isLoading)
- return (
-
-
-
- )
- if (isError)
- return (
-
+ // Filter queues based on search query
+ const filteredQueues = useMemo(() => {
+ if (!queues) return []
+ if (!searchQuery) return queues
+ return queues.filter((queue) =>
+ queue.queue_name.toLowerCase().includes(searchQuery.toLowerCase())
)
+ }, [queues, searchQuery])
+
+ // Prepare queues for DataGrid
+ const queueData = useMemo(() => prepareQueuesForDataGrid(filteredQueues), [filteredQueues])
+
+ // Get columns configuration
+ const columns = useMemo(() => formatQueueColumns(), [])
return (
<>
-
- {queues.length === 0 ? (
-
-
No queues created yet
-
-
- ) : (
-
-
-
}
- value={searchQuery || ''}
- className="w-64"
- onChange={(e) => setSearchQuery(e.target.value)}
- />
+
+
+
+
}
+ value={search ?? ''}
+ onChange={(e) => setSearch(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.code === 'Enter') setSearchQuery(search.trim())
+ }}
+ actions={[
+ search && (
+
}
+ onClick={() => {
+ setSearch('')
+ setSearchQuery('')
+ }}
+ className="p-0 h-5 w-5"
+ />
+ ),
+ ]}
+ />
-
+
+ }
+ loading={isRefetching}
+ onClick={() => refetch()}
+ >
+ Refresh
+
+
+
-
- Name
-
- Type
-
-
- RLS enabled
-
-
- Created at
-
-
- Size
-
-
-
- }
- body={}
- />
+
+
+ row.id}
+ rowClass={() => {
+ return cn(
+ 'cursor-pointer',
+ '[&>.rdg-cell]:border-box [&>.rdg-cell]:outline-none [&>.rdg-cell]:shadow-none',
+ '[&>.rdg-cell:first-child>div]:ml-8'
+ )
+ }}
+ renderers={{
+ renderRow(_, props) {
+ return (
+ {
+ const { queue_name } = props.row
+ const url = `/project/${ref}/integrations/queues/queues/${queue_name}`
+ router.push(url)
+ }}
+ />
+ )
+ },
+ }}
+ />
+
+ {/* Render 0 rows state outside of the grid */}
+ {queueData.length === 0 ? (
+ isLoading ? (
+
+
+
+ ) : isError ? (
+
+ ) : (
+
+
+
+ {!!searchQuery ? 'No queues found' : 'No queues created yet'}
+
+
+ {!!searchQuery
+ ? 'There are currently no queues based on the search applied'
+ : 'There are currently no queues created yet in your project'}
+
+
+
+ {`Total: ${queueData.length} queues`}
- )}
+
setIsClosingCreateQueueSheet(true)}>
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx
index f572987e5ee33..e953d0b49ed05 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/DeleteQueue.tsx
@@ -11,7 +11,7 @@ interface DeleteQueueProps {
onClose: () => void
}
-const DeleteQueue = ({ queueName, visible, onClose }: DeleteQueueProps) => {
+export const DeleteQueue = ({ queueName, visible, onClose }: DeleteQueueProps) => {
const router = useRouter()
const { data: project } = useSelectedProjectQuery()
@@ -58,5 +58,3 @@ const DeleteQueue = ({ queueName, visible, onClose }: DeleteQueueProps) => {
/>
)
}
-
-export default DeleteQueue
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx
index b7c9ad924a9af..d6f757d3e2ee7 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/PurgeQueue.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from 'next/router'
import { toast } from 'sonner'
import { useDatabaseQueuePurgeMutation } from 'data/database-queues/database-queues-purge-mutation'
@@ -11,14 +10,12 @@ interface PurgeQueueProps {
onClose: () => void
}
-const PurgeQueue = ({ queueName, visible, onClose }: PurgeQueueProps) => {
- const router = useRouter()
+export const PurgeQueue = ({ queueName, visible, onClose }: PurgeQueueProps) => {
const { data: project } = useSelectedProjectQuery()
const { mutate: purgeDatabaseQueue, isLoading } = useDatabaseQueuePurgeMutation({
onSuccess: () => {
toast.success(`Successfully purged queue ${queueName}`)
- router.push(`/project/${project?.ref}/integrations/queues`)
onClose()
},
})
@@ -61,5 +58,3 @@ const PurgeQueue = ({ queueName, visible, onClose }: PurgeQueueProps) => {
/>
)
}
-
-export default PurgeQueue
diff --git a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
index cb57532557c00..c57020fd0c732 100644
--- a/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
+++ b/apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx
@@ -5,12 +5,12 @@ import { parseAsInteger, useQueryState } from 'nuqs'
import { UIEvent, useMemo, useRef } from 'react'
import DataGrid, { Column, DataGridHandle, Row } from 'react-data-grid'
+import AlertError from 'components/ui/AlertError'
import { PostgresQueueMessage } from 'data/database-queues/database-queue-messages-infinite-query'
+import { ResponseError } from 'types'
import { Badge, Button, ResizableHandle, ResizablePanel, ResizablePanelGroup, cn } from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns/ShimmeringLoader'
import { DATE_FORMAT, MessageDetailsPanel } from './MessageDetailsPanel'
-import { ResponseError } from 'types'
-import AlertError from 'components/ui/AlertError'
interface QueueDataGridProps {
error?: ResponseError | null
@@ -60,14 +60,20 @@ const messagesCols = [
if (row.archived_at) {
return (
- Archived at {dayjs(row.archived_at).format(DATE_FORMAT)}
+
+
+ Archived at {dayjs(row.archived_at).format(DATE_FORMAT)}
+
+
)
}
return (
-
- {isAvailable ? 'Available ' : `Available at ${dayjs(row.vt).format(DATE_FORMAT)}`}
-
+
+
+ {isAvailable ? 'Available ' : `Available at ${dayjs(row.vt).format(DATE_FORMAT)}`}
+
+
)
},
},
@@ -77,14 +83,22 @@ const messagesCols = [
description: undefined,
minWidth: 50,
width: 70,
- value: (row: PostgresQueueMessage) => {row.read_ct},
+ value: (row: PostgresQueueMessage) => (
+
+ {row.read_ct}
+
+ ),
},
{
id: 'payload',
name: 'Payload',
description: undefined,
minWidth: 600,
- value: (row: PostgresQueueMessage) => {JSON.stringify(row.message)},
+ value: (row: PostgresQueueMessage) => (
+
+ {JSON.stringify(row.message)}
+
+ ),
},
]
@@ -95,31 +109,23 @@ const columns = messagesCols.map((col) => {
resizable: true,
minWidth: col.minWidth ?? 120,
width: col.width,
- headerCellClass: 'first:pl-6 cursor-pointer',
+ headerCellClass: undefined,
renderHeaderCell: () => {
- return (
-
-
-
{col.name}
- {col.description &&
{col.description}
}
-
-
-
- setSelectedTypes(value as any)}
- />
-
-
-
- {/* Container with animated padding */}
-
- {/* Navigation link back to integrations landing */}
-
- {/* Back arrow */}
-
- {!isIntegrationsHome && (
-
-
-
-
-
- )}
-
- {/* Two separate spans with the same key */}
- {isIntegrationsHome ? (
-
- Integrations
-
- ) : (
-
- Integrations
-
- )}
-
-
- {/* Integration details section - only shown when viewing a specific integration */}
-
- {!isIntegrationsHome && integration && (
-
- {/* Integration icon */}
-
- {integration.icon({
- style: {
- padding: iconPadding.get(),
- },
- })}
-
-
- {/* Integration name and description */}
-
-
-
- {integration.name}
- {integration.status && (
-
- {integration.status}
-
- )}
-
-
{integration.description}
-
-
-
- Installed integrations
+ Installed
}
/>
@@ -145,81 +102,7 @@ const IntegrationTopHeaderLayout = ({ ...props }: PropsWithChildren) => {
}
>
-
-
- {props.children}
-
- )
-}
-
-const IntegrationsLayoutSide = ({ ...props }: PropsWithChildren) => {
- const router = useRouter()
- const page = router.pathname.split('/')[4]
- const { data: project } = useSelectedProjectQuery()
-
- const {
- installedIntegrations: integrations,
- error,
- isLoading,
- isError,
- isSuccess,
- } = useInstalledIntegrations()
- const installedIntegrationItems = integrations.map((integration) => ({
- name: integration.name,
- label: integration.status,
- key: `integrations/${integration.id}`,
- url: `/project/${project?.ref}/integrations/${integration.id}/overview`,
- icon: (
-
- {integration.icon({ className: 'p-1' })}
-
- ),
- items: [],
- }))
-
- return (
-
-
-
-
-
- Installed integrations
-
- {installedIntegrationItems.map((item) => (
-
- ))}
-
-
- {isSticky && (
-
- {integration?.icon({
- style: { padding: iconPadding.get() },
- })}
-
- )}
-
- {tabs.map((tab) => {
- const tabUrl = `/project/${project?.ref}/integrations/${integration?.id}/${tab.route}`
- return (
-
-
- {tab.label}
-
-
-
- {tab.hasChild && childId && (
- <>
-
-
-
-
-
- {tab.childIcon}
-
- {childLabel ? childLabel : childId}
-
-
-
-
- )}
-
-
-
-
-
- )
- }
-
- if (!id || !integration) {
- return Integration not found
- }
-
- if (!Component) return Component not found
+ // Determine content based on state
+ const content = useMemo(() => {
+ if (!router?.isReady || isIntegrationsLoading) {
+ return (
+
+
+
+
+
+ )
+ } else if (!Component || !id || !integration) {
+ return (
+
+
+
+
+ Please try again later or contact support if the problem persists.
+
+
+
+
+ )
+ } else {
+ return
+ }
+ }, [router?.isReady, isIntegrationsLoading, id, integration, Component])
- return
+ return content
}
IntegrationPage.getLayout = (page) => (
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
index 91321e9afde90..b0eb70e5efe46 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/[pageId]/index.tsx
@@ -3,10 +3,13 @@ import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integra
import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
import DefaultLayout from 'components/layouts/DefaultLayout'
import IntegrationsLayout from 'components/layouts/Integrations/layout'
+import { PageLayout, NavigationItem } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import { useRouter } from 'next/compat/router'
import { useEffect, useMemo } from 'react'
import { NextPageWithLayout } from 'types'
+import { Admonition } from 'ui-patterns'
const IntegrationPage: NextPageWithLayout = () => {
const router = useRouter()
@@ -29,6 +32,36 @@ const IntegrationPage: NextPageWithLayout = () => {
[integration, id, pageId, childId]
)
+ // Create breadcrumb items
+ const breadcrumbItems = [
+ {
+ label: 'Integrations',
+ href: `/project/${ref}/integrations`,
+ },
+ {
+ label: integration?.name || 'Integration not found',
+ },
+ ]
+
+ // Create navigation items from integration navigation
+ const navigationItems: NavigationItem[] = useMemo(() => {
+ if (!integration?.navigation) return []
+
+ // Only show navigation if the integration is installed, or if we're on the overview page
+ const showNavigation = installation || pageId === 'overview'
+ if (!showNavigation) return []
+
+ const availableTabs = installation
+ ? integration.navigation
+ : integration.navigation.filter((tab) => tab.route === 'overview')
+
+ return availableTabs.map((nav) => ({
+ label: nav.label,
+ href: `/project/${ref}/integrations/${id}/${nav.route}`,
+ active: pageId === nav.route,
+ }))
+ }, [integration, ref, id, pageId, installation])
+
useEffect(() => {
// if the integration is not installed, redirect to the overview page
if (
@@ -42,21 +75,60 @@ const IntegrationPage: NextPageWithLayout = () => {
}
}, [installation, isIntegrationsLoading, pageId, router])
- if (!router?.isReady || isIntegrationsLoading) {
- return (
-
-
-
- )
- }
+ // Determine page title, icon, and subtitle based on state
+ const pageTitle = integration?.name || 'Integration not found'
- if (!id || !integration) {
- return Integration not found
- }
+ const pageSubTitle =
+ integration?.description || 'If you think this is an error, please contact support'
+
+ // Get integration icon and subtitle
+ const pageIcon = integration ? (
+
+ {integration.icon()}
+
+ ) : null
+
+ // Determine content based on state
+ const content = useMemo(() => {
+ if (!router?.isReady || isIntegrationsLoading) {
+ return (
+
+
+
+
+
+ )
+ } else if (!Component || !id || !integration) {
+ return (
+
+
+
+ Please try again later or contact support if the problem persists.
+
+
+
+ )
+ } else {
+ return
+ }
+ }, [router?.isReady, isIntegrationsLoading, id, integration, Component])
- if (!Component) return Component not found
+ if (!router?.isReady) {
+ return null
+ }
- return
+ return (
+
+ {content}
+
+ )
}
IntegrationPage.getLayout = (page) => (
diff --git a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
index 91321e9afde90..37e5f844e0da5 100644
--- a/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/[id]/index.tsx
@@ -1,62 +1,31 @@
import { useParams } from 'common'
-import { INTEGRATIONS } from 'components/interfaces/Integrations/Landing/Integrations.constants'
-import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
import DefaultLayout from 'components/layouts/DefaultLayout'
import IntegrationsLayout from 'components/layouts/Integrations/layout'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import { useRouter } from 'next/compat/router'
-import { useEffect, useMemo } from 'react'
+import { useEffect } from 'react'
import { NextPageWithLayout } from 'types'
const IntegrationPage: NextPageWithLayout = () => {
const router = useRouter()
- const { ref, id, pageId, childId } = useParams()
-
- const { installedIntegrations: installedIntegrations, isLoading: isIntegrationsLoading } =
- useInstalledIntegrations()
-
- // everything is wrapped in useMemo to avoid UI resets when installing additional extensions like pg_net
- const integration = useMemo(() => INTEGRATIONS.find((i) => i.id === id), [id])
-
- const installation = useMemo(
- () => installedIntegrations.find((inst) => inst.id === id),
- [installedIntegrations, id]
- )
-
- // Get the corresponding component dynamically
- const Component = useMemo(
- () => integration?.navigate(id!, pageId, childId),
- [integration, id, pageId, childId]
- )
+ const { ref, id } = useParams()
useEffect(() => {
- // if the integration is not installed, redirect to the overview page
- if (
- router &&
- router?.isReady &&
- !isIntegrationsLoading &&
- !installation &&
- pageId !== 'overview'
- ) {
+ // Always redirect to the overview page since this route should not render content
+ if (router?.isReady) {
router.replace(`/project/${ref}/integrations/${id}/overview`)
}
- }, [installation, isIntegrationsLoading, pageId, router])
+ }, [router, ref, id])
- if (!router?.isReady || isIntegrationsLoading) {
- return (
-
+ return (
+
+
-
- )
- }
-
- if (!id || !integration) {
- return Integration not found
- }
-
- if (!Component) return Component not found
-
- return
+
+
+ )
}
IntegrationPage.getLayout = (page) => (
diff --git a/apps/studio/pages/project/[ref]/integrations/index.tsx b/apps/studio/pages/project/[ref]/integrations/index.tsx
index 45364188a61e4..dcb1a512faaa2 100644
--- a/apps/studio/pages/project/[ref]/integrations/index.tsx
+++ b/apps/studio/pages/project/[ref]/integrations/index.tsx
@@ -1,16 +1,216 @@
-import { AvailableIntegrations } from 'components/interfaces/Integrations/Landing/AvailableIntegrations'
-import { InstalledIntegrations } from 'components/interfaces/Integrations/Landing/InstalledIntegrations'
+import { Search } from 'lucide-react'
+import { parseAsString, useQueryState } from 'nuqs'
+import { useMemo } from 'react'
+
+import {
+ IntegrationCard,
+ IntegrationLoadingCard,
+} from 'components/interfaces/Integrations/Landing/IntegrationCard'
+import { useInstalledIntegrations } from 'components/interfaces/Integrations/Landing/useInstalledIntegrations'
import DefaultLayout from 'components/layouts/DefaultLayout'
import IntegrationsLayout from 'components/layouts/Integrations/layout'
+import { PageLayout } from 'components/layouts/PageLayout/PageLayout'
+import { ScaffoldContainer, ScaffoldSection } from 'components/layouts/Scaffold'
+import AlertError from 'components/ui/AlertError'
+import { DocsButton } from 'components/ui/DocsButton'
+import NoSearchResults from 'components/ui/NoSearchResults'
import type { NextPageWithLayout } from 'types'
+import { Input } from 'ui-patterns/DataInputs/Input'
+
+const FEATURED_INTEGRATIONS = ['cron', 'queues', 'stripe_wrapper']
+
+// Featured integration images
+const FEATURED_INTEGRATION_IMAGES: Record = {
+ cron: 'img/integrations/covers/cron-cover.webp',
+ queues: 'img/integrations/covers/queues-cover.png',
+ stripe_wrapper: 'img/integrations/covers/stripe-cover.png',
+}
const IntegrationsPage: NextPageWithLayout = () => {
- return (
-
-
-
+ const [selectedCategory] = useQueryState(
+ 'category',
+ parseAsString.withDefault('all').withOptions({ clearOnDefault: true })
+ )
+ const [search, setSearch] = useQueryState(
+ 'search',
+ parseAsString.withDefault('').withOptions({ clearOnDefault: true })
+ )
+
+ const { availableIntegrations, installedIntegrations, error, isError, isLoading, isSuccess } =
+ useInstalledIntegrations()
+
+ const installedIds = installedIntegrations.map((i) => i.id)
+
+ // Dynamic page content based on selected category
+ const pageContent = useMemo(() => {
+ switch (selectedCategory) {
+ case 'wrapper':
+ return {
+ title: 'Wrappers',
+ subtitle:
+ 'Connect to external data sources and services by querying APIs, databases, and files as if they were Postgres tables.',
+ secondaryActions: (
+
+ ),
+ }
+ case 'postgres_extension':
+ return {
+ title: 'Postgres Modules',
+ subtitle: 'Extend your database with powerful Postgres extensions.',
+ }
+ default:
+ return {
+ title: 'Extend your database',
+ subtitle:
+ 'Extensions and wrappers that add functionality to your database and connect to external services.',
+ }
+ }
+ }, [selectedCategory])
+
+ const filteredAndSortedIntegrations = useMemo(() => {
+ let filtered = availableIntegrations
+
+ if (selectedCategory !== 'all') {
+ filtered = filtered.filter((i) => i.type === selectedCategory)
+ }
+
+ if (search.length > 0) {
+ filtered = filtered.filter((i) => i.name.toLowerCase().includes(search.toLowerCase()))
+ }
+
+ // Sort by installation status, then alphabetically
+ return filtered.sort((a, b) => {
+ const aIsInstalled = installedIds.includes(a.id)
+ const bIsInstalled = installedIds.includes(b.id)
+
+ if (aIsInstalled && !bIsInstalled) return -1
+ if (!aIsInstalled && bIsInstalled) return 1
+
+ return a.name.localeCompare(b.name)
+ })
+ }, [availableIntegrations, selectedCategory, search, installedIds])
+
+ const groupedIntegrations = useMemo(() => {
+ if (selectedCategory !== 'all' || search.length > 0) {
+ return null
+ }
+
+ const featured = filteredAndSortedIntegrations.filter((i) =>
+ FEATURED_INTEGRATIONS.includes(i.id)
+ )
+ const allIntegrations = filteredAndSortedIntegrations // Include all integrations, including featured
+
+ return {
+ featured,
+ allIntegrations,
+ }
+ }, [filteredAndSortedIntegrations, selectedCategory, search])
+
+ // Helper component to render featured integrations grid
+ const FeaturedIntegrationsGrid = ({
+ integrations,
+ }: {
+ integrations: typeof filteredAndSortedIntegrations
+ }) => (
+
+ {integrations.map((integration) => (
+
+ ))}
)
+
+ // Helper component to render all integrations grid
+ const AllIntegrationsGrid = ({
+ integrations,
+ }: {
+ integrations: typeof filteredAndSortedIntegrations
+ }) => (
+
+ {integrations.map((integration) => (
+
+ ))}
+
+ )
+
+ return (
+
+
+
+
+ setSearch(e.target.value)}
+ placeholder="Search integrations..."
+ icon={}
+ className="w-52"
+ />
+
+
+ {isLoading && (
+
+ {new Array(8).fill(0).map((_, idx) => (
+
+ ))}
+
+ )}
+
+ {/* Error State */}
+ {isError && (
+
+ )}
+
+ {/* Success State */}
+ {isSuccess && (
+ <>
+ {/* No Search Results */}
+ {search.length > 0 && filteredAndSortedIntegrations.length === 0 && (
+ setSearch('')} />
+ )}
+
+ {/* Grouped View (All integrations, no search) */}
+ {groupedIntegrations && (
+ <>
+ {/* Featured Integrations */}
+ {groupedIntegrations.featured.length > 0 && (
+
+ )}
+
+ {/* All Integrations */}
+ {groupedIntegrations.allIntegrations.length > 0 && (
+
+ )}
+
+ )}
+
+ {/* Single List View (Category filtered or searching) */}
+ {!groupedIntegrations && filteredAndSortedIntegrations.length > 0 && (
+
+ )}
+
+ )}
+
+
+
+ )
}
IntegrationsPage.getLayout = (page) => (
diff --git a/apps/studio/public/img/integrations/covers/cron-cover.webp b/apps/studio/public/img/integrations/covers/cron-cover.webp
new file mode 100644
index 0000000000000..54b4f0793a2fd
Binary files /dev/null and b/apps/studio/public/img/integrations/covers/cron-cover.webp differ
diff --git a/apps/studio/public/img/integrations/covers/queues-cover.png b/apps/studio/public/img/integrations/covers/queues-cover.png
new file mode 100644
index 0000000000000..cc3f2254abc2a
Binary files /dev/null and b/apps/studio/public/img/integrations/covers/queues-cover.png differ
diff --git a/apps/studio/public/img/integrations/covers/stripe-cover.png b/apps/studio/public/img/integrations/covers/stripe-cover.png
new file mode 100644
index 0000000000000..2f15fa367afa9
Binary files /dev/null and b/apps/studio/public/img/integrations/covers/stripe-cover.png differ