diff --git a/public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesDashboardsScene.tsx index 3fa727e583b..665561937ce 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, IconButton, Input, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; +import { CustomScrollbar, FilterInput, LoadingPlaceholder, useStyles2 } from '@grafana/ui'; import { useQueryParams } from 'app/core/hooks/useQueryParams'; import { t } from 'app/core/internationalization'; @@ -70,23 +70,12 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps
- } - placeholder={t('scopes.suggestedDashboards.search', 'Search')} + model.changeSearchQuery('')} - /> - ) : undefined - } - onChange={(evt) => model.changeSearchQuery(evt.currentTarget.value)} + data-testid="scopes-dashboards-search" + onChange={(value) => model.changeSearchQuery(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 839c76d5933..ae67ba1f558 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesScene.test.tsx @@ -45,7 +45,6 @@ import { queryDashboardsContainer, queryDashboardsExpand, renderDashboard, - getDashboardsClear, } from './testUtils'; jest.mock('@grafana/runtime', () => ({ @@ -286,22 +285,6 @@ 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/ScopesTreeLevel.tsx b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx index 399472cfa00..4c9963f1f53 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/ScopesTreeLevel.tsx @@ -1,10 +1,10 @@ import { css } from '@emotion/css'; import { debounce } from 'lodash'; -import { useMemo } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import Skeleton from 'react-loading-skeleton'; import { GrafanaTheme2 } from '@grafana/data'; -import { Checkbox, Icon, IconButton, Input, RadioButtonDot, useStyles2 } from '@grafana/ui'; +import { Checkbox, FilterInput, IconButton, RadioButtonDot, useStyles2 } from '@grafana/ui'; import { t, Trans } from 'app/core/internationalization'; import { NodesMap, TreeScope } from './types'; @@ -37,18 +37,24 @@ export function ScopesTreeLevel({ const scopeNames = scopes.map(({ scopeName }) => scopeName); const anyChildExpanded = childNodesArr.some(({ isExpanded }) => isExpanded); + const [queryValue, setQueryValue] = useState(node.query); + useEffect(() => { + setQueryValue(node.query); + }, [node.query]); const onQueryUpdate = useMemo(() => debounce(onNodeUpdate, 500), [onNodeUpdate]); return ( <> {!anyChildExpanded && ( - } - className={styles.searchInput} + onQueryUpdate(nodePath, true, evt.currentTarget.value)} + onChange={(value) => { + setQueryValue(value); + onQueryUpdate(nodePath, true, value); + }} /> )} diff --git a/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx b/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx index a66ed6a9e37..dc1fbe0d9fc 100644 --- a/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx +++ b/public/app/features/dashboard-scene/scene/Scopes/testUtils.tsx @@ -310,7 +310,6 @@ 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}`, }, @@ -326,13 +325,12 @@ export const getDashboardsExpand = () => screen.getByTestId(selectors.dashboards 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 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)); export const getApplicationsExpand = () => screen.getByTestId(selectors.tree.expand('applications')); -export const getApplicationsSearch = () => screen.getByTestId(selectors.tree.search('applications')); +export const getApplicationsSearch = () => screen.getByTestId(selectors.tree.search('applications')); export const queryApplicationsSlothPictureFactoryTitle = () => screen.queryByTestId(selectors.tree.title('applications-slothPictureFactory')); export const getApplicationsSlothPictureFactoryTitle = () => diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 42e225bb28c..7d5a1812623 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -1656,7 +1656,6 @@ "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 695dbb06a45..cee6b19f34e 100644 --- a/public/locales/pseudo-LOCALE/grafana.json +++ b/public/locales/pseudo-LOCALE/grafana.json @@ -1656,7 +1656,6 @@ "title": "Ŝęľęčŧ şčőpęş" }, "suggestedDashboards": { - "clear": "Cľęäř şęäřčĥ", "loading": "Ŀőäđįʼnģ đäşĥþőäřđş", "search": "Ŝęäřčĥ", "toggle": {