feat(plugin-tools): ENG-12227 add remove button to ResourcesPickerButton

[Manish-Builder-io]

Commerce plugins (CommerceLayer, SFCC, etc.) had no way to remove a selected resource once added. This adds a Close icon button next to the existing edit button that clears the selection and updates the content JSON, matching the pattern used by the reference field type.

https://www.loom.com/share/10758e859af547dca10fad16fa4bb71e

Description

Summary

• Adds a Close (X) icon button next to the existing edit (pencil) button in ResourcesPickerButton so users can remove a selected resource
• Clears resourceHandle, resourceId, resourceInfo and calls onChange(null) to update the content JSON
• Applies to all commerce plugins (CommerceLayer, Shopify, SFCC, etc.) since they share @builder.io/plugin-tools

Test plan

• Load a commerce plugin (e.g. CommerceLayer) locally via npm start
• Add a product/resource field to a model and select a product
• Verify both edit (pencil) and remove (X) buttons appear on the selected resource
• Click the X button and verify the resource is removed from the UI and cleared from the content JSON
• Verify clicking "Choose {resourceName}" allows re-selecting a new resource after removal

Screenshot
If relevant, add a screenshot or two of the changes you made.
Before:

After fix:

---

Note

Medium Risk
Introduces new state-clearing behavior (onChange(null)) for resource fields used across commerce plugins, which could affect downstream consumers that assume a value is always present. Otherwise the change is localized to editor UI controls and layout.

Overview
Adds a remove (X) action to ResourcesPickerButton so a previously selected commerce resource can be cleared.

When a resource is selected, the UI now shows both an edit (pencil) button and a close button; clicking close resets resourceHandle/resourceId/resourceInfo and calls props.onChange(null) to clear the field value, with minor layout tweaks to accommodate the extra icon.

^{Reviewed by Cursor Bugbot for commit 4d02a45. Bugbot is set up for automated code reviews on this repo. Configure here.}

[changeset-bot]

⚠️ No Changeset found

Latest commit: 4d02a45

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4d02a45

---

☁️ Nx Cloud last updated this comment at 2026-04-14 11:22:01 UTC

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Bugbot Autofix prepared a fix for the issue found in the latest run.

• ✅ Fixed: Passing null instead of undefined bypasses type contract
  • Changed props.onChange(null as any) to props.onChange(undefined) to match the CustomReactEditorProps type contract and ensure correct clearing behavior.

Or push these changes by commenting:

@cursor push d80dc52efe

Preview (d80dc52efe)

diff --git a/packages/plugin-tools/src/editors/ResourcesPicker.tsx b/packages/plugin-tools/src/editors/ResourcesPicker.tsx
--- a/packages/plugin-tools/src/editors/ResourcesPicker.tsx
+++ b/packages/plugin-tools/src/editors/ResourcesPicker.tsx
@@ -333,7 +333,7 @@
                 store.resourceHandle = undefined;
                 store.resourceId = undefined;
                 store.resourceInfo = null;
-                props.onChange(null as any);
+                props.onChange(undefined);
               })}
             >
               <Close css={{ color: '#888' }} />

_{This Bugbot Autofix run was free. To enable autofix for future PRs, go to the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 4d02a45. Configure here.}

[cursor]

Passing null instead of undefined bypasses type contract

Low Severity

The onChange callback type is onChange(val: BuilderRequest | string | undefined): void, which explicitly supports undefined for clearing a value. The remove handler passes null as any instead, bypassing TypeScript's type checking. Since null and undefined can have different semantics (e.g., null serializes in JSON while undefined strips the key), the parent component may handle them differently. Calling props.onChange(undefined) would match the type contract, avoid the as any cast, and guarantee correct clearing behavior.

 

^{Reviewed by Cursor Bugbot for commit 4d02a45. Configure here.}