Enable editing index names

Author: 1ilit

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 { useTables, 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 } = useTables();
   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

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -20,7 +20,7 @@ export default function TableField({ data, tid, index }) {
       <Col span={7}>
         <Input
           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/i18n/locales/en.js

@@ -212,6 +212,7 @@ const en = {
     edit_relationship: "{{extra}} Edit relationship {{refName}}",
     delete_relationship: "Delete relationship {{refName}}",
     not_found: "Not found",
+    empty_index_name: "Declared an index with no name in table '{{tableName}}'",
   },
 };
 

src/utils/issues.js

@@ -168,6 +168,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", {