Skip to content

Commit 4d6c416

Browse files
gregnrgregnr
authored
Merge pull request supabase-community#50 from supabase-community/feat/sign-in-dialog
feat: sign in dialog when clicking 'new database'
2 parents fb187dd + 74a8929 commit 4d6c416

File tree

4 files changed

+87
-28
lines changed

4 files changed

+87
-28
lines changed

‎apps/postgres-new/components/app-provider.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ const dbManager = typeof window !== 'undefined' ? new DbManager() : undefined
2727
export default function AppProvider({ children }: AppProps) {
2828
const [isLoadingUser, setIsLoadingUser] = useState(true)
2929
const [user, setUser] = useState<User>()
30+
const [isSignInDialogOpen, setIsSignInDialogOpen] = useState(false)
3031

3132
const focusRef = useRef<FocusHandle>(null)
3233

@@ -110,6 +111,8 @@ export default function AppProvider({ children }: AppProps) {
110111
isLoadingUser,
111112
signIn,
112113
signOut,
114+
isSignInDialogOpen,
115+
setIsSignInDialogOpen,
113116
focusRef,
114117
isPreview,
115118
dbManager,
@@ -131,6 +134,8 @@ export type AppContextValues = {
131134
isLoadingUser: boolean
132135
signIn: () => Promise<User | undefined>
133136
signOut: () => Promise<void>
137+
isSignInDialogOpen: boolean
138+
setIsSignInDialogOpen: (open: boolean) => void
134139
focusRef: RefObject<FocusHandle>
135140
isPreview: boolean
136141
dbManager?: DbManager

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export function getInitialMessages(tables: TablesData): Message[] {
4848
}
4949

5050
export default function Chat() {
51-
const { user, isLoadingUser, focusRef } = useApp()
51+
const { user, isLoadingUser, focusRef, setIsSignInDialogOpen } = useApp()
5252
const [inputFocusState, setInputFocusState] = useState(false)
5353

5454
const {
@@ -323,9 +323,17 @@ export default function Chat() {
323323
animate="show"
324324
>
325325
<SignInButton />
326-
<p className="font-lighter text-center">
326+
<p className="font-lighter text-center">
327327
To prevent abuse we ask you to sign in before chatting with AI.
328328
</p>
329+
<p
330+
className="underline cursor-pointer text-primary/50"
331+
onClick={() => {
332+
setIsSignInDialogOpen(true)
333+
}}
334+
>
335+
Why do I need to sign in?
336+
</p>
329337
</m.div>
330338
)}
331339
</div>
@@ -372,6 +380,14 @@ export default function Chat() {
372380
<p className="font-lighter text-center text-sm">
373381
To prevent abuse we ask you to sign in before chatting with AI.
374382
</p>
383+
<p
384+
className="underline cursor-pointer text-sm text-primary/50"
385+
onClick={() => {
386+
setIsSignInDialogOpen(true)
387+
}}
388+
>
389+
Why do I need to sign in?
390+
</p>
375391
</m.div>
376392
)}
377393
</AnimatePresence>

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

Lines changed: 64 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { downloadFile, titleToKebabCase } from '~/lib/util'
3030
import { cn } from '~/lib/utils'
3131
import { useApp } from './app-provider'
3232
import { CodeBlock } from './code-block'
33+
import SignInButton from './sign-in-button'
3334
import ThemeDropdown from './theme-dropdown'
3435
import {
3536
DropdownMenu,
@@ -40,14 +41,45 @@ import {
4041
} from './ui/dropdown-menu'
4142

4243
export default function Sidebar() {
43-
const { user, signOut, focusRef } = useApp()
44+
const { user, signOut, focusRef, isSignInDialogOpen, setIsSignInDialogOpen } = useApp()
4445
let { id: currentDatabaseId } = useParams<{ id: string }>()
4546
const router = useRouter()
4647
const { data: databases, isLoading: isLoadingDatabases } = useDatabasesQuery()
4748
const [showSidebar, setShowSidebar] = useState(true)
4849

4950
return (
5051
<>
52+
<Dialog
53+
open={isSignInDialogOpen}
54+
onOpenChange={(open) => {
55+
setIsSignInDialogOpen(open)
56+
}}
57+
>
58+
<DialogContent className="max-w-2xl">
59+
<DialogHeader>
60+
<DialogTitle>Sign in to create a database</DialogTitle>
61+
<div className="py-2 border-b" />
62+
</DialogHeader>
63+
<h2 className="font-bold">Why do I need to sign in?</h2>
64+
<p>
65+
Even though your Postgres databases run{' '}
66+
<a
67+
className="underline"
68+
href="https://pglite.dev"
69+
target="_blank"
70+
rel="noopener noreferrer"
71+
>
72+
directly in the browser
73+
</a>
74+
, we still need to connect to an API that runs the large language model (required for
75+
all database interactions).
76+
</p>
77+
<p>We ask you to sign in to prevent API abuse.</p>
78+
<div className="flex justify-center items-center my-3">
79+
<SignInButton />
80+
</div>
81+
</DialogContent>
82+
</Dialog>
5183
<AnimatePresence initial={false} mode="popLayout">
5284
{showSidebar && (
5385
<m.div
@@ -83,8 +115,12 @@ export default function Sidebar() {
83115
<m.div layout="position" layoutId="new-database-button">
84116
<Button
85117
onClick={() => {
86-
router.push('/')
87-
focusRef.current?.focus()
118+
if (!user) {
119+
setIsSignInDialogOpen(true)
120+
} else {
121+
router.push('/')
122+
focusRef.current?.focus()
123+
}
88124
}}
89125
className="gap-2"
90126
>
@@ -176,8 +212,12 @@ export default function Sidebar() {
176212
<Button
177213
size={'icon'}
178214
onClick={() => {
179-
router.push('/')
180-
focusRef.current?.focus()
215+
if (!user) {
216+
setIsSignInDialogOpen(true)
217+
} else {
218+
router.push('/')
219+
focusRef.current?.focus()
220+
}
181221
}}
182222
>
183223
<PackagePlus size={14} />
@@ -201,24 +241,24 @@ export default function Sidebar() {
201241
</TooltipContent>
202242
</Tooltip>
203243
{user && (
204-
<Tooltip>
205-
<TooltipTrigger asChild>
206-
<m.div layout="position" layoutId="sign-out-button">
207-
<Button
208-
size={'icon'}
209-
variant="secondary"
210-
onClick={async () => {
211-
await signOut()
212-
}}
213-
>
214-
<LogOut size={16} strokeWidth={2} />
215-
</Button>
216-
</m.div>
217-
</TooltipTrigger>
218-
<TooltipContent side="right">
219-
<p>Sign out</p>
220-
</TooltipContent>
221-
</Tooltip>
244+
<Tooltip>
245+
<TooltipTrigger asChild>
246+
<m.div layout="position" layoutId="sign-out-button">
247+
<Button
248+
size={'icon'}
249+
variant="secondary"
250+
onClick={async () => {
251+
await signOut()
252+
}}
253+
>
254+
<LogOut size={16} strokeWidth={2} />
255+
</Button>
256+
</m.div>
257+
</TooltipTrigger>
258+
<TooltipContent side="right">
259+
<p>Sign out</p>
260+
</TooltipContent>
261+
</Tooltip>
222262
)}
223263
</div>
224264
</div>
@@ -258,7 +298,7 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
258298
<DialogTitle>Deployments are in Private Alpha</DialogTitle>
259299
<div className="py-2 border-b" />
260300
</DialogHeader>
261-
<h2 className="font-medium">What are deployments?</h2>
301+
<h2 className="font-bold">What are deployments?</h2>
262302
<p>
263303
Deploy your database to a serverless PGlite instance so that it can be accessed outside
264304
the browser using any Postgres client:

‎apps/postgres-new/data/deploy-waitlist/deploy-waitlist-query.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,6 @@ export const useIsOnDeployWaitlistQuery = (
2222
.eq('user_id', user.id)
2323
.maybeSingle()
2424

25-
console.log({ waitlistRecord })
26-
2725
if (waitlistError) {
2826
throw waitlistError
2927
}

0 commit comments

Comments
 (0)