From f8ad886a50d60e5a40ae00cc5deb7986ee60ec56 Mon Sep 17 00:00:00 2001
From: Romain Dorgueil <romain@makersquad.fr>
Date: Thu, 21 Mar 2024 17:03:11 +0100
Subject: [PATCH] feat: minor tuning in ui

---
 Makefile                                      |  5 +++-
 frontend/src/Components/Page/Page.test.tsx    | 11 ++++---
 frontend/src/Components/Page/Page.tsx         | 17 +++++------
 frontend/src/Components/Page/PageTitle.tsx    | 14 +++++++++
 frontend/src/Components/Page/index.tsx        |  1 +
 frontend/src/Pages/Overview/OverviewPage.tsx  |  4 +--
 .../__snapshots__/OverviewPage.test.tsx.snap  |  5 ----
 frontend/src/Pages/System/SystemPage.tsx      |  4 +--
 .../Containers/FiltersSidebar.tsx             |  6 +---
 .../FiltersSidebar.test.tsx.snap              |  4 +--
 .../Transactions/TransactionListPage.tsx      | 29 +++++++++++++++---
 .../TransactionListPage.test.tsx.snap         | 30 +++++++++++++++----
 12 files changed, 89 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/Components/Page/PageTitle.tsx

diff --git a/Makefile b/Makefile
index eb5e49d1..a46bf3c5 100644
--- a/Makefile
+++ b/Makefile
@@ -53,7 +53,7 @@ frontend:
 # QA, tests and other CI/CD related stuff
 ########################################################################################################################
 
-.PHONY: clean preqa qa qa-full types format format-backend format-frontend test test-backend coverage test-frontend lint-frontend test-ui test-ui-update test-ui-build
+.PHONY: clean preqa qa qa-full types format format-backend format-frontend test test-backend coverage test-frontend test-frontend-update lint-frontend test-ui test-ui-update test-ui-build
 
 clean:
 	(cd docs; $(MAKE) clean)
@@ -101,6 +101,9 @@ coverage:
 test-frontend: install-frontend lint-frontend
 	cd frontend; pnpm test
 
+test-frontend-update: install-frontend lint-frontend
+	cd frontend; pnpm test:unit:update
+
 lint-frontend: install-frontend
 	cd frontend; pnpm build
 
diff --git a/frontend/src/Components/Page/Page.test.tsx b/frontend/src/Components/Page/Page.test.tsx
index e835a5d2..15e29405 100644
--- a/frontend/src/Components/Page/Page.test.tsx
+++ b/frontend/src/Components/Page/Page.test.tsx
@@ -1,8 +1,9 @@
 import { render, screen } from "@testing-library/react"
 import { ErrorBoundary } from "react-error-boundary"
-import { describe, test, expect, vi, afterEach } from "vitest"
+import { afterEach, describe, expect, test, vi } from "vitest"
 
-import { Page, Error as ErrorFunc } from "./Page"
+import { Error as ErrorFunc, Page } from "./Page"
+import { PageTitle } from "./PageTitle.tsx"
 
 describe("Page", () => {
   afterEach(() => {
@@ -10,12 +11,14 @@ describe("Page", () => {
   })
 
   test("renders without error", () => {
-    const { container } = render(<Page children={<div />} title="Test Title" description="Test Description" />)
+    const { container } = render(
+      <Page children={<div />} title={<PageTitle title="Test Title" description="Test Description" />} />,
+    )
     expect(container).toMatchSnapshot()
   })
 
   test("renders title and description", () => {
-    render(<Page children={<div />} title="Test Title" description="Test Description" />)
+    render(<Page children={<div />} title={<PageTitle title="Test Title" description="Test Description" />} />)
     expect(screen.getByText("Test Title")).toBeInTheDocument()
     expect(screen.getByText("Test Description")).toBeInTheDocument()
   })
diff --git a/frontend/src/Components/Page/Page.tsx b/frontend/src/Components/Page/Page.tsx
index 2adda61a..c25d545b 100644
--- a/frontend/src/Components/Page/Page.tsx
+++ b/frontend/src/Components/Page/Page.tsx
@@ -2,8 +2,6 @@ import * as Sentry from "@sentry/browser"
 import { ReactNode } from "react"
 import { ErrorBoundary, FallbackProps } from "react-error-boundary"
 
-import { H1, P } from "mkui/Components/Typography"
-
 export function Error(props: FallbackProps) {
   return (
     <div>
@@ -43,17 +41,16 @@ export function Error(props: FallbackProps) {
   )
 }
 
-export function Page({ children, title, description }: { children: ReactNode; title?: string; description?: string }) {
+interface PageProps {
+  children: ReactNode
+  title?: ReactNode
+}
+
+export function Page({ children, title }: PageProps) {
   return (
     <ErrorBoundary FallbackComponent={Error}>
       <main>
-        {title ? (
-          <div className="mt-4 mb-4">
-            <H1>{title}</H1>
-            {description ? <P>{description}</P> : null}
-          </div>
-        ) : null}
-
+        {title ?? null}
         <div className="mt-4">
           <div className="sm:-mx-6 lg:-mx-8">
             <section className="inline-block min-w-full max-w-full py-2 align-middle sm:px-6 lg:px-8">
diff --git a/frontend/src/Components/Page/PageTitle.tsx b/frontend/src/Components/Page/PageTitle.tsx
new file mode 100644
index 00000000..4de1c91b
--- /dev/null
+++ b/frontend/src/Components/Page/PageTitle.tsx
@@ -0,0 +1,14 @@
+import { H1, P } from "mkui/Components/Typography"
+
+export function PageTitle({ description, title }: { title?: string; description?: string }) {
+  return (
+    <>
+      {title ? (
+        <div className="mt-4 mb-4">
+          <H1>{title}</H1>
+          {description ? <P>{description}</P> : null}
+        </div>
+      ) : null}
+    </>
+  )
+}
diff --git a/frontend/src/Components/Page/index.tsx b/frontend/src/Components/Page/index.tsx
index 51702738..1b50e51f 100644
--- a/frontend/src/Components/Page/index.tsx
+++ b/frontend/src/Components/Page/index.tsx
@@ -1,2 +1,3 @@
 export { Page } from "./Page"
+export { PageTitle } from "./PageTitle"
 export { Error } from "./Page"
diff --git a/frontend/src/Pages/Overview/OverviewPage.tsx b/frontend/src/Pages/Overview/OverviewPage.tsx
index dad7d181..0fe99100 100644
--- a/frontend/src/Pages/Overview/OverviewPage.tsx
+++ b/frontend/src/Pages/Overview/OverviewPage.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react"
 
-import { Page } from "Components/Page"
+import { Page, PageTitle } from "Components/Page"
 import { OnQuerySuccess } from "Components/Utilities/OnQuerySuccess"
 import { useSystemSettingsQuery } from "Domain/System"
 import { ButtonGroup } from "mkui/Components/ButtonGroup"
@@ -28,7 +28,7 @@ export const OverviewPage = () => {
   ]
 
   return (
-    <Page title="Overview" description="Useful insights">
+    <Page title={<PageTitle title="Overview" />}>
       <div className="flex justify-end my-2">
         <ButtonGroup buttonProps={buttonProps} current={timeRange} setCurrent={setCurrentTimeRange} />
       </div>
diff --git a/frontend/src/Pages/Overview/__snapshots__/OverviewPage.test.tsx.snap b/frontend/src/Pages/Overview/__snapshots__/OverviewPage.test.tsx.snap
index f87dd553..f3b962c3 100644
--- a/frontend/src/Pages/Overview/__snapshots__/OverviewPage.test.tsx.snap
+++ b/frontend/src/Pages/Overview/__snapshots__/OverviewPage.test.tsx.snap
@@ -11,11 +11,6 @@ exports[`renders the title and data when the query is successful 1`] = `
       >
         Overview
       </h1>
-      <p
-        class="css-11bp3eh"
-      >
-        Useful insights
-      </p>
     </div>
     <div
       class="mt-4"
diff --git a/frontend/src/Pages/System/SystemPage.tsx b/frontend/src/Pages/System/SystemPage.tsx
index 702a092c..4f4ec10c 100644
--- a/frontend/src/Pages/System/SystemPage.tsx
+++ b/frontend/src/Pages/System/SystemPage.tsx
@@ -1,4 +1,4 @@
-import { Page } from "Components/Page"
+import { Page, PageTitle } from "Components/Page"
 import { Tab } from "mkui/Components/Tabs"
 
 import { SystemDependenciesTabPanel } from "./SystemDependenciesTabPanel.tsx"
@@ -7,7 +7,7 @@ import { SystemTopologyTabPanel } from "./SystemTopologyTabPanel.tsx"
 
 export const SystemPage = () => {
   return (
-    <Page title="System" description="Informations about the running instance.">
+    <Page title={<PageTitle title="System" description="Informations about the running instance." />}>
       <Tab.Group>
         <Tab.List as="nav" aria-label="Tabs">
           <Tab>Topology</Tab>
diff --git a/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx b/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx
index ad6dbfb7..475ea304 100644
--- a/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx
+++ b/frontend/src/Pages/Transactions/Containers/FiltersSidebar.tsx
@@ -33,11 +33,7 @@ export function FiltersSidebar({ filters, setFilters }: FiltersSidebarProps) {
   const setFlagsFilter = _createSetFilterFor("flag")
 
   return (
-    <Pane
-      as="aside"
-      hasDefaultPadding={false}
-      className="divide-y divide-gray-100 overflow-hidden text-gray-900 sm:text-sm"
-    >
+    <Pane hasDefaultPadding={false} className="divide-y divide-gray-100 overflow-hidden text-gray-900 sm:text-sm">
       {/* TODO implement search
       <input className="h-12 w-full border-0 bg-transparent px-4 focus:ring-0" placeholder="Search..." />
      */}
diff --git a/frontend/src/Pages/Transactions/Containers/__snapshots__/FiltersSidebar.test.tsx.snap b/frontend/src/Pages/Transactions/Containers/__snapshots__/FiltersSidebar.test.tsx.snap
index 2fc2fcf3..2c1e3a68 100644
--- a/frontend/src/Pages/Transactions/Containers/__snapshots__/FiltersSidebar.test.tsx.snap
+++ b/frontend/src/Pages/Transactions/Containers/__snapshots__/FiltersSidebar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders the title and data when the query is successful 1`] = `
 <div>
-  <aside
+  <div
     class="divide-y divide-gray-100 overflow-hidden text-gray-900 sm:text-sm css-o0j4j7"
   >
     <div
@@ -583,6 +583,6 @@ exports[`renders the title and data when the query is successful 1`] = `
         </div>
       </fieldset>
     </div>
-  </aside>
+  </div>
 </div>
 `;
diff --git a/frontend/src/Pages/Transactions/TransactionListPage.tsx b/frontend/src/Pages/Transactions/TransactionListPage.tsx
index 1d26a30a..6869b486 100644
--- a/frontend/src/Pages/Transactions/TransactionListPage.tsx
+++ b/frontend/src/Pages/Transactions/TransactionListPage.tsx
@@ -1,7 +1,9 @@
+import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from "@heroicons/react/16/solid"
 import { useEffect, useState } from "react"
 import { QueryObserverSuccessResult } from "react-query/types/core/types"
 
 import { Page } from "Components/Page"
+import { PageTitle } from "Components/Page/PageTitle.tsx"
 import { OnQuerySuccess } from "Components/Utilities/OnQuerySuccess"
 import { ItemList } from "Domain/Api/Types"
 import { useTransactionsDetailQuery, useTransactionsListQuery } from "Domain/Transactions"
@@ -28,6 +30,9 @@ function TransactionListPageOnQuerySuccess({
 }) {
   const [selected, setSelected] = useState<Transaction | null>(null)
   const hasSelection = selected && selected.id
+
+  const [isFiltersOpen, setIsFiltersOpen] = useState(true)
+
   const detailQuery = useTransactionsDetailQuery(selected?.id)
   const paginatorProps = {
     current: page,
@@ -38,9 +43,23 @@ function TransactionListPageOnQuerySuccess({
   }
   return (
     <div className="flex w-full items-start gap-x-8 relative">
-      <aside className="sticky top-8 hidden w-1/5 min-w-56 max-w-96 shrink-0 lg:block">
-        <FiltersSidebar filters={filters} setFilters={setFilters} />
-      </aside>
+      {isFiltersOpen ? (
+        <aside className="sticky top-8 hidden w-1/5 min-w-56 max-w-96 shrink-0 lg:block">
+          <div className="text-right">
+            <button onClick={() => setIsFiltersOpen(false)} className="text-gray-400 mx-1 font-medium text-xs">
+              <ChevronDoubleLeftIcon className="h-3 w-3 inline-block" /> hide
+            </button>
+          </div>
+          <FiltersSidebar filters={filters} setFilters={setFilters} />
+        </aside>
+      ) : (
+        <button onClick={() => setIsFiltersOpen(true)} className="text-gray-400 mx-1 font-medium text-xs">
+          <ChevronDoubleRightIcon className="h-3 w-3 inline-block" />
+          <div className="w-4">
+            <div className="rotate-90">filters</div>
+          </div>
+        </button>
+      )}
 
       <main className="flex-1 overflow-auto">
         <TransactionDataTable
@@ -85,7 +104,7 @@ export function TransactionListPage() {
   }, [page, query])
 
   return (
-    <Page title="Transactions" description="Explore transactions that went through the proxy">
+    <Page title={<PageTitle title="Transactions" />}>
       <OnQuerySuccess query={query}>
         {(query) => (
           <TransactionListPageOnQuerySuccess
@@ -100,3 +119,5 @@ export function TransactionListPage() {
     </Page>
   )
 }
+
+//title="Transactions" description="Explore transactions that went through the proxy"
diff --git a/frontend/src/Pages/Transactions/__snapshots__/TransactionListPage.test.tsx.snap b/frontend/src/Pages/Transactions/__snapshots__/TransactionListPage.test.tsx.snap
index 7e07152b..4a06a5b3 100644
--- a/frontend/src/Pages/Transactions/__snapshots__/TransactionListPage.test.tsx.snap
+++ b/frontend/src/Pages/Transactions/__snapshots__/TransactionListPage.test.tsx.snap
@@ -11,11 +11,6 @@ exports[`renders well when the query is successful 1`] = `
       >
         Transactions
       </h1>
-      <p
-        class="css-11bp3eh"
-      >
-        Explore transactions that went through the proxy
-      </p>
     </div>
     <div
       class="mt-4"
@@ -32,7 +27,30 @@ exports[`renders well when the query is successful 1`] = `
             <aside
               class="sticky top-8 hidden w-1/5 min-w-56 max-w-96 shrink-0 lg:block"
             >
-              <aside
+              <div
+                class="text-right"
+              >
+                <button
+                  class="text-gray-400 mx-1 font-medium text-xs"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="h-3 w-3 inline-block"
+                    data-slot="icon"
+                    fill="currentColor"
+                    viewBox="0 0 16 16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      d="M3.22 7.595a.75.75 0 0 0 0 1.06l3.25 3.25a.75.75 0 0 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06l-3.25 3.25Zm8.25-3.25-3.25 3.25a.75.75 0 0 0 0 1.06l3.25 3.25a.75.75 0 1 0 1.06-1.06l-2.72-2.72 2.72-2.72a.75.75 0 0 0-1.06-1.06Z"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                   hide
+                </button>
+              </div>
+              <div
                 class="divide-y divide-gray-100 overflow-hidden text-gray-900 sm:text-sm css-o0j4j7"
               />
             </aside>