[Security Solution][Endpoint] Fix Endpoint List <SearchBar>
to ensure that page_index
is reset when new KQL is entered (#106918) (#107073)
* Fix Endpoint List `<SearchBar>` to ensure that `page_index` is reset to 0 on enter Co-authored-by: Paul Tavares <56442535+paul-tavares@users.noreply.github.com>
This commit is contained in:
parent
f60b00ba9b
commit
aeb1fa0d37
2 changed files with 113 additions and 1 deletions
|
@ -0,0 +1,108 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License
|
||||
* 2.0; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
AppContextTestRender,
|
||||
createAppRootMockRenderer,
|
||||
} from '../../../../../common/mock/endpoint';
|
||||
import { endpointPageHttpMock } from '../../mocks';
|
||||
import { act, waitFor, cleanup } from '@testing-library/react';
|
||||
import { getEndpointListPath } from '../../../../common/routing';
|
||||
import { AdminSearchBar } from './search_bar';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
import { uiQueryParams } from '../../store/selectors';
|
||||
import { EndpointIndexUIQueryParams } from '../../types';
|
||||
|
||||
describe('when rendering the endpoint list `AdminSearchBar`', () => {
|
||||
let render: (
|
||||
urlParams?: EndpointIndexUIQueryParams
|
||||
) => Promise<ReturnType<AppContextTestRender['render']>>;
|
||||
let waitForAction: AppContextTestRender['middlewareSpy']['waitForAction'];
|
||||
let renderResult: ReturnType<AppContextTestRender['render']>;
|
||||
let store: AppContextTestRender['store'];
|
||||
|
||||
const getQueryParamsFromStore = () => uiQueryParams(store.getState().management.endpoints);
|
||||
|
||||
const submitQuery = async (kqlQueryValue: string): Promise<void> => {
|
||||
const changeUrlActionDone = waitForAction('userChangedUrl');
|
||||
const searchBarInput = renderResult.getByTestId('adminSearchBar') as HTMLTextAreaElement;
|
||||
const querySubmitButton = renderResult.getByTestId('querySubmitButton') as HTMLButtonElement;
|
||||
|
||||
act(() => {
|
||||
fireEvent.change(searchBarInput, {
|
||||
target: {
|
||||
value: kqlQueryValue,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// Wait for the search bar to actually display our value
|
||||
await act(async () => {
|
||||
await waitFor(() => !!searchBarInput.value);
|
||||
});
|
||||
|
||||
await act(async () => {
|
||||
fireEvent.click(querySubmitButton);
|
||||
await changeUrlActionDone;
|
||||
});
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
const mockedContext = createAppRootMockRenderer();
|
||||
|
||||
waitForAction = mockedContext.middlewareSpy.waitForAction;
|
||||
store = mockedContext.store;
|
||||
endpointPageHttpMock(mockedContext.coreStart.http);
|
||||
|
||||
render = async (urlParams = {}) => {
|
||||
mockedContext.history.push(getEndpointListPath({ ...urlParams, name: 'endpointList' }));
|
||||
renderResult = mockedContext.render(<AdminSearchBar />);
|
||||
// The SearchBar is rendered using `React.lazy` so we need to wait for it to actually show up
|
||||
await waitFor(() => renderResult.getByTestId('adminSearchBar'));
|
||||
return renderResult;
|
||||
};
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it('should pre-populate with value from url', async () => {
|
||||
await render({ admin_query: "(language:kuery,query:'foo')" });
|
||||
const searchBarInput = renderResult.getByTestId('adminSearchBar') as HTMLTextAreaElement;
|
||||
|
||||
expect(searchBarInput.value).toBe('foo');
|
||||
});
|
||||
|
||||
it('should update the url with the `admin_query` param if a query was entered', async () => {
|
||||
await render();
|
||||
await submitQuery('host.name: foo');
|
||||
|
||||
expect(getQueryParamsFromStore().admin_query).toBe("(language:kuery,query:'host.name: foo')");
|
||||
});
|
||||
|
||||
it.each([
|
||||
['nothing', ''],
|
||||
['spaces', ' '],
|
||||
])(
|
||||
'should update the url and exclude the `admin_query` param when %s was entered',
|
||||
async (_, value) => {
|
||||
await render();
|
||||
await submitQuery(value);
|
||||
|
||||
expect(getQueryParamsFromStore().admin_query).toBe(undefined);
|
||||
}
|
||||
);
|
||||
|
||||
it('should reset the `page_index` to zero', async () => {
|
||||
await render({ page_index: '10' });
|
||||
await submitQuery('foo');
|
||||
|
||||
expect(getQueryParamsFromStore().page_index).toBe('0');
|
||||
});
|
||||
});
|
|
@ -37,7 +37,11 @@ export const AdminSearchBar = memo(() => {
|
|||
history.push(
|
||||
urlFromQueryParams({
|
||||
...queryParams,
|
||||
admin_query: encode((params.query as unknown) as RisonValue),
|
||||
// ensure we reset the page back to the first one, so that user id not (possibly) being left on an invalid page
|
||||
page_index: '0',
|
||||
...(params.query?.query.trim()
|
||||
? { admin_query: encode((params.query as unknown) as RisonValue) }
|
||||
: {}),
|
||||
})
|
||||
);
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue