mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 15:49:09 +03:00
Ivan Vasilov
54d11a6a7f
* Make the title prop on ProjectIntegrationLayout mandatory. Fix the title on some of the integration pages. Fix wrong layout on wrappers/new. * Add code for the initial page. * Make the FilterPopover more type-safe. * Add a page to list message in a single queue. * Add feature flag for queues. * Handle the case where pgmq is not available on the database. * Minor fixes. * Some minor fixes. * Fix the query when fetching only archived messages. * Fix the filters when there's no choices selected. * Add a comment for local dev. * Add a max size to the queue name input.
89 lines
3.3 KiB
TypeScript
89 lines
3.3 KiB
TypeScript
import * as Tooltip from '@radix-ui/react-tooltip'
|
|
import { PermissionAction } from '@supabase/shared-types/out/constants'
|
|
import { ExternalLink } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { useState } from 'react'
|
|
|
|
import EnableExtensionModal from 'components/interfaces/Database/Extensions/EnableExtensionModal'
|
|
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
|
import ProductEmptyState from 'components/to-be-cleaned/ProductEmptyState'
|
|
import { useDatabaseExtensionsQuery } from 'data/database-extensions/database-extensions-query'
|
|
import { useCheckPermissions } from 'hooks/misc/useCheckPermissions'
|
|
import { Button } from 'ui'
|
|
|
|
export const QueuesDisabledState = () => {
|
|
const [showEnableExtensionModal, setShowEnableExtensionModal] = useState(false)
|
|
const { project } = useProjectContext()
|
|
const canToggleExtensions = useCheckPermissions(
|
|
PermissionAction.TENANT_SQL_ADMIN_WRITE,
|
|
'extensions'
|
|
)
|
|
|
|
const { data } = useDatabaseExtensionsQuery({
|
|
projectRef: project?.ref,
|
|
connectionString: project?.connectionString,
|
|
})
|
|
|
|
const pgmqExtension = (data ?? []).find((ext) => ext.name === 'pgmq')
|
|
|
|
if (!pgmqExtension) return null
|
|
|
|
return (
|
|
<>
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<ProductEmptyState title="Queues">
|
|
<div className="text-sm text-foreground-light mb-4 grid gap-2">
|
|
<p>
|
|
Message queues in PostgreSQL allow you to handle asynchronous tasks, manage workloads,
|
|
and enable reliable communication between different parts of your application.
|
|
</p>
|
|
<p>Enable queues in your project.</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3 mt-4">
|
|
<Tooltip.Root delayDuration={0}>
|
|
<Tooltip.Trigger asChild>
|
|
<Button type="primary" onClick={() => setShowEnableExtensionModal(true)}>
|
|
Enable Queues
|
|
</Button>
|
|
</Tooltip.Trigger>
|
|
{!canToggleExtensions && (
|
|
<Tooltip.Portal>
|
|
<Tooltip.Content side="bottom">
|
|
<Tooltip.Arrow className="radix-tooltip-arrow" />
|
|
<div
|
|
className={[
|
|
'rounded bg-alternative py-1 px-2 leading-none shadow',
|
|
'border border-background',
|
|
].join(' ')}
|
|
>
|
|
<span className="text-xs text-foreground">
|
|
You need additional permissions to enable pgmq for this project
|
|
</span>
|
|
</div>
|
|
</Tooltip.Content>
|
|
</Tooltip.Portal>
|
|
)}
|
|
</Tooltip.Root>
|
|
<Button asChild type="text" icon={<ExternalLink />}>
|
|
<Link
|
|
href="https://supabase.com/docs/guides/database/extensions/pgmq"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
Documentation
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</ProductEmptyState>
|
|
</div>
|
|
|
|
<EnableExtensionModal
|
|
visible={showEnableExtensionModal}
|
|
extension={pgmqExtension}
|
|
onCancel={() => setShowEnableExtensionModal(false)}
|
|
/>
|
|
</>
|
|
)
|
|
}
|