IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

FolderPicker: Fixes issue with typing to search for folder (#59434)

Browse Source
This commit is contained in:
Joao Silva 2022-12-01 13:34:07 +01:00 committed by GitHub
parent dab83c6855
commit 379cde3a72
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/app/core/components/Select/FolderPicker.test.tsx
View File

@ -138,6 +138,26 @@ describe('FolderPicker', () => {
expect(pickerOptions[0]).not.toHaveTextContent('General'); expect(pickerOptions[0]).not.toHaveTextContent('General');
}); });
it('should return the correct search results when typing in the select', async () => {
jest.spyOn(api, 'searchFolders').mockImplementation((query: string) => {
return Promise.resolve(
[
{ title: 'Dash Test', uid: 'xMsQdBfWz' } as DashboardSearchHit,
{ title: 'Dash Two', uid: 'wfTJJL5Wz' } as DashboardSearchHit,
].filter((dash) => dash.title.indexOf(query) > -1)
);
});
jest.spyOn(contextSrv, 'hasAccess').mockReturnValue(false);
const onChangeFn = jest.fn();
render(<FolderPicker onChange={onChangeFn} />);
const pickerContainer = screen.getByLabelText(selectors.components.FolderPicker.input);
await userEvent.type(pickerContainer, 'Test');
expect(await screen.findByText('Dash Test')).toBeInTheDocument();
expect(screen.queryByText('Dash Two')).not.toBeInTheDocument();
});
}); });
describe('getInitialValues', () => { describe('getInitialValues', () => {

2
public/app/core/components/Select/FolderPicker.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { debounce } from 'lodash'; import debounce from 'debounce-promise';
import React, { useState, useEffect, useMemo, useCallback, FormEvent } from 'react'; import React, { useState, useEffect, useMemo, useCallback, FormEvent } from 'react';
import { useAsync } from 'react-use'; import { useAsync } from 'react-use';

7
public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
View File

@ -1,5 +1,5 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { debounce } from 'lodash'; import debounce from 'debounce-promise';
import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react'; import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data'; import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
@ -31,10 +31,7 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
(searchString: string) => loadOptionsAsync(libraryPanel.uid, searchString, setLoading), (searchString: string) => loadOptionsAsync(libraryPanel.uid, searchString, setLoading),
[libraryPanel.uid] [libraryPanel.uid]
); );
const debouncedLoadOptions = useMemo( const debouncedLoadOptions = useMemo(() => debounce(loadOptions, 300, { leading: true }), [loadOptions]);
() => debounce(loadOptions, 300, { leading: true, trailing: true }),
[loadOptions]
);
const onViewPanel = (e: MouseEvent<HTMLButtonElement>) => { const onViewPanel = (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault(); e.preventDefault();
locationService.push(urlUtil.renderUrl(`/d/${option?.value?.uid}`, {})); locationService.push(urlUtil.renderUrl(`/d/${option?.value?.uid}`, {}));