Move useTimeFormattedColumns out of useTableColumns

apache · Feb 8, 2022 · 9a77d01 · 9a77d01
1 parent 18ebae0
commit 9a77d01
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 25 deletions.
diff --git a/superset-frontend/spec/helpers/testing-library.tsx b/superset-frontend/spec/helpers/testing-library.tsx
@@ -19,7 +19,6 @@
 import '@testing-library/jest-dom/extend-expect';
 import React, { ReactNode, ReactElement } from 'react';
 import { render, RenderOptions } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
 import { ThemeProvider, supersetTheme } from '@superset-ui/core';
 import { BrowserRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
@@ -83,14 +82,11 @@ function createWrapper(options?: Options) {
 const customRender = (ui: ReactElement, options?: Options) =>
   render(ui, { wrapper: createWrapper(options), ...options });
 
-const customRenderHook = (callback: (props: any) => any, options?: Options) =>
-  renderHook(callback, { wrapper: createWrapper(options), ...options });
-
 export function sleep(time: number) {
   return new Promise(resolve => {
     setTimeout(resolve, time);
   });
 }
 
 export * from '@testing-library/react';
-export { customRender as render, customRenderHook as renderHook };
+export { customRender as render };
diff --git a/superset-frontend/src/explore/components/DataTableControl/index.tsx b/superset-frontend/src/explore/components/DataTableControl/index.tsx
@@ -47,7 +47,6 @@ import {
   setTimeFormattedColumn,
   unsetTimeFormattedColumn,
 } from 'src/explore/actions/exploreActions';
-import { useTimeFormattedColumns } from '../useTimeFormattedColumns';
 
 export const CopyButton = styled(Button)`
   font-size: ${({ theme }) => theme.typography.sizes.s}px;
@@ -269,11 +268,10 @@ export const useTableColumns = (
   coltypes?: GenericDataType[],
   data?: Record<string, any>[],
   datasourceId?: string,
+  timeFormattedColumns: string[] = [],
   moreConfigs?: { [key: string]: Partial<Column> },
-) => {
-  const timeFormattedColumns = useTimeFormattedColumns(datasourceId);
-
-  return useMemo(
+) =>
+  useMemo(
     () =>
       colnames && data?.length
         ? colnames
@@ -315,4 +313,3 @@ export const useTableColumns = (
         : [],
     [colnames, data, coltypes, datasourceId, moreConfigs, timeFormattedColumns],
   );
-};
diff --git a/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts b/superset-frontend/src/explore/components/DataTableControl/useTableColumns.test.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 import { GenericDataType } from '@superset-ui/core';
-import { renderHook } from 'spec/helpers/testing-library';
+import { renderHook } from '@testing-library/react-hooks';
 import { BOOL_FALSE_DISPLAY, BOOL_TRUE_DISPLAY } from 'src/constants';
 import { useTableColumns } from '.';
 
@@ -52,9 +52,7 @@ const coltypes = [
 ];
 
 test('useTableColumns with no options', () => {
-  const hook = renderHook(() => useTableColumns(all_columns, coltypes, data), {
-    useRedux: true,
-  });
+  const hook = renderHook(() => useTableColumns(all_columns, coltypes, data));
   expect(hook.result.current).toEqual([
     {
       Cell: expect.any(Function),
@@ -97,9 +95,8 @@ test('useTableColumns with no options', () => {
 
 test('use only the first record columns', () => {
   const newData = [data[3], data[0]];
-  const hook = renderHook(
-    () => useTableColumns(all_columns, coltypes, newData),
-    { useRedux: true },
+  const hook = renderHook(() =>
+    useTableColumns(all_columns, coltypes, newData),
   );
   expect(hook.result.current).toEqual([
     {
@@ -156,12 +153,10 @@ test('use only the first record columns', () => {
 });
 
 test('useTableColumns with options', () => {
-  const hook = renderHook(
-    () =>
-      useTableColumns(all_columns, coltypes, data, undefined, {
-        col01: { id: 'ID' },
-      }),
-    { useRedux: true },
+  const hook = renderHook(() =>
+    useTableColumns(all_columns, coltypes, data, undefined, [], {
+      col01: { id: 'ID' },
+    }),
   );
   expect(hook.result.current).toEqual([
     {

diff --git a/superset-frontend/src/explore/components/DataTablesPane/index.tsx b/superset-frontend/src/explore/components/DataTablesPane/index.tsx
@@ -116,6 +116,7 @@ interface DataTableProps {
   datasource: string | undefined;
   filterText: string;
   data: object[] | undefined;
+  timeFormattedColumns: string[] | undefined;
   isLoading: boolean;
   error: string | undefined;
   errorMessage: React.ReactElement | undefined;
@@ -127,13 +128,20 @@ const DataTable = ({
   datasource,
   filterText,
   data,
+  timeFormattedColumns,
   isLoading,
   error,
   errorMessage,
 }: DataTableProps) => {
   // 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(columnNames, columnTypes, data, datasource);
+  const columns = useTableColumns(
+    columnNames,
+    columnTypes,
+    data,
+    datasource,
+    timeFormattedColumns,
+  );
   const filteredData = useFilteredTableData(filterText, data);
 
   if (isLoading) {
@@ -406,6 +414,7 @@ export const DataTablesPane = ({
                     isLoading={isLoading[RESULT_TYPES.results]}
                     data={data[RESULT_TYPES.results]}
                     datasource={queryFormData?.datasource}
+                    timeFormattedColumns={timeFormattedColumns}
                     columnNames={columnNames[RESULT_TYPES.results]}
                     columnTypes={columnTypes[RESULT_TYPES.results]}
                     filterText={filterText}
@@ -421,6 +430,7 @@ export const DataTablesPane = ({
                     isLoading={isLoading[RESULT_TYPES.samples]}
                     data={data[RESULT_TYPES.samples]}
                     datasource={queryFormData?.datasource}
+                    timeFormattedColumns={timeFormattedColumns}
                     columnNames={columnNames[RESULT_TYPES.samples]}
                     columnTypes={columnTypes[RESULT_TYPES.samples]}
                     filterText={filterText}