deployment 2025-03-11 (#399)

* combine useConfig and useDatabaseDriver into one context

* Merge pull request #398 from outerbase/custom-format-cell

feat: custom format cell

Author: invisal

src/components/gui/connection-dialog.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import { useConfig } from "@/context/config-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import { useMemo } from "react";
 import ServerLoadingAnimation from "../icons/server-loading";
 
@@ -11,7 +11,7 @@ export default function ConnectingDialog({
   message?: string;
   onRetry?: () => void;
 }>) {
-  const { name, onBack } = useConfig();
+  const { name, onBack } = useStudioContext();
 
   const isElectron = useMemo(() => {
     return typeof window !== "undefined" && window.outerbaseIpc;
@@ -56,7 +56,7 @@ export default function ConnectingDialog({
   }
 
   return (
-    <div className="w-screen h-screen flex items-center justify-center flex-col gap-4">
+    <div className="flex h-screen w-screen flex-col items-center justify-center gap-4">
       <ServerLoadingAnimation />
       {body}
     </div>

src/components/gui/database-gui.tsx

@@ -1,29 +1,28 @@
 "use client";
+import QueryWindow from "@/components/gui/tabs/query-tab";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from "@/components/ui/resizable";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import WindowTabs, { WindowTabItemProps } from "./windows-tab";
-import QueryWindow from "@/components/gui/tabs/query-tab";
-import SidebarTab, { SidebarTabItem } from "./sidebar-tab";
 import SchemaView from "./schema-sidebar";
+import SidebarTab, { SidebarTabItem } from "./sidebar-tab";
 import ToolSidebar from "./sidebar/tools-sidebar";
+import WindowTabs, { WindowTabItemProps } from "./windows-tab";
 
-import { useDatabaseDriver } from "@/context/driver-provider";
-import SavedDocTab from "./sidebar/saved-doc-tab";
+import { useStudioContext } from "@/context/driver-provider";
 import { useSchema } from "@/context/schema-provider";
-import { Binoculars, GearSix, Table } from "@phosphor-icons/react";
-import { normalizedPathname, sendAnalyticEvents } from "@/lib/tracking";
-import { useConfig } from "@/context/config-provider";
-import { cn } from "@/lib/utils";
 import { scc } from "@/core/command";
 import {
   tabCloseChannel,
   tabOpenChannel,
   tabReplaceChannel,
 } from "@/core/extension-tab";
+import { normalizedPathname, sendAnalyticEvents } from "@/lib/tracking";
+import { cn } from "@/lib/utils";
+import { Binoculars, GearSix, Table } from "@phosphor-icons/react";
+import SavedDocTab from "./sidebar/saved-doc-tab";
 
 export default function DatabaseGui() {
   const DEFAULT_WIDTH = 300;
@@ -34,8 +33,8 @@ export default function DatabaseGui() {
     setDefaultWidthPercentage((DEFAULT_WIDTH / window.innerWidth) * 100);
   }, []);
 
-  const { databaseDriver, docDriver } = useDatabaseDriver();
-  const { extensions, containerClassName } = useConfig();
+  const { databaseDriver, docDriver, extensions, containerClassName } =
+    useStudioContext();
 
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
   const { currentSchemaName } = useSchema();

src/components/gui/main-connection.tsx

@@ -2,16 +2,15 @@
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { WEBSITE_NAME } from "@/const";
 import { AutoCompleteProvider } from "@/context/auto-complete-provider";
-import { useConfig } from "@/context/config-provider";
-import { useDatabaseDriver } from "@/context/driver-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import { SchemaProvider } from "@/context/schema-provider";
 import { useEffect } from "react";
 import { DialogProvider } from "../create-dialog";
 import ContextMenuHandler from "./context-menu-handler";
 import DatabaseGui from "./database-gui";
 
 function MainConnection() {
-  const { databaseDriver: driver } = useDatabaseDriver();
+  const { databaseDriver: driver } = useStudioContext();
 
   useEffect(() => {
     return () => {
@@ -28,7 +27,7 @@ function MainConnection() {
 }
 
 function MainConnectionContainer() {
-  const { name } = useConfig();
+  const { name } = useStudioContext();
 
   useEffect(() => {
     document.title = name + " - " + WEBSITE_NAME;

src/components/gui/query-result-table.tsx

@@ -2,7 +2,7 @@ import OptimizeTable, {
   OptimizeTableHeaderWithIndexProps,
 } from "@/components/gui/table-optimized";
 import OptimizeTableState from "@/components/gui/table-optimized/OptimizeTableState";
-import { useConfig } from "@/context/config-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import { ColumnSortOption } from "@/drivers/base-driver";
 import { exportDataAsDelimitedText } from "@/lib/export-helper";
 import { KEY_BINDING } from "@/lib/key-matcher";
@@ -52,7 +52,8 @@ function Header({
 
   if (internalState.getSelectedColIndex().includes(colIndex)) {
     if (internalState.isFullSelectionCol(colIndex)) {
-      textClass = "grow line-clamp-1 font-mono font-bold text-black dark:text-white font-bold";
+      textClass =
+        "grow line-clamp-1 font-mono font-bold text-black dark:text-white font-bold";
       thClass =
         "flex grow items-center px-2 overflow-hidden bg-neutral-100 dark:bg-neutral-900";
     } else {
@@ -126,7 +127,7 @@ export default function ResultTable({
 }: ResultTableProps) {
   const [stickyHeaderIndex, setStickHeaderIndex] = useState<number>();
 
-  const { extensions } = useConfig();
+  const { extensions } = useStudioContext();
 
   const headerIndex = useMemo(() => {
     if (visibleColumnIndexList) return visibleColumnIndexList;
@@ -135,7 +136,7 @@ export default function ResultTable({
 
   const renderHeader = useCallback(
     (header: OptimizeTableHeaderWithIndexProps) => {
-      const extensionMenu = extensions.getQueryHeaderContextMenu(header);
+      const extensionMenu = extensions.getQueryHeaderContextMenu(header, data);
       const extensionMenuItems = extensionMenu.map((item) => {
         if (item.component) {
           return (

src/components/gui/save-doc-button.tsx

@@ -1,12 +1,12 @@
+import { useStudioContext } from "@/context/driver-provider";
 import {
   SavedDocData,
   SavedDocInput,
   SavedDocNamespace,
 } from "@/drivers/saved-doc/saved-doc-driver";
-import { Button } from "../ui/button";
-import { useDatabaseDriver } from "@/context/driver-provider";
-import { useCallback, useState } from "react";
 import { LucideFolderGit, LucideLoader } from "lucide-react";
+import { useCallback, useState } from "react";
+import { Button } from "../ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -29,7 +29,7 @@ export default function SaveDocButton({
 }: Props) {
   const [open, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
-  const { docDriver } = useDatabaseDriver();
+  const { docDriver } = useStudioContext();
   const [namespaceList, setNamespaceList] = useState<SavedDocNamespace[]>([]);
 
   const onSaveQuery = useCallback(
@@ -86,7 +86,7 @@ export default function SaveDocButton({
           variant={"secondary"}
         >
           {loading ? (
-            <LucideLoader className="w-4 h-4 animate-spin mr-2" />
+            <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
           ) : (
             <></>
           )}
@@ -104,7 +104,7 @@ export default function SaveDocButton({
                 onSaveQuery(n.id);
               }}
             >
-              <LucideFolderGit className="w-4 h-4 mr-2" /> {n.name}
+              <LucideFolderGit className="mr-2 h-4 w-4" /> {n.name}
             </DropdownMenuItem>
           );
         })}

src/components/gui/schema-editor/column-default-value-input.tsx

@@ -5,7 +5,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import { useDatabaseDriver } from "@/context/driver-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import { DatabaseTableColumnConstraint } from "@/drivers/base-driver";
 import { ChevronsUpDown } from "lucide-react";
 import { ChangeEvent, useCallback, useMemo } from "react";
@@ -20,7 +20,7 @@ export default function ColumnDefaultValueInput({
   disabled?: boolean;
   onChange: (constraint: DatabaseTableColumnConstraint) => void;
 }>) {
-  const { databaseDriver } = useDatabaseDriver();
+  const { databaseDriver } = useStudioContext();
   const display = useMemo(() => {
     if (
       constraint?.defaultValue !== undefined &&

src/components/gui/schema-editor/index.tsx

@@ -1,4 +1,4 @@
-import { useDatabaseDriver } from "@/context/driver-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
 import { checkSchemaChange } from "@/lib/sql/sql-generate.schema";
 import { LucideCode, LucideCopy, LucidePlus, LucideSave } from "lucide-react";
@@ -27,7 +27,7 @@ export default function SchemaEditor({
   onSave,
   onDiscard,
 }: Readonly<Props>) {
-  const { databaseDriver } = useDatabaseDriver();
+  const { databaseDriver } = useStudioContext();
   const isCreateScript = value.name.old === "";
 
   const onAddColumn = useCallback(() => {

src/components/gui/schema-editor/schema-create/schema-create-form.tsx

@@ -1,23 +1,29 @@
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import { useStudioContext } from "@/context/driver-provider";
 import { useSchema } from "@/context/schema-provider";
+import { DatabaseSchemaChange } from "@/drivers/base-driver";
 import { LucideAlertCircle, LucideLoader, LucideSave } from "lucide-react";
 import { useCallback, useMemo, useState } from "react";
-import { useDatabaseDriver } from "@/context/driver-provider";
-import { DatabaseSchemaChange } from "@/drivers/base-driver";
 
-export function SchemaDatabaseCreateForm({ schemaName, onClose }: { schemaName?: string; onClose: () => void; }) {
-  const { databaseDriver } = useDatabaseDriver();
+export function SchemaDatabaseCreateForm({
+  schemaName,
+  onClose,
+}: {
+  schemaName?: string;
+  onClose: () => void;
+}) {
+  const { databaseDriver } = useStudioContext();
   const { schema, refresh: refreshSchema } = useSchema();
   const [isExecuting, setIsExecuting] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [value, setValue] = useState<DatabaseSchemaChange>({
     name: {
-      new: '',
-      old: ''
+      new: "",
+      old: "",
     },
-    createScript: '',
-    collate: ''
+    createScript: "",
+    collate: "",
   });
 
   const previewScript = useMemo(() => {
@@ -27,68 +33,76 @@ export function SchemaDatabaseCreateForm({ schemaName, onClose }: { schemaName?:
   const onSave = useCallback(() => {
     {
       setIsExecuting(true);
-      databaseDriver.transaction([previewScript]).then(() => {
-        refreshSchema();
-        onClose();
-      }).catch((err) => setErrorMessage((err as Error).message)).finally(() => {
-        setIsExecuting(false);
-      })
+      databaseDriver
+        .transaction([previewScript])
+        .then(() => {
+          refreshSchema();
+          onClose();
+        })
+        .catch((err) => setErrorMessage((err as Error).message))
+        .finally(() => {
+          setIsExecuting(false);
+        });
     }
-  }, [databaseDriver, onClose, previewScript, refreshSchema])
+  }, [databaseDriver, onClose, previewScript, refreshSchema]);
 
-  const schemaNames = Object.keys(schema).filter(s => s !== schemaName).map(s => s);
-  const schemaNameExists = schemaNames.includes(value.name.new || '');
+  const schemaNames = Object.keys(schema)
+    .filter((s) => s !== schemaName)
+    .map((s) => s);
+  const schemaNameExists = schemaNames.includes(value.name.new || "");
 
   return (
-    <div className="flex h-full flex-col overflow-hidden relative">
+    <div className="relative flex h-full flex-col overflow-hidden">
       {errorMessage && (
-        <div className="text-sm text-red-500 font-mono flex gap-4 justify-end items-end">
-          <LucideAlertCircle className="w-12 h-12" />
+        <div className="flex items-end justify-end gap-4 font-mono text-sm text-red-500">
+          <LucideAlertCircle className="h-12 w-12" />
           <p>{errorMessage}</p>
         </div>
       )}
-      <div className="flex gap-2 shrink-0 grow-0 py-4 px-1 border-neutral-200 dark:border-neutral-800">
+      <div className="flex shrink-0 grow-0 gap-2 border-neutral-200 px-1 py-4 dark:border-neutral-800">
         <div className="w-full">
-          <div className="text-xs font-medium mb-1">Schema Name</div>
+          <div className="mb-1 text-xs font-medium">Schema Name</div>
           <Input
             placeholder="Schema Name"
-            value={value.name.new || value.name.old || ''}
+            value={value.name.new || value.name.old || ""}
             onChange={(e) => {
               setValue({
                 ...value,
                 name: {
                   ...value.name,
-                  new: e.currentTarget.value
-                }
-              })
+                  new: e.currentTarget.value,
+                },
+              });
             }}
             disabled={!!schemaName}
-            className={`w-full ${schemaNameExists ? 'border-red-600' : ''}`}
+            className={`w-full ${schemaNameExists ? "border-red-600" : ""}`}
           />
-          {
-            schemaNameExists && <small className="text-xs text-red-500">The schema name `{value.name.new}` already exists.</small>
-          }
+          {schemaNameExists && (
+            <small className="text-xs text-red-500">
+              The schema name `{value.name.new}` already exists.
+            </small>
+          )}
         </div>
       </div>
-      <div className="w-full flex flex-col pt-3">
-        <div className="grow-0 shrink-0">
-          <div className="p-1 flex gap-2 justify-end">
+      <div className="flex w-full flex-col pt-3">
+        <div className="shrink-0 grow-0">
+          <div className="flex justify-end gap-2 p-1">
             <Button
               variant="ghost"
               disabled={!!schemaNameExists}
               size={"sm"}
               onClick={onSave}
             >
               {isExecuting ? (
-                <LucideLoader className="w-4 h-4 mr-2 animate-spin" />
+                <LucideLoader className="mr-2 h-4 w-4 animate-spin" />
               ) : (
-                <LucideSave className="w-4 h-4 mr-2" />
+                <LucideSave className="mr-2 h-4 w-4" />
               )}
               Save
             </Button>
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+}

src/components/gui/schema-editor/schema-editor-column-list.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
-import { useDatabaseDriver } from "@/context/driver-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import {
   DatabaseTableColumn,
   DatabaseTableColumnChange,
@@ -104,7 +104,7 @@ function ColumnItemType({
   onChange: (type: string) => void;
   disabled?: boolean;
 }) {
-  const { databaseDriver } = useDatabaseDriver();
+  const { databaseDriver } = useStudioContext();
 
   if (
     databaseDriver.columnTypeSelector.type === "dropdown" &&

src/components/gui/schema-editor/schema-save-dialog.tsx

@@ -6,7 +6,7 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
-import { useDatabaseDriver } from "@/context/driver-provider";
+import { useStudioContext } from "@/context/driver-provider";
 import { useSchema } from "@/context/schema-provider";
 import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
 import {
@@ -31,7 +31,7 @@ export default function SchemaSaveDialog({
   onClose: () => void;
   fetchTable: (schemeName: string, tableName: string) => Promise<void>;
 }) {
-  const { databaseDriver } = useDatabaseDriver();
+  const { databaseDriver } = useStudioContext();
   const { refresh: refreshSchema } = useSchema();
   const [isExecuting, setIsExecuting] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");