Reaction: Allow users to customize the PDP to include new fields w/o modifying core

[zenweasel]

Summary

Users need to be able to add fields to the PDP so they can be modified by admins w/o having to edit the code

Justification

Currently users can extend the DB schema and the GraphQL schema without modifying core but these fields are not editable in the PDP. This feature used to exist but was removed at some point. Adding custom fields is one of the most common use cases and is no longer fully covered.

Detail Requirements

A developer should be able to specify through code additional fields that should be added to the PDP. They should be able to specify:

1. The name of the field (going to assume that this is a field that's on an extended schema on Product)
2. The "Label" for the field (could also be derived from the simple-schema label)
3. What sort of control should be used (text box, select, etc)
4. If using a Select, what valid available options there are
5. For an initial implementation all custom fields could just be displayed in a separate "Custom Fields" are similar to Metadata

This is a temporary implementation until Catalog 2.0 is built out

[zenweasel]

Per discussion with @mikemurray temporarily assigning this to him pending discussion and approval

[janus-reith]

@zenweasel Is there any publicly available roadmap regarding the Catalog 2.0 you mentioned?

[mikemurray]

Here's a PR to add the new product admin back into the register component API: https://github.com/reactioncommerce/reaction/issues/5039

That would allow you to override the entire form and add whatever fields you want.

However...

You now own that entire component and will forever be locked out of improvements that are yet to be made to it unless you bring them over yourself.

I personally want to see an evolution to how we extend our operator UI and move away from replacing components as the only means of extension.

---

I want to be able extend admin panels without having to completly override the existing components within them. To have my customization live alongside core functonality that I don't have to maintain myself.

This would allow you continue to receive updates and bug fixes to the built-in admin forms and still be able to extend with your additional fields. (We kinda have this now, but its in Blaze 👎 )

I propose aregisterOperatorCard function that registers a new component to be added in page with some specified order in the chosen admin panel or view.

For example:

register:

registerOperatorCard({
  name: "myCustomForm", // Must be unique, otherwise it could be used to override an existing one
  operatorPanel: "productAdmin", // where to put the components
  cardTitle: "My Custom Fields", // Title for the card component
  component: MyCustomFormComponent, // Your custom component
  priority: 20 // Position in panel
});

consume:

const operatorCards = getOperatorCards("productAdmin").map((card) => {
  return <Card cardTitle={card.cardTitle}>{card.component}</Card>;
});

[loan-laux]

That would be a total game changer. Way to go!

[aldeed]

I'm closing this because I believe the blocks feature resolves this. @mikemurray If I'm wrong, please reopen and transfer to reaction-admin repo.