fix(sqllab): Invalid SQL Error breaks SQL Lab (#33164)

Author: justinpark

superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.test.tsx

@@ -36,6 +36,21 @@ const defaultProps = {
   subtitle: 'Test subtitle',
 };
 
+const missingExtraProps = {
+  ...defaultProps,
+  error: {
+    error_type: ErrorTypeEnum.INVALID_SQL_ERROR,
+    message: 'SQLStatement should have exactly one statement',
+    level: 'error' as ErrorLevel,
+    extra: {
+      sql: null,
+      line: null,
+      column: null,
+      engine: null,
+    },
+  },
+};
+
 const renderComponent = (overrides = {}) =>
   render(<InvalidSQLErrorMessage {...defaultProps} {...overrides} />);
 
@@ -60,6 +75,12 @@ describe('InvalidSQLErrorMessage', () => {
     unmount();
   });
 
+  it('renders the error message with the empty extra properties', () => {
+    const { getByText } = renderComponent(missingExtraProps);
+    expect(getByText('Unable to parse SQL')).toBeInTheDocument();
+    expect(getByText(missingExtraProps.error.message)).toBeInTheDocument();
+  });
+
   it('displays the SQL error line and column indicator', async () => {
     const { getByText, container, unmount } = renderComponent();
 

superset-frontend/src/components/ErrorMessage/InvalidSQLErrorMessage.tsx

@@ -36,20 +36,22 @@ function InvalidSQLErrorMessage({
   source,
   subtitle,
 }: ErrorMessageComponentProps<SupersetParseErrorExtra>) {
-  const { extra, level } = error;
+  const { extra, level, message } = error;
 
   const { sql, line, column } = extra;
-  const lines = sql.split('\n');
+  const lines = sql?.split('\n');
   let errorLine;
-  if (line !== null) errorLine = lines[line - 1];
-  else if (lines.length > 0) {
+  if (line !== null && Number.isInteger(line)) errorLine = lines[line - 1];
+  else if (lines?.length > 0) {
     errorLine = lines[0];
   }
-  const body = errorLine && (
+  const body = errorLine ? (
     <>
       <pre>{errorLine}</pre>
       {column !== null && <pre>{' '.repeat(column - 1)}^</pre>}
     </>
+  ) : (
+    message
   );
   return (
     <ErrorAlert

superset/sql_parse.py

@@ -277,6 +277,7 @@ def _extract_tables_from_sql(self) -> set[Table]:
                         "You may have an error in your SQL statement. {message}"
                     ).format(message=ex.error.message),
                     level=ErrorLevel.ERROR,
+                    extra=ex.error.extra,
                 )
             ) from ex