Skip to content

Commit

Permalink
Merge pull request #111 from supabase-community/feat/live-share-faqs
Browse files Browse the repository at this point in the history 
Live share FAQs
  • Loading branch information
@jgoux
jgoux authored Oct 8, 2024
2 parents 92bee93 + 2e175b6 commit 75ba27e
Show file tree
Hide file tree
Showing 2 changed files with 230 additions and 124 deletions.
114 changes: 110 additions & 4 deletions apps/postgres-new/components/chat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,11 @@ import { cn } from '~/lib/utils'
import { AiIconAnimation } from './ai-icon-animation'
import { useApp } from './app-provider'
import ChatMessage from './chat-message'
import SignInButton from './sign-in-button'
import { useWorkspace } from './workspace'
import { CopyableField } from './copyable-field'
import SignInButton from './sign-in-button'
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
import { useWorkspace } from './workspace'

export function getInitialMessages(tables: TablesData): Message[] {
return [
Expand Down Expand Up @@ -538,8 +539,8 @@ function LiveShareOverlay(props: { databaseId: string }) {

if (liveShare.isLiveSharing && liveShare.databaseId === props.databaseId) {
return (
<div className="h-full w-full max-w-4xl flex flex-col gap-10 p-10 absolute backdrop-blur-sm bg-card/90 z-10">
<div className="flex items-center justify-center h-full flex-col gap-y-7">
<div className="h-full w-full max-w-4xl absolute flex flex-col items-stretch justify-center backdrop-blur-sm bg-card/90 z-10">
<div className="flex flex-col items-center justify-start gap-y-7 overflow-y-auto pt-20 pb-10">
<div className="w-full text-left">
<p className="text-lg">Access your in-browser database</p>
<p className="text-xs text-muted-foreground">
Expand Down Expand Up @@ -599,6 +600,111 @@ function LiveShareOverlay(props: { databaseId: string }) {
<PlugIcon size={16} />
<span>Stop sharing database</span>
</Button>

<div className="self-stretch border-b border-b-foreground/15 my-4" />

<Accordion type="single" collapsible className="self-stretch flex flex-col gap-2">
<AccordionItem value="postgres-clients" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>Can I connect using any Postgres client?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
Yes! Any standard Postgres client that communicates using the Postgres wire
protocol is supported. Connections are established over an encrypted TLS channel
using the SNI extension, so your client will also need to support TLS with SNI
(most modern clients support this).
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="concurrent-connections" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>How many concurrent connections can I have?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
PGlite operates in single-user mode, so you can only establish one connection at a
time per database. If you attempt to establish more than one connection using the
Live Share connection string, you will receive a &quot;too many clients&quot;
error.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="orms" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>Does this work with ORMs?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
Yes, as long as your ORM doesn&apos;t require multiple concurrent connections.
Some ORMs like Prisma run a shadow database in parallel to your main database in
order to generate migrations. In order to use Prisma, you will need to{' '}
<a
href="https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/shadow-database#manually-configuring-the-shadow-database"
target="__blank"
rel="noopener noreferrer"
>
manually configure
</a>{' '}
your shadow database to point to another temporary database.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="connection-length" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>How long will connections last?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
You can connect over Live Share for as long as your browser tab is active. Once
your tab is closed, the any existing connection will terminate and you will no
longer be able to connect to your database using the connection string.
</p>
<p>
To prevent overloading the system, we also enforce a 5 minute idle timeout per
client connection and 1 hour total timeout per database. If you need to
communicate longer than these limits, simply reconnect after the timeout.
</p>
</AccordionContent>
</AccordionItem>
<AccordionItem value="under-the-hood" className="border rounded-md">
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
<span>How does this work under the hood?</span>
</div>
</AccordionTrigger>
<AccordionContent className="p-3 prose prose-sm">
<p>
We host a{' '}
<a
href="https://github.com/supabase-community/postgres-new/tree/main/apps/browser-proxy"
target="__blank"
rel="noopener noreferrer"
>
lightweight proxy
</a>{' '}
between your Postgres client and your in-browser PGlite database. It uses{' '}
<a
href="https://github.com/supabase-community/pg-gateway"
target="__blank"
rel="noopener noreferrer"
>
pg-gateway
</a>{' '}
to proxy inbound TCP connections to the corresponding browser instance via a Web
Socket reverse tunnel.
</p>
</AccordionContent>
</AccordionItem>
</Accordion>
</div>
</div>
)
Expand Down
240 changes: 120 additions & 120 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 75ba27e

Please sign in to comment.