Merge pull request #3702 from liam-hq/refactor/table-column-url-functions

♻️ refactor(erd-core): add Hash schema and integrate URL handling functions

Author: junkisai

frontend/packages/erd-core/src/features/erd/components/ERDContent/components/TableNode/TableDetail/Columns/ColumnsItem/ColumnsItem.tsx

@@ -7,6 +7,7 @@ import {
   useUserEditingOrThrow,
 } from '../../../../../../../../../stores'
 import { useDiffStyle } from '../../../../../../../../diff/hooks/useDiffStyle'
+import { getTableColumnElementId } from '../../../../../../../utils/url/getTableColumnElementId'
 import { BlinkCircle } from '../../BlinkCircle/BlinkCircle'
 import styles from './ColumnsItem.module.css'
 import { Comment } from './Comment'
@@ -16,9 +17,6 @@ import { NotNull } from './NotNull'
 import { PrimaryKey } from './PrimaryKey'
 import { Type } from './Type'
 
-const columnElementId = (tableName: string, columnName: string) =>
-  `${tableName}__columns__${columnName}`
-
 type Props = {
   tableId: string
   column: Column
@@ -32,7 +30,7 @@ export const ColumnsItem: FC<Props> = ({
   constraints,
   focusedElementId,
 }) => {
-  const elementId = columnElementId(tableId, column.name)
+  const elementId = getTableColumnElementId(tableId, column.name)
 
   const { operations } = useSchemaOrThrow()
   const { showDiff } = useUserEditingOrThrow()

frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteOptions/TableOptions.tsx

@@ -3,17 +3,12 @@ import { Command } from 'cmdk'
 import { type FC, useCallback, useEffect } from 'react'
 import { useSchemaOrThrow } from '../../../../../../stores'
 import { useTableSelection } from '../../../../hooks'
+import { getTableLinkHref } from '../../../../utils/url/getTableLinkHref'
 import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
 import type { CommandPaletteSuggestion } from '../types'
 import { getSuggestionText } from '../utils'
 import styles from './CommandPaletteOptions.module.css'
 
-const getTableLinkHref = (activeTableName: string) => {
-  const searchParams = new URLSearchParams(window.location.search)
-  searchParams.set('active', activeTableName)
-  return `?${searchParams.toString()}`
-}
-
 type Props = {
   suggestion: CommandPaletteSuggestion | null
 }

frontend/packages/erd-core/src/features/erd/utils/index.ts

@@ -5,3 +5,4 @@ export * from './cookieUtils'
 export * from './createHash'
 export * from './highlightNodesAndEdges'
 export * from './isTableNode'
+export * from './url'

frontend/packages/erd-core/src/features/erd/utils/url/getTableColumnElementId.ts

@@ -0,0 +1,6 @@
+import type { Hash } from '../../../../schemas'
+
+export const getTableColumnElementId = (
+  tableName: string,
+  columnName: string,
+): Hash => `${tableName}__columns__${columnName}`

frontend/packages/erd-core/src/features/erd/utils/url/getTableLinkHref.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from 'vitest'
+import { getTableLinkHref } from './getTableLinkHref'
+
+it('should return the "active" query parameter with the table name', () => {
+  window.location.search = ''
+
+  expect(getTableLinkHref('users')).toBe('?active=users')
+})
+
+describe('when other query parameters are present', () => {
+  it('should preserve existing query parameters', () => {
+    window.location.search = '?page=2&sort=asc'
+
+    expect(getTableLinkHref('users')).toBe('?page=2&sort=asc&active=users')
+  })
+})

frontend/packages/erd-core/src/features/erd/utils/url/getTableLinkHref.ts

@@ -0,0 +1,7 @@
+import type { QueryParam } from '../../../../schemas'
+
+export const getTableLinkHref = (activeTableName: string) => {
+  const searchParams = new URLSearchParams(window.location.search)
+  searchParams.set('active' satisfies QueryParam, activeTableName)
+  return `?${searchParams.toString()}`
+}

frontend/packages/erd-core/src/features/erd/utils/url/index.ts

@@ -0,0 +1,2 @@
+export * from './getTableColumnElementId'
+export * from './getTableLinkHref'

frontend/packages/erd-core/src/schemas/hash/index.ts

@@ -0,0 +1,2 @@
+export * from './schemas'
+export * from './types'

frontend/packages/erd-core/src/schemas/hash/schemas.test.ts

@@ -0,0 +1,16 @@
+import { parse } from 'valibot'
+import { expect, it } from 'vitest'
+import { hashSchema } from './schemas'
+
+it('should pass valid texts', () => {
+  expect(parse(hashSchema, 'users__columns__id')).toBe('users__columns__id')
+  expect(parse(hashSchema, 'user_posts__columns__post_id')).toBe(
+    'user_posts__columns__post_id',
+  )
+})
+
+it('should throw error with invalid texts', () => {
+  expect(() => parse(hashSchema, '')).toThrowError()
+  expect(() => parse(hashSchema, 'users')).toThrowError()
+  expect(() => parse(hashSchema, 'a__b__c')).toThrowError()
+})

frontend/packages/erd-core/src/schemas/hash/schemas.ts

@@ -0,0 +1,9 @@
+import { custom } from 'valibot'
+
+export const hashSchema = custom<`${string}__columns__${string}`>(
+  (input): input is `${string}__columns__${string}` => {
+    if (typeof input !== 'string') return false
+    const parts = input.split('__columns__')
+    return parts.length === 2
+  },
+)