From d173b6e30cea72eced88b422ce212b5610caa1b6 Mon Sep 17 00:00:00 2001 From: Bruno Menezes Date: Wed, 22 Jan 2025 15:06:02 +1300 Subject: [PATCH 1/6] refactor(apps/web): Update connection page content to use the page-title component. --- apps/web/src/app/connections/page.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/apps/web/src/app/connections/page.tsx b/apps/web/src/app/connections/page.tsx index 1f2ca897..ed75df50 100644 --- a/apps/web/src/app/connections/page.tsx +++ b/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() { ]} /> + + ); From b874da48372e96cd873ee0e6cf5b63163ab27789 Mon Sep 17 00:00:00 2001 From: Bruno Menezes Date: Wed, 22 Jan 2025 15:07:33 +1300 Subject: [PATCH 2/6] refactor(apps/web): Update connection-view component to have similar presentation to the Specification view. --- .../components/NewConnectionButton.tsx | 21 ++++ .../components/connection/connectionView.tsx | 107 ++++++++++-------- 2 files changed, 79 insertions(+), 49 deletions(-) create mode 100644 apps/web/src/components/connection/components/NewConnectionButton.tsx diff --git a/apps/web/src/components/connection/components/NewConnectionButton.tsx b/apps/web/src/components/connection/components/NewConnectionButton.tsx new file mode 100644 index 00000000..8d605c19 --- /dev/null +++ b/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 = (props) => { + const { appAddress, children, ...rest } = props; + const { showConnectionModal } = useConnectionConfig(); + + return ( + + ); +}; + +export default NewConnectionButton; diff --git a/apps/web/src/components/connection/connectionView.tsx b/apps/web/src/components/connection/connectionView.tsx index 34304313..76058ceb 100644 --- a/apps/web/src/components/connection/connectionView.tsx +++ b/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 = () => ( + + {range(0, 4).map((n) => ( + + + + + + + + + + ))} + +); + +const NoConnections: FC = () => { + return ( +
+ + + No Connections Found! + + + + Create a connection + + +
+ ); +}; + 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 ; + if (!hasConnections) return ; + return ( <> - - - - - - Connections - - {hasConnections && ( - - {connections.length} - - )} - + + + New + - {hasConnections ? ( - - {connections.map((connection) => ( - - - - ))} - - ) : ( - - {fetching - ? "Fetching connections..." - : "No connections found."} - - )} + + {connections.map((connection) => ( + + + + ))} + ); }; From f6c8635b308369da4f228eec591e63d0e2d9d9a4 Mon Sep 17 00:00:00 2001 From: Bruno Menezes Date: Wed, 22 Jan 2025 15:08:13 +1300 Subject: [PATCH 3/6] refactor(apps/web): Update the specification page to also use the page-title component. --- apps/web/src/app/specifications/page.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app/specifications/page.tsx b/apps/web/src/app/specifications/page.tsx index 85177ebf..5f3fbd46 100644 --- a/apps/web/src/app/specifications/page.tsx +++ b/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() { ]} /> - - - Specifications - + From a832113601149c61ae2876f84af69bf1e58c8b9a Mon Sep 17 00:00:00 2001 From: Bruno Menezes Date: Wed, 22 Jan 2025 15:09:46 +1300 Subject: [PATCH 4/6] refactor: Update unit and e2e connection tests. --- apps/web/e2e/pages/connections.spec.ts | 9 ++++++--- .../components/connection/connectionView.test.tsx | 12 ++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/apps/web/e2e/pages/connections.spec.ts b/apps/web/e2e/pages/connections.spec.ts index c4342c33..8d1c0c1d 100644 --- a/apps/web/e2e/pages/connections.spec.ts +++ b/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 }) => { diff --git a/apps/web/test/components/connection/connectionView.test.tsx b/apps/web/test/components/connection/connectionView.test.tsx index ea446377..287996ce 100644 --- a/apps/web/test/components/connection/connectionView.test.tsx +++ b/apps/web/test/components/connection/connectionView.test.tsx @@ -27,8 +27,9 @@ describe("Connection view component", () => { ...useConnectionConfigReturnStub, fetching: true, }); + render(); - 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(); - 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(); - fireEvent.click(screen.getByText("Create connection")); + fireEvent.click(screen.getByText("Create a connection")); expect(showConnectionModal).toHaveBeenCalledOnce(); }); From 7c39f525658588c036eedeb34f6173b7a0954289 Mon Sep 17 00:00:00 2001 From: Bruno Menezes Date: Wed, 22 Jan 2025 15:10:22 +1300 Subject: [PATCH 5/6] refactor: change the title in the page-title component to be a h1 instead of h2. --- apps/web/src/components/layout/pageTitle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/components/layout/pageTitle.tsx b/apps/web/src/components/layout/pageTitle.tsx index f8291079..6917a956 100644 --- a/apps/web/src/components/layout/pageTitle.tsx +++ b/apps/web/src/components/layout/pageTitle.tsx @@ -10,7 +10,7 @@ const PageTitle: FC = ({ title, Icon }) => { return ( - {title} + {title} ); }; From 2dd5b93854a02ff029538c2fe976863c0e5d4e79 Mon Sep 17 00:00:00 2001 From: Bruno Menezes Date: Wed, 22 Jan 2025 15:10:50 +1300 Subject: [PATCH 6/6] chore: update on next-env.d.ts made by nextJS. --- apps/web/next-env.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/next-env.d.ts b/apps/web/next-env.d.ts index 40c3d680..1b3be084 100644 --- a/apps/web/next-env.d.ts +++ b/apps/web/next-env.d.ts @@ -2,4 +2,4 @@ /// // 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.