chore(sqllab): Remove validation result from state (#24082)

superset-frontend/src/SqlLab/components/AceEditorWrapper/index.tsx

@@ -41,6 +41,7 @@ import {
 import useQueryEditor from 'src/SqlLab/hooks/useQueryEditor';
 import { useSchemas, useTables } from 'src/hooks/apiResources';
 import { useDatabaseFunctionsQuery } from 'src/hooks/apiResources/databaseFunctions';
+import { useAnnotations } from './useAnnotations';
 
 type HotKey = {
   key: string;
@@ -96,8 +97,8 @@ const AceEditorWrapper = ({
     'id',
     'dbId',
     'sql',
-    'validationResult',
     'schema',
+    'templateParams',
   ]);
   const { data: schemaOptions } = useSchemas({
     ...(autocomplete && { dbId: queryEditor.dbId }),
@@ -286,21 +287,12 @@ const AceEditorWrapper = ({
 
     setWords(words);
   }
-
-  const getAceAnnotations = () => {
-    const { validationResult } = queryEditor;
-    const resultIsReady = validationResult?.completed;
-    if (resultIsReady && validationResult?.errors?.length) {
-      const errors = validationResult.errors.map((err: any) => ({
-        type: 'error',
-        row: err.line_number - 1,
-        column: err.start_column - 1,
-        text: err.message,
-      }));
-      return errors;
-    }
-    return [];
-  };
+  const { data: annotations } = useAnnotations({
+    dbId: queryEditor.dbId,
+    schema: queryEditor.schema,
+    sql: currentSql,
+    templateParams: queryEditor.templateParams,
+  });
 
   return (
     <StyledAceEditor
@@ -313,7 +305,7 @@ const AceEditorWrapper = ({
       editorProps={{ $blockScrolling: true }}
       enableLiveAutocompletion={autocomplete}
       value={sql}
-      annotations={getAceAnnotations()}
+      annotations={annotations}
     />
   );
 };

superset-frontend/src/SqlLab/components/AceEditorWrapper/useAnnotations.test.ts

@@ -0,0 +1,182 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import fetchMock from 'fetch-mock';
+import { act, renderHook } from '@testing-library/react-hooks';
+import {
+  createWrapper,
+  defaultStore as store,
+} from 'spec/helpers/testing-library';
+import { api } from 'src/hooks/apiResources/queryApi';
+import { initialState } from 'src/SqlLab/fixtures';
+import COMMON_ERR_MESSAGES from 'src/utils/errorMessages';
+import { useAnnotations } from './useAnnotations';
+
+const fakeApiResult = {
+  result: [
+    {
+      end_column: null,
+      line_number: 3,
+      message: 'ERROR: syntax error at or near ";"',
+      start_column: null,
+    },
+  ],
+};
+const expectDbId = 'db1';
+const expectSchema = 'my_schema';
+const expectSql = 'SELECT * from example_table';
+const expectTemplateParams = '{"a": 1, "v": "str"}';
+const expectValidatorEngine = 'defined_validator';
+const queryValidationApiRoute = `glob:*/api/v1/database/${expectDbId}/validate_sql/`;
+
+jest.mock('@superset-ui/core', () => ({
+  ...jest.requireActual('@superset-ui/core'),
+  t: (str: string) => str,
+}));
+
+afterEach(() => {
+  fetchMock.reset();
+  act(() => {
+    store.dispatch(api.util.resetApiState());
+  });
+});
+
+beforeEach(() => {
+  fetchMock.post(queryValidationApiRoute, fakeApiResult);
+});
+
+const initialize = (withValidator = false) => {
+  if (withValidator) {
+    return renderHook(
+      () =>
+        useAnnotations({
+          sql: expectSql,
+          dbId: expectDbId,
+          schema: expectSchema,
+          templateParams: expectTemplateParams,
+        }),
+      {
+        wrapper: createWrapper({
+          useRedux: true,
+          initialState: {
+            ...initialState,
+            sqlLab: {
+              ...initialState.sqlLab,
+              databases: {
+                [expectDbId]: {
+                  backend: expectValidatorEngine,
+                },
+              },
+            },
+            common: {
+              conf: {
+                SQL_VALIDATORS_BY_ENGINE: {
+                  [expectValidatorEngine]: true,
+                },
+              },
+            },
+          },
+        }),
+      },
+    );
+  }
+  return renderHook(
+    () =>
+      useAnnotations({
+        sql: expectSql,
+        dbId: expectDbId,
+        schema: expectSchema,
+        templateParams: expectTemplateParams,
+      }),
+    {
+      wrapper: createWrapper({
+        useRedux: true,
+        store,
+      }),
+    },
+  );
+};
+
+test('skips fetching validation if validator is undefined', () => {
+  const { result } = initialize();
+  expect(result.current.data).toEqual([]);
+  expect(fetchMock.calls(queryValidationApiRoute)).toHaveLength(0);
+});
+
+test('returns validation if validator is configured', async () => {
+  const { result, waitFor } = initialize(true);
+  await waitFor(() =>
+    expect(fetchMock.calls(queryValidationApiRoute)).toHaveLength(1),
+  );
+  expect(result.current.data).toEqual(
+    fakeApiResult.result.map(err => ({
+      type: 'error',
+      row: (err.line_number || 0) - 1,
+      column: (err.start_column || 0) - 1,
+      text: err.message,
+    })),
+  );
+});
+
+test('returns server error description', async () => {
+  const errorMessage = 'Unexpected validation api error';
+  fetchMock.post(
+    queryValidationApiRoute,
+    {
+      throws: new Error(errorMessage),
+    },
+    { overwriteRoutes: true },
+  );
+  const { result, waitFor } = initialize(true);
+  await waitFor(
+    () =>
+      expect(result.current.data).toEqual([
+        {
+          type: 'error',
+          row: 0,
+          column: 0,
+          text: `The server failed to validate your query.\n${errorMessage}`,
+        },
+      ]),
+    { timeout: 5000 },
+  );
+});
+
+test('returns sesion expire description when CSRF token expired', async () => {
+  const errorMessage = 'CSRF token expired';
+  fetchMock.post(
+    queryValidationApiRoute,
+    {
+      throws: new Error(errorMessage),
+    },
+    { overwriteRoutes: true },
+  );
+  const { result, waitFor } = initialize(true);
+  await waitFor(
+    () =>
+      expect(result.current.data).toEqual([
+        {
+          type: 'error',
+          row: 0,
+          column: 0,
+          text: `The server failed to validate your query.\n${COMMON_ERR_MESSAGES.SESSION_TIMED_OUT}`,
+        },
+      ]),
+    { timeout: 5000 },
+  );
+});

superset-frontend/src/SqlLab/components/AceEditorWrapper/useAnnotations.ts

@@ -0,0 +1,83 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useSelector } from 'react-redux';
+
+import { SqlLabRootState } from 'src/SqlLab/types';
+import COMMON_ERR_MESSAGES from 'src/utils/errorMessages';
+import { VALIDATION_DEBOUNCE_MS } from 'src/SqlLab/constants';
+import {
+  FetchValidationQueryParams,
+  useQueryValidationsQuery,
+} from 'src/hooks/apiResources';
+import { useDebounceValue } from 'src/hooks/useDebounceValue';
+import { ClientErrorObject } from 'src/utils/getClientErrorObject';
+import { t } from '@superset-ui/core';
+
+export function useAnnotations(params: FetchValidationQueryParams) {
+  const { sql, dbId, schema, templateParams } = params;
+  const debouncedSql = useDebounceValue(sql, VALIDATION_DEBOUNCE_MS);
+  const hasValidator = useSelector<SqlLabRootState>(({ sqlLab, common }) =>
+    // Check whether or not we can validate the current query based on whether
+    // or not the backend has a validator configured for it.
+    Boolean(
+      common?.conf?.SQL_VALIDATORS_BY_ENGINE?.[
+        sqlLab?.databases?.[dbId || '']?.backend
+      ],
+    ),
+  );
+  return useQueryValidationsQuery(
+    {
+      dbId,
+      schema,
+      sql: debouncedSql,
+      templateParams,
+    },
+    {
+      skip: !(hasValidator && dbId && sql),
+      selectFromResult: ({ isLoading, isError, error, data }) => {
+        const errorObj = (error ?? {}) as ClientErrorObject;
+        let message =
+          errorObj?.error || errorObj?.statusText || t('Unknown error');
+        if (message.includes('CSRF token')) {
+          message = t(COMMON_ERR_MESSAGES.SESSION_TIMED_OUT);
+        }
+        return {
+          data:
+            !isLoading && data?.length
+              ? data.map(err => ({
+                  type: 'error',
+                  row: (err.line_number || 0) - 1,
+                  column: (err.start_column || 0) - 1,
+                  text: err.message,
+                }))
+              : isError
+              ? [
+                  {
+                    type: 'error',
+                    row: 0,
+                    column: 0,
+                    text: `The server failed to validate your query.\n${message}`,
+                  },
+                ]
+              : [],
+        };
+      },
+    },
+  );
+}