fix(filters): preserve backend metric-based sorting in select filters (#35130)

Co-authored-by: Claude <noreply@anthropic.com>

superset-frontend/packages/superset-ui-core/src/components/Modal/Modal.tsx

@@ -368,9 +368,13 @@ const CustomModal = ({
 };
 CustomModal.displayName = 'Modal';
 
+// Theme-aware confirmation modal - now inherits theme through App wrapper in SupersetThemeProvider
+const themedConfirm = (props: Parameters<typeof AntdModal.confirm>[0]) =>
+  AntdModal.confirm(props);
+
 export const Modal = Object.assign(CustomModal, {
   error: AntdModal.error,
   warning: AntdModal.warning,
-  confirm: AntdModal.confirm,
+  confirm: themedConfirm,
   useModal: AntdModal.useModal,
 });

superset-frontend/packages/superset-ui-core/src/theme/Theme.tsx

@@ -19,7 +19,7 @@
 /* eslint-disable react-prefer-function-component/react-prefer-function-component */
 // eslint-disable-next-line no-restricted-syntax
 import React from 'react';
-import { theme as antdThemeImport, ConfigProvider } from 'antd';
+import { theme as antdThemeImport, ConfigProvider, App } from 'antd';
 
 // @fontsource/* v5.1+ doesn't play nice with eslint-import plugin v2.31+
 /* eslint-disable import/extensions */
@@ -243,7 +243,7 @@ export class Theme {
         <ThemeProvider theme={themeState.theme}>
           <GlobalStyles />
           <ConfigProvider theme={themeState.antdConfig}>
-            {children}
+            <App>{children}</App>
           </ConfigProvider>
         </ThemeProvider>
       </EmotionCacheProvider>

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/Horizontal.tsx

@@ -32,7 +32,7 @@ import crossFiltersSelector from './CrossFilters/selectors';
 
 const HorizontalBar = styled.div`
   ${({ theme }) => `
-    padding: ${theme.sizeUnit * 3}px ${theme.sizeUnit * 2}px ${
+    padding: 0 ${theme.sizeUnit * 2}px ${
       theme.sizeUnit * 3
     }px ${theme.sizeUnit * 4}px;
     background: ${theme.colorBgBase};

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

@@ -317,13 +317,20 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
 
   const sortComparator = useCallback(
     (a: LabeledValue, b: LabeledValue) => {
+      // When sortMetric is specified, the backend already sorted the data correctly
+      // Don't override the backend's metric-based sorting with frontend alphabetical sorting
+      if (formData.sortMetric) {
+        return 0; // Preserve the original order from the backend
+      }
+
+      // Only apply alphabetical sorting when no sortMetric is specified
       const labelComparator = propertyComparator('label');
       if (formData.sortAscending) {
         return labelComparator(a, b);
       }
       return labelComparator(b, a);
     },
-    [formData.sortAscending],
+    [formData.sortAscending, formData.sortMetric],
   );
 
   // Use effect for initialisation for filter plugin

superset/embedded/view.py

@@ -24,7 +24,6 @@ from flask_wtf.csrf import same_origin
 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 @@ class EmbeddedView(BaseSupersetView):
             dashboard_version="v2",
         )
 
-        bootstrap_data = {
+        extra_bootstrap_data = {
             "config": {
                 "GUEST_TOKEN_HEADER_NAME": current_app.config["GUEST_TOKEN_HEADER_NAME"]
             },
@@ -86,10 +85,7 @@ class EmbeddedView(BaseSupersetView):
             },
         }
 
-        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
-            ),
         )

superset/templates/superset/spa.html

@@ -69,11 +69,11 @@
     {% endblock %}
   </head>
 
-  <body {% if standalone_mode %}class="standalone"{% endif %}>
+  {% 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 %}
@@ -85,14 +85,10 @@
           <!-- Custom URL from theme -->
           <img
             src="{{ tokens.brandSpinnerUrl }}"
-            alt="Loading..."
+            alt=""
             style="{{ spinner_style }}"
           />
-        {% else %}
-          <!-- Fallback: This should rarely happen with new logic -->
-          <div style="{{ spinner_style }}">
-            Loading...
-          </div>
+        {# Remove fallback text - let React app handle loading state #}
         {% endif %}
       </div>
     {% endblock %}