Migration to emotionjs

[teodosii]

What this PR does

Migrate existing CSS/SCSS to emotion

Which issue(s) this PR closes

Closes #2666

[brojd]

I think just as in functional components we could just define it in render like

render() {
  const styles = getEscalationPolicyStyles(props.theme);
  ...
}

[maskin25]

agree, ideally styles should be just in render body and nowhere else

[teodosii]

Too many render functions, that means 1 line for each subrender where we're using the styles... not worth it, it takes 3 lines with cDU lifecycle.

[maskin25]

maybe better create a dedicate folder for styles like grafana-plugin/src/styles

[teodosii]

That's a good idea

[maskin25]

 className={cx(styles.integrationBlockHeading, {
            [bem(styles.integrationBlockHeading, 'noBorderBottom')]: !noContent
})}

looks too ease to make typos, how does grafana core deal with nested selectors? I'm pretty sure it does not use bem.

And in general styling looks overcomplicated, to style something we need too much stuff to import

import { cx } from '@emotion/css';
import { useStyles2 } from '@grafana/ui';
import { bem } from 'utils/utils';
import { getIntegrationBlockStyles } from './IntegrationBlock.styles';

Can we remove at least one thing? the most suitable candidate seems to be a bem.

[teodosii]

Grafana doesn't use BEM pattern. Why remove any of it? I don't understand your reasons...

cx is for composition
useStyles2 is mandatory ...
bem is too build line blocks following BEM pattern so that you don't need to repeat the block, but instead rely on a helper that does that. BEM is very useful because it clearly expresses what the element modifier is supposed to do.
getIntegrationBlockStyles is outside the file so that we don't have too much code in the main file

I strongly recommend reading on https://getbem.com/

[teodosii]

The code above has more in it because it depends on a conditional, is just like the old compose cx

styles.integrationBlockHeading gets appended
integrationBlockHeading--noBorderBottom' gets appended if noContent is false/undefined