From 9a77d01b132f001686041fd82bf529bb1f3f4ee6 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Mon, 7 Feb 2022 18:02:13 +0100 Subject: [PATCH] Move useTimeFormattedColumns out of useTableColumns --- .../spec/helpers/testing-library.tsx | 6 +----- .../components/DataTableControl/index.tsx | 9 +++----- .../DataTableControl/useTableColumns.test.ts | 21 +++++++------------ .../components/DataTablesPane/index.tsx | 12 ++++++++++- 4 files changed, 23 insertions(+), 25 deletions(-) diff --git a/superset-frontend/spec/helpers/testing-library.tsx b/superset-frontend/spec/helpers/testing-library.tsx index 5afc8539d093..56489cce8471 100644 --- 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,9 +82,6 @@ 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); @@ -93,4 +89,4 @@ export function sleep(time: number) { } 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 index 508e926ca4e8..68e83bc1a647 100644 --- 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[], datasourceId?: string, + timeFormattedColumns: string[] = [], moreConfigs?: { [key: string]: Partial }, -) => { - 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 index 24bceb78d15a..bfc4b6d96468 100644 --- 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 index b81871a3b38a..d6cfcc257e24 100644 --- 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}