refactor: Update conn page to match other pages visual ID

apps/web/e2e/pages/connections.spec.ts

@@ -22,8 +22,11 @@ test("should have correct title", async ({ page }) => {
     await expect(title.first()).toBeVisible();
 });
 
-test("should have empty label", async ({ page }) => {
-    await expect(page.getByText("No connections found.")).toBeVisible();
+test("should have empty label and a create connection button", async ({
+    page,
+}) => {
+    await expect(page.getByText("No Connections Found!")).toBeVisible();
+    await expect(page.getByText("Create a connection")).toBeVisible();
 });
 
 test("should be able to add a connection", async ({ page }) => {
@@ -87,7 +90,7 @@ test("should remove the connection when the delete action was confirmed", async
     await cancelButton.click();
 
     await expect(page.getByText("Delete connection?")).not.toBeVisible();
-    await expect(page.getByText("No connections found.")).toBeVisible();
+    await expect(page.getByText("No Connections Found!")).toBeVisible();
 });
 
 test("should display correct list with connections", async ({ page }) => {

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/src/app/connections/page.tsx

@@ -1,7 +1,9 @@
 import { Stack } from "@mantine/core";
 import { Metadata } from "next";
-import ConnectionView from "../../components/connection/connectionView";
+import { TbPlugConnected } from "react-icons/tb";
 import Breadcrumbs from "../../components/breadcrumbs";
+import ConnectionView from "../../components/connection/connectionView";
+import PageTitle from "../../components/layout/pageTitle";
 
 export const metadata: Metadata = {
     title: "Connections",
@@ -19,6 +21,8 @@ export default function InputsPage() {
                 ]}
             />
 
+            <PageTitle title="Connections" Icon={TbPlugConnected} />
+
             <ConnectionView />
         </Stack>
     );

apps/web/src/app/specifications/page.tsx

@@ -1,7 +1,8 @@
-import { Group, Stack, Title } from "@mantine/core";
+import { Stack } from "@mantine/core";
 import { Metadata } from "next";
 import { TbFileCode } from "react-icons/tb";
 import Breadcrumbs from "../../components/breadcrumbs";
+import PageTitle from "../../components/layout/pageTitle";
 import { SpecificationListView } from "../../components/specification/SpecificationListView";
 
 export const metadata: Metadata = {
@@ -20,10 +21,7 @@ export default function SpecificationsPage() {
                 ]}
             />
 
-            <Group mb="xl">
-                <TbFileCode size={40} />
-                <Title order={1}>Specifications</Title>
-            </Group>
+            <PageTitle title="Specifications" Icon={TbFileCode} />
 
             <SpecificationListView />
         </Stack>

apps/web/src/components/connection/components/NewConnectionButton.tsx

@@ -0,0 +1,21 @@
+import { Button, ButtonProps } from "@mantine/core";
+import { FC } from "react";
+import { Address } from "viem";
+import { useConnectionConfig } from "../../../providers/connectionConfig/hooks";
+
+interface NewConnectionButtonProps extends ButtonProps {
+    appAddress?: Address;
+}
+
+const NewConnectionButton: FC<NewConnectionButtonProps> = (props) => {
+    const { appAddress, children, ...rest } = props;
+    const { showConnectionModal } = useConnectionConfig();
+
+    return (
+        <Button onClick={() => showConnectionModal(appAddress)} {...rest}>
+            {children || "New Connection"}
+        </Button>
+    );
+};
+
+export default NewConnectionButton;

apps/web/src/components/connection/connectionView.tsx

@@ -1,69 +1,78 @@
 "use client";
 import {
-    Avatar,
-    Button,
+    Card,
+    Center,
+    Flex,
     Grid,
     Group,
-    Text,
+    Skeleton,
     Title,
-    useMantineTheme,
-    VisuallyHidden,
 } from "@mantine/core";
-import { TbPlus } from "react-icons/tb";
+import { range } from "ramda";
+import { FC } from "react";
 import { useConnectionConfig } from "../../providers/connectionConfig/hooks";
+import NewConnectionButton from "./components/NewConnectionButton";
 import ConnectionInfo from "./connectionInfo";
 
+const Feedback: FC = () => (
+    <Grid justify="flex-start" align="stretch" data-testid="fetching-feedback">
+        {range(0, 4).map((n) => (
+            <Grid.Col span={{ base: 12, md: 6 }} key={n}>
+                <Card>
+                    <Group justify="space-between">
+                        <Skeleton height={18} mb="xl" width="70%" />
+                        <Skeleton height={18} mb="xl" width="5%" />
+                    </Group>
+                    <Skeleton height={18} my="xs" mb={0} />
+                </Card>
+            </Grid.Col>
+        ))}
+    </Grid>
+);
+
+const NoConnections: FC = () => {
+    return (
+        <Center>
+            <Flex direction="column" align="center" justify="center" gap="sm">
+                <Title order={3} c="dimmed">
+                    No Connections Found!
+                </Title>
+
+                <NewConnectionButton data-testid="add-connection">
+                    Create a connection
+                </NewConnectionButton>
+            </Flex>
+        </Center>
+    );
+};
+
 const ConnectionView = () => {
-    const { listConnections, showConnectionModal, fetching } =
-        useConnectionConfig();
-    const theme = useMantineTheme();
+    const { listConnections, fetching } = useConnectionConfig();
     const connections = listConnections();
     const hasConnections = connections.length > 0;
 
+    if (fetching) return <Feedback />;
+    if (!hasConnections) return <NoConnections />;
+
     return (
         <>
-            <Group justify="space-between">
-                <Group align="center" justify="center">
-                    <Button
-                        size="compact-sm"
-                        variant="filled"
-                        data-testid="add-connection"
-                        onClick={() => showConnectionModal()}
-                    >
-                        <TbPlus />
-                        <VisuallyHidden>Create connection</VisuallyHidden>
-                    </Button>
-
-                    <Title data-testid="page-title" size="h2">
-                        Connections
-                    </Title>
-                    {hasConnections && (
-                        <Avatar size="sm" color={theme.primaryColor}>
-                            {connections.length}
-                        </Avatar>
-                    )}
-                </Group>
+            <Group justify="flex-start">
+                <NewConnectionButton data-testid="add-connection">
+                    New
+                </NewConnectionButton>
             </Group>
 
-            {hasConnections ? (
-                <Grid gutter="sm">
-                    {connections.map((connection) => (
-                        <Grid.Col
-                            key={connection.address}
-                            span={{ base: 12, sm: 6 }}
-                            mt="md"
-                        >
-                            <ConnectionInfo connection={connection} />
-                        </Grid.Col>
-                    ))}
-                </Grid>
-            ) : (
-                <Text c="dimmed" py="sm" ta="center">
-                    {fetching
-                        ? "Fetching connections..."
-                        : "No connections found."}
-                </Text>
-            )}
+            <Grid gutter="sm">
+                {connections.map((connection) => (
+                    <Grid.Col
+                        key={connection.address}
+                        span={{ base: 12, sm: 6 }}
+                        mt="md"
+                    >
+                        <ConnectionInfo connection={connection} />
+                    </Grid.Col>
+                ))}
+            </Grid>
         </>
     );
 };

apps/web/src/components/layout/pageTitle.tsx

@@ -10,7 +10,7 @@ const PageTitle: FC<PageTitleProps> = ({ title, Icon }) => {
     return (
         <Group mb="sm" data-testid="page-title">
             <Icon size={40} />
-            <Title order={2}>{title}</Title>
+            <Title order={1}>{title}</Title>
         </Group>
     );
 };

apps/web/test/components/connection/connectionView.test.tsx

@@ -27,8 +27,9 @@ describe("Connection view component", () => {
             ...useConnectionConfigReturnStub,
             fetching: true,
         });
+
         render(<View />);
-        expect(screen.getByText("Fetching connections...")).toBeInTheDocument();
+        expect(screen.getByTestId("fetching-feedback")).toBeVisible();
     });
 
     it("should not display loading state when not fetching connections", () => {
@@ -45,17 +46,16 @@ describe("Connection view component", () => {
     it("should display default state without connections", () => {
         render(<View />);
 
-        expect(screen.getByText("Create connection")).toBeInTheDocument();
-        expect(screen.getByText("Connections")).toBeInTheDocument();
-        expect(screen.getByText("No connections found.")).toBeInTheDocument();
+        expect(screen.getByText("No Connections Found!")).toBeInTheDocument();
+        expect(screen.getByText("Create a connection")).toBeVisible();
     });
 
-    it("should call the creation form when clicking the plus sign", () => {
+    it("should call the creation form when clicking the create a connection button", () => {
         const { showConnectionModal } = useConnectionConfigReturnStub;
 
         render(<View />);
 
-        fireEvent.click(screen.getByText("Create connection"));
+        fireEvent.click(screen.getByText("Create a connection"));
 
         expect(showConnectionModal).toHaveBeenCalledOnce();
     });