diff --git a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx index 197516ce2db90..bac476045eb95 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx @@ -29,7 +29,10 @@ import type { DatatableColumn } from '../../../../expressions/public'; import { ExpressionValueVisDimension } from '../../../../visualizations/public'; import type { HeatmapRenderProps, FilterEvent, BrushEvent } from '../../common'; import { applyPaletteParams, findMinMaxByColumnId, getSortPredicate } from './helpers'; -import { getColorPicker } from '../utils/get_color_picker'; +import { + LegendColorPickerWrapperContext, + LegendColorPickerWrapper, +} from '../utils/get_color_picker'; import { DEFAULT_PALETTE_NAME, defaultPaletteParams } from '../constants'; import { HeatmapIcon } from './heatmap_icon'; import './index.scss'; @@ -172,10 +175,6 @@ export const HeatmapComponent: FC = memo( [uiState] ); - const legendColorPicker = useMemo( - () => getColorPicker(args.legend.position, setColor, uiState), - [args.legend.position, setColor, uiState] - ); const table = data; const valueAccessor = args.valueAccessor ? getAccessor(args.valueAccessor, table.columns) @@ -484,55 +483,63 @@ export const HeatmapComponent: FC = memo( legendPosition={args.legend.position} /> )} - - - `${xValuesFormatter.convert(v) ?? ''}`} - yAxisLabelFormatter={ - yAxisColumn - ? (v) => `${formatFactory(yAxisColumn.meta.params).convert(v) ?? ''}` - : undefined - } - /> - + + + + `${xValuesFormatter.convert(v) ?? ''}`} + yAxisLabelFormatter={ + yAxisColumn + ? (v) => `${formatFactory(yAxisColumn.meta.params).convert(v) ?? ''}` + : undefined + } + /> + + ); } diff --git a/src/plugins/chart_expressions/expression_heatmap/public/utils/get_color_picker.tsx b/src/plugins/chart_expressions/expression_heatmap/public/utils/get_color_picker.tsx index 2f5297c5fd475..771a633456e13 100644 --- a/src/plugins/chart_expressions/expression_heatmap/public/utils/get_color_picker.tsx +++ b/src/plugins/chart_expressions/expression_heatmap/public/utils/get_color_picker.tsx @@ -6,9 +6,9 @@ * Side Public License, v 1. */ -import React, { useCallback } from 'react'; +import React, { createContext, useCallback, useContext } from 'react'; import { LegendColorPicker, Position } from '@elastic/charts'; -import { PopoverAnchorPosition, EuiPopover, EuiOutsideClickDetector } from '@elastic/eui'; +import { PopoverAnchorPosition, EuiWrappingPopover, EuiOutsideClickDetector } from '@elastic/eui'; import type { PersistedState } from '../../../../visualizations/public'; import { ColorPicker } from '../../../../charts/public'; @@ -27,59 +27,77 @@ function getAnchorPosition(legendPosition: Position): PopoverAnchorPosition { } } -export const getColorPicker = - ( - legendPosition: Position, - setColor: (newColor: string | null, seriesKey: string | number) => void, - uiState: PersistedState - ): LegendColorPicker => - ({ anchor, color, onClose, onChange, seriesIdentifiers: [seriesIdentifier] }) => { - const seriesName = seriesIdentifier.key; - const overwriteColors: Record = uiState?.get('vis.colors', {}) ?? {}; - const colorIsOverwritten = seriesName.toString() in overwriteColors; - let keyDownEventOn = false; - const handleChange = (newColor: string | null) => { - if (newColor) { - onChange(newColor); - } - setColor(newColor, seriesName); - // close the popover if no color is applied or the user has clicked a color - if (!newColor || !keyDownEventOn) { - onClose(); - } - }; +export interface LegendColorPickerWrapperContextType { + legendPosition: Position; + setColor: (newColor: string | null, seriesKey: string | number) => void; + uiState: PersistedState; +} - const onKeyDown = (e: React.KeyboardEvent) => { - if (e.keyCode === KEY_CODE_ENTER) { - onClose?.(); - } - keyDownEventOn = true; - }; +export const LegendColorPickerWrapperContext = createContext< + LegendColorPickerWrapperContextType | undefined +>(undefined); - const handleOutsideClick = useCallback(() => { - onClose?.(); - }, [onClose]); +export const LegendColorPickerWrapper: LegendColorPicker = ({ + anchor, + color, + onClose, + onChange, + seriesIdentifiers: [seriesIdentifier], +}) => { + const colorPickerWrappingContext = useContext(LegendColorPickerWrapperContext); + const handleOutsideClick = useCallback(() => { + onClose?.(); + }, [onClose]); + + if (!colorPickerWrappingContext) { + return null; + } + + const { legendPosition, setColor, uiState } = colorPickerWrappingContext; + const seriesName = seriesIdentifier.key; - return ( - - - - - - ); + const overwriteColors: Record = uiState?.get('vis.colors', {}) ?? {}; + const colorIsOverwritten = seriesName.toString() in overwriteColors; + let keyDownEventOn = false; + + const handleChange = (newColor: string | null) => { + if (newColor) { + onChange(newColor); + } + setColor(newColor, seriesName); + // close the popover if no color is applied or the user has clicked a color + if (!newColor || !keyDownEventOn) { + onClose(); + } }; + + const onKeyDown = (e: React.KeyboardEvent) => { + if (e.keyCode === KEY_CODE_ENTER) { + onClose?.(); + } + keyDownEventOn = true; + }; + + return ( + + + + + + ); +}; diff --git a/x-pack/plugins/fleet/server/integration_tests/docker_registry_helper.ts b/x-pack/plugins/fleet/server/integration_tests/docker_registry_helper.ts new file mode 100644 index 0000000000000..bb34dc3258d05 --- /dev/null +++ b/x-pack/plugins/fleet/server/integration_tests/docker_registry_helper.ts @@ -0,0 +1,69 @@ +/* + * 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 { spawn } from 'child_process'; +import type { ChildProcess } from 'child_process'; + +import fetch from 'node-fetch'; + +const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); + +export function useDockerRegistry() { + const packageRegistryPort = process.env.FLEET_PACKAGE_REGISTRY_PORT || '8081'; + + if (!packageRegistryPort.match(/^[0-9]{4}/)) { + throw new Error('Invalid FLEET_PACKAGE_REGISTRY_PORT'); + } + + let dockerProcess: ChildProcess | undefined; + async function startDockerRegistryServer() { + const dockerImage = `docker.elastic.co/package-registry/distribution@sha256:de952debe048d903fc73e8a4472bb48bb95028d440cba852f21b863d47020c61`; + + const args = ['run', '--rm', '-p', `${packageRegistryPort}:8080`, dockerImage]; + + dockerProcess = spawn('docker', args, { stdio: 'inherit' }); + + let isExited = dockerProcess.exitCode !== null; + dockerProcess.once('exit', () => { + isExited = true; + }); + + let retries = 0; + while (!isExited && retries++ <= 20) { + try { + const res = await fetch(`http://localhost:${packageRegistryPort}/`); + if (res.status === 200) { + return; + } + } catch (err) { + // swallow errors + } + + await delay(3000); + } + + dockerProcess.kill(); + throw new Error('Unable to setup docker registry'); + } + + async function cleanupDockerRegistryServer() { + if (dockerProcess && !dockerProcess.killed) { + dockerProcess.kill(); + } + } + + beforeAll(async () => { + jest.setTimeout(5 * 60 * 1000); // 5 minutes timeout + await startDockerRegistryServer(); + }); + + afterAll(async () => { + await cleanupDockerRegistryServer(); + }); + + return `http://localhost:${packageRegistryPort}`; +} diff --git a/x-pack/plugins/fleet/server/integration_tests/reset_preconfiguration.test.ts b/x-pack/plugins/fleet/server/integration_tests/reset_preconfiguration.test.ts index 9efbacfae17bf..4a2b4f2495e96 100644 --- a/x-pack/plugins/fleet/server/integration_tests/reset_preconfiguration.test.ts +++ b/x-pack/plugins/fleet/server/integration_tests/reset_preconfiguration.test.ts @@ -14,6 +14,8 @@ import type { HttpMethod } from 'src/core/test_helpers/kbn_server'; import type { AgentPolicySOAttributes } from '../types'; +import { useDockerRegistry } from './docker_registry_helper'; + const logFilePath = Path.join(__dirname, 'logs.log'); type Root = ReturnType; @@ -46,6 +48,8 @@ describe('Fleet preconfiguration reset', () => { let esServer: kbnTestServer.TestElasticsearchUtils; let kbnServer: kbnTestServer.TestKibanaUtils; + const registryUrl = useDockerRegistry(); + const startServers = async () => { const { startES } = kbnTestServer.createTestServers({ adjustTimeout: (t) => jest.setTimeout(t), @@ -63,6 +67,7 @@ describe('Fleet preconfiguration reset', () => { { xpack: { fleet: { + registryUrl, packages: [ { name: 'fleet_server', @@ -195,8 +200,7 @@ describe('Fleet preconfiguration reset', () => { await stopServers(); }); - // FLAKY: https://github.com/elastic/kibana/issues/123103 - describe.skip('Reset all policy', () => { + describe('Reset all policy', () => { it('Works and reset all preconfigured policies', async () => { const resetAPI = getSupertestWithAdminUser( kbnServer.root, @@ -225,9 +229,7 @@ describe('Fleet preconfiguration reset', () => { }); }); - // FLAKY: https://github.com/elastic/kibana/issues/123104 - // FLAKY: https://github.com/elastic/kibana/issues/123105 - describe.skip('Reset one preconfigured policy', () => { + describe('Reset one preconfigured policy', () => { const POLICY_ID = 'test-12345'; it('Works and reset one preconfigured policies if the policy is already deleted (with a ghost package policy)', async () => { diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx index 9dd8bf59893c0..2ecae44487908 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx @@ -33,6 +33,11 @@ jest.mock('../../../timelines/containers', () => ({ jest.mock('../../components/url_state/normalize_time_range.ts'); +const mockUseCreateFieldButton = jest.fn().mockReturnValue(<>); +jest.mock('../../../timelines/components/create_field_button', () => ({ + useCreateFieldButton: (...params: unknown[]) => mockUseCreateFieldButton(...params), +})); + const mockUseResizeObserver: jest.Mock = useResizeObserver as jest.Mock; jest.mock('use-resize-observer/polyfilled'); mockUseResizeObserver.mockImplementation(() => ({})); @@ -87,4 +92,22 @@ describe('StatefulEventsViewer', () => { expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true); }); }); + + test('it closes field editor when unmounted', async () => { + const mockCloseEditor = jest.fn(); + mockUseCreateFieldButton.mockImplementation((_, __, fieldEditorActionsRef) => { + fieldEditorActionsRef.current = { closeEditor: mockCloseEditor }; + return <>; + }); + + const wrapper = mount( + + + + ); + expect(mockCloseEditor).not.toHaveBeenCalled(); + + wrapper.unmount(); + expect(mockCloseEditor).toHaveBeenCalled(); + }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx index 97b0424168f0a..9fa91ed25c995 100644 --- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useMemo, useEffect } from 'react'; +import React, { useRef, useCallback, useMemo, useEffect } from 'react'; import { connect, ConnectedProps, useDispatch } from 'react-redux'; import deepEqual from 'fast-deep-equal'; import styled from 'styled-components'; @@ -29,7 +29,10 @@ import { CellValueElementProps } from '../../../timelines/components/timeline/ce import { FIELDS_WITHOUT_CELL_ACTIONS } from '../../lib/cell_actions/constants'; import { useKibana } from '../../lib/kibana'; import { GraphOverlay } from '../../../timelines/components/graph_overlay'; -import { useCreateFieldButton } from '../../../timelines/components/create_field_button'; +import { + CreateFieldEditorActions, + useCreateFieldButton, +} from '../../../timelines/components/create_field_button'; const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = []; @@ -121,6 +124,8 @@ const StatefulEventsViewerComponent: React.FC = ({ const tGridEventRenderedViewEnabled = useIsExperimentalFeatureEnabled( 'tGridEventRenderedViewEnabled' ); + const editorActionsRef = useRef(null); + useEffect(() => { if (createTimeline != null) { createTimeline({ @@ -137,6 +142,10 @@ const StatefulEventsViewerComponent: React.FC = ({ } return () => { deleteEventQuery({ id, inputId: 'global' }); + if (editorActionsRef.current) { + // eslint-disable-next-line react-hooks/exhaustive-deps + editorActionsRef.current.closeEditor(); + } }; // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -167,7 +176,7 @@ const StatefulEventsViewerComponent: React.FC = ({ }, [id, timelineQuery, globalQuery]); const bulkActions = useMemo(() => ({ onAlertStatusActionSuccess }), [onAlertStatusActionSuccess]); - const createFieldComponent = useCreateFieldButton(scopeId, id); + const createFieldComponent = useCreateFieldButton(scopeId, id, editorActionsRef); return ( <> diff --git a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx index 6f3f3e8b87bc8..0afb2bf641351 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.test.tsx @@ -6,8 +6,8 @@ */ import { render, fireEvent, act, screen } from '@testing-library/react'; -import React from 'react'; -import { CreateFieldButton } from './index'; +import React, { MutableRefObject } from 'react'; +import { CreateFieldButton, CreateFieldEditorActions } from './index'; import { indexPatternFieldEditorPluginMock, Start, @@ -108,4 +108,38 @@ describe('CreateFieldButton', () => { fireEvent.click(screen.getByRole('button')); expect(onClickParam).toHaveBeenCalled(); }); + + it("stores 'closeEditor' in the actions ref when editor is open", async () => { + const mockCloseEditor = jest.fn(); + useKibanaMock().services.data.dataViews.get = () => Promise.resolve({} as DataView); + useKibanaMock().services.dataViewFieldEditor.openEditor = () => mockCloseEditor; + + const editorActionsRef: MutableRefObject = React.createRef(); + await act(async () => { + render( + undefined} + timelineId={TimelineId.detectionsPage} + editorActionsRef={editorActionsRef} + />, + { + wrapper: TestProviders, + } + ); + await runAllPromises(); + }); + + expect(editorActionsRef?.current).toBeNull(); + + fireEvent.click(screen.getByRole('button')); + + expect(mockCloseEditor).not.toHaveBeenCalled(); + expect(editorActionsRef?.current?.closeEditor).toBeDefined(); + + editorActionsRef!.current!.closeEditor(); + + expect(mockCloseEditor).toHaveBeenCalled(); + expect(editorActionsRef!.current).toBeNull(); + }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx index 04f23605efac5..8979a78d7aa46 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/create_field_button/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import React, { MutableRefObject, useCallback, useEffect, useMemo, useState } from 'react'; import { EuiButton } from '@elastic/eui'; import styled from 'styled-components'; @@ -23,17 +23,21 @@ import { useDeepEqualSelector } from '../../../common/hooks/use_selector'; import { DEFAULT_COLUMN_MIN_WIDTH } from '../timeline/body/constants'; import { defaultColumnHeaderType } from '../timeline/body/column_headers/default_headers'; +export type CreateFieldEditorActions = { closeEditor: () => void } | null; +type CreateFieldEditorActionsRef = MutableRefObject; + interface CreateFieldButtonProps { selectedDataViewId: string; onClick: () => void; timelineId: TimelineId; + editorActionsRef?: CreateFieldEditorActionsRef; } const StyledButton = styled(EuiButton)` margin-left: ${({ theme }) => theme.eui.paddingSizes.m}; `; export const CreateFieldButton = React.memo( - ({ selectedDataViewId, onClick: onClickParam, timelineId }) => { + ({ selectedDataViewId, onClick: onClickParam, timelineId, editorActionsRef }) => { const [dataView, setDataView] = useState(null); const dispatch = useDispatch(); @@ -52,7 +56,7 @@ export const CreateFieldButton = React.memo( const onClick = useCallback(() => { if (dataView) { - dataViewFieldEditor?.openEditor({ + const closeFieldEditor = dataViewFieldEditor?.openEditor({ ctx: { dataView }, onSave: async (field: DataViewField) => { // Fetch the updated list of fields @@ -72,6 +76,14 @@ export const CreateFieldButton = React.memo( ); }, }); + if (editorActionsRef) { + editorActionsRef.current = { + closeEditor: () => { + editorActionsRef.current = null; + closeFieldEditor(); + }, + }; + } } onClickParam(); }, [ @@ -82,6 +94,7 @@ export const CreateFieldButton = React.memo( selectedDataViewId, dispatch, timelineId, + editorActionsRef, ]); if ( @@ -116,7 +129,8 @@ CreateFieldButton.displayName = 'CreateFieldButton'; */ export const useCreateFieldButton = ( sourcererScope: SourcererScopeName, - timelineId: TimelineId + timelineId: TimelineId, + editorActionsRef?: CreateFieldEditorActionsRef ) => { const scopeIdSelector = useMemo(() => sourcererSelectors.scopeIdSelector(), []); const { missingPatterns, selectedDataViewId } = useDeepEqualSelector((state) => @@ -133,9 +147,10 @@ export const useCreateFieldButton = ( selectedDataViewId={selectedDataViewId} onClick={onClick} timelineId={timelineId} + editorActionsRef={editorActionsRef} /> ); return CreateFieldButtonComponent; - }, [missingPatterns.length, selectedDataViewId, timelineId]); + }, [missingPatterns.length, selectedDataViewId, timelineId, editorActionsRef]); }; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap index 644a3c95baf08..2d625f678721b 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/__snapshots__/index.test.tsx.snap @@ -658,6 +658,7 @@ exports[`ColumnHeaders rendering renders correctly against snapshot 1`] = ` ] } onSelectAll={[Function]} + show={true} showEventsSelect={false} showSelectAllCheckbox={false} sort={ diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.test.tsx index 59bdcf808ca42..aec28732f38af 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.test.tsx @@ -16,7 +16,7 @@ import { Sort } from '../sort'; import { TestProviders } from '../../../../../common/mock/test_providers'; import { useMountAppended } from '../../../../../common/utils/use_mount_appended'; -import { ColumnHeadersComponent } from '.'; +import { ColumnHeadersComponent, ColumnHeadersComponentProps } from '.'; import { cloneDeep } from 'lodash/fp'; import { timelineActions } from '../../../../store/timeline'; import { TimelineTabs } from '../../../../../../common/types/timeline'; @@ -27,6 +27,11 @@ import { HeaderActions } from '../actions/header_actions'; jest.mock('../../../../../common/lib/kibana'); +const mockUseCreateFieldButton = jest.fn().mockReturnValue(<>); +jest.mock('../../../create_field_button', () => ({ + useCreateFieldButton: (...params: unknown[]) => mockUseCreateFieldButton(...params), +})); + const mockDispatch = jest.fn(); jest.mock('react-redux', () => { const original = jest.requireActual('react-redux'); @@ -46,33 +51,34 @@ describe('ColumnHeaders', () => { ...x, headerCellRender: HeaderActions, })); + const sort: Sort[] = [ + { + columnId: '@timestamp', + columnType: 'number', + sortDirection: Direction.desc, + }, + ]; + const defaultProps: ColumnHeadersComponentProps = { + actionsColumnWidth, + browserFields: mockBrowserFields, + columnHeaders: defaultHeaders, + isSelectAllChecked: false, + onSelectAll: jest.fn, + show: true, + showEventsSelect: false, + showSelectAllCheckbox: false, + sort, + tabType: TimelineTabs.query, + timelineId, + leadingControlColumns, + trailingControlColumns: [], + }; describe('rendering', () => { - const sort: Sort[] = [ - { - columnId: '@timestamp', - columnType: 'number', - sortDirection: Direction.desc, - }, - ]; - test('renders correctly against snapshot', () => { const wrapper = shallow( - + ); expect(wrapper.find('ColumnHeadersComponent')).toMatchSnapshot(); @@ -81,20 +87,7 @@ describe('ColumnHeaders', () => { test('it renders the field browser', () => { const wrapper = mount( - + ); @@ -104,20 +97,7 @@ describe('ColumnHeaders', () => { test('it renders every column header', () => { const wrapper = mount( - + ); @@ -166,18 +146,7 @@ describe('ColumnHeaders', () => { const wrapper = mount( ); @@ -210,18 +179,7 @@ describe('ColumnHeaders', () => { const wrapper = mount( ); @@ -249,18 +207,11 @@ describe('ColumnHeaders', () => { const wrapper = mount( ); @@ -287,18 +238,13 @@ describe('ColumnHeaders', () => { const wrapper = mount( ); @@ -307,4 +253,43 @@ describe('ColumnHeaders', () => { expect(wrapper.exists('[data-test-subj="test-header-action-cell"]')).toBeTruthy(); }); }); + + describe('Field Editor', () => { + test('Closes field editor when the timeline is unmounted', () => { + const mockCloseEditor = jest.fn(); + mockUseCreateFieldButton.mockImplementation((_, __, fieldEditorActionsRef) => { + fieldEditorActionsRef.current = { closeEditor: mockCloseEditor }; + return <>; + }); + + const wrapper = mount( + + + + ); + expect(mockCloseEditor).not.toHaveBeenCalled(); + + wrapper.unmount(); + expect(mockCloseEditor).toHaveBeenCalled(); + }); + + test('Closes field editor when the timeline is closed', () => { + const mockCloseEditor = jest.fn(); + mockUseCreateFieldButton.mockImplementation((_, __, fieldEditorActionsRef) => { + fieldEditorActionsRef.current = { closeEditor: mockCloseEditor }; + return <>; + }); + + const Proxy = (props: ColumnHeadersComponentProps) => ( + + + + ); + const wrapper = mount(); + expect(mockCloseEditor).not.toHaveBeenCalled(); + + wrapper.setProps({ ...defaultProps, show: false }); + expect(mockCloseEditor).toHaveBeenCalled(); + }); + }); }); diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx index 80a9022105d2c..ca1cdef903de8 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ import deepEqual from 'fast-deep-equal'; -import React, { useState, useEffect, useCallback, useMemo } from 'react'; +import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'; import { Droppable, DraggableChildrenFn } from 'react-beautiful-dnd'; import { DragEffects } from '../../../../../common/components/drag_and_drop/draggable_wrapper'; @@ -34,15 +34,16 @@ import { Sort } from '../sort'; import { ColumnHeader } from './column_header'; import { SourcererScopeName } from '../../../../../common/store/sourcerer/model'; -import { useCreateFieldButton } from '../../../create_field_button'; +import { CreateFieldEditorActions, useCreateFieldButton } from '../../../create_field_button'; -interface Props { +export interface ColumnHeadersComponentProps { actionsColumnWidth: number; browserFields: BrowserFields; columnHeaders: ColumnHeaderOptions[]; isEventViewer?: boolean; isSelectAllChecked: boolean; onSelectAll: OnSelectAll; + show: boolean; showEventsSelect: boolean; showSelectAllCheckbox: boolean; sort: Sort[]; @@ -92,6 +93,7 @@ export const ColumnHeadersComponent = ({ isEventViewer = false, isSelectAllChecked, onSelectAll, + show, showEventsSelect, showSelectAllCheckbox, sort, @@ -99,8 +101,24 @@ export const ColumnHeadersComponent = ({ timelineId, leadingControlColumns, trailingControlColumns, -}: Props) => { +}: ColumnHeadersComponentProps) => { const [draggingIndex, setDraggingIndex] = useState(null); + const fieldEditorActionsRef = useRef(null); + + useEffect(() => { + return () => { + if (fieldEditorActionsRef.current) { + // eslint-disable-next-line react-hooks/exhaustive-deps + fieldEditorActionsRef.current.closeEditor(); + } + }; + }, []); + + useEffect(() => { + if (!show && fieldEditorActionsRef.current) { + fieldEditorActionsRef.current.closeEditor(); + } + }, [show]); const renderClone: DraggableChildrenFn = useCallback( (dragProvided, _dragSnapshot, rubric) => { @@ -174,7 +192,8 @@ export const ColumnHeadersComponent = ({ const createFieldComponent = useCreateFieldButton( SourcererScopeName.timeline, - timelineId as TimelineId + timelineId as TimelineId, + fieldEditorActionsRef ); const LeadingHeaderActions = useMemo(() => { @@ -300,6 +319,7 @@ export const ColumnHeaders = React.memo( prevProps.isEventViewer === nextProps.isEventViewer && prevProps.isSelectAllChecked === nextProps.isSelectAllChecked && prevProps.onSelectAll === nextProps.onSelectAll && + prevProps.show === nextProps.show && prevProps.showEventsSelect === nextProps.showEventsSelect && prevProps.showSelectAllCheckbox === nextProps.showSelectAllCheckbox && deepEqual(prevProps.sort, nextProps.sort) && diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx index 5467dbab9845c..db927e67ccc67 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx @@ -146,6 +146,7 @@ describe('Body', () => { selectedEventIds: {}, setSelected: jest.fn() as unknown as StatefulBodyProps['setSelected'], sort: mockSort, + show: true, showCheckboxes: false, tabType: TimelineTabs.query, totalPages: 1, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx index 7e7192610a222..7257d4246f6fe 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.tsx @@ -89,6 +89,7 @@ export const BodyComponent = React.memo( setSelected, clearSelected, onRuleChange, + show, showCheckboxes, refetch, renderCellValue, @@ -244,6 +245,7 @@ export const BodyComponent = React.memo( isEventViewer={isEventViewer} isSelectAllChecked={isSelectAllChecked} onSelectAll={onSelectAll} + show={show} showEventsSelect={false} showSelectAllCheckbox={showCheckboxes} sort={sort} @@ -298,7 +300,8 @@ export const BodyComponent = React.memo( prevProps.renderCellValue === nextProps.renderCellValue && prevProps.rowRenderers === nextProps.rowRenderers && prevProps.showCheckboxes === nextProps.showCheckboxes && - prevProps.tabType === nextProps.tabType + prevProps.tabType === nextProps.tabType && + prevProps.show === nextProps.show ); BodyComponent.displayName = 'BodyComponent'; @@ -321,6 +324,7 @@ const makeMapStateToProps = () => { pinnedEventIds, selectedEventIds, showCheckboxes, + show, } = timeline; return { @@ -333,6 +337,7 @@ const makeMapStateToProps = () => { pinnedEventIds, selectedEventIds, showCheckboxes, + show, }; }; return mapStateToProps; diff --git a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx index e004a074a2922..75ed5c10f0483 100644 --- a/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx +++ b/x-pack/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx @@ -486,18 +486,20 @@ export const StepDetailsForm: FC = React.memo( aria-label={i18n.translate( 'xpack.transform.stepDetailsForm.destinationIngestPipelineAriaLabel', { - defaultMessage: 'Select an ingest pipeline', + defaultMessage: 'Select an ingest pipeline (optional)', } )} placeholder={i18n.translate( 'xpack.transform.stepDetailsForm.destinationIngestPipelineComboBoxPlaceholder', { - defaultMessage: 'Select an ingest pipeline', + defaultMessage: 'Select an ingest pipeline (optional)', } )} singleSelection={{ asPlainText: true }} options={ingestPipelineNames.map((label: string) => ({ label }))} - selectedOptions={[{ label: destinationIngestPipeline }]} + selectedOptions={ + destinationIngestPipeline !== '' ? [{ label: destinationIngestPipeline }] : [] + } onChange={(options) => setDestinationIngestPipeline(options[0]?.label ?? '')} />