QueueMessagesDataGrid() — supabase Function Reference

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

Function tsx ContentManagement AccessControl calls 1

Entity Profile

ContentManagement→ AccessControl→ QueueMessagesDataGrid() — supabase Function Reference

Dependency Diagram

graph TD
  ddb9ff76_efb6_6895_7d90_1c8b9205159a["QueueMessagesDataGrid()"]
  39b637d9_e1cb_6c8d_69a7_7f57cd3f55fd["isAtBottom()"]
  ddb9ff76_efb6_6895_7d90_1c8b9205159a -->|calls| 39b637d9_e1cb_6c8d_69a7_7f57cd3f55fd
  style ddb9ff76_efb6_6895_7d90_1c8b9205159a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/QueueDataGrid.tsx lines 133–231

export const QueueMessagesDataGrid = ({
  error,
  isLoading,
  messages,
  showMessageModal,
  fetchNextPage,
}: QueueDataGridProps) => {
  const gridRef = useRef<DataGridHandle>(null)
  const router = useRouter()

  const [selectedMessageId, setSelectedMessageId] = useQueryState('messageId', parseAsInteger)

  const handleScroll = (event: UIEvent<HTMLDivElement>) => {
    if (isLoading || !isAtBottom(event)) return
    fetchNextPage()
  }

  const selectedMessage = useMemo(
    () => messages.find((m) => m.msg_id === selectedMessageId),
    [messages, selectedMessageId]
  )

  return (
    <div className="relative h-full">
      <DataGrid
        ref={gridRef}
        className="h-full"
        rowHeight={44}
        headerRowHeight={36}
        columns={columns}
        onScroll={handleScroll}
        rows={messages}
        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(idx, props) {
            return (
              <Row
                key={props.row.msg_id}
                {...props}
                onClick={() => {
                  if (typeof idx === 'number' && idx >= 0) {
                    setSelectedMessageId(props.row.msg_id)
                    gridRef.current?.scrollToCell({ idx: 0, rowIdx: idx })
                    const { messageId, ...rest } = router.query
                    router.push({ ...router, query: { ...rest, messageId: props.row.msg_id } })
                  }
                }}
              />
            )
          },
          noRowsFallback: isLoading ? (
            <div className="absolute top-14 px-6 w-full">
              <GenericSkeletonLoader />
            </div>
          ) : !!error ? (
            <div className="absolute top-16 px-6 flex flex-col items-center justify-center w-full gap-y-2">
              <AlertError subject="Failed to retrieve queue messages" error={error} />
            </div>
          ) : (
            <div className="absolute top-28 px-6 flex flex-col items-center justify-center w-full gap-y-2">
              <TextSearch className="text-foreground-muted" strokeWidth={1} />
              <div className="text-center">
                <p className="text-foreground">No messages found</p>
                <p className="text-foreground-light">
                  The selected queue doesn't have any messages.
                </p>
                <Button className="mt-2" onClick={() => showMessageModal()}>
                  Add message
                </Button>
              </div>
            </div>
          ),
        }}
      />
      <ResizablePanelGroup
        direction="horizontal"
        className="absolute inset-0 z-10 pointer-events-none"
        autoSaveId="queue-messages-layout-v1"
      >
        <ResizablePanel defaultSize={1} />
        {selectedMessage && (
          <>
            <ResizableHandle withHandle className="pointer-events-auto" />
            <MessageDetailsPanel
              selectedMessage={selectedMessage}
              setSelectedMessage={setSelectedMessageId}
            />
          </>
        )}
      </ResizablePanelGroup>
    </div>
  )
}