Merge pull request #26 from supabase-community/feat/download-db

feat: download databases
supabase-community · Aug 8, 2024 · 11dde05 · 11dde05
2 parents 17c8de6 + d46afc0
commit 11dde05
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 1 deletion.
diff --git a/apps/postgres-new/components/sidebar.tsx b/apps/postgres-new/components/sidebar.tsx
@@ -6,6 +6,7 @@ import {
   ArrowRightToLine,
   CircleEllipsis,
   Database as DbIcon,
+  Download,
   Loader,
   LogOut,
   PackagePlus,
@@ -26,6 +27,7 @@ import { useDatabasesQuery } from '~/data/databases/databases-query'
 import { useDeployWaitlistCreateMutation } from '~/data/deploy-waitlist/deploy-waitlist-create-mutation'
 import { useIsOnDeployWaitlistQuery } from '~/data/deploy-waitlist/deploy-waitlist-query'
 import { Database } from '~/lib/db'
+import { downloadFile, titleToKebabCase } from '~/lib/util'
 import { cn } from '~/lib/utils'
 import { useApp } from './app-provider'
 import { CodeBlock } from './code-block'
@@ -208,7 +210,7 @@ type DatabaseMenuItemProps = {
 
 function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
   const router = useRouter()
-  const { user } = useApp()
+  const { user, dbManager } = useApp()
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
   const { mutateAsync: deleteDatabase } = useDatabaseDeleteMutation()
   const { mutateAsync: updateDatabase } = useDatabaseUpdateMutation()
@@ -364,6 +366,28 @@ function DatabaseMenuItem({ database, isActive }: DatabaseMenuItemProps) {
                   onClick={async (e) => {
                     e.preventDefault()
 
+                    if (!dbManager) {
+                      throw new Error('dbManager is not available')
+                    }
+
+                    const db = await dbManager.getDbInstance(database.id)
+                    const dumpBlob = await db.dumpDataDir()
+
+                    const fileName = `${titleToKebabCase(database.name ?? 'My Database')}-${Date.now()}`
+                    const file = new File([dumpBlob], fileName, { type: dumpBlob.type })
+
+                    downloadFile(file)
+                  }}
+                >
+                  <Download size={16} strokeWidth={2} className="flex-shrink-0" />
+
+                  <span>Download</span>
+                </Button>
+                <Button
+                  className="bg-inherit justify-start hover:bg-neutral-200 flex gap-3"
+                  onClick={async (e) => {
+                    e.preventDefault()
+
                     setIsDeployDialogOpen(true)
                     setIsPopoverOpen(false)
                   }}

diff --git a/apps/postgres-new/lib/util.ts b/apps/postgres-new/lib/util.ts
@@ -38,3 +38,12 @@ export function isAutomatedUserMessage(message: Message) {
     message.data.automated === true
   )
 }
+
+export function titleToKebabCase(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[_\s]+/g, '-') // Replace spaces and underscores with dashes
+    .replace(/[^a-z0-9-]/g, '') // Remove any non-alphanumeric characters except dashes
+    .replace(/-+/g, '-') // Replace multiple dashes with a single dash
+    .replace(/^-|-$/g, '') // Remove leading and trailing dashes
+}