Skip to content

✨ add constaint diffs to BuildPage panel #1731

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
May 23, 2025
Merged

Conversation

junkisai
Copy link
Member

@junkisai junkisai commented May 21, 2025

Why is this change needed?

This PR introduces diff representation for table constraints in the schema-comparison views.

Key Points

  • Constraint-level diff utilities

    • Adds builders such as buildPrimaryKeyDiffItem, buildForeignKeyDiffItem, buildUniqueConstraintDiffItem, buildCheckConstraintDiffItem, and buildNotNullConstraintDiffItem.
    • Extends getChangeStatus to resolve constraint IDs and filter by (tableId, constraintId).
  • Typed models & constants

    • Defines ConstraintDiffItem and related enumerations for strict type safety.
    • Adds path-pattern constants so constraint operations are handled consistently with column operations.

What would you like reviewers to focus on?

Testing Verification

image

What was done

🤖 Generated by PR Agent at 9ed3f92

  • Add constraint diff utilities and types to schema diff engine
    • Implement diff item builders for all constraint types
    • Extend diff item types and constants for constraints
    • Update getChangeStatus to support constraint-level diffs
  • Introduce ConstraintList and ConstraintItem UI components
    • Render constraint diffs in BuildPage panel (primary, foreign, unique, check)
    • Add collapsible constraint sections in table diff view
  • Enhance GridTable components with className prop for styling
  • Update dependencies: add ts-pattern, upgrade zod, update lockfile

Detailed Changes

Relevant files
Enhancement
29 files
buildSchemaDiff.ts
Add constraint-related diff item builders and integration
+145/-4 
constants.ts
Add constraint path patterns for diff matching                     
+14/-0   
buildConstaintColumnNameDiffItem.ts
Add builder for constraint column name diff item                 
+44/-0   
buildConstaintDeleteConstraintDiffItem.ts
Add builder for constraint delete action diff item             
+44/-0   
buildConstaintDetailDiffItem.ts
Add builder for check constraint detail diff item               
+44/-0   
buildConstaintNameDiffItem.ts
Add builder for constraint name diff item                               
+35/-0   
buildConstaintTargetColumnNameDiffItem.ts
Add builder for constraint target column diff item             
+44/-0   
buildConstaintTargetTableNameDiffItem.ts
Add builder for constraint target table diff item               
+44/-0   
buildConstaintUpdateConstraintDiffItem.ts
Add builder for constraint update action diff item             
+44/-0   
buildConstraintDiffItem.ts
Add builder for base constraint diff item                               
+35/-0   
types.ts
Add constraint diff item types and enums                                 
+63/-0   
getChangeStatus.ts
Extend getChangeStatus to support constraintId                     
+6/-0     
index.ts
Export constraint diff types from package entrypoint         
+1/-0     
index.ts
Export constraint and check detail types                                 
+2/-0     
schema.ts
Add types for constraint name and check constraint detail
+7/-1     
ConstraintList.tsx
Add ConstraintList UI for rendering constraint diffs         
+141/-0 
ConstraintList.module.css
Add styles for ConstraintList and sections                             
+37/-0   
CheckConstraintItem.tsx
Add CheckConstraintItem UI for check constraints                 
+53/-0   
ForeignConstraintItem.tsx
Add ForeignConstraintItem UI for foreign key constraints 
+115/-0 
PrimaryConstraintItem.tsx
Add PrimaryConstraintItem UI for primary key constraints 
+56/-0   
UniqueConstraintItem.tsx
Add UniqueConstraintItem UI for unique constraints             
+53/-0   
getChangeStatusStyle.ts
Add helper for constraint diff status styling                       
+37/-0   
ConstraintItem.module.css
Add icon styles for constraint items                                         
+5/-0     
index.ts
Export all constraint item components                                       
+4/-0     
index.ts
Export ConstraintList component                                                   
+1/-0     
TableItem.tsx
Integrate ConstraintList into TableItem, add collapsible 
+16/-0   
TableDiffBlock.tsx
Add constraint section open/close state to TableDiffBlock
+5/-0     
GridTable.tsx
Add className prop support to GridTable components             
+20/-8   
after.ts
Add constraints property to table mock data                           
+1/-9     
Dependencies
2 files
package.json
Add ts-pattern dependency, update zod version                       
+1/-0     
pnpm-lock.yaml
Update lockfile for new/updated dependencies                         
+81/-103
Documentation
1 files
swift-hairs-push.md
Add changeset for constraint diff utilities/types               
+5/-0     
Additional files
1 files
index.ts +1/-0     

Additional Notes


Need help?
  • Type /help how to ... in the comments thread for any questions about Qodo Merge usage.
  • Check out the documentation for more information.
  • Copy link

    changeset-bot bot commented May 21, 2025

    🦋 Changeset detected

    Latest commit: 390b700

    The changes in this PR will be included in the next version bump.

    This PR includes changesets to release 2 packages
    Name Type
    @liam-hq/db-structure Patch
    @liam-hq/cli Patch

    Not sure what this means? Click here to learn what changesets are.

    Click here if you're a maintainer who wants to add another changeset to this PR

    Copy link

    vercel bot commented May 21, 2025

    The latest updates on your projects. Learn more about Vercel for Git ↗︎

    Name Status Preview Comments Updated (UTC)
    liam-app ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 23, 2025 8:20am
    liam-erd-sample ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 23, 2025 8:20am
    liam-storybook ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 23, 2025 8:20am
    1 Skipped Deployment
    Name Status Preview Comments Updated (UTC)
    liam-docs ⬜️ Ignored (Inspect) Visit Preview May 23, 2025 8:20am

    Copy link

    supabase bot commented May 21, 2025

    Updates to Preview Branch (feat/diff-constaint) ↗︎

    Deployments Status Updated
    Database Fri, 23 May 2025 08:16:36 UTC
    Services Fri, 23 May 2025 08:16:36 UTC
    APIs Fri, 23 May 2025 08:16:36 UTC

    Tasks are run on every commit but only new migration files are pushed.
    Close and reopen this PR if you want to apply changes from existing seed or migration files.

    Tasks Status Updated
    Configurations Fri, 23 May 2025 08:16:37 UTC
    Migrations Fri, 23 May 2025 08:16:37 UTC
    Seeding Fri, 23 May 2025 08:16:37 UTC
    Edge Functions Fri, 23 May 2025 08:16:37 UTC

    View logs for this Workflow Run ↗︎.
    Learn more about Supabase for Git ↗︎.

    Copy link
    Contributor

    qodo-merge-pro-for-open-source bot commented May 21, 2025

    CI Feedback 🧐

    (Feedback updated until commit 390b700)

    A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

    Action: _e2e-tests (Mobile Safari)

    Failed stage: Run e2e tests [❌]

    Failed test name: Table node should be highlighted when clicked

    Failure summary:

    The action failed because the end-to-end test "Table node should be highlighted when clicked" failed
    after multiple retries. The test was expecting a table node element to have the attribute 'data-erd'
    with value 'table-node-highlighted', but:

  • Initially, the element was not found
  • In some retries, the element was found but the attribute value was empty/null
  • The test exceeded the timeout of 10000ms in all retry attempts

    The specific failure occurred at line 37 in the file
    /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts where the test was
    expecting:

    await
    expect(tableNode.locator('div[class^="TableNode_wrapper"]')).toHaveAttribute('data-erd',
    'table-node-highlighted')

  • Relevant error logs:
    1:  ##[group]Runner Image Provisioner
    2:  Hosted Compute Agent
    ...
    
    213:  URL: https://liam-d28273na7-route-06-core.vercel.app
    214:  ENVIRONMENT: Preview – liam-app
    215:  PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
    216:  ##[endgroup]
    217:  Scope: all 18 workspace projects
    218:  Lockfile is up to date, resolution step is skipped
    219:  Progress: resolved 1, reused 0, downloaded 0, added 0
    220:  Packages: +2195
    221:  ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    222:  Progress: resolved 2195, reused 985, downloaded 0, added 0
    223:  Progress: resolved 2195, reused 2188, downloaded 0, added 272
    224:  Progress: resolved 2195, reused 2188, downloaded 0, added 750
    225:  Progress: resolved 2195, reused 2188, downloaded 0, added 1264
    226:  Progress: resolved 2195, reused 2188, downloaded 0, added 2132
    227:  Progress: resolved 2195, reused 2188, downloaded 0, added 2195, done
    228:  WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/packages/cli/dist-cli/bin/cli.js'
    229:  devDependencies:
    ...
    
    242:  │                                                                              │
    243:  │   Ignored build scripts: @biomejs/biome, @bundled-es-modules/glob,           │
    244:  │   @depot/cli, @prisma/client, @prisma/engines, @sentry/cli, core-js-pure,    │
    245:  │   esbuild, onnxruntime-node, protobufjs, sharp, style-dictionary.            │
    246:  │   Run "pnpm approve-builds" to pick which dependencies should be allowed     │
    247:  │   to run scripts.                                                            │
    248:  │                                                                              │
    249:  ╰──────────────────────────────────────────────────────────────────────────────╯
    250:  frontend/apps/docs postinstall$ fumadocs-mdx
    251:  frontend/packages/jobs postinstall$ cp ../db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm
    252:  frontend/packages/jobs postinstall: Done
    253:  frontend/apps/docs postinstall: [MDX] types generated
    254:  frontend/apps/docs postinstall: Done
    255:  frontend/apps/app postinstall$ cp ../../packages/db-structure/node_modules/@ruby/prism/src/prism.wasm prism.wasm
    256:  frontend/apps/app postinstall: Done
    257:  WARN  Failed to create bin at /home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/.bin/liam. ENOENT: no such file or directory, open '/home/runner/work/liam/liam/frontend/apps/erd-sample/node_modules/@liam-hq/cli/dist-cli/bin/cli.js'
    258:  Done in 8s using pnpm v10.10.0
    ...
    
    260:  with:
    261:  path: ~/.cache/ms-playwright
    262:  key: playwright-Linux-98ff39b29a80939fff3af21ce8e6e7d34354ac2aac5223a35a085ee5fbc48f5f
    263:  restore-keys: playwright-Linux-
    264:  
    265:  enableCrossOsArchive: false
    266:  fail-on-cache-miss: false
    267:  lookup-only: false
    268:  save-always: false
    269:  env:
    270:  CI: true
    271:  URL: https://liam-d28273na7-route-06-core.vercel.app
    272:  ENVIRONMENT: Preview – liam-app
    273:  PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
    274:  ##[endgroup]
    275:  [warning]Event Validation Error: The event type deployment_status is not supported because it's not tied to a branch or tag ref.
    276:  ##[group]Run pnpm exec playwright install --with-deps
    ...
    
    1513:  |■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■| 100% of 2.3 MiB
    1514:  FFMPEG playwright build v1011 downloaded to /home/runner/.cache/ms-playwright/ffmpeg-1011
    1515:  ##[group]Run pnpm exec playwright test --project="Mobile Safari"
    1516:  �[36;1mpnpm exec playwright test --project="Mobile Safari"�[0m
    1517:  shell: /usr/bin/bash -e {0}
    1518:  env:
    1519:  CI: true
    1520:  URL: https://liam-d28273na7-route-06-core.vercel.app
    1521:  ENVIRONMENT: Preview – liam-app
    1522:  PNPM_HOME: /home/runner/setup-pnpm/node_modules/.bin
    1523:  ##[endgroup]
    1524:  Running 17 tests using 1 worker
    1525:  °°°·°×××××T××±····°°°°°·
    1526:  1) [Mobile Safari] › tests/e2e/page.test.ts:25:5 › Table node should be highlighted when clicked ─
    1527:  �[31mTest timeout of 10000ms exceeded.�[39m
    1528:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveAttribute�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
    1529:  Locator: getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')
    1530:  Expected string: �[32m"table-node-highlighted"�[39m
    1531:  Received: <element(s) not found>
    1532:  Call log:
    1533:  �[2m  - expect.toHaveAttribute with timeout 5000ms�[22m
    1534:  �[2m  - waiting for getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')�[22m
    1535:  35 |   await expect(
    1536:  36 |     tableNode.locator('div[class^="TableNode_wrapper"]'),
    1537:  > 37 |   ).toHaveAttribute('data-erd', 'table-node-highlighted')
    1538:  |     ^
    1539:  38 | })
    1540:  39 |
    1541:  40 | test('Edge animation should be triggered when table node is clicked', async ({
    1542:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:37:5
    1543:  Error Context: test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari/error-context.md
    1544:  Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    1545:  �[31mTest timeout of 10000ms exceeded.�[39m
    1546:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveAttribute�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
    1547:  Locator: getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')
    1548:  Expected string: �[32m"table-node-highlighted"�[39m
    1549:  Received: <element(s) not found>
    1550:  Call log:
    1551:  �[2m  - expect.toHaveAttribute with timeout 5000ms�[22m
    1552:  �[2m  - waiting for getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')�[22m
    1553:  35 |   await expect(
    1554:  36 |     tableNode.locator('div[class^="TableNode_wrapper"]'),
    1555:  > 37 |   ).toHaveAttribute('data-erd', 'table-node-highlighted')
    1556:  |     ^
    1557:  38 | })
    1558:  39 |
    1559:  40 | test('Edge animation should be triggered when table node is clicked', async ({
    1560:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:37:5
    1561:  Error Context: test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry1/error-context.md
    1562:  attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
    1563:  test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry1/trace.zip
    1564:  Usage:
    1565:  pnpm exec playwright show-trace test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry1/trace.zip
    1566:  ────────────────────────────────────────────────────────────────────────────────────────────────
    1567:  Retry #2 ───────────────────────────────────────────────────────────────────────────────────────
    1568:  �[31mTest timeout of 10000ms exceeded.�[39m
    1569:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveAttribute�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
    1570:  Locator: getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')
    1571:  Expected string: �[32m"table-node-highlighted"�[39m
    1572:  Received string: �[31m""�[39m
    1573:  Call log:
    1574:  �[2m  - expect.toHaveAttribute with timeout 5000ms�[22m
    1575:  �[2m  - waiting for getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')�[22m
    1576:  �[2m    - locator resolved to <div data-state="closed" class="TableNode_wrapper__OUENk" data-sentry-element="TooltipTrigger" data-sentry-source-file="TableNode.tsx">…</div>�[22m
    1577:  �[2m    - unexpected value "null"�[22m
    1578:  35 |   await expect(
    1579:  36 |     tableNode.locator('div[class^="TableNode_wrapper"]'),
    1580:  > 37 |   ).toHaveAttribute('data-erd', 'table-node-highlighted')
    1581:  |     ^
    1582:  38 | })
    1583:  39 |
    1584:  40 | test('Edge animation should be triggered when table node is clicked', async ({
    1585:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:37:5
    1586:  Error Context: test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry2/error-context.md
    1587:  Retry #3 ───────────────────────────────────────────────────────────────────────────────────────
    1588:  �[31mTest timeout of 10000ms exceeded.�[39m
    1589:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveAttribute�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
    1590:  Locator: getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')
    1591:  Expected string: �[32m"table-node-highlighted"�[39m
    1592:  Received string: �[31m""�[39m
    1593:  Call log:
    1594:  �[2m  - expect.toHaveAttribute with timeout 5000ms�[22m
    1595:  �[2m  - waiting for getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')�[22m
    1596:  �[2m    - locator resolved to <div data-state="closed" class="TableNode_wrapper__OUENk" data-sentry-element="TooltipTrigger" data-sentry-source-file="TableNode.tsx">…</div>�[22m
    1597:  �[2m    - unexpected value "null"�[22m
    1598:  35 |   await expect(
    1599:  36 |     tableNode.locator('div[class^="TableNode_wrapper"]'),
    1600:  > 37 |   ).toHaveAttribute('data-erd', 'table-node-highlighted')
    1601:  |     ^
    1602:  38 | })
    1603:  39 |
    1604:  40 | test('Edge animation should be triggered when table node is clicked', async ({
    1605:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:37:5
    1606:  Error Context: test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry3/error-context.md
    1607:  Retry #4 ───────────────────────────────────────────────────────────────────────────────────────
    1608:  �[31mTest timeout of 10000ms exceeded.�[39m
    1609:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveAttribute�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
    1610:  Locator: getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')
    1611:  Expected string: �[32m"table-node-highlighted"�[39m
    1612:  Received: <element(s) not found>
    1613:  Call log:
    1614:  �[2m  - expect.toHaveAttribute with timeout 5000ms�[22m
    1615:  �[2m  - waiting for getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')�[22m
    1616:  35 |   await expect(
    1617:  36 |     tableNode.locator('div[class^="TableNode_wrapper"]'),
    1618:  > 37 |   ).toHaveAttribute('data-erd', 'table-node-highlighted')
    1619:  |     ^
    1620:  38 | })
    1621:  39 |
    1622:  40 | test('Edge animation should be triggered when table node is clicked', async ({
    1623:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:37:5
    1624:  Error Context: test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry4/error-context.md
    1625:  Retry #5 ───────────────────────────────────────────────────────────────────────────────────────
    1626:  �[31mTest timeout of 10000ms exceeded.�[39m
    1627:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoHaveAttribute�[2m(�[22m�[32mexpected�[39m�[2m)�[22m
    1628:  Locator: getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')
    1629:  Expected string: �[32m"table-node-highlighted"�[39m
    1630:  Received: <element(s) not found>
    1631:  Call log:
    1632:  �[2m  - expect.toHaveAttribute with timeout 5000ms�[22m
    1633:  �[2m  - waiting for getByRole('button', { name: 'accounts table', exact: true }).locator('div[class^="TableNode_wrapper"]')�[22m
    1634:  35 |   await expect(
    1635:  36 |     tableNode.locator('div[class^="TableNode_wrapper"]'),
    1636:  > 37 |   ).toHaveAttribute('data-erd', 'table-node-highlighted')
    1637:  |     ^
    1638:  38 | })
    1639:  39 |
    1640:  40 | test('Edge animation should be triggered when table node is clicked', async ({
    1641:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:37:5
    1642:  Error Context: test-results/e2e-page-Table-node-should-be-highlighted-when-clicked-Mobile-Safari-retry5/error-context.md
    1643:  2) [Mobile Safari] › tests/e2e/page.test.ts:40:5 › Edge animation should be triggered when table node is clicked 
    1644:  �[31mTest timeout of 10000ms exceeded.�[39m
    1645:  Error: locator.click: Test timeout of 10000ms exceeded.
    1646:  Call log:
    1647:  �[2m  - waiting for getByRole('button', { name: 'account_aliases table', exact: true })�[22m
    1648:  �[2m    - locator resolved to <div tabindex="0" role="button" data-id="account_aliases" aria-label="account_aliases table" data-testid="rf__node-account_aliases" aria-describedby="react-flow__node-desc-1" class="react-flow__node react-flow__node-table nopan selectable draggable">…</div>�[22m
    1649:  �[2m  - attempting click action�[22m
    1650:  �[2m    - waiting for element to be visible, enabled and stable�[22m
    1651:  55 |   await expect(edgeEllipseBefore).toBeHidden()
    1652:  56 |
    1653:  > 57 |   await tableNode.click()
    1654:  |                   ^
    1655:  58 |
    1656:  59 |   const edgeEllipseAfter = edge.locator('ellipse').first()
    1657:  60 |   await expect(edgeEllipseAfter).toBeVisible()
    1658:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:57:19
    1659:  Error Context: test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari/error-context.md
    1660:  Retry #1 ───────────────────────────────────────────────────────────────────────────────────────
    1661:  �[31mTest timeout of 10000ms exceeded.�[39m
    1662:  Error: �[2mexpect(�[22m�[31mlocator�[39m�[2m).�[22mtoBeVisible�[2m()�[22m
    1663:  Locator: getByRole('img', { name: 'Edge from accounts to account_aliases' }).locator('ellipse').first()
    1664:  Expected: visible
    1665:  Received: <element(s) not found>
    1666:  Call log:
    1667:  �[2m  - expect.toBeVisible with timeout 5000ms�[22m
    1668:  �[2m  - waiting for getByRole('img', { name: 'Edge from accounts to account_aliases' }).locator('ellipse').first()�[22m
    1669:  58 |
    1670:  59 |   const edgeEllipseAfter = edge.locator('ellipse').first()
    1671:  > 60 |   await expect(edgeEllipseAfter).toBeVisible()
    1672:  |                                  ^
    1673:  61 | })
    1674:  62 |
    1675:  63 | test('Cardinality should be highlighted when table node is clicked', async ({
    1676:  at /home/runner/work/liam/liam/frontend/packages/e2e/tests/e2e/page.test.ts:60:34
    1677:  Error Context: test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari-retry1/error-context.md
    1678:  attachment #2: trace (application/zip) ─────────────────────────────────────────────────────────
    1679:  test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari-retry1/trace.zip
    1680:  Usage:
    1681:  pnpm exec playwright show-trace test-results/e2e-page-Edge-animation-sh-894b5--when-table-node-is-clicked-Mobile-Safari-retry1/trace.zip
    1682:  ────────────────────────────────────────────────────────────────────────────────────────────────
    1683:  1 failed
    1684:  [Mobile Safari] › tests/e2e/page.test.ts:25:5 › Table node should be highlighted when clicked ──
    1685:  1 flaky
    1686:  [Mobile Safari] › tests/e2e/page.test.ts:40:5 › Edge animation should be triggered when table node is clicked 
    1687:  9 skipped
    1688:  6 passed (3.1m)
    1689:  ##[error]Process completed with exit code 1.
    1690:  ##[group]Run actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
    

    Copy link
    Contributor

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    ⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Typo in Function Names

    Multiple function names have a consistent typo: "Constaint" instead of "Constraint" (missing "r"). This affects several builder functions and could cause confusion or bugs.

    import { buildConstaintColumnNameDiffItem } from './constraints/buildConstaintColumnNameDiffItem.js'
    import { buildConstaintDeleteConstraintDiffItem } from './constraints/buildConstaintDeleteConstraintDiffItem.js'
    import { buildConstaintDetailDiffItem } from './constraints/buildConstaintDetailDiffItem.js'
    import { buildConstaintNameDiffItem } from './constraints/buildConstaintNameDiffItem.js'
    import { buildConstaintTargetColumnNameDiffItem } from './constraints/buildConstaintTargetColumnNameDiffItem.js'
    import { buildConstaintTargetTableNameDiffItem } from './constraints/buildConstaintTargetTableNameDiffItem.js'
    import { buildConstaintUpdateConstraintDiffItem } from './constraints/buildConstaintUpdateConstraintDiffItem.js'
    Typo in Type Name

    The type name "CheckConstarintDetail" has a typo (should be "CheckConstraintDetail"). This inconsistency could lead to confusion when using the type elsewhere.

    export type CheckConstarintDetail = v.InferOutput<
      typeof checkConstraintDetailSchema
    >
    Incomplete Component Implementation

    The GridTableRow component is missing its implementation body. The function is defined but doesn't return any JSX, which would cause runtime errors.

    export const GridTableRow = forwardRef<HTMLElement, GridTableRowProps>(
      ({ className, ...props }, ref) => (
        <dt
          ref={ref}
          className={clsx(styles.dt, styles.row, className)}
          {...props}
        />
      ),
    

    Copy link
    Contributor

    qodo-merge-pro-for-open-source bot commented May 22, 2025

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    CategorySuggestion                                                                                                                                    Impact
    General
    Fix function name typo
    Suggestion Impact:The commit fixed the typo in the function name exactly as suggested, changing 'buildConstaintDiffItem' to 'buildConstraintDiffItem' on line 23. Additionally, the commit fixed similar typos in other places, including changing 'buildConstaintColumnNameDiffItem' to 'buildConstraintColumnNameDiffItem'.

    code diff:

    -  const constraintDiffItem = buildConstaintDiffItem(
    +  const constraintDiffItem = buildConstraintDiffItem(
         tableId,

    There's a typo in the function name buildConstaintDiffItem. It should be
    buildConstraintDiffItem to maintain consistency with the imported function name
    and other constraint-related functions.

    frontend/packages/db-structure/src/diff/buildSchemaDiff.ts [247-253]

    -const constraintDiffItem = buildConstaintDiffItem(
    +const constraintDiffItem = buildConstraintDiffItem(
       tableId,
       constraintId,
       before,
       after,
       operations,
     )

    [Suggestion processed]

    Suggestion importance[1-10]: 8

    __

    Why: The suggestion correctly identifies and fixes a typo in the function name (buildConstaintDiffItem to buildConstraintDiffItem). This is important for code correctness and maintainability, as the typo could lead to runtime errors or confusion. The fix directly improves the reliability of constraint diff item generation.

    Medium
    Fix type name typo
    Suggestion Impact:The commit fixed the typo in the imported type name from CheckConstarintDetail to CheckConstraintDetail, exactly as suggested. The commit also fixed the same typo in another location where the type was used.

    code diff:

    -  CheckConstarintDetail,
    +  CheckConstraintDetail,
       Column,
       ColumnCheck,
       ColumnDefault,
    @@ -164,7 +164,7 @@
     
     export type ConstraintDetailDiffItem = BaseSchemaDiffItem & {
       kind: 'constraint-detail'
    -  data: CheckConstarintDetail
    +  data: CheckConstraintDetail

    There's a typo in the imported type name CheckConstarintDetail. It should be
    CheckConstraintDetail to maintain consistency with other constraint-related
    types.

    frontend/packages/db-structure/src/diff/types.ts [2]

     import type {
    -  CheckConstarintDetail,
    +  CheckConstraintDetail,
       Column,
       ColumnCheck,

    [To ensure code accuracy, apply this suggestion manually]

    Suggestion importance[1-10]: 8

    __

    Why: The suggestion accurately points out a typo in the imported type name (CheckConstarintDetail to CheckConstraintDetail). Correcting this is crucial for type safety and consistency, preventing potential type errors and improving code clarity.

    Medium
    Learned
    best practice
    Fix spelling in function names

    There's a spelling error in the function name and file name. "Constaint" should
    be "Constraint". This misspelling appears consistently across multiple files in
    the PR. Correct the spelling to maintain code quality and prevent confusion.

    frontend/packages/db-structure/src/diff/constraints/buildConstaintColumnNameDiffItem.ts [8-14]

    -export function buildConstaintColumnNameDiffItem(
    +export function buildConstraintColumnNameDiffItem(
       tableId: string,
       constraintId: string,
       before: Schema,
       after: Schema,
       operations: Operation[],
     ): ConstraintColumnNameDiffItem | null {

    [Suggestion processed]

    Suggestion importance[1-10]: 6

    __

    Why:
    Relevant best practice - Fix incorrect spelling in function and file names to ensure code consistency and maintainability.

    Low
    • Update

    Copy link
    Member

    @FunamaYukina FunamaYukina left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    I made one comment!🙏

    Comment on lines 11 to 18
    import { buildConstaintDeleteConstraintDiffItem } from './constraints/buildConstaintDeleteConstraintDiffItem.js'
    import { buildConstaintDetailDiffItem } from './constraints/buildConstaintDetailDiffItem.js'
    import { buildConstaintNameDiffItem } from './constraints/buildConstaintNameDiffItem.js'
    import { buildConstaintTargetColumnNameDiffItem } from './constraints/buildConstaintTargetColumnNameDiffItem.js'
    import { buildConstaintTargetTableNameDiffItem } from './constraints/buildConstaintTargetTableNameDiffItem.js'
    import { buildConstaintUpdateConstraintDiffItem } from './constraints/buildConstaintUpdateConstraintDiffItem.js'
    import { buildConstraintColumnNameDiffItem } from './constraints/buildConstraintColumnNameDiffItem.js'
    import { buildConstaintDiffItem } from './constraints/buildConstraintDiffItem.js'
    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Function name and file name may be “Constaint” instead of "Constraint"💭

    Copy link
    Member Author

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    My eyes skimmed over it and I easily missed the typo, so I really appreciate your pointing it out. 🙏

    🐛 fix typo in buildConstraintDiffItem function and related imports

    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    There seems to be a little more left!🙏

    ss 3357

    Copy link
    Member Author

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    It looks like I got all the file names wrong... I'll go ahead and fix them! 🙏

    Copy link
    Member Author

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    I believe I’ve finally fixed everything this time. 🙇

    🐛 fix typo in buildConstraintDiffItem function

    Copy link
    Member

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Thank you very much! I think it is perfect!✅

    junkisai added 6 commits May 23, 2025 16:15
    Refactor GridTable components to accept a className prop, allowing for additional styling flexibility. This change improves the customization options for users of the GridTable component while maintaining existing functionality.
    Upgrade zod to version 3.24.3 across multiple dependencies in pnpm-lock.yaml to ensure compatibility and leverage improvements. Additionally, add ts-pattern version 5.7.0 to the db-structure package.json, enhancing functionality and type safety in the project.
    Implement new utilities for handling constraint-related schema differences, including buildConstraintDiffItem, buildConstaintNameDiffItem, buildConstaintColumnNameDiffItem, buildConstaintTargetTableNameDiffItem, buildConstaintTargetColumnNameDiffItem, buildConstaintUpdateConstraintDiffItem, buildConstaintDeleteConstraintDiffItem, and buildConstaintDetailDiffItem. Update existing types and constants to support these functionalities, ensuring comprehensive type safety and consistency in the schema diff utilities.
    Implement the ConstraintList component to display various types of constraints (Primary Key, Foreign Key, Unique, Check) in the schema diff view. Introduce new ConstraintItem components for each constraint type, enhancing the organization and readability of the diff view. Update TableItem and TableDiffBlock components to support collapsible functionality for constraints, ensuring a consistent layout and improved user experience.
    …aint column name diff
    
    Correct the spelling of 'CheckConstarintDetail' to 'CheckConstraintDetail' across multiple files for consistency. Introduce a new utility function, 'buildConstraintColumnNameDiffItem', to handle schema differences related to constraint column names, enhancing the overall functionality of the schema diff utilities.
    Correct the spelling of 'buildConstaintDiffItem' to 'buildConstraintDiffItem' in the buildSchemaDiff.ts and buildConstraintDiffItem.ts files for consistency and accuracy. This change enhances code readability and maintains naming conventions across the schema diff utilities.
    Copy link
    Member

    @FunamaYukina FunamaYukina left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    Thank you so much! LGTM🚀

    @FunamaYukina FunamaYukina added this pull request to the merge queue May 23, 2025
    Merged via the queue into main with commit 5428e10 May 23, 2025
    21 of 23 checks passed
    @FunamaYukina FunamaYukina deleted the feat/diff-constaint branch May 23, 2025 08:55
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    2 participants