Don't run query when control panel has errors (#14687)

superset-frontend/src/explore/components/DataTablesPane/index.tsx

@@ -107,12 +107,14 @@ export const DataTablesPane = ({
   onCollapseChange,
   chartStatus,
   ownState,
+  errorMessage,
 }: {
   queryFormData: Record<string, any>;
   tableSectionHeight: number;
   chartStatus: string;
   ownState?: JsonObject;
   onCollapseChange: (openPanelName: string) => void;
+  errorMessage?: JSX.Element;
 }) => {
   const [data, setData] = useState<{
     [RESULT_TYPES.results]?: Record<string, any>[];
@@ -196,6 +198,17 @@ export const DataTablesPane = ({
 
   useEffect(() => {
     if (panelOpen && isRequestPending[RESULT_TYPES.results]) {
+      if (errorMessage) {
+        setIsRequestPending(prevState => ({
+          ...prevState,
+          [RESULT_TYPES.results]: false,
+        }));
+        setIsLoading(prevIsLoading => ({
+          ...prevIsLoading,
+          [RESULT_TYPES.results]: false,
+        }));
+        return;
+      }
       if (chartStatus === 'loading') {
         setIsLoading(prevIsLoading => ({
           ...prevIsLoading,
@@ -220,7 +233,14 @@ export const DataTablesPane = ({
       }));
       getData(RESULT_TYPES.samples);
     }
-  }, [panelOpen, isRequestPending, getData, activeTabKey, chartStatus]);
+  }, [
+    panelOpen,
+    isRequestPending,
+    getData,
+    activeTabKey,
+    chartStatus,
+    errorMessage,
+  ]);
 
   const filteredData = {
     [RESULT_TYPES.results]: useFilteredTableData(
@@ -262,6 +282,9 @@ export const DataTablesPane = ({
         />
       );
     }
+    if (errorMessage) {
+      return <pre>{errorMessage}</pre>;
+    }
     return null;
   };
 

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -285,6 +285,7 @@ const ExploreChartPanel = props => {
             tableSectionHeight={tableSectionHeight}
             onCollapseChange={onCollapseChange}
             chartStatus={props.chart.chartStatus}
+            errorMessage={props.errorMessage}
           />
         </Split>
       )}