fix: dashbaord unable to refresh (#20220)

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

@@ -28,6 +28,7 @@ import {
 } from 'spec/helpers/testing-library';
 import { DatasourceType } from '@superset-ui/core';
 import { exploreActions } from 'src/explore/actions/exploreActions';
+import { ChartStatus } from 'src/explore/types';
 import { DataTablesPane } from '.';
 
 const createProps = () => ({
@@ -57,7 +58,7 @@ const createProps = () => ({
     extra_form_data: {},
   },
   queryForce: false,
-  chartStatus: 'rendered',
+  chartStatus: 'rendered' as ChartStatus,
   onCollapseChange: jest.fn(),
   queriesResponse: [
     {
@@ -150,7 +151,7 @@ describe('DataTablesPane', () => {
       <DataTablesPane
         {...{
           ...props,
-          chartStatus: 'success',
+          chartStatus: 'rendered',
           queriesResponse: [
             {
               colnames: ['__timestamp', 'genre'],
@@ -202,7 +203,7 @@ describe('DataTablesPane', () => {
       <DataTablesPane
         {...{
           ...props,
-          chartStatus: 'success',
+          chartStatus: 'rendered',
           queriesResponse: [
             {
               colnames: ['__timestamp', 'genre'],

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

@@ -85,6 +85,7 @@ export const DataTablesPane = ({
   datasource,
   queryForce,
   onCollapseChange,
+  chartStatus,
   ownState,
   errorMessage,
   actions,
@@ -92,7 +93,7 @@ export const DataTablesPane = ({
   const theme = useTheme();
   const [activeTabKey, setActiveTabKey] = useState<string>(ResultTypes.Results);
   const [isRequest, setIsRequest] = useState<Record<ResultTypes, boolean>>({
-    results: getItem(LocalStorageKeys.is_datapanel_open, false),
+    results: false,
     samples: false,
   });
   const [panelOpen, setPanelOpen] = useState(
@@ -111,7 +112,11 @@ export const DataTablesPane = ({
       });
     }
 
-    if (panelOpen && activeTabKey === ResultTypes.Results) {
+    if (
+      panelOpen &&
+      activeTabKey === ResultTypes.Results &&
+      chartStatus === 'rendered'
+    ) {
       setIsRequest({
         results: true,
         samples: false,
@@ -124,7 +129,7 @@ export const DataTablesPane = ({
         samples: true,
       });
     }
-  }, [panelOpen, activeTabKey]);
+  }, [panelOpen, activeTabKey, chartStatus]);
 
   const handleCollapseChange = useCallback(
     (isOpen: boolean) => {

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

@@ -50,7 +50,7 @@ export const ResultsPane = ({
   const [data, setData] = useState<Record<string, any>[][]>([]);
   const [colnames, setColnames] = useState<string[]>([]);
   const [coltypes, setColtypes] = useState<GenericDataType[]>([]);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
   const [responseError, setResponseError] = useState<string>('');
 
   useEffect(() => {
@@ -105,6 +105,12 @@ export const ResultsPane = ({
     }
   }, [queryFormData, isRequest]);
 
+  useEffect(() => {
+    if (errorMessage) {
+      setIsLoading(false);
+    }
+  }, [errorMessage]);
+
   const originalFormattedTimeColumns = useOriginalFormattedTimeColumns(
     queryFormData.datasource,
   );
@@ -119,15 +125,15 @@ export const ResultsPane = ({
   );
   const filteredData = useFilteredTableData(filterText, data);
 
+  if (isLoading) {
+    return <Loading />;
+  }
+
   if (errorMessage) {
     const title = t('Run a query to display results');
     return <EmptyStateMedium image="document.svg" title={title} />;
   }
 
-  if (isLoading) {
-    return <Loading />;
-  }
-
   if (responseError) {
     return (
       <>

superset-frontend/src/explore/components/DataTablesPane/types.ts

@@ -18,12 +18,14 @@
  */
 import { Datasource, JsonObject, QueryFormData } from '@superset-ui/core';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
+import { ChartStatus } from 'src/explore/types';
 
 export interface DataTablesPaneProps {
   queryFormData: QueryFormData;
   datasource: Datasource;
   queryForce: boolean;
   ownState?: JsonObject;
+  chartStatus: ChartStatus;
   onCollapseChange: (isOpen: boolean) => void;
   errorMessage?: JSX.Element;
   actions: ExploreActions;