fix(bug): Error when adding a filter using custom sql (#38246)

(cherry picked from commit 880cab58c3)

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/AdhocFilterEditPopoverSqlTabContent.test.tsx

@@ -22,28 +22,53 @@ import {
   screen,
   selectOption,
   userEvent,
+  waitFor,
 } from 'spec/helpers/testing-library';
-import { IAceEditorProps } from 'react-ace';
 import AdhocFilter from '../AdhocFilter';
 import { Clauses, ExpressionTypes } from '../types';
 import AdhocFilterEditPopoverSqlTabContent from '.';
 
+// Track resize calls for testing
+const mockResize = jest.fn();
+
+jest.mock('src/components/SQLEditorWithValidation', () => {
+  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+  const { forwardRef: fRef, useImperativeHandle: uIH } =
+    jest.requireActual('react');
+  const MockEditor = fRef(
+    (
+      {
+        value,
+        onChange,
+      }: {
+        value: string;
+        onChange: (v: string) => void;
+      },
+      ref: any,
+    ) => {
+      uIH(ref, () => ({
+        editor: { resize: mockResize },
+      }));
+      return (
+        <textarea
+          defaultValue={value}
+          onChange={e => onChange?.(e.target.value)}
+        />
+      );
+    },
+  );
+  MockEditor.displayName = 'MockSQLEditorWithValidation';
+  return { __esModule: true, default: MockEditor };
+});
+
 // Add cleanup after each test
 afterEach(async () => {
   cleanup();
+  mockResize.mockClear();
   // Wait for any pending effects to complete
   await new Promise(resolve => setTimeout(resolve, 0));
 });
 
-jest.mock('@superset-ui/core/components/AsyncAceEditor', () => ({
-  SQLEditor: ({ value, onChange }: IAceEditorProps) => (
-    <textarea
-      defaultValue={value}
-      onChange={value => onChange?.(value.target.value)}
-    />
-  ),
-}));
-
 const adhocFilter = new AdhocFilter({
   expressionType: ExpressionTypes.Sql,
   sqlExpression: 'value > 10',
@@ -87,3 +112,41 @@ test('calls onChange when the SQL expression changes', async () => {
     expect.objectContaining({ sqlExpression: input }),
   );
 });
+
+test('calls editor resize when adhocFilter changes', async () => {
+  const onChange = jest.fn();
+  const { rerender } = render(
+    <AdhocFilterEditPopoverSqlTabContent
+      adhocFilter={adhocFilter}
+      onChange={onChange}
+      options={[]}
+      height={100}
+    />,
+  );
+
+  // Initial render should call resize
+  await waitFor(() => {
+    expect(mockResize).toHaveBeenCalled();
+  });
+  mockResize.mockClear();
+
+  // Create a new filter to trigger the useEffect
+  const newFilter = new AdhocFilter({
+    expressionType: ExpressionTypes.Sql,
+    sqlExpression: 'value > 20',
+    clause: Clauses.Where,
+  });
+
+  rerender(
+    <AdhocFilterEditPopoverSqlTabContent
+      adhocFilter={newFilter}
+      onChange={onChange}
+      options={[]}
+      height={100}
+    />,
+  );
+
+  await waitFor(() => {
+    expect(mockResize).toHaveBeenCalled();
+  });
+});

superset-frontend/src/explore/components/controls/FilterControl/AdhocFilterEditPopoverSqlTabContent/index.tsx

@@ -53,7 +53,7 @@ export default function AdhocFilterEditPopoverSqlTabContent({
 
   useEffect(() => {
     // @ts-ignore
-    aceEditorRef?.current?.editor.resize();
+    aceEditorRef?.current?.editor?.resize?.();
   }, [adhocFilter]);
 
   const onSqlExpressionClauseChange = (clause: string) => {