From c3337c39b18fde14fd27bdd03127430bcefcd562 Mon Sep 17 00:00:00 2001
From: Laura Benz <48948963+L-M-K-B@users.noreply.github.com>
Date: Thu, 27 Jun 2024 14:00:12 +0200
Subject: [PATCH] RestoreDashboards: Add search (#89692)

* feat: add search

* feat: run i18n extraction

* refactor: styling issue for smaller screen sizes
---
 .../browse-dashboards/RecentlyDeletedPage.tsx | 34 ++++++++++++-------
 .../components/RecentlyDeletedActions.tsx     |  6 +++-
 public/locales/en-US/grafana.json             |  5 +++
 public/locales/pseudo-LOCALE/grafana.json     |  5 +++
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx b/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx
index 0b952cead08..fd243854acc 100644
--- a/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx
+++ b/public/app/features/browse-dashboards/RecentlyDeletedPage.tsx
@@ -1,7 +1,7 @@
 import { memo, useEffect } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
-import { EmptyState } from '@grafana/ui';
+import { FilterInput, EmptyState, Stack } 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';
@@ -53,18 +53,26 @@ const RecentlyDeletedPage = memo(() => {
       <Page.Contents>
         {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}
-            />
+            <Stack direction="column">
+              <FilterInput
+                placeholder={t('recentlyDeleted.filter.placeholder', 'Search for dashboards')}
+                value={searchState.query}
+                escapeRegex={false}
+                onChange={stateManager.onQueryChange}
+              />
+              <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}
+              />
+            </Stack>
             <RecentlyDeletedActions />
             <AutoSizer>
               {({ width, height }) => (
diff --git a/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx b/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx
index a34fef11edc..e2c087e3718 100644
--- a/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx
+++ b/public/app/features/browse-dashboards/components/RecentlyDeletedActions.tsx
@@ -117,6 +117,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     flexDirection: 'row',
     gap: theme.spacing(1),
-    marginBottom: theme.spacing(2),
+    margin: theme.spacing(2, 0),
+
+    [theme.breakpoints.up('md')]: {
+      marginTop: 0,
+    },
   }),
 });
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index f695c4d2c64..44c650bb277 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -1625,6 +1625,11 @@
       "title": "Restore Dashboards"
     }
   },
+  "recentlyDeleted": {
+    "filter": {
+      "placeholder": "Search for dashboards"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Auto refresh turned off. Choose refresh time interval",
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index 5041043b211..0de710f6910 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1625,6 +1625,11 @@
       "title": "Ŗęşŧőřę Đäşĥþőäřđş"
     }
   },
+  "recentlyDeleted": {
+    "filter": {
+      "placeholder": "Ŝęäřčĥ ƒőř đäşĥþőäřđş"
+    }
+  },
   "refresh-picker": {
     "aria-label": {
       "choose-interval": "Åūŧő řęƒřęşĥ ŧūřʼnęđ őƒƒ. Cĥőőşę řęƒřęşĥ ŧįmę įʼnŧęřväľ",