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

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

View File

@ -138,6 +138,26 @@ describe('FolderPicker', () => {
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', () => {

View File

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

View File

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