From 733a6f8c6edc8b4a3aeb4f80080599031b66dc80 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Fri, 5 Jul 2024 15:03:37 +0200
Subject: [PATCH] change(ui): dashboard header toggle based on data

---
 .../components/DashboardList/Header.tsx       | 44 +++++++++++--------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
index 8eb74ae6d..13cdeab99 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/Header.tsx
@@ -1,27 +1,35 @@
 import React from 'react';
 
-import {PageTitle} from 'UI';
+import { PageTitle } from 'UI';
 
 import DashboardSearch from './DashboardSearch';
-import CreateDashboardButton from "Components/Dashboard/components/CreateDashboardButton";
+import CreateDashboardButton from 'Components/Dashboard/components/CreateDashboardButton';
+import { useStore } from 'App/mstore';
+import { observer } from 'mobx-react-lite';
 
 function Header() {
-    return (
-        <>
-            <div className="flex items-center justify-between px-4 pb-2">
-                <div className="flex items-baseline mr-3">
-                    <PageTitle title="Dashboards"/>
-                </div>
-                <div className="ml-auto flex items-center">
-                    <CreateDashboardButton/>
-                    <div className="mx-2"></div>
-                    <div className="w-1/4" style={{minWidth: 300}}>
-                        <DashboardSearch/>
-                    </div>
-                </div>
+  const { dashboardStore } = useStore();
+  const list = dashboardStore.filteredList;
+  const dashboardsSearch = dashboardStore.filter.query;
+  const showSearch = list.length > 0 || dashboardsSearch;
+  return (
+    <>
+      <div className="flex items-center justify-between px-4 pb-2">
+        <div className="flex items-baseline mr-3">
+          <PageTitle title="Dashboards" />
+        </div>
+        {showSearch && (
+          <div className="ml-auto flex items-center">
+            <CreateDashboardButton />
+            <div className="mx-2"></div>
+            <div className="w-1/4" style={{ minWidth: 300 }}>
+              <DashboardSearch />
             </div>
-        </>
-    );
+          </div>
+        )}
+      </div>
+    </>
+  );
 }
 
-export default Header;
+export default observer(Header);