From 6eda17d45b05db330a3b2bada61a596ffba76b86 Mon Sep 17 00:00:00 2001 From: hoshinotsuyoshi Date: Fri, 29 Nov 2024 14:12:42 +0900 Subject: [PATCH] Primary key icon in ERD - 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 +- frontend/packages/erd-core/package.json | 1 + .../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 + frontend/pnpm-lock.yaml | 3 ++ 11 files changed, 51 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/package.json b/frontend/packages/erd-core/package.json index 47038553c..dfd7fb5a5 100644 --- a/frontend/packages/erd-core/package.json +++ b/frontend/packages/erd-core/package.json @@ -12,6 +12,7 @@ "@biomejs/biome": "1.9.3", "@liam/configs": "workspace:*", "@liam/db-structure": "workspace:*", + "@liam/ui": "workspace:*", "@types/react": "18", "typed-css-modules": "0.9.1", "typescript": "5" 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 } }) => {