mirror/trailbase
1
0
Fork 0
mirror of https://github.com/trailbaseio/trailbase.git synced 2026-05-19 07:49:57 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make "Dry Run" available in UI for alter table and index. #89

Browse Source
This commit is contained in:
Sebastian Jeltsch
2025-07-18 21:30:07 +02:00
parent 19c91e837b
commit dc17177a99
2 changed files with 77 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
trailbase-assets/js/admin/src/components/tables/CreateAlterIndex.tsx
+38 -44
View File
@@ -22,7 +22,6 @@ import {
buildSelectField,
} from "@/components/FormFields";
import { SheetContainer } from "@/components/SafeSheet";
import { prettyFormatQualifiedName } from "@/lib/schema";
import type { ColumnOrder } from "@bindings/ColumnOrder";
import type { Table } from "@bindings/Table";
@@ -40,6 +39,8 @@ export function CreateAlterIndexForm(props: {
const original = createMemo(() =>
props.schema ? JSON.parse(JSON.stringify(props.schema)) : undefined,
);
const isCreateIndex = () => original() === undefined;
const newDefaultColumn = (index: number): ColumnOrder => {
return {
column_name: props.table.columns[index].name,
@@ -55,7 +56,7 @@ export function CreateAlterIndexForm(props: {
try {
const o = original();
if (o) {
if (o !== undefined) {
const response = await alterIndex({
source_schema: o,
target_schema: value,
@@ -120,12 +121,7 @@ export function CreateAlterIndexForm(props: {
return (
<SheetContainer>
<SheetHeader>
<SheetTitle>
{original() ? "Alter Index" : "Add Index"} for{" "}
<span class="font-mono">
{prettyFormatQualifiedName(props.table.name)}
</span>
</SheetTitle>
<SheetTitle>{isCreateIndex() ? "Add Index" : "Alter Index"}</SheetTitle>
</SheetHeader>
<form
@@ -213,45 +209,43 @@ export function CreateAlterIndexForm(props: {
{(state) => {
return (
<div class="flex items-center gap-4">
{original() === undefined && (
<Dialog
open={sql() !== undefined}
onOpenChange={(open: boolean) => {
if (!open) {
setSql(undefined);
}
}}
>
<DialogTrigger>
<div>
<Button
disabled={!state().canSubmit}
variant="outline"
onClick={() => {
onSubmit(form.state.values, true).catch(
console.error,
);
}}
{...props}
>
{state().isSubmitting ? "..." : "Dry Run"}
</Button>
</div>
</DialogTrigger>
<Dialog
open={sql() !== undefined}
onOpenChange={(open: boolean) => {
if (!open) {
setSql(undefined);
}
}}
>
<DialogTrigger>
<div>
<Button
disabled={!state().canSubmit}
variant="outline"
onClick={() => {
onSubmit(form.state.values, true).catch(
console.error,
);
}}
{...props}
>
{state().isSubmitting ? "..." : "Dry Run"}
</Button>
</div>
</DialogTrigger>
<DialogContent class="min-w-[80dvw]">
<DialogHeader>
<DialogTitle>SQL</DialogTitle>
</DialogHeader>
<DialogContent class="min-w-[80dvw]">
<DialogHeader>
<DialogTitle>SQL</DialogTitle>
</DialogHeader>
<div class="overflow-auto">
<pre>{sql()}</pre>
</div>
<div class="overflow-auto">
<pre>{sql() === "" ? "<EMPTY>" : sql()}</pre>
</div>
<DialogFooter />
</DialogContent>
</Dialog>
)}
<DialogFooter />
</DialogContent>
</Dialog>
<div>
<Button
trailbase-assets/js/admin/src/components/tables/CreateAlterTable.tsx
+39 -38
View File
@@ -55,6 +55,7 @@ export function CreateAlterTableForm(props: {
const original = createMemo(() =>
props.schema ? JSON.parse(JSON.stringify(props.schema)) : undefined,
);
const isCreateTable = () => original() === undefined;
const onSubmit = async (value: Table, dryRun: boolean) => {
/* eslint-disable solid/reactivity */
@@ -62,7 +63,7 @@ export function CreateAlterTableForm(props: {
try {
const o = original();
if (o) {
if (o !== undefined) {
const response = await alterTable({
source_schema: o,
target_schema: value,
@@ -139,7 +140,9 @@ export function CreateAlterTableForm(props: {
return (
<SheetContainer>
<SheetHeader>
<SheetTitle>{original() ? "Alter Table" : "Add New Table"}</SheetTitle>
<SheetTitle>
{isCreateTable() ? "Add New Table" : "Alter Table"}
</SheetTitle>
</SheetHeader>
<form
@@ -184,7 +187,7 @@ export function CreateAlterTableForm(props: {
colIndex={i}
column={c()}
allTables={props.allTables}
disabled={original() !== undefined}
disabled={!isCreateTable()}
/>
</Match>
@@ -227,44 +230,42 @@ export function CreateAlterTableForm(props: {
{(state) => {
return (
<div class="flex items-center gap-4">
{original() === undefined && (
<Dialog
open={sql() !== undefined}
onOpenChange={(open: boolean) => {
if (!open) {
setSql(undefined);
}
}}
>
<DialogTrigger>
<Button
class="w-[92px]"
disabled={!state().canSubmit}
variant="outline"
onClick={() => {
onSubmit(form.state.values, true).catch(
console.error,
);
}}
{...props}
>
{state().isSubmitting ? "..." : "Dry Run"}
</Button>
</DialogTrigger>
<Dialog
open={sql() !== undefined}
onOpenChange={(open: boolean) => {
if (!open) {
setSql(undefined);
}
}}
>
<DialogTrigger>
<Button
class="w-[92px]"
disabled={!state().canSubmit}
variant="outline"
onClick={() => {
onSubmit(form.state.values, true).catch(
console.error,
);
}}
{...props}
>
{state().isSubmitting ? "..." : "Dry Run"}
</Button>
</DialogTrigger>
<DialogContent class="min-w-[80dvw]">
<DialogHeader>
<DialogTitle>SQL</DialogTitle>
</DialogHeader>
<DialogContent class="min-w-[80dvw]">
<DialogHeader>
<DialogTitle>SQL</DialogTitle>
</DialogHeader>
<div class="overflow-auto">
<pre>{sql()}</pre>
</div>
<div class="overflow-auto">
<pre>{sql() === "" ? "<EMPTY>" : sql()}</pre>
</div>
<DialogFooter />
</DialogContent>
</Dialog>
)}
<DialogFooter />
</DialogContent>
</Dialog>
<div class="mr-4 flex w-full justify-end">
<Button