create-appraisejs 0.3.1-alpha.1 → 0.4.0

package/templates/blank/scripts/sync-test-cases.ts

@@ -33,6 +33,9 @@ interface TestCaseFromFS {
   modulePath: string // From folder structure
   filterTags: string[] // Scenario tags excluding @tc_...
   steps: ParsedStep[] // From scenario steps
+  hasAppraiseMetadata: boolean
+  nodes: Array<{ nodeId: string; order: number; label: string }>
+  flowBlocks: Array<{ id: string; name: string; order: number; nodeIds: string[] }>
   filePath: string // Feature file path
 }
 
@@ -101,7 +104,8 @@ async function scanTestCasesFromFilesystem(featuresDir: string): Promise<TestCas
 
       for (const scenario of parsedFeature.scenarios) {
         // Find identifier tag (@tc_...)
-        const identifierTag = scenario.tags.find(tag => {
+        const flattenedTags = scenario.tags.flatMap(splitTagLine)
+        const identifierTag = flattenedTags.find(tag => {
           const tagName = tag.startsWith('@') ? tag.substring(1) : tag
           return tagName.startsWith('tc_')
         })
@@ -114,20 +118,27 @@ async function scanTestCasesFromFilesystem(featuresDir: string): Promise<TestCas
         }
 
         // Extract filter tags (all tags except identifier tag)
-        const filterTags = scenario.tags.filter(tag => tag !== identifierTag).flatMap(tag => splitTagLine(tag))
+        const filterTags = flattenedTags.filter(tag => tag !== identifierTag)
 
         // Parse title and description from scenario name
         // Note: gherkin parser swaps them, so we pass both
-        const { title, description } = parseScenarioTitle(scenario.name, scenario.description)
+        const parsedTitle = parseScenarioTitle(scenario.name, scenario.description)
+        const nodesByOrder = new Map((scenario.appraiseMetadata?.nodes ?? []).map(node => [node.order, node]))
 
         testCases.push({
           identifierTag: identifierTag.startsWith('@') ? identifierTag : `@${identifierTag}`,
-          title,
-          description,
+          title: scenario.appraiseMetadata?.title ?? parsedTitle.title,
+          description: scenario.appraiseMetadata?.description ?? parsedTitle.description,
           testSuiteName,
           modulePath,
           filterTags,
-          steps: scenario.steps,
+          steps: scenario.steps.map(step => ({
+            ...step,
+            appraiseNode: nodesByOrder.get(step.order),
+          })),
+          hasAppraiseMetadata: scenario.appraiseMetadata != null,
+          nodes: scenario.appraiseMetadata?.nodes ?? [],
+          flowBlocks: scenario.appraiseMetadata?.flowBlocks ?? [],
           filePath: parsedFeature.filePath,
         })
       }
@@ -271,13 +282,15 @@ async function syncTestCaseSteps(
       const existingStep = existingStepsMap.get(step.order)
       const { icon } = determineStepTypeAndIcon(step.keyword)
       const gherkinStep = `${step.keyword} ${step.text}`
+      const label = step.appraiseNode?.label ?? step.text
 
       if (existingStep) {
+        const expectedFlowNodeId = step.appraiseNode?.nodeId ?? existingStep.flowNodeId
         const projectedExistingStep = projectedExistingStepsMap.get(step.order)
         const matchesProjectedState =
           projectedExistingStep != null &&
           projectedExistingStep.gherkinStep === gherkinStep &&
-          projectedExistingStep.label === step.text &&
+          projectedExistingStep.label === label &&
           projectedExistingStep.icon === determineProjectedStepIcon(step.keyword) &&
           projectedExistingStep.templateStepSignature === match.signature &&
           sameResolvedParameters(projectedExistingStep.parameters, match.parameters)
@@ -288,7 +301,8 @@ async function syncTestCaseSteps(
           !matchesProjectedState &&
           (existingStep.gherkinStep !== gherkinStep ||
             existingStep.templateStepId !== match.templateStepId ||
-            existingStep.label !== step.text ||
+            existingStep.flowNodeId !== expectedFlowNodeId ||
+            existingStep.label !== label ||
             existingStep.icon !== icon)
 
         if (needsUpdate) {
@@ -296,7 +310,8 @@ async function syncTestCaseSteps(
             where: { id: existingStep.id },
             data: {
               gherkinStep,
-              label: step.text,
+              flowNodeId: expectedFlowNodeId,
+              label,
               templateStepId: match.templateStepId,
               icon,
             },
@@ -326,7 +341,8 @@ async function syncTestCaseSteps(
             testCaseId,
             order: step.order,
             gherkinStep,
-            label: step.text,
+            flowNodeId: step.appraiseNode?.nodeId,
+            label,
             icon,
             templateStepId: match.templateStepId,
           },
@@ -363,6 +379,38 @@ async function syncTestCaseSteps(
   }
 }
 
+async function syncTestCaseFlowBlocks(testCaseId: string, testCase: TestCaseFromFS): Promise<void> {
+  if (!testCase.hasAppraiseMetadata) {
+    return
+  }
+
+  const validNodeIds = new Set(testCase.nodes.map(node => node.nodeId))
+
+  await prisma.testCaseFlowBlock.deleteMany({
+    where: { testCaseId },
+  })
+
+  if (testCase.flowBlocks.length === 0) {
+    return
+  }
+
+  await prisma.testCase.update({
+    where: { id: testCaseId },
+    data: {
+      flowBlocks: {
+        create: testCase.flowBlocks.map(block => ({
+          id: block.id,
+          name: block.name,
+          order: block.order,
+          nodes: {
+            create: block.nodeIds.filter(nodeId => validNodeIds.has(nodeId)).map(nodeId => ({ flowNodeId: nodeId })),
+          },
+        })),
+      },
+    },
+  })
+}
+
 type TemplateStepForMatch = Array<{
   id: string
   signature: string
@@ -500,6 +548,7 @@ async function upsertTestCase(
     }
 
     await syncTestCaseSteps(existingTestCase.id, testCase.steps, templateSteps, result)
+    await syncTestCaseFlowBlocks(existingTestCase.id, testCase)
     return
   }
 
@@ -545,6 +594,7 @@ async function upsertTestCase(
   console.log(`   ➕ Created test case '${testCase.title}' (${testCase.identifierTag})`)
 
   await syncTestCaseSteps(newTestCase.id, testCase.steps, templateSteps, result)
+  await syncTestCaseFlowBlocks(newTestCase.id, testCase)
 }
 
 async function deleteOrphanedTestCases(fsTestCaseTags: Set<string>, result: SyncResult): Promise<void> {

package/templates/blank/src/components/diagram/flow-diagram-node-search.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import type { RefObject } from 'react'
+import type { ReactNode, RefObject } from 'react'
 import { Search, X } from 'lucide-react'
 import { AnimatePresence, LazyMotion, domAnimation } from 'motion/react'
 import * as motion from 'motion/react-m'
@@ -23,6 +23,7 @@ type FlowDiagramNodeSearchProps = {
   onSearchQueryChange: (value: string) => void
   onToggleSearch: () => void
   onSelectResult: (nodeId: string) => void
+  shortcutHint: ReactNode
 }
 
 export function FlowDiagramNodeSearch({
@@ -34,6 +35,7 @@ export function FlowDiagramNodeSearch({
   onSearchQueryChange,
   onToggleSearch,
   onSelectResult,
+  shortcutHint,
 }: FlowDiagramNodeSearchProps) {
   return (
     <LazyMotion features={domAnimation} strict>
@@ -99,7 +101,12 @@ export function FlowDiagramNodeSearch({
                 {isSearchOpen ? <X /> : <Search />}
               </Button>
             </TooltipTrigger>
-            <TooltipContent side="bottom">{isSearchOpen ? 'Close search' : 'Search nodes'}</TooltipContent>
+            <TooltipContent side="bottom">
+              <div className="flex items-center gap-2">
+                <span>{isSearchOpen ? 'Close search' : 'Search nodes'}</span>
+                {shortcutHint}
+              </div>
+            </TooltipContent>
           </Tooltip>
         </TooltipProvider>
       </div>

package/templates/blank/src/components/diagram/flow-diagram-toolbar.tsx

@@ -1,9 +1,10 @@
 'use client'
 
-import type { RefObject } from 'react'
+import { useEffect, useState, type RefObject } from 'react'
 import { Boxes, MousePointer2, Plus } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
+import { Kbd, KbdGroup } from '@/components/ui/kbd'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { FlowDiagramNodeSearch } from './flow-diagram-node-search'
 import type { FlowNodeSearchResult } from './flow-diagram-node-search'
@@ -24,6 +25,31 @@ type FlowDiagramToolbarProps = {
   onOpenAddNodeDialog: () => void
 }
 
+function ShortcutHint({ shortcutKey }: { shortcutKey: string }) {
+  const [isMac, setIsMac] = useState(false)
+
+  useEffect(() => {
+    queueMicrotask(() => setIsMac(navigator.userAgent.toLowerCase().includes('mac')))
+  }, [])
+
+  return (
+    <KbdGroup>
+      <Kbd>{isMac ? '⌘' : 'Ctrl'}</Kbd>
+      <Kbd>Shift</Kbd>
+      <Kbd>{shortcutKey}</Kbd>
+    </KbdGroup>
+  )
+}
+
+function TooltipWithShortcut({ label, shortcutKey }: { label: string; shortcutKey: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <span>{label}</span>
+      <ShortcutHint shortcutKey={shortcutKey} />
+    </div>
+  )
+}
+
 export function FlowDiagramToolbar({
   enableNodeSearch,
   enableNodeGrouping,
@@ -51,6 +77,7 @@ export function FlowDiagramToolbar({
           onSearchQueryChange={onSearchQueryChange}
           onToggleSearch={onToggleSearch}
           onSelectResult={onSearchResultSelect}
+          shortcutHint={<ShortcutHint shortcutKey="S" />}
         />
       ) : null}
       {enableNodeGrouping ? (
@@ -67,7 +94,12 @@ export function FlowDiagramToolbar({
                 {isGroupingSelectionMode ? <Boxes /> : <MousePointer2 />}
               </Button>
             </TooltipTrigger>
-            <TooltipContent side="bottom">{isGroupingSelectionMode ? 'Selection mode' : 'Create block'}</TooltipContent>
+            <TooltipContent side="bottom">
+              <TooltipWithShortcut
+                label={isGroupingSelectionMode ? 'Selection mode' : 'Create block'}
+                shortcutKey="B"
+              />
+            </TooltipContent>
           </Tooltip>
         </TooltipProvider>
       ) : null}
@@ -78,7 +110,9 @@ export function FlowDiagramToolbar({
               <Plus />
             </Button>
           </TooltipTrigger>
-          <TooltipContent side="bottom">Add Node</TooltipContent>
+          <TooltipContent side="bottom">
+            <TooltipWithShortcut label="Add Node" shortcutKey="C" />
+          </TooltipContent>
         </Tooltip>
       </TooltipProvider>
     </div>

package/templates/blank/src/components/diagram/flow-diagram.test.tsx

@@ -149,6 +149,32 @@ function renderFlowDiagram(enableNodeSearch = true) {
   )
 }
 
+function renderInteractiveFlowDiagram() {
+  return render(
+    <FlowDiagram
+      {...requiredProps}
+      enableNodeSearch
+      enableNodeGrouping
+      nodeOrder={{
+        'node-1': {
+          order: 1,
+          label: 'Open Checkout',
+          gherkinStep: 'Given cart page',
+          parameters: [],
+          templateStepId: 'step-1',
+        },
+        'node-2': {
+          order: 2,
+          label: 'Submit Payment',
+          gherkinStep: 'When payment is submitted',
+          parameters: [],
+          templateStepId: 'step-2',
+        },
+      }}
+    />,
+  )
+}
+
 describe('FlowDiagram node search', () => {
   beforeEach(() => {
     xyflowMocks.setCenter.mockClear()
@@ -301,6 +327,205 @@ describe('FlowDiagram node search', () => {
   })
 })
 
+describe('FlowDiagram keyboard shortcuts', () => {
+  beforeEach(() => {
+    xyflowMocks.setCenter.mockClear()
+    xyflowMocks.updateNodeInternals.mockClear()
+  })
+
+  it('handles shortcuts while the flow builder page is mounted', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+  })
+
+  it('opens and focuses search', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    const searchInput = await screen.findByRole('textbox', { name: /search nodes/i })
+    await waitFor(() => {
+      expect(searchInput).toHaveFocus()
+    })
+  })
+
+  it('toggles search closed when the shortcut is pressed again', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+    })
+  })
+
+  it('supports macOS-style meta search shortcuts', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Meta>}{Shift>}s{/Shift}{/Meta}')
+
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+  })
+
+  it('toggles block selection mode when grouping is enabled', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+
+    expect(screen.getByRole('button', { name: /exit block selection mode/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+
+    expect(screen.getByRole('button', { name: /select nodes for block/i })).toBeInTheDocument()
+  })
+
+  it('toggles the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
+
+  it('switches from the add-node sheet to block selection mode', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.click(screen.getByRole('button', { name: 'Add Node' }))
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /exit block selection mode/i })).toBeInTheDocument()
+  })
+
+  it('switches from search to the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+    })
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+  })
+
+  it('switches from the add-node sheet to search', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+    expect(await screen.findByRole('textbox', { name: /search nodes/i })).toBeInTheDocument()
+  })
+
+  it('switches from block selection mode to the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+    expect(screen.getByRole('button', { name: /exit block selection mode/i })).toBeInTheDocument()
+
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    expect(screen.getByRole('button', { name: /select nodes for block/i })).toBeInTheDocument()
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+  })
+
+  it('ignores shortcuts while the block dialog is open', async () => {
+    const user = userEvent.setup()
+    render(
+      <FlowDiagram
+        {...requiredProps}
+        enableNodeSearch
+        enableNodeGrouping
+        nodeOrder={{
+          'node-1': {
+            order: 1,
+            label: 'Open Checkout',
+            gherkinStep: 'Given cart page',
+            parameters: [],
+            templateStepId: 'step-1',
+          },
+          'node-2': {
+            order: 2,
+            label: 'Submit Payment',
+            gherkinStep: 'When payment is submitted',
+            parameters: [],
+            templateStepId: 'step-2',
+          },
+        }}
+      />,
+    )
+
+    await user.keyboard('{Control>}{Shift>}b{/Shift}{/Control}')
+    await user.click(screen.getByRole('button', { name: /select all flow nodes/i }))
+    await user.click(screen.getByRole('button', { name: /^create block$/i }))
+    await user.keyboard('{Control>}{Shift>}s{/Shift}{/Control}')
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+  })
+
+  it('switches from focused search input to the add-node sheet', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.click(screen.getByRole('button', { name: /search nodes/i }))
+    await user.click(screen.getByRole('textbox', { name: /search nodes/i }))
+    await user.keyboard('{Control>}{Shift>}c{/Shift}{/Control}')
+
+    await waitFor(() => {
+      expect(screen.queryByRole('textbox', { name: /search nodes/i })).not.toBeInTheDocument()
+    })
+    expect(screen.getByRole('dialog')).toHaveTextContent('Node form add')
+  })
+
+  it('shows shortcut hints in toolbar tooltips', async () => {
+    const user = userEvent.setup()
+    renderInteractiveFlowDiagram()
+
+    await user.hover(screen.getByRole('button', { name: /search nodes/i }))
+    expect((await screen.findAllByText('Search nodes')).length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Ctrl').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Shift').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('S').length).toBeGreaterThan(0)
+
+    await user.unhover(screen.getByRole('button', { name: /search nodes/i }))
+    await user.hover(screen.getByRole('button', { name: /select nodes for block/i }))
+    expect((await screen.findAllByText('Create block')).length).toBeGreaterThan(0)
+    expect(screen.getAllByText('B').length).toBeGreaterThan(0)
+
+    await user.unhover(screen.getByRole('button', { name: /select nodes for block/i }))
+    await user.hover(screen.getByRole('button', { name: 'Add Node' }))
+    expect((await screen.findAllByText('Add Node')).length).toBeGreaterThan(0)
+    expect(screen.getAllByText('C').length).toBeGreaterThan(0)
+  })
+})
+
 describe('FlowDiagram node grouping', () => {
   it('keeps the main add-node action available after a block exists', async () => {
     const user = userEvent.setup()

package/templates/blank/src/components/diagram/use-flow-diagram-search.ts

@@ -105,6 +105,8 @@ export function useFlowDiagramSearch({
     nodeSearchResults,
     shouldShowSearchSuggestions,
     setSearchQuery,
+    closeSearch,
+    openSearch,
     toggleSearch,
     handleFlowPointerDown,
     handleSearchResultClick,

package/templates/blank/src/components/diagram/use-flow-diagram.ts

@@ -31,6 +31,14 @@ import { flowDiagramHandlersRef, flowEdgeTypes, flowNodeTypes } from './flow-dia
 import { useFlowDiagramBlockGrouping } from './use-flow-diagram-block-grouping'
 import { useFlowDiagramSearch } from './use-flow-diagram-search'
 
+function isEditableShortcutTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  return Boolean(target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]'))
+}
+
 function mergeRecordsById<T extends { id: string }>(base: T[], overrides: T[]): T[] {
   const byId = new Map<string, T>()
   for (const item of base) {
@@ -156,6 +164,7 @@ export function useFlowDiagram({
 
   const { flowBlockMembership } = grouping
   const { searchHighlightedNodeId } = search
+  const isBlockingFlowOverlayOpen = showEditNodeDialog || grouping.isBlockDialogOpen
 
   useEffect(() => {
     flowDiagramHandlersRef.current.onEditNode = handleEditNode
@@ -344,6 +353,90 @@ export function useFlowDiagram({
     setShowAddNodeDialog(true)
   }, [])
 
+  const toggleAddNodeDialog = useCallback(() => {
+    setPendingAddSourceNodeId(null)
+    setShowAddNodeDialog(current => !current)
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || !event.shiftKey || (!event.ctrlKey && !event.metaKey)) {
+        return
+      }
+
+      const key = event.key.toLowerCase()
+      const isFlowShortcut = key === 's' || key === 'b' || key === 'c'
+      if (!isFlowShortcut) {
+        return
+      }
+
+      const hasShortcutSurfaceOpen = search.isSearchOpen || showAddNodeDialog || grouping.isGroupingSelectionMode
+      if (isBlockingFlowOverlayOpen || (isEditableShortcutTarget(event.target) && !hasShortcutSurfaceOpen)) {
+        return
+      }
+
+      if (key === 's' && enableNodeSearch) {
+        event.preventDefault()
+        if (showAddNodeDialog) {
+          setShowAddNodeDialog(false)
+          setPendingAddSourceNodeId(null)
+        }
+        if (grouping.isGroupingSelectionMode) {
+          grouping.toggleGroupingSelectionMode()
+        }
+        search.toggleSearch()
+        return
+      }
+
+      if (key === 'c' && showAddNodeDialog) {
+        event.preventDefault()
+        if (search.isSearchOpen) {
+          search.closeSearch()
+        }
+        if (grouping.isGroupingSelectionMode) {
+          grouping.toggleGroupingSelectionMode()
+        }
+        toggleAddNodeDialog()
+        return
+      }
+
+      if (key === 'b' && enableNodeGrouping) {
+        event.preventDefault()
+        if (search.isSearchOpen) {
+          search.closeSearch()
+        }
+        if (showAddNodeDialog) {
+          setShowAddNodeDialog(false)
+          setPendingAddSourceNodeId(null)
+        }
+        grouping.toggleGroupingSelectionMode()
+        return
+      }
+
+      if (key === 'c') {
+        event.preventDefault()
+        if (search.isSearchOpen) {
+          search.closeSearch()
+        }
+        if (grouping.isGroupingSelectionMode) {
+          grouping.toggleGroupingSelectionMode()
+        }
+        toggleAddNodeDialog()
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown, { capture: true })
+    return () => window.removeEventListener('keydown', handleKeyDown, { capture: true })
+  }, [
+    enableNodeGrouping,
+    enableNodeSearch,
+    grouping,
+    isBlockingFlowOverlayOpen,
+    search,
+    showAddNodeDialog,
+    toggleAddNodeDialog,
+  ])
+
   return {
     enableNodeSearch,
     enableNodeGrouping,