MessageDetailsPanel() — supabase Function Reference

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

Function tsx ContentManagement Collections calls 1

Entity Profile

ContentManagement→ Collections→ MessageDetailsPanel() — supabase Function Reference

Dependency Diagram

graph TD
  e2f866f4_1f76_eb61_2ab2_5a8462cba06f["MessageDetailsPanel()"]
  7812aa58_11b5_59ef_32fb_8c15c4e7493f["tryFormatInitialValue()"]
  e2f866f4_1f76_eb61_2ab2_5a8462cba06f -->|calls| 7812aa58_11b5_59ef_32fb_8c15c4e7493f
  style e2f866f4_1f76_eb61_2ab2_5a8462cba06f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/Integrations/Queues/SingleQueue/MessageDetailsPanel.tsx lines 46–223

export const MessageDetailsPanel = ({
  selectedMessage,
  setSelectedMessage,
}: MessageDetailsPanelProps) => {
  const { id: _id, childId: queueName } = useParams()
  const { data: project } = useSelectedProjectQuery()

  useEscapeKeydown(() => setSelectedMessage(null))

  const {
    mutate: archiveMessage,
    isPending: isLoadingArchive,
    isSuccess: isSuccessArchive,
  } = useDatabaseQueueMessageArchiveMutation()

  const {
    mutate: readMessage,
    isPending: isLoadingRead,
    isSuccess: isSuccessRead,
  } = useDatabaseQueueMessageReadMutation()

  const {
    mutate: deleteMessage,
    isPending: isLoadingDelete,
    isSuccess: isSuccessDelete,
  } = useDatabaseQueueMessageDeleteMutation()

  const initialValue = JSON.stringify(selectedMessage?.message)
  const jsonString = prettifyJSON(!isNil(initialValue) ? tryFormatInitialValue(initialValue) : '')

  const [view, setView] = useState<'details' | 'suggestion'>('details')

  return (
    <ResizablePanel
      defaultSize={30}
      maxSize={45}
      minSize={30}
      collapsible
      onCollapse={() => setSelectedMessage(null)}
      className="bg-studio border-t pointer-events-auto"
    >
      <Button
        type="text"
        className="absolute top-3 right-3 px-1"
        icon={<X />}
        onClick={() => setSelectedMessage(null)}
      />

      <Tabs_Shadcn_
        value={view}
        className="flex flex-col h-full"
        onValueChange={(value: any) => {
          setView(value)
        }}
      >
        <TabsList_Shadcn_ className="px-5 flex gap-x-4 min-h-[46px]">
          <TabsTrigger_Shadcn_
            value="details"
            className="px-0 pb-0 h-full text-xs  data-[state=active]:bg-transparent !shadow-none"
          >
            Overview
          </TabsTrigger_Shadcn_>
        </TabsList_Shadcn_>
        <TabsContent_Shadcn_ value="details" className="w-full mt-0 overflow-y-auto grow">
          <div className="flex flex-col px-4 py-4 text-sm">
            <RowData property="Message ID" value={`${selectedMessage.msg_id}`} />
            <RowData
              property="Added at"
              value={dayjs(selectedMessage.enqueued_at).format(DATE_FORMAT)}
            />
            <RowData
              property="Available at"
              value={dayjs(selectedMessage.vt).format(DATE_FORMAT)}
            />
            <RowData property="Retries" value={`${selectedMessage.read_ct}`} />

            <div>
              <h3 className="text-foreground-light py-1">Payload</h3>
              <MonacoEditor
                key={selectedMessage.msg_id}
                onChange={noop}
                width="100%"
                value={jsonString || 'NULL'}
                language="json"
                readOnly
              />
            </div>
          </div>
          <Separator />
          <div className="flex flex-col px-4 py-4 -space-y-1">
            {!selectedMessage.archived_at ? (
              <>
                <RowAction
                  title="Postpone message"
                  description="The message will be postponed and won't show up in reads for 60 seconds."
                  button={{
                    icon: <Clock12 />,
                    text: 'Postpone',
                    isLoading: isLoadingRead,
                    onClick: () => {
                      readMessage({
                        projectRef: project!.ref,
                        connectionString: project?.connectionString,
                        queueName: queueName!,
                        messageId: selectedMessage.msg_id,
                        duration: 60,
                      })
                    },
                  }}
                  success={
                    isSuccessRead
                      ? {
                          title: 'Postponed',
                          description: 'The message was postponed for 60 seconds.',
                        }
                      : undefined
                  }
                />
                <RowAction
                  title="Archive message"
                  description="The message will be marked as archived and hidden from future reads by consumers. You can still access the message later."
                  button={{
                    icon: <Archive />,
                    text: 'Archive',
                    isLoading: isLoadingArchive,
                    type: 'warning',
                    onClick: () => {
                      archiveMessage({
                        projectRef: project!.ref,
                        connectionString: project?.connectionString,
                        queueName: queueName!,
                        messageId: selectedMessage.msg_id,
                      })
                    },
                  }}
                  success={
                    isSuccessArchive
                      ? {
                          title: 'Archived',
                          description: 'The message was archived successfully.',
                        }
                      : undefined
                  }
                />
                <RowAction
                  title="Delete message"
                  description="The message cannot be recovered afterwards."
                  button={{
                    icon: <Trash2 />,
                    text: 'Delete',
                    type: 'danger',
                    isLoading: isLoadingDelete,
                    onClick: () => {
                      deleteMessage({
                        projectRef: project!.ref,
                        connectionString: project?.connectionString,
                        queueName: queueName!,
                        messageId: selectedMessage.msg_id,
                      })
                    },
                  }}
                  success={
                    isSuccessDelete
                      ? {
                          title: 'Deleted',
                          description: 'The message was deleted successfully.',
                        }
                      : undefined
                  }
                />
              </>
            ) : null}
          </div>
        </TabsContent_Shadcn_>
      </Tabs_Shadcn_>
    </ResizablePanel>
  )
}