Require selecting a db on new diagrams

src/components/Workspace.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback } from "react";
 import ControlPanel from "./EditorHeader/ControlPanel";
 import Canvas from "./EditorCanvas/Canvas";
 import SidePanel from "./EditorSidePanel/SidePanel";
-import { State } from "../data/constants";
+import { DB, State } from "../data/constants";
 import { db } from "../data/db";
 import {
   useLayout,
@@ -37,8 +37,14 @@ export default function WorkSpace() {
   const { notes, setNotes } = useNotes();
   const { saveState, setSaveState } = useSaveState();
   const { transform, setTransform } = useTransform();
-  const { tables, relationships, setTables, setRelationships, setDatabase } =
+  const {
-    useTables();
+    tables,
+    relationships,
+    setTables,
+    setRelationships,
+    database,
+    setDatabase,
+  } = useTables();
   const { undoStack, redoStack, setUndoStack, setRedoStack } = useUndoRedo();
   const { t } = useTranslation();
 
@@ -60,6 +66,7 @@ export default function WorkSpace() {
       ) {
         await db.diagrams
           .add({
+            database: database,
             name: title,
             lastModified: new Date(),
             tables: tables,
@@ -80,6 +87,7 @@ export default function WorkSpace() {
       } else {
         await db.diagrams
           .update(id, {
+            database: database,
             name: title,
             lastModified: new Date(),
             tables: tables,
@@ -99,6 +107,7 @@ export default function WorkSpace() {
     } else {
       await db.templates
         .update(id, {
+          database: database,
           title: title,
           tables: tables,
           relationships: relationships,
@@ -128,6 +137,7 @@ export default function WorkSpace() {
     tasks,
     transform,
     setSaveState,
+    database,
   ]);
 
   const load = useCallback(async () => {
@@ -137,8 +147,10 @@ export default function WorkSpace() {
         .last()
         .then((d) => {
           if (d) {
-            if (!d.database) {
+            if (d.database) {
-              setShowSelectDbModal(true);
+              setDatabase(d.database);
+            } else {
+              setDatabase(DB.GENERIC);
             }
             setId(d.id);
             setTitle(d.name);
@@ -164,8 +176,10 @@ export default function WorkSpace() {
         .get(id)
         .then((diagram) => {
           if (diagram) {
-            if (!diagram.database) {
+            if (diagram.database) {
-              setShowSelectDbModal(true);
+              setDatabase(diagram.database);
+            } else {
+              setDatabase(DB.GENERIC);
             }
             setId(diagram.id);
             setTitle(diagram.name);
@@ -196,6 +210,11 @@ export default function WorkSpace() {
         .get(id)
         .then((diagram) => {
           if (diagram) {
+            if (diagram.database) {
+              setDatabase(diagram.database);
+            } else {
+              setDatabase(DB.GENERIC);
+            }
             setId(diagram.id);
             setTitle(diagram.title);
             setTables(diagram.tables);
@@ -210,6 +229,8 @@ export default function WorkSpace() {
             });
             setUndoStack([]);
             setRedoStack([]);
+          } else {
+            setShowSelectDbModal(true);
           }
         })
         .catch((error) => {
@@ -247,6 +268,7 @@ export default function WorkSpace() {
     setNotes,
     setTypes,
     setTasks,
+    setDatabase,
   ]);
 
   useEffect(() => {
@@ -324,18 +346,20 @@ export default function WorkSpace() {
         hasCancel={false}
         title={t("pick_db")}
         okText={t("confirm")}
+        visible={showSelectDbModal}
         onOk={() => {
+          if (selectedDb === "") return;
           setDatabase(selectedDb);
           setShowSelectDbModal(false);
         }}
-        visible={showSelectDbModal}
+        okButtonProps={{ disabled: selectedDb === "" }}
       >
         <div className="grid grid-cols-3 gap-4 place-content-center">
           {databases.map((x) => (
             <div
               key={x.name}
               onClick={() => setSelectedDb(x.label)}
-              className={`space-y-3 py-3 px-4 rounded-md border-2 ${
+              className={`space-y-3 py-3 px-4 rounded-md border-2 select-none ${
                 settings.mode === "dark"
                   ? "bg-zinc-700 hover:bg-zinc-600"
                   : "bg-zinc-100 hover:bg-zinc-200"

src/data/constants.js

@@ -103,3 +103,12 @@ export const SIDESHEET = {
   TODO: 1,
   TIMELINE: 2,
 };
+
+export const DB = {
+  MYSQL: "mysql",
+  POSTGRES: "postgresql",
+  MSSQL: "mssql",
+  SQLITE: "sqlite",
+  MARIADB: "mariadb",
+  GENERIC: "generic",
+};

src/data/databases.js

@@ -3,38 +3,39 @@ import postgresImage from "../assets/postgres-icon.png";
 import sqliteImage from "../assets/sqlite-icon.png";
 import mariadbImage from "../assets/mariadb-icon.png";
 import mssqlImage from "../assets/mssql-icon.png";
+import i18n from "../i18n/i18n";
+import { DB } from "./constants";
 
 export const databases = [
   {
     name: "MySQL",
-    label: "mysql",
+    label: DB.MYSQL,
     image: mysqlImage,
   },
   {
     name: "PostgreSQL",
-    label: "postgresql",
+    label: DB.POSTGRES,
     image: postgresImage,
   },
   {
     name: "SQLite",
-    label: "sqlite",
+    label: DB.SQLITE,
     image: sqliteImage,
   },
   {
     name: "MariaDB",
-    label: "mariadb",
+    label: DB.MARIADB,
     image: mariadbImage,
   },
   {
     name: "MSSQL",
-    label: "mssql",
+    label: DB.MSSQL,
     image: mssqlImage,
   },
   {
-    name: "Generic",
+    name: i18n.t("generic"),
-    label: "generic",
+    label: DB.GENERIC,
     image: null,
-    description:
+    description: i18n.t("generic_description"),
-      "Generic diagrams can be exported to any SQL flavor but support few data types.",
   },
 ];

src/i18n/locales/en.js

@@ -212,6 +212,10 @@ const en = {
     edit_relationship: "{{extra}} Edit relationship {{refName}}",
     delete_relationship: "Delete relationship {{refName}}",
     not_found: "Not found",
+    pick_db: "Choose a database",
+    generic: "Generic",
+    generic_description:
+      "Generic diagrams can be exported to any SQL flavor but support few data types.",
   },
 };