Manageiq-ui-classic: DDF componentMapper for Carbon

[skateman]

To switch all our DDF forms to Carbon styling, we need to create a componentMapper. My idea is to duplicate the PF3 mapper and reimplement the internals using the Carbon components. Or maybe @Hyperkid123 has a better way to generate mappers.

• [x] ~Upgrade to DDF v2 (#7277)~
• [x] ~CarbonMapper (https://github.com/data-driven-forms/react-forms/issues/795)~
• [x] ~Address the compatibility issues in Carbon defined here~
  
  
  
  • [x] ~isRequired https://github.com/data-driven-forms/react-forms/pull/846~
  
  
  • [x] ~SELECT https://github.com/data-driven-forms/react-forms/pull/851~
  
  
• [x] ~Demo form to test a11y https://github.com/ManageIQ/manageiq-ui-classic/issues/7278#issuecomment-713509023~
• [x] Adjust the carbon theming https://github.com/ManageIQ/manageiq-ui-classic/pull/7479
• [x] Replace the PF mapper with the Carbon one https://github.com/ManageIQ/manageiq-ui-classic/pull/7464

https://data-driven-forms.org/mappers/custom-mapper

Items completed for Kasparov in strike-through and copied to #7496

[Fryguy]

cc @chadh1313

[Hyperkid123]

@skateman there is a script in the data-driven forms that will generate a new package with placeholder components required by the library to be exported. If you want, you can use that and make it a part of the DDF or just run the script and copy the generated files to somewhere you want.

Command is here: https://data-driven-forms.org/development-setup#heading-generatingamappertemplate

[rvsia]

@skateman I can prepare basic components in DDF repo, it would be a great enhancement to our other mappers.

[skateman]

@rvsia go for it, I will help you out with the rest...

[rvsia]

I created an issue for Carbon mapper in DDF, you can follow the progress there https://github.com/data-driven-forms/react-forms/issues/795

[skateman]

There are a few issues that @rvsia found:

• There's no way to add isRequired, as Carbon doesn't define the * but rather the (optional) on fields. We should update the label for each element for all non-required fields. Or maybe create a wrapper component that fixes this (preferred IMO).
• There's no way to clear a select that doesn't require a value as Carbon doesn't have the x available. We should update the list of options for every dropdown with a fake value where the value should be clearable. Or create a wrapper component that fixes this (preferred IMO).
• Dropdown with non-multiselect can't have a search functionality. This will be painful as sometimes we have a lot of fields in a dropdown. A possible fix would be to ask the carbon people to add it.
• No typeahead-async search for multiselect, i.e. when you type stuff into the dropdown, it cannot fire API requests to load data based on them. This is probably something we don't use, but please correct me if I'm wrong.

[skateman]

The isRequired can be easily implemented on each component as it is not a destructive change and if the field is not set, we are not breaking any carbon specification.

https://github.com/data-driven-forms/react-forms/pull/846

For the rest we will probably have to reimplement the select component inspired by the current PF3 implementation that would look like a carbon component. Nah, we can just use ComboBox from Carbon for searchable/clearable and we don't really need the async filtering.

https://github.com/data-driven-forms/react-forms/pull/851

[skateman]

The demo is already available (only works with node version 10) and it can be started using the following steps:

nvm use 10 # only if you are using nvm
git clone https://github.com/data-driven-forms/react-forms.git
cd react-forms
yarn install
yarn build
cd packages/carbon-component-mapper
# yarn install # not needed according to @rvsia
yarn start

It will open a new browser window where every base component is available. Happy hacking TABbing :wink:

[rvsia]

@skateman You don't need to do yarn install 2x.

[Fryguy]

But what if you _really really_ want to yarn install? 🤔

[skateman]

But what if you _really really_ want to yarn install?

Nothing bad happens :laughing: tried

[rvsia]

🎶 So tell me what you want, what you really, really want
I wanna, (ha) I wanna, (ha) I wanna, (ha) I wanna, (ha)
I wanna really, really, really wanna _yarn install_ ah 🎶

[skateman]

:musical_note: If you wanna be my developer, you gotta get with yarn install :musical_note:

[skateman]

https://github.com/data-driven-forms/react-forms/pull/896