RestoreDashboards: Add an empty state (#89662)

* feat: add empty state

* fix: flickering

* Update public/app/features/browse-dashboards/RecentlyDeletedPage.tsx

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>

---------

Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
This commit is contained in:
Laura Benz
2024-06-25 15:04:20 +02:00
committed by GitHub
parent 13a4a46cc1
commit 5da94bb669
3 changed files with 48 additions and 23 deletions

View File

@@ -1,7 +1,9 @@
import { memo, useEffect } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { EmptyState } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
import { t } from 'app/core/internationalization';
import { ActionRow } from 'app/features/search/page/components/ActionRow';
import { getGrafanaSearcher } from 'app/features/search/service';
@@ -33,33 +35,50 @@ const RecentlyDeletedPage = memo(() => {
);
}, [dispatch, stateManager]);
if (searchState.loading === false && searchState.result?.totalRows === 0) {
return (
<Page navId="dashboards/recently-deleted">
<Page.Contents>
<EmptyState
variant="completed"
message={t('recently-deleted.page.empty-state', "You haven't deleted any dashboards recently.")}
/>
</Page.Contents>
</Page>
);
}
return (
<Page navId="dashboards/recently-deleted">
<Page.Contents>
<ActionRow
state={searchState}
getTagOptions={stateManager.getTagOptions}
getSortOptions={getGrafanaSearcher().getSortOptions}
sortPlaceholder={getGrafanaSearcher().sortPlaceholder}
onLayoutChange={stateManager.onLayoutChange}
onSortChange={stateManager.onSortChange}
onTagFilterChange={stateManager.onTagFilterChange}
onDatasourceChange={stateManager.onDatasourceChange}
onPanelTypeChange={stateManager.onPanelTypeChange}
onSetIncludePanels={stateManager.onSetIncludePanels}
/>
<RecentlyDeletedActions />
<AutoSizer>
{({ width, height }) => (
<SearchView
canSelect={canSelect}
width={width}
height={height}
searchStateManager={stateManager}
searchState={searchState}
{searchState.result && (
<>
<ActionRow
state={searchState}
getTagOptions={stateManager.getTagOptions}
getSortOptions={getGrafanaSearcher().getSortOptions}
sortPlaceholder={getGrafanaSearcher().sortPlaceholder}
onLayoutChange={stateManager.onLayoutChange}
onSortChange={stateManager.onSortChange}
onTagFilterChange={stateManager.onTagFilterChange}
onDatasourceChange={stateManager.onDatasourceChange}
onPanelTypeChange={stateManager.onPanelTypeChange}
onSetIncludePanels={stateManager.onSetIncludePanels}
/>
)}
</AutoSizer>
<RecentlyDeletedActions />
<AutoSizer>
{({ width, height }) => (
<SearchView
canSelect={canSelect}
width={width}
height={height}
searchStateManager={stateManager}
searchState={searchState}
/>
)}
</AutoSizer>
</>
)}
</Page.Contents>
</Page>
);