Live CSS Editor for Dashboard is broken

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

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

Additional Context

[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.

[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