From 1569eed47fb0141e1ef62338b9471a027f5e8d26 Mon Sep 17 00:00:00 2001
From: "Visal .In" <invisal@gmail.com>
Date: Tue, 21 Jan 2025 21:35:01 +0700
Subject: [PATCH] refactor the extensions driver

---
 src/app/(theme)/embed/dolt/page-client.tsx    |  4 ++--
 src/app/(theme)/embed/mysql/page-client.tsx   |  4 ++--
 .../(theme)/embed/postgres/page-client.tsx    |  4 ++--
 src/app/(theme)/embed/sqlite/page-client.tsx  |  4 ++--
 .../(theme)/embed/starbase/page-client.tsx    |  4 ++--
 src/app/(theme)/embed/turso/page-client.tsx   |  4 ++--
 .../(theme)/playground/client/page-client.tsx | 20 +++++++++----------
 .../mysql/[roomName]/page-client.tsx          |  6 +++---
 src/components/gui/schema-sidebar-list.tsx    | 13 ++++++------
 src/components/my-studio.tsx                  | 18 +++++++++++++++--
 src/core/standard-extension.tsx               | 16 +++++++++++++--
 11 files changed, 61 insertions(+), 36 deletions(-)

diff --git a/src/app/(theme)/embed/dolt/page-client.tsx b/src/app/(theme)/embed/dolt/page-client.tsx
index be72f3f4..35f96e69 100644
--- a/src/app/(theme)/embed/dolt/page-client.tsx
+++ b/src/app/(theme)/embed/dolt/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Studio } from "@/components/gui/studio";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createMySQLExtensions } from "@/core/standard-extension";
 import { IframeDoltDriver } from "@/drivers/iframe-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
 import DoltExtension from "@/extensions/dolt";
@@ -14,7 +14,7 @@ export default function EmbedPageClient() {
 
   const extensions = useMemo(() => {
     return new StudioExtensionManager([
-      ...createStandardExtensions(),
+      ...createMySQLExtensions(),
       new DoltExtension(),
     ]);
   }, []);
diff --git a/src/app/(theme)/embed/mysql/page-client.tsx b/src/app/(theme)/embed/mysql/page-client.tsx
index f838bcb4..5fa3207f 100644
--- a/src/app/(theme)/embed/mysql/page-client.tsx
+++ b/src/app/(theme)/embed/mysql/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Studio } from "@/components/gui/studio";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createMySQLExtensions } from "@/core/standard-extension";
 import { IframeMySQLDriver } from "@/drivers/iframe-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
 import { useSearchParams } from "next/navigation";
@@ -12,7 +12,7 @@ export default function EmbedPageClient() {
   const driver = useMemo(() => new IframeMySQLDriver(), []);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createMySQLExtensions());
   }, []);
 
   const savedDocDriver = useMemo(() => {
diff --git a/src/app/(theme)/embed/postgres/page-client.tsx b/src/app/(theme)/embed/postgres/page-client.tsx
index c48c3343..3aadbd34 100644
--- a/src/app/(theme)/embed/postgres/page-client.tsx
+++ b/src/app/(theme)/embed/postgres/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Studio } from "@/components/gui/studio";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createPostgreSQLExtensions } from "@/core/standard-extension";
 import { IframePostgresDriver } from "@/drivers/iframe-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
 import { useSearchParams } from "next/navigation";
@@ -12,7 +12,7 @@ export default function EmbedPageClient() {
   const driver = useMemo(() => new IframePostgresDriver(), []);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createPostgreSQLExtensions());
   }, []);
 
   const savedDocDriver = useMemo(() => {
diff --git a/src/app/(theme)/embed/sqlite/page-client.tsx b/src/app/(theme)/embed/sqlite/page-client.tsx
index dd1f770a..e01933b0 100644
--- a/src/app/(theme)/embed/sqlite/page-client.tsx
+++ b/src/app/(theme)/embed/sqlite/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Studio } from "@/components/gui/studio";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createSQLiteExtensions } from "@/core/standard-extension";
 import { IframeSQLiteDriver } from "@/drivers/iframe-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
 import { useSearchParams } from "next/navigation";
@@ -12,7 +12,7 @@ export default function EmbedPageClient() {
   const driver = useMemo(() => new IframeSQLiteDriver(), []);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createSQLiteExtensions());
   }, []);
 
   const savedDocDriver = useMemo(() => {
diff --git a/src/app/(theme)/embed/starbase/page-client.tsx b/src/app/(theme)/embed/starbase/page-client.tsx
index 1e78fef0..b41d30ba 100644
--- a/src/app/(theme)/embed/starbase/page-client.tsx
+++ b/src/app/(theme)/embed/starbase/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Studio } from "@/components/gui/studio";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createSQLiteExtensions } from "@/core/standard-extension";
 import { IframeSQLiteDriver } from "@/drivers/iframe-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
 import { useSearchParams } from "next/navigation";
@@ -21,7 +21,7 @@ export default function EmbedPageClient() {
   }, []);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createSQLiteExtensions());
   }, []);
 
   useEffect(() => {
diff --git a/src/app/(theme)/embed/turso/page-client.tsx b/src/app/(theme)/embed/turso/page-client.tsx
index cc641eac..35f1afc3 100644
--- a/src/app/(theme)/embed/turso/page-client.tsx
+++ b/src/app/(theme)/embed/turso/page-client.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { Studio } from "@/components/gui/studio";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createSQLiteExtensions } from "@/core/standard-extension";
 import { IframeSQLiteDriver } from "@/drivers/iframe-driver";
 import ElectronSavedDocs from "@/drivers/saved-doc/electron-saved-doc";
 import { useSearchParams } from "next/navigation";
@@ -26,7 +26,7 @@ export default function EmbedPageClient() {
   }, []);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createSQLiteExtensions());
   }, []);
 
   useEffect(() => {
diff --git a/src/app/(theme)/playground/client/page-client.tsx b/src/app/(theme)/playground/client/page-client.tsx
index 57474a50..0e93b583 100644
--- a/src/app/(theme)/playground/client/page-client.tsx
+++ b/src/app/(theme)/playground/client/page-client.tsx
@@ -24,7 +24,7 @@ import {
   ToolbarSeparator,
 } from "@/components/gui/toolbar";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createSQLiteExtensions } from "@/core/standard-extension";
 
 const SQLITE_FILE_EXTENSIONS =
   ".db,.sdb,.sqlite,.db3,.s3db,.sqlite3,.sl3,.db2,.s2db,.sqlite2,.sl2";
@@ -249,15 +249,15 @@ export default function PlaygroundEditorBody({
   }, [driver, fileName, handler, nativeDriver]);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createSQLiteExtensions());
   }, []);
 
   const dom = useMemo(() => {
     if (databaseLoading) {
       return (
         <div className="p-4">
-          <LucideLoader className="w-12 h-12 animate-spin mb-2" />
-          <h1 className="text-2xl font-bold mb-2">Loading Database</h1>
+          <LucideLoader className="mb-2 h-12 w-12 animate-spin" />
+          <h1 className="mb-2 text-2xl font-bold">Loading Database</h1>
           <p>
             Please wait. We are downloading:
             <br />
@@ -286,12 +286,12 @@ export default function PlaygroundEditorBody({
     <>
       <Script src="/sqljs/sql-wasm.js" onReady={onReady} />
       <ScreenDropZone onFileDrop={onFileDrop} />
-      <div className="w-screen h-screen flex flex-col">
+      <div className="flex h-screen w-screen flex-col">
         <div className="border-b p-1">
           <Toolbar>
             {fileName && (
-              <div className="text-xs rounded bg-yellow-300 text-black flex gap-1 items-center p-2">
-                <LucideFile className="w-4 h-4" />
+              <div className="flex items-center gap-1 rounded bg-yellow-300 p-2 text-xs text-black">
+                <LucideFile className="h-4 w-4" />
                 <span>
                   Editing <strong>{fileName}</strong>
                 </span>
@@ -302,14 +302,14 @@ export default function PlaygroundEditorBody({
               <ToolbarButton
                 text="Save"
                 onClick={onSaveClicked}
-                icon={<Save className="w-4 h-4" />}
+                icon={<Save className="h-4 w-4" />}
               />
             )}
 
             <ToolbarButton
               text="Open"
               onClick={onOpenClicked}
-              icon={<FolderOpenIcon className="w-4 h-4" />}
+              icon={<FolderOpenIcon className="h-4 w-4" />}
             />
 
             {handler && (
@@ -317,7 +317,7 @@ export default function PlaygroundEditorBody({
                 <ToolbarSeparator />
                 <ToolbarButton
                   text="Refresh"
-                  icon={<RefreshCcw className="w-4 h-4" />}
+                  icon={<RefreshCcw className="h-4 w-4" />}
                   onClick={onReloadDatabase}
                 />
               </>
diff --git a/src/app/(theme)/playground/mysql/[roomName]/page-client.tsx b/src/app/(theme)/playground/mysql/[roomName]/page-client.tsx
index 13ed4a17..00e9365c 100644
--- a/src/app/(theme)/playground/mysql/[roomName]/page-client.tsx
+++ b/src/app/(theme)/playground/mysql/[roomName]/page-client.tsx
@@ -2,7 +2,7 @@
 import { Studio } from "@/components/gui/studio";
 import ServerLoadingAnimation from "@/components/icons/server-loading";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import { createMySQLExtensions } from "@/core/standard-extension";
 import MySQLPlaygroundDriver from "@/drivers/mysql/mysql-playground-driver";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useMemo, useState } from "react";
@@ -24,7 +24,7 @@ export default function MySQLPlaygroundPageClient({
   }, [setReady, roomName]);
 
   const extensions = useMemo(() => {
-    return new StudioExtensionManager(createStandardExtensions());
+    return new StudioExtensionManager(createMySQLExtensions());
   }, []);
 
   // Create ping useeffect
@@ -40,7 +40,7 @@ export default function MySQLPlaygroundPageClient({
 
   if (!isReady) {
     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 />
         <div>Setting up your database</div>
       </div>
diff --git a/src/components/gui/schema-sidebar-list.tsx b/src/components/gui/schema-sidebar-list.tsx
index 48dc211f..7ef22ad3 100644
--- a/src/components/gui/schema-sidebar-list.tsx
+++ b/src/components/gui/schema-sidebar-list.tsx
@@ -142,7 +142,6 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
     (item?: DatabaseSchemaItem) => {
       const selectedName = item?.name;
       const isTable = item?.type === "table";
-      // const isTrigger = item?.type === "trigger";
 
       const createMenuSection = {
         title: "Create",
@@ -156,7 +155,7 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
             },
           },
           ...extensions.getResourceCreateMenu(),
-        ],
+        ].filter(Boolean),
       };
 
       const modificationSection = item
@@ -173,7 +172,7 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
                 }
               : undefined,
             ...extensions.getResourceContextMenu(item, "modification"),
-          ]
+          ].filter(Boolean)
         : [];
 
       return [
@@ -261,10 +260,10 @@ export default function SchemaList({ search }: Readonly<SchemaListProps>) {
             });
           } else if (item.data.type === "trigger") {
             triggerEditorExtensionTab.open({
-              schemaName: item.data.schemaName ?? '',
-              name: item.name ?? '',
-              tableName: item.data.tableName ?? ''
-            })
+              schemaName: item.data.schemaName ?? "",
+              name: item.name ?? "",
+              tableName: item.data.tableName ?? "",
+            });
           } else if (item.data.type === "schema") {
             if (databaseDriver.getFlags().supportUseStatement) {
               databaseDriver
diff --git a/src/components/my-studio.tsx b/src/components/my-studio.tsx
index d4218ba0..f1a718d1 100644
--- a/src/components/my-studio.tsx
+++ b/src/components/my-studio.tsx
@@ -5,7 +5,12 @@ import { CollaborationBaseDriver } from "@/drivers/collaboration-driver-base";
 import { Studio } from "./gui/studio";
 import { SavedDocDriver } from "@/drivers/saved-doc/saved-doc-driver";
 import { StudioExtensionManager } from "@/core/extension-manager";
-import { createStandardExtensions } from "@/core/standard-extension";
+import {
+  createMySQLExtensions,
+  createPostgreSQLExtensions,
+  createSQLiteExtensions,
+  createStandardExtensions,
+} from "@/core/standard-extension";
 
 interface MyStudioProps {
   name: string;
@@ -24,14 +29,23 @@ function MyStudioInternal({
   collabarator,
 }: MyStudioProps) {
   const router = useRouter();
+  const dialet = driver.getFlags().dialect;
 
   const goBack = useCallback(() => {
     router.push("/connect");
   }, [router]);
 
   const extensions = useMemo(() => {
+    if (dialet === "mysql") {
+      return new StudioExtensionManager(createMySQLExtensions());
+    } else if (dialet === "sqlite") {
+      return new StudioExtensionManager(createSQLiteExtensions());
+    } else if (dialet === "postgres") {
+      return new StudioExtensionManager(createPostgreSQLExtensions());
+    }
+
     return new StudioExtensionManager(createStandardExtensions());
-  }, []);
+  }, [dialet]);
 
   return (
     <Studio
diff --git a/src/core/standard-extension.tsx b/src/core/standard-extension.tsx
index 7b5f3558..f5762e9d 100644
--- a/src/core/standard-extension.tsx
+++ b/src/core/standard-extension.tsx
@@ -4,8 +4,20 @@
 
 import QueryHistoryConsoleLogExtension from "@/extensions/query-console-log";
 import ViewEditorExtension from "@/extensions/view-editor";
-import TriggerEditorExtension from '@/extensions/trigger-editor';
+import TriggerEditorExtension from "@/extensions/trigger-editor";
 
 export function createStandardExtensions() {
-  return [new QueryHistoryConsoleLogExtension(), new TriggerEditorExtension(), new ViewEditorExtension()];
+  return [new QueryHistoryConsoleLogExtension(), new ViewEditorExtension()];
+}
+
+export function createSQLiteExtensions() {
+  return [...createStandardExtensions(), new TriggerEditorExtension()];
+}
+
+export function createMySQLExtensions() {
+  return [...createStandardExtensions(), new TriggerEditorExtension()];
+}
+
+export function createPostgreSQLExtensions() {
+  return createStandardExtensions();
 }