Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Implementing external value actions for field values. (#11061)
* Create `MessageEventsContext` and `MessageEventsProvider` and configure provider for `Search`.` * Display summary for messages in message table based on related event type. * Defining type definitions for security content in plugin store. * Create test for `MessageEventsProvider`. * Fixing error which * Replacing enzyme with react testing library in `MessageTableEntry.test`. * Updating `MessageEventContext` type definition. * Add test for summary in `MessageTableEntry". * Smaller improvements. * Replacing usage of `securityContent` plugin store section with `messageEventTypes` and `externalValueActions` sections. * Removing not yet needed logic for external value actions. * Fixing linter warning. * Fixing comoponent name. * Removing not yet needed external value action plugin store type. * Change usage of message event types, because they are now Immutable.Map's * Add attributes `requiredFields` and `optionalFields` for `MessageEventType` type definition. * Do not use ImmutableJS for `MessageEventTypeContext` because it does not provide a huge benefit. * Displaying message summary template on summery hover. * Define message summary color based on message event type category. * Add missing import. * Creating context, provider and types for external value actions. * Adding `ExternalValueActionsProvider` for `Search`. * Addling logic for `ExternalValueActionsProvider` to receive actions for a field. * Displaying external value actions in value actions dropdown. * Creating tests for `ExternalValueActionsProvider`. * Unifying format of internal and external value actions. * Display icon for external links in field value action menu. * Removing dropdown menu title for external actions * Creating simple tests for `Action.tsx`. * Creating one central context for value and field actions, which replaces `ExternalValueActionsContext` * Removing not needed array flatten. * Creating separate component for `ActionDropdown` to ensure we are only iterating through all field and value actions when opening action dropdown. * Fixing `FieldAndValueActionsProvider.test`
- Loading branch information
Showing
12 changed files
with
619 additions
and
126 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
116 changes: 116 additions & 0 deletions
116
graylog2-web-interface/src/views/components/actions/Action.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,116 @@ | ||
| /* | ||
| * Copyright (C) 2020 Graylog, Inc. | ||
| * | ||
| * This program is free software: you can redistribute it and/or modify | ||
| * it under the terms of the Server Side Public License, version 1, | ||
| * as published by MongoDB, Inc. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
| * Server Side Public License for more details. | ||
| * | ||
| * You should have received a copy of the Server Side Public License | ||
| * along with this program. If not, see | ||
| * <http://www.mongodb.com/licensing/server-side-public-license>. | ||
| */ | ||
| import * as React from 'react'; | ||
| import { render, screen } from 'wrappedTestingLibrary'; | ||
| import userEvent from '@testing-library/user-event'; | ||
| import { createSimpleExternalValueAction } from 'fixtures/externalValueActions'; | ||
|
|
||
| import FieldAndValueActionsContext, { FieldAndValueActionsContextType } from 'views/components/contexts/FieldAndValueActionsContext'; | ||
| import FieldType from 'views/logic/fieldtypes/FieldType'; | ||
|
|
||
| import Action from './Action'; | ||
|
|
||
| jest.mock('views/logic/usePluginEntities', () => jest.fn(() => [])); | ||
|
|
||
| describe('Action', () => { | ||
| const exampleHandlerArgs = { | ||
| queryId: 'query-id', | ||
| field: 'field1', | ||
| value: 'field-value', | ||
| type: new FieldType('string', [], []), | ||
| contexts: {}, | ||
| }; | ||
|
|
||
| type Props = Partial<React.ComponentProps<typeof Action>> & { | ||
| fieldActions?: FieldAndValueActionsContextType['fieldActions'], | ||
| valueActions?: FieldAndValueActionsContextType['valueActions'], | ||
| } | ||
|
|
||
| const SimpleAction = ({ | ||
| children = 'The dropdown header', | ||
| handlerArgs = exampleHandlerArgs, | ||
| menuContainer = undefined, | ||
| type = 'field', | ||
| fieldActions = { internal: undefined }, | ||
| valueActions = { internal: undefined, external: undefined }, | ||
| }: Props) => { | ||
| return ( | ||
| <FieldAndValueActionsContext.Provider value={{ fieldActions, valueActions }}> | ||
| <Action element={() => <div>Open Actions Menu</div>} | ||
| handlerArgs={handlerArgs} | ||
| menuContainer={menuContainer} | ||
| type={type}> | ||
| {children} | ||
| </Action> | ||
| </FieldAndValueActionsContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| const openDropdown = async (headerTitle = 'The dropdown header') => { | ||
| const dropdownToggle = screen.getByText('Open Actions Menu'); | ||
| userEvent.click(dropdownToggle); | ||
| await screen.findByText(headerTitle); | ||
| }; | ||
|
|
||
| it('should render dropdown header', async () => { | ||
| render(<SimpleAction>The dropdown header</SimpleAction>); | ||
| await openDropdown('The dropdown header'); | ||
|
|
||
| expect(screen.getByText('The dropdown header')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('should work with internal field actions', async () => { | ||
| const mockActionHandler = jest.fn(); | ||
| const fieldActions = { | ||
| internal: [ | ||
| { | ||
| type: 'aggregate', | ||
| title: 'Show top values', | ||
| handler: mockActionHandler, | ||
| isEnabled: () => true, | ||
| resetFocus: true, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| render(<SimpleAction type="field" fieldActions={fieldActions} />); | ||
|
|
||
| await openDropdown(); | ||
|
|
||
| const actionMenuItem = screen.getByText('Show top values'); | ||
| userEvent.click(actionMenuItem); | ||
|
|
||
| expect(mockActionHandler).toHaveBeenCalledTimes(1); | ||
| }); | ||
|
|
||
| it('should work with external value actions', async () => { | ||
| const mockActionHandler = jest.fn(); | ||
| const simpleExternalAction = createSimpleExternalValueAction({ handler: mockActionHandler, title: 'External value action' }); | ||
| const valueActions = { external: [simpleExternalAction], internal: undefined }; | ||
|
|
||
| render( | ||
| <SimpleAction type="value" valueActions={valueActions} />, | ||
| ); | ||
|
|
||
| await openDropdown(); | ||
|
|
||
| const actionMenuItem = screen.getByText('External value action'); | ||
| userEvent.click(actionMenuItem); | ||
|
|
||
| expect(mockActionHandler).toHaveBeenCalledTimes(1); | ||
| }); | ||
| }); |
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
Oops, something went wrong.