10317825307

Committed 09 Aug 2024 10:34AM CUT coverage: 93.674% (-0.05%) from 93.722%

Build # 10317825307

Build Type

Pull #223

github

Committed by

nevendyulgerov

Commit Message

chore(packages/ui): Revert change

Pull Request Pull Request #223: #220 Upgrade mantine packages

Run Details

1147 of 1362 branches covered (84.21%)

Branch coverage included in aggregate %.

18 of 18 new or added lines in 4 files covered. (100.0%)

9 existing lines in 1 file now uncovered.

12403 of 13103 relevant lines covered (94.66%)

39.54 hits per line

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

69.75

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

import {
    Button,
    Loader,
    Table,
    Text,
    Transition,
    useMantineColorScheme,
    useMantineTheme,
} from "@mantine/core";
import { FC, useCallback, useRef, useState } from "react";
import { Application } from "../../graphql/explorer/types";
import { ApplicationsTableProps } from "./applicationsTable";
import UserApplicationsRow from "./userApplicationsRow";
import { useElementVisibility } from "../../hooks/useElementVisibility";
import TableResponsiveWrapper from "../tableResponsiveWrapper";

interface UserApplicationsTableProps extends ApplicationsTableProps {
    noResultsMessage?: string;
}

const UserApplicationsTable: FC<UserApplicationsTableProps> = (props) => {
    const {
        applications,
        fetching,
        totalCount,
        noResultsMessage = "No applications",
    } = 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,
    });
    const [timeType, setTimeType] = useState<"timestamp" | "age">("age");

    const onChangeTimeColumnType = useCallback(() => {
        setTimeType((timeType) => (timeType === "age" ? "timestamp" : "age"));
    }, []);

    return (
        <TableResponsiveWrapper ref={tableRowRef}>
            <Table width={"100%"} style={{ borderCollapse: "collapse" }}>
                <Table.Thead>
                    <Table.Tr>
                        <Table.Th>Id</Table.Th>
                        <Table.Th>URL</Table.Th>
                        <Table.Th>
                            <Button
                                variant="transparent"
                                px={0}
                                onClick={onChangeTimeColumnType}
                            >
                                {timeType === "age" ? "Age" : "Timestamp (UTC)"}
                            </Button>
                        </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}>{noResultsMessage}</Text>
                                </Table.Td>
                            </Table.Tr>
                        )
                    )}
                    {applications.map((application) => (
                        <UserApplicationsRow
                            key={application.id}
                            application={
                                application as Omit<Application, "inputs">
                            }
                            timeType={timeType}
                            keepDataColVisible={!isVisible}
                        />
                    ))}
                </Table.Tbody>
            </Table>
        </TableResponsiveWrapper>
    );
};

export default UserApplicationsTable;

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

cartesi / rollups-explorer / 10317825307

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