9845513416

Committed 08 Jul 2024 07:09PM UTC coverage: 93.083% (-1.1%) from 94.209%

Build # 9845513416

Build Type

Pull #206

github

Committed by

nevendyulgerov

Commit Message

feat(apps/web): Use responsive table component for applications table

Pull Request Pull Request #206: #178 Create responsive table component

Run Details

804 of 942 branches covered (85.35%)

Branch coverage included in aggregate %.

158 of 312 new or added lines in 2 files covered. (50.64%)

2 existing lines in 1 file now uncovered.

8912 of 9496 relevant lines covered (93.85%)

52.9 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

68.15

/apps/web/src/components/responsiveTable.tsx

import React, { Fragment, PropsWithChildren, ReactNode, useRef } from "react";
import {
    Loader,
    Paper,
    Table,
    Text,
    Transition,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import TableResponsiveWrapper from "./tableResponsiveWrapper";
import { useElementVisibility } from "../hooks/useElementVisibility";

export interface Column<T> {
    key: string;
    label: ReactNode;
    sticky?: boolean;
    render: (item: T) => ReactNode;
}

interface ResponsiveTableProps<T> {
    columns: Column<T>[];
    items: T[];
    totalCount: number;
    fetching: boolean;
    emptyLabel?: string;
}

const ResponsiveTable = <T extends { id: string | number }>(
    props: PropsWithChildren<ResponsiveTableProps<T>>,
) => {
    const {
        columns,
        items,
        totalCount,
        fetching,
        emptyLabel = "No entries found",
    } = props;
    const tableRowRef = useRef<HTMLDivElement>(null);
    const theme = useMantineTheme();
    const { colorScheme } = useMantineColorScheme();
    const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;
    const { childrenRef, isVisible } = useElementVisibility({
        element: tableRowRef,
    });

    return (
        <TableResponsiveWrapper ref={tableRowRef}>
            <Table
                width={"100%"}
                style={{ borderCollapse: "collapse" }}
                data-testid="applications-table"
            >
                <Table.Thead>
                    <Table.Tr>
                        {columns.map((column) => (
                            <Fragment key={column.key}>
                                <Table.Th
                                    ref={column.sticky ? childrenRef : null}
                                >
                                    {column.label}
                                </Table.Th>
                                {column.sticky && (
                                    <Transition
                                        mounted={isVisible}
                                        transition="scale-x"
                                        duration={500}
                                        timingFunction="ease-out"
                                    >
                                        {(styles) => (
                                            <th
                                                style={{
                                                    ...styles,
                                                    position: "sticky",
                                                    top: 0,
                                                    right: 0,
                                                    backgroundColor: bgColor,
                                                    padding:
                                                        "var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",
                                                }}
                                            >
                                                {column.label}
                                            </th>
                                        )}
                                    </Transition>
                                )}
                            </Fragment>
                        ))}
                    </Table.Tr>
                </Table.Thead>

                <Table.Tbody>
                    {fetching ? (
                        <Table.Tr>
                            <Table.Td align="center" colSpan={columns.length}>
                                <Loader data-testid="table-spinner" />
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        totalCount === 0 && (
                            <Table.Tr>
                                <Table.Td
                                    colSpan={columns.length}
                                    align="center"
                                >
                                    <Text fw={700}>{emptyLabel}</Text>
                                </Table.Td>
                            </Table.Tr>
                        )
                    )}

                    {items.map((item) => (
                        <Table.Tr key={item.id}>
                            {columns.map((column) => (
                                <Fragment key={`${item.id}-${column.key}`}>
                                    {column.sticky ? (
                                        <Table.Td
                                            pos={
                                                isVisible ? "sticky" : "initial"
                                            }
                                            top={0}
                                            right={0}
                                            p={0}
                                        >
                                            <Paper
                                                shadow={
                                                    isVisible ? "xl" : undefined
                                                }
                                                radius={0}
                                                p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"
                                            >
                                                {column.render(item)}
                                            </Paper>
                                        </Table.Td>
                                    ) : (
                                        <Table.Td>
                                            {column.render(item)}
                                        </Table.Td>
                                    )}
                                </Fragment>
                            ))}
                        </Table.Tr>
                    ))}
                </Table.Tbody>
            </Table>
        </TableResponsiveWrapper>
    );
};

export default ResponsiveTable;

1	import React, { Fragment, PropsWithChildren, ReactNode, useRef } from "react";	1✔
2	import {	1✔
3	Loader,	1✔
4	Paper,	1✔
5	Table,	1✔
6	Text,	1✔
7	Transition,	1✔
8	useMantineColorScheme,	1✔
9	useMantineTheme,	1✔
10	} from "@mantine/core";	1✔
11	import TableResponsiveWrapper from "./tableResponsiveWrapper";	1✔
12	import { useElementVisibility } from "../hooks/useElementVisibility";	1✔
13		1✔
14	export interface Column<T> {	1✔
15	key: string;	1✔
16	label: ReactNode;	1✔
17	sticky?: boolean;	1✔
18	render: (item: T) => ReactNode;	1✔
19	}	1✔
20		1✔
21	interface ResponsiveTableProps<T> {	1✔
22	columns: Column<T>[];	1✔
23	items: T[];	1✔
24	totalCount: number;	1✔
25	fetching: boolean;	1✔
26	emptyLabel?: string;	1✔
27	}	1✔
28		1✔
29	const ResponsiveTable = <T extends { id: string \| number }>(	1✔
30	props: PropsWithChildren<ResponsiveTableProps<T>>,	5✔
31	) => {	5✔
32	const {	5✔
33	columns,	5✔
34	items,	5✔
35	totalCount,	5✔
36	fetching,	5✔
37	emptyLabel = "No entries found",	5✔
38	} = props;	5✔
39	const tableRowRef = useRef<HTMLDivElement>(null);	5✔
40	const theme = useMantineTheme();	5✔
41	const { colorScheme } = useMantineColorScheme();	5✔
42	const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;	5!
43	const { childrenRef, isVisible } = useElementVisibility({	5✔
44	element: tableRowRef,	5✔
45	});	5✔
46		5✔
47	return (	5✔
48	<TableResponsiveWrapper ref={tableRowRef}>	5✔
49	<Table	5✔
50	width={"100%"}	5✔
51	style={{ borderCollapse: "collapse" }}	5✔
52	data-testid="applications-table"	5✔
53	>	5✔
54	<Table.Thead>	5✔
55	<Table.Tr>	5✔
56	{columns.map((column) => (	5✔
57	<Fragment key={column.key}>	20✔
58	<Table.Th	20✔
59	ref={column.sticky ? childrenRef : null}	20✔
60	>	20✔
61	{column.label}	20✔
62	</Table.Th>	20✔
63	{column.sticky && (	20✔
64	<Transition	5✔
65	mounted={isVisible}	5✔
66	transition="scale-x"	5✔
67	duration={500}	5✔
68	timingFunction="ease-out"	5✔
69	>	5✔
70	{(styles) => (	5✔
NEW 71	<th	×
NEW 72	style={{	×
NEW 73	...styles,	×
NEW 74	position: "sticky",	×
NEW 75	top: 0,	×
NEW 76	right: 0,	×
NEW 77	backgroundColor: bgColor,	×
NEW 78	padding:	×
NEW 79	"var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",	×
NEW 80	}}	×
NEW 81	>	×
NEW 82	{column.label}	×
NEW 83	</th>	×
84	)}	5✔
85	</Transition>	5✔
86	)}	20✔
87	</Fragment>	20✔
88	))}	5✔
89	</Table.Tr>	5✔
90	</Table.Thead>	5✔
91		5✔
92	<Table.Tbody>	5✔
93	{fetching ? (	5!
NEW 94	<Table.Tr>	×
NEW 95	<Table.Td align="center" colSpan={columns.length}>	×
NEW 96	<Loader data-testid="table-spinner" />	×
NEW 97	</Table.Td>	×
NEW 98	</Table.Tr>	×
99	) : (	5✔
100	totalCount === 0 && (	5✔
101	<Table.Tr>	5✔
102	<Table.Td	5✔
103	colSpan={columns.length}	5✔
104	align="center"	5✔
105	>	5✔
106	<Text fw={700}>{emptyLabel}</Text>	5✔
107	</Table.Td>	5✔
108	</Table.Tr>	5✔
109	)	5✔
110	)}	5✔
111		5✔
112	{items.map((item) => (	5✔
NEW 113	<Table.Tr key={item.id}>	×
NEW 114	{columns.map((column) => (	×
NEW 115	<Fragment key={`${item.id}-${column.key}`}>	×
NEW 116	{column.sticky ? (	×
NEW 117	<Table.Td	×
NEW 118	pos={	×
NEW 119	isVisible ? "sticky" : "initial"	×
NEW 120	}	×
NEW 121	top={0}	×
NEW 122	right={0}	×
NEW 123	p={0}	×
NEW 124	>	×
NEW 125	<Paper	×
NEW 126	shadow={	×
NEW 127	isVisible ? "xl" : undefined	×
NEW 128	}	×
NEW 129	radius={0}	×
NEW 130	p="var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs))"	×
NEW 131	>	×
NEW 132	{column.render(item)}	×
NEW 133	</Paper>	×
NEW 134	</Table.Td>	×
NEW 135	) : (	×
NEW 136	<Table.Td>	×
NEW 137	{column.render(item)}	×
NEW 138	</Table.Td>	×
NEW 139	)}	×
NEW 140	</Fragment>	×
NEW 141	))}	×
NEW 142	</Table.Tr>	×
143	))}	5✔
144	</Table.Tbody>	5✔
145	</Table>	5✔
146	</TableResponsiveWrapper>	5✔
147	);	5✔
148	};	5✔
149		1✔
150	export default ResponsiveTable;	1✔

cartesi / rollups-explorer / 9845513416

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous