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>

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
+        {searchState.result && (
-          state={searchState}
+          <>
-          getTagOptions={stateManager.getTagOptions}
+            <ActionRow
-          getSortOptions={getGrafanaSearcher().getSortOptions}
+              state={searchState}
-          sortPlaceholder={getGrafanaSearcher().sortPlaceholder}
+              getTagOptions={stateManager.getTagOptions}
-          onLayoutChange={stateManager.onLayoutChange}
+              getSortOptions={getGrafanaSearcher().getSortOptions}
-          onSortChange={stateManager.onSortChange}
+              sortPlaceholder={getGrafanaSearcher().sortPlaceholder}
-          onTagFilterChange={stateManager.onTagFilterChange}
+              onLayoutChange={stateManager.onLayoutChange}
-          onDatasourceChange={stateManager.onDatasourceChange}
+              onSortChange={stateManager.onSortChange}
-          onPanelTypeChange={stateManager.onPanelTypeChange}
+              onTagFilterChange={stateManager.onTagFilterChange}
-          onSetIncludePanels={stateManager.onSetIncludePanels}
+              onDatasourceChange={stateManager.onDatasourceChange}
-        />
+              onPanelTypeChange={stateManager.onPanelTypeChange}
-        <RecentlyDeletedActions />
+              onSetIncludePanels={stateManager.onSetIncludePanels}
-        <AutoSizer>
-          {({ width, height }) => (
-            <SearchView
-              canSelect={canSelect}
-              width={width}
-              height={height}
-              searchStateManager={stateManager}
-              searchState={searchState}
             />
-          )}
+            <RecentlyDeletedActions />
-        </AutoSizer>
+            <AutoSizer>
+              {({ width, height }) => (
+                <SearchView
+                  canSelect={canSelect}
+                  width={width}
+                  height={height}
+                  searchStateManager={stateManager}
+                  searchState={searchState}
+                />
+              )}
+            </AutoSizer>
+          </>
+        )}
       </Page.Contents>
     </Page>
   );

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",

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": "Đęľęŧę",