Use the carbon component mapper for our DDF forms

[skateman]

This replaces the old PF3 component mapper with the Carbon one, basically making all our DDF-based forms appear as Carbon forms. We have custom components that are appended to this mapper which should be addressed one by one:

• code-editor (reimplemented)
• field-array (provided by the mapper)
• dual-group (removed here)
• dual-list-select (provided by the mapper)
• password-field (UX?)
• edit-password-field (UX?)
• tree-view
• tree-selector (UX?)
• select
• protocol-selector (inherited from select)
• validate-credentials
• provider-credentials (no PF deps)
• validate-provider-credentials (inherited from validate-credentials)
• detect-button (UX?)

There's also a styling issue which is probably a collision with our stylesheets pulled in from Carbon. The demo provided by DDF uses a CDN link for the stylesheets so we might want to investigate the differences.

Resolves #7278

[skateman]

Right now the form looks like this:

If I switch the theme to g10 in the app/stylesheet/carbon.scss, it looks a little bit better, but it alters the menu to white:

I guess we have dark mode enabled?! @kavyanekkalapu @himdel

[kavyanekkalapu]

Yes we should use g10 light mode and we can fix leftnav colors manually.

[skateman]

@kavyanekkalapu I started playing with the menu and its styling and I think we might be using the wrong one. There's a bx--navigation which is always dark independently from the theme and a bx--side-nav which follows the color scheme from the theme. Right now we're using the bx--side-nav, but is it possible that it's the wrong one?

[himdel]

Ah, a different theme can be enabled for different parts of the app, by only @importing the theme under a selector, instead of globally.

Failing that, we can trivially switch to a white theme, the menu can be de-themified by running perl -i -npe 's/: \$.*\/\/ /: \$/ && s/$/;/' app/stylesheet/menu-colors.scss.
(The original idea was that productization could just switch the theme, but since we're not using a different theme there, we don't need to use a theme for the menu.)

[skateman]

Since #7479 is in, we are now with the correct theme:

Isn't it beautiful? 😻

[skateman]

Blocked by data-driven-forms/react-forms#884

[skateman]

CodeEditor

Just changed the radio buttons and the group around them

DualGroup

Switched to the implementation provided by the component mapper, that has a few caveats. The buttons don't have a tooltip setting, so I had to put text on them to be a11y compliant. There's a filter for both columns, which I find a little bit ugly and I might create an upstream PR that allows us to hide it. Also there's no way to hide some of the buttons as it was possible in the original implementation (which is IMO fine).

(Edit)PasswordField

There's no input group (input addon) functionality in Carbon, so I don't know where to put the buttons for now. Asked UX to make my naive implementation a little bit better, waiting for their response.

AsyncCredentials

Not sure about the button style, need to talk with UX.

[skateman]

Hangs on data-driven-forms/react-forms#896

[skateman]

UX got back to me with the input addons:

Unfortunately these aren't implemented as a react component, so we have to do it on our own in the DDF mapper.

data-driven-forms/react-forms#912

[kavyanekkalapu]

Aahh, I think I found it. The theme is loading properly and the colors are entirely consistent with Gray 10.

As per https://www.carbondesignsystem.com/components/form/style#color , the default input background is $field-01.
As per https://www.carbondesignsystem.com/guidelines/color/usage/, $field-01 is only gray in the White theme, it's white in the Gray 10 theme.

Carbon documentation uses the white theme, so any screenshots from carbon docs don't apply, we're using a different theme.

@himdel in that case carbon g10 form should look like this, we need some differentiation from BG to input fields or we can change theme to white to match with other non carbon pages in MIQ.

[himdel]

Ah, then I suppose the question is, should we go with the white theme instead, or change the background color.

Presumably there's a form class that does that though? If not, looks like the background color to use is $ui-background

[himdel]

diff --git a/app/stylesheet/carbon.scss b/app/stylesheet/carbon.scss
index 02b908287c..544085d254 100644
--- a/app/stylesheet/carbon.scss
+++ b/app/stylesheet/carbon.scss
@@ -14,7 +14,7 @@ $css--default-type: false;
 
-// Use the gray 90 theme
+// Use the white theme
 @import '~@carbon/themes/scss/themes';
-$carbon--theme: $carbon--theme--g10;
+$carbon--theme: $carbon--theme--white;
 @include carbon--theme();
 
 @import '~carbon-components/scss/globals/scss/styles.scss';

[skateman]

Okay, I (partially) addressed the issues, the dual-list should be fixed in the upstream package independently from this PR. I am looking for functional errors, like something not working that worked before so please do a sweep of the forms...

[kavyanekkalapu]

@skateman i verified the branch,

• When i enter something in code editor, i see this message, but my json has many syntax issues, it did not highlight them.

• I think, we need some spacing between options and editor

• Editor should be in other BG color may be same like input text fields.

[skateman]

@skateman i verified the branch,

• When i enter something in code editor, i see this message, but my json has many syntax issues, it did not highlight them.

Because the code editor doesn't do error highlighting, only syntax coloring, you can verify that in the patternfly version on master.

• I think, we need some spacing between options and editor

• Editor should be in other BG color may be same like input text fields.

This is a styling issue

[miq-bot]

Checked commits skateman/manageiq-ui-classic@60c2a81~...2e9bda6 with ruby 2.6.3, rubocop 0.82.0, haml-lint 0.35.0, and yamllint
0 files checked, 0 offenses detected
Everything looks fine. ⭐

[h-kataria]

@skateman tested in UI, looking good to me other than styling issues. What is the next step?

[skateman]

@skateman tested in UI, looking good to me other than styling issues. What is the next step?

lol, I guess to merge? 🤣

[h-kataria]

@skateman tested in UI, looking good to me other than styling issues. What is the next step?

lol, I guess to merge? 🤣

wasn't sure if @kavyanekkalapu is still testing or found any other issues. @kavyanekkalapu are you still testing this or are you good with merge?

[skateman]

Extracted the styling issues into a separate issue so this can be safely merged.