ruvector/studio/components/interfaces/Integrations/Wrappers/WrapperTable.tsx

import { useMemo, useRef } from 'react'
import { toast } from 'sonner'

import { useParams } from 'common'
import { useFDWsQuery } from 'data/fdw/fdws-query'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
import { handleErrorOnDelete, useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
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 { 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">
      <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}
                  wrappers={wrappers}
                  selectedWrapperToEdit={selectedWrapperToEdit}
                  selectedWrapperToDelete={selectedWrapperToDelete}
                  setSelectedWrapperToEdit={setSelectedWrapperToEdit}
                  setSelectedWrapperToDelete={setSelectedWrapperToDelete}
                  deletingWrapperIdRef={deletingWrapperIdRef}
                />
              )
            })}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  )
}