9213044063

Committed 14 May 2024 07:24AM UTC coverage: 94.07% (-0.3%) from 94.345%

Build # 9213044063

Build Type

push

github

Committed by

web-flow

Commit Message

#171 Make applications tables responsive (#180)

Run Details

758 of 892 branches covered (84.98%)

Branch coverage included in aggregate %.

338 of 378 new or added lines in 6 files covered. (89.42%)

4 existing lines in 2 files now uncovered.

8363 of 8804 relevant lines covered (94.99%)

55.77 hits per line

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

73.27

/apps/web/src/components/applications/applicationsTable.tsx

"use client";

import {
    Loader,
    Table,
    Text,
    Transition,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import { FC, useRef } from "react";
import { ApplicationItemFragment } from "../../graphql/explorer/operations";
import { Application } from "../../graphql/explorer/types";
import ApplicationRow from "./applicationRow";
import { useElementVisibility } from "../../hooks/useElementVisibility";
import TableResponsiveWrapper from "../tableResponsiveWrapper";

export interface ApplicationsTableProps {
    applications: ApplicationItemFragment[];
    fetching: boolean;
    totalCount: number;
}

const ApplicationsTable: FC<ApplicationsTableProps> = (props) => {
    const { applications, fetching, totalCount } = 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" }}>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>Id</Table.Th>
                        <Table.Th>Owner</Table.Th>
                        <Table.Th>URL</Table.Th>
                        <Table.Th ref={childrenRef}>Data</Table.Th>
                        <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))",
                                    }}
                                >
                                    Data
                                </th>
                            )}
                        </Transition>
                    </Table.Tr>
                </Table.Thead>
                <Table.Tbody>
                    {fetching ? (
                        <Table.Tr>
                            <Table.Td align="center" colSpan={4}>
                                <Loader />
                            </Table.Td>
                        </Table.Tr>
                    ) : (
                        totalCount === 0 && (
                            <Table.Tr>
                                <Table.Td colSpan={4} align="center">
                                    <Text fw={700}>No applications</Text>
                                </Table.Td>
                            </Table.Tr>
                        )
                    )}
                    {applications.map((application) => (
                        <ApplicationRow
                            key={application.id}
                            application={
                                application as Omit<Application, "inputs">
                            }
                            keepDataColVisible={!isVisible}
                        />
                    ))}
                </Table.Tbody>
            </Table>
        </TableResponsiveWrapper>
    );
};

export default ApplicationsTable;

1	"use client";	1✔
2		1✔
3	import {	1✔
4	Loader,	1✔
5	Table,	1✔
6	Text,	1✔
7	Transition,	1✔
8	useMantineColorScheme,	1✔
9	useMantineTheme,	1✔
10	} from "@mantine/core";	1✔
11	import { FC, useRef } from "react";	1✔
12	import { ApplicationItemFragment } from "../../graphql/explorer/operations";	1✔
13	import { Application } from "../../graphql/explorer/types";	1✔
14	import ApplicationRow from "./applicationRow";	1✔
15	import { useElementVisibility } from "../../hooks/useElementVisibility";	1✔
16	import TableResponsiveWrapper from "../tableResponsiveWrapper";	1✔
17		1✔
18	export interface ApplicationsTableProps {	1✔
19	applications: ApplicationItemFragment[];	1✔
20	fetching: boolean;	1✔
21	totalCount: number;	1✔
22	}	1✔
23		1✔
24	const ApplicationsTable: FC<ApplicationsTableProps> = (props) => {	1✔
25	const { applications, fetching, totalCount } = props;	5✔
26	const tableRowRef = useRef<HTMLDivElement>(null);	5✔
27	const theme = useMantineTheme();	5✔
28	const { colorScheme } = useMantineColorScheme();	5✔
29	const bgColor = colorScheme === "dark" ? theme.colors.dark[7] : theme.white;	5!
30	const { childrenRef, isVisible } = useElementVisibility({	5✔
31	element: tableRowRef,	5✔
32	});	5✔
33		5✔
34	return (	5✔
35	<TableResponsiveWrapper ref={tableRowRef}>	5✔
36	<Table width={"100%"} style={{ borderCollapse: "collapse" }}>	5✔
37	<Table.Thead>	5✔
38	<Table.Tr>	5✔
39	<Table.Th>Id</Table.Th>	5✔
40	<Table.Th>Owner</Table.Th>	5✔
41	<Table.Th>URL</Table.Th>	5✔
42	<Table.Th ref={childrenRef}>Data</Table.Th>	5✔
43	<Transition	5✔
44	mounted={isVisible}	5✔
45	transition="scale-x"	5✔
46	duration={500}	5✔
47	timingFunction="ease-out"	5✔
48	>	5✔
49	{(styles) => (	5✔
NEW 50	<th	×
NEW 51	style={{	×
NEW 52	...styles,	×
NEW 53	position: "sticky",	×
NEW 54	top: 0,	×
NEW 55	right: 0,	×
NEW 56	backgroundColor: bgColor,	×
NEW 57	padding:	×
NEW 58	"var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-lg))",	×
NEW 59	}}	×
NEW 60	>	×
NEW 61	Data	×
NEW 62	</th>	×
63	)}	5✔
64	</Transition>	5✔
65	</Table.Tr>	5✔
66	</Table.Thead>	5✔
67	<Table.Tbody>	5✔
68	{fetching ? (	5!
UNCOV 69	<Table.Tr>	×
NEW 70	<Table.Td align="center" colSpan={4}>	×
NEW 71	<Loader />	×
UNCOV 72	</Table.Td>	×
UNCOV 73	</Table.Tr>	×
74	) : (	5✔
75	totalCount === 0 && (	5✔
76	<Table.Tr>	5✔
77	<Table.Td colSpan={4} align="center">	5✔
78	<Text fw={700}>No applications</Text>	5✔
79	</Table.Td>	5✔
80	</Table.Tr>	5✔
81	)	5✔
82	)}	5✔
83	{applications.map((application) => (	5✔
NEW 84	<ApplicationRow	×
NEW 85	key={application.id}	×
NEW 86	application={	×
NEW 87	application as Omit<Application, "inputs">	×
NEW 88	}	×
NEW 89	keepDataColVisible={!isVisible}	×
NEW 90	/>	×
91	))}	5✔
92	</Table.Tbody>	5✔
93	</Table>	5✔
94	</TableResponsiveWrapper>	5✔
95	);	5✔
96	};	5✔
97		1✔
98	export default ApplicationsTable;	1✔

cartesi / rollups-explorer / 9213044063

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