Add ids to enums (#713)

* Add ids to enums

* Add enum deleted translation

src/components/EditorHeader/ControlPanel.jsx

@@ -167,7 +167,7 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.TYPE) {
         deleteType(a.data.type.id, false);
       } else if (a.element === ObjectType.ENUM) {
-        deleteEnum(enums.length - 1, false);
+        deleteEnum(a.data.enum.id, false);
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.MOVE) {
@@ -201,7 +201,7 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.TYPE) {
         addType(a.data, false);
       } else if (a.element === ObjectType.ENUM) {
-        addEnum({ id: a.id, ...a.data }, false);
+        addEnum(a.data, false);
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.EDIT) {
@@ -339,7 +339,7 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.TYPE) {
         addType(a.data, false);
       } else if (a.element === ObjectType.ENUM) {
-        addEnum(null, false);
+        addEnum(a.data, false);
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.MOVE) {
@@ -372,7 +372,7 @@ export default function ControlPanel({
       } else if (a.element === ObjectType.TYPE) {
         deleteType(a.data.type.id, false);
       } else if (a.element === ObjectType.ENUM) {
-        deleteEnum(a.id, false);
+        deleteEnum(a.data.enum.id, false);
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.EDIT) {
@@ -781,11 +781,24 @@ export default function ControlPanel({
           setUndoStack([]);
           setRedoStack([]);
           if (databases[database].hasTypes) {
-            setTypes(diagram.types ?? []);
-          }
-          if (databases[database].hasEnums) {
-            setEnums(diagram.enums ?? []);
+            setTypes(
+              diagram.types.map((t) =>
+                t.id
+                  ? t
+                  : {
+                      ...t,
+                      id: nanoid(),
+                      fields: t.fields.map((f) =>
+                        f.id ? f : { ...f, id: nanoid() },
+                      ),
+                    },
+              ),
+            );
           }
+          setEnums(
+            diagram.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ??
+              [],
+          );
           window.name = `d ${diagram.id}`;
         } else {
           window.name = "";

src/components/EditorHeader/Modal/Modal.jsx

@@ -41,6 +41,7 @@ import Rename from "./Rename";
 import SetTableWidth from "./SetTableWidth";
 import Share from "./Share";
 import { IdContext } from "../../Workspace";
+import { nanoid } from "nanoid";
 
 const extensionToLanguage = {
   md: "markdown",
@@ -129,11 +130,24 @@ export default function Modal({
           setUndoStack([]);
           setRedoStack([]);
           if (databases[database].hasTypes) {
-            setTypes(diagram.types ?? []);
-          }
-          if (databases[database].hasEnums) {
-            setEnums(diagram.enums ?? []);
+            setTypes(
+              diagram.types.map((t) =>
+                t.id
+                  ? t
+                  : {
+                      ...t,
+                      id: nanoid(),
+                      fields: t.fields.map((f) =>
+                        f.id ? f : { ...f, id: nanoid() },
+                      ),
+                    },
+              ),
+            );
           }
+          setEnums(
+            diagram.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ??
+              [],
+          );
           window.name = `d ${diagram.id}`;
           setSaveState(State.SAVING);
         } else {

src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx

@@ -5,7 +5,7 @@ import { useDiagram, useEnums, useLayout, useUndoRedo } from "../../../hooks";
 import { Action, ObjectType } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
 
-export default function EnumDetails({ data, i }) {
+export default function EnumDetails({ data }) {
   const { t } = useTranslation();
   const { layout } = useLayout();
   const { deleteEnum, updateEnum } = useEnums();
@@ -23,7 +23,7 @@ export default function EnumDetails({ data, i }) {
           placeholder={t("name")}
           validateStatus={data.name.trim() === "" ? "error" : "default"}
           onChange={(value) => {
-            updateEnum(i, { name: value });
+            updateEnum(data.id, { name: value });
             tables.forEach((table) => {
               table.fields.forEach((field) => {
                 if (field.type.toLowerCase() === data.name.toLowerCase()) {
@@ -52,7 +52,7 @@ export default function EnumDetails({ data, i }) {
               {
                 action: Action.EDIT,
                 element: ObjectType.ENUM,
-                id: i,
+                id: data.id,
                 undo: editField,
                 redo: { name: e.target.value },
                 updatedFields,
@@ -75,8 +75,7 @@ export default function EnumDetails({ data, i }) {
         validateStatus={data.values.length === 0 ? "error" : "default"}
         onChange={(v) => {
           if (layout.readOnly) return;
-
-          updateEnum(i, { values: v });
+          updateEnum(data.id, { values: v });
         }}
         onFocus={() => setEditField({ values: data.values })}
         onBlur={() => {
@@ -87,7 +86,7 @@ export default function EnumDetails({ data, i }) {
             {
               action: Action.EDIT,
               element: ObjectType.ENUM,
-              id: i,
+              id: data.id,
               undo: editField,
               redo: { values: data.values },
               message: t("edit_enum", {
@@ -104,7 +103,7 @@ export default function EnumDetails({ data, i }) {
         type="danger"
         icon={<IconDeleteStroked />}
         disabled={layout.readOnly}
-        onClick={() => deleteEnum(i, true)}
+        onClick={() => deleteEnum(data.id, true)}
       >
         {t("delete")}
       </Button>

src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx

@@ -30,18 +30,18 @@ export default function EnumsTab() {
         <Empty title={t("no_enums")} text={t("no_enums_text")} />
       ) : (
         <Collapse accordion>
-          {enums.map((e, i) => (
+          {enums.map((e) => (
             <Collapse.Panel
-              key={`enum_${i}`}
-              id={`scroll_enum_${i}`}
+              key={`enum_${e.id}`}
+              id={`scroll_enum_${e.id}`}
               header={
                 <div className="overflow-hidden text-ellipsis whitespace-nowrap">
                   {e.name}
                 </div>
               }
-              itemKey={`${i}`}
+              itemKey={e.id}
             >
-              <EnumDetails data={e} i={i} />
+              <EnumDetails data={e} />
             </Collapse.Panel>
           ))}
         </Collapse>

src/components/EditorSidePanel/EnumsTab/SearchBar.jsx

@@ -30,9 +30,9 @@ export default function SearchBar() {
       emptyContent={<div className="p-3 popover-theme">{t("not_found")}</div>}
       onChange={(v) => setValue(v)}
       onSelect={(v) => {
-        const i = enums.findIndex((t) => t.name === v);
+        const e = enums.find((t) => t.name === v);
         document
-          .getElementById(`scroll_enum_${i}`)
+          .getElementById(`scroll_enum_${e.id}`)
           .scrollIntoView({ behavior: "smooth" });
       }}
       className="w-full"

src/components/Workspace.jsx

@@ -216,7 +216,9 @@ export default function WorkSpace() {
               }
             }
             if (databases[database].hasEnums) {
-              setEnums(d.enums ?? []);
+              setEnums(
+                d.enums.map((e) => (!e.id ? { ...e, id: nanoid() } : e)) ?? [],
+              );
             }
             window.name = `d ${d.id}`;
           } else {
@@ -274,7 +276,11 @@ export default function WorkSpace() {
               }
             }
             if (databases[database].hasEnums) {
-              setEnums(diagram.enums ?? []);
+              setEnums(
+                diagram.enums.map((e) =>
+                  !e.id ? { ...e, id: nanoid() } : e,
+                ) ?? [],
+              );
             }
             window.name = `d ${diagram.id}`;
           } else {
@@ -329,7 +335,11 @@ export default function WorkSpace() {
               }
             }
             if (databases[database].hasEnums) {
-              setEnums(diagram.enums ?? []);
+              setEnums(
+                diagram.enums.map((e) =>
+                  !e.id ? { ...e, id: nanoid() } : e,
+                ) ?? [],
+              );
             }
           } else {
             if (selectedDb === "") setShowSelectDbModal(true);
@@ -376,7 +386,11 @@ export default function WorkSpace() {
           }
         }
         if (databases[parsedDiagram.database].hasEnums) {
-          setEnums(parsedDiagram.enums ?? []);
+          setEnums(
+            parsedDiagram.enums.map((e) =>
+              !e.id ? { ...e, id: nanoid() } : e,
+            ) ?? [],
+          );
         }
       } catch (e) {
         console.log(e);

src/context/EnumsContext.jsx

@@ -3,6 +3,7 @@ import { Action, ObjectType } from "../data/constants";
 import { Toast } from "@douyinfe/semi-ui";
 import { useTranslation } from "react-i18next";
 import { useUndoRedo } from "../hooks";
+import { nanoid } from "nanoid";
 
 export const EnumsContext = createContext(null);
 
@@ -12,26 +13,29 @@ export default function EnumsContextProvider({ children }) {
   const { setUndoStack, setRedoStack } = useUndoRedo();
 
   const addEnum = (data, addToHistory = true) => {
+    const newEnum = {
+      id: nanoid(),
+      name: `enum_${enums.length}`,
+      values: [],
+    };
     if (data) {
       setEnums((prev) => {
         const temp = prev.slice();
-        temp.splice(data.id, 0, data);
+        temp.splice(data.index, 0, data.enum);
         return temp;
       });
     } else {
-      setEnums((prev) => [
-        ...prev,
-        {
-          name: `enum_${prev.length}`,
-          values: [],
-        },
-      ]);
+      setEnums((prev) => [...prev, newEnum]);
     }
     if (addToHistory) {
       setUndoStack((prev) => [
         ...prev,
         {
           action: Action.ADD,
+          data: {
+            index: enums.length,
+            enum: data?.enum ?? newEnum,
+          },
           element: ObjectType.ENUM,
           message: t("add_enum"),
         },
@@ -41,6 +45,7 @@ export default function EnumsContextProvider({ children }) {
   };
 
   const deleteEnum = (id, addToHistory = true) => {
+    const enumIndex = enums.findIndex((e) => e.id === id);
     if (addToHistory) {
       Toast.success(t("enum_deleted"));
       setUndoStack((prev) => [
@@ -48,21 +53,23 @@ export default function EnumsContextProvider({ children }) {
         {
           action: Action.DELETE,
           element: ObjectType.ENUM,
-          id: id,
-          data: enums[id],
+          data: {
+            index: enumIndex,
+            enum: enums[enumIndex],
+          },
           message: t("delete_enum", {
-            enumName: enums[id].name,
+            enumName: enums[enumIndex].name,
           }),
         },
       ]);
       setRedoStack([]);
     }
-    setEnums((prev) => prev.filter((_, i) => i !== id));
+    setEnums((prev) => prev.filter((e) => e.id !== id));
   };
 
   const updateEnum = (id, values) => {
     setEnums((prev) =>
-      prev.map((e, i) => (i === id ? { ...e, ...values } : e)),
+      prev.map((e) => (e.id === id ? { ...e, ...values } : e)),
     );
   };
 

src/i18n/locales/en.js

@@ -238,6 +238,7 @@ const en = {
     enum_w_no_name: "Found enum with no name",
     enum_w_no_values: "Found enum '{{enumName}}' with no values",
     duplicate_enums: "Duplicate enums with the name '{{enumName}}'",
+    enum_deleted: "Enum deleted",
     no_enums: "No enums",
     no_enums_text: "Define enums here",
     declare_array: "Declare array",