@@ -314,10 +308,7 @@ function SelectOption({
{active ? (
diff --git a/studio/components/interfaces/Realtime/Inspector/ApplyConfigModal.tsx b/studio/components/interfaces/Realtime/Inspector/ApplyConfigModal.tsx
new file mode 100644
index 00000000000..2cc3aaff8e9
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/ApplyConfigModal.tsx
@@ -0,0 +1,31 @@
+import { Modal } from 'ui'
+
+import ConfirmationModal from 'components/ui/ConfirmationModal'
+
+interface ApplyConfigModalProps {
+ visible: boolean
+ onSelectCancel: () => void
+ onSelectConfirm: () => void
+}
+
+export const ApplyConfigModal = (props: ApplyConfigModalProps) => {
+ return (
+
+
+
+
+
+ The realtime inspector will clear currently collected messages and start listening for
+ new messages matching the updated filters.
+
+
+ )
+}
diff --git a/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover/index.tsx b/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover/index.tsx
new file mode 100644
index 00000000000..353f7b1f161
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/ChooseChannelPopover/index.tsx
@@ -0,0 +1,176 @@
+import { Dispatch, SetStateAction, useState } from 'react'
+import {
+ Button,
+ IconBroadcast,
+ IconChevronDown,
+ IconDatabaseChanges,
+ IconPresence,
+ Input,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+ Popover_Shadcn_,
+ Toggle,
+} from 'ui'
+
+import Link from 'next/link'
+import { RealtimeConfig } from '../useRealtimeMessages'
+
+interface ChooseChannelPopoverProps {
+ config: RealtimeConfig
+ onChangeConfig: Dispatch
>
+}
+
+export const ChooseChannelPopover = ({ config, onChangeConfig }: ChooseChannelPopoverProps) => {
+ const [open, setOpen] = useState(false)
+ const [channelName, setChannelName] = useState(config.channelName)
+
+ const onOpen = (v: boolean) => {
+ // when opening, copy the outside config into the intermediate one
+ if (v === true) {
+ setChannelName(config.channelName)
+ }
+ setOpen(v)
+ }
+
+ return (
+
+
+ }
+ >
+ 0 ? config.channelName : ''}
+ >
+ {config.channelName.length > 0 ? `Channel: ${config.channelName}` : 'Choose channel'}
+
+
+
+
+
+ {config.channelName.length === 0 ? (
+ <>
+
+
+ {
+ setChannelName(e.target.value)
+ }}
+ />
+
+
+
+ The channel you initialize with the Supabase Realtime client. Learn more in{' '}
+
+ our docs
+
+
+
+ ) : (
+
+
+
Currently using channel
+
+ {config.channelName}
+
+
+
+ If you unset this channel, all of the messages populated on this page will disappear
+
+
+
+ )}
+
+
+
+
+
+
+
onChangeConfig({ ...config, enablePresence: !config.enablePresence })}
+ />
+
+
+ Store and synchronize user state consistently across clients
+
+
+
+
+
+
+
+
+ onChangeConfig({ ...config, enableBroadcast: !config.enableBroadcast })
+ }
+ />
+
+
+ Send any data to any client subscribed to the same channel
+
+
+
+
+
+
+
+
+ onChangeConfig({ ...config, enableDbChanges: !config.enableDbChanges })
+ }
+ />
+
+
+ Listen for Database inserts, updates, deletes and more
+
+
+
+
+
:
}
+ onClick={() => onChangeConfig({ ...config, enabled: !config.enabled })}
+ >
+ {config.enabled ? `Stop listening` : `Start listening`}
+
+
+
+
+
+
+
+
+
+
Select an message
+
+ Click on a message on the left to view details.
+
+
+
+
+
+
{children}
+)
+// renders a timestamp (either unix microsecond or iso timestamp)
+export const SelectionDetailedTimestampRow = ({ value }: { value: string | number }) => (
+
+)
+export const SelectionDetailedRow = ({
+ label,
+ value,
+ valueRender,
+}: {
+ label: string
+ value: string
+ valueRender?: React.ReactNode
+}) => {
+ return (
+
+ {label}
+
+ {valueRender ?? value}
+
+
+
+ )
+}
+
+/*
+ * JSON Syntax Highlighter
+ *
+ * for http response codes
+ */
+export function jsonSyntaxHighlight(input: Object) {
+ let json: string = JSON.stringify(input, null, 2)
+ json = json.replace(/&/g, '&').replace(//g, '>')
+
+ const newJson = json.replace(
+ /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
+
+ function (match) {
+ var cls = 'number text-tomato-900'
+ if (/^"/.test(match)) {
+ if (/:$/.test(match)) {
+ cls = 'key text-scale-1200'
+ } else {
+ cls = 'string text-brand-600'
+ }
+ } else if (/true|false/.test(match)) {
+ cls = 'boolean text-blue-900'
+ } else if (/null/.test(match)) {
+ cls = 'null text-amber-1100'
+ }
+ return '' + match + ''
+ }
+ )
+
+ const jsonWithLineWraps = newJson.split(`\n`).map((x) => {
+ return `${x}`
+ })
+
+ return jsonWithLineWraps.join('\n')
+}
diff --git a/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx b/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
new file mode 100644
index 00000000000..7620eaf1001
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/MessagesTable.tsx
@@ -0,0 +1,182 @@
+import { useParams } from 'common'
+import { isEqual } from 'lodash'
+import { Loader2 } from 'lucide-react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { Key, useEffect, useState } from 'react'
+import DataGrid, { RenderRowProps, Row } from 'react-data-grid'
+import { Button, IconBroadcast, IconDatabaseChanges, IconExternalLink, IconPresence, cn } from 'ui'
+
+import ShimmerLine from 'components/ui/ShimmerLine'
+import MessageSelection from './MessageSelection'
+import { LogData } from './Messages.types'
+import { ColumnRenderer } from './RealtimeMessageColumnRenderer'
+
+export const isErrorLog = (l: LogData) => {
+ return l.message === 'SYSTEM' && l.metadata?.status === 'error'
+}
+
+interface MessagesTableProps {
+ enabled: boolean
+ data?: LogData[]
+ showSendMessage: () => void
+}
+
+const NoResultAlert = ({
+ enabled,
+ showSendMessage,
+}: {
+ enabled: boolean
+ showSendMessage: () => void
+}) => {
+ const router = useRouter()
+ const { ref } = useParams()
+
+ return (
+
+ {enabled ?
No Realtime messages found
: null}
+
Realtime message logs will be shown here
+
+
+
+
+
+
Create a Broadcast message
+
Start developing in preview
+
+
+
+
+
+
+
Join from another browser tab
+
+ Experiment with presence messages between multiple clients
+
+
+
+
}>
+ Open inspector
+
+
+
+
+
+
+
+
Listen to a table for changes
+
Start developing in preview
+
+
+
}>
+ Replication settings
+
+
+
+
+
+
|
+}
+
+const MessagesTable = ({ enabled, data = [], showSendMessage }: MessagesTableProps) => {
+ const [focusedLog, setFocusedLog] = useState(null)
+ const stringData = JSON.stringify(data)
+
+ useEffect(() => {
+ if (!data) return
+ const found = data.find((datum) => datum.id === focusedLog?.id)
+ if (!found) {
+ setFocusedLog(null)
+ }
+ }, [stringData])
+
+ if (!data) return null
+
+ return (
+ <>
+
+
+
+
+ {enabled && (
+
+
+
+
Listening
+
•
+
+ {data.length > 0
+ ? data.length >= 100
+ ? `Found a large number of messages, showing only the latest 100...`
+ : `Found ${data.length} messages...`
+ : `No message found yet...`}
+
+
+
+
+ )}
+
+
{
+ setFocusedLog(data[rowIdx])
+ }}
+ selectedRows={new Set([])}
+ columns={ColumnRenderer}
+ rowClass={(row) => {
+ return cn([
+ 'font-mono tracking-tight',
+ isEqual(row, focusedLog)
+ ? 'bg-scale-800 rdg-row--focused'
+ : ' bg-scale-200 hover:bg-scale-300 cursor-pointer',
+ isErrorLog(row) && '!bg-warning-300',
+ ])
+ }}
+ rows={data}
+ rowKeyGetter={(row) => row.id}
+ renderers={{
+ renderRow: RowRenderer,
+ noRowsFallback: (
+
+
+
+ ),
+ }}
+ />
+
+
+ setFocusedLog(null)} log={focusedLog} />
+
+
+ {isLoading && (
+
}
+ >
+
Loading tables...
+
+ )}
+
+ {showError && isError && (
+
+
+ Failed to load tables
+
+
+ Error: {(error as any)?.message}
+
+
+
+ )}
+
+ {isSuccess && (
+
+
+
+
+
+
+
+
+ No tables found
+
+ 7 ? 'h-[210px]' : ''}>
+ {
+ onSelectTable('*', undefined)
+ setOpen(false)
+ }}
+ onClick={() => {
+ onSelectTable('*', undefined)
+ setOpen(false)
+ }}
+ >
+ All tables
+ {selectedSchemaName === '*' && (
+
+ )}
+
+ {entities?.map((table) => (
+ {
+ onSelectTable(table.name, table.id)
+ setOpen(false)
+ }}
+ onClick={() => {
+ onSelectTable(table.name, table.id)
+ setOpen(false)
+ }}
+ >
+ {table.name}
+ {selectedSchemaName === table.name && (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+ )}
+
+ Filter incoming messages
+
+
+
setTempConfig({ ...tempConfig, schema: v, table: '*' })}
+ />
+
+ setTempConfig({ ...tempConfig, table })}
+ />
+
+
+
AND
+
setTempConfig({ ...tempConfig, filter: v.target.value })}
+ />
+
+
+ Learn more about realtime filtering in{' '}
+
+ our docs
+
+
+
+
+
+
+
+
+ setApplyConfigOpen(false)}
+ onSelectConfirm={() => {
+ onChangeConfig(tempConfig)
+ setApplyConfigOpen(false)
+ setOpen(false)
+ }}
+ />
+
+ )
+}
diff --git a/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx b/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx
new file mode 100644
index 00000000000..ac0315e1274
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/RealtimeMessageColumnRenderer.tsx
@@ -0,0 +1,44 @@
+import { Column } from 'react-data-grid'
+import { IconAlertTriangle, IconBroadcast, IconDatabaseChanges, IconPresence, cn } from 'ui'
+
+import { LogData, PreviewLogData } from './Messages.types'
+import { RowLayout } from './MessagesFormatters'
+import { isErrorLog } from './MessagesTable'
+
+const ICONS = {
+ PRESENCE: ,
+ BROADCAST: ,
+ POSTGRES: ,
+ SYSTEM: ,
+}
+
+export const ColumnRenderer: Column[] = [
+ {
+ name: 'timestamp-with-truncated-text',
+ key: 'main-column',
+ renderCell: (data: { row: PreviewLogData }) => {
+ const type = data.row.message as keyof typeof ICONS
+
+ return (
+
+
+ {ICONS[type]}
+
+
+ {new Date(data.row.timestamp).toISOString()}
+
+
+ {JSON.stringify(data.row.metadata)}
+
+
+ )
+ },
+ },
+]
diff --git a/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx b/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
new file mode 100644
index 00000000000..509c23b155a
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/RealtimeTokensPopover/index.tsx
@@ -0,0 +1,152 @@
+import { PlusCircle } from 'lucide-react'
+import { Dispatch, SetStateAction, useEffect, useState } from 'react'
+import {
+ Button,
+ IconKey,
+ IconUnlock,
+ IconUser,
+ Input,
+ Listbox,
+ PopoverContent_Shadcn_,
+ PopoverTrigger_Shadcn_,
+ Popover_Shadcn_,
+} from 'ui'
+
+import { useProjectSettingsQuery } from 'data/config/project-settings-query'
+import { DEFAULT_PROJECT_API_SERVICE_ID } from 'lib/constants'
+import { RealtimeConfig } from '../useRealtimeMessages'
+import Link from 'next/link'
+
+interface RealtimeTokensPopoverProps {
+ config: RealtimeConfig
+ onChangeConfig: Dispatch>
+}
+
+export const RealtimeTokensPopover = ({ config, onChangeConfig }: RealtimeTokensPopoverProps) => {
+ const [open, setOpen] = useState(false)
+ const [tempConfig, setTempConfig] = useState(config)
+
+ const { data: settings } = useProjectSettingsQuery({ projectRef: config.projectRef })
+
+ const apiService = (settings?.services ?? []).find(
+ (x) => x.app.id == DEFAULT_PROJECT_API_SERVICE_ID
+ )
+ const apiKeys = apiService?.service_api_keys ?? []
+ const selectedToken = apiKeys.find((k) => k.api_key === tempConfig.token)
+ const bearerEnabled = selectedToken?.tags === 'anon'
+
+ const isService = config.token === apiKeys.find((key) => key.tags === 'service_role')?.api_key
+
+ useEffect(() => {
+ const anonKey = apiKeys.find((k) => k.tags === 'anon')
+ if (anonKey) {
+ onChangeConfig({ ...config, token: anonKey.api_key })
+ }
+ }, [apiKeys])
+
+ const onOpen = (v: boolean) => {
+ // when opening, copy the outside config into the intermediate one
+ if (v === true) {
+ setTempConfig(config)
+ }
+ setOpen(v)
+ }
+
+ const onApply = () => {
+ onChangeConfig(tempConfig)
+ setOpen(false)
+ }
+
+ return (
+
+
+ }
+ type="dashed"
+ className="rounded-full px-1.5 pr-2 !py-1 text-xs"
+ size="small"
+ >
+ {isService
+ ? 'Bypassing RLS policies'
+ : config.bearer
+ ? 'Viewing events as user'
+ : 'Test RLS policies'}
+
+
+
+
+
Connection key settings
+
{
+ const selectedToken = apiKeys.find((k) => k.api_key === key)
+ if (selectedToken) {
+ if (selectedToken.tags === 'anon') {
+ setTempConfig({ ...config, token: key, bearer: '' })
+ } else {
+ setTempConfig({ ...config, token: key, bearer: '' })
+ }
+ }
+ }}
+ >
+ {apiKeys.map((key) => {
+ return (
+
+ {key.tags}
+
+ )
+ })}
+
+ {selectedToken?.tags === 'service_role' ? (
+
+ The Service role is a predefined Postgres
+ role with elevated privileges. It will bypass all Row Level Security (RLS) policies.
+
+ ) : (
+
+ The anonymous key will respect Row Level
+ Security (RLS) policies.
+
+ )}
+
+
Impersonate a user
+
+ Provide a JWT token of a user to receive events from the perspective of the user. This
+ respects RLS policies relevant for that particular user.
+
+
}
+ size="small"
+ className="flex-grow mt-2"
+ placeholder="Enter JWT token of a user"
+ defaultValue={tempConfig.bearer || ''}
+ onChange={(v) => setTempConfig({ ...tempConfig, bearer: v.target.value })}
+ />
+
+ Learn more about JWT tokens in{' '}
+
+ our docs
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/studio/components/interfaces/Realtime/Inspector/SelectedRealtimeMessagePanel.tsx b/studio/components/interfaces/Realtime/Inspector/SelectedRealtimeMessagePanel.tsx
new file mode 100644
index 00000000000..dedc56adffd
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/SelectedRealtimeMessagePanel.tsx
@@ -0,0 +1,38 @@
+import { LogData } from './Messages.types'
+import { jsonSyntaxHighlight, SelectionDetailedTimestampRow } from './MessagesFormatters'
+
+const LogsDivider = () => {
+ return (
+
+ )
+}
+
+export const SelectedRealtimeMessagePanel = ({ log }: { log: LogData }) => {
+ return (
+ <>
+
+
Message
+
+
+ {log.message}
+
+
+
+
+
+
+
+ )
+}
diff --git a/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx b/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx
new file mode 100644
index 00000000000..8dce33c9b25
--- /dev/null
+++ b/studio/components/interfaces/Realtime/Inspector/SendMessageModal.tsx
@@ -0,0 +1,72 @@
+import { Input, Modal } from 'ui'
+
+import CodeEditor from 'components/ui/CodeEditor'
+import { useEffect, useState } from 'react'
+import { tryParseJson } from 'lib/helpers'
+
+interface SendMessageModalProps {
+ visible: boolean
+ onSelectCancel: () => void
+ onSelectConfirm: (v: { message: string; payload: string }) => void
+}
+
+export const SendMessageModal = ({
+ visible,
+ onSelectCancel,
+ onSelectConfirm,
+}: SendMessageModalProps) => {
+ const [error, setError] = useState()
+ const [values, setValues] = useState({ message: 'test', payload: '{}' })
+
+ useEffect(() => {
+ if (visible) {
+ setError(undefined)
+ setValues({ message: 'test', payload: '{}' })
+ }
+ }, [visible])
+
+ return (
+ {
+ const payload = tryParseJson(values.payload)
+ if (payload === undefined) {
+ setError('Please provide a valid JSON')
+ } else {
+ onSelectConfirm(values)
+ }
+ }}
+ >
+
+
+
setValues({ ...values, message: v.target.value })}
+ />
+
+
Message payload
+
+ setValues({ ...values, payload: e ?? '{}' })
+ }
+ options={{ wordWrap: 'off', contextmenu: false }}
+ value={values.payload}
+ />
+ {error !== undefined && {error}
}
+
+
+
+
+
+ setSendMessageShown(true)}
+ />
+
+
+
setSendMessageShown(false)}
+ onSelectConfirm={(v) => {
+ sendMessage(v.message, v.payload)
+ setSendMessageShown(false)
+ }}
+ />
+
diff --git a/studio/components/ui/SchemaSelector.tsx b/studio/components/ui/SchemaSelector.tsx
index fa49707b839..f90227b9e9f 100644
--- a/studio/components/ui/SchemaSelector.tsx
+++ b/studio/components/ui/SchemaSelector.tsx
@@ -28,6 +28,7 @@ interface SchemaSelectorProps {
size?: 'tiny' | 'small'
showError?: boolean
selectedSchemaName: string
+ supportSelectAll?: boolean
onSelectSchema: (name: string) => void
onSelectCreateSchema?: () => void
}
@@ -37,6 +38,7 @@ const SchemaSelector = ({
size = 'tiny',
showError = true,
selectedSchemaName,
+ supportSelectAll = false,
onSelectSchema,
onSelectCreateSchema,
}: SchemaSelectorProps) => {
@@ -65,10 +67,8 @@ const SchemaSelector = ({
className="w-full [&>span]:w-full"
icon={
}
>
-
-
+
)}
@@ -100,7 +100,9 @@ const SchemaSelector = ({
>
schema
-
{selectedSchemaName}
+
+ {selectedSchemaName === '*' ? 'All schemas' : selectedSchemaName}
+
@@ -111,6 +113,25 @@ const SchemaSelector = ({
No schemas found
7 ? 'h-[210px]' : ''}>
+ {supportSelectAll && (
+ {
+ onSelectSchema('*')
+ setOpen(false)
+ }}
+ onClick={() => {
+ onSelectSchema('*')
+ setOpen(false)
+ }}
+ >
+ All schemas
+ {selectedSchemaName === '*' && (
+
+ )}
+
+ )}
{schemas?.map((schema) => (
{schema.name}
- {schema.name === selectedSchemaName && (
+ {selectedSchemaName === schema.name && (
)}
diff --git a/studio/pages/project/[ref]/realtime/inspector.tsx b/studio/pages/project/[ref]/realtime/inspector.tsx
new file mode 100644
index 00000000000..e23f5f7f97c
--- /dev/null
+++ b/studio/pages/project/[ref]/realtime/inspector.tsx
@@ -0,0 +1,21 @@
+import { PermissionAction } from '@supabase/shared-types/out/constants'
+import { NextPageWithLayout } from 'types'
+
+import { RealtimeInspector } from 'components/interfaces/Realtime/Inspector'
+import RealtimeLayout from 'components/layouts/RealtimeLayout/RealtimeLayout'
+import NoPermission from 'components/ui/NoPermission'
+import { useCheckPermissions } from 'hooks'
+
+export const InspectorPage: NextPageWithLayout = () => {
+ const canReadAPIKeys = useCheckPermissions(PermissionAction.READ, 'service_api_keys')
+
+ if (!canReadAPIKeys) {
+ return
+ }
+
+ return
+}
+
+InspectorPage.getLayout = (page) => {page}
+
+export default InspectorPage
diff --git a/studio/styles/react-data-grid-logs.scss b/studio/styles/react-data-grid-logs.scss
index a3396962b92..ba3f2440cbd 100644
--- a/studio/styles/react-data-grid-logs.scss
+++ b/studio/styles/react-data-grid-logs.scss
@@ -1,7 +1,7 @@
.data-grid--simple-logs {
.rdg-cell,
.rdg-cell span {
- @apply text-foreground-light font-normal #{!important};
+ @apply text-foreground-light font-normal;
border-left: none;
border-right: none;
}