Custom Javascript editing/parser in deck.gl visualisations seems to be broken

Firstly, thanks for such an awesome project!

When trying to add Javascript to customise onClick, Tooltips, etc. in the deck.gl visualisations, the text box in which you enter the code text behaves erratically. It is also unclear what is actually persisted onto the visualisation, it doesn’t appear to be the code as entered.

How to reproduce the bug

(I’ve given instructions for the deck.gl Scatterplot, but seems to apply to all deck.gl visualisations)

1. Go to Charts, Add new chart
2. Select a dataset with spatial attributes, choose deck.gl Scatterplot, click on Create New Chart
3. Configure Chart to display some data (i.e. configure the Lat-Long values)
4. Under Data configuration pane on left of screen, expand the “Advanced” collapse. Attempt to enter text in the “Javascript Tooltip Generator”. It should enter duplicate values.
5. In the browser console, there should be Uncaught TypeError: (validationErrors || []).forEach is not a function

Expected results

Text typed in the Javascipt fields in deck.gl visualisations to appear as typed. For the code entered to be executed in the context of the visualisation.

Actual results

Text appearing in field does not match what was typed. Custom JS code doesn’t appear to be executed in map.

Following error appearing in browser console per character typing:

explore.fd9dbc001a8d2b732fc9.entry.js:624 Uncaught TypeError: (validationErrors || []).forEach is not a function
    at Object.SET_FIELD_VALUE (explore.fd9dbc001a8d2b732fc9.entry.js:624:32)
    at exploreReducer (explore.fd9dbc001a8d2b732fc9.entry.js:694:39)
    at combination (vendors.866d9853ec9ca701f3b8.entry.js:198222:29)
    at dispatch (vendors.866d9853ec9ca701f3b8.entry.js:197988:22)
    at 3236.54993c7b99382ace8b98.entry.js:242:12
    at 1844.8922f8dcb86356245bf9.entry.js:1075:16
    at vendors.866d9853ec9ca701f3b8.entry.js:198240:12
    at Object.onChange (7173.0ceb268407a17642e1ec.entry.js:12551:61)
    at ReactAce.push.93946.ReactAce.onChange (437abb94798b28dd8787.chunk.js:25959:24)
    at Editor.EventEmitter._signal (600b0291f89941e46ffa.chunk.js:3870:21)

Screenshots

This is what appeared after typing a single d character:

This is after typing d =>:

Environment

• browser type and version:
  • Mozilla Firefox 98.0 (64-bit)
  • Google Chrome Version 99.0.4844.51 (Official Build) (64-bit)

(built off apache/superset:1.4.0 Docker image tag)

• superset version: 1.4.0
• python version: python 3.8.12
• node.js version: sorry, not sure how to get the node version inside the running docker container?
• any feature flags active:
  • ENABLE_TEMPLATE_PROCESSING
  • ALERT_REPORTS
  • THUMBNAILS
  • LISTVIEWS_DEFAULT_CARD_VIEW
  • DASHBOARD_NATIVE_FILTERS
  • ENABLE_JAVASCRIPT_CONTROLS (in tooltips config section)

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• 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

I’m aware this functionality is fairly old (#4173), so I wonder if maybe a subsequent change has broken the in-browser JS parsing?