From 3fd481e3f36280df980cfdc20652e1f9f3fcd05c Mon Sep 17 00:00:00 2001
From: Mehmet Salih Yavuz <salih.yavuz@proton.me>
Date: Fri, 19 Sep 2025 15:20:21 +0300
Subject: [PATCH] fix(SQLPopover): use correct component

---
 .../src/components/SQLPopover.tsx             | 25 +++++--------------
 1 file changed, 6 insertions(+), 19 deletions(-)

diff --git a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx
index 4542c8f16354..42d88901c721 100644
--- a/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx
+++ b/superset-frontend/packages/superset-ui-chart-controls/src/components/SQLPopover.tsx
@@ -16,9 +16,11 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { useEffect, useState } from 'react';
-import { Popover, type PopoverProps } from '@superset-ui/core/components';
-import type ReactAce from 'react-ace';
+import {
+  Popover,
+  type PopoverProps,
+  SQLEditor,
+} from '@superset-ui/core/components';
 import { CalculatorOutlined } from '@ant-design/icons';
 import { css, styled, useTheme, t } from '@superset-ui/core';
 
@@ -35,24 +37,10 @@ const StyledCalculatorIcon = styled(CalculatorOutlined)`
 
 export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => {
   const theme = useTheme();
-  const [AceEditor, setAceEditor] = useState<typeof ReactAce | null>(null);
-  useEffect(() => {
-    Promise.all([
-      import('react-ace'),
-      import('ace-builds/src-min-noconflict/mode-sql'),
-    ]).then(([reactAceModule]) => {
-      setAceEditor(() => reactAceModule.default);
-    });
-  }, []);
-
-  if (!AceEditor) {
-    return null;
-  }
   return (
     <Popover
       content={
-        <AceEditor
-          mode="sql"
+        <SQLEditor
           value={props.sqlExpression}
           editorProps={{ $blockScrolling: true }}
           setOptions={{
@@ -65,7 +53,6 @@ export const SQLPopover = (props: PopoverProps & { sqlExpression: string }) => {
           wrapEnabled
           style={{
             border: `1px solid ${theme.colorBorder}`,
-            background: theme.colorPrimaryBg,
             maxWidth: theme.sizeUnit * 100,
           }}
         />