Merge pull request #50 from supabase-community/feat/sign-in-dialog

feat: sign in dialog when clicking 'new database'

Author: gregnr

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

@@ -27,6 +27,7 @@ const dbManager = typeof window !== 'undefined' ? new DbManager() : undefined
 export default function AppProvider({ children }: AppProps) {
   const [isLoadingUser, setIsLoadingUser] = useState(true)
   const [user, setUser] = useState<User>()
+  const [isSignInDialogOpen, setIsSignInDialogOpen] = useState(false)
 
   const focusRef = useRef<FocusHandle>(null)
 
@@ -110,6 +111,8 @@ export default function AppProvider({ children }: AppProps) {
         isLoadingUser,
         signIn,
         signOut,
+        isSignInDialogOpen,
+        setIsSignInDialogOpen,
         focusRef,
         isPreview,
         dbManager,
@@ -131,6 +134,8 @@ export type AppContextValues = {
   isLoadingUser: boolean
   signIn: () => Promise<User | undefined>
   signOut: () => Promise<void>
+  isSignInDialogOpen: boolean
+  setIsSignInDialogOpen: (open: boolean) => void
   focusRef: RefObject<FocusHandle>
   isPreview: boolean
   dbManager?: DbManager

apps/postgres-new/components/chat.tsx

@@ -48,7 +48,7 @@ export function getInitialMessages(tables: TablesData): Message[] {
 }
 
 export default function Chat() {
-  const { user, isLoadingUser, focusRef } = useApp()
+  const { user, isLoadingUser, focusRef, setIsSignInDialogOpen } = useApp()
   const [inputFocusState, setInputFocusState] = useState(false)
 
   const {
@@ -323,9 +323,17 @@ export default function Chat() {
                 animate="show"
               >
                 <SignInButton />
-                <p className="font-lighter  text-center">
+                <p className="font-lighter text-center">
                   To prevent abuse we ask you to sign in before chatting with AI.
                 </p>
+                <p
+                  className="underline cursor-pointer text-primary/50"
+                  onClick={() => {
+                    setIsSignInDialogOpen(true)
+                  }}
+                >
+                  Why do I need to sign in?
+                </p>
               </m.div>
             )}
           </div>
@@ -372,6 +380,14 @@ export default function Chat() {
               <p className="font-lighter text-center text-sm">
                 To prevent abuse we ask you to sign in before chatting with AI.
               </p>
+              <p
+                className="underline cursor-pointer text-sm text-primary/50"
+                onClick={() => {
+                  setIsSignInDialogOpen(true)
+                }}
+              >
+                Why do I need to sign in?
+              </p>
             </m.div>
           )}
         </AnimatePresence>

apps/postgres-new/components/sidebar.tsx

@@ -30,6 +30,7 @@ import { downloadFile, titleToKebabCase } from '~/lib/util'
 import { cn } from '~/lib/utils'
 import { useApp } from './app-provider'
 import { CodeBlock } from './code-block'
+import SignInButton from './sign-in-button'
 import ThemeDropdown from './theme-dropdown'
 import {
   DropdownMenu,
@@ -40,14 +41,45 @@ import {
 } from './ui/dropdown-menu'
 
 export default function Sidebar() {
-  const { user, signOut, focusRef } = useApp()
+  const { user, signOut, focusRef, isSignInDialogOpen, setIsSignInDialogOpen } = useApp()
   let { id: currentDatabaseId } = useParams<{ id: string }>()
   const router = useRouter()
   const { data: databases, isLoading: isLoadingDatabases } = useDatabasesQuery()
   const [showSidebar, setShowSidebar] = useState(true)
 
   return (
     <>
+      <Dialog
+        open={isSignInDialogOpen}
+        onOpenChange={(open) => {
+          setIsSignInDialogOpen(open)
+        }}
+      >
+        <DialogContent className="max-w-2xl">
+          <DialogHeader>
+            <DialogTitle>Sign in to create a database</DialogTitle>
+            <div className="py-2 border-b" />
+          </DialogHeader>
+          <h2 className="font-bold">Why do I need to sign in?</h2>
+          <p>
+            Even though your Postgres databases run{' '}
+            <a
+              className="underline"
+              href="https://pglite.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              directly in the browser
+            </a>
+            , we still need to connect to an API that runs the large language model (required for
+            all database interactions).
+          </p>
+          <p>We ask you to sign in to prevent API abuse.</p>
+          <div className="flex justify-center items-center my-3">
+            <SignInButton />
+          </div>
+        </DialogContent>
+      </Dialog>
       <AnimatePresence initial={false} mode="popLayout">
         {showSidebar && (
           <m.div
@@ -83,8 +115,12 @@ export default function Sidebar() {
               <m.div layout="position" layoutId="new-database-button">
                 <Button
                   onClick={() => {
-                    router.push('/')
-                    focusRef.current?.focus()
+                    if (!user) {
+                      setIsSignInDialogOpen(true)
+                    } else {
+                      router.push('/')
+                      focusRef.current?.focus()
+                    }
                   }}
                   className="gap-2"
                 >
@@ -176,8 +212,12 @@ export default function Sidebar() {
                   <Button
                     size={'icon'}
                     onClick={() => {
-                      router.push('/')
-                      focusRef.current?.focus()
+                      if (!user) {
+                        setIsSignInDialogOpen(true)
+                      } else {
+                        router.push('/')
+                        focusRef.current?.focus()
+                      }
                     }}
                   >
                     <PackagePlus size={14} />
@@ -201,24 +241,24 @@ export default function Sidebar() {
               </TooltipContent>
             </Tooltip>
             {user && (
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <m.div layout="position" layoutId="sign-out-button">
-                  <Button
-                    size={'icon'}
-                    variant="secondary"
-                    onClick={async () => {
-                      await signOut()
-                    }}
-                  >
-                    <LogOut size={16} strokeWidth={2} />
-                  </Button>
-                </m.div>
-              </TooltipTrigger>
-              <TooltipContent side="right">
-                <p>Sign out</p>
-              </TooltipContent>
-            </Tooltip>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <m.div layout="position" layoutId="sign-out-button">
+                    <Button
+                      size={'icon'}
+                      variant="secondary"
+                      onClick={async () => {
+                        await signOut()
+                      }}
+                    >
+                      <LogOut size={16} strokeWidth={2} />
+                    </Button>
+                  </m.div>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <p>Sign out</p>
+                </TooltipContent>
+              </Tooltip>
             )}
           </div>
         </div>
@@ -258,7 +298,7 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
             <DialogTitle>Deployments are in Private Alpha</DialogTitle>
             <div className="py-2 border-b" />
           </DialogHeader>
-          <h2 className="font-medium">What are deployments?</h2>
+          <h2 className="font-bold">What are deployments?</h2>
           <p>
             Deploy your database to a serverless PGlite instance so that it can be accessed outside
             the browser using any Postgres client:

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

@@ -22,8 +22,6 @@ export const useIsOnDeployWaitlistQuery = (
         .eq('user_id', user.id)
         .maybeSingle()
 
-      console.log({ waitlistRecord })
-
       if (waitlistError) {
         throw waitlistError
       }