feat(studio): add reset filters button

pinoramajs · Jul 10, 2024 · 9b4c0b9 · 9b4c0b9
1 parent 2efc145
commit 9b4c0b9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 13 deletions.
diff --git a/packages/pinorama-studio/src/app.tsx b/packages/pinorama-studio/src/app.tsx
@@ -1,11 +1,30 @@
+import { useState } from "react"
 import { LogExplorer } from "./components/log-explorer"
+import type { SearchFilters } from "./components/log-explorer/components/log-filters/types"
 import { TitleBar } from "./components/title-bar/title-bar"
 
 function App() {
+  const [searchText, setSearchText] = useState<string>("")
+  const [filters, setFilters] = useState<SearchFilters>({})
+
+  const hasFilters = searchText.length > 0 || Object.keys(filters).length > 0
+  const handleResetFilters = () => {
+    setSearchText("")
+    setFilters({})
+  }
+
   return (
     <div className="h-screen w-full grid grid-rows-[48px_1fr]">
-      <TitleBar />
-      <LogExplorer />
+      {/* Header */}
+      <TitleBar hasFilters={hasFilters} onResetFilters={handleResetFilters} />
+
+      {/* Container */}
+      <LogExplorer
+        searchText={searchText}
+        filters={filters}
+        onSearchTextChange={setSearchText}
+        onFiltersChange={setFilters}
+      />
     </div>
   )
 }

diff --git a/packages/pinorama-studio/src/components/log-explorer/index.tsx b/packages/pinorama-studio/src/components/log-explorer/index.tsx
@@ -12,12 +12,17 @@ import { LogViewer } from "./components/log-viewer"
 import type { ImperativePanelHandle } from "react-resizable-panels"
 import type { SearchFilters } from "./components/log-filters/types"
 
-export function LogExplorer() {
+type LogExplorerProps = {
+  searchText: string
+  filters: SearchFilters
+  onSearchTextChange: (searchText: string) => void
+  onFiltersChange: (filters: SearchFilters) => void
+}
+
+export function LogExplorer(props: LogExplorerProps) {
   const filtersPanelRef = useRef<ImperativePanelHandle | null>(null)
   const detailsPanelRef = useRef<ImperativePanelHandle | null>(null)
 
-  const [searchText, setSearchText] = useState<string>("")
-  const [filters, setFilters] = useState<SearchFilters>({})
   const [rowSelection, setRowSelection] = useState(null)
 
   const handleFilterPanelToggle = useCallback(() => {
@@ -35,17 +40,17 @@ export function LogExplorer() {
     <ResizablePanelGroup direction="horizontal">
       <ResizablePanel ref={filtersPanelRef} defaultSize={20} collapsible>
         <LogFilters
-          searchText={searchText}
-          filters={filters}
-          onFiltersChange={setFilters}
+          searchText={props.searchText}
+          filters={props.filters}
+          onFiltersChange={props.onFiltersChange}
         />
       </ResizablePanel>
       <ResizableHandle withHandle />
       <ResizablePanel defaultSize={80} className="bg-muted/20">
         <LogViewer
-          searchText={searchText}
-          filters={filters}
-          onSearchTextChange={setSearchText}
+          searchText={props.searchText}
+          filters={props.filters}
+          onSearchTextChange={props.onSearchTextChange}
           onRowSelectionChange={setRowSelection}
           onFiltersPanelToggle={handleFilterPanelToggle}
         />

diff --git a/packages/pinorama-studio/src/components/title-bar/title-bar.tsx b/packages/pinorama-studio/src/components/title-bar/title-bar.tsx
@@ -1,8 +1,14 @@
 import { ConnectionStatus } from "../connection-status/connection-status"
 import { PinoramaLogo } from "../pinorama-logo/pinorama-logo"
 import { ThemeToggle } from "../theme-toggle/theme-toggle"
+import { Button } from "../ui/button"
 
-export function TitleBar() {
+type TitleBarProps = {
+  hasFilters: boolean
+  onResetFilters: () => void
+}
+
+export function TitleBar(props: TitleBarProps) {
   return (
     <div className="border-b bg-muted/20">
       <div className="relative flex items-center justify-between text-sm font-normale h-full px-3">
@@ -17,7 +23,16 @@ export function TitleBar() {
         </div>
 
         {/* Right */}
-        <div className="flex items-center">
+        <div className="flex items-center space-x-1.5">
+          {props.hasFilters && (
+            <Button
+              variant={"outline2"}
+              size={"sm"}
+              onClick={props.onResetFilters}
+            >
+              Reset Filters
+            </Button>
+          )}
           <ThemeToggle />
         </div>
       </div>