-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Security solution][Endpoint] New Event Filters sub-section under Adm…
…inistration area (#97903) * Add Event Filters section to the Admin area (behind feature flag) * new `PaginatedContent` generic component * Refactor Trusted Apps grid view to use PaginatedContent * Refactor usages of `getTestId()` to use new hook
- Loading branch information
1 parent
c9ce295
commit 485692d
Showing
27 changed files
with
1,752 additions
and
751 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
x-pack/plugins/security_solution/public/management/components/hooks/use_test_id_generator.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| /* | ||
| * 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 { useCallback } from 'react'; | ||
|
|
||
| /** | ||
| * Returns a callback that can be used to generate new test ids (values for `data-test-subj`) that | ||
| * are prefix with a standard string. Will only generate test ids if a prefix is defiened. | ||
| * Use it in complex component where you might want to expose a `data-test-subj` prop and use that | ||
| * as a prefix to several other test ids inside of the complex component. | ||
| * | ||
| * @example | ||
| * // `props['data-test-subj'] = 'abc'; | ||
| * const getTestId = useTestIdGenerator(props['data-test-subj']); | ||
| * getTestId('body'); // abc-body | ||
| * getTestId('some-other-ui-section'); // abc-some-other-ui-section | ||
| * | ||
| * @example | ||
| * // `props['data-test-subj'] = undefined; | ||
| * const getTestId = useTestIdGenerator(props['data-test-subj']); | ||
| * getTestId('body'); // undefined | ||
| */ | ||
| export const useTestIdGenerator = (prefix?: string): ((suffix: string) => string | undefined) => { | ||
| return useCallback( | ||
| (suffix: string): string | undefined => { | ||
| if (prefix) { | ||
| return `${prefix}-${suffix}`; | ||
| } | ||
| }, | ||
| [prefix] | ||
| ); | ||
| }; |
8 changes: 8 additions & 0 deletions
8
x-pack/plugins/security_solution/public/management/components/paginated_content/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| /* | ||
| * 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. | ||
| */ | ||
|
|
||
| export * from './paginated_content'; |
148 changes: 148 additions & 0 deletions
148
...curity_solution/public/management/components/paginated_content/paginated_content.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| /* | ||
| * 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, { FC } from 'react'; | ||
| import { AppContextTestRender, createAppRootMockRenderer } from '../../../common/mock/endpoint'; | ||
| import { PaginatedContentProps, PaginatedContent } from './paginated_content'; | ||
| import { act, fireEvent } from '@testing-library/react'; | ||
|
|
||
| describe('when using PaginatedContent', () => { | ||
| interface Foo { | ||
| id: string; | ||
| } | ||
|
|
||
| interface ItemComponentProps { | ||
| item: Foo; | ||
| } | ||
|
|
||
| type ItemComponentType = FC<ItemComponentProps>; | ||
|
|
||
| type PropsForPaginatedContent = PaginatedContentProps<Foo, FC<ItemComponentProps>>; | ||
|
|
||
| const ItemComponent: ItemComponentType = jest.fn((props) => ( | ||
| <div className="foo-item">{'hi'}</div> | ||
| )); | ||
|
|
||
| const getPropsToRenderItem: PropsForPaginatedContent['itemComponentProps'] = jest.fn( | ||
| (item: Foo) => { | ||
| return { item }; | ||
| } | ||
| ); | ||
|
|
||
| let render: ( | ||
| additionalProps?: Partial<PropsForPaginatedContent> | ||
| ) => ReturnType<AppContextTestRender['render']>; | ||
| let renderResult: ReturnType<typeof render>; | ||
| let onChangeHandler: PropsForPaginatedContent['onChange']; | ||
|
|
||
| beforeEach(() => { | ||
| const mockedContext = createAppRootMockRenderer(); | ||
|
|
||
| onChangeHandler = jest.fn(); | ||
|
|
||
| render = (additionalProps) => { | ||
| const props: PropsForPaginatedContent = { | ||
| items: Array.from({ length: 10 }, (v, i) => ({ id: String(i) })), | ||
| ItemComponent, | ||
| onChange: onChangeHandler, | ||
| itemComponentProps: getPropsToRenderItem, | ||
| pagination: { | ||
| pageIndex: 0, | ||
| pageSizeOptions: [5, 10, 20], | ||
| pageSize: 5, | ||
| totalItemCount: 10, | ||
| }, | ||
| 'data-test-subj': 'test', | ||
| ...(additionalProps ?? {}), | ||
| }; | ||
| renderResult = mockedContext.render(<PaginatedContent<Foo, ItemComponentType> {...props} />); | ||
| return renderResult; | ||
| }; | ||
| }); | ||
|
|
||
| it('should render items using provided component', () => { | ||
| render({ itemId: 'id' }); // Using `itemsId` prop just to ensure that branch of code is executed | ||
|
|
||
| expect(renderResult.baseElement.querySelectorAll('.foo-item').length).toBe(10); | ||
| expect(getPropsToRenderItem).toHaveBeenNthCalledWith(1, { id: '0' }); | ||
| expect(ItemComponent).toHaveBeenNthCalledWith(1, { item: { id: '0' } }, {}); | ||
| expect(renderResult.getByTestId('test-footer')).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should show default "no items found message" when no data to display', () => { | ||
| render({ items: [] }); | ||
|
|
||
| expect(renderResult.getByText('No items found')).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should allow for a custom no items found message to be displayed', () => { | ||
| render({ items: [], noItemsMessage: 'no Foo found!' }); | ||
|
|
||
| expect(renderResult.getByText('no Foo found!')).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should show error if one is defined (even if `items` is not empty)', () => { | ||
| render({ error: 'something is wrong with foo' }); | ||
|
|
||
| expect(renderResult.getByText('something is wrong with foo')).not.toBeNull(); | ||
| expect(renderResult.baseElement.querySelectorAll('.foo-item').length).toBe(0); | ||
| }); | ||
|
|
||
| it('should show a progress bar if `loading` is set to true', () => { | ||
| render({ loading: true }); | ||
|
|
||
| expect(renderResult.baseElement.querySelector('.euiProgress')).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should NOT show a pagination footer if no props are defined for `pagination`', () => { | ||
| render({ pagination: undefined }); | ||
|
|
||
| expect(renderResult.queryByTestId('test-footer')).toBeNull(); | ||
| }); | ||
|
|
||
| it('should apply `contentClassName` if one is defined', () => { | ||
| render({ contentClassName: 'foo-content' }); | ||
|
|
||
| expect(renderResult.baseElement.querySelector('.foo-content')).not.toBeNull(); | ||
| }); | ||
|
|
||
| it('should call onChange when pagination is changed', () => { | ||
| render(); | ||
|
|
||
| act(() => { | ||
| fireEvent.click(renderResult.getByTestId('pagination-button-next')); | ||
| }); | ||
|
|
||
| expect(onChangeHandler).toHaveBeenCalledWith({ | ||
| pageIndex: 1, | ||
| pageSize: 5, | ||
| }); | ||
| }); | ||
|
|
||
| it('should call onChange when page size is changed', () => { | ||
| render(); | ||
|
|
||
| act(() => { | ||
| fireEvent.click(renderResult.getByTestId('tablePaginationPopoverButton')); | ||
| }); | ||
|
|
||
| act(() => { | ||
| fireEvent.click(renderResult.getByTestId('tablePagination-10-rows')); | ||
| }); | ||
|
|
||
| expect(onChangeHandler).toHaveBeenCalledWith({ | ||
| pageIndex: 0, | ||
| pageSize: 10, | ||
| }); | ||
| }); | ||
|
|
||
| it('should ignore items, error, noItemsMessage when `children` is used', () => { | ||
| render({ children: <div data-test-subj="custom-content">{'children being used here'}</div> }); | ||
| expect(renderResult.getByTestId('custom-content')).not.toBeNull(); | ||
| expect(renderResult.baseElement.querySelectorAll('.foo-item').length).toBe(0); | ||
| }); | ||
| }); |
Oops, something went wrong.