Machine learning convert Less to Scss

[snide]

This PR removes the LESS files for the Machine Learning plugin and replaces them with Sass.

Process taken

1. The src/core_plugins/machine_learning/index.js file was updated to build x-pack/plugins/ml/public/index.scss into a css file.
   • That index file imports styling_constants.scss from ui/public/styles in Kibana. This a placeholder file that includes all theming and invisible sass globals from EUI.
   • Any sass files under that line can now use the functions, mixins and variables from EUI. Although the theme is hardcoded, it will be relatively easy to switch themes based on this import later.
2. All Less files in the x-pack/plugins/ml/public/... directory were replaced with sass counterparts.
   • The sass files now live with separated _index.scss and _component_names.scss files next to the components or views they live next to.
   • The Less files were then deleted entirely.
   • The new sass files use EUI variables whenever possible. The most important being color and sizing variables.
   • The selectors were all changed to match EUI's BEM formatting. This means the html/js templating was touched as well.
   • Additionally, a three-letter prefix mch was added to all selectors to namespace them and avoid conflicts.

ML css / design layer cleanup plan of attack

1. THIS PR: Convert ML Less to Sass
   • Straight conversion, try not to touch the template layer, don't focus on design
   • Introduce EUI variables where easy, but avoid anything major. Hex values and pixels still remain in spots.
   • Don't focus on selectors. Use #ml-app to sandbox.
2. PR 2: Introduce BEM naming
   • Replace selectors across ML, prefix everything to avoid conflicts. Remove sandboxing.
3. PR 3: Focus on css code duplication / eui overwriting
   • Remove all the copy/paste CSS and try to cut the footprint down
   • Remove and replace the EUI overwrites with something less brittle
4. PR 3+: Design
   • Potentially do a similar reskinning like we did with canvas. Likely a large project.
   • Could be done in pieces as pages are converted to React so design team can step in to help

Major visual changes

I went ahead and made the job list table act similar to our other selections so that it didn't have the awkward gap to the left of the search area. Later, we should do a pass to use the button dropdown pattern to deal with sections + actions.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[snide]

@peteharverson @walterra @jgowdyelastic

I'm sure there are plenty of breaks in here still, but at this point I could prolly use a visual review so I can start fixing things. Takes screens of whatever you notice and I'll do another pass.

Note that I'm really trying NOT to touch layouts or designs too much. This is really just a base run to get the code workable so it has some level of variable scoping. Colors will be be slightly different in places, and in many cases this fixes a lot of color contrast accessibility issues in ML, but if something looks really off, it's likely a mistake on my part.

I don't think much of the chart coloring should change (other than the grays) and I've introduced a small ML specific variable layer into the sass so things are at least consistent till my team can do more work in here.

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[peteharverson]

For the most part this is looking great @snide! I have taken a first quick(ish) run through all the pages, and the only areas which have significant breaks are the Single and Multi-metric job wizards. Some issues on other pages, but those are all fairly minor I think.

I have saved a bunch of screenshots from my review - will be in contact to point you at the doc.

[elasticmachine]

Pinging @elastic/ml-ui

[snide]

OK @peteharverson. Think I got most everything from your list. Have some small issues around the bootstrap autocomplete placeholders, but I think we're close to what master looks like now.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[peteharverson]

Tested your latest fixes @snide. Getting very close to master I think. I am still seeing the issue with the layout of the top card in the Population Job wizard. I have also added one extra item to the end of the doc related to the z-index of the severity control in relation to the job picker in the Anomaly Explorer which I fixed recently in #23189.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[snide]

@cchaos I know this is a big blob to review so I don't expect a line by line review. The ML team covered most of the visual stuff so I'm pretty sure this looks pretty similar to how it used to. Can you do a quick scan of at least the sandboxing, sass importing and general structure of the code? Since ML is an app in transition, you'll often find folders with titles like old and new. Sometimes the component directories are in named component directories, and sometimes they are nested in other folders. I kept the organization similar to how it was, generally removing stuff like folder/styles/main.scss and replacing it with folder/_index.scss and folder/_folder.scss, using import chains as I went.

[snide]

Just a note for review. I avoided touching shadows on this pass. A lot of ML uses text shadows and drops that I didn't have a quick 1 to 1 parallel for. Mostly I'd change the color to match against the EUI counterpart and then move forward. Rest can be handled on a 2nd pass.

[cchaos]

This particular one looks like the EUI counterpart is significantly lighter. The original being #BBBBBB and this one equates to #F5F5F5, but I'm also not looking at it visually.

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request

[peteharverson]

@snide I tested out the latest edits, and the layout of the top card in the Population wizard looks good. I have added a couple of extra items to the bottom of the doc - one for padding around the population wizard charts, and one for a suggestion to switch the border color used in the population wizards to euiColorLightShade.

[cchaos]

So I just went through looking at the conversions, I didn't look at anything visually, so you can ignore what you may be "fixing".

Also here is a screenshot of what I found to be still existing .less files you may want to double-check.

[cchaos]

This particular one looks like the EUI counterpart is significantly lighter. The original being #BBBBBB and this one equates to #F5F5F5, but I'm also not looking at it visually.

[cchaos]

Do you think this is a bit bright on top of the dark tooltip background? Original color was: #95a5a6

[cchaos]

$euiFontSizeXS?

[cchaos]

Maybe move these up under the previous selector .dropdown-menu > li > a using &:hover, etc...

[cchaos]

$euiFontWeightRegular

[cchaos]

Supposed to be negative, original: -10px

[cchaos]

$euiBorderThin

[cchaos]

$euiFontWeightRegular

[cchaos]

$euiFontWeightBold

[cchaos]

Duplicate import

[cchaos]

Another duplicate

[snide]

OK. I think I got to all of the review feedback.

THANK YOU @cchaos for the detail on such a mighty PR. 🥇

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[snide]

jenkins, test this

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[elasticmachine]

💔 Build Failed

• continuous-integration/kibana-ci/pull-request

[snide]

Replaced with #25574