Incubator-superset: Live CSS Editor for Dashboard is broken

[vnktsh]

Typing any valid CSS text into Live CSS Editor box for a Dashboard is breaking and throwing errors in console. The UI disappears entirely and have to reload the page to recover.

Expected results

Live CSS should be applied to Dashboard without errors

Actual results

When you try to apply live CSS to a dashboard, the UI disappears with errors in console.

Screenshots

In the above GIF, you can see the moment I type color the page crashes and errors are thrown in console.

Console Errors:
Uncaught Error: Strings are not allowed as css prop values, please wrap it in a css template literal from '@emotion/css' like this: css`color:` at jsx (core.browser.esm.js?a8ab:115) at Header.render (Header.jsx?0844:472) at finishClassComponent (react-dom.development.js?7f13:17185) at updateClassComponent (react-dom.development.js?7f13:17135) at beginWork (react-dom.development.js?7f13:18654) at HTMLUnknownElement.callCallback (react-dom.development.js?7f13:189) at Object.invokeGuardedCallbackDev (react-dom.development.js?7f13:238) at invokeGuardedCallback (react-dom.development.js?7f13:293) at beginWork$1 (react-dom.development.js?7f13:23235) at performUnitOfWork (react-dom.development.js?7f13:22186)

How to reproduce the bug

This is very trivial and easy to reproduce.

1. Select any dashboard, in this case the default pre-populatd 'Tabbed Dashboard'
2. Start editing Live CSS

Environment

• superset version: Version: 0.999.0dev
• python version: default version from Dockerfile `ARG PY_VER=3.6.9'
• node.js version: default version from docker compose file `image: node:10-jessie'
• npm version: default version from docker compose file `image: node:10-jessie'

Checklist

• [x] I have checked the superset logs for python stacktraces and included it here as text if there are any.
• [x] I have reproduced the issue with at least the latest released version of superset.
• [x] I have checked the issue tracker for the same issue and I haven't found one similar.

Additional Context

[AnimeshAgrawal]

I'm having the same issue; wrapping it in the template literal doesn't appear to be resolving it.

[mistercrunch]

I couldn't reproduce on the latest master, looks related to the @emotion library. @rusackas , do you any context on this?

[rusackas]

I'm also unable to reproduce on the latest master. Agree that it's emotion-related. I faintly recall this issue being addressed at one point, but I'm failing to recall when or where.

Unfortunately, the version number 0.999.0dev is a dummy placed there long ago, so it doesn't reflect how old the code you're running happens to be. I wonder if you'd be willing to update from the latest master and see if the issue magically goes away. If not, I'll try to find what change was (or needs to be) made to address this.

[mistercrunch]

About 0.999.0dev, it's the pypi/npm-compatible "no version" code we use in master. People should share a GitHub SHA when reporting issues in master

[rusackas]

I think this issue was resolved with this commit, back in May, where a css prop was indeed causing an issue, and was thusly renamed to customCss to play nice with Emotion:
https://github.com/preset-io/incubator-superset/commit/d65d29c810bddf5fdfb8647e4c4fe964351dc289

I'm marking the issue as resolved, as I believe it is. If @vnktsh or @AnimeshAgrawal still encounter issues after updating their code, we can re-open the issue.