mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
09a245d72d
The Realtime Inspector now checks the Realtime publication before showing setup guidance. Projects with published tables get the join-channel view even before this Inspector session receives any messages; unconfigured projects keep the setup guide. Setup guidance also stays hidden while publications are loading or unavailable. Joining a channel and displaying received messages retain their existing behavior. Addresses [FE-4520](https://linear.app/supabase/issue/FE-4520/realtime-inspector-ui-implies-i-am-not-using-realtime-despite-already). ## To test - With no tables in `supabase_realtime`, open Realtime → Inspector and confirm the setup guide appears. - Enable Realtime on a table and confirm a client receives a database change. Open the Inspector without joining a channel: it should show “Join a channel to start listening to messages” and no setup guide. - Join a channel, trigger a table change, and check the event and payload appear. Stop listening and confirm messages remain visible. - Open Policies, then return to the Inspector and confirm the setup guide stays hidden for the configured project. - Join a broadcast-only channel with no incoming messages and confirm the messages view appears immediately. ## Validation Reproduced the original prompt locally with a working Realtime table, then verified the fix in the browser, including an independent client subscription, a live INSERT in the Inspector, navigation, stopping, and the unconfigured state. Temporary test data and services were cleaned up. All nine new regression tests pass; four fail against the original code. Typecheck, formatting, lint ratchet, Knip, and the case-sensitivity check pass. The full Studio suite passed 7,799 tests with one unrelated Explorer test failure; that test passed on a focused rerun alongside the Inspector tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * The Realtime inspector keeps the messages view visible while publication status is loading or unavailable, and when a channel is joined or messages are present. * Setup guidance appears only after publications load successfully and confirm that Realtime is unavailable, with no channel or messages to show. This includes cases where there are no publications, the Realtime publication has no tables, or only a differently named publication exists. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
Writing components
Where to create your components
- For components that declare the general structure and layout of a page:
/components/layouts/xxx
- For components that are tightly coupled to a specific interface:
/components/interfaces/xxx
- For components that are meant to be reusable across multiple pages:
/components/ui/xxx
- Note: We're gradually moving files out of the
to-be-cleanedfolder into the respective folders as we refactor
Component structure
- If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an
index.tsxas an entry point - Otherwise it can just be a file on its own
- For example:
-
components/ui - SampleComponentA - SampleComponentA.tsx - SampleComponentA.constants.ts - SampleComponentA.utils.ts - SampleComponentA.types.ts - index.ts - SampleComponentB.tsx
-
Template for building components
// Declare the prop types of your component
interface ComponentAProps {
sampleProp: string
}
// Name your component accordingly — use a named export, not a default export
export const ComponentA = ({ sampleProp }: ComponentAProps) => {
return <div>ComponentA: {sampleProp}</div>
}