From 09ec999862cb54543e0e2b5ec626286a77682ccd Mon Sep 17 00:00:00 2001 From: Bogdan Matei Date: Tue, 25 Jun 2024 15:22:02 +0300 Subject: [PATCH] Scopes: Implement clear search for dashboards list (#89657) --- .../scene/Scopes/ScopesDashboardsScene.tsx | 15 +++++++++++++-- .../scene/Scopes/ScopesScene.test.tsx | 17 +++++++++++++++++ .../dashboard-scene/scene/Scopes/testUtils.tsx | 4 +++- public/locales/en-US/grafana.json | 1 + public/locales/pseudo-LOCALE/grafana.json | 1 + 5 files changed, 35 insertions(+), 3 deletions(-) diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx index 6404806aa6b..3fa727e583b 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx +++ b/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) { - 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 model.changeSearchQuery('')} + /> + ) : undefined + } onChange={(evt) => model.changeSearchQuery(evt.currentTarget.value)} /> diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx index 418414da702..a51158e3bb6 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx +++ b/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()); diff --git a/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx b/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx index c0f389f0616..8cd17827854 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx +++ b/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(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)); diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index db4af3a4bba..33a4cc8b5da 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -1654,6 +1654,7 @@ "title": "Select scopes" }, "suggestedDashboards": { + "clear": "Clear search", "loading": "Loading dashboards", "search": "Search", "toggle": { diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json index b97f6522f70..5abff9aff62 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -1654,6 +1654,7 @@ "title": "Ŝęľęčŧ şčőpęş" }, "suggestedDashboards": { + "clear": "Cľęäř şęäřčĥ", "loading": "Ŀőäđįʼnģ đäşĥþőäřđş", "search": "Ŝęäřčĥ", "toggle": {