feat: Display both queries result in Table mode for Mixed Chart in dr…

…ill by modal

superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx

@@ -46,7 +46,6 @@ import { postFormData } from 'src/explore/exploreUtils/formData';
 import { noOp } from 'src/utils/common';
 import { simpleFilterToAdhoc } from 'src/utils/simpleFilterToAdhoc';
 import { useDatasetMetadataBar } from 'src/features/datasets/metadataBar/useDatasetMetadataBar';
-import { SingleQueryResultPane } from 'src/explore/components/DataTablesPane/components/SingleQueryResultPane';
 import { useToasts } from 'src/components/MessageToasts/withToasts';
 import Alert from 'src/components/Alert';
 import { Dataset, DrillByType } from '../types';
@@ -59,8 +58,7 @@ import {
   DrillByBreadcrumb,
   useDrillByBreadcrumbs,
 } from './useDrillByBreadcrumbs';
-
-const DATA_SIZE = 15;
+import { useResultsTableView } from './useResultsTableView';
 
 const DEFAULT_ADHOC_FILTER_FIELD_NAME = 'adhoc_filters';
 interface ModalFooterProps {
@@ -167,9 +165,10 @@ export default function DrillByModal({
 
   const { displayModeToggle, drillByDisplayMode } = useDisplayModeToggle();
   const [chartDataResult, setChartDataResult] = useState<QueryData[]>();
-  const [datasourceId] = useMemo(
-    () => formData.datasource.split('__'),
-    [formData.datasource],
+
+  const resultsTable = useResultsTableView(
+    chartDataResult,
+    formData.datasource,
   );
 
   const [currentFormData, setCurrentFormData] = useState(formData);
@@ -414,24 +413,9 @@ export default function DrillByModal({
             inContextMenu={inContextMenu}
           />
         )}
-        {drillByDisplayMode === DrillByType.Table && chartDataResult && (
-          <div
-            css={css`
-              .pagination-container {
-                bottom: ${-theme.gridUnit * 4}px;
-              }
-            `}
-          >
-            <SingleQueryResultPane
-              colnames={chartDataResult[0].colnames}
-              coltypes={chartDataResult[0].coltypes}
-              data={chartDataResult[0].data}
-              dataSize={DATA_SIZE}
-              datasourceId={datasourceId}
-              isVisible
-            />
-          </div>
-        )}
+        {drillByDisplayMode === DrillByType.Table &&
+          chartDataResult &&
+          resultsTable}
         {contextMenu}
       </div>
     </Modal>

superset-frontend/src/components/Chart/DrillBy/useResultsTableView.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 from 'react';
+import { css, styled, isDefined, QueryData, t } from '@superset-ui/core';
+import { SingleQueryResultPane } from 'src/explore/components/DataTablesPane/components/SingleQueryResultPane';
+import Tabs from 'src/components/Tabs';
+
+const DATA_SIZE = 15;
+
+const PaginationContainer = styled.div`
+  ${({ theme }) => css`
+    & .pagination-container {
+      bottom: ${-theme.gridUnit * 4}px;
+    }
+  `}
+`;
+
+export const useResultsTableView = (
+  chartDataResult: QueryData[] | undefined,
+  datasourceId: string,
+) => {
+  if (!isDefined(chartDataResult)) {
+    return null;
+  }
+  if (chartDataResult.length === 1) {
+    return (
+      <PaginationContainer>
+        <SingleQueryResultPane
+          colnames={chartDataResult[0].colnames}
+          coltypes={chartDataResult[0].coltypes}
+          data={chartDataResult[0].data}
+          dataSize={DATA_SIZE}
+          datasourceId={datasourceId}
+          isVisible
+        />
+      </PaginationContainer>
+    );
+  }
+  return (
+    <Tabs fullWidth={false}>
+      {chartDataResult.map((res, index) => (
+        <Tabs.TabPane tab={t('Results %s', index + 1)} key={index}>
+          <PaginationContainer>
+            <SingleQueryResultPane
+              colnames={res.colnames}
+              coltypes={res.coltypes}
+              data={res.data}
+              dataSize={DATA_SIZE}
+              datasourceId={datasourceId}
+              isVisible
+            />
+          </PaginationContainer>
+        </Tabs.TabPane>
+      ))}
+    </Tabs>
+  );
+};