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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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>
);

View File

@ -1599,6 +1599,9 @@
"delete": "Delete permanently",
"restore": "Restore"
},
"page": {
"empty-state": "You haven't deleted any dashboards recently."
},
"permanently-delete-modal": {
"confirm-text": "Delete",
"delete-button": "Delete",

View File

@ -1599,6 +1599,9 @@
"delete": "Đęľęŧę pęřmäʼnęʼnŧľy",
"restore": "Ŗęşŧőřę"
},
"page": {
"empty-state": "Ÿőū ĥävęʼn'ŧ đęľęŧęđ äʼny đäşĥþőäřđş řęčęʼnŧľy."
},
"permanently-delete-modal": {
"confirm-text": "Đęľęŧę",
"delete-button": "Đęľęŧę",