feat(validation): Add SQL expression validation in popovers (#34642)

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

superset-frontend/src/explore/components/controls/DndColumnSelectControl/ColumnSelectPopover.tsx

@@ -42,13 +42,13 @@ import {
   Form,
   FormItem,
   Select,
-  SQLEditor,
   EmptyState,
 } from '@superset-ui/core/components';
 
 import sqlKeywords from 'src/SqlLab/utils/sqlKeywords';
 import { getColumnKeywords } from 'src/explore/controlUtils/getColumnKeywords';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
+import SQLEditorWithValidation from 'src/components/SQLEditorWithValidation';
 import {
   POPOVER_INITIAL_HEIGHT,
   POPOVER_INITIAL_WIDTH,
@@ -86,6 +86,7 @@ export interface ColumnSelectPopoverProps {
   isTemporal?: boolean;
   setDatasetModal?: Dispatch<SetStateAction<boolean>>;
   disabledTabs?: Set<string>;
+  datasource?: any;
 }
 
 const getInitialColumnValues = (
@@ -115,6 +116,7 @@ const ColumnSelectPopover = ({
   setDatasetModal,
   setLabel,
   disabledTabs = new Set<'saved' | 'simple' | 'sqlExpression'>(),
+  datasource,
 }: ColumnSelectPopoverProps) => {
   const datasourceType = useSelector<ExplorePageState, string | undefined>(
     state => state.explore.datasource.type,
@@ -275,11 +277,6 @@ const ColumnSelectPopover = ({
     [getCurrentTab],
   );
 
-  const onSqlEditorFocus = useCallback(() => {
-    // @ts-ignore
-    sqlEditorRef.current?.editor.resize();
-  }, []);
-
   const setDatasetAndClose = () => {
     if (setDatasetModal) {
       setDatasetModal(true);
@@ -459,24 +456,30 @@ const ColumnSelectPopover = ({
             disabled: disabledTabs.has('sqlExpression'),
             children: (
               <>
-                <SQLEditor
+                <SQLEditorWithValidation
                   value={
                     adhocColumn?.sqlExpression ||
                     selectedSimpleColumn?.column_name ||
-                    selectedCalculatedColumn?.expression
+                    selectedCalculatedColumn?.expression ||
+                    ''
                   }
-                  onFocus={onSqlEditorFocus}
+                  ref={sqlEditorRef}
                   showLoadingForImport
                   onChange={onSqlExpressionChange}
                   width="100%"
-                  height={`${height - 80}px`}
+                  height={`${height - 120}px`}
                   showGutter={false}
                   editorProps={{ $blockScrolling: true }}
                   enableLiveAutocompletion
                   className="filter-sql-editor"
                   wrapEnabled
-                  ref={sqlEditorRef}
-                  keywords={keywords}
+                  keywords={keywords.map((k: any) =>
+                    typeof k === 'string' ? k : k.value || k.name || k,
+                  )}
+                  showValidation
+                  expressionType="column"
+                  datasourceId={datasource?.id}
+                  datasourceType={datasourceType}
                 />
               </>
             ),