GenericInput: pass disabled to JSONInput

[alvarolozano]

Bug report

Required System information

• Node.js version: 14.18
• NPM version: 6.14.5
• Strapi version: 4.7.1
• Database: Postgres/Sqlite
• Operating system: Ubuntu based distro
• Is your project Javascript or Typescript: JavaScript

Describe the bug

The GenericInput component does not currently pass the disabled attribute to the JSONInput component, so for advanced use cases, it is not possible to achieve a readonly JSON field

Steps to reproduce the behavior

1. Generate a new UI component
2. Add a genericInput with type="json" and disabled={true} and other required props
3. The field renders correctly, but it is not disabled, you are able to edit it

Expected behavior

When a json type genericInput renders the component, the disabled attribute should be passed to the child JSONInput, so it's possible to achieve a readonly field

Screenshots

Code snippets

// helper-plugin/lib/src/components/GenericInput/index.js
switch (type) {
    case 'json': {
      return (
        <JSONInput
          label={label}
          labelAction={labelAction}
          value={value}
          error={errorMessage}
          hint={hint}
          required={required}
          onChange={(json) => {
            // Default to null when the field is not required and there is no input value
            const value = !attribute.required && !json.length ? 'null' : json;
            onChange({ target: { name, value } });
          }}
          minHeight={pxToRem(252)}
          maxHeight={pxToRem(504)}
        />
      );
    }

Additional context

Add any other context about the problem here.

[alvarolozano]

I could fix it! So If PRs are accepted, I would contribute it