WrapperTable() — supabase Function Reference

Architecture documentation for the WrapperTable() function in WrapperTable.tsx from the supabase codebase.

Function tsx ContentManagement Collections calls 1

Entity Profile

ContentManagement→ Collections→ WrapperTable() — supabase Function Reference

Dependency Diagram

graph TD
  b86d323e_7b77_81f8_55d2_e9b4ac22716d["WrapperTable()"]
  f6fdda8f_575f_1739_f5a8_a5415e6d46f8["wrapperMetaComparator()"]
  b86d323e_7b77_81f8_55d2_e9b4ac22716d -->|calls| f6fdda8f_575f_1739_f5a8_a5415e6d46f8
  style b86d323e_7b77_81f8_55d2_e9b4ac22716d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx lines 27–122

export const WrapperTable = ({ isLatest = false }: WrapperTableProps) => {
  const { id, ref } = useParams()
  const { data: project } = useSelectedProjectQuery()
  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]
  )

  // Track the ID being deleted to exclude it from error checking
  const deletingWrapperIdRef = useRef<string | null>(null)

  const { setValue: setSelectedWrapperToEdit, value: selectedWrapperToEdit } =
    useQueryStateWithSelect({
      urlKey: 'edit',
      select: (wrapperId: string) =>
        wrapperId ? wrappers.find((w) => w.id.toString() === wrapperId) : undefined,
      enabled: !!wrappers.length,
      onError: () => toast.error(`Wrapper not found`),
    })

  const { setValue: setSelectedWrapperToDelete, value: selectedWrapperToDelete } =
    useQueryStateWithSelect({
      urlKey: 'delete',
      select: (wrapperId: string) =>
        wrapperId ? wrappers.find((w) => w.id.toString() === wrapperId) : undefined,
      enabled: !!wrappers.length,
      onError: (_error, selectedId) =>
        handleErrorOnDelete(deletingWrapperIdRef, selectedId, `Wrapper not found`),
    })

  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">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead className="w-[220px]">Name</TableHead>
            <TableHead>Tables</TableHead>
            <TableHead>Encrypted key</TableHead>
            <TableHead className="w-24">
              <span className="sr-only">Actions</span>
            </TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {(isLatest ? wrappers.slice(0, 3) : wrappers).map((x) => {
            return (
              <WrapperRow
                key={x.id}
                wrapper={x}
                selectedWrapperToEdit={selectedWrapperToEdit}
                selectedWrapperToDelete={selectedWrapperToDelete}
                setSelectedWrapperToEdit={setSelectedWrapperToEdit}
                setSelectedWrapperToDelete={setSelectedWrapperToDelete}
                deletingWrapperIdRef={deletingWrapperIdRef}
              />
            )
          })}
        </TableBody>
        <TableFooter
          className={cn(
            'text-xs font-normal text-center text-foreground-muted',
            // Prevent the footer from being highlighted on hover
            '[&>tr>td]:hover:bg-inherit',
            // Conditionally remove the border-top if there are no wrappers
            wrappers.length === 0 ? 'border-t-0' : ''
          )}
        >
          <TableRow>
            <TableCell colSpan={4}>
              {wrappers.length} {integration?.name}
              {wrappers.length > 1 ? 's' : ''} created
            </TableCell>
          </TableRow>
        </TableFooter>
      </Table>
    </Card>
  )
}