create-appraisejs 0.3.0 → 0.3.1-alpha.0

package/templates/starter/src/components/diagram/dynamic-parameter-locator-field.tsx

@@ -0,0 +1,288 @@
+'use client'
+
+import CreateLocatorWorkspace from '@/app/(base)/locators/create/create-locator-workspace'
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Sparkles } from 'lucide-react'
+
+import { DynamicParameterFieldShell } from './dynamic-parameter-field-shell'
+import type { InlineLocatorSaveResult } from '@/app/(base)/locators/create/create-locator-workspace-helpers'
+
+import type { DynamicParameterInputFieldProps, LocatorSelectionMode } from './dynamic-parameter-field-types'
+import { getLocatorsForGroup } from './dynamic-parameters-helpers'
+
+type LocatorFieldSectionProps = DynamicParameterInputFieldProps & {
+  name: string
+  fieldClassName: string
+  defaultValueInput: boolean
+}
+
+function DynamicParameterLocatorModeSelect({
+  name,
+  fieldClassName,
+  locatorSelectionMode,
+  onLocatorSelectionModeChange,
+}: {
+  name: string
+  fieldClassName: string
+  locatorSelectionMode: LocatorSelectionMode
+  onLocatorSelectionModeChange: DynamicParameterInputFieldProps['onLocatorSelectionModeChange']
+}) {
+  return (
+    <div className="space-y-2">
+      <Label htmlFor={`locator-mode-${name}`} className="text-sm text-muted-foreground">
+        Selector Source
+      </Label>
+      <Select
+        value={locatorSelectionMode}
+        onValueChange={value => onLocatorSelectionModeChange(name, value as LocatorSelectionMode)}
+      >
+        <SelectTrigger id={`locator-mode-${name}`} className={fieldClassName}>
+          <SelectValue placeholder="Choose selector source" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="existing">Use Existing</SelectItem>
+          <SelectItem value="new">Create New Selector</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+function DynamicParameterLocatorNewSection({
+  name,
+  fieldClassName,
+  createLocatorParamName,
+  createdLocatorSelection,
+  environments,
+  modules,
+  availableLocatorGroups,
+  onInlineLocatorSave,
+  onOpenCreateLocator,
+}: LocatorFieldSectionProps & {
+  createLocatorParamName: string | null
+  createdLocatorSelection: DynamicParameterInputFieldProps['createdLocatorSelections'][string] | undefined
+}) {
+  return (
+    <div className="bg-background/40 space-y-3 rounded-md border border-border p-3">
+      <div className="space-y-2">
+        <Label className="block text-sm font-semibold text-primary">Create New Selector</Label>
+        <Button type="button" variant="outline" size="sm" className="gap-1.5" onClick={() => onOpenCreateLocator(name)}>
+          <Sparkles className="size-4" />
+          Create Selector
+        </Button>
+      </div>
+      <Dialog open={createLocatorParamName === name} onOpenChange={open => !open && onOpenCreateLocator(null)}>
+        <DialogContent className="max-h-[90vh] max-w-6xl overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Create New Selector</DialogTitle>
+            <DialogDescription>Save a selector here to use it in this node immediately.</DialogDescription>
+          </DialogHeader>
+          <CreateLocatorWorkspace
+            environments={environments}
+            locatorGroups={availableLocatorGroups}
+            modules={modules}
+            displayMode="inline"
+            onSaveSuccess={result => onInlineLocatorSave(name, result)}
+            onClose={() => onOpenCreateLocator(null)}
+          />
+        </DialogContent>
+      </Dialog>
+      <DynamicParameterLocatorCreatedSummary
+        name={name}
+        fieldClassName={fieldClassName}
+        createdLocatorSelection={createdLocatorSelection}
+      />
+    </div>
+  )
+}
+
+function DynamicParameterLocatorCreatedSummary({
+  name,
+  fieldClassName,
+  createdLocatorSelection,
+}: {
+  name: string
+  fieldClassName: string
+  createdLocatorSelection: InlineLocatorSaveResult | undefined
+}) {
+  return (
+    <div className="space-y-3">
+      <div className="space-y-2">
+        <Label
+          htmlFor={`created-group-${name}`}
+          className="pointer-events-none cursor-not-allowed select-none text-sm text-muted-foreground"
+        >
+          Locator Group
+        </Label>
+        <Input
+          id={`created-group-${name}`}
+          value={createdLocatorSelection?.locatorGroupName ?? ''}
+          placeholder="Created group will appear here"
+          readOnly
+          tabIndex={-1}
+          onMouseDown={event => event.preventDefault()}
+          className={`${fieldClassName} cursor-not-allowed select-none`}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label
+          htmlFor={`created-locator-${name}`}
+          className="pointer-events-none cursor-not-allowed select-none text-sm text-muted-foreground"
+        >
+          Locator
+        </Label>
+        <Input
+          id={`created-locator-${name}`}
+          value={createdLocatorSelection?.locatorName ?? ''}
+          placeholder="Created locator will appear here"
+          readOnly
+          tabIndex={-1}
+          onMouseDown={event => event.preventDefault()}
+          className={`${fieldClassName} cursor-not-allowed select-none`}
+        />
+      </div>
+    </div>
+  )
+}
+
+function DynamicParameterLocatorExistingSection({
+  name,
+  values,
+  fieldClassName,
+  defaultValueInput,
+  selectedGroupId,
+  availableLocatorGroups,
+  availableLocators,
+  onInputChange,
+  onLocatorGroupChange,
+}: LocatorFieldSectionProps & {
+  selectedGroupId: string
+  availableLocators: ReturnType<typeof getLocatorsForGroup>
+}) {
+  return (
+    <div className="bg-background/40 space-y-3 rounded-md border border-border p-3">
+      <Label className="text-sm font-semibold text-primary">Use Existing</Label>
+      <div className="space-y-2">
+        <Label htmlFor={`group-${name}`} className="text-sm text-muted-foreground">
+          Locator Group
+        </Label>
+        <Select
+          value={selectedGroupId}
+          onValueChange={value => onLocatorGroupChange(name, value)}
+          required={!defaultValueInput}
+        >
+          <SelectTrigger id={`group-${name}`} className={fieldClassName}>
+            <SelectValue placeholder="Select a locator group" />
+          </SelectTrigger>
+          <SelectContent isEmpty={availableLocatorGroups.length === 0}>
+            {availableLocatorGroups.map(group => (
+              <SelectItem key={group.id} value={group.id}>
+                {group.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor={`select-${name}`} className="text-sm text-muted-foreground">
+          Locator
+        </Label>
+        <Select
+          value={typeof values[name] === 'string' ? values[name] : ''}
+          onValueChange={value => onInputChange(name, value)}
+          required={!defaultValueInput}
+          disabled={!selectedGroupId}
+        >
+          <SelectTrigger id={`select-${name}`} className={fieldClassName}>
+            <SelectValue placeholder={getLocatorPlaceholder(defaultValueInput, selectedGroupId)} />
+          </SelectTrigger>
+          <SelectContent isEmpty={availableLocators.length === 0}>
+            {availableLocators.map(locator => (
+              <SelectItem key={locator.id} value={locator.name}>
+                {locator.name}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+    </div>
+  )
+}
+
+function getLocatorPlaceholder(defaultValueInput: boolean, selectedGroupId: string) {
+  if (!selectedGroupId) {
+    return 'Select a locator group first'
+  }
+
+  return defaultValueInput ? 'Select a locator (optional)' : 'Select a locator *'
+}
+
+export function DynamicParameterLocatorField(props: DynamicParameterInputFieldProps) {
+  const {
+    param,
+    values,
+    errors,
+    defaultValueInput,
+    fieldClassName,
+    selectedLocatorGroups,
+    locatorSelectionModes,
+    createdLocatorSelections,
+    availableLocatorGroups,
+    availableLocatorOptions,
+    createLocatorParamName,
+    environments,
+    modules,
+    onInputChange,
+    onLocatorGroupChange,
+    onLocatorSelectionModeChange,
+    onInlineLocatorSave,
+    onOpenCreateLocator,
+  } = props
+  const { name } = param
+  const locatorSelectionMode = locatorSelectionModes[name] ?? 'existing'
+  const selectedGroupId = selectedLocatorGroups[name] || ''
+  const availableLocators = selectedGroupId ? getLocatorsForGroup(availableLocatorOptions, selectedGroupId) : []
+  const sectionProps = { ...props, name, fieldClassName, defaultValueInput }
+
+  return (
+    <DynamicParameterFieldShell
+      name={name}
+      defaultValueInput={defaultValueInput}
+      htmlFor={`select-${name}`}
+      errorMessage={errors[name]}
+    >
+      <DynamicParameterLocatorModeSelect
+        name={name}
+        fieldClassName={fieldClassName}
+        locatorSelectionMode={locatorSelectionMode}
+        onLocatorSelectionModeChange={onLocatorSelectionModeChange}
+      />
+      {locatorSelectionMode === 'new' ? (
+        <DynamicParameterLocatorNewSection
+          {...sectionProps}
+          createLocatorParamName={createLocatorParamName}
+          createdLocatorSelection={createdLocatorSelections[name]}
+          environments={environments}
+          modules={modules}
+          availableLocatorGroups={availableLocatorGroups}
+          onInlineLocatorSave={onInlineLocatorSave}
+          onOpenCreateLocator={onOpenCreateLocator}
+        />
+      ) : (
+        <DynamicParameterLocatorExistingSection
+          {...sectionProps}
+          values={values}
+          selectedGroupId={selectedGroupId}
+          availableLocatorGroups={availableLocatorGroups}
+          availableLocators={availableLocators}
+          onInputChange={onInputChange}
+          onLocatorGroupChange={onLocatorGroupChange}
+        />
+      )}
+    </DynamicParameterFieldShell>
+  )
+}

package/templates/starter/src/components/diagram/dynamic-parameters-helpers.ts

@@ -92,6 +92,7 @@ export function validateDynamicParameters(
   values: DynamicParameterValuesMap,
   selectedLocatorGroups: Record<string, string>,
   defaultValueInput: boolean,
+  locatorSelectionModes: Record<string, 'existing' | 'new'> = {},
 ) {
   if (defaultValueInput) {
     return {}
@@ -103,7 +104,11 @@ export function validateDynamicParameters(
     const value = values[parameter.name]
 
     if (parameter.type === StepParameterType.LOCATOR) {
-      if (!selectedLocatorGroups[parameter.name]) {
+      if (locatorSelectionModes[parameter.name] === 'new') {
+        if (!value) {
+          errors[parameter.name] = 'Locator is required'
+        }
+      } else if (!selectedLocatorGroups[parameter.name]) {
         errors[parameter.name] = 'Locator group is required'
       } else if (!value) {
         errors[parameter.name] = 'Locator is required'

package/templates/starter/src/components/diagram/dynamic-parameters.test.tsx

@@ -0,0 +1,295 @@
+// @vitest-environment jsdom
+
+import { act, render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { StepParameterType } from '@prisma/client'
+import React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import type { InlineLocatorSaveResult } from '@/app/(base)/locators/create/create-locator-workspace-helpers'
+
+import DynamicFormFields, { type DynamicFormFieldsRef } from './dynamic-parameters'
+
+const { inlineSaveResult } = vi.hoisted(() => ({
+  inlineSaveResult: {
+    current: {
+      locatorId: 'locator-2',
+      locatorName: 'Sign in button',
+      locatorGroupId: 'group-1',
+      locatorGroupName: 'Login',
+      selector: 'button[data-testid="sign-in"]',
+      route: '/login',
+      moduleId: 'module-1',
+    } satisfies InlineLocatorSaveResult,
+  },
+}))
+
+vi.mock('@/app/(base)/locators/create/create-locator-workspace', () => ({
+  __esModule: true,
+  default: ({ onSaveSuccess, onClose }: {
+    onSaveSuccess?: (result: InlineLocatorSaveResult) => void
+    onClose?: () => void
+  }) => (
+    <button
+      type="button"
+      onClick={() => {
+        onSaveSuccess?.(inlineSaveResult.current)
+        onClose?.()
+      }}
+    >
+      Save Inline Locator
+    </button>
+  ),
+}))
+
+const locatorParam = {
+  id: 'param-1',
+  name: 'target',
+  type: StepParameterType.LOCATOR,
+  order: 1,
+  templateStepId: 'step-1',
+} as never
+
+function renderLocatorFields({
+  onChange = vi.fn(),
+  onLocatorCreated = vi.fn(),
+}: {
+  onChange?: (values: Array<{ name: string; value: string; type: StepParameterType; order: number }>) => void
+  onLocatorCreated?: (result: InlineLocatorSaveResult) => void
+} = {}) {
+  return render(
+    <DynamicFormFields
+      templateStepParams={[locatorParam]}
+      locators={[{ id: 'locator-1', name: 'Login link', locatorGroupId: 'group-1' }]}
+      locatorGroups={[{ id: 'group-1', name: 'Login', route: '/login', moduleId: 'module-1' }]}
+      environments={[{ id: 'env-1', name: 'Staging' }]}
+      modules={[{ id: 'module-1', name: 'Auth', parentId: null }]}
+      onChange={onChange}
+      onLocatorCreated={onLocatorCreated}
+    />,
+  )
+}
+
+describe('DynamicFormFields locator parameters', () => {
+  beforeEach(() => {
+    inlineSaveResult.current = {
+      locatorId: 'locator-2',
+      locatorName: 'Sign in button',
+      locatorGroupId: 'group-1',
+      locatorGroupName: 'Login',
+      selector: 'button[data-testid="sign-in"]',
+      route: '/login',
+      moduleId: 'module-1',
+    }
+  })
+
+  it('renders selector source dropdown and defaults to existing selector panel', () => {
+    renderLocatorFields()
+
+    expect(screen.getByRole('combobox', { name: 'Selector Source' })).toHaveTextContent('Use Existing')
+    expect(screen.getAllByText('Use Existing').length).toBeGreaterThan(0)
+    expect(screen.queryByRole('button', { name: 'Create Selector' })).not.toBeInTheDocument()
+  })
+
+  it('renders the create-new panel when selector source is new', async () => {
+    const user = userEvent.setup()
+    renderLocatorFields()
+
+    await user.click(screen.getByRole('combobox', { name: 'Selector Source' }))
+    await user.click(screen.getByRole('option', { name: 'Create New Selector' }))
+
+    expect(screen.getAllByText('Create New Selector').length).toBeGreaterThan(0)
+    expect(screen.getByRole('button', { name: 'Create Selector' })).toBeInTheDocument()
+    expect(screen.getByRole('textbox', { name: 'Locator Group' })).toHaveAttribute('readonly')
+    expect(screen.getByRole('textbox', { name: 'Locator' })).toHaveAttribute('readonly')
+    expect(screen.queryByRole('combobox', { name: 'Locator Group' })).not.toBeInTheDocument()
+  })
+
+  it('keeps existing locator group then locator selection behavior', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    renderLocatorFields({ onChange })
+
+    await user.click(screen.getByRole('combobox', { name: 'Locator Group' }))
+    await user.click(screen.getByRole('option', { name: 'Login' }))
+    await user.click(screen.getByRole('combobox', { name: /Locator$/ }))
+    await user.click(screen.getByRole('option', { name: 'Login link' }))
+
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        name: 'target',
+        value: 'Login link',
+        type: StepParameterType.LOCATOR,
+        order: 1,
+      },
+    ])
+  })
+
+  it('auto-selects an inline-created locator in an existing group', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    const onLocatorCreated = vi.fn()
+    renderLocatorFields({ onChange, onLocatorCreated })
+
+    await user.click(screen.getByRole('combobox', { name: 'Selector Source' }))
+    await user.click(screen.getByRole('option', { name: 'Create New Selector' }))
+    await user.click(screen.getByRole('button', { name: 'Create Selector' }))
+    await user.click(screen.getByRole('button', { name: 'Save Inline Locator' }))
+
+    expect(onLocatorCreated).toHaveBeenCalledWith(inlineSaveResult.current)
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        name: 'target',
+        value: 'Sign in button',
+        type: StepParameterType.LOCATOR,
+        order: 1,
+      },
+    ])
+    expect(screen.getByRole('textbox', { name: 'Locator Group' })).toHaveValue('Login')
+    expect(screen.getByRole('textbox', { name: 'Locator' })).toHaveValue('Sign in button')
+  })
+
+  it('auto-selects an inline-created locator before the parent upserts options', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+
+    inlineSaveResult.current = {
+      locatorId: 'locator-3',
+      locatorName: 'Account menu',
+      locatorGroupId: 'group-2',
+      locatorGroupName: 'Account',
+      selector: '[data-testid="account-menu"]',
+      route: '/account',
+      moduleId: 'module-1',
+    }
+
+    renderLocatorFields({ onChange })
+
+    await user.click(screen.getByRole('combobox', { name: 'Selector Source' }))
+    await user.click(screen.getByRole('option', { name: 'Create New Selector' }))
+    await user.click(screen.getByRole('button', { name: 'Create Selector' }))
+    await user.click(screen.getByRole('button', { name: 'Save Inline Locator' }))
+
+    await waitFor(() => {
+      expect(screen.getByRole('textbox', { name: 'Locator Group' })).toHaveValue('Account')
+    })
+    expect(screen.getByRole('textbox', { name: 'Locator' })).toHaveValue('Account menu')
+    expect(onChange).toHaveBeenLastCalledWith([
+      {
+        name: 'target',
+        value: 'Account menu',
+        type: StepParameterType.LOCATOR,
+        order: 1,
+      },
+    ])
+  })
+
+  it('adds and selects a newly created group and locator when the parent upserts options', async () => {
+    const user = userEvent.setup()
+
+    inlineSaveResult.current = {
+      locatorId: 'locator-3',
+      locatorName: 'Account menu',
+      locatorGroupId: 'group-2',
+      locatorGroupName: 'Account',
+      selector: '[data-testid="account-menu"]',
+      route: '/account',
+      moduleId: 'module-1',
+    }
+
+    const onChange = vi.fn()
+
+    function Harness() {
+      const [locators, setLocators] = React.useState([
+        { id: 'locator-1', name: 'Login link', locatorGroupId: 'group-1' },
+      ])
+      const [locatorGroups, setLocatorGroups] = React.useState([
+        { id: 'group-1', name: 'Login', route: '/login', moduleId: 'module-1' },
+      ])
+
+      return (
+        <DynamicFormFields
+          templateStepParams={[locatorParam]}
+          locators={locators}
+          locatorGroups={locatorGroups}
+          environments={[{ id: 'env-1', name: 'Staging' }]}
+          modules={[{ id: 'module-1', name: 'Auth', parentId: null }]}
+          onChange={onChange}
+          onLocatorCreated={result => {
+            setLocatorGroups(current => [
+              ...current,
+              {
+                id: result.locatorGroupId,
+                name: result.locatorGroupName,
+                route: result.route,
+                moduleId: result.moduleId,
+              },
+            ])
+            setLocators(current => [
+              ...current,
+              {
+                id: result.locatorId,
+                name: result.locatorName,
+                locatorGroupId: result.locatorGroupId,
+              },
+            ])
+          }}
+        />
+      )
+    }
+
+    render(<Harness />)
+
+    await user.click(screen.getByRole('combobox', { name: 'Selector Source' }))
+    await user.click(screen.getByRole('option', { name: 'Create New Selector' }))
+    await user.click(screen.getByRole('button', { name: 'Create Selector' }))
+    await user.click(screen.getByRole('button', { name: 'Save Inline Locator' }))
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith([
+        {
+          name: 'target',
+          value: 'Account menu',
+          type: StepParameterType.LOCATOR,
+          order: 1,
+        },
+      ])
+    })
+
+    expect(screen.getByRole('textbox', { name: 'Locator' })).toHaveValue('Account menu')
+
+    await user.click(screen.getByRole('combobox', { name: 'Selector Source' }))
+    await user.click(screen.getByRole('option', { name: 'Use Existing' }))
+    await user.click(screen.getByRole('combobox', { name: 'Locator Group' }))
+    expect(within(screen.getByRole('listbox')).getByRole('option', { name: 'Account' })).toBeInTheDocument()
+  })
+
+  it('does not apply existing group validation while creating a new selector', async () => {
+    const user = userEvent.setup()
+    const formRef = React.createRef<DynamicFormFieldsRef>()
+
+    render(
+      <DynamicFormFields
+        ref={formRef}
+        templateStepParams={[locatorParam]}
+        locators={[{ id: 'locator-1', name: 'Login link', locatorGroupId: 'group-1' }]}
+        locatorGroups={[{ id: 'group-1', name: 'Login', route: '/login', moduleId: 'module-1' }]}
+        environments={[{ id: 'env-1', name: 'Staging' }]}
+        modules={[{ id: 'module-1', name: 'Auth', parentId: null }]}
+      />,
+    )
+
+    await user.click(screen.getByRole('combobox', { name: 'Selector Source' }))
+    await user.click(screen.getByRole('option', { name: 'Create New Selector' }))
+
+    let isValid = true
+    act(() => {
+      isValid = formRef.current?.validate() ?? true
+    })
+    expect(isValid).toBe(false)
+    expect(screen.queryByText('Locator group is required')).not.toBeInTheDocument()
+    await waitFor(() => {
+      expect(screen.getByText('Locator is required')).toBeInTheDocument()
+    })
+  })
+})