auto select schema name based on where create table is selected

outerbase · Sep 2, 2024 · 6011f1d · 6011f1d
1 parent ac83d0e
commit 6011f1d
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 34 deletions.
diff --git a/src/components/gui/schema-editor/index.tsx b/src/components/gui/schema-editor/index.tsx
@@ -19,15 +19,13 @@ interface Props {
   onDiscard: () => void;
   value: DatabaseTableSchemaChange;
   onChange: Dispatch<SetStateAction<DatabaseTableSchemaChange>>;
-  isCreate?: boolean;
 }
 
 export default function SchemaEditor({
   value,
   onChange,
   onSave,
   onDiscard,
-  isCreate,
 }: Readonly<Props>) {
   const { databaseDriver } = useDatabaseDriver();
   const isCreateScript = value.name.old === "";
@@ -73,7 +71,7 @@ export default function SchemaEditor({
           <Button
             variant="ghost"
             onClick={onSave}
-            disabled={!hasChange || !value.name?.new}
+            disabled={!hasChange || !value.name?.new || !value.schemaName}
             size={"sm"}
           >
             <LucideSave className="w-4 h-4 mr-2" />
@@ -152,29 +150,34 @@ export default function SchemaEditor({
           )}
         </div>
 
-        <div className="flex items-center mx-3 mt-1 mb-2 ml-5 gap-2">
-          <SchemaNameSelect
-            readonly={!isCreate}
-            value={value.schemaName}
-            onChange={(selectedSchema) => {
-              onChange({ ...value, schemaName: selectedSchema });
-            }}
-          />
-          ●
-          <Input
-            placeholder="Table Name"
-            value={value.name.new ?? value.name.old ?? ""}
-            onChange={(e) => {
-              onChange({
-                ...value,
-                name: {
-                  ...value.name,
-                  new: e.currentTarget.value,
-                },
-              });
-            }}
-            className="w-[200px]"
-          />
+        <div className="flex items-center mx-3 mt-3 mb-4 ml-5 gap-2">
+          <div>
+            <div className="text-xs font-medium mb-1">Table Name</div>
+            <Input
+              placeholder="Table Name"
+              value={value.name.new ?? value.name.old ?? ""}
+              onChange={(e) => {
+                onChange({
+                  ...value,
+                  name: {
+                    ...value.name,
+                    new: e.currentTarget.value,
+                  },
+                });
+              }}
+              className="w-[200px]"
+            />
+          </div>
+          <div>
+            <div className="text-xs font-medium mb-1">Schema</div>
+            <SchemaNameSelect
+              readonly={!isCreateScript}
+              value={value.schemaName}
+              onChange={(selectedSchema) => {
+                onChange({ ...value, schemaName: selectedSchema });
+              }}
+            />
+          </div>
         </div>
         <Separator />
       </div>

diff --git a/src/components/gui/schema-editor/schema-name-select.tsx b/src/components/gui/schema-editor/schema-name-select.tsx
@@ -40,7 +40,7 @@ export default function SchemaNameSelect({
           className="w-[200px] justify-between"
           disabled={readonly}
         >
-          {value ?? "Select schema"}
+          {value || "Select schema"}
           <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
         </Button>
       </PopoverTrigger>

diff --git a/src/components/gui/schema-sidebar-list.tsx b/src/components/gui/schema-sidebar-list.tsx
@@ -98,7 +98,7 @@ function flattenSchemaGroup(
 export default function SchemaList({ search }: Readonly<SchemaListProps>) {
   const { databaseDriver } = useDatabaseDriver();
   const [selected, setSelected] = useState("");
-  const { refresh, schema } = useSchema();
+  const { refresh, schema, currentSchemaName } = useSchema();
 
   const [collapsed, setCollapsed] = useState(() => {
     return new Set<string>();
@@ -127,7 +127,7 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
           onClick: () => {
             openTab({
               type: "schema",
-              schemaName: item?.schemaName ?? "",
+              schemaName: item?.schemaName ?? currentSchemaName,
             });
           },
         },
@@ -147,13 +147,13 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
         { title: "Refresh", onClick: () => refresh() },
       ].filter(Boolean) as OpenContextMenuList;
     },
-    [refresh]
+    [refresh, currentSchemaName]
   );
 
   const listViewItems = useMemo(() => {
     const r = Object.entries(schema).map(([s, tables]) => {
       return {
-        data: {},
+        data: { type: "schema", schemaName: s },
         icon: LucideDatabase,
         name: s,
         key: s.toString(),

diff --git a/src/components/gui/tabs/schema-editor-tab.tsx b/src/components/gui/tabs/schema-editor-tab.tsx
@@ -25,7 +25,10 @@ export default function SchemaEditorTab({
   tableName,
 }: Readonly<SchemaEditorTabProps>) {
   const { databaseDriver } = useDatabaseDriver();
-  const [schema, setSchema] = useState<DatabaseTableSchemaChange>(EMPTY_SCHEMA);
+  const [schema, setSchema] = useState<DatabaseTableSchemaChange>({
+    ...EMPTY_SCHEMA,
+    schemaName,
+  });
   const [loading, setLoading] = useState(!!tableName);
   const [isSaving, setIsSaving] = useState(false);
 
@@ -115,7 +118,6 @@ export default function SchemaEditorTab({
         onChange={setSchema}
         onSave={onSaveToggle}
         onDiscard={onDiscard}
-        isCreate={!tableName && !schemaName}
       />
     </>
   );

diff --git a/src/drivers/base-driver.ts b/src/drivers/base-driver.ts
@@ -72,7 +72,7 @@ export type DatabaseValue<T = unknown> = T | undefined | null;
 export type DatabaseSchemas = Record<string, DatabaseSchemaItem[]>;
 
 export interface DatabaseSchemaItem {
-  type: "table" | "trigger" | "view";
+  type: "table" | "trigger" | "view" | "schema";
   name: string;
   schemaName: string;
   tableName?: string;