feat: multiple results pane on explore and dashboard

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -36,7 +36,7 @@ import Icons from 'src/components/Icons';
 import ModalTrigger from 'src/components/ModalTrigger';
 import Button from 'src/components/Button';
 import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
-import { ResultsPane } from 'src/explore/components/DataTablesPane';
+import { ResultsPaneOnDashboard } from 'src/explore/components/DataTablesPane';
 
 const MENU_KEYS = {
   CROSS_FILTER_SCOPING: 'cross_filter_scoping',
@@ -340,11 +340,12 @@ class SliceHeaderControls extends React.PureComponent<
               }
               modalTitle={t('Chart Data: %s', slice.slice_name)}
               modalBody={
-                <ResultsPane
+                <ResultsPaneOnDashboard
                   queryFormData={this.props.formData}
                   queryForce={false}
                   dataSize={20}
                   isRequest
+                  isVisible
                 />
               }
               modalFooter={

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

@@ -163,22 +163,20 @@ const DataTableTemporalHeaderCell = ({
   columnName,
   onTimeColumnChange,
   datasourceId,
+  isOriginalTimeColumn,
 }: {
   columnName: string;
   onTimeColumnChange: (
     columnName: string,
     columnType: FormatPickerValue,
   ) => void;
   datasourceId?: string;
+  isOriginalTimeColumn: boolean;
 }) => {
   const theme = useTheme();
-  const [isOriginalTimeColumn, setIsOriginalTimeColumn] = useState<boolean>(
-    getTimeColumns(datasourceId).includes(columnName),
-  );
 
   const onChange = (e: any) => {
     onTimeColumnChange(columnName, e.target.value);
-    setIsOriginalTimeColumn(getTimeColumns(datasourceId).includes(columnName));
   };
 
   const overlayContent = useMemo(
@@ -313,6 +311,8 @@ export const useTableColumns = (
                 colType === GenericDataType.TEMPORAL
                   ? originalFormattedTimeColumns.indexOf(key)
                   : -1;
+              const isOriginalTimeColumn =
+                originalFormattedTimeColumns.includes(key);
               return {
                 id: key,
                 accessor: row => row[key],
@@ -324,6 +324,7 @@ export const useTableColumns = (
                       columnName={key}
                       datasourceId={datasourceId}
                       onTimeColumnChange={onTimeColumnChange}
+                      isOriginalTimeColumn={isOriginalTimeColumn}
                     />
                   ) : (
                     key

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

@@ -31,13 +31,12 @@ import {
   setItem,
   LocalStorageKeys,
 } from 'src/utils/localStorageHelpers';
-import { ResultsPane, SamplesPane, TableControlsWrapper } from './components';
-import { DataTablesPaneProps } from './types';
-
-enum ResultTypes {
-  Results = 'results',
-  Samples = 'samples',
-}
+import {
+  SamplesPane,
+  TableControlsWrapper,
+  useResultsPane,
+} from './components';
+import { DataTablesPaneProps, ResultTypes } from './types';
 
 const SouthPane = styled.div`
   ${({ theme }) => `
@@ -114,7 +113,7 @@ export const DataTablesPane = ({
 
     if (
       panelOpen &&
-      activeTabKey === ResultTypes.Results &&
+      activeTabKey.startsWith(ResultTypes.Results) &&
       chartStatus === 'rendered'
     ) {
       setIsRequest({
@@ -187,6 +186,35 @@ export const DataTablesPane = ({
     );
   }, [handleCollapseChange, panelOpen, theme.colors.grayscale.base]);
 
+  const queryResultsPanes = useResultsPane({
+    errorMessage,
+    queryFormData,
+    queryForce,
+    ownState,
+    isRequest: isRequest.results,
+    actions,
+    isVisible: ResultTypes.Results === activeTabKey,
+  }).map((pane, idx) => {
+    if (idx === 0) {
+      return (
+        <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
+          {pane}
+        </Tabs.TabPane>
+      );
+    }
+    if (idx > 0) {
+      return (
+        <Tabs.TabPane
+          tab={t('Results %s', idx)}
+          key={`${ResultTypes.Results} ${idx}`}
+        >
+          {pane}
+        </Tabs.TabPane>
+      );
+    }
+    return null;
+  });
+
   return (
     <SouthPane data-test="some-purposeful-instance">
       <Tabs
@@ -195,22 +223,14 @@ export const DataTablesPane = ({
         activeKey={panelOpen ? activeTabKey : ''}
         onTabClick={handleTabClick}
       >
-        <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
-          <ResultsPane
-            errorMessage={errorMessage}
-            queryFormData={queryFormData}
-            queryForce={queryForce}
-            ownState={ownState}
-            isRequest={isRequest.results}
-            actions={actions}
-          />
-        </Tabs.TabPane>
+        {queryResultsPanes}
         <Tabs.TabPane tab={t('Samples')} key={ResultTypes.Samples}>
           <SamplesPane
             datasource={datasource}
             queryForce={queryForce}
             isRequest={isRequest.samples}
             actions={actions}
+            isVisible={ResultTypes.Samples === activeTabKey}
           />
         </Tabs.TabPane>
       </Tabs>

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

@@ -0,0 +1,69 @@
+/**
+ * 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 React from 'react';
+import { t } from '@superset-ui/core';
+import Tabs from 'src/components/Tabs';
+import { ResultTypes, ResultsPaneProps } from '../types';
+import { useResultsPane } from './useResultsPane';
+
+export const ResultsPaneOnDashboard = ({
+  isRequest,
+  queryFormData,
+  queryForce,
+  ownState,
+  errorMessage,
+  actions,
+  isVisible,
+  dataSize = 50,
+}: ResultsPaneProps) => {
+  const resultsPanes = useResultsPane({
+    errorMessage,
+    queryFormData,
+    queryForce,
+    ownState,
+    isRequest,
+    actions,
+    dataSize,
+    isVisible,
+  });
+  if (resultsPanes.length === 1) {
+    return resultsPanes[0];
+  }
+
+  const panes = resultsPanes.map((pane, idx) => {
+    if (idx === 0) {
+      return (
+        <Tabs.TabPane tab={t('Results')} key={ResultTypes.Results}>
+          {pane}
+        </Tabs.TabPane>
+      );
+    }
+
+    return (
+      <Tabs.TabPane
+        tab={t('Results %s', idx)}
+        key={`${ResultTypes.Results} ${idx}`}
+      >
+        {pane}
+      </Tabs.TabPane>
+    );
+  });
+
+  return <Tabs fullWidth={false}> {panes} </Tabs>;
+};

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

@@ -41,6 +41,7 @@ export const SamplesPane = ({
   queryForce,
   actions,
   dataSize = 50,
+  isVisible,
 }: SamplesPaneProps) => {
   const [filterText, setFilterText] = useState('');
   const [data, setData] = useState<Record<string, any>[][]>([]);
@@ -90,7 +91,7 @@ export const SamplesPane = ({
     coltypes,
     data,
     datasourceId,
-    isRequest,
+    isVisible,
   );
   const filteredData = useFilteredTableData(filterText, data);
 

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

@@ -0,0 +1,73 @@
+/**
+ * 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 React, { useState } from 'react';
+import { t } from '@superset-ui/core';
+import TableView, { EmptyWrapperType } from 'src/components/TableView';
+import {
+  useFilteredTableData,
+  useTableColumns,
+} from 'src/explore/components/DataTableControl';
+import { TableControls } from './DataTableControls';
+import { SingleQueryResultPaneProp } from '../types';
+
+export const SingleQueryResultPane = ({
+  data,
+  colnames,
+  coltypes,
+  datasourceId,
+  dataSize = 50,
+  isVisible,
+}: SingleQueryResultPaneProp) => {
+  const [filterText, setFilterText] = useState('');
+
+  // this is to preserve the order of the columns, even if there are integer values,
+  // while also only grabbing the first column's keys
+  const columns = useTableColumns(
+    colnames,
+    coltypes,
+    data,
+    datasourceId,
+    isVisible,
+  );
+  const filteredData = useFilteredTableData(filterText, data);
+
+  return (
+    <>
+      <TableControls
+        data={filteredData}
+        columnNames={colnames}
+        columnTypes={coltypes}
+        datasourceId={datasourceId}
+        onInputChange={input => setFilterText(input)}
+        isLoading={false}
+      />
+      <TableView
+        columns={columns}
+        data={filteredData}
+        pageSize={dataSize}
+        noDataText={t('No results')}
+        emptyWrapperType={EmptyWrapperType.Small}
+        className="table-condensed"
+        isPaginationSticky
+        showRowCount={false}
+        small
+      />
+    </>
+  );
+};

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

@@ -16,6 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export { ResultsPane } from './ResultsPane';
+export { ResultsPaneOnDashboard } from './ResultsPaneOnDashboard';
 export { SamplesPane } from './SamplesPane';
 export { TableControls, TableControlsWrapper } from './DataTableControls';
+export { useResultsPane } from './useResultsPane';