Skip to content

Commit f888703

Browse files
gregnrgregnr
committed
feat: custom rename message based on database count
1 parent 3c9ee8d commit f888703

File tree

3 files changed

+139
-64
lines changed

3 files changed

+139
-64
lines changed

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

Lines changed: 137 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,11 @@ import 'chart.js/auto'
44
import 'chartjs-adapter-date-fns'
55

66
import { LazyMotion, m } from 'framer-motion'
7+
import { Loader } from 'lucide-react'
78
import Link from 'next/link'
89
import { PropsWithChildren } from 'react'
910
import { TooltipProvider } from '~/components/ui/tooltip'
11+
import { useDatabasesQuery } from '~/data/databases/databases-query'
1012
import { useBreakpoint } from '~/lib/use-breakpoint'
1113
import {
1214
currentDomainHostname,
@@ -73,7 +75,9 @@ function RenameBanner() {
7375
}
7476

7577
function RenameDialog() {
76-
const { isRenameDialogOpen, setIsRenameDialogOpen } = useApp()
78+
const { isRenameDialogOpen, setIsRenameDialogOpen, dbManager, isLegacyDomain } = useApp()
79+
const { data: databases, isLoading: isLoadingDatabases } = useDatabasesQuery()
80+
7781
return (
7882
<Dialog open={isRenameDialogOpen} onOpenChange={(open) => setIsRenameDialogOpen(open)}>
7983
<DialogContent className="max-w-2xl">
@@ -96,70 +100,141 @@ function RenameDialog() {
96100
.
97101
</p>
98102

99-
<h3 className="font-bold">Action required</h3>
103+
<div className="my-2 border-b" />
100104

101-
<p>
102-
You will need to{' '}
103-
<Link
104-
className="underline"
105-
href={`${legacyDomainUrl}/export`}
106-
rel="noopener noreferrer"
107-
target="_blank"
108-
>
109-
export
110-
</Link>{' '}
111-
your existing databases from {legacyDomainHostname} and{' '}
112-
<Link
113-
className="underline"
114-
href={`${currentDomainUrl}/import`}
115-
rel="noopener noreferrer"
116-
target="_blank"
105+
{isLegacyDomain && isLoadingDatabases ? (
106+
<div className="self-stretch flex justify-center items-center">
107+
<Loader className="animate-spin" size={36} strokeWidth={0.75} />
108+
</div>
109+
) : (
110+
<m.div
111+
className="flex flex-col gap-4"
112+
variants={{
113+
hidden: { opacity: 0, y: -10 },
114+
show: { opacity: 1, y: 0 },
115+
}}
116+
initial="hidden"
117+
animate="show"
117118
>
118-
import
119-
</Link>{' '}
120-
them at {currentDomainHostname} if you wish to continue using them.
121-
</p>
119+
{isLegacyDomain && databases && databases.length === 0 ? (
120+
<>
121+
<h3 className="font-bold">No action required</h3>
122122

123-
<Accordion type="single" collapsible>
124-
<AccordionItem value="item-1" className="border rounded-md">
125-
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
126-
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
127-
<span>Why do I need to export my databases?</span>
128-
</div>
129-
</AccordionTrigger>
130-
<AccordionContent className="p-3 prose prose-sm">
131-
<p>
132-
Since PGlite databases are stored in your browser&apos;s IndexedDB storage, other
133-
domains like{' '}
134-
<a href={currentDomainUrl} className="underline">
135-
{currentDomainHostname}
136-
</a>{' '}
137-
cannot access them directly (this is a security restriction built into every
138-
browser).
139-
</p>
140-
</AccordionContent>
141-
</AccordionItem>
142-
</Accordion>
143-
144-
<p className="prose">
145-
To transfer your databases:
146-
<ol>
147-
<li>
148-
Navigate to{' '}
149-
<Link className="underline" href={`${legacyDomainUrl}/export`}>
150-
{legacyDomainHostname}/export
151-
</Link>{' '}
152-
and click <strong>Export</strong>
153-
</li>
154-
<li>
155-
Navigate to{' '}
156-
<Link className="underline" href={`${currentDomainUrl}/import`}>
157-
{currentDomainHostname}/import
158-
</Link>{' '}
159-
and click <strong>Import</strong>
160-
</li>
161-
</ol>
162-
</p>
123+
<p>Looks like you don't have any existing databases that you need to transfer.</p>
124+
125+
<p>
126+
{' '}
127+
Head on over to{' '}
128+
<a href={currentDomainUrl} className="underline">
129+
{currentDomainHostname}
130+
</a>{' '}
131+
to get started.
132+
</p>
133+
</>
134+
) : (
135+
<>
136+
<h3 className="font-bold">Action required</h3>
137+
138+
<div className="prose">
139+
{isLegacyDomain && databases ? (
140+
<>
141+
You have {databases.length} existing{' '}
142+
{databases.length === 1 ? 'database' : 'databases'} on {legacyDomainHostname}.
143+
If you wish to continue using {databases.length === 1 ? 'it' : 'them'}, you
144+
will need to{' '}
145+
<Link
146+
className="underline"
147+
href={`${legacyDomainUrl}/export`}
148+
rel="noopener noreferrer"
149+
target="_blank"
150+
>
151+
export
152+
</Link>{' '}
153+
{databases.length === 1 ? 'it' : 'them'}, then{' '}
154+
<Link
155+
className="underline"
156+
href={`${currentDomainUrl}/import`}
157+
rel="noopener noreferrer"
158+
target="_blank"
159+
>
160+
import
161+
</Link>{' '}
162+
{databases.length === 1 ? 'it' : 'them'} at {currentDomainHostname}.
163+
</>
164+
) : (
165+
<>
166+
If you have existing database on {legacyDomainHostname} and wish continue
167+
using them, you will need to{' '}
168+
<Link
169+
className="underline"
170+
href={`${legacyDomainUrl}/export`}
171+
rel="noopener noreferrer"
172+
target="_blank"
173+
>
174+
export
175+
</Link>{' '}
176+
them, then{' '}
177+
<Link
178+
className="underline"
179+
href={`${currentDomainUrl}/import`}
180+
rel="noopener noreferrer"
181+
target="_blank"
182+
>
183+
import
184+
</Link>{' '}
185+
them at {currentDomainHostname}.
186+
</>
187+
)}
188+
</div>
189+
190+
<Accordion type="single" collapsible>
191+
<AccordionItem value="item-1" className="border rounded-md">
192+
<AccordionTrigger className="p-0 gap-2 px-3 py-2">
193+
<div className="flex gap-2 items-center font-normal text-lighter text-sm">
194+
<span>Why do I need to export my databases?</span>
195+
</div>
196+
</AccordionTrigger>
197+
<AccordionContent className="p-3 prose prose-sm">
198+
<p>
199+
Since PGlite databases are stored in your browser&apos;s IndexedDB storage,
200+
other domains like{' '}
201+
<a href={currentDomainUrl} className="underline">
202+
{currentDomainHostname}
203+
</a>{' '}
204+
cannot access them directly (this is a security restriction built into every
205+
browser).
206+
</p>
207+
</AccordionContent>
208+
</AccordionItem>
209+
</Accordion>
210+
<p>
211+
The deadline to transfer your data is November 15, 2024. If you don't transition
212+
to {currentDomainHostname} by then, you will lose your data.
213+
</p>
214+
215+
<p className="prose">
216+
To transfer your databases:
217+
<ol>
218+
<li>
219+
Navigate to{' '}
220+
<Link className="underline" href={`${legacyDomainUrl}/export`}>
221+
{legacyDomainHostname}/export
222+
</Link>{' '}
223+
and click <strong>Export</strong>
224+
</li>
225+
<li>
226+
Navigate to{' '}
227+
<Link className="underline" href={`${currentDomainUrl}/import`}>
228+
{currentDomainHostname}/import
229+
</Link>{' '}
230+
and click <strong>Import</strong>
231+
</li>
232+
</ol>
233+
</p>
234+
</>
235+
)}
236+
</m.div>
237+
)}
163238
</DialogContent>
164239
</Dialog>
165240
)

‎apps/postgres-new/components/ui/accordion.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
2424
<AccordionPrimitive.Trigger
2525
ref={ref}
2626
className={cn(
27-
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
27+
'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180 outline-none',
2828
className
2929
)}
3030
{...props}

‎apps/postgres-new/lib/db/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,7 +247,7 @@ export class DbManager {
247247
where is_hidden = false
248248
`
249249
const [{ count }] = messages ?? []
250-
if (!count) {
250+
if (count === undefined) {
251251
throw new Error('Failed to count databases')
252252
}
253253
return count

0 commit comments

Comments
 (0)