From ad72ff5628dbc04c2a3202e66dd90904d34b0f26 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 29 Nov 2024 14:12:42 +0900 Subject: [PATCH] Add support for primary key visualization in the ERD renderer - Updated the parser to mark `id` fields as primary keys (`PK: true`) when no explicit primary key is defined in `schema.rb`. - Updated the `convertToDBStructure` function to correctly handle primary key attributes. - Adjusted test snapshots and test cases to reflect the inclusion of primary key information. - Added a new `PrimaryKeyIcon` component to visually indicate primary keys in the ERD renderer. - Integrated the `PrimaryKeyIcon` into the `TableNode` component in the ERD renderer. - Included `PrimaryKeyIcon` in the icon library and Storybook for documentation and testing. --- .../parser/__snapshots__/index.test.ts.snap | 2 +- .../src/parser/schemarb/converter.ts | 2 +- .../src/parser/schemarb/index.test.ts | 8 ++--- .../src/parser/schemarb/parser.js | 3 +- .../src/parser/schemarb/parser.pegjs | 3 +- .../ERDContent/TableNode/TableNode.tsx | 5 ++++ .../packages/ui/src/icons/PrimaryKeyIcon.tsx | 29 +++++++++++++++++++ .../packages/ui/src/icons/index.stories.tsx | 3 +- frontend/packages/ui/src/icons/index.ts | 1 + 9 files changed, 47 insertions(+), 9 deletions(-) create mode 100644 frontend/packages/ui/src/icons/PrimaryKeyIcon.tsx diff --git a/frontend/packages/db-structure/src/parser/__snapshots__/index.test.ts.snap b/frontend/packages/db-structure/src/parser/__snapshots__/index.test.ts.snap index 71c87ef91..bfd9fb12b 100644 --- a/frontend/packages/db-structure/src/parser/__snapshots__/index.test.ts.snap +++ b/frontend/packages/db-structure/src/parser/__snapshots__/index.test.ts.snap @@ -105,7 +105,7 @@ exports[`parse > should parse schema.rb to JSON correctly 1`] = ` "increment": false, "name": "id", "notNull": false, - "primary": false, + "primary": true, "type": "varchar", "unique": false, }, diff --git a/frontend/packages/db-structure/src/parser/schemarb/converter.ts b/frontend/packages/db-structure/src/parser/schemarb/converter.ts index 0f5d3fb0f..d05e61b0a 100644 --- a/frontend/packages/db-structure/src/parser/schemarb/converter.ts +++ b/frontend/packages/db-structure/src/parser/schemarb/converter.ts @@ -14,7 +14,7 @@ export const convertToDBStructure = (data: any): DBStructure => { increment: false, name: field.name, notNull: 'nullable' in field ? !field.nullable : false, - primary: false, + primary: field.PK || false, type: field.type.type_name, unique: false, } diff --git a/frontend/packages/db-structure/src/parser/schemarb/index.test.ts b/frontend/packages/db-structure/src/parser/schemarb/index.test.ts index 762dbc4f9..1627b03d1 100644 --- a/frontend/packages/db-structure/src/parser/schemarb/index.test.ts +++ b/frontend/packages/db-structure/src/parser/schemarb/index.test.ts @@ -11,7 +11,7 @@ describe(processor, () => { users: aTable({ name: 'users', columns: { - id: aColumn(), + id: aColumn({ primary: true }), ...override?.columns, }, }), @@ -27,7 +27,7 @@ describe(processor, () => { const expected = userTable({ columns: { - id: aColumn(), + id: aColumn({ primary: true }), name: aColumn({ name: 'name', type: 'string', @@ -48,7 +48,7 @@ describe(processor, () => { const expected = userTable({ columns: { - id: aColumn(), + id: aColumn({ primary: true }), name: aColumn({ name: 'name', type: 'string', @@ -69,7 +69,7 @@ describe(processor, () => { const expected = userTable({ columns: { - id: aColumn(), + id: aColumn({ primary: true }), name: aColumn({ name: 'name', type: 'string', diff --git a/frontend/packages/db-structure/src/parser/schemarb/parser.js b/frontend/packages/db-structure/src/parser/schemarb/parser.js index acc54f942..301f881c8 100644 --- a/frontend/packages/db-structure/src/parser/schemarb/parser.js +++ b/frontend/packages/db-structure/src/parser/schemarb/parser.js @@ -2318,7 +2318,8 @@ function peg$parse(input, options) { if (!idField) { table.fields.unshift({ name: "id", - type: { type_name: "varchar" } + type: { type_name: "varchar" }, + PK: true, }); } data.tables.push(table); diff --git a/frontend/packages/db-structure/src/parser/schemarb/parser.pegjs b/frontend/packages/db-structure/src/parser/schemarb/parser.pegjs index c452074d4..b5d4d57e1 100644 --- a/frontend/packages/db-structure/src/parser/schemarb/parser.pegjs +++ b/frontend/packages/db-structure/src/parser/schemarb/parser.pegjs @@ -30,7 +30,8 @@ if (!idField) { table.fields.unshift({ name: "id", - type: { type_name: "varchar" } + type: { type_name: "varchar" }, + PK: true, }); } data.tables.push(table); diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx index e4632eb1f..bbf154b76 100644 --- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx +++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/TableNode/TableNode.tsx @@ -1,4 +1,5 @@ import type { Table } from '@liam/db-structure' +import { PrimaryKeyIcon } from '@liam/ui' import type { Node, NodeProps } from '@xyflow/react' import type { FC } from 'react' import styles from './TableNode.module.css' @@ -18,6 +19,10 @@ export const TableNode: FC = ({ data: { table } }) => {