From e014729403c5f44786110ea9ecfded584ca0993e Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Wed, 27 Jul 2022 11:51:31 -0400 Subject: [PATCH] Move the table data state to redux --- .../src/experiments/components/App.test.tsx | 9 +- webview/src/experiments/components/App.tsx | 13 +-- .../experiments/components/Experiments.tsx | 87 +++++++------------ .../components/table/Indicators.tsx | 18 ++-- .../components/table/MergeHeaderGroups.tsx | 7 -- .../src/experiments/components/table/Row.tsx | 10 ++- .../components/table/Table.test.tsx | 29 +++++-- .../experiments/components/table/Table.tsx | 33 +++---- .../components/table/TableHead.tsx | 27 ++---- .../components/table/TableHeader.tsx | 10 +-- .../components/table/headersSlice.ts | 17 ++++ .../components/table/interfaces.ts | 10 +-- .../components/table/tableDataSlice.ts | 45 ++++++++++ webview/src/experiments/store.ts | 6 +- webview/src/stories/Table.stories.tsx | 38 +++++--- webview/src/test/experimentsTable.tsx | 4 +- 16 files changed, 201 insertions(+), 162 deletions(-) create mode 100644 webview/src/experiments/components/table/headersSlice.ts create mode 100644 webview/src/experiments/components/table/tableDataSlice.ts diff --git a/webview/src/experiments/components/App.test.tsx b/webview/src/experiments/components/App.test.tsx index 425b9d63ec..ddd466d841 100644 --- a/webview/src/experiments/components/App.test.tsx +++ b/webview/src/experiments/components/App.test.tsx @@ -2,12 +2,10 @@ * @jest-environment jsdom */ /* eslint jest/expect-expect: ["error", { "assertFunctionNames": ["expect", "expectHeaders"] }] */ -import React from 'react' import { cleanup, createEvent, fireEvent, - render, screen, within } from '@testing-library/react' @@ -17,7 +15,6 @@ import { MessageFromWebviewType } from 'dvc/src/webview/contract' import { Column, ColumnType, Row } from 'dvc/src/experiments/webview/contract' import { buildMetricOrParamPath } from 'dvc/src/experiments/columns/paths' import { dataTypesTableData } from 'dvc/src/test/fixtures/expShow/dataTypes' -import { App } from './App' import { useIsFullyContained } from './overflowHoverTooltip/useIsFullyContained' import styles from './table/styles.module.scss' import { vsCodeApi } from '../../shared/api' @@ -119,7 +116,7 @@ describe('App', () => { }) it('should send a message to the extension on the first render', () => { - render() + renderTable(undefined, true) expect(mockPostMessage).toHaveBeenCalledWith({ type: MessageFromWebviewType.INITIALIZED }) @@ -128,7 +125,7 @@ describe('App', () => { }) it('should display the loading state before the experiments are shown', async () => { - render() + renderTable(undefined, true) const loadingState = await screen.findByText('Loading Experiments...') expect(loadingState).toBeInTheDocument() @@ -866,7 +863,7 @@ describe('App', () => { describe('Context Menu Suppression', () => { it('Suppresses the context menu on a table with no data', () => { - render() + renderTable(undefined, true) const target = screen.getByText('Loading Experiments...') const contextMenuEvent = createEvent.contextMenu(target) fireEvent(target, contextMenuEvent) diff --git a/webview/src/experiments/components/App.tsx b/webview/src/experiments/components/App.tsx index 6c58de9fbe..3d0543b83e 100644 --- a/webview/src/experiments/components/App.tsx +++ b/webview/src/experiments/components/App.tsx @@ -1,24 +1,27 @@ -import React, { useCallback, useState } from 'react' +import React, { useCallback } from 'react' +import { useDispatch } from 'react-redux' import { MessageToWebview, MessageToWebviewType } from 'dvc/src/webview/contract' import { TableData } from 'dvc/src/experiments/webview/contract' import Experiments from './Experiments' +import { update } from './table/tableDataSlice' import { useVsCodeMessaging } from '../../shared/hooks/useVsCodeMessaging' export const App: React.FC> = () => { - const [tableData, setTableData] = useState() + const dispatch = useDispatch() + useVsCodeMessaging( useCallback( ({ data }: { data: MessageToWebview }) => { if (data.type === MessageToWebviewType.SET_DATA) { - setTableData(data.data) + dispatch(update(data.data)) } }, - [setTableData] + [dispatch] ) ) - return + return } diff --git a/webview/src/experiments/components/Experiments.tsx b/webview/src/experiments/components/Experiments.tsx index 821fde2774..a9be08250a 100644 --- a/webview/src/experiments/components/Experiments.tsx +++ b/webview/src/experiments/components/Experiments.tsx @@ -1,11 +1,6 @@ -import React, { useCallback } from 'react' -import { - Column, - Row, - TableData, - InitiallyUndefinedTableData, - ColumnType -} from 'dvc/src/experiments/webview/contract' +import React, { useCallback, useEffect } from 'react' +import { useSelector } from 'react-redux' +import { Column, Row, ColumnType } from 'dvc/src/experiments/webview/contract' import { Row as TableRow, Column as TableColumn, @@ -27,6 +22,7 @@ import { sendMessage } from '../../shared/vscode' import { WebviewWrapper } from '../../shared/components/webviewWrapper/WebviewWrapper' import { GetStarted } from '../../shared/components/getStarted/GetStarted' import { EmptyState } from '../../shared/components/emptyState/EmptyState' +import { ExperimentsState } from '../store' const DEFAULT_COLUMN_WIDTH = 90 const MINIMUM_COLUMN_WIDTH = 90 @@ -124,55 +120,37 @@ const reportResizedColumn = (state: TableState) => { } } -export const ExperimentsTable: React.FC<{ - tableData: InitiallyUndefinedTableData -}> = ({ tableData: initiallyUndefinedTableData }) => { +const defaultColumn: Partial> = { + minWidth: MINIMUM_COLUMN_WIDTH, + width: DEFAULT_COLUMN_WIDTH +} + +export const ExperimentsTable: React.FC = () => { + const { + columns: columnsData, + columnOrder, + columnWidths, + hasColumns, + rows: data + } = useSelector((state: ExperimentsState) => state.tableData) + const columns = getColumns(columnsData) + const initialState = { + columnOrder, + columnResizing: { + columnWidths + } + } as Partial> + const getRowId = useCallback( (experiment: Row, relativeIndex: number, parent?: TableRow) => parent ? [parent.id, experiment.id].join('.') : String(relativeIndex), [] ) - const [tableData, columns, defaultColumn, initialState] = - React.useMemo(() => { - const tableData: TableData = { - changes: [], - columnOrder: [], - columnWidths: {}, - columns: [], - filteredCounts: { - checkpoints: 0, - experiments: 0 - }, - filters: [], - hasCheckpoints: false, - hasColumns: false, - hasRunningExperiment: false, - rows: [], - sorts: [], - ...initiallyUndefinedTableData - } - - const initialState = { - columnOrder: tableData.columnOrder, - columnResizing: { - columnWidths: tableData.columnWidths - } - } as Partial> - - const defaultColumn: Partial> = { - minWidth: MINIMUM_COLUMN_WIDTH, - width: DEFAULT_COLUMN_WIDTH - } - - const columns = getColumns(tableData.columns) - return [tableData, columns, defaultColumn, initialState] - }, [initiallyUndefinedTableData]) - - const { hasColumns, rows: data } = tableData const instance = useTable( { autoResetExpanded: false, + autoResetHiddenColumns: false, autoResetResize: false, columns, data, @@ -206,7 +184,7 @@ export const ExperimentsTable: React.FC<{ const { toggleAllRowsExpanded } = instance - React.useEffect(() => { + useEffect(() => { toggleAllRowsExpanded() }, [toggleAllRowsExpanded]) @@ -224,18 +202,17 @@ export const ExperimentsTable: React.FC<{ return ( - +
) } -const Experiments: React.FC<{ - tableData?: TableData | null -}> = ({ tableData }) => { +const Experiments: React.FC = () => { + const { hasData } = useSelector((state: ExperimentsState) => state.tableData) return ( - {tableData ? ( - + {hasData ? ( + ) : ( Loading Experiments... )} diff --git a/webview/src/experiments/components/table/Indicators.tsx b/webview/src/experiments/components/table/Indicators.tsx index c5f994263e..817e3e8fa5 100644 --- a/webview/src/experiments/components/table/Indicators.tsx +++ b/webview/src/experiments/components/table/Indicators.tsx @@ -1,5 +1,5 @@ import React, { MouseEventHandler, ReactNode } from 'react' -import { SortDefinition } from 'dvc/src/experiments/model/sortBy' +import { useSelector } from 'react-redux' import cx from 'classnames' import { MessageFromWebviewType } from 'dvc/src/webview/contract' import { FilteredCounts } from 'dvc/src/experiments/model/filterBy/collect' @@ -15,6 +15,7 @@ import { sendMessage } from '../../../shared/vscode' import Tooltip from '../../../shared/components/tooltip/Tooltip' import tooltipStyles from '../../../shared/components/tooltip/styles.module.scss' import { pluralize } from '../../../util/strings' +import { ExperimentsState } from '../../store' export type IndicatorTooltipProps = Pick & { tooltipContent: ReactNode @@ -124,16 +125,17 @@ const formatFilteredCountMessage = (filteredCounts: FilteredCounts): string => .join(', ')} Filtered` export const Indicators = ({ - selectedForPlotsCount, - sorts, - filters, - filteredCounts + selectedForPlotsCount }: { - sorts?: SortDefinition[] - filters?: string[] - filteredCounts: FilteredCounts selectedForPlotsCount: number }) => { + const filters = useSelector( + (state: ExperimentsState) => state.tableData.filters + ) + const sorts = useSelector((state: ExperimentsState) => state.tableData.sorts) + const filteredCounts = useSelector( + (state: ExperimentsState) => state.tableData.filteredCounts + ) const sortsCount = sorts?.length const filtersCount = filters?.length diff --git a/webview/src/experiments/components/table/MergeHeaderGroups.tsx b/webview/src/experiments/components/table/MergeHeaderGroups.tsx index c471c94a6a..947779c645 100644 --- a/webview/src/experiments/components/table/MergeHeaderGroups.tsx +++ b/webview/src/experiments/components/table/MergeHeaderGroups.tsx @@ -1,6 +1,5 @@ import React from 'react' import cx from 'classnames' -import { SortDefinition } from 'dvc/src/experiments/model/sortBy' import { Experiment, Column } from 'dvc/src/experiments/webview/contract' import { HeaderGroup } from 'react-table' import { TableHeader } from './TableHeader' @@ -14,8 +13,6 @@ import { export const MergedHeaderGroups: React.FC<{ headerGroup: HeaderGroup columns: HeaderGroup[] - sorts: SortDefinition[] - filters: string[] orderedColumns: Column[] onDragUpdate: OnDragOver onDragStart: OnDragStart @@ -25,8 +22,6 @@ export const MergedHeaderGroups: React.FC<{ root: HTMLElement | null }> = ({ headerGroup, - sorts, - filters, columns, orderedColumns, onDragUpdate, @@ -50,8 +45,6 @@ export const MergedHeaderGroups: React.FC<{ orderedColumns={orderedColumns} column={column} columns={columns} - sorts={sorts} - filters={filters} onDragOver={onDragUpdate} onDragStart={onDragStart} onDrop={onDragEnd} diff --git a/webview/src/experiments/components/table/Row.tsx b/webview/src/experiments/components/table/Row.tsx index 573109f52c..3c5c4004f3 100644 --- a/webview/src/experiments/components/table/Row.tsx +++ b/webview/src/experiments/components/table/Row.tsx @@ -1,8 +1,9 @@ import React from 'react' +import { useSelector } from 'react-redux' import cx from 'classnames' import { Experiment } from 'dvc/src/experiments/webview/contract' import { MessageFromWebviewType } from 'dvc/src/webview/contract' -import { RowProp, WithChanges } from './interfaces' +import { RowProp } from './interfaces' import styles from './styles.module.scss' import { FirstCell, CellWrapper } from './Cell' import { RowSelectionContext } from './RowSelectionContext' @@ -12,6 +13,7 @@ import { MessagesMenu } from '../../../shared/components/messagesMenu/MessagesMe import { MessagesMenuOptionProps } from '../../../shared/components/messagesMenu/MessagesMenuOption' import { HandlerFunc } from '../../../util/props' import { cond } from '../../../util/helpers' +import { ExperimentsState } from '../../store' const getExperimentTypeClass = ({ running, queued, selected }: Experiment) => { if (running) { @@ -311,16 +313,18 @@ export type BatchSelectionProp = { } export const RowContent: React.FC< - RowProp & { className?: string } & WithChanges & BatchSelectionProp + RowProp & { className?: string } & BatchSelectionProp > = ({ row, className, - changes, contextMenuDisabled, projectHasCheckpoints, hasRunningExperiment, batchRowSelection }): JSX.Element => { + const changes = useSelector( + (state: ExperimentsState) => state.tableData.changes + ) const { getRowProps, cells: [firstCell, ...cells], diff --git a/webview/src/experiments/components/table/Table.test.tsx b/webview/src/experiments/components/table/Table.test.tsx index 26b949a319..1217ed6cef 100644 --- a/webview/src/experiments/components/table/Table.test.tsx +++ b/webview/src/experiments/components/table/Table.test.tsx @@ -126,17 +126,27 @@ describe('Table', () => { const renderTable = (testData = {}, tableInstance = instance) => { const tableData = { ...dummyTableData, ...testData } return render( - -
+ +
) } const renderExperimentsTable = ( - data: TableData = sortingTableDataFixture + tableData: TableData = sortingTableDataFixture ) => { return render( - - + + , { queries: { ...queries, ...customQueries } @@ -347,8 +357,13 @@ describe('Table', () => { columnWidths } render( - - + + ) const [experimentColumnResizeHandle] = await screen.findAllByRole( diff --git a/webview/src/experiments/components/table/Table.tsx b/webview/src/experiments/components/table/Table.tsx index bcaea09426..c2c8ac45b6 100644 --- a/webview/src/experiments/components/table/Table.tsx +++ b/webview/src/experiments/components/table/Table.tsx @@ -1,11 +1,13 @@ import React, { useRef, useState } from 'react' +import { useSelector } from 'react-redux' import cx from 'classnames' import styles from './styles.module.scss' import { TableHead } from './TableHead' import { BatchSelectionProp, RowContent } from './Row' -import { InstanceProp, RowProp, TableProps, WithChanges } from './interfaces' +import { InstanceProp, RowProp } from './interfaces' import { RowSelectionContext } from './RowSelectionContext' import { useClickOutside } from '../../../shared/hooks/useClickOutside' +import { ExperimentsState } from '../../store' export const NestedRow: React.FC< RowProp & InstanceProp & BatchSelectionProp @@ -73,11 +75,10 @@ export const ExperimentGroup: React.FC< } export const TableBody: React.FC< - RowProp & InstanceProp & WithChanges & BatchSelectionProp + RowProp & InstanceProp & BatchSelectionProp > = ({ row, instance, - changes, contextMenuDisabled, projectHasCheckpoints, hasRunningExperiment, @@ -100,7 +101,6 @@ export const TableBody: React.FC< row={row} projectHasCheckpoints={projectHasCheckpoints} hasRunningExperiment={hasRunningExperiment} - changes={changes} contextMenuDisabled={contextMenuDisabled} batchRowSelection={batchRowSelection} /> @@ -120,20 +120,14 @@ export const TableBody: React.FC< ) } -export const Table: React.FC = ({ - instance, - tableData -}) => { +export const Table: React.FC = ({ instance }) => { const { getTableProps, rows, flatRows } = instance - const { - filters, - sorts, - columns, - changes, - hasCheckpoints, - hasRunningExperiment, - filteredCounts - } = tableData + const hasCheckpoints = useSelector( + (state: ExperimentsState) => state.tableData.hasCheckpoints + ) + const hasRunningExperiment = useSelector( + (state: ExperimentsState) => state.tableData.hasRunningExperiment + ) const { clearSelectedRows, batchSelection, lastSelectedRow } = React.useContext(RowSelectionContext) @@ -196,10 +190,6 @@ export const Table: React.FC = ({ > @@ -208,7 +198,6 @@ export const Table: React.FC = ({ row={row} instance={instance} key={row.id} - changes={changes} hasRunningExperiment={hasRunningExperiment} projectHasCheckpoints={hasCheckpoints} batchRowSelection={batchRowSelection} diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/TableHead.tsx index bdd293e3f7..36b947e871 100644 --- a/webview/src/experiments/components/table/TableHead.tsx +++ b/webview/src/experiments/components/table/TableHead.tsx @@ -1,15 +1,15 @@ -import { SortDefinition } from 'dvc/src/experiments/model/sortBy' -import { Experiment, Column } from 'dvc/src/experiments/webview/contract' +import { Experiment } from 'dvc/src/experiments/webview/contract' import cx from 'classnames' import React, { useRef } from 'react' +import { useSelector } from 'react-redux' import { HeaderGroup, TableInstance } from 'react-table' import { MessageFromWebviewType } from 'dvc/src/webview/contract' -import { FilteredCounts } from 'dvc/src/experiments/model/filterBy/collect' import { useInView } from 'react-intersection-observer' import styles from './styles.module.scss' import { MergedHeaderGroups } from './MergeHeaderGroups' import { Indicators } from './Indicators' import { useColumnOrder } from '../../hooks/useColumnOrder' +import { ExperimentsState } from '../../store' import { sendMessage } from '../../../shared/vscode' import { leafColumnIds, reorderColumnIds } from '../../util/columns' import { @@ -17,13 +17,8 @@ import { OnDragStart } from '../../../shared/components/dragDrop/DragDropWorkbench' import { getSelectedForPlotsCount } from '../../util/rows' - interface TableHeadProps { instance: TableInstance - columns: Column[] - sorts: SortDefinition[] - filteredCounts: FilteredCounts - filters: string[] root: HTMLElement | null setExpColumnNeedsShadow: (needsShadow: boolean) => void } @@ -37,12 +32,11 @@ export const TableHead = ({ rows }, root, - filteredCounts, - filters, - columns, - sorts, setExpColumnNeedsShadow }: TableHeadProps) => { + const columns = useSelector( + (state: ExperimentsState) => state.tableData.columns + ) const orderedColumns = useColumnOrder(columns, columnOrder) const allHeaders: HeaderGroup[] = [] for (const headerGroup of headerGroups) { @@ -108,12 +102,7 @@ export const TableHead = ({ className={cx(styles.thead, needsShadow && styles.headWithShadow)} ref={ref} > - + {headerGroups.map(headerGroup => ( // eslint-disable-next-line react/jsx-key columns: HeaderGroup[] - sorts: SortDefinition[] - filters: string[] orderedColumns: Column[] onDragOver: OnDragOver onDragStart: OnDragStart @@ -305,8 +304,6 @@ interface TableHeaderProps { export const TableHeader: React.FC = ({ column, columns, - filters, - sorts, orderedColumns, onDragOver, onDragStart, @@ -315,6 +312,9 @@ export const TableHeader: React.FC = ({ firstExpColumnCellId, setExpColumnNeedsShadow }) => { + const { filters, sorts } = useSelector( + (state: ExperimentsState) => state.tableData + ) const baseColumn = column.placeholderOf || column const sort = sorts.find(sort => sort.path === baseColumn.id) diff --git a/webview/src/experiments/components/table/headersSlice.ts b/webview/src/experiments/components/table/headersSlice.ts new file mode 100644 index 0000000000..f1f85cb238 --- /dev/null +++ b/webview/src/experiments/components/table/headersSlice.ts @@ -0,0 +1,17 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' +import { Experiment } from 'dvc/src/experiments/webview/contract' +import { HeaderGroup } from 'react-table' + +export const headersSlice = createSlice({ + initialState: [] as HeaderGroup[], + name: 'headers', + reducers: { + setHeaders: (_, action: PayloadAction[]>) => { + return action.payload || [] + } + } +}) + +export const { setHeaders } = headersSlice.actions + +export default headersSlice.reducer diff --git a/webview/src/experiments/components/table/interfaces.ts b/webview/src/experiments/components/table/interfaces.ts index 8dc2626d3e..42b8ec141d 100644 --- a/webview/src/experiments/components/table/interfaces.ts +++ b/webview/src/experiments/components/table/interfaces.ts @@ -1,18 +1,10 @@ -import { Experiment, TableData } from 'dvc/src/experiments/webview/contract' +import { Experiment } from 'dvc/src/experiments/webview/contract' import { Cell, Row, TableInstance } from 'react-table' export interface InstanceProp { instance: TableInstance } -export interface TableProps extends InstanceProp { - tableData: TableData -} - -export interface WithChanges { - changes?: string[] -} - export interface RowProp { row: Row contextMenuDisabled?: boolean diff --git a/webview/src/experiments/components/table/tableDataSlice.ts b/webview/src/experiments/components/table/tableDataSlice.ts new file mode 100644 index 0000000000..953b1456a5 --- /dev/null +++ b/webview/src/experiments/components/table/tableDataSlice.ts @@ -0,0 +1,45 @@ +import { createSlice, PayloadAction } from '@reduxjs/toolkit' +import { TableData } from 'dvc/src/experiments/webview/contract' + +export interface TableDataState extends TableData { + hasData?: boolean +} + +export const tableDataInitialState: TableDataState = { + changes: [], + columnOrder: [], + columnWidths: {}, + columns: [], + filteredCounts: { + checkpoints: 0, + experiments: 0 + }, + filters: [], + hasCheckpoints: false, + hasColumns: false, + hasData: false, + hasRunningExperiment: false, + rows: [], + sorts: [] +} + +export const tableDataSlice = createSlice({ + initialState: tableDataInitialState, + name: 'tableData', + reducers: { + update: (state, action: PayloadAction) => { + if (action.payload) { + return { + ...state, + ...action.payload, + hasData: true + } + } + return tableDataInitialState + } + } +}) + +export const { update } = tableDataSlice.actions + +export default tableDataSlice.reducer diff --git a/webview/src/experiments/store.ts b/webview/src/experiments/store.ts index 933f4dacb2..754b48e041 100644 --- a/webview/src/experiments/store.ts +++ b/webview/src/experiments/store.ts @@ -1,8 +1,12 @@ import { configureStore } from '@reduxjs/toolkit' +import tableDataReducer from './components/table/tableDataSlice' +import headersReducer from './components/table/headersSlice' import dragAndDropReducer from '../shared/components/dragDrop/dragDropSlice' export const experimentsReducers = { - dragAndDrop: dragAndDropReducer + dragAndDrop: dragAndDropReducer, + headers: headersReducer, + tableData: tableDataReducer } export const experimentsStore = configureStore({ diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 1a6fcdd718..3b341eec53 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -1,11 +1,9 @@ import { configureStore } from '@reduxjs/toolkit' import React from 'react' import { Provider } from 'react-redux' -import { ComponentStory } from '@storybook/react' -import { Meta } from '@storybook/react/types-6-0' +import { Meta, Story } from '@storybook/react/types-6-0' import rowsFixture from 'dvc/src/test/fixtures/expShow/rows' import columnsFixture from 'dvc/src/test/fixtures/expShow/columns' -import { TableData } from 'dvc/src/experiments/webview/contract' import workspaceChangesFixture from 'dvc/src/test/fixtures/expShow/workspaceChanges' import deeplyNestedTableData from 'dvc/src/test/fixtures/expShow/deeplyNested' import { dataTypesTableData } from 'dvc/src/test/fixtures/expShow/dataTypes' @@ -25,8 +23,9 @@ import { setExperimentsAsStarred } from '../test/tableDataFixture' import { experimentsReducers } from '../experiments/store' +import { TableDataState } from '../experiments/components/table/tableDataSlice' -const tableData: TableData = { +const tableData: TableDataState = { changes: workspaceChangesFixture, columnOrder: [], columnWidths: { @@ -37,6 +36,7 @@ const tableData: TableData = { filters: ['params:params.yaml:lr'], hasCheckpoints: true, hasColumns: true, + hasData: true, hasRunningExperiment: true, rows: rowsFixture.map(row => ({ ...row, @@ -102,10 +102,15 @@ export default { title: 'Table' } as Meta -const Template: ComponentStory = ({ tableData }) => { +const Template: Story<{ tableData: TableDataState }> = ({ tableData }) => { return ( - - + + ) } @@ -167,7 +172,7 @@ WithContextMenuNoCheckpoints.args = { WithContextMenuNoCheckpoints.play = contextMenuPlay export const WithAllDataTypes = Template.bind({}) -WithAllDataTypes.args = { tableData: dataTypesTableData } +WithAllDataTypes.args = { tableData: { ...dataTypesTableData, hasData: true } } WithAllDataTypes.play = async ({ canvasElement }) => { const falseCell = await within(canvasElement).findByText('false') userEvent.hover(falseCell, { bubbles: true }) @@ -177,7 +182,9 @@ WithAllDataTypes.parameters = { } export const WithDeeplyNestedHeaders = Template.bind({}) -WithDeeplyNestedHeaders.args = { tableData: deeplyNestedTableData } +WithDeeplyNestedHeaders.args = { + tableData: { ...deeplyNestedTableData, hasData: true } +} export const LoadingData = Template.bind({}) LoadingData.args = { tableData: undefined } @@ -201,11 +208,18 @@ WithNoSortsOrFilters.args = { } } -export const Scrolled: ComponentStory = ({ tableData }) => { +export const Scrolled: Story<{ tableData: TableDataState }> = ({ + tableData +}) => { return ( - +
- +
) diff --git a/webview/src/test/experimentsTable.tsx b/webview/src/test/experimentsTable.tsx index e97a90bd52..6372b4512e 100644 --- a/webview/src/test/experimentsTable.tsx +++ b/webview/src/test/experimentsTable.tsx @@ -28,7 +28,7 @@ export const setTableData = (data = tableDataFixture) => { ) } -export const renderTable = (data = tableDataFixture) => { +export const renderTable = (data = tableDataFixture, noData?: boolean) => { const renderedTable = render( @@ -37,7 +37,7 @@ export const renderTable = (data = tableDataFixture) => { queries: { ...queries, ...customQueries } } ) - setTableData(data) + !noData && setTableData(data) return renderedTable }