List fields selector

[corsacca]

[openhands-ai]

Looks like there are a few issues preventing this PR from being merged!

• GitHub Actions are failing:
  • Tests
  • Tests

If you'd like me to help, just leave a comment, like

@OpenHands please fix the failing actions on PR #2696

Feel free to include any additional details that might help me get this PR into a better state.

_{^{You can manage your notification settings}}

[kodinkat]

Code Review Summary - PR #2696: List Fields Selector

🎯 Overview

This PR implements a modern, searchable field picker interface to replace the existing checkbox-based field selection. The changes span across frontend (HTML/CSS/JS) and backend (PHP) with significant UX improvements.

Files Changed: archive-template.php, modular-list.js, _list.scss, global-functions.php
Impact: +379 −29 lines | Major UX enhancement

✅ Strengths

1. Excellent UX Improvements

• Searchable Interface: Real-time field filtering with dropdown
• Visual Field Tags: Clear selected field representation with remove buttons
• Keyboard Navigation: Enter/Escape key support
• Icon Integration: Proper handling of field icons via new dt_render_field_icon() function

⚠️ Issues Requiring Attention

1. Critical: Inline CSS Should Be Moved to SCSS

- <input type="text" id="field_search_input" style="width: 100%; padding: 8px; border: 1px solid #ccc;">
+ <input type="text" id="field_search_input" class="field-search-input">

Location: archive-template.php:557-559
Recommendation: Move all inline styles to _list.scss for maintainability

2. Missing Error Handling

// Lines 942-944 in modular-list.js - needs try-catch
let selectedFields = JSON.parse($('#selected_fields_input').val() || '[]');

Recommendation: Add error handling for malformed JSON

3. Performance: Search Input Should Be Debounced

// Lines 821-835 in modular-list.js
$('#field_search_input').on('input', function () {
    const searchTerm = $(this).val().toLowerCase();
    // This fires on every keystroke - should be debounced
});

📋 Action Items

Before Merge (Required)

1. Fix failing GitHub Actions tests
2. Move inline CSS to SCSS files

- style="width: 100%; padding: 8px; border: 1px solid #ccc;"
   + class="field-search-input"

3. Add error handling for JSON operations

   try {
       let selectedFields = JSON.parse($('#selected_fields_input').val() || '[]');
   } catch (e) {
       console.warn('Invalid field selection data, resetting');
       selectedFields = [];
   }

Post-Merge (Recommended)

1. Add debouncing to search input
2. Performance testing with large field lists
3. Mobile device testing
4. Accessibility testing with screen readers

🎖️ Overall Assessment

Rating: 7.5/10 - Strong UX improvement with solid implementation
This PR represents a significant enhancement to the field selection experience. The core functionality is well-implemented with good attention to user experience and code quality. The main blockers are the failing tests and inline CSS that should be addressed before merge.

Recommendation: Approve with required changes addressed. This is a valuable improvement that users will appreciate.

[corsacca]

@kodinkat debounce only makes sense if the input was searching agains't an API.