Merge branch 'main' into select-db

# Conflicts:
#	src/i18n/locales/en.js
#	src/utils/exportSQL/generic.js

.github/FUNDING.yml

@@ -0,0 +1 @@
+open_collective: drawdb

src/components/EditorHeader/SideSheet/Todo.jsx

@@ -247,7 +247,7 @@ export default function Todo() {
                       <TextArea
                         placeholder={t("details")}
                         onChange={(v) => updateTask(i, { details: v })}
-                        value={t.details}
+                        value={task.details}
                         onBlur={() => setSaveState(State.SAVING)}
                       ></TextArea>
                     </Col>

src/components/EditorSidePanel/AreasTab/AreasTab.jsx

@@ -15,7 +15,7 @@ export default function AreasTab() {
       <div className="flex gap-2">
         <SearchBar />
         <div>
-          <Button icon={<IconPlus />} block onClick={addArea}>
+          <Button icon={<IconPlus />} block onClick={() => addArea()}>
             {t("add_area")}
           </Button>
         </div>

src/components/EditorSidePanel/NotesTab/NoteInfo.jsx

@@ -98,7 +98,7 @@ export default function NoteInfo({ data, nid }) {
                     <button
                       key={c}
                       style={{ backgroundColor: c }}
-                      className="p-3 rounded-full mx-1"
+                      className="w-10 h-10 p-3 rounded-full mx-1"
                       onClick={() => {
                         setUndoStack((prev) => [
                           ...prev,

src/components/EditorSidePanel/TablesTab/IndexDetails.jsx

@@ -3,11 +3,13 @@ import { Input, Button, Popover, Checkbox, Select } from "@douyinfe/semi-ui";
 import { IconMore, IconDeleteStroked } from "@douyinfe/semi-icons";
 import { useDiagram, useUndoRedo } from "../../../hooks";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
 
 export default function IndexDetails({ data, fields, iid, tid }) {
   const { t } = useTranslation();
   const { tables, updateTable } = useDiagram();
   const { setUndoStack, setRedoStack } = useUndoRedo();
+  const [editField, setEditField] = useState({});
 
   return (
     <div className="flex justify-between items-center mb-2">
@@ -29,11 +31,9 @@ export default function IndexDetails({ data, fields, iid, tid }) {
               iid: iid,
               undo: {
                 fields: [...data.fields],
-                name: `${data.fields.join("_")}_index`,
               },
               redo: {
                 fields: [...value],
-                name: `${value.join("_")}_index`,
               },
               message: t("edit_table", {
                 tableName: tables[tid].name,
@@ -48,7 +48,6 @@ export default function IndexDetails({ data, fields, iid, tid }) {
                 ? {
                     ...index,
                     fields: [...value],
-                    name: `${value.join("_")}_index`,
                   }
                 : index,
             ),
@@ -59,7 +58,48 @@ export default function IndexDetails({ data, fields, iid, tid }) {
         content={
           <div className="px-1 popover-theme">
             <div className="font-semibold mb-1">{t("name")}: </div>
-            <Input value={data.name} placeholder={t("name")} disabled />
+            <Input
+              value={data.name}
+              placeholder={t("name")}
+              validateStatus={data.name.trim() === "" ? "error" : "default"}
+              onFocus={() =>
+                setEditField({
+                  name: data.name,
+                })
+              }
+              onChange={(value) =>
+                updateTable(tid, {
+                  indices: tables[tid].indices.map((index) =>
+                    index.id === iid
+                      ? {
+                          ...index,
+                          name: value,
+                        }
+                      : index,
+                  ),
+                })
+              }
+              onBlur={(e) => {
+                if (e.target.value === editField.name) return;
+                setUndoStack((prev) => [
+                  ...prev,
+                  {
+                    action: Action.EDIT,
+                    element: ObjectType.TABLE,
+                    component: "index",
+                    tid: tid,
+                    iid: iid,
+                    undo: editField,
+                    redo: { name: e.target.value },
+                    message: t("edit_table", {
+                      tableName: tables[tid].name,
+                      extra: "[index]",
+                    }),
+                  },
+                ]);
+                setRedoStack([]);
+              }}
+            />
             <div className="flex justify-between items-center my-3">
               <div className="font-medium">{t("unique")}</div>
               <Checkbox
@@ -133,7 +173,7 @@ export default function IndexDetails({ data, fields, iid, tid }) {
                 });
               }}
             >
-              Delete
+              {t("delete")}
             </Button>
           </div>
         }

src/components/EditorSidePanel/TablesTab/SearchBar.jsx

@@ -1,40 +1,64 @@
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useSelect } from "../../../hooks";
-import { AutoComplete } from "@douyinfe/semi-ui";
+import { TreeSelect } from "@douyinfe/semi-ui";
 import { IconSearch } from "@douyinfe/semi-icons";
 import { ObjectType } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
 
 export default function SearchBar({ tables }) {
   const { setSelectedElement } = useSelect();
-  const [searchText, setSearchText] = useState("");
   const { t } = useTranslation();
-  const filteredTable = useMemo(
+
-    () => tables.map((t) => t.name).filter((i) => i.includes(searchText)),
+  const treeData = useMemo(() => {
-    [tables, searchText],
+    return tables.map(({ id, name: parentName, fields }, i) => {
-  );
+      const children = fields.map(({ name }, j) => ({
+        tableId: id,
+        id: `${j}`,
+        label: name,
+        value: name,
+        key: `${i}-${j}`,
+      }));
+
+      return {
+        tableId: id,
+        id: `${i}`,
+        label: parentName,
+        value: parentName,
+        key: `${i}`,
+        children,
+      };
+    });
+  }, [tables]);
 
   return (
-    <AutoComplete
+    <TreeSelect
-      data={filteredTable}
+      searchPosition="trigger"
-      value={searchText}
+      dropdownStyle={{ maxHeight: 400, overflow: "auto" }}
-      showClear
+      treeData={treeData}
       prefix={<IconSearch />}
-      placeholder={t("search")}
       emptyContent={<div className="p-3 popover-theme">{t("not_found")}</div>}
-      onChange={(v) => setSearchText(v)}
+      filterTreeNode
-      onSelect={(v) => {
+      placeholder={t("search")}
-        const { id } = tables.find((t) => t.name === v);
+      onChange={(node) => {
+        const { tableId, id, children } = node;
+
         setSelectedElement((prev) => ({
           ...prev,
-          id: id,
+          id: tableId,
           open: true,
           element: ObjectType.TABLE,
         }));
         document
-          .getElementById(`scroll_table_${id}`)
+          .getElementById(`scroll_table_${tableId}`)
           .scrollIntoView({ behavior: "smooth" });
+
+        if (!children) {
+          document
+            .getElementById(`scroll_table_${tableId}_input_${id}`)
+            .focus();
+        }
       }}
+      onChangeWithObject
       className="w-full"
     />
   );

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -20,8 +20,9 @@ export default function TableField({ data, tid, index }) {
     <Row gutter={6} className="hover-1 my-2">
       <Col span={7}>
         <Input
+          id={`scroll_table_${tid}_input_${index}`}
           value={data.name}
-          validateStatus={data.name === "" ? "error" : "default"}
+          validateStatus={data.name.trim() === "" ? "error" : "default"}
           placeholder="Name"
           onChange={(value) => updateField(tid, index, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -33,7 +33,7 @@ export default function TableInfo({ data }) {
         <div className="text-md font-semibold break-keep">{t("name")}: </div>
         <Input
           value={data.name}
-          validateStatus={data.name === "" ? "error" : "default"}
+          validateStatus={data.name.trim() === "" ? "error" : "default"}
           placeholder={t("name")}
           className="ms-2"
           onChange={(value) => updateTable(data.id, { name: value })}
@@ -290,7 +290,7 @@ export default function TableInfo({ data }) {
                   ...data.indices,
                   {
                     id: data.indices.length,
-                    name: `index_${data.indices.length}`,
+                    name: `${data.name}_index_${data.indices.length}`,
                     unique: false,
                     fields: [],
                   },

src/components/EditorSidePanel/TablesTab/TablesTab.jsx

@@ -46,10 +46,17 @@ export default function TablesTab() {
           {tables.map((t) => (
             <div id={`scroll_table_${t.id}`} key={t.id}>
               <Collapse.Panel
+                className="relative"
                 header={
+                  <>
                     <div className="overflow-hidden text-ellipsis whitespace-nowrap">
                       {t.name}
                     </div>
+                    <div
+                      className="w-1 h-full absolute top-0 left-0 bottom-0"
+                      style={{ backgroundColor: t.color }}
+                    />
+                  </>
                 }
                 itemKey={`${t.id}`}
               >

src/i18n/locales/en.js

@@ -226,6 +226,7 @@ const en = {
     no_enums: "No enums",
     no_enums_text: "Define enums here",
     declare_array: "Declare array",
+    empty_index_name: "Declared an index with no name in table '{{tableName}}'",
   },
 };
 

src/utils/exportSQL/generic.js

@@ -176,14 +176,14 @@ export function jsonToMySQL(obj) {
             : ""
         }\n)${table.comment ? ` COMMENT='${table.comment}'` : ""};\n${
           table.indices.length > 0
-            ? `\n${table.indices.map(
+            ? `\n${table.indices
+                .map(
                   (i) =>
-                  `\nCREATE ${i.unique ? "UNIQUE " : ""}INDEX \`${
+                    `CREATE ${i.unique ? "UNIQUE " : ""}INDEX \`${i.name}\`\nON \`${table.name}\` (${i.fields
-                    i.name
-                  }\`\nON \`${table.name}\` (${i.fields
                       .map((f) => `\`${f}\``)
                       .join(", ")});`,
-              )}`
+                )
+                .join("\n")}`
             : ""
         }`,
     )
@@ -251,10 +251,8 @@ export function jsonToPostgreSQL(obj) {
                 field.name
               }" ${getTypeString(field, obj.database, "postgres")}${
                 field.notNull ? " NOT NULL" : ""
-              }${
+              }${field.unique ? " UNIQUE" : ""}${
-                field.default !== ""
+                field.default !== "" ? ` DEFAULT ${parseDefault(field)}` : ""
-                  ? ` DEFAULT ${parseDefault(field, obj.database)}`
-                  : ""
               }${
                 field.check === "" ||
                 !dbToTypes[obj.database][field.type].hasCheck
@@ -271,14 +269,16 @@ export function jsonToPostgreSQL(obj) {
             : ""
         }\n);\n${
           table.indices.length > 0
-            ? `${table.indices.map(
+            ? `${table.indices
+                .map(
                   (i) =>
-                  `\nCREATE ${i.unique ? "UNIQUE " : ""}INDEX "${
+                    `CREATE ${i.unique ? "UNIQUE " : ""}INDEX "${
                       i.name
                     }"\nON "${table.name}" (${i.fields
                       .map((f) => `"${f}"`)
                       .join(", ")});`,
-              )}`
+                )
+                .join("\n")}`
             : ""
         }`,
     )
@@ -426,14 +426,16 @@ export function jsonToMariaDB(obj) {
             : ""
         }\n);${
           table.indices.length > 0
-            ? `\n${table.indices.map(
+            ? `\n${table.indices
+                .map(
                   (i) =>
-                  `\nCREATE ${i.unique ? "UNIQUE " : ""}INDEX \`${
+                    `CREATE ${i.unique ? "UNIQUE " : ""}INDEX \`${
                       i.name
                     }\`\nON \`${table.name}\` (${i.fields
                       .map((f) => `\`${f}\``)
                       .join(", ")});`,
-              )}`
+                )
+                .join("\n")}`
             : ""
         }`,
     )

src/utils/issues.js

@@ -99,6 +99,13 @@ export function getIssues(diagram) {
     });
 
     table.indices.forEach((index) => {
+      if (index.name.trim() === "") {
+        issues.push(
+          i18n.t("empty_index_name", {
+            tableName: table.name,
+          }),
+        );
+      }
       if (index.fields.length === 0) {
         issues.push(
           i18n.t("empty_index", {

src/utils/modalTitles.js

@@ -7,7 +7,7 @@ export const getModalTitle = (modal) => {
     case MODAL.IMPORT_SRC:
       return i18n.t("import_diagram");
     case MODAL.CODE:
-      return i18n.t("export_source");
+      return i18n.t("export");
     case MODAL.IMG:
       return i18n.t("export_image");
     case MODAL.RENAME: