10030569058

Committed 21 Jul 2024 06:42PM CUT coverage: 93.314% (-1.0%) from 94.266%

Build # 10030569058

Build Type

push

github

Committed by

web-flow

Commit Message

#178 Create responsive table component (#206)

Run Details

818 of 956 branches covered (85.56%)

Branch coverage included in aggregate %.

175 of 312 new or added lines in 2 files covered. (56.09%)

2 existing lines in 1 file now uncovered.

9022 of 9589 relevant lines covered (94.09%)

52.62 hits per line

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

40.33

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

"use client";

import { ActionIcon, Box, Group, Tooltip } from "@mantine/core";
import { FC } from "react";
import { ApplicationItemFragment } from "../../graphql/explorer/operations";
import ResponsiveTable from "../responsiveTable";
import { Address as AddressType } from "abitype/dist/types/abi";
import Address from "../address";
import {
    TbInbox,
    TbPlugConnected,
    TbPlugConnectedX,
    TbStack2,
} from "react-icons/tb";
import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
import Link from "next/link";

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

interface ColumnProps {
    application: ApplicationItemFragment;
}

const ConnectionUrlColumn: FC<ColumnProps> = ({ application }) => {
    const { getConnection } = useConnectionConfig();
    const connection = getConnection(application.id as AddressType);
    return (
        <Box
            display="flex"
            w="max-content"
            style={{
                alignItems: "center",
                justifyContent: "center",
            }}
        >
            {connection?.url ?? "N/A"}
        </Box>
    );
};

const ApplicationDataColumn: FC<ColumnProps> = ({ application }) => {
    const { hasConnection, removeConnection, showConnectionModal } =
        useConnectionConfig();
    const appId = application.id as AddressType;

    return (
        <Box
            display="flex"
            w="max-content"
            style={{
                alignItems: "center",
                justifyContent: "center",
            }}
        >
            <Group gap="xs">
                <Tooltip label="Summary">
                    <Link
                        href={`/applications/${appId}`}
                        data-testid="applications-summary-link"
                    >
                        <ActionIcon variant="default">
                            <TbStack2 />
                        </ActionIcon>
                    </Link>
                </Tooltip>
                <Tooltip label="Inputs">
                    <Link
                        href={`/applications/${appId}/inputs`}
                        data-testid="applications-link"
                    >
                        <ActionIcon variant="default">
                            <TbInbox />
                        </ActionIcon>
                    </Link>
                </Tooltip>
                {hasConnection(appId) ? (
                    <Tooltip label="Remove connection">
                        <ActionIcon
                            data-testid="remove-connection"
                            variant="default"
                            onClick={() => removeConnection(appId)}
                        >
                            <TbPlugConnectedX />
                        </ActionIcon>
                    </Tooltip>
                ) : (
                    <Tooltip label="Add a connection">
                        <ActionIcon
                            data-testid="add-connection"
                            variant="default"
                            onClick={() => showConnectionModal(appId)}
                        >
                            <TbPlugConnected />
                        </ActionIcon>
                    </Tooltip>
                )}
            </Group>
        </Box>
    );
};

const ApplicationsTable: FC<ApplicationsTableProps> = ({
    applications,
    fetching,
    totalCount,
}) => {
    return (
        <ResponsiveTable<ApplicationItemFragment>
            items={applications}
            fetching={fetching}
            totalCount={totalCount}
            columns={[
                {
                    key: "id",
                    label: "Id",
                    render: (application) => {
                        const appId = application.id as AddressType;
                        return (
                            <Box
                                display="flex"
                                w="max-content"
                                style={{
                                    alignItems: "center",
                                    justifyContent: "center",
                                }}
                            >
                                <Address value={appId} icon shorten />
                            </Box>
                        );
                    },
                },
                {
                    key: "owner",
                    label: "Owner",
                    render: (application) => (
                        <Box
                            display="flex"
                            w="max-content"
                            style={{
                                alignItems: "center",
                                justifyContent: "center",
                            }}
                        >
                            {application.owner ? (
                                <Address
                                    value={application.owner as AddressType}
                                    icon
                                    shorten
                                />
                            ) : (
                                "N/A"
                            )}
                        </Box>
                    ),
                },
                {
                    key: "url",
                    label: "URL",
                    render: (application) => (
                        <ConnectionUrlColumn application={application} />
                    ),
                },
                {
                    key: "data",
                    label: "Data",
                    sticky: true,
                    render: (application) => (
                        <ApplicationDataColumn application={application} />
                    ),
                },
            ]}
        />
    );
};

export default ApplicationsTable;

1	"use client";	1✔
2		1✔
3	import { ActionIcon, Box, Group, Tooltip } from "@mantine/core";	1✔
4	import { FC } from "react";	1✔
5	import { ApplicationItemFragment } from "../../graphql/explorer/operations";	1✔
6	import ResponsiveTable from "../responsiveTable";	1✔
7	import { Address as AddressType } from "abitype/dist/types/abi";	1✔
8	import Address from "../address";	1✔
9	import {	1✔
10	TbInbox,	1✔
11	TbPlugConnected,	1✔
12	TbPlugConnectedX,	1✔
13	TbStack2,	1✔
14	} from "react-icons/tb";	1✔
15	import { useConnectionConfig } from "../../providers/connectionConfig/hooks";	1✔
16	import Link from "next/link";	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	interface ColumnProps {	1✔
25	application: ApplicationItemFragment;	1✔
26	}	1✔
27		1✔
28	const ConnectionUrlColumn: FC<ColumnProps> = ({ application }) => {	1✔
NEW 29	const { getConnection } = useConnectionConfig();	×
NEW 30	const connection = getConnection(application.id as AddressType);	×
NEW 31	return (	×
NEW 32	<Box	×
NEW 33	display="flex"	×
NEW 34	w="max-content"	×
NEW 35	style={{	×
NEW 36	alignItems: "center",	×
NEW 37	justifyContent: "center",	×
NEW 38	}}	×
NEW 39	>	×
NEW 40	{connection?.url ?? "N/A"}	×
NEW 41	</Box>	×
NEW 42	);	×
NEW 43	};	×
44		1✔
45	const ApplicationDataColumn: FC<ColumnProps> = ({ application }) => {	1✔
NEW 46	const { hasConnection, removeConnection, showConnectionModal } =	×
NEW 47	useConnectionConfig();	×
NEW 48	const appId = application.id as AddressType;	×
NEW 49		×
NEW 50	return (	×
NEW 51	<Box	×
NEW 52	display="flex"	×
NEW 53	w="max-content"	×
NEW 54	style={{	×
NEW 55	alignItems: "center",	×
NEW 56	justifyContent: "center",	×
NEW 57	}}	×
NEW 58	>	×
NEW 59	<Group gap="xs">	×
NEW 60	<Tooltip label="Summary">	×
NEW 61	<Link	×
NEW 62	href={`/applications/${appId}`}	×
NEW 63	data-testid="applications-summary-link"	×
NEW 64	>	×
NEW 65	<ActionIcon variant="default">	×
NEW 66	<TbStack2 />	×
NEW 67	</ActionIcon>	×
NEW 68	</Link>	×
NEW 69	</Tooltip>	×
NEW 70	<Tooltip label="Inputs">	×
NEW 71	<Link	×
NEW 72	href={`/applications/${appId}/inputs`}	×
NEW 73	data-testid="applications-link"	×
NEW 74	>	×
NEW 75	<ActionIcon variant="default">	×
NEW 76	<TbInbox />	×
NEW 77	</ActionIcon>	×
NEW 78	</Link>	×
NEW 79	</Tooltip>	×
NEW 80	{hasConnection(appId) ? (	×
NEW 81	<Tooltip label="Remove connection">	×
NEW 82	<ActionIcon	×
NEW 83	data-testid="remove-connection"	×
NEW 84	variant="default"	×
NEW 85	onClick={() => removeConnection(appId)}	×
NEW 86	>	×
NEW 87	<TbPlugConnectedX />	×
NEW 88	</ActionIcon>	×
NEW 89	</Tooltip>	×
NEW 90	) : (	×
NEW 91	<Tooltip label="Add a connection">	×
NEW 92	<ActionIcon	×
NEW 93	data-testid="add-connection"	×
NEW 94	variant="default"	×
NEW 95	onClick={() => showConnectionModal(appId)}	×
NEW 96	>	×
NEW 97	<TbPlugConnected />	×
NEW 98	</ActionIcon>	×
NEW 99	</Tooltip>	×
NEW 100	)}	×
NEW 101	</Group>	×
NEW 102	</Box>	×
NEW 103	);	×
NEW 104	};	×
105		1✔
106	const ApplicationsTable: FC<ApplicationsTableProps> = ({	1✔
107	applications,	5✔
108	fetching,	5✔
109	totalCount,	5✔
110	}) => {	5✔
111	return (	5✔
112	<ResponsiveTable<ApplicationItemFragment>	5✔
113	items={applications}	5✔
114	fetching={fetching}	5✔
115	totalCount={totalCount}	5✔
116	columns={[	5✔
117	{	5✔
118	key: "id",	5✔
119	label: "Id",	5✔
120	render: (application) => {	5✔
NEW 121	const appId = application.id as AddressType;	×
NEW 122	return (	×
NEW 123	<Box	×
NEW 124	display="flex"	×
NEW 125	w="max-content"	×
NEW 126	style={{	×
NEW 127	alignItems: "center",	×
NEW 128	justifyContent: "center",	×
NEW 129	}}	×
NEW 130	>	×
NEW 131	<Address value={appId} icon shorten />	×
NEW 132	</Box>	×
NEW 133	);	×
NEW 134	},	×
135	},	5✔
136	{	5✔
137	key: "owner",	5✔
138	label: "Owner",	5✔
139	render: (application) => (	5✔
NEW 140	<Box	×
NEW 141	display="flex"	×
NEW 142	w="max-content"	×
NEW 143	style={{	×
NEW 144	alignItems: "center",	×
NEW 145	justifyContent: "center",	×
NEW 146	}}	×
UNCOV 147	>	×
NEW 148	{application.owner ? (	×
NEW 149	<Address	×
NEW 150	value={application.owner as AddressType}	×
NEW 151	icon	×
NEW 152	shorten	×
NEW 153	/>	×
NEW 154	) : (	×
NEW 155	"N/A"	×
UNCOV 156	)}	×
NEW 157	</Box>	×
158	),	5✔
159	},	5✔
160	{	5✔
161	key: "url",	5✔
162	label: "URL",	5✔
163	render: (application) => (	5✔
NEW 164	<ConnectionUrlColumn application={application} />	×
165	),	5✔
166	},	5✔
167	{	5✔
168	key: "data",	5✔
169	label: "Data",	5✔
170	sticky: true,	5✔
171	render: (application) => (	5✔
NEW 172	<ApplicationDataColumn application={application} />	×
173	),	5✔
174	},	5✔
175	]}	5✔
176	/>	5✔
177	);	5✔
178	};	5✔
179		1✔
180	export default ApplicationsTable;	1✔

cartesi / rollups-explorer / 10030569058

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