Merge pull request #3171 from liam-hq/refact/add-command-palette-unsafe-hook

♻️ refact(command palette): add unsafe hook to easy to use

Author: MH4GF

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

@@ -11,17 +11,13 @@ import {
 import { type FC, useEffect } from 'react'
 import styles from './CommandPalette.module.css'
 import { CommandPaletteContent } from './CommandPaletteContent'
-import { useCommandPalette } from './CommandPaletteProvider'
+import { useCommandPaletteOrThrow } from './CommandPaletteProvider'
 import { useSubscribeCommands } from './hooks'
 
 export const CommandPalette: FC = () => {
   useSubscribeCommands()
 
-  const commandPaletteResult = useCommandPalette()
-  if (commandPaletteResult.isErr()) {
-    throw commandPaletteResult.error
-  }
-  const { open, setOpen, toggleOpen } = commandPaletteResult.value
+  const { open, setOpen, toggleOpen } = useCommandPaletteOrThrow()
 
   // Toggle the menu when ⌘K is pressed
   useEffect(() => {

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

@@ -9,7 +9,7 @@ import {
 import { Command } from 'cmdk'
 import type { FC } from 'react'
 import { useUserEditingOrThrow } from '@/stores'
-import { useCommandPalette } from '../CommandPaletteProvider'
+import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
 import { useCopyLink } from '../hooks/useCopyLink'
 import { useFitScreen } from '../hooks/useFitScreen'
 import { getSuggestionText } from '../utils'
@@ -20,8 +20,7 @@ export const CommandPaletteCommandOptions: FC = () => {
   const { zoomToFit, tidyUp } = useFitScreen()
   const { setShowMode } = useUserEditingOrThrow()
 
-  const result = useCommandPalette()
-  const setOpen = result.isOk() ? result.value.setOpen : () => {}
+  const { setOpen } = useCommandPaletteOrThrow()
 
   return (
     <Command.Group heading="Commands">

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

@@ -13,15 +13,28 @@ import {
   UserEditingProvider,
 } from '@/stores'
 import { CommandPaletteProvider } from '../CommandPaletteProvider'
+import * as UseCommandPalette from '../CommandPaletteProvider/hooks'
 import { TableOptions } from './TableOptions'
 
 afterEach(() => {
   vi.clearAllMocks()
 })
 
+const mockSetCommandPaletteDialogOpen = vi.fn()
 const mockSelectTable = vi.fn()
 const mockWindowOpen = vi.fn()
 
+const originalUseCommandPaletteOrThrow =
+  UseCommandPalette.useCommandPaletteOrThrow
+vi.spyOn(UseCommandPalette, 'useCommandPaletteOrThrow').mockImplementation(
+  () => {
+    const original = originalUseCommandPaletteOrThrow()
+    return {
+      ...original,
+      setOpen: mockSetCommandPaletteDialogOpen,
+    }
+  },
+)
 const originalUseTableSelection = UseTableSelection.useTableSelection
 vi.spyOn(UseTableSelection, 'useTableSelection').mockImplementation(() => {
   const original = originalUseTableSelection()
@@ -78,7 +91,7 @@ describe('mouse interactions', () => {
     await user.click(screen.getByRole('link', { name: 'follows' }))
 
     expect(mockSelectTable).toHaveBeenCalled()
-    // TODO: check if the dialog is closed
+    expect(mockSetCommandPaletteDialogOpen).toHaveBeenCalledWith(false)
   })
 
   it('does nothing with ⌘ + click (default browser action: open in new tab)', async () => {
@@ -90,6 +103,7 @@ describe('mouse interactions', () => {
     await user.keyboard('{/Meta}')
 
     expect(mockSelectTable).not.toHaveBeenCalled()
+    expect(mockSetCommandPaletteDialogOpen).not.toHaveBeenCalled()
   })
 })
 
@@ -106,7 +120,7 @@ describe('keyboard interactions', () => {
       displayArea: 'main',
       tableId: 'users',
     })
-    // TODO: check if the dialog is closed
+    expect(mockSetCommandPaletteDialogOpen).toHaveBeenCalledWith(false)
 
     // other functions are not called
     expect(mockWindowOpen).not.toHaveBeenCalled()
@@ -124,6 +138,7 @@ describe('keyboard interactions', () => {
 
     // other functions are not called
     expect(mockSelectTable).not.toHaveBeenCalled()
+    expect(mockSetCommandPaletteDialogOpen).not.toHaveBeenCalled()
   })
 
   it('does nothing on Enter when suggestion is not table', async () => {
@@ -137,6 +152,6 @@ describe('keyboard interactions', () => {
 
     expect(mockWindowOpen).not.toHaveBeenCalled()
     expect(mockSelectTable).not.toHaveBeenCalled()
-    // TODO: check if the dialog is NOT closed
+    expect(mockSetCommandPaletteDialogOpen).not.toHaveBeenCalled()
   })
 })

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

@@ -3,7 +3,7 @@ import { Command } from 'cmdk'
 import { type FC, useCallback, useEffect } from 'react'
 import { useTableSelection } from '@/features/erd/hooks'
 import { useSchemaOrThrow } from '@/stores'
-import { useCommandPalette } from '../CommandPaletteProvider'
+import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
 import type { CommandPaletteSuggestion } from '../types'
 import { getSuggestionText } from '../utils'
 import styles from './CommandPaletteOptions.module.css'
@@ -19,8 +19,7 @@ type Props = {
 }
 
 export const TableOptions: FC<Props> = ({ suggestion }) => {
-  const result = useCommandPalette()
-  const setOpen = result.isOk() ? result.value.setOpen : () => {}
+  const { setOpen } = useCommandPaletteOrThrow()
 
   const schema = useSchemaOrThrow()
   const { selectTable } = useTableSelection()

frontend/packages/erd-core/src/features/erd/components/ERDRenderer/CommandPalette/CommandPaletteProvider/hooks.ts

@@ -5,10 +5,7 @@ import {
   type CommandPaletteContextValue,
 } from './context'
 
-export const useCommandPalette = (): Result<
-  CommandPaletteContextValue,
-  Error
-> => {
+const useCommandPalette = (): Result<CommandPaletteContextValue, Error> => {
   const commandPaletteValue = useContext(CommandPaletteContext)
   if (!commandPaletteValue)
     return err(
@@ -17,3 +14,10 @@ export const useCommandPalette = (): Result<
 
   return ok(commandPaletteValue)
 }
+
+export const useCommandPaletteOrThrow = (): CommandPaletteContextValue => {
+  const result = useCommandPalette()
+  if (result.isErr()) throw result.error
+
+  return result.value
+}

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

@@ -1,14 +1,10 @@
 import { Search } from '@liam-hq/ui'
 import type { FC } from 'react'
-import { useCommandPalette } from '../CommandPaletteProvider'
+import { useCommandPaletteOrThrow } from '../CommandPaletteProvider'
 import styles from './CommandPaletteTriggerButton.module.css'
 
 export const CommandPaletteTriggerButton: FC = () => {
-  const commandPaletteResult = useCommandPalette()
-  if (commandPaletteResult.isErr()) {
-    throw commandPaletteResult.error
-  }
-  const { setOpen } = commandPaletteResult.value
+  const { setOpen } = useCommandPaletteOrThrow()
 
   return (
     <button