Scopes: Implement clear search for dashboards list (#89657)

public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import { GrafanaTheme2, Scope, urlUtil } from '@grafana/data';
 import { SceneComponentProps, SceneObjectBase, SceneObjectState } from '@grafana/scenes';
-import { CustomScrollbar, Icon, Input, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { CustomScrollbar, Icon, IconButton, Input, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { t } from 'app/core/internationalization';
 
@@ -62,7 +62,7 @@ export class ScopesDashboardsScene extends SceneObjectBase<ScopesDashboardsScene
 }
 
 export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<ScopesDashboardsScene>) {
-  const { filteredDashboards, isLoading } = model.useState();
+  const { filteredDashboards, isLoading, searchQuery } = model.useState();
   const styles = useStyles2(getStyles);
 
   const [queryParams] = useQueryParams();
@@ -75,6 +75,17 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
           placeholder={t('scopes.suggestedDashboards.search', 'Search')}
           disabled={isLoading}
           data-testid="scopes-dashboards-search"
+          value={searchQuery}
+          suffix={
+            searchQuery && !isLoading ? (
+              <IconButton
+                aria-label={t('scopes.suggestedDashboards.clear', 'Clear search')}
+                name="times"
+                data-testid="scopes-dashboards-clear"
+                onClick={() => model.changeSearchQuery('')}
+              />
+            ) : undefined
+          }
           onChange={(evt) => model.changeSearchQuery(evt.currentTarget.value)}
         />
       </div>

public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx

@@ -46,6 +46,7 @@ import {
   queryDashboardsContainer,
   queryDashboardsExpand,
   renderDashboard,
+  getDashboardsClear,
 } from './testUtils';
 
 jest.mock('@grafana/runtime', () => ({
@@ -280,6 +281,22 @@ describe('ScopesScene', () => {
         expect(queryDashboard('2')).not.toBeInTheDocument();
       });
 
+      it('Clears the filter', async () => {
+        await userEvents.click(getDashboardsExpand());
+        await userEvents.click(getFiltersInput());
+        await userEvents.click(getApplicationsExpand());
+        await userEvents.click(getApplicationsSlothPictureFactorySelect());
+        await userEvents.click(getFiltersApply());
+        expect(getDashboard('1')).toBeInTheDocument();
+        expect(getDashboard('2')).toBeInTheDocument();
+        await userEvents.type(getDashboardsSearch(), '1');
+        expect(queryDashboard('2')).not.toBeInTheDocument();
+        await userEvents.click(getDashboardsClear());
+        expect(getDashboardsSearch().value).toBe('');
+        expect(getDashboard('1')).toBeInTheDocument();
+        expect(getDashboard('2')).toBeInTheDocument();
+      });
+
       it('Deduplicates the dashboards list', async () => {
         await userEvents.click(getDashboardsExpand());
         await userEvents.click(getFiltersInput());

public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx

@@ -309,6 +309,7 @@ const selectors = {
     expand: 'scopes-dashboards-expand',
     container: 'scopes-dashboards-container',
     search: 'scopes-dashboards-search',
+    clear: 'scopes-dashboards-clear',
     loading: 'scopes-dashboards-loading',
     dashboard: (uid: string) => `scopes-dashboards-${uid}`,
   },
@@ -323,7 +324,8 @@ export const queryDashboardsExpand = () => screen.queryByTestId(selectors.dashbo
 export const getDashboardsExpand = () => screen.getByTestId(selectors.dashboards.expand);
 export const queryDashboardsContainer = () => screen.queryByTestId(selectors.dashboards.container);
 export const getDashboardsContainer = () => screen.getByTestId(selectors.dashboards.container);
-export const getDashboardsSearch = () => screen.getByTestId(selectors.dashboards.search);
+export const getDashboardsSearch = () => screen.getByTestId<HTMLInputElement>(selectors.dashboards.search);
+export const getDashboardsClear = () => screen.getByTestId(selectors.dashboards.clear);
 export const queryAllDashboard = (uid: string) => screen.queryAllByTestId(selectors.dashboards.dashboard(uid));
 export const queryDashboard = (uid: string) => screen.queryByTestId(selectors.dashboards.dashboard(uid));
 export const getDashboard = (uid: string) => screen.getByTestId(selectors.dashboards.dashboard(uid));

public/locales/en-US/grafana.json

@@ -1654,6 +1654,7 @@
       "title": "Select scopes"
     },
     "suggestedDashboards": {
+      "clear": "Clear search",
       "loading": "Loading dashboards",
       "search": "Search",
       "toggle": {

public/locales/pseudo-LOCALE/grafana.json

@@ -1654,6 +1654,7 @@
       "title": "Ŝęľęčŧ şčőpęş"
     },
     "suggestedDashboards": {
+      "clear": "Cľęäř şęäřčĥ",
       "loading": "Ŀőäđįʼnģ đäşĥþőäřđş",
       "search": "Ŝęäřčĥ",
       "toggle": {