From 5da94bb66936454ba92e02b54f74329a29b5166b Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Tue, 25 Jun 2024 15:04:20 +0200
Subject: [PATCH] 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>
---
 .../browse-dashboards/RecentlyDeletedPage.tsx | 65 ++++++++++++-------
 public/locales/en-US/grafana.json             |  3 +
 public/locales/pseudo-LOCALE/grafana.json     |  3 +
 3 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx b/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx
index 9e01928089d..0b952cead08 100644
--- a/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx
+++ b/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx
@@ -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>
   );
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 33a4cc8b5da..cb90d9da176 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -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",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 5abff9aff62..b7a08ac4f46 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -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": "Đęľęŧę",