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
-
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
-
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
-
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
-
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
-
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
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
SearchInput Component Integration
Property Filtering Functionality
Visual Consistency
Integration with Existing Form
Edge Cases Handled
Technical Implementation Notes
Files to Modify
Definition of Done