feat: Display both queries result in Table mode for Mixed Chart in drill by modal (#23768)

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.test.ts

@@ -0,0 +1,108 @@
+/**
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import userEvent from '@testing-library/user-event';
+import { render, screen, within, waitFor } from 'spec/helpers/testing-library';
+import { useResultsTableView } from './useResultsTableView';
+
+const MOCK_CHART_DATA_RESULT = [
+  {
+    colnames: ['name', 'sum__num'],
+    coltypes: [1, 0],
+    data: [
+      {
+        name: 'Michael',
+        sum__num: 2467063,
+      },
+      {
+        name: 'Christopher',
+        sum__num: 1725265,
+      },
+      {
+        name: 'David',
+        sum__num: 1570516,
+      },
+      {
+        name: 'James',
+        sum__num: 1506025,
+      },
+    ],
+  },
+  {
+    colnames: ['gender', 'year', 'count'],
+    coltypes: [1, 0, 0],
+    data: [
+      {
+        gender: 'boy',
+        year: 2000,
+        count: 1000,
+      },
+      {
+        gender: 'girl',
+        year: 2000,
+        count: 2000,
+      },
+    ],
+  },
+];
+
+test('Displays results table for 1 query', () => {
+  const { result } = renderHook(() =>
+    useResultsTableView(MOCK_CHART_DATA_RESULT.slice(0, 1), '1__table'),
+  );
+  render(result.current, { useRedux: true });
+  expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
+  expect(screen.getByRole('table')).toBeInTheDocument();
+  expect(screen.getAllByRole('columnheader')).toHaveLength(2);
+  expect(screen.getAllByTestId('table-row')).toHaveLength(4);
+});
+
+test('Displays results for 2 queries', async () => {
+  const { result } = renderHook(() =>
+    useResultsTableView(MOCK_CHART_DATA_RESULT, '1__table'),
+  );
+  render(result.current, { useRedux: true });
+  const getActiveTabElement = () =>
+    document.querySelector('.ant-tabs-tabpane-active') as HTMLElement;
+
+  const tablistElement = screen.getByRole('tablist');
+  expect(tablistElement).toBeInTheDocument();
+  expect(within(tablistElement).getByText('Results 1')).toBeInTheDocument();
+  expect(within(tablistElement).getByText('Results 2')).toBeInTheDocument();
+
+  expect(within(getActiveTabElement()).getByRole('table')).toBeInTheDocument();
+  expect(
+    within(getActiveTabElement()).getAllByRole('columnheader'),
+  ).toHaveLength(2);
+  expect(
+    within(getActiveTabElement()).getAllByTestId('table-row'),
+  ).toHaveLength(4);
+
+  userEvent.click(screen.getByText('Results 2'));
+
+  await waitFor(() => {
+    expect(
+      within(getActiveTabElement()).getAllByRole('columnheader'),
+    ).toHaveLength(3);
+  });
+  expect(
+    within(getActiveTabElement()).getAllByTestId('table-row'),
+  ).toHaveLength(2);
+});

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 <div />;
+  }
+  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>
+  );
+};