Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FE: Refactor NewTable Types #141

Merged
merged 2 commits into from
Feb 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion frontend/.eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@
"react/function-component-definition": [
2,
{
"namedComponents": "arrow-function",
"namedComponents": ["arrow-function", "function-declaration"],
"unnamedComponents": "arrow-function"
}
],
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/components/ACLPage/List/List.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { ColumnDef } from '@tanstack/react-table';
import { ColumnDef, Row } from '@tanstack/react-table';
import { useTheme } from 'styled-components';
import PageHeading from 'components/common/PageHeading/PageHeading';
import Table from 'components/common/NewTable';
Expand Down Expand Up @@ -130,9 +130,9 @@ const ACList: React.FC = () => {
[rowId]
);

const onRowHover = (value: unknown) => {
if (value && typeof value === 'object' && 'id' in value) {
setRowId(value.id as string);
const onRowHover = (value: Row<KafkaAcl>) => {
if (value) {
setRowId(value.id);
}
};

Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/Connect/Details/Tasks/Tasks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,11 @@ const Tasks: React.FC = () => {
data={data}
emptyMessage="No tasks found"
enableSorting
getRowCanExpand={(row) => row.original.status.trace?.length > 0}
getRowCanExpand={(row) => {
const { trace } = row.original.status;
if (trace === undefined) return false;
return trace.length > 0;
}}
renderSubComponent={ExpandedTaskRow}
/>
);
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ConsumerGroups/List.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PageHeading from 'components/common/PageHeading/PageHeading';
import Search from 'components/common/Search/Search';
import { ControlPanelWrapper } from 'components/common/ControlPanel/ControlPanel.styled';
import {
ConsumerGroupDetails,
ConsumerGroup,
ConsumerGroupOrdering,
ConsumerGroupState,
SortOrder,
Expand Down Expand Up @@ -33,7 +33,7 @@ const List = () => {
search: searchParams.get('q') || '',
});

const columns = React.useMemo<ColumnDef<ConsumerGroupDetails>[]>(
const columns = React.useMemo<ColumnDef<ConsumerGroup>[]>(
() => [
{
id: ConsumerGroupOrdering.NAME,
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/common/NewTable/ExpanderCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';

import * as S from './Table.styled';

const ExpanderCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => {
function ExpanderCell<T, V = unknown>({ row }: CellContext<T, V>) {
return (
<S.ExpaderButton
width="16"
Expand Down Expand Up @@ -31,6 +31,6 @@ const ExpanderCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => {
)}
</S.ExpaderButton>
);
};
}

export default ExpanderCell;
18 changes: 10 additions & 8 deletions frontend/src/components/common/NewTable/SelectRowCell.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import { CellContext } from '@tanstack/react-table';
import React from 'react';
import IndeterminateCheckbox from 'components/common/IndeterminateCheckbox/IndeterminateCheckbox';

const SelectRowCell: React.FC<CellContext<unknown, unknown>> = ({ row }) => (
<IndeterminateCheckbox
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
function SelectRowCell<T, V = unknown>({ row }: CellContext<T, V>) {
return (
<IndeterminateCheckbox
checked={row.getIsSelected()}
disabled={!row.getCanSelect()}
indeterminate={row.getIsSomeSelected()}
onChange={row.getToggleSelectedHandler()}
/>
);
}

export default SelectRowCell;
20 changes: 10 additions & 10 deletions frontend/src/components/common/NewTable/SelectRowHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import { HeaderContext } from '@tanstack/react-table';
import React from 'react';
import IndeterminateCheckbox from 'components/common/IndeterminateCheckbox/IndeterminateCheckbox';
import { HeaderContext } from '@tanstack/react-table';

const SelectRowHeader: React.FC<HeaderContext<unknown, unknown>> = ({
table,
}) => (
<IndeterminateCheckbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
);
function SelectRowHeader<T, V = unknown>({ table }: HeaderContext<T, V>) {
return (
<IndeterminateCheckbox
checked={table.getIsAllRowsSelected()}
indeterminate={table.getIsSomeRowsSelected()}
onChange={table.getToggleAllRowsSelectedHandler()}
/>
);
}

export default SelectRowHeader;
41 changes: 23 additions & 18 deletions frontend/src/components/common/NewTable/Table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@ import ExpanderCell from './ExpanderCell';
import SelectRowCell from './SelectRowCell';
import SelectRowHeader from './SelectRowHeader';

export interface TableProps<TData> {
export interface TableProps<TData, TValue> {
data: TData[];
pageCount?: number;
columns: ColumnDef<TData>[];
columns: ColumnDef<TData, TValue>[];

// Server-side processing: sorting, pagination
serverSideProcessing?: boolean;

// Expandeble rows
// Expandable rows
getRowCanExpand?: (row: Row<TData>) => boolean; // Enables the ability to expand row. Use `() => true` when want to expand all rows.
renderSubComponent?: React.FC<{ row: Row<TData> }>; // Component to render expanded row.

Expand All @@ -56,7 +56,7 @@ export interface TableProps<TData> {
onRowHover?: (row: Row<TData>) => void;
onMouseLeave?: () => void;

setRowId?: (originalRow: Row<TData>) => string;
setRowId?: (originalRow: TData) => string;
}

type UpdaterFn<T> = (previousState: T) => T;
Expand Down Expand Up @@ -118,8 +118,7 @@ const getSortingFromSearchParams = (searchParams: URLSearchParams) => {
* - use URLSearchParams to get the pagination and sorting state from the url for your server side processing.
*/

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Table: React.FC<TableProps<any>> = ({
function Table<TData, TValue = unknown>({
data,
pageCount,
columns,
Expand All @@ -135,7 +134,7 @@ const Table: React.FC<TableProps<any>> = ({
onRowHover,
onMouseLeave,
setRowId,
}) => {
}: TableProps<TData, TValue>) {
const [searchParams, setSearchParams] = useSearchParams();
const location = useLocation();
const [rowSelection, setRowSelection] = React.useState({});
Expand All @@ -157,7 +156,7 @@ const Table: React.FC<TableProps<any>> = ({
[searchParams, location]
);

const table = useReactTable({
const table = useReactTable<TData>({
data,
pageCount,
columns,
Expand All @@ -167,10 +166,16 @@ const Table: React.FC<TableProps<any>> = ({
rowSelection,
},
getRowId: (originalRow, index) => {
return (
setRowId?.(originalRow) ||
(originalRow.name ? originalRow.name : `${index}`)
);
if (setRowId) {
return setRowId(originalRow);
}

// eslint-disable-next-line @typescript-eslint/ban-types
if ('name' in (originalRow as {})) {
return (originalRow as unknown as { name: string }).name;
}

return index.toString();
},
onSortingChange: onSortingChange as OnChangeFn<SortingState>,
onPaginationChange: onPaginationChange as OnChangeFn<PaginationState>,
Expand All @@ -187,7 +192,7 @@ const Table: React.FC<TableProps<any>> = ({
enableRowSelection,
});

const handleRowClick = (row: Row<typeof data>) => (e: React.MouseEvent) => {
const handleRowClick = (row: Row<TData>) => (e: React.MouseEvent) => {
// If row selection is enabled do not handle row click.
if (enableRowSelection) return undefined;

Expand All @@ -205,7 +210,7 @@ const Table: React.FC<TableProps<any>> = ({
return undefined;
};

const handleRowHover = (row: Row<typeof data>) => (e: React.MouseEvent) => {
const handleRowHover = (row: Row<TData>) => (e: React.MouseEvent) => {
if (onRowHover) {
e.stopPropagation();
return onRowHover(row);
Expand Down Expand Up @@ -238,7 +243,7 @@ const Table: React.FC<TableProps<any>> = ({
{!!enableRowSelection && (
<S.Th key={`${headerGroup.id}-select`}>
{flexRender(
SelectRowHeader,
SelectRowHeader<TData>,
headerGroup.headers[0].getContext()
)}
</S.Th>
Expand Down Expand Up @@ -287,15 +292,15 @@ const Table: React.FC<TableProps<any>> = ({
{!!enableRowSelection && (
<td key={`${row.id}-select`} style={{ width: '1px' }}>
{flexRender(
SelectRowCell,
SelectRowCell<TData>,
row.getVisibleCells()[0].getContext()
)}
</td>
)}
{table.getCanSomeRowsExpand() && (
<td key={`${row.id}-expander`} style={{ width: '1px' }}>
{flexRender(
ExpanderCell,
ExpanderCell<TData>,
row.getVisibleCells()[0].getContext()
)}
</td>
Expand Down Expand Up @@ -397,6 +402,6 @@ const Table: React.FC<TableProps<any>> = ({
)}
</>
);
};
}

export default Table;
Loading