Skip to content

Commit b57a7cc

Browse files
gregnrgregnr
authored
Merge pull request supabase-community#19 from supabase-community/feat/local-database-label
feat: local-only database label + component refactors
2 parents 8efb086 + 57b2627 commit b57a7cc

File tree

8 files changed

+509
-410
lines changed

8 files changed

+509
-410
lines changed

‎apps/postgres-new/app/db/[id]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,5 @@ export default function Page({ params }: { params: { id: string } }) {
2020
run()
2121
}, [databaseId, router])
2222

23-
return <Workspace databaseId={databaseId} />
23+
return <Workspace databaseId={databaseId} visibility="local" />
2424
}

‎apps/postgres-new/app/page.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default function Page() {
6262
return (
6363
<Workspace
6464
databaseId={nextDatabaseId}
65+
visibility="local"
6566
onStart={async () => {
6667
// Make the DB no longer hidden
6768
await updateDatabase({ id: nextDatabaseId, name: null, isHidden: false })

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

Lines changed: 73 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,19 @@ import { tabsSchema, TabValue } from '~/lib/schema'
1212
import { assertDefined, isMigrationStatement } from '~/lib/sql-util'
1313
import { ToolInvocation } from '~/lib/tools'
1414
import { useBreakpoint } from '~/lib/use-breakpoint'
15+
import { cn } from '~/lib/utils'
1516
import { useApp } from './app-provider'
1617
import SchemaGraph from './schema/graph'
1718
import { useWorkspace } from './workspace'
1819

1920
const initialMigrationSql = '-- Migrations will appear here as you chat with AI\n'
2021
const initialSeedSql = '-- Seeds will appear here as you chat with AI\n'
2122

22-
export type IDEProps = PropsWithChildren
23+
export type IDEProps = PropsWithChildren<{
24+
className?: string
25+
}>
2326

24-
export default function IDE({ children }: IDEProps) {
25-
const { pgliteVersion, pgVersion } = useApp()
27+
export default function IDE({ children, className }: IDEProps) {
2628
const { databaseId } = useWorkspace()
2729
const [tab, setTab] = useState<TabValue>('diagram')
2830

@@ -94,9 +96,9 @@ export default function IDE({ children }: IDEProps) {
9496
const migrationsSql = (initialMigrationSql + '\n' + migrationStatements?.join('\n\n')).trim()
9597

9698
return (
97-
<div className="flex-1 h-full flex flex-col items-stretch gap-3">
99+
<div className={cn('flex flex-col items-stretch gap-3', className)}>
98100
<Tabs
99-
className="flex-1 flex flex-col items-stretch"
101+
className="h-full flex-1 flex flex-col items-stretch"
100102
value={tab}
101103
onValueChange={(tab) => setTab(tabsSchema.parse(tab))}
102104
>
@@ -125,53 +127,60 @@ export default function IDE({ children }: IDEProps) {
125127
</TabsList>
126128

127129
{isSmallBreakpoint && (
128-
<TabsContent value="chat" className="flex-1 h-full min-h-0">
130+
<TabsContent value="chat" className="flex-1 h-full min-h-0 overflow-y-auto">
129131
{children}
130132
</TabsContent>
131133
)}
132134
<TabsContent value="diagram" className="h-full">
133-
<SchemaGraph databaseId={databaseId} schemas={['public', 'meta']} />
135+
<div className="h-full flex flex-col gap-3">
136+
<SchemaGraph databaseId={databaseId} schemas={['public', 'meta']} />
137+
<Footer />
138+
</div>
134139
</TabsContent>
135-
<TabsContent value="migrations" className="h-full py-4 rounded-md bg-[#1e1e1e]">
136-
<Editor
137-
language="pgsql"
138-
value={migrationsSql}
139-
theme="vs-dark"
140-
options={{
141-
tabSize: 2,
142-
minimap: {
143-
enabled: false,
144-
},
145-
fontSize: 13,
146-
readOnly: true,
147-
}}
148-
onMount={async (editor, monaco) => {
149-
// Register pgsql formatter
150-
monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
151-
async provideDocumentFormattingEdits(model) {
152-
const currentCode = editor.getValue()
153-
const formattedCode = format(currentCode, {
154-
language: 'postgresql',
155-
keywordCase: 'lower',
156-
})
157-
return [
158-
{
159-
range: model.getFullModelRange(),
160-
text: formattedCode,
161-
},
162-
]
140+
<TabsContent value="migrations" className="h-full">
141+
<div className="h-full flex flex-col gap-3">
142+
<Editor
143+
className=" py-4 rounded-md bg-[#1e1e1e]"
144+
language="pgsql"
145+
value={migrationsSql}
146+
theme="vs-dark"
147+
options={{
148+
tabSize: 2,
149+
minimap: {
150+
enabled: false,
163151
},
164-
})
152+
fontSize: 13,
153+
readOnly: true,
154+
}}
155+
onMount={async (editor, monaco) => {
156+
// Register pgsql formatter
157+
monaco.languages.registerDocumentFormattingEditProvider('pgsql', {
158+
async provideDocumentFormattingEdits(model) {
159+
const currentCode = editor.getValue()
160+
const formattedCode = format(currentCode, {
161+
language: 'postgresql',
162+
keywordCase: 'lower',
163+
})
164+
return [
165+
{
166+
range: model.getFullModelRange(),
167+
text: formattedCode,
168+
},
169+
]
170+
},
171+
})
165172

166-
// Format on cmd+s
167-
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
168-
await editor.getAction('editor.action.formatDocument')?.run()
169-
})
173+
// Format on cmd+s
174+
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, async () => {
175+
await editor.getAction('editor.action.formatDocument')?.run()
176+
})
170177

171-
// Run format on the initial value
172-
await editor.getAction('editor.action.formatDocument')?.run()
173-
}}
174-
/>
178+
// Run format on the initial value
179+
await editor.getAction('editor.action.formatDocument')?.run()
180+
}}
181+
/>
182+
<Footer />
183+
</div>
175184
</TabsContent>
176185
{/* Temporarily hide seeds until we get pg_dump working */}
177186
{false && (
@@ -217,22 +226,27 @@ export default function IDE({ children }: IDEProps) {
217226
</TabsContent>
218227
)}
219228
</Tabs>
229+
</div>
230+
)
231+
}
220232

221-
<div className="flex flex-col pb-1 text-xs text-neutral-500 text-center justify-center">
222-
{pgliteVersion && (
223-
<span>
224-
<a
225-
className="underline"
226-
href="https://github.com/electric-sql/pglite"
227-
target="_blank"
228-
rel="noopener noreferrer"
229-
>
230-
PGlite
231-
</a>{' '}
232-
{pgliteVersion} {pgVersion && <>(PG {pgVersion})</>}
233-
</span>
234-
)}
235-
</div>
233+
function Footer() {
234+
const { pgliteVersion, pgVersion } = useApp()
235+
return (
236+
<div className="flex flex-col pb-1 text-xs text-neutral-500 text-center justify-center">
237+
{pgliteVersion && (
238+
<span>
239+
<a
240+
className="underline"
241+
href="https://github.com/electric-sql/pglite"
242+
target="_blank"
243+
rel="noopener noreferrer"
244+
>
245+
PGlite
246+
</a>{' '}
247+
{pgliteVersion} {pgVersion && <>(PG {pgVersion})</>}
248+
</span>
249+
)}
236250
</div>
237251
)
238252
}

0 commit comments

Comments
 (0)