feat: implement drill by table (#23603)

apache · Apr 11, 2023 · 0227558 · 0227558
1 parent 8bd8276
commit 0227558
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 86 deletions.
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByChart.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByChart.test.tsx
@@ -22,49 +22,30 @@ import chartQueries, { sliceId } from 'spec/fixtures/mockChartQueries';
 import fetchMock from 'fetch-mock';
 import DrillByChart from './DrillByChart';
 
-const CHART_DATA_ENDPOINT =
-  'glob:*api/v1/chart/data?form_data=%7B%22slice_id%22%3A18%7D';
-
 const chart = chartQueries[sliceId];
 
-const fetchWithNoData = () => {
-  fetchMock.post(CHART_DATA_ENDPOINT, {
-    result: [
-      {
-        total_count: 0,
-        data: [],
-        colnames: [],
-        coltypes: [],
-      },
-    ],
-  });
-};
-
-const setup = (overrides: Record<string, any> = {}) =>
-  render(<DrillByChart formData={{ ...chart.form_data, ...overrides }} />, {
-    useRedux: true,
-  });
+const setup = (overrides: Record<string, any> = {}, result?: any) =>
+  render(
+    <DrillByChart
+      formData={{ ...chart.form_data, ...overrides }}
+      result={result}
+    />,
+    {
+      useRedux: true,
+    },
+  );
 
 const waitForRender = (overrides: Record<string, any> = {}) =>
   waitFor(() => setup(overrides));
 
 afterEach(fetchMock.restore);
 
 test('should render', async () => {
-  fetchWithNoData();
   const { container } = await waitForRender();
   expect(container).toBeInTheDocument();
 });
 
-test('should render loading indicator', async () => {
-  setup();
-  await waitFor(() =>
-    expect(screen.getByLabelText('Loading')).toBeInTheDocument(),
-  );
-});
-
 test('should render the "No results" components', async () => {
-  fetchWithNoData();
-  setup();
+  setup({}, []);
   expect(await screen.findByText('No Results')).toBeInTheDocument();
 });
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByChart.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByChart.tsx
@@ -16,47 +16,38 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect, useState } from 'react';
-import { BaseFormData, Behavior, css, SuperChart } from '@superset-ui/core';
-import { getChartDataRequest } from 'src/components/Chart/chartAction';
-import Loading from 'src/components/Loading';
+import React from 'react';
+import {
+  BaseFormData,
+  Behavior,
+  QueryData,
+  SuperChart,
+  css,
+} from '@superset-ui/core';
 
 interface DrillByChartProps {
   formData: BaseFormData & { [key: string]: any };
+  result: QueryData[];
 }
 
-export default function DrillByChart({ formData }: DrillByChartProps) {
-  const [chartDataResult, setChartDataResult] = useState();
-
-  useEffect(() => {
-    getChartDataRequest({
-      formData,
-    }).then(({ json }) => {
-      setChartDataResult(json.result);
-    });
-  }, []);
-
+export default function DrillByChart({ formData, result }: DrillByChartProps) {
   return (
     <div
       css={css`
         width: 100%;
         height: 100%;
       `}
     >
-      {chartDataResult ? (
-        <SuperChart
-          disableErrorBoundary
-          behaviors={[Behavior.INTERACTIVE_CHART]}
-          chartType={formData.viz_type}
-          enableNoResults
-          formData={formData}
-          queriesData={chartDataResult}
-          height="100%"
-          width="100%"
-        />
-      ) : (
-        <Loading />
-      )}
+      <SuperChart
+        disableErrorBoundary
+        behaviors={[Behavior.INTERACTIVE_CHART]}
+        chartType={formData.viz_type}
+        enableNoResults
+        formData={formData}
+        queriesData={result}
+        height="100%"
+        width="100%"
+      />
     </div>
   );
 }
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByMenuItems.tsx
@@ -244,15 +244,16 @@ export const DrillByMenuItems = ({
           )}
         </div>
       </Menu.SubMenu>
-      <DrillByModal
-        column={currentColumn}
-        filters={filters}
-        formData={formData}
-        groupbyFieldName={groupbyFieldName}
-        onHideModal={closeModal}
-        showModal={showModal}
-        dataset={dataset!}
-      />
+      {showModal && (
+        <DrillByModal
+          column={currentColumn}
+          filters={filters}
+          formData={formData}
+          groupbyFieldName={groupbyFieldName}
+          onHideModal={closeModal}
+          dataset={dataset!}
+        />
+      )}
     </>
   );
 };
diff --git a/superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx b/superset-frontend/src/components/Chart/DrillBy/DrillByModal.test.tsx
@@ -71,12 +71,13 @@ const renderModal = async () => {
         <button type="button" onClick={() => setShowModal(true)}>
           Show modal
         </button>
-        <DrillByModal
-          formData={formData}
-          showModal={showModal}
-          onHideModal={() => setShowModal(false)}
-          dataset={dataset}
-        />
+        {showModal && (
+          <DrillByModal
+            formData={formData}
+            onHideModal={() => setShowModal(false)}
+            dataset={dataset}
+          />
+        )}
       </DashboardPageIdContext.Provider>
     );
   };
@@ -118,16 +119,26 @@ test('should close the modal', async () => {
   expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
 });
 
+test('should render loading indicator', async () => {
+  await renderModal();
+  await waitFor(() =>
+    expect(screen.getByLabelText('Loading')).toBeInTheDocument(),
+  );
+});
+
 test('should generate Explore url', async () => {
   await renderModal();
-  await waitFor(() => fetchMock.called(FORM_DATA_KEY_ENDPOINT));
+  await waitFor(() => fetchMock.called(CHART_DATA_ENDPOINT));
   const expectedRequestPayload = {
     form_data: {
       ...omitBy(
         omit(formData, ['slice_id', 'slice_name', 'dashboards']),
         isUndefined,
       ),
       slice_id: 0,
+      result_format: 'json',
+      result_type: 'full',
+      force: false,
     },
     datasource_id: Number(formData.datasource.split('__')[0]),
     datasource_type: formData.datasource.split('__')[1],
@@ -136,11 +147,26 @@ test('should generate Explore url', async () => {
   const parsedRequestPayload = JSON.parse(
     fetchMock.lastCall()?.[1]?.body as string,
   );
-  parsedRequestPayload.form_data = JSON.parse(parsedRequestPayload.form_data);
 
-  expect(parsedRequestPayload).toEqual(expectedRequestPayload);
+  expect(parsedRequestPayload.form_data).toEqual(
+    expectedRequestPayload.form_data,
+  );
 
   expect(
     await screen.findByRole('link', { name: 'Edit chart' }),
   ).toHaveAttribute('href', '/explore/?form_data_key=123&dashboard_page_id=1');
 });
+
+test('should render radio buttons', async () => {
+  await renderModal();
+  const chartRadio = screen.getByRole('radio', { name: /chart/i });
+  const tableRadio = screen.getByRole('radio', { name: /table/i });
+
+  expect(chartRadio).toBeInTheDocument();
+  expect(tableRadio).toBeInTheDocument();
+  expect(chartRadio).toBeChecked();
+  expect(tableRadio).not.toBeChecked();
+  userEvent.click(tableRadio);
+  expect(chartRadio).not.toBeChecked();
+  expect(tableRadio).toBeChecked();
+});