NoResultAlert() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx lines 27–109

const NoResultAlert = ({
  enabled,
  hasChannelSet,
  showSendMessage,
}: {
  enabled: boolean
  hasChannelSet: boolean
  showSendMessage: () => void
}) => {
  const { ref } = useParams()

  const { can: canReadAPIKeys, isLoading: isLoadingPermissions } = useAsyncCheckPermissions(
    PermissionAction.READ,
    'service_api_keys'
  )

  return (
    <div className="w-full max-w-md flex items-center flex-col">
      {isLoadingPermissions ? (
        <GenericSkeletonLoader className="w-80" />
      ) : !canReadAPIKeys ? (
        <NoPermission isFullPage resourceText="use the realtime inspector" />
      ) : !hasChannelSet ? (
        <NoChannelEmptyState />
      ) : (
        <>
          {enabled && <p className="text-foreground">No Realtime messages found</p>}
          <p className="text-foreground-lighter">Realtime message logs will be shown here</p>

          <div className="mt-4 border bg-surface-100 border-border rounded-md justify-start items-center flex flex-col w-full">
            <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
              <IconBroadcast size="xlarge" className="text-background bg-foreground rounded w-6" />
              <div className="grow flex-col flex">
                <p className="text-foreground">Create a Broadcast message</p>
                <p className="text-foreground-lighter text-xs">Send a message in the channel</p>
              </div>
              <Button type="default" onClick={showSendMessage}>
                Broadcast a message
              </Button>
            </div>
            <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
              <IconPresence size="xlarge" className="text-background bg-foreground rounded w-6" />
              <div className="grow flex-col flex">
                <p className="text-foreground">Join from another browser tab</p>
                <p className="text-foreground-lighter text-xs">
                  Send messages between multiple clients
                </p>
              </div>
              <Link href={`/project/${ref}/realtime/inspector`} target="_blank" rel="noreferrer">
                <Button type="default" iconRight={<ExternalLink />}>
                  Open inspector
                </Button>
              </Link>
            </div>

            <div className="w-full px-5 py-4 items-center gap-4 inline-flex border-b">
              <IconDatabaseChanges
                size="xlarge"
                className="text-background bg-foreground rounded w-6"
              />
              <div className="grow flex-col flex">
                <p className="text-foreground">Listen to a table for changes</p>
                <p className="text-foreground-lighter text-xs">Tables must have realtime enabled</p>
              </div>
              <Link href={`/project/${ref}/database/publications`} target="_blank" rel="noreferrer">
                <Button type="default" iconRight={<ExternalLink />}>
                  Publications settings
                </Button>
              </Link>
            </div>
            <div className="w-full px-5 py-4 items-center gap-4 inline-flex rounded-b-md bg-studio">
              <div className="grow flex-col flex">
                <p className="text-foreground">Not sure what to do?</p>
                <p className="text-foreground-lighter text-xs">Browse our documentation</p>
              </div>
              <DocsButton href={`${DOCS_URL}/guides/realtime`} />
            </div>
          </div>
        </>
      )}
    </div>
  )
}