enhance: warning message for empty field options

[sapayth]

fixes #1016

Summary

This PR improves the form builder UX by replacing the loading spinner with a clear instructional message when there is no field in the form builder editing panel. Users now see helpful guidance instead of a generic loader.

Summary by CodeRabbit

• Bug Fixes

  • Fixed an issue where the currently selected field wasn't cleared after deletion, preventing proper state reset.

• New Features

  • Replaced the loading indicator with a helpful text message when no field is selected for editing.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR updates the form builder UI by replacing loader indicators with a localized empty-state message when no field is being edited, and ensures the editing field ID is cleared when a field is deleted. It also adds the corresponding i18n string key.

Changes

Cohort / File(s)	Summary
Field options empty-state messaging admin/form-builder/assets/js/components/field-options/template.php, assets/js-templates/form-components.php	Replaced loader indicator (paragraph with spinner span) with localized text message bound to i18n.empty_field_options_msg, maintaining styling classes.
Delete field side-effect handling admin/form-builder/assets/js/form-builder.js, assets/js/wpuf-form-builder.js	Added reset of editing_field_id to 0 when deleting a form field element, ensuring no field remains selected for editing after removal.
Internationalization setup includes/Admin/Forms/Admin_Form_Builder.php	Added new i18n string key empty_field_options_msg to the localization array.
Whitespace cleanup admin/form-builder/views/form-builder-v4.1.php	Adjusted indentation around closing </div> tags; DOM structure and content unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Consistent pattern changes across similar files (template updates and state management)
• Clear, localized messaging replaces loader component
• Minor side-effect addition to delete flow is straightforward
• Verify that the empty_field_options_msg string is properly defined and the i18n binding works in both template files

Possibly related PRs

• enhance: repeat field enhancement #1389: Implements the same editing_field_id reset pattern when deleting fields and modifies field-options templates similarly.

Suggested labels

Dev Review Done, Ready to Merge

Poem

🐰 When fields are deleted with a careful sweep,
The editing state no longer sleeps,
A message now greets the empty view,
"No options here"—fresh and true!
Hops away with joy

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	The PR's actual changes (improving field options UI messaging) do not align with the linked issue #1016 (missing product category in notifications).	Either link the correct issue related to form builder field options messaging, or verify that issue #1016 is the intended target and update PR changes accordingly.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: replacing a loader with a warning/instructional message for empty field options in the form builder.
Out of Scope Changes check	✅ Passed	All changes are focused on replacing loader indicators with i18n messages in field options, which aligns with the PR's stated objective of improving form builder UX.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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: 0

🧹 Nitpick comments (3)

assets/js/wpuf-form-builder.js (1)

404-408: Clear editing_field_id after top‑level field deletion

Resetting state.editing_field_id to 0 here avoids leaving the options panel logically pointing at a deleted field and aligns with the new empty‑state message behavior. You might optionally mirror this in delete_repeat_inner_field_element and delete_column_field_element for consistency when nested fields are removed, but it isn’t strictly required.

admin/form-builder/assets/js/form-builder.js (1)

404-408: Keep builder state clean after delete in admin entrypoint

Matching the other builder script, clearing state.editing_field_id to 0 after deleting a field prevents stale selections and supports the empty field‑options state. Good to keep both implementations consistent.

includes/Admin/Forms/Admin_Form_Builder.php (1)

319-351: Wire up i18n string for empty field‑options state

Adding empty_field_options_msg here cleanly supports the new empty‑state copy used in the Vue templates and keeps everything localized. The wording is serviceable; any further copy tweaks would just be UX polish.

Separately, this file (and the PR overall) only affects the form‑builder UI; it doesn’t appear to touch product‑category handling in notifications, so if issue #1016 is about “Missing product cat” in emails, that likely still needs a separate fix or explicit confirmation.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c09f776 and c3cef53.

📒 Files selected for processing (6)

• admin/form-builder/assets/js/components/field-options/template.php (1 hunks)
• admin/form-builder/assets/js/form-builder.js (1 hunks)
• admin/form-builder/views/form-builder-v4.1.php (1 hunks)
• assets/js-templates/form-components.php (1 hunks)
• assets/js/wpuf-form-builder.js (1 hunks)
• includes/Admin/Forms/Admin_Form_Builder.php (1 hunks)

🔇 Additional comments (3)

admin/form-builder/views/form-builder-v4.1.php (1)

179-179: No behavioral change in layout wrapper

This looks like a whitespace-only adjustment to the closing container; DOM structure and behavior remain unchanged.

admin/form-builder/assets/js/components/field-options/template.php (1)

2-4: Use localized guidance instead of a loader when no field is selected

Swapping the spinner/placeholder for {{ i18n.empty_field_options_msg }} gives users a clear instruction in the empty state while preserving the wrapper and text-center class that existing JS checks rely on. Nicely scoped UX improvement.

assets/js-templates/form-components.php (1)

510-513: Align template empty‑state with shared i18n message

This template now matches the component version by rendering i18n.empty_field_options_msg in the empty state, which keeps the different builder variants consistent and fully localized.