RestoreDashboards: Add search (#89692)

* feat: add search

* feat: run i18n extraction

* refactor: styling issue for smaller screen sizes

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 }) => (

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,
+    },
   }),
 });

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

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