Unified custom input component model

[michaelbromley]

Ref: #414 (comment)

In that issue, the "ideal solution", one point reads:

There is a way to specify a UI component to act as the input control of that arg, in a similar way that we do with custom fields already.

Now I'm thinking about this problem, and it strikes me that we can actually improve on the model used for custom field UI components, which is slightly cumbersome to work with, and always requires a UI extension to be defined (which implies the overhead of a whole Angular module etc), which is sometimes overkill.

Perhaps there is a single, consistent way to define custom input components for:

• custom fields
• configurable operation args
• even native inputs?

Outline

1. We would have a central "registry" of input components, eg, text, html input, number, percentage, currency, boolean etc.
2. For each data type, there is a default component. Eg. string -> text, int -> number.
3. These defaults can be overridden with a config setting.
4. Custom components can be added to the registry
5. A common config object is used for all 3 categories of inputs

Problems to solve

1. Each component needs an id by which it can be referenced & looked up. Best would be the actual selector (e.g. vdr-text-input) but I need to make sure there is a mechanism by which we can make a lookup in Angular based on that rather than the class itself.
2. The config object needs to be as type-safe as possible (better DX) whilst also being flexible enough to accommodate configuration of many different types of component. E.g. a "number" input might need its min, max, step attributes specified.
3. There needs to be a shared interface for all input components, like what we currently have for custom field components.

Examples

Here are some non-functional examples of how it might work:

Define a control on a configurable operation definition

Setting the "facetValueIds" argument of a CollectionFilter:

export const facetValueCollectionFilter = new CollectionFilter({
    args: {
        facetValueIds: { 
          type: 'ID', 
          list: true ,
          ui: {
            component: 'vdr-facet-value-selector',
            inputs: {
              // .. maybe some specific config for the component via inputs
            },
        },
    },
    code: 'facet-value-filter',
    // ...
});

Define a custom field control

const config: VendureConfig = {
  // ...
  customFields: {
    Product: [
      {
        name: 'relatedProductId',
        type: 'ID',
        ui: {
          component: 'my-product-selector',
        }
     }
    ],
  }
};

Override a built-in input component

AdminUiPlugin.init({
      port: 5001,
      app: compileUiExtensions({
        outputPath: path.join(__dirname, '__admin-ui'),
        overrides: [
          {
            type: 'field-control',
            entity: 'Product',
            field: 'description',
            component: 'my-markdown-input-component',
        ],
      }],
    }),
}),

If we can get something like this one working, it means we may even be able to provide a generic way to override any other built in component. E.g. a custom datatable for the orders list.

[BeepLoveKarki]

I want the field like code of payment gateway, which are controlled by the code itself to be disabled to make changes via the admin UI because its already controlled by the code itself. Mismatches and errors may occur more if allowed edit in admin panel too.