Merge pull request #267 from msqd/feat_search_bar

Feat search bar

harp/typing/storage.py

@@ -18,6 +18,7 @@ async def get_transaction_list(
         filters=None,
         page: int = 1,
         cursor: str = "",
+        text_search: str = "",
     ):
         """Find transactions, using optional filters, for example to be displayed in the dashboard."""
         ...
@@ -59,10 +60,6 @@ async def create_users_once_ready(self, users: Iterable[str]):
         """Create users."""
         ...
 
-    async def set_transaction_tags(self, transaction_or_id, tags: dict, /):
-        """Set transaction tags."""
-        ...
-
     async def get_usage(self):
         """Get storage usage."""
         ...

harp/utils/dates.py

@@ -19,4 +19,7 @@ def ensure_datetime(x, tz=None) -> Optional[datetime]:
         return x.replace(tzinfo=tz)
     if isinstance(x, date):
         return datetime.combine(x, datetime.min.time(), tzinfo=tz)
-    return datetime.strptime(x, "%Y-%m-%d %H:%M:%S.%f").replace(tzinfo=tz)
+    try:
+        return datetime.strptime(x, "%Y-%m-%d %H:%M:%S").replace(tzinfo=tz)
+    except ValueError:
+        return datetime.strptime(x, "%Y-%m-%d %H:%M:%S.%f").replace(tzinfo=tz)

harp_apps/dashboard/controllers/transactions.py

@@ -68,6 +68,7 @@ async def list(self, request: HttpRequest):
             page=page,
             cursor=cursor,
             username=request.context.get("user") or "anonymous",
+            text_search=request.query.get("search", ""),
         )
 
         return json(

harp_apps/dashboard/frontend/src/Components/Page/PageTitle.tsx

@@ -12,10 +12,12 @@ export function PageTitle({ description, title, children }: PageTitleProps) {
   return (
     <>
       {title ? (
-        <div className="mt-4 mb-4">
-          {children ? <div className="float-end">{children}</div> : null}
-          <H1>{title}</H1>
-          {description ? <P>{description}</P> : null}
+        <div className="mt-4 flex">
+          <div className="flex flex-col">
+            <H1>{title}</H1>
+            {description ? <P>{description}</P> : null}
+          </div>
+          {children ? <>{children}</> : null}
         </div>
       ) : null}
     </>

harp_apps/dashboard/frontend/src/Components/Page/__snapshots__/Page.test.tsx.snap

@@ -4,18 +4,22 @@ exports[`Page > renders without error 1`] = `
 <div>
   <main>
     <div
-      class="mt-4 mb-4"
+      class="mt-4 flex"
     >
-      <h1
-        class="css-9lrcch"
-      >
-        Test Title
-      </h1>
-      <p
-        class="css-11bp3eh"
+      <div
+        class="flex flex-col"
       >
-        Test Description
-      </p>
+        <h1
+          class="css-9lrcch"
+        >
+          Test Title
+        </h1>
+        <p
+          class="css-11bp3eh"
+        >
+          Test Description
+        </p>
+      </div>
     </div>
     <div
       class="mt-4"

harp_apps/dashboard/frontend/src/Domain/Transactions/useTransactionsListQuery.ts

@@ -5,7 +5,9 @@ import { ItemList } from "Domain/Api/Types"
 import { Transaction } from "Models/Transaction"
 import { Filter, Filters } from "Types/filters"
 
-function getQueryStringFromRecord(filters: Record<string, Filter> | { page: number; cursor?: string }) {
+function getQueryStringFromRecord(
+  filters: Record<string, Filter> | { page: number; cursor?: string; search?: string },
+) {
   const searchParams = new URLSearchParams()
 
   for (const [key, value] of Object.entries(filters) as [string, string | number | undefined][]) {
@@ -20,13 +22,17 @@ export function useTransactionsListQuery({
   page = 1,
   cursor = undefined,
   filters = undefined,
+  search = undefined,
 }: {
   filters?: Filters
   page?: number
   cursor?: string
+  search?: string
 }) {
   const api = useApi()
-  const qs = filters ? getQueryStringFromRecord({ ...filters, page, cursor: page == 1 ? undefined : cursor }) : ""
+  const qs = filters
+    ? getQueryStringFromRecord({ ...filters, page, cursor: page == 1 ? undefined : cursor, search })
+    : ""
 
   return useQuery<ItemList<Transaction> & { total: number; pages: number; perPage: number }>(
     ["transactions", qs],

harp_apps/dashboard/frontend/src/Pages/Overview/__snapshots__/OverviewPage.test.tsx.snap

@@ -4,13 +4,17 @@ exports[`renders the title and data when the query is successful 1`] = `
 <div>
   <main>
     <div
-      class="mt-4 mb-4"
+      class="mt-4 flex"
     >
-      <h1
-        class="css-9lrcch"
+      <div
+        class="flex flex-col"
       >
-        Overview
-      </h1>
+        <h1
+          class="css-9lrcch"
+        >
+          Overview
+        </h1>
+      </div>
     </div>
     <div
       class="mt-4"

harp_apps/dashboard/frontend/src/Pages/System/__snapshots__/SystemPage.test.tsx.snap

@@ -4,18 +4,22 @@ exports[`SystemPage > renders the title and data when the query is successful 1`
 <div>
   <main>
     <div
-      class="mt-4 mb-4"
+      class="mt-4 flex"
     >
-      <h1
-        class="css-9lrcch"
-      >
-        System
-      </h1>
-      <p
-        class="css-11bp3eh"
+      <div
+        class="flex flex-col"
       >
-        Informations about the running instance.
-      </p>
+        <h1
+          class="css-9lrcch"
+        >
+          System
+        </h1>
+        <p
+          class="css-11bp3eh"
+        >
+          Informations about the running instance.
+        </p>
+      </div>
     </div>
     <div
       class="mt-4"

harp_apps/dashboard/frontend/src/Pages/Transactions/TransactionListPage.tsx

@@ -5,6 +5,7 @@ import { PageTitle } from "Components/Page/PageTitle.tsx"
 import { OnQuerySuccess } from "Components/Utilities/OnQuerySuccess"
 import { useTransactionsListQuery } from "Domain/Transactions"
 import { Filters } from "Types/filters"
+import { SearchBar } from "ui/Components/SearchBar/SearchBar.tsx"
 
 import { OptionalPaginator } from "./Components/OptionalPaginator.tsx"
 import { TransactionListOnQuerySuccess } from "./TransactionListOnQuerySuccess.tsx"
@@ -13,7 +14,8 @@ export function TransactionListPage() {
   const [filters, setFilters] = useState<Filters>({})
   const [page, setPage] = useState(1)
   const [cursor, setCursor] = useState<string | undefined>(undefined)
-  const query = useTransactionsListQuery({ filters, page, cursor })
+  const [search, setSearch] = useState<string | undefined>(undefined)
+  const query = useTransactionsListQuery({ filters, page, cursor, search })
 
   useEffect(() => {
     if (page == 1 && query.isSuccess && query.data.items.length) {
@@ -25,18 +27,28 @@ export function TransactionListPage() {
     <Page
       title={
         <PageTitle title="Transactions" description="Explore transactions that went through the proxy">
-          {query.isSuccess ? (
-            <OptionalPaginator
-              current={page}
-              setPage={setPage}
-              total={query.data.total}
-              pages={query.data.pages}
-              perPage={query.data.perPage}
+          <div className="flex flex-col ml-24 w-full items-end lg:items-start justify-end lg:justify-between lg:flex-row lg:mt-12">
+            <SearchBar
+              placeHolder="Search transactions"
+              setSearch={setSearch}
+              className="w-96 order-last lg:order-first pr-6"
             />
-          ) : null}
+            {query.isSuccess ? (
+              <OptionalPaginator
+                current={page}
+                setPage={setPage}
+                total={query.data.total}
+                pages={query.data.pages}
+                perPage={query.data.perPage}
+              />
+            ) : (
+              <div className="block order-first lg:order-last"></div>
+            )}
+          </div>
         </PageTitle>
       }
     >
+      {/* <SearchBar placeHolder="Search transactions" setSearch={setSearch} className="w-1/2" /> */}
       <OnQuerySuccess query={query}>
         {(query) => <TransactionListOnQuerySuccess query={query} filters={filters} setFilters={setFilters} />}
       </OnQuerySuccess>

harp_apps/dashboard/frontend/src/Pages/Transactions/__snapshots__/TransactionListPage.test.tsx.snap

@@ -4,21 +4,51 @@ exports[`renders well when the query is successful 1`] = `
 <div>
   <main>
     <div
-      class="mt-4 mb-4"
+      class="mt-4 flex"
     >
       <div
-        class="float-end"
-      />
-      <h1
-        class="css-9lrcch"
+        class="flex flex-col"
       >
-        Transactions
-      </h1>
-      <p
-        class="css-11bp3eh"
+        <h1
+          class="css-9lrcch"
+        >
+          Transactions
+        </h1>
+        <p
+          class="css-11bp3eh"
+        >
+          Explore transactions that went through the proxy
+        </p>
+      </div>
+      <div
+        class="flex flex-col ml-24 w-full items-end lg:items-start justify-end lg:justify-between lg:flex-row lg:mt-12"
       >
-        Explore transactions that went through the proxy
-      </p>
+        <div
+          class="w-96 order-last lg:order-first pr-6"
+        >
+          <div
+            class="mt-2 space-x-1 py-1 pl-1.5 flex text-base items-center rounded ring-1 text-gray-900 ring-inset ring-gray-200 placeholder:text-gray-400"
+          >
+            <input
+              autocomplete="off"
+              class="overflow-ellipsis w-full !border-0 !p-0 focus:!ring-0 !ml-1"
+              id="search"
+              name="search"
+              placeholder="Search transactions"
+              type="text"
+            />
+            <div
+              class="inset-y-0 right-0 flex py-1.5 pr-1.5 hover:cursor-pointer"
+            >
+              <kbd
+                class="inline-flex items-center rounded border border-gray-200 px-1 py-0.5 font-sans text-sm text-gray-400"
+              >
+                Enter
+              </kbd>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       class="mt-4"

harp_apps/dashboard/frontend/src/main.tsx

@@ -52,7 +52,6 @@ async function enableMocking() {
   // This would allow to modify request handlers on runtime.
   window.msw = {
     worker,
-
     http,
     HttpResponse,
   }

harp_apps/dashboard/frontend/src/ui/Components/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,9 @@
+import { SearchBar } from "./SearchBar"
+
+export const Default = () => {
+  return (
+    <>
+      <SearchBar placeHolder="Search" className="w-1/2" />
+    </>
+  )
+}

harp_apps/dashboard/frontend/src/ui/Components/SearchBar/SearchBar.test.tsx

@@ -0,0 +1,11 @@
+import { render } from "@testing-library/react"
+import { expect, describe, it } from "vitest"
+
+import { SearchBar } from "./SearchBar"
+
+describe("SearchBar", () => {
+  it("renders correctly", () => {
+    const { container } = render(<SearchBar />)
+    expect(container).toMatchSnapshot()
+  })
+})

harp_apps/dashboard/frontend/src/ui/Components/SearchBar/SearchBar.tsx

@@ -0,0 +1,55 @@
+import { useRef } from "react"
+
+interface SearchBarProps {
+  label?: string
+  placeHolder?: string
+  setSearch?: (value: string) => void
+  className?: string
+}
+
+export const SearchBar = ({ label, setSearch, className, placeHolder }: SearchBarProps) => {
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      if (setSearch) {
+        setSearch(e.currentTarget.value)
+      }
+    }
+  }
+
+  const handleSearchClick = () => {
+    if (inputRef.current) {
+      if (setSearch) {
+        setSearch(inputRef.current.value)
+      }
+    }
+  }
+
+  return (
+    <div className={className}>
+      {label && (
+        <label htmlFor="search" className="block text-sm font-medium leading-6 text-gray-900">
+          {label}
+        </label>
+      )}
+      <div className="mt-2 space-x-1 py-1 pl-1.5 flex text-base items-center rounded ring-1 text-gray-900 ring-inset ring-gray-200 placeholder:text-gray-400">
+        <input
+          ref={inputRef}
+          type="text"
+          autoComplete="off"
+          name="search"
+          id="search"
+          placeholder={placeHolder}
+          onKeyDown={handleKeyPress}
+          className="overflow-ellipsis w-full !border-0 !p-0 focus:!ring-0 !ml-1"
+        />
+        <div onClick={handleSearchClick} className="inset-y-0 right-0 flex py-1.5 pr-1.5 hover:cursor-pointer">
+          <kbd className="inline-flex items-center rounded border border-gray-200 px-1 py-0.5 font-sans text-sm text-gray-400">
+            Enter
+          </kbd>
+        </div>
+      </div>
+    </div>
+  )
+}