jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change(ui): dashboard header toggle based on data

Browse source
This commit is contained in:
Shekar Siri 2024-07-05 15:03:37 +02:00
parent f2b310d205
commit 733a6f8c6e
1 changed files with 26 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
frontend/app/components/Dashboard/components/DashboardList/Header.tsx
View file

@ -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);