Enforcing React 18 in Dash and allowing data: in CSP connect-src (#687)

* Enforcing React 18 in Dash and allowing `data:` in CSP `connect-src`
* Removed `navigate-to` from CSP
* Ignoring shaky test `test_example_wlf_plugin.py`

---------

Co-authored-by: Hans Kallekleiv <16436291+HansKallekleiv@users.noreply.github.com>

Author: rubenthoms

.github/workflows/webviz-config.yml

@@ -73,7 +73,7 @@ jobs:
       - name: 🤖 Run tests
         run: |
           webviz preferences --theme default
-          pytest ./tests --headless --forked
+          pytest ./tests --headless --forked --ignore ./tests/test_example_wlf_plugin.py
           webviz docs --portable ./docs_build --skip-open
           webviz schema
 

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#655](https://github.com/equinor/webviz-config/pull/655) - Regression fix: Show filters in `TablePlotter` when using `lock` argument.
 
 ### Changed
+- [#687](https://github.com/equinor/webviz-config/pull/687) - Enforce React 18 in Dash.
+- [#687](https://github.com/equinor/webviz-config/pull/687) - Allow `data:` in `connect-src` CSP in order to enable loading of images from data strings. Removed `navigate-to` in CSP as it got deprecated.
 - [#648](https://github.com/equinor/webviz-config/pull/648) - Allow `blob:` in `script-src` CSP in order to enable web worker usage in Dash components.
 - [#652](https://github.com/equinor/webviz-config/pull/652) - Enabled support for LaTeX math/equations in markdown.
 - [#653](https://github.com/equinor/webviz-config/pull/653) - Reduce time for running `webviz --help` by lazy importing top level entrypoints.

webviz_config/_theme_class.py

@@ -12,11 +12,10 @@ def __init__(self, theme_name: str):
 
         self._csp = {
             "default-src": "'none'",
-            "connect-src": "'self'",
+            "connect-src": ["'self'", "data:"],
             "style-src": ["'self'", "'unsafe-inline'"],  # [1]
             "script-src": ["'self'", "blob:", "'unsafe-eval'"],  # [blob: 2] [eval: 3]
             "img-src": ["'self'", "data:", "blob:"],  # [4]
-            "navigate-to": "'self'",
             "base-uri": "'self'",
             "form-action": "'self'",
             "frame-ancestors": "'self'",  # [5]

webviz_config/templates/copy_data_template.py.jinja2

@@ -24,6 +24,8 @@ theme = webviz_config.WebvizConfigTheme("{{ theme_name }}")
 theme.from_json((Path(__file__).resolve().parent / "theme_settings.json").read_text())
 theme.plotly_theme_layout_update({{ options.plotly_theme }})
 
+dash._dash_renderer._set_react_version("18.3.1")
+
 app = dash.Dash()
 app.config.suppress_callback_exceptions = True
 

webviz_config/templates/webviz_template.py.jinja2

@@ -14,7 +14,7 @@ from pathlib import Path
 
 from uuid import uuid4
 
-from dash import html, dcc, Dash, Input, Output, callback, callback_context
+from dash import html, dcc, Dash, Input, Output, callback, callback_context, _dash_renderer
 import webviz_core_components as wcc
 from flask_talisman import Talisman
 import webviz_config
@@ -40,6 +40,8 @@ theme = webviz_config.WebvizConfigTheme("{{ theme_name }}")
 theme.from_json((Path(__file__).resolve().parent / "theme_settings.json").read_text())
 theme.plotly_theme_layout_update({{ options.plotly_theme }})
 
+_dash_renderer._set_react_version("18.3.1")
+
 app = Dash(
     name=__name__,
     external_stylesheets=theme.external_stylesheets,

webviz_config/testing/_composite.py

@@ -70,7 +70,7 @@ def start_server(self, plugin: WebvizPluginABC, **kwargs: Any) -> None:
 
     def toggle_webviz_settings_drawer(self) -> None:
         """Open the plugin settings drawer"""
-        self.wait_for_element(WebvizIds.SETTINGS_DRAWER_TOGGLE_OPEN).click()
+        self.wait_for_element(WebvizIds.SETTINGS_DRAWER_TOGGLE).click()
 
     def toggle_webviz_settings_group(self, settings_group_id: str) -> None:
         """Open the respective settings group in the settings drawer"""

webviz_config/testing/_webviz_ids.py

@@ -6,4 +6,4 @@ class WebvizIds(str, Enum):
     CONTENT_MANAGER = "webviz-content-manager"
     SETTINGS_DRAWER = "settings-drawer"
     PLUGINS_WRAPPER = "plugins-wrapper"
-    SETTINGS_DRAWER_TOGGLE_OPEN = ".WebvizSettingsDrawer__ToggleOpen"
+    SETTINGS_DRAWER_TOGGLE = ".WebvizSettingsDrawer__Toggle"