diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx index 3792a2f315cc3..df754f66a9bbc 100644 --- a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.tsx +++ b/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(); - 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 && ( -
- -
- )} + {drillByDisplayMode === DrillByType.Table && + chartDataResult && + resultsTable} {contextMenu} diff --git a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.test.ts new file mode 100644 index 0000000000000..36cc51a68431a --- /dev/null +++ b/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); +}); diff --git a/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx b/superset-frontend/src/components/Chart/DrillBy/useResultsTableView.tsx new file mode 100644 index 0000000000000..2778fab72c431 --- /dev/null +++ b/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
; + } + if (chartDataResult.length === 1) { + return ( + + + + ); + } + return ( + + {chartDataResult.map((res, index) => ( + + + + + + ))} + + ); +};