Add support for PostgreSQL "CREATE TABLE INHERITS" (#524)

* feat: add support for PostgreSQL table inheritance in schema export

* fixed the suggested changes in the inheritance feature

* Update src/components/EditorSidePanel/TablesTab/TableField.jsx

Co-authored-by: 1ilit <[email protected]>

* fixed all the comments

* feat: finalize Postgres table inheritance support with fixes and formatting

---------

Co-authored-by: kishansinghifs1 <[email protected]>
Co-authored-by: 1ilit <[email protected]>

Author: 3 people

src/components/EditorSidePanel/TablesTab/TableField.jsx

@@ -8,7 +8,7 @@ import { dbToTypes } from "../../../data/datatypes";
 import { DragHandle } from "../../SortableList/DragHandle";
 import FieldDetails from "./FieldDetails";
 
-export default function TableField({ data, tid, index }) {
+export default function TableField({ data, tid, index, inherited }) {
   const { updateField } = useDiagram();
   const { types } = useTypes();
   const { enums } = useEnums();
@@ -21,12 +21,15 @@ export default function TableField({ data, tid, index }) {
   return (
     <div className="hover-1 my-2 flex gap-2 items-center">
       <DragHandle id={data.id} />
+
       <div className="min-w-20 flex-1/3">
         <Input
           value={data.name}
           id={`scroll_table_${tid}_input_${index}`}
-          validateStatus={data.name.trim() === "" ? "error" : "default"}
-          placeholder="Name"
+          validateStatus={
+            data.name.trim() === "" || inherited ? "error" : "default"
+          }
+          placeholder={t("name")}
           onChange={(value) => updateField(tid, data.id, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
           onBlur={(e) => {
@@ -51,13 +54,14 @@ export default function TableField({ data, tid, index }) {
           }}
         />
       </div>
+
       <div className="min-w-24 flex-1/3">
         <Select
           className="w-full"
           optionList={[
             ...Object.keys(dbToTypes[database]).map((value) => ({
               label: value,
-              value: value,
+              value,
             })),
             ...types.map((type) => ({
               label: type.name.toUpperCase(),
@@ -71,7 +75,7 @@ export default function TableField({ data, tid, index }) {
           filter
           value={data.type}
           validateStatus={data.type === "" ? "error" : "default"}
-          placeholder="Type"
+          placeholder={t("type")}
           onChange={(value) => {
             if (value === data.type) return;
             setUndoStack((prev) => [
@@ -135,6 +139,7 @@ export default function TableField({ data, tid, index }) {
           }}
         />
       </div>
+
       <div>
         <Button
           type={data.notNull ? "tertiary" : "primary"}
@@ -164,11 +169,13 @@ export default function TableField({ data, tid, index }) {
           ?
         </Button>
       </div>
+
       <div>
         <Button
           type={data.primary ? "primary" : "tertiary"}
           title={t("primary")}
           theme={data.primary ? "solid" : "light"}
+          icon={<IconKeyStroked />}
           onClick={() => {
             setUndoStack((prev) => [
               ...prev,
@@ -189,9 +196,9 @@ export default function TableField({ data, tid, index }) {
             setRedoStack([]);
             updateField(tid, data.id, { primary: !data.primary });
           }}
-          icon={<IconKeyStroked />}
         />
       </div>
+
       <div>
         <Popover
           content={

src/components/EditorSidePanel/TablesTab/TableInfo.jsx

@@ -1,16 +1,24 @@
 import { useState, useRef } from "react";
-import { Collapse, Input, TextArea, Button, Card } from "@douyinfe/semi-ui";
+import {
+  Collapse,
+  Input,
+  TextArea,
+  Button,
+  Card,
+  Select,
+} from "@douyinfe/semi-ui";
 import ColorPicker from "../ColorPicker";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
 import { useDiagram, useSaveState, useUndoRedo } from "../../../hooks";
-import { Action, ObjectType, State } from "../../../data/constants";
+import { Action, ObjectType, State, DB } from "../../../data/constants";
 import TableField from "./TableField";
 import IndexDetails from "./IndexDetails";
 import { useTranslation } from "react-i18next";
 import { SortableList } from "../../SortableList/SortableList";
 import { nanoid } from "nanoid";
 
 export default function TableInfo({ data }) {
+  const { tables, database } = useDiagram();
   const { t } = useTranslation();
   const [indexActiveKey, setIndexActiveKey] = useState("");
   const { deleteTable, updateTable, setTables } = useDiagram();
@@ -56,10 +64,20 @@ export default function TableInfo({ data }) {
   };
   undefined;
 
+  const inheritedFieldNames =
+    Array.isArray(data.inherits) && data.inherits.length > 0
+      ? data.inherits
+          .map((parentName) => {
+            const parent = tables.find((t) => t.name === parentName);
+            return parent ? parent.fields.map((f) => f.name) : [];
+          })
+          .flat()
+      : [];
+
   return (
     <div>
       <div className="flex items-center mb-2.5">
-        <div className="text-md font-semibold break-keep">{t("name")}: </div>
+        <div className="text-md font-semibold break-keep">{t("name")}:</div>
         <Input
           value={data.name}
           validateStatus={data.name.trim() === "" ? "error" : "default"}
@@ -88,21 +106,64 @@ export default function TableInfo({ data }) {
           }}
         />
       </div>
+
       <SortableList
         items={data.fields}
         keyPrefix={`table-${data.id}`}
-        onChange={(newFields) => {
-          setTables((prev) => {
-            return prev.map((t) =>
+        onChange={(newFields) =>
+          setTables((prev) =>
+            prev.map((t) =>
               t.id === data.id ? { ...t, fields: newFields } : t,
-            );
-          });
-        }}
+            ),
+          )
+        }
         afterChange={() => setSaveState(State.SAVING)}
         renderItem={(item, i) => (
-          <TableField data={item} tid={data.id} index={i} />
+          <TableField
+            data={item}
+            tid={data.id}
+            index={i}
+            inherited={inheritedFieldNames.includes(item.name)}
+          />
         )}
       />
+
+      {database === DB.POSTGRES && (
+        <div className="mb-2">
+          <div className="text-md font-semibold break-keep">
+            {t("inherits")}:
+          </div>
+          <Select
+            multiple
+            value={data.inherits || []}
+            optionList={tables
+              .filter((t) => t.id !== data.id)
+              .map((t) => ({ label: t.name, value: t.name }))}
+            onChange={(value) => {
+              setUndoStack((prev) => [
+                ...prev,
+                {
+                  action: Action.EDIT,
+                  element: ObjectType.TABLE,
+                  component: "self",
+                  tid: data.id,
+                  undo: { inherits: data.inherits },
+                  redo: { inherits: value },
+                  message: t("edit_table", {
+                    tableName: data.name,
+                    extra: "[inherits]",
+                  }),
+                },
+              ]);
+              setRedoStack([]);
+              updateTable(data.id, { inherits: value });
+            }}
+            placeholder={t("inherits")}
+            className="w-full"
+          />
+        </div>
+      )}
+
       {data.indices.length > 0 && (
         <Card
           bodyStyle={{ padding: "4px" }}
@@ -133,6 +194,7 @@ export default function TableInfo({ data }) {
           </Collapse>
         </Card>
       )}
+
       <Card
         bodyStyle={{ padding: "4px" }}
         style={{ marginTop: "12px", marginBottom: "12px" }}
@@ -173,6 +235,7 @@ export default function TableInfo({ data }) {
           </Collapse.Panel>
         </Collapse>
       </Card>
+
       <div className="flex justify-between items-center gap-1 mb-2">
         <ColorPicker
           usePopover={true}

src/data/schemas.js

@@ -56,6 +56,10 @@ export const tableSchema = {
     },
     color: { type: "string", pattern: "^#[0-9a-fA-F]{6}$" },
   },
+  inherits: {
+    type: "array",
+    items: { type: ["string"] },
+  },
   required: ["id", "name", "x", "y", "fields", "comment", "indices", "color"],
 };
 

src/i18n/locales/en.js

@@ -8,6 +8,8 @@ const en = {
   translation: {
     report_bug: "Report a bug",
     import: "Import",
+    inherits: "Inherits",
+    merging_column_w_inherited_definition: "Column '{{fieldName}}' in table '{{tableName}}' with inherited definition will be merged",
     import_from: "Import from",
     file: "File",
     new: "New",