Skip to content

Commit 75ba27e

Browse files
jgouxjgoux
authored
Merge pull request #111 from supabase-community/feat/live-share-faqs
Live share FAQs
2 parents 92bee93 + 2e175b6 commit 75ba27e

File tree

2 files changed

+230
-124
lines changed

2 files changed

+230
-124
lines changed

‎apps/postgres-new/components/chat.tsx‎

Lines changed: 110 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@ import { cn } from '~/lib/utils'
2323
import { AiIconAnimation } from './ai-icon-animation'
2424
import { useApp } from './app-provider'
2525
import ChatMessage from './chat-message'
26-
import SignInButton from './sign-in-button'
27-
import { useWorkspace } from './workspace'
2826
import { CopyableField } from './copyable-field'
27+
import SignInButton from './sign-in-button'
28+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion'
2929
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
30+
import { useWorkspace } from './workspace'
3031

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

539540
if (liveShare.isLiveSharing && liveShare.databaseId === props.databaseId) {
540541
return (
541-
<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">
542-
<div className="flex items-center justify-center h-full flex-col gap-y-7">
542+
<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">
543+
<div className="flex flex-col items-center justify-start gap-y-7 overflow-y-auto pt-20 pb-10">
543544
<div className="w-full text-left">
544545
<p className="text-lg">Access your in-browser database</p>
545546
<p className="text-xs text-muted-foreground">
@@ -599,6 +600,111 @@ function LiveShareOverlay(props: { databaseId: string }) {
599600
<PlugIcon size={16} />
600601
<span>Stop sharing database</span>
601602
</Button>
603+
604+
<div className="self-stretch border-b border-b-foreground/15 my-4" />
605+
606+
<Accordion type="single" collapsible className="self-stretch flex flex-col gap-2">
607+
<AccordionItem value="postgres-clients" className="border rounded-md">
608+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
609+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
610+
<span>Can I connect using any Postgres client?</span>
611+
</div>
612+
</AccordionTrigger>
613+
<AccordionContent className="p-3 prose prose-sm">
614+
<p>
615+
Yes! Any standard Postgres client that communicates using the Postgres wire
616+
protocol is supported. Connections are established over an encrypted TLS channel
617+
using the SNI extension, so your client will also need to support TLS with SNI
618+
(most modern clients support this).
619+
</p>
620+
</AccordionContent>
621+
</AccordionItem>
622+
<AccordionItem value="concurrent-connections" className="border rounded-md">
623+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
624+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
625+
<span>How many concurrent connections can I have?</span>
626+
</div>
627+
</AccordionTrigger>
628+
<AccordionContent className="p-3 prose prose-sm">
629+
<p>
630+
PGlite operates in single-user mode, so you can only establish one connection at a
631+
time per database. If you attempt to establish more than one connection using the
632+
Live Share connection string, you will receive a &quot;too many clients&quot;
633+
error.
634+
</p>
635+
</AccordionContent>
636+
</AccordionItem>
637+
<AccordionItem value="orms" className="border rounded-md">
638+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
639+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
640+
<span>Does this work with ORMs?</span>
641+
</div>
642+
</AccordionTrigger>
643+
<AccordionContent className="p-3 prose prose-sm">
644+
<p>
645+
Yes, as long as your ORM doesn&apos;t require multiple concurrent connections.
646+
Some ORMs like Prisma run a shadow database in parallel to your main database in
647+
order to generate migrations. In order to use Prisma, you will need to{' '}
648+
<a
649+
href="https://www.prisma.io/docs/orm/prisma-migrate/understanding-prisma-migrate/shadow-database#manually-configuring-the-shadow-database"
650+
target="__blank"
651+
rel="noopener noreferrer"
652+
>
653+
manually configure
654+
</a>{' '}
655+
your shadow database to point to another temporary database.
656+
</p>
657+
</AccordionContent>
658+
</AccordionItem>
659+
<AccordionItem value="connection-length" className="border rounded-md">
660+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
661+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
662+
<span>How long will connections last?</span>
663+
</div>
664+
</AccordionTrigger>
665+
<AccordionContent className="p-3 prose prose-sm">
666+
<p>
667+
You can connect over Live Share for as long as your browser tab is active. Once
668+
your tab is closed, the any existing connection will terminate and you will no
669+
longer be able to connect to your database using the connection string.
670+
</p>
671+
<p>
672+
To prevent overloading the system, we also enforce a 5 minute idle timeout per
673+
client connection and 1 hour total timeout per database. If you need to
674+
communicate longer than these limits, simply reconnect after the timeout.
675+
</p>
676+
</AccordionContent>
677+
</AccordionItem>
678+
<AccordionItem value="under-the-hood" className="border rounded-md">
679+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
680+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
681+
<span>How does this work under the hood?</span>
682+
</div>
683+
</AccordionTrigger>
684+
<AccordionContent className="p-3 prose prose-sm">
685+
<p>
686+
We host a{' '}
687+
<a
688+
href="https://github.com/supabase-community/postgres-new/tree/main/apps/browser-proxy"
689+
target="__blank"
690+
rel="noopener noreferrer"
691+
>
692+
lightweight proxy
693+
</a>{' '}
694+
between your Postgres client and your in-browser PGlite database. It uses{' '}
695+
<a
696+
href="https://github.com/supabase-community/pg-gateway"
697+
target="__blank"
698+
rel="noopener noreferrer"
699+
>
700+
pg-gateway
701+
</a>{' '}
702+
to proxy inbound TCP connections to the corresponding browser instance via a Web
703+
Socket reverse tunnel.
704+
</p>
705+
</AccordionContent>
706+
</AccordionItem>
707+
</Accordion>
602708
</div>
603709
</div>
604710
)

‎package-lock.json‎

Lines changed: 120 additions & 120 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)