fix(embedded): fix template context for embedded views

eschutho · claude · eschutho · commit 76c5b40c1392 · 2025-09-12T18:03:23.000-07:00
- Use render_app_template() in EmbeddedView to provide proper template context - Move tokens variable definition before its usage in spa.html template - Fixes 'tokens is undefined' error in embedded dashboard views 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
diff --git a/superset/embedded/view.py b/superset/embedded/view.py
@@ -24,7 +24,6 @@
 from superset import event_logger, is_feature_enabled
 from superset.daos.dashboard import EmbeddedDashboardDAO
 from superset.superset_typing import FlaskResponse
-from superset.utils import json
 from superset.views.base import BaseSupersetView, common_bootstrap_payload
 
 
@@ -76,7 +75,7 @@ def embedded(
             dashboard_version="v2",
         )
 
-        bootstrap_data = {
+        extra_bootstrap_data = {
             "config": {
                 "GUEST_TOKEN_HEADER_NAME": current_app.config["GUEST_TOKEN_HEADER_NAME"]
             },
@@ -86,10 +85,7 @@ def embedded(
             },
         }
 
-        return self.render_template(
-            "superset/spa.html",
+        return self.render_app_template(
+            extra_bootstrap_data=extra_bootstrap_data,
             entry="embedded",
-            bootstrap_data=json.dumps(
-                bootstrap_data, default=json.pessimistic_json_iso_dttm_ser
-            ),
         )
diff --git a/superset/templates/superset/spa.html b/superset/templates/superset/spa.html
@@ -69,11 +69,11 @@
     {% endblock %}
   </head>
 
+  {% set tokens = theme_tokens | default({}) %}
   <body {% if standalone_mode %}class="standalone"{% endif %} style="margin: 0; padding: 0; background-color: {{ tokens.get('colorBgBase', '#ffffff') }};">
 
     {% block body %}
       <div id="app" data-bootstrap="{{ bootstrap_data }}">
-        {% set tokens = theme_tokens | default({}) %}
         {% set spinner_style = "width: 70px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" %}
 
         {% if spinner_svg %}
