Skip to content

Add property search functionality to REST DSL editor configuration form #3114

@PVinaches

Description

@PVinaches

Please describe the feature that you want to propose

Story

As a Kaoto user editing REST DSL configurations,
I need to search and filter properties in the REST configuration form,
So that I can quickly find and configure specific REST properties without scrolling through all available options.

Context

Currently, the REST DSL editor page displays a custom form in the right panel for editing REST configurations, REST services, and REST methods. Unlike other components in the visualization designer (which use CanvasForm with CanvasFormHeader), the REST editor does not include a SearchInput component for filtering properties.

The CanvasFormHeader component already implements a SearchInput using PatternFly's SearchInput component with FilteredFieldContext for property filtering. This existing implementation should be reused in the REST DSL editor page.

Acceptance Criteria

  1. SearchInput Component Integration

    • The existing PatternFly SearchInput component is added to the REST configuration form (below the title section in the right panel)
    • Placeholder text reads "Find properties by name" (matching existing CanvasFormHeader implementation)
    • Component uses the same styling and CSS classes as CanvasFormHeader
  2. Property Filtering Functionality

    • Users can type in the SearchInput to filter visible properties in the KaotoForm
    • Filtering is case-insensitive and matches property names
    • The FilteredFieldContext from @kaoto/forms is properly integrated to enable filtering
    • Clear button (X) resets the filter and shows all properties
  3. Visual Consistency

    • SearchInput styling matches the implementation in CanvasFormHeader (lines 61-68)
    • Component is positioned appropriately within the REST editor's right panel layout
    • Maintains existing spacing and visual hierarchy with the form-rest-title section
  4. Integration with Existing Form

    • Works seamlessly with the existing KaotoForm in RestDslEditorPage (lines 159-165)
    • FilteredFieldContext provider wraps the KaotoForm if not already present
    • Does not interfere with form tabs or other form functionality
    • Filtering state is maintained when switching between different REST entities
  5. Edge Cases Handled

    • SearchInput is only visible when a REST entity is selected (not shown when no selection exists)
    • Filter state resets when switching between different REST configurations/methods
    • Empty search results show appropriate feedback
    • Search works correctly with custom fields from restFormFieldFactory

Technical Implementation Notes

  • Import and use FilteredFieldContext from @kaoto/forms package
  • Import SearchInput from @patternfly/react-core
  • Reference CanvasFormHeader.tsx implementation (lines 61-68) for SearchInput pattern
  • Update RestDslEditorPage.tsx right panel section (lines 136-173)
  • Wrap KaotoForm with FilteredFieldContext provider
  • Add CSS class "filter-fields" to SearchInput for consistent styling
  • Use data-testid="filter-fields" for testing

Files to Modify

  • packages/ui/src/pages/RestDslEditor/RestDslEditorPage.tsx
  • packages/ui/src/pages/RestDslEditor/RestDslEditorPage.scss (if additional styling needed)

Definition of Done

  • SearchInput component is visible in REST DSL editor right panel
  • FilteredFieldContext provider wraps the KaotoForm
  • Property filtering works correctly (case-insensitive, matches property names)
  • Clear functionality resets filter
  • Visual styling matches CanvasFormHeader implementation
  • Unit tests added for filtering functionality
  • Manual testing confirms filtering works with REST configurations, services, and methods
  • No regression in existing REST editor functionality
  • Code review completed and approved

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions