fix(web): array-table Add Item button creates rows with input fields

[ChuckBuilds]

Summary

• Fix "Add Item" button on array-table widgets creating rows with only a trash icon and no input fields
• Root cause: data-item-properties attribute used {{ item_properties|tojson|e }} inside double-quoted HTML — Jinja2's |tojson returns Markup (safe), making |e a no-op, so JSON double quotes broke the attribute
• Switch to single-quote attribute delimiters and filter properties to only display columns

Test plan

• Open soccer-scoreboard plugin config, click "Add Item" under Custom Leagues — row should appear with Name, League Code, Priority, Enabled fields
• Fill in a league and save — verify it persists
• Check browser console for [ArrayTableWidget] Failed to parse errors — should be none
• Verify no regression on other plugins using array-table widget

Closes #302

🤖 Generated with Claude Code

Summary by CodeRabbit

• Refactor
  • Updated data serialization in plugin configuration interface for improved consistency in how array item properties and display columns are handled in the DOM.

[coderabbitai]

📝 Walkthrough

Walkthrough

Modified the serialization of HTMX data attributes in the array-table "Add Item" button, filtering item_properties to only include keys present in display_columns and adjusting JSON serialization format for both attributes.

Changes

Cohort / File(s)	Summary
Array-table button data attributes web_interface/templates/v3/partials/plugin_config.html	Updated data-item-properties to filter properties matching display_columns keys using `ns.d

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

• LEDMatrix#201: Introduces the array-table widget and its "Add Item" button registration — this PR fixes the data attribute serialization for that widget's initial implementation.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix: restoring the array-table Add Item button to create rows with input fields instead of empty rows.
Linked Issues check	✅ Passed	The changes directly address issue #302 by fixing the data attribute serialization to restore input fields when adding new array-table rows.
Out of Scope Changes check	✅ Passed	The changes are narrowly scoped to the plugin_config.html template file, modifying only the array-table Add Item button attributes as required to fix issue #302.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/array-table-add-item-empty-rows

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@web_interface/templates/v3/partials/plugin_config.html`:
- Around line 564-565: The HTML attribute generation for data-item-properties
uses single-quote delimiters but doesn't escape single quotes inside the JSON
payload, so values in item_properties containing apostrophes will break parsing;
update the template where data-item-properties is produced to run the rendered
JSON through a single-quote escape (e.g., apply |replace("'", "'") to the {{
ns.d|tojson }} output) so that attributes using data-item-properties (and
similarly data-display-columns if needed) remain valid and can be JSON.parsed by
array-table.js.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 51010431-8b0d-46a1-ac23-f7f369339d9e

📥 Commits

Reviewing files that changed from the base of the PR and between 68a0fe1 and 8960636.

📒 Files selected for processing (1)

• web_interface/templates/v3/partials/plugin_config.html