mirror of
https://github.com/supabase/supabase.git
synced 2026-10-15 06:09:08 +03:00
Ivan Vasilov
a88e89e4a8
* Add schema flag to the foreign-schema wrappers. * Support the new mode in the create wrapper flow. * Minor CSS tweaks. * Re-add a missing line. * Add source schema field. * Make source and target schema part of the form state. * Fix the edit mutation. * Show a warninf for the feature if the wrappers extension is below 0.5.0. * Bring the SchemaEditor side panel into 21st century and simplify it. * Use the schema editor in the Create wrapper sheet to create a new schema. * Minor fixes. * Fix the badge border in WrapperRow.
76 lines
2.3 KiB
TypeScript
76 lines
2.3 KiB
TypeScript
import { useMemo } from 'react'
|
|
|
|
import { useParams } from 'common'
|
|
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
|
|
import { useFDWsQuery } from 'data/fdw/fdws-query'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Table,
|
|
TableBody,
|
|
TableCaption,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from 'ui'
|
|
import { INTEGRATIONS } from '../Landing/Integrations.constants'
|
|
import WrapperRow from './WrapperRow'
|
|
import { wrapperMetaComparator } from './Wrappers.utils'
|
|
|
|
interface WrapperTableProps {
|
|
isLatest?: boolean
|
|
}
|
|
|
|
export const WrapperTable = ({ isLatest = false }: WrapperTableProps) => {
|
|
const { id, ref } = useParams()
|
|
const { project } = useProjectContext()
|
|
const integration = INTEGRATIONS.find((i) => i.id === id)
|
|
|
|
const { data } = useFDWsQuery({
|
|
projectRef: ref,
|
|
connectionString: project?.connectionString,
|
|
})
|
|
|
|
const wrappers = useMemo(
|
|
() =>
|
|
integration && integration.type === 'wrapper' && data
|
|
? data.filter((wrapper) => wrapperMetaComparator(integration.meta, wrapper))
|
|
: [],
|
|
[data, integration]
|
|
)
|
|
|
|
if (!integration || integration.type !== 'wrapper') {
|
|
return (
|
|
<p className="text-foreground-light text-sm">
|
|
The referenced ID doesn't correspond to a wrapper integration
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Card className="max-w-5xl">
|
|
<CardContent className="p-0 pb-3">
|
|
<Table className="">
|
|
<TableCaption className="text-xs">
|
|
{wrappers.length} {integration?.name}
|
|
{wrappers.length > 1 ? 's' : ''} created
|
|
</TableCaption>
|
|
<TableHeader className="font-mono uppercase text-xs [&_th]:h-auto [&_th]:py-2">
|
|
<TableRow className="rounded">
|
|
<TableHead className="w-[220px]">Name</TableHead>
|
|
<TableHead>Tables</TableHead>
|
|
<TableHead>Encrypted key</TableHead>
|
|
<TableHead className="text-right w-24"></TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="[&_td]:py-0 [&_tr]:h-[50px] [&_tr]:border-dotted bg-surface-100">
|
|
{(isLatest ? wrappers.slice(0, 3) : wrappers).map((x) => {
|
|
return <WrapperRow key={x.id} wrapper={x} />
|
|
})}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|