diff --git a/package.json b/package.json index 4cc7f23974933..2a52266dfced0 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch@8.9.0", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "85.1.0", + "@elastic/eui": "86.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", @@ -123,6 +123,7 @@ "@hapi/hoek": "^9.2.1", "@hapi/inert": "^6.0.4", "@hapi/wreck": "^17.1.0", + "@hello-pangea/dnd": "^16.3.0", "@juggle/resize-observer": "^3.4.0", "@kbn/aad-fixtures-plugin": "link:x-pack/test/alerting_api_integration/common/plugins/aad", "@kbn/ace": "link:packages/kbn-ace", @@ -824,6 +825,7 @@ "copy-to-clipboard": "^3.0.8", "core-js": "^3.31.0", "cronstrue": "^1.51.0", + "css-box-model": "^1.2.1", "cuid": "^2.1.8", "cytoscape": "^3.10.0", "cytoscape-dagre": "^2.2.2", @@ -943,7 +945,6 @@ "re2": "1.20.1", "react": "^17.0.2", "react-ace": "^7.0.5", - "react-beautiful-dnd": "^13.1.0", "react-color": "^2.13.8", "react-dom": "^17.0.2", "react-dropzone": "^4.2.9", @@ -1329,7 +1330,6 @@ "@types/prop-types": "^15.7.5", "@types/rbush": "^3.0.0", "@types/react": "^17.0.45", - "@types/react-beautiful-dnd": "^13.0.0", "@types/react-dom": "^17.0.17", "@types/react-grid-layout": "^1.3.2", "@types/react-intl": "^2.3.15", diff --git a/packages/core/integrations/core-integrations-browser-internal/src/styles/disable_animations.css b/packages/core/integrations/core-integrations-browser-internal/src/styles/disable_animations.css index 55cd2018bfcfd..649a646f917ea 100644 --- a/packages/core/integrations/core-integrations-browser-internal/src/styles/disable_animations.css +++ b/packages/core/integrations/core-integrations-browser-internal/src/styles/disable_animations.css @@ -1,5 +1,5 @@ /** - * `react-beautiful-dnd` relies on `transition` for functionality + * `@hello-pangea/dnd` relies on `transition` for functionality * https://github.com/elastic/kibana/issues/95133 */ *:not(.essentialAnimation):not([data-rbd-draggable-context-id]):not([data-rbd-droppable-context-id]), diff --git a/packages/kbn-securitysolution-t-grid/src/utils/drag_and_drop/index.ts b/packages/kbn-securitysolution-t-grid/src/utils/drag_and_drop/index.ts index 91b2e88d97358..a50d251886a91 100644 --- a/packages/kbn-securitysolution-t-grid/src/utils/drag_and_drop/index.ts +++ b/packages/kbn-securitysolution-t-grid/src/utils/drag_and_drop/index.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import type { DropResult } from 'react-beautiful-dnd'; +import type { DropResult } from '@hello-pangea/dnd'; export const draggableIdPrefix = 'draggableId'; diff --git a/packages/kbn-ui-shared-deps-npm/BUILD.bazel b/packages/kbn-ui-shared-deps-npm/BUILD.bazel index 3b6cf5f0dfeda..61569ac39c41d 100644 --- a/packages/kbn-ui-shared-deps-npm/BUILD.bazel +++ b/packages/kbn-ui-shared-deps-npm/BUILD.bazel @@ -24,6 +24,8 @@ SRCS = glob( # deps needed when importing this module from another location RUNTIME_DEPS = [ + "@npm//babel-loader", + "@npm//@babel/plugin-proposal-optional-chaining", "@npm//loader-utils", "@npm//val-loader", "//packages/kbn-repo-info", @@ -40,6 +42,7 @@ RUNTIME_DEPS = [ "@npm//@elastic/numeral", "@npm//@emotion/cache", "@npm//@emotion/react", + "@npm//@hello-pangea/dnd", "@npm//@tanstack/react-query", "@npm//@tanstack/react-query-devtools", "@npm//classnames", @@ -49,7 +52,6 @@ RUNTIME_DEPS = [ "@npm//lodash", "@npm//moment-timezone", "@npm//react-ace", - "@npm//react-beautiful-dnd", "@npm//react-dom", "@npm//react-router-dom", "@npm//react-router-dom-v5-compat", diff --git a/packages/kbn-ui-shared-deps-npm/webpack.config.js b/packages/kbn-ui-shared-deps-npm/webpack.config.js index 6aa06bfd40977..21eb15d016f7b 100644 --- a/packages/kbn-ui-shared-deps-npm/webpack.config.js +++ b/packages/kbn-ui-shared-deps-npm/webpack.config.js @@ -83,6 +83,7 @@ module.exports = (_, argv) => { '@elastic/numeral', '@emotion/cache', '@emotion/react', + '@hello-pangea/dnd/dist/dnd.js', '@tanstack/react-query', '@tanstack/react-query-devtools', 'classnames', @@ -96,7 +97,6 @@ module.exports = (_, argv) => { 'moment-timezone/data/packed/latest.json', 'moment', 'react-ace', - 'react-beautiful-dnd', 'react-dom', 'react-dom/server', 'react-router-dom', @@ -138,6 +138,19 @@ module.exports = (_, argv) => { }, ], }, + // @hello-pangea/dnd emits optional chaining that confuses webpack. + // We need to transform it using babel before going further + { + test: /@hello-pangea\/dnd\/dist\/dnd\.js$/, + use: [ + { + loader: 'babel-loader', + options: { + plugins: [require.resolve('@babel/plugin-proposal-optional-chaining')], + }, + }, + ], + }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], diff --git a/packages/kbn-ui-shared-deps-src/src/definitions.js b/packages/kbn-ui-shared-deps-src/src/definitions.js index 33ab7601dc86a..08e5355a3f444 100644 --- a/packages/kbn-ui-shared-deps-src/src/definitions.js +++ b/packages/kbn-ui-shared-deps-src/src/definitions.js @@ -72,7 +72,7 @@ const externals = { '@elastic/eui/dist/eui_charts_theme': '__kbnSharedDeps__.ElasticEuiChartsTheme', // transient dep of eui - 'react-beautiful-dnd': '__kbnSharedDeps__.ReactBeautifulDnD', + '@hello-pangea/dnd': '__kbnSharedDeps__.HelloPangeaDnd', lodash: '__kbnSharedDeps__.Lodash', 'lodash/fp': '__kbnSharedDeps__.LodashFp', fflate: '__kbnSharedDeps__.Fflate', diff --git a/packages/kbn-ui-shared-deps-src/src/entry.js b/packages/kbn-ui-shared-deps-src/src/entry.js index bb77344c5b0c7..ac203abadb39a 100644 --- a/packages/kbn-ui-shared-deps-src/src/entry.js +++ b/packages/kbn-ui-shared-deps-src/src/entry.js @@ -46,7 +46,7 @@ export const ElasticEuiLibServices = require('@elastic/eui/optimize/es/services' export const ElasticEuiLibServicesFormat = require('@elastic/eui/optimize/es/services/format'); export const ElasticEuiChartsTheme = require('@elastic/eui/dist/eui_charts_theme'); export const KbnDatemath = require('@kbn/datemath'); -export const ReactBeautifulDnD = require('react-beautiful-dnd'); +export const HelloPangeaDnd = require('@hello-pangea/dnd/dist/dnd'); export const Lodash = require('lodash'); export const LodashFp = require('lodash/fp'); diff --git a/packages/kbn-visualization-ui-components/components/drag_drop_bucket/types.ts b/packages/kbn-visualization-ui-components/components/drag_drop_bucket/types.ts index 2185b15a264ff..fa63682a05c32 100644 --- a/packages/kbn-visualization-ui-components/components/drag_drop_bucket/types.ts +++ b/packages/kbn-visualization-ui-components/components/drag_drop_bucket/types.ts @@ -7,7 +7,7 @@ */ import React from 'react'; -import type { DraggableProvided } from 'react-beautiful-dnd'; +import type { DraggableProvided } from '@hello-pangea/dnd'; export interface BucketContainerProps { children: React.ReactNode; diff --git a/packages/shared-ux/markdown/impl/__snapshots__/markdown.test.tsx.snap b/packages/shared-ux/markdown/impl/__snapshots__/markdown.test.tsx.snap index 11550b77fa169..08642cface949 100644 --- a/packages/shared-ux/markdown/impl/__snapshots__/markdown.test.tsx.snap +++ b/packages/shared-ux/markdown/impl/__snapshots__/markdown.test.tsx.snap @@ -209,7 +209,7 @@ exports[`shared ux markdown component renders for editor 1`] = ` id="generated-id" placeholder="" rows="6" - style="height:100%;max-height:" + style="height:100%" />
void; onEdit: (discoveryItemId: string) => void; operationTypes: Operation[]; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawl_requests_table.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawl_requests_table.test.tsx index 42cb988a7bb68..dfab4d1086a2f 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawl_requests_table.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/crawler/components/crawl_requests_table.test.tsx @@ -85,7 +85,6 @@ describe('CrawlRequestsTable', () => { const table = wrapper.find(EuiBasicTable); const columns = table.prop('columns'); - // @ts-expect-error 4.3.5 upgrade const crawlID = shallow(columns[0].render('618d0e66abe97bc688328900', { stage: 'crawl' })); expect(crawlID.text()).toContain('618d0e66abe97bc688328900'); @@ -93,7 +92,6 @@ describe('CrawlRequestsTable', () => { expect(actions.fetchCrawlRequest).toHaveBeenCalledWith('618d0e66abe97bc688328900'); expect(actions.openFlyout).toHaveBeenCalled(); - // @ts-expect-error 4.3.5 upgrade const processCrawlID = shallow(columns[0].render('54325423aef7890543', { stage: 'process' })); expect(processCrawlID.text()).toContain('54325423aef7890543'); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.test.tsx index d50234b74c820..4540735d56218 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.test.tsx @@ -8,7 +8,8 @@ import { setMockValues } from '../../../../../__mocks__/kea_logic'; import React from 'react'; -import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; + +import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { shallow, ShallowWrapper } from 'enzyme'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.tsx index ce97bf468d4e3..12957de015891 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/curation/results/curation_result.tsx @@ -6,7 +6,8 @@ */ import React from 'react'; -import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; + +import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { useValues } from 'kea'; @@ -18,7 +19,7 @@ import { ResultAction } from '../../../result/types'; interface Props { actions: ResultAction[]; - dragHandleProps?: DraggableProvidedDragHandleProps; + dragHandleProps?: DraggableProvidedDragHandleProps | null; result: SearchResult; index?: number; } diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/ignored_queries_panel/ignored_queries_panel.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/ignored_queries_panel/ignored_queries_panel.test.tsx index e9412966d00ef..c704f77371c71 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/ignored_queries_panel/ignored_queries_panel.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/curations/views/curations_history/components/ignored_queries_panel/ignored_queries_panel.test.tsx @@ -68,7 +68,6 @@ describe('IgnoredQueriesPanel', () => { }); it('show a query', () => { - // @ts-expect-error 4.3.5 upgrade const column = getColumn(0).render('test query'); expect(column).toEqual('test query'); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx index 6f8f0fdcf34ff..0720ce5b31c22 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.test.tsx @@ -8,7 +8,8 @@ import { mockKibanaValues } from '../../../__mocks__/kea_logic'; import React from 'react'; -import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; + +import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { shallow, ShallowWrapper } from 'enzyme'; diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx index 155b831315e0d..0bee13c58c1b9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/result/result.tsx @@ -6,7 +6,8 @@ */ import React, { useState, useMemo } from 'react'; -import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; + +import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import './result.scss'; @@ -34,7 +35,7 @@ interface Props { shouldLinkToDetailPage?: boolean; schemaForTypeHighlights?: Schema | AdvancedSchema; actions?: ResultAction[]; - dragHandleProps?: DraggableProvidedDragHandleProps; + dragHandleProps?: DraggableProvidedDragHandleProps | null; showClick?: boolean; } diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/client_libraries_popover/popover.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/client_libraries_popover/popover.test.tsx index 50fbf06e65c60..a474b8d2e44b6 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/client_libraries_popover/popover.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/client_libraries_popover/popover.test.tsx @@ -10,7 +10,7 @@ import '../../../../../shared/doc_links/__mocks__/doc_links.mock'; import React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; import { EuiContextMenuItem, EuiContextMenuPanel } from '@elastic/eui'; @@ -85,11 +85,11 @@ describe('ClientLibrariesPopover', () => { wrapper .find(EuiContextMenuPanel) .prop('items') - ?.map((item) => shallow(
{item}
)) || []; + ?.map((item: HTMLElement) => shallow(
{item}
)) || []; expect(contextMenuItems.length > 0).toBeTruthy(); - contextMenuItems.forEach((item, index) => { + contextMenuItems.forEach((item: ShallowWrapper, index: number) => { const menuItem = item.find(EuiContextMenuItem); expect(menuItem.prop('href')).toEqual(librariesList[index].href); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawl_requests_panel/crawl_requests_table.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawl_requests_panel/crawl_requests_table.test.tsx index 9302c234ba491..f9bfcb9849673 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawl_requests_panel/crawl_requests_table.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawl_requests_panel/crawl_requests_table.test.tsx @@ -83,14 +83,12 @@ describe('CrawlRequestsTable', () => { const table = wrapper.find(EuiBasicTable); const columns = table.prop('columns'); - // @ts-expect-error 4.3.5 upgrade const crawlID = shallow(columns[0].render('618d0e66abe97bc688328900', { stage: 'crawl' })); expect(crawlID.text()).toContain('618d0e66abe97bc688328900'); crawlID.simulate('click'); expect(actions.fetchCrawlRequest).toHaveBeenCalledWith('618d0e66abe97bc688328900'); - // @ts-expect-error 4.3.5 upgrade const processCrawlID = shallow(columns[0].render('54325423aef7890543', { stage: 'process' })); expect(processCrawlID.text()).toContain('54325423aef7890543'); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/multi_field_selector.test.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/multi_field_selector.test.tsx index 4eb8bb7eb1829..ce4b028f2668c 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/multi_field_selector.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_inference/multi_field_selector.test.tsx @@ -11,7 +11,13 @@ import React from 'react'; import { shallow } from 'enzyme'; -import { EuiBasicTable, EuiButton, EuiComboBox, EuiFieldText } from '@elastic/eui'; +import { + EuiBasicTable, + EuiBasicTableColumn, + EuiButton, + EuiComboBox, + EuiFieldText, +} from '@elastic/eui'; import { MultiFieldMapping, SelectedFieldMappings } from './multi_field_selector'; @@ -180,7 +186,7 @@ describe('SelectedFieldMappings', () => { expect(wrapper.find(EuiBasicTable)).toHaveLength(1); const table = wrapper.find(EuiBasicTable); - expect(table.prop('columns').map((c) => c.name)).toEqual([ + expect(table.prop('columns').map((c: EuiBasicTableColumn<{}>) => c.name)).toEqual([ 'Source text field', '', 'Target field', diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.test.tsx index f400527c6c003..4825b4234b8a1 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/content_sources/components/display_settings/result_detail.test.tsx @@ -5,47 +5,80 @@ * 2.0. */ -import '../../../../../__mocks__/shallow_useeffect.mock'; import { setMockValues, setMockActions } from '../../../../../__mocks__/kea_logic'; import { exampleResult } from '../../../../__mocks__/content_sources.mock'; +import React from 'react'; + +import type { + DraggableProvided, + DraggableStateSnapshot, + DroppableProvided, + DroppableStateSnapshot, +} from '@hello-pangea/dnd'; +import { shallow, mount } from 'enzyme'; + +import { EuiTextColor } from '@elastic/eui'; + +import { ExampleResultDetailCard } from './example_result_detail_card'; +import { ResultDetail } from './result_detail'; + +import '../../../../../__mocks__/shallow_useeffect.mock'; + /** - * Mocking necessary due to console warnings from react d-n-d, which EUI uses + * Mocking necessary due to console warnings from @hello-pangea/dnd, which EUI uses * https://stackoverflow.com/a/56674119/1949235 */ -jest.mock('react-beautiful-dnd', () => ({ - Droppable: ({ children }: { children: any }) => +jest.mock('@hello-pangea/dnd', () => ({ + Droppable: ({ + children, + }: { + children: (a: DroppableProvided, b: DroppableStateSnapshot) => void; + }) => children( { - draggableProps: { - style: {}, + droppableProps: { + 'data-rfd-droppable-context-id': '123', + 'data-rfd-droppable-id': '123', }, innerRef: jest.fn(), + placeholder: null, }, - {} + { + isDraggingOver: false, + draggingOverWith: null, + draggingFromThisWith: null, + isUsingPlaceholder: false, + } ), - Draggable: ({ children }: { children: any }) => + Draggable: ({ + children, + }: { + children: (a: DraggableProvided, b: DraggableStateSnapshot) => void; + }) => children( { draggableProps: { - style: {}, + 'data-rfd-draggable-context-id': '123', + 'data-rfd-draggable-id': '123', }, innerRef: jest.fn(), + dragHandleProps: null, }, - {} + { + isDragging: false, + isDropAnimating: false, + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, + } ), - DragDropContext: ({ children }: { children: any }) => children, + DragDropContext: ({ children }: { children: React.ReactNode }) => children, })); -import React from 'react'; - -import { shallow, mount } from 'enzyme'; - -import { EuiTextColor } from '@elastic/eui'; - -import { ExampleResultDetailCard } from './example_result_detail_card'; -import { ResultDetail } from './result_detail'; - describe('ResultDetail', () => { const { searchResultConfig, exampleDocuments } = exampleResult; const availableFieldOptions = [ diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx index 12ac34bf9fbb5..dda28f90d0a80 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/single_page_layout/index.test.tsx @@ -216,13 +216,14 @@ describe('when on the package policy create page', () => { beforeEach(async () => { await act(async () => { render(); + cancelLink = renderResult.getByTestId( 'createPackagePolicy_cancelBackLink' ) as HTMLAnchorElement; - cancelButton = renderResult.getByTestId( + cancelButton = (await renderResult.findByTestId( 'createPackagePolicyCancelButton' - ) as HTMLAnchorElement; + )) as HTMLAnchorElement; }); }); diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx index 2eb7403177257..3b86ea48397bb 100644 --- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx +++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx @@ -103,12 +103,12 @@ describe('', () => { httpRequestsMockHelpers.setLoadNodesPluginsResponse([]); // disable all react-beautiful-dnd development warnings - (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true; + (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = true; }); afterAll(() => { jest.useRealTimers(); - (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false; + (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = false; }); describe('composable index template', () => { diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx index e31f06d2b6f2b..ee1d462ff0e82 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_list_item.tsx @@ -14,6 +14,7 @@ import { EuiLink, EuiIcon, EuiToolTip, + DraggableProvidedDragHandleProps, } from '@elastic/eui'; import { ComponentTemplateListItem } from '../../../../../common'; @@ -31,7 +32,7 @@ export interface Props { isSelected?: boolean | ((component: ComponentTemplateListItem) => boolean); onViewDetail: (component: ComponentTemplateListItem) => void; actions?: Action[]; - dragHandleProps?: { [key: string]: any }; + dragHandleProps?: DraggableProvidedDragHandleProps | null; } export const ComponentTemplatesListItem = ({ diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx index 03a74bb17f4a1..3c2286ccc4cd2 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_selector/component_templates_selection.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React from 'react'; +import React, { ComponentProps } from 'react'; import { EuiDragDropContext, EuiDraggable, EuiDroppable, euiDragDropReorder } from '@elastic/eui'; import { ComponentTemplateListItem } from '../../../../../common'; @@ -14,11 +14,6 @@ import { Props as ComponentTemplatesListItemProps, } from './component_templates_list_item'; -interface DraggableLocation { - droppableId: string; - index: number; -} - interface Props { components: ComponentTemplateListItem[]; onReorder: (components: ComponentTemplateListItem[]) => void; @@ -26,12 +21,9 @@ interface Props { } export const ComponentTemplatesSelection = ({ components, onReorder, listItemProps }: Props) => { - const onDragEnd = ({ + const onDragEnd: ComponentProps['onDragEnd'] = ({ source, destination, - }: { - source?: DraggableLocation; - destination?: DraggableLocation; }) => { if (source && destination) { const items = euiDragDropReorder(components, source.index, destination.index); diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts index 04e1575bc96e1..3f98b95ba8b61 100644 --- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts +++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/grok.test.ts @@ -19,13 +19,13 @@ describe('Processor: Grok', () => { beforeAll(() => { jest.useFakeTimers({ legacyFakeTimers: true }); // disable all react-beautiful-dnd development warnings - (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = true; + (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = true; }); afterAll(() => { jest.useRealTimers(); // enable all react-beautiful-dnd development warnings - (window as any)['__react-beautiful-dnd-disable-dev-warnings'] = false; + (window as any)['__@hello-pangea/dnd-disable-dev-warnings'] = false; }); beforeEach(async () => { diff --git a/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx index b0c122ee9d536..86ac619e9dcaa 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/dimension_panel.test.tsx @@ -15,6 +15,7 @@ import { EuiListGroup, EuiRange, EuiSelect, + EuiComboBoxProps, } from '@elastic/eui'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks'; @@ -87,6 +88,13 @@ jest.mock('@kbn/unified-field-list/src/hooks/use_existing_fields', () => ({ }), })); +const getFieldSelectComboBox = (wrapper: ReactWrapper) => + wrapper + .find(EuiComboBox) + .filter('[data-test-subj="indexPattern-dimension-field"]') as ReactWrapper< + EuiComboBoxProps + >; + const fields = [ { name: 'timestamp', @@ -159,7 +167,7 @@ const bytesColumn: GenericIndexPatternColumn = { const services = coreMock.createStart() as unknown as LensAppServices; -function mountWithServices(component: React.ReactElement) { +function mountWithServices(component: React.ReactElement): ReactWrapper { return mount(component, { // This is an elegant way to wrap a component in Enzyme // preserving the root at the component level rather than @@ -295,9 +303,7 @@ describe('FormBasedDimensionEditor', () => { it('should show field select', () => { wrapper = mountWithServices(); - expect( - wrapper.find(EuiComboBox).filter('[data-test-subj="indexPattern-dimension-field"]') - ).toHaveLength(1); + expect(getFieldSelectComboBox(wrapper)).toHaveLength(1); }); it('should not show field select on fieldless operation', () => { @@ -318,9 +324,7 @@ describe('FormBasedDimensionEditor', () => { /> ); - expect( - wrapper.find(EuiComboBox).filter('[data-test-subj="indexPattern-dimension-field"]') - ).toHaveLength(0); + expect(getFieldSelectComboBox(wrapper)).toHaveLength(0); }); it('should not show any choices if the filter returns false', () => { @@ -332,21 +336,13 @@ describe('FormBasedDimensionEditor', () => { /> ); - expect( - wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]')! - .prop('options')! - ).toHaveLength(0); + expect(getFieldSelectComboBox(wrapper).prop('options')!).toHaveLength(0); }); it('should list all field names and document as a whole in prioritized order', () => { wrapper = mountWithServices(); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options).toHaveLength(3); @@ -375,11 +371,7 @@ describe('FormBasedDimensionEditor', () => { wrapper = mountWithServices(); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); - + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options![1].options!.map(({ label }) => label)).toEqual(['timestampLabel', 'source']); }); @@ -391,10 +383,7 @@ describe('FormBasedDimensionEditor', () => { /> ); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options![0]['data-test-subj']).toEqual('lns-fieldOptionIncompatible-___records___'); @@ -554,9 +543,7 @@ describe('FormBasedDimensionEditor', () => { ); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]')!; + const comboBox = getFieldSelectComboBox(wrapper); const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'memory')!; await act(async () => { @@ -589,9 +576,7 @@ describe('FormBasedDimensionEditor', () => { it('should switch operations when selecting a field that requires another operation', async () => { wrapper = mountWithServices(); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]')!; + const comboBox = getFieldSelectComboBox(wrapper); const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!; await act(async () => { @@ -874,8 +859,6 @@ describe('FormBasedDimensionEditor', () => { }); it('should leave error state when switching from incomplete state to fieldless operation', async () => { - // @ts-expect-error - window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593 wrapper = mountWithServices(); await act(async () => { @@ -931,10 +914,7 @@ describe('FormBasedDimensionEditor', () => { .simulate('click'); }); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options![0]['data-test-subj']).toContain('Incompatible'); @@ -977,9 +957,7 @@ describe('FormBasedDimensionEditor', () => { }, }); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]'); + const comboBox = getFieldSelectComboBox(wrapper); const options = comboBox.prop('options'); // options[1][2] is a `source` field of type `string` which doesn't support `average` operation @@ -1085,10 +1063,7 @@ describe('FormBasedDimensionEditor', () => { await act(async () => { await terms.simulate('click'); }); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options![0]['data-test-subj']).toContain('Incompatible'); expect( options![1].options!.filter(({ label }) => label === 'timestampLabel')[0]['data-test-subj'] @@ -1105,9 +1080,7 @@ describe('FormBasedDimensionEditor', () => { .find('button[data-test-subj="lns-indexPatternDimension-terms incompatible"]') .simulate('click'); }); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]')!; + const comboBox = getFieldSelectComboBox(wrapper); const option = comboBox.prop('options')![1].options!.find(({ label }) => label === 'source')!; await act(async () => { await comboBox.prop('onChange')!([option]); @@ -1884,9 +1857,7 @@ describe('FormBasedDimensionEditor', () => { }, }); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]'); + const comboBox = getFieldSelectComboBox(wrapper); const options = comboBox.prop('options'); await act(async () => { @@ -1997,10 +1968,7 @@ describe('FormBasedDimensionEditor', () => { wrapper.find('button[data-test-subj="lns-indexPatternDimension-average"]').simulate('click'); }); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options![0]['data-test-subj']).toContain('Incompatible'); @@ -2032,10 +2000,7 @@ describe('FormBasedDimensionEditor', () => { /> ); - const options = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const options = getFieldSelectComboBox(wrapper).prop('options'); expect(options![0]['data-test-subj']).not.toContain('Incompatible'); }); @@ -2043,9 +2008,7 @@ describe('FormBasedDimensionEditor', () => { it('should not update when selecting the current field again', async () => { wrapper = mountWithServices(); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]'); + const comboBox = getFieldSelectComboBox(wrapper); const option = comboBox .prop('options')![1] @@ -2096,9 +2059,7 @@ describe('FormBasedDimensionEditor', () => { ); - const comboBox = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]')!; + const comboBox = getFieldSelectComboBox(wrapper); const option = comboBox.prop('options')![1].options![0]; await act(async () => { @@ -2158,12 +2119,8 @@ describe('FormBasedDimensionEditor', () => { it('should keep the latest valid dimension when removing the selection in field combobox', () => { wrapper = mountWithServices(); - act(() => { - wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('onChange')!([]); + getFieldSelectComboBox(wrapper as ReactWrapper).prop('onChange')!([]); }); expect(setState).not.toHaveBeenCalled(); diff --git a/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/reference_editor.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/reference_editor.test.tsx index d2347536767e3..a6a869720f3b3 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/reference_editor.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/dimension_panel/reference_editor.test.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { ReactWrapper, ShallowWrapper } from 'enzyme'; import { act } from 'react-dom/test-utils'; -import { EuiComboBox } from '@elastic/eui'; +import { EuiComboBox, EuiComboBoxOptionOption, EuiComboBoxProps } from '@elastic/eui'; import { mountWithIntl as mount } from '@kbn/test-jest-helpers'; import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public'; import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks'; @@ -40,6 +40,13 @@ jest.mock('@kbn/unified-field-list/src/hooks/use_existing_fields', () => ({ jest.mock('../operations'); +const getFieldSelectComboBox = (wrapper: ReactWrapper) => + wrapper + .find(EuiComboBox) + .filter('[data-test-subj="indexPattern-dimension-field"]') as ReactWrapper< + EuiComboBoxProps + >; + describe('reference editor', () => { let wrapper: ReactWrapper | ShallowWrapper; let paramEditorUpdater: jest.Mock; @@ -124,10 +131,7 @@ describe('reference editor', () => { expect.objectContaining({ 'data-test-subj': expect.stringContaining('Incompatible') }) ); - const fields = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const fields = getFieldSelectComboBox(wrapper).prop('options'); expect(fields![0].options).not.toContainEqual( expect.objectContaining({ 'data-test-subj': expect.stringContaining('Incompatible') }) @@ -163,10 +167,7 @@ describe('reference editor', () => { /> ); - const fields = wrapper - .find(EuiComboBox) - .filter('[data-test-subj="indexPattern-dimension-field"]') - .prop('options'); + const fields = getFieldSelectComboBox(wrapper).prop('options'); const findFieldDataTestSubj = (l: string) => { return fields![0].options!.find(({ label }) => label === l)!['data-test-subj']; @@ -207,9 +208,9 @@ describe('reference editor', () => { .filter('[data-test-subj="indexPattern-reference-function"]') .prop('options'); - expect(functions.find(({ label }) => label === 'Average')!['data-test-subj']).toContain( - 'incompatible' - ); + expect( + functions.find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!['data-test-subj'] + ).toContain('incompatible'); }); it('should not update when selecting the same operation', () => { @@ -241,7 +242,9 @@ describe('reference editor', () => { const comboBox = wrapper .find(EuiComboBox) .filter('[data-test-subj="indexPattern-reference-function"]'); - const option = comboBox.prop('options')!.find(({ label }) => label === 'Average')!; + const option = comboBox + .prop('options')! + .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!; act(() => { comboBox.prop('onChange')!([option]); @@ -280,7 +283,9 @@ describe('reference editor', () => { const comboBox = wrapper .find(EuiComboBox) .filter('[data-test-subj="indexPattern-reference-function"]'); - const option = comboBox.prop('options')!.find(({ label }) => label === 'Maximum')!; + const option = comboBox + .prop('options')! + .find(({ label }: EuiComboBoxOptionOption) => label === 'Maximum')!; act(() => { comboBox.prop('onChange')!([option]); @@ -325,7 +330,9 @@ describe('reference editor', () => { const comboBox = wrapper .find(EuiComboBox) .filter('[data-test-subj="indexPattern-reference-function"]'); - const option = comboBox.prop('options')!.find(({ label }) => label === 'Average')!; + const option = comboBox + .prop('options')! + .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!; act(() => { comboBox.prop('onChange')!([option]); diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/filters/filters.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/filters/filters.test.tsx index 15ccced953309..ea71550959399 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/filters/filters.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/filters/filters.test.tsx @@ -292,7 +292,7 @@ describe('filters', () => { describe('popover param editor', () => { // @ts-expect-error - window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593 + window['__@hello-pangea/dnd-disable-dev-warnings'] = true; // issue with enzyme & @hello-pangea/dnd throwing errors: https://github.com/hello-pangea/dnd/issues/644 jest.mock('@kbn/unified-search-plugin/public', () => ({ QueryStringInput: () => { return 'QueryStringInput'; diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/ranges/ranges.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/ranges/ranges.test.tsx index 00a69eee1f2c0..8bf71089b21e0 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/ranges/ranges.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/ranges/ranges.test.tsx @@ -497,7 +497,7 @@ describe('ranges', () => { describe('Specify range intervals manually', () => { // @ts-expect-error - window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593 + window['__@hello-pangea/dnd-disable-dev-warnings'] = true; // issue with enzyme & @hello-pangea/dnd throwing errors: https://github.com/hello-pangea/dnd/issues/644 beforeEach(() => setToRangeMode()); diff --git a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/terms/terms.test.tsx b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/terms/terms.test.tsx index abdcaf888e9a1..2ab64292bca12 100644 --- a/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/terms/terms.test.tsx +++ b/x-pack/plugins/lens/public/datasources/form_based/operations/definitions/terms/terms.test.tsx @@ -8,7 +8,14 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { shallow, mount } from 'enzyme'; -import { EuiButtonGroup, EuiComboBox, EuiFieldNumber, EuiSelect, EuiSwitch } from '@elastic/eui'; +import { + EuiButtonGroup, + EuiComboBox, + EuiComboBoxOptionOption, + EuiFieldNumber, + EuiSelect, + EuiSwitch, +} from '@elastic/eui'; import type { IUiSettingsClient, HttpSetup } from '@kbn/core/public'; import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; @@ -1225,7 +1232,7 @@ describe('terms', () => { describe('field input', () => { // @ts-expect-error - window['__react-beautiful-dnd-disable-dev-warnings'] = true; // issue with enzyme & react-beautiful-dnd throwing errors: https://github.com/atlassian/react-beautiful-dnd/issues/1593 + window['__@hello-pangea/dnd-disable-dev-warnings'] = true; // issue with enzyme & @hello-pangea/dnd throwing errors: https://github.com/hello-pangea/dnd/issues/644 const defaultFieldInputProps = { indexPattern: defaultProps.indexPattern, @@ -2477,7 +2484,9 @@ describe('terms', () => { const functionComboBox = refEditor .find(EuiComboBox) .filter('[data-test-subj="indexPattern-reference-function"]'); - const option = functionComboBox.prop('options')!.find(({ label }) => label === 'Average')!; + const option = functionComboBox + .prop('options')! + .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!; act(() => { functionComboBox.prop('onChange')!([option]); @@ -2546,7 +2555,7 @@ describe('terms', () => { const option = fieldComboBox .prop('options')[0] - .options!.find(({ label }) => label === 'memory')!; + .options!.find(({ label }: EuiComboBoxOptionOption) => label === 'memory')!; act(() => { fieldComboBox.prop('onChange')!([option]); }); @@ -2627,7 +2636,9 @@ describe('terms', () => { const functionComboBox = comboBoxes.filter( '[data-test-subj="indexPattern-reference-function"]' ); - const option = functionComboBox.prop('options')!.find(({ label }) => label === 'Average')!; + const option = functionComboBox + .prop('options')! + .find(({ label }: EuiComboBoxOptionOption) => label === 'Average')!; act(() => { functionComboBox.prop('onChange')!([option]); }); diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx index 6b5ce5b8168b7..51aa500bbfebf 100644 --- a/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx +++ b/x-pack/plugins/lens/public/visualizations/datatable/components/columns.tsx @@ -18,6 +18,7 @@ import type { DatatableColumn, DatatableColumnMeta, } from '@kbn/expressions-plugin/common'; +import { EuiDataGridColumnCellAction } from '@elastic/eui/src/components/datagrid/data_grid_types'; import type { FormatFactory } from '../../../../common/types'; import type { ColumnConfig } from '../../../../common/expressions'; import { LensCellValueAction } from '../../../types'; @@ -79,7 +80,7 @@ export const createGridColumns = ( const columnArgs = columnConfig.columns.find(({ columnId }) => columnId === field); - const cellActions = []; + const cellActions: EuiDataGridColumnCellAction[] = []; if (filterable && handleFilterClick && !columnArgs?.oneClickFilter) { cellActions.push( ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { @@ -104,20 +105,22 @@ export const createGridColumns = ( } ); + if (!contentsIsDefined) { + return null; + } + return ( - contentsIsDefined && ( - { - handleFilterClick(field, rowValue, colIndex, rowIndex); - closeCellPopover?.(); - }} - iconType="plusInCircle" - > - {filterForText} - - ) + { + handleFilterClick(field, rowValue, colIndex, rowIndex); + closeCellPopover?.(); + }} + iconType="plusInCircle" + > + {filterForText} + ); }, ({ rowIndex, columnId, Component }: EuiDataGridColumnCellActionProps) => { @@ -142,20 +145,22 @@ export const createGridColumns = ( } ); + if (!contentsIsDefined) { + return null; + } + return ( - contentsIsDefined && ( - { - handleFilterClick(field, rowValue, colIndex, rowIndex, true); - closeCellPopover?.(); - }} - iconType="minusInCircle" - > - {filterOutText} - - ) + { + handleFilterClick(field, rowValue, colIndex, rowIndex, true); + closeCellPopover?.(); + }} + iconType="minusInCircle" + > + {filterOutText} + ); } ); @@ -171,20 +176,23 @@ export const createGridColumns = ( value: rowValue, columnMeta, }; + + if (rowValue == null) { + return null; + } + return ( - rowValue != null && ( - { - action.execute([data]); - closeCellPopover?.(); - }} - iconType={action.iconType} - > - {action.displayName} - - ) + { + action.execute([data]); + closeCellPopover?.(); + }} + iconType={action.iconType} + > + {action.displayName} + ); }); }); diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/tooltip_selector.tsx b/x-pack/plugins/maps/public/components/tooltip_selector/tooltip_selector.tsx index 6998a6a629e2a..ec56f158730d3 100644 --- a/x-pack/plugins/maps/public/components/tooltip_selector/tooltip_selector.tsx +++ b/x-pack/plugins/maps/public/components/tooltip_selector/tooltip_selector.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { Component, Fragment } from 'react'; +import React, { Component, ComponentProps, Fragment } from 'react'; import classNames from 'classnames'; import { EuiButtonIcon, @@ -144,12 +144,9 @@ export class TooltipSelector extends Component { } }; - _onDragEnd = ({ + _onDragEnd: ComponentProps['onDragEnd'] = ({ source, destination, - }: { - source: { index: number }; - destination?: { index: number }; }) => { // Dragging item out of EuiDroppable results in destination of null if (!destination) { diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx index 54a5d13e7702d..29d7357df1dd3 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/layer_toc.tsx @@ -6,8 +6,8 @@ */ import _ from 'lodash'; -import React, { Component } from 'react'; -import { DropResult, EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui'; +import React, { Component, ComponentProps } from 'react'; +import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '@elastic/eui'; import { TOCEntry } from './toc_entry'; import { isLayerGroup } from '../../../../classes/layers/layer_group'; import { ILayer } from '../../../../classes/layers/layer'; @@ -72,13 +72,17 @@ export class LayerTOC extends Component { return [...this._getForebearers(parentLayer), parentId]; } - _onDragStart = ({ source }: DropResult) => { + _onDragStart: ComponentProps['onDragStart'] = ({ source }) => { const sourceIndex = this._reverseIndex(source.index); const sourceLayer = this.props.layerList[sourceIndex]; this.setState({ ...CLEAR_DND_STATE, sourceLayer }); }; - _onDragUpdate = ({ combine, destination, source }: DropResult) => { + _onDragUpdate: ComponentProps['onDragUpdate'] = ({ + combine, + destination, + source, + }) => { const sourceIndex = this._reverseIndex(source.index); const sourceLayer = this.props.layerList[sourceIndex]; @@ -128,7 +132,7 @@ export class LayerTOC extends Component { }); }; - _onDragEnd = () => { + _onDragEnd: ComponentProps['onDragEnd'] = () => { const { combineLayer, isOwnAncestor, sourceLayer, newRightSiblingLayer } = this.state; this.setState({ ...CLEAR_DND_STATE }); diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx index ed426011e995a..b5d5aef319fdf 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_toc/toc_entry/toc_entry.tsx @@ -7,7 +7,7 @@ import React, { Component } from 'react'; import classNames from 'classnames'; -import type { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd'; +import type { DraggableProvidedDragHandleProps } from '@hello-pangea/dnd'; import { FormattedMessage } from '@kbn/i18n-react'; import { EuiIcon, EuiButtonIcon, EuiConfirmModal, EuiButtonEmpty } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -46,7 +46,7 @@ export interface ReduxDispatchProps { export interface OwnProps { depth: number; layer: ILayer; - dragHandleProps?: DraggableProvidedDragHandleProps; + dragHandleProps?: DraggableProvidedDragHandleProps | null; isDragging?: boolean; isDraggingOver?: boolean; isCombineLayer?: boolean; diff --git a/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts b/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts index b03658aae77a1..b500c055be40f 100644 --- a/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts +++ b/x-pack/plugins/ml/public/application/memory_usage/memory_item_colors.ts @@ -6,7 +6,7 @@ */ import { - euiPaletteComplimentary, + euiPaletteComplementary, euiPaletteForTemperature, euiPaletteGray, euiPalettePositive, @@ -27,7 +27,7 @@ export function getMemoryItemColor(typeIn: MemoryItem) { case 'estimated-available-memory': return euiPaletteGray(5)[0]; case 'jvm-heap-size': - return euiPaletteComplimentary(5)[4]; + return euiPaletteComplementary(5)[4]; default: return euiPaletteGray(5)[4]; } diff --git a/x-pack/plugins/observability_shared/public/components/page_template/page_template.tsx b/x-pack/plugins/observability_shared/public/components/page_template/page_template.tsx index f2f94ed74e565..adc62e05b03b8 100644 --- a/x-pack/plugins/observability_shared/public/components/page_template/page_template.tsx +++ b/x-pack/plugins/observability_shared/public/components/page_template/page_template.tsx @@ -29,13 +29,7 @@ import { NavNameWithBetaBadge } from './nav_name_with_beta_badge'; export type WrappedPageTemplateProps = Pick< KibanaPageTemplateProps, - | 'children' - | 'data-test-subj' - | 'paddingSize' - | 'pageHeader' - | 'restrictWidth' - | 'isEmptyState' - | 'noDataConfig' + 'children' | 'data-test-subj' | 'pageHeader' | 'restrictWidth' | 'isEmptyState' | 'noDataConfig' > & { showSolutionNav?: boolean; isPageDataLoaded?: boolean; diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context.tsx index 02f5d26e2d58d..80dcac95e98a1 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context.tsx @@ -7,7 +7,7 @@ // https://github.com/DefinitelyTyped/DefinitelyTyped/pull/40309 -import type { MovementMode, DraggableId } from 'react-beautiful-dnd'; +import type { MovementMode, DraggableId } from '@hello-pangea/dnd'; export interface BeforeCapture { draggableId: DraggableId; diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx index dd719f1cf83fd..041ef14721b34 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/drag_drop_context_wrapper.tsx @@ -7,8 +7,8 @@ import { noop, pick } from 'lodash/fp'; import React, { useCallback, useMemo } from 'react'; -import type { DropResult } from 'react-beautiful-dnd'; -import { DragDropContext } from 'react-beautiful-dnd'; +import type { DropResult } from '@hello-pangea/dnd'; +import { DragDropContext } from '@hello-pangea/dnd'; import { useDispatch } from 'react-redux'; import type { Dispatch } from 'redux'; import deepEqual from 'fast-deep-equal'; @@ -44,7 +44,7 @@ import { timelineDefaults } from '../../../timelines/store/timeline/defaults'; import { defaultAlertsHeaders } from '../events_viewer/default_alert_headers'; // @ts-expect-error -window['__react-beautiful-dnd-disable-dev-warnings'] = true; +window['__@hello-pangea/dnd-disable-dev-warnings'] = true; interface Props { browserFields: BrowserFields; diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/helpers.ts b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/helpers.ts index e9f5915516351..fcbb0aff6b35b 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/helpers.ts @@ -5,7 +5,8 @@ * 2.0. */ -import type { FluidDragActions, Position } from 'react-beautiful-dnd'; +import type { Position } from 'css-box-model'; +import type { FluidDragActions } from '@hello-pangea/dnd'; import { KEYBOARD_DRAG_OFFSET } from '@kbn/securitysolution-t-grid'; import { stopPropagationAndPreventDefault } from '@kbn/timelines-plugin/public'; diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/index.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/index.tsx index dcfab43fbbe80..880fc7284c483 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_keyboard_wrapper_hook/index.tsx @@ -7,7 +7,7 @@ import type React from 'react'; import { useCallback, useMemo, useState } from 'react'; -import type { FluidDragActions } from 'react-beautiful-dnd'; +import type { FluidDragActions } from '@hello-pangea/dnd'; import { useKibana } from '../../../lib/kibana'; import { draggableKeyDownHandler } from './helpers'; diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx index 79d373fe74802..2bc0ba7f1ac35 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx @@ -8,7 +8,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { shallow } from 'enzyme'; import React from 'react'; -import type { DraggableStateSnapshot, DraggingStyle } from 'react-beautiful-dnd'; +import type { DraggableStateSnapshot, DraggingStyle } from '@hello-pangea/dnd'; import '../../mock/match_media'; import { mockBrowserFields } from '../../containers/source/mock'; @@ -265,6 +265,12 @@ describe('ConditionalPortal', () => { const snapshot: DraggableStateSnapshot = { isDragging: true, isDropAnimating: false, // <-- NOT drop animating + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, }; expect(getStyle(style, snapshot)).not.toHaveProperty('transitionDuration'); @@ -274,6 +280,12 @@ describe('ConditionalPortal', () => { const snapshot: DraggableStateSnapshot = { isDragging: true, isDropAnimating: true, // <-- it is drop animating + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, }; expect(getStyle(style, snapshot)).toHaveProperty('transitionDuration', '0.00000001s'); diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx index 696b9888bdb04..790a93b99e545 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.tsx @@ -13,8 +13,8 @@ import type { DraggableStateSnapshot, DraggingStyle, NotDraggingStyle, -} from 'react-beautiful-dnd'; -import { Draggable, Droppable } from 'react-beautiful-dnd'; +} from '@hello-pangea/dnd'; +import { Draggable, Droppable } from '@hello-pangea/dnd'; import { useDispatch } from 'react-redux'; import styled from 'styled-components'; @@ -39,7 +39,7 @@ export const DragEffects = styled.div``; DragEffects.displayName = 'DragEffects'; /** - * Wraps the `react-beautiful-dnd` error boundary. See also: + * Wraps the `@hello-pangea/dnd` error boundary. See also: * https://github.com/atlassian/react-beautiful-dnd/blob/v12.0.0/docs/guides/setup-problem-detection-and-error-recovery.md * * NOTE: This extends from `PureComponent` because, at the time of this @@ -355,13 +355,31 @@ const DraggableWrapperComponent: React.FC = ({ > {truncate ? ( - {render(dataProvider, null, { isDragging: false, isDropAnimating: false })} + {render(dataProvider, null, { + isDragging: false, + isDropAnimating: false, + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, + })} ) : ( - {render(dataProvider, null, { isDragging: false, isDropAnimating: false })} + {render(dataProvider, null, { + isDragging: false, + isDropAnimating: false, + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, + })} )}
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx index dc3c963a8adfb..d0b1ce4eca211 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/droppable_wrapper.tsx @@ -7,8 +7,8 @@ import { rgba } from 'polished'; import React, { useCallback } from 'react'; -import type { DraggableChildrenFn } from 'react-beautiful-dnd'; -import { Droppable } from 'react-beautiful-dnd'; +import type { DraggableChildrenFn } from '@hello-pangea/dnd'; +import { Droppable } from '@hello-pangea/dnd'; import styled from 'styled-components'; interface Props { diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.test.ts index a91eb66a83c55..e65bc6a1e431a 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.test.ts @@ -6,7 +6,7 @@ */ import { omit } from 'lodash/fp'; -import type { DropResult } from 'react-beautiful-dnd'; +import type { DropResult } from '@hello-pangea/dnd'; import type { IdToDataProvider } from '../../store/drag_and_drop/model'; @@ -86,6 +86,7 @@ describe('helpers', () => { source: { index: 0, droppableId: getDroppableId('2119990039033485') }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -99,6 +100,7 @@ describe('helpers', () => { source: { index: 0, droppableId: `${droppableIdPrefix}.somethingElse.2119990039033485` }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -197,6 +199,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -216,6 +219,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -237,6 +241,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -244,7 +249,7 @@ describe('helpers', () => { test('it returns false when the destination is undefined', () => { expect( destinationIsTimelineProviders({ - destination: undefined, + destination: null, draggableId: getDraggableId('685260508808089'), reason: 'DROP', source: { @@ -253,6 +258,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -272,6 +278,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -293,6 +300,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -300,7 +308,7 @@ describe('helpers', () => { test('it returns returns false when the destination is undefined', () => { expect( destinationIsTimelineColumns({ - destination: undefined, + destination: null, draggableId: getDraggableFieldId({ contextId: 'test', fieldId: 'event.action' }), reason: 'DROP', source: { @@ -309,6 +317,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -328,6 +337,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -349,6 +359,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -356,7 +367,7 @@ describe('helpers', () => { test('it returns false when the destination is undefined', () => { expect( destinationIsTimelineButton({ - destination: undefined, + destination: null, draggableId: getDraggableId('685260508808089'), reason: 'DROP', source: { @@ -365,6 +376,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -384,6 +396,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -404,6 +417,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }); const expected = '2119990039033485'; @@ -426,6 +440,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }); const expected = 'event.action'; @@ -449,6 +464,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -468,6 +484,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -475,7 +492,7 @@ describe('helpers', () => { test('it returns false when the draggable is NOT content', () => { expect( providerWasDroppedOnTimeline({ - destination: undefined, + destination: null, draggableId: `${draggableIdPrefix}.timeline.timeline.dataProvider.685260508808089`, reason: 'DROP', source: { @@ -484,6 +501,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -497,6 +515,7 @@ describe('helpers', () => { source: { index: 0, droppableId: `${droppableIdPrefix}.somethingElse.2119990039033485` }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -516,6 +535,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -537,6 +557,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(true); }); @@ -556,6 +577,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -575,6 +597,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -594,6 +617,7 @@ describe('helpers', () => { }, type: 'DEFAULT', mode: 'FLUID', + combine: null, }) ).toEqual(false); }); @@ -777,6 +801,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(true); @@ -791,6 +816,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.1' }, type: 'DEFAULT', + combine: null, }; expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(true); @@ -798,12 +824,14 @@ describe('helpers', () => { test('it returns false when destination is undefined', () => { const result: DropResult = { + destination: null, draggableId: 'draggableId.timelineProviders.timeline-1.group.0.port-default-draggable-netflow-renderer-timeline-1-Ib4zD3IBbNV0npT21btr-Ib4zD3IBbNV0npT21btr-source_port-57828', mode: 'FLUID', reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.1' }, type: 'DEFAULT', + combine: null, }; expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false); @@ -818,6 +846,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-2.group.0' }, type: 'DEFAULT', + combine: null, }; expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false); @@ -832,6 +861,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false); @@ -846,6 +876,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.otherProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(sourceAndDestinationAreSameTimelineProviders(result)).toBe(false); @@ -862,6 +893,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(userIsReArrangingProviders(result)).toBe(true); @@ -876,6 +908,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(userIsReArrangingProviders(result)).toBe(false); @@ -890,6 +923,7 @@ describe('helpers', () => { reason: 'CANCEL', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(userIsReArrangingProviders(result)).toBe(false); @@ -904,6 +938,7 @@ describe('helpers', () => { reason: 'CANCEL', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.0' }, type: 'DEFAULT', + combine: null, }; expect(userIsReArrangingProviders(result)).toBe(false); @@ -911,12 +946,14 @@ describe('helpers', () => { test('it returns false when reason IS DROP, but destination is undefined', () => { const result: DropResult = { + destination: null, draggableId: 'draggableId.timelineProviders.timeline-1.group.0.port-default-draggable-netflow-renderer-timeline-1-Ib4zD3IBbNV0npT21btr-Ib4zD3IBbNV0npT21btr-source_port-57828', mode: 'FLUID', reason: 'DROP', source: { index: 0, droppableId: 'droppableId.timelineProviders.timeline-1.group.1' }, type: 'DEFAULT', + combine: null, }; expect(userIsReArrangingProviders(result)).toBe(false); @@ -931,6 +968,7 @@ describe('helpers', () => { reason: 'DROP', source: { index: 0, droppableId: 'droppableId.content.hosts-table-hostName-ENDPOINT-W-0-01' }, type: 'DEFAULT', + combine: null, }; test('it dispatches the expected UPDATE_PROVIDERS action when the provider to add exists in the `dataProviders` collection of `id -> `DataProvider`', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts index e98e9afebb0a2..ae0a417e5e32a 100644 --- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/helpers.ts @@ -5,7 +5,7 @@ * 2.0. */ import { isString, keyBy } from 'lodash/fp'; -import type { DropResult } from 'react-beautiful-dnd'; +import type { DropResult } from '@hello-pangea/dnd'; import type { Dispatch } from 'redux'; import type { ActionCreator } from 'typescript-fsa'; diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx index 07c1b360394e3..16ed7f95b87c6 100644 --- a/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/index.tsx @@ -7,7 +7,7 @@ import { EuiFocusTrap, EuiScreenReaderOnly } from '@elastic/eui'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import type { DraggableId } from 'react-beautiful-dnd'; +import type { DraggableId } from '@hello-pangea/dnd'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx index 9aa2e27d0716a..4acebe2d3a12c 100644 --- a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx +++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_action_items.tsx @@ -7,7 +7,7 @@ import { EuiContextMenuItem } from '@elastic/eui'; import React, { useCallback, useMemo } from 'react'; -import type { DraggableId } from 'react-beautiful-dnd'; +import type { DraggableId } from '@hello-pangea/dnd'; import { isEmpty } from 'lodash'; diff --git a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx index 8da15356b1bcc..324f5af4e16e7 100644 --- a/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx +++ b/x-pack/plugins/security_solution/public/common/components/hover_actions/use_hover_actions.tsx @@ -6,7 +6,7 @@ */ import React, { useCallback, useMemo, useState, useRef, useContext } from 'react'; -import type { DraggableProvided, DraggableStateSnapshot } from 'react-beautiful-dnd'; +import type { DraggableProvided, DraggableStateSnapshot } from '@hello-pangea/dnd'; import { TimelineContext } from '../../../timelines/components/timeline'; import { HoverActions } from '.'; @@ -102,7 +102,16 @@ export const useHoverActions = ({ - {render(dataProvider, null, { isDragging: false, isDropAnimating: false })} + {render(dataProvider, null, { + isDragging: false, + isDropAnimating: false, + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, + })} ) : null; diff --git a/x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.test.tsx b/x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.test.tsx index 63547de9fd24e..573b51a80ed42 100644 --- a/x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.test.tsx +++ b/x-pack/plugins/security_solution/public/common/lib/cell_actions/default_cell_actions.test.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import type { EuiDataGridColumn } from '@elastic/eui'; +import type { EuiDataGridColumn, EuiDataGridColumnCellAction } from '@elastic/eui'; import type { ColumnHeaderType, DataTableCellAction } from '../../../../common/types'; import { TableId } from '@kbn/securitysolution-data-table'; import type { @@ -43,7 +43,7 @@ describe('default cell actions', () => { header: columnHeaders.find((h) => h.id === header.id), pageSize, scopeId: tableId, - }); + }) as EuiDataGridColumnCellAction; return { ...header, @@ -76,7 +76,7 @@ describe('default cell actions', () => { header: [columnHeaders].find((h) => h.id === header.id), pageSize, scopeId: tableId, - }); + }) as EuiDataGridColumnCellAction; return { ...header, diff --git a/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts b/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts index 7c85a433e1ecf..3fa7f817d9fab 100644 --- a/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts +++ b/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts @@ -10,10 +10,10 @@ import type { DraggableStateSnapshot, DroppableProvided, DroppableStateSnapshot, -} from 'react-beautiful-dnd'; +} from '@hello-pangea/dnd'; import type React from 'react'; -jest.mock('react-beautiful-dnd', () => ({ +jest.mock('@hello-pangea/dnd', () => ({ Droppable: ({ children, }: { @@ -22,13 +22,16 @@ jest.mock('react-beautiful-dnd', () => ({ children( { droppableProps: { - 'data-rbd-droppable-context-id': '123', - 'data-rbd-droppable-id': '123', + 'data-rfd-droppable-context-id': '123', + 'data-rfd-droppable-id': '123', }, innerRef: jest.fn(), + placeholder: null, }, { isDraggingOver: false, + draggingOverWith: null, + draggingFromThisWith: null, isUsingPlaceholder: false, } ), @@ -40,14 +43,21 @@ jest.mock('react-beautiful-dnd', () => ({ children( { draggableProps: { - 'data-rbd-draggable-context-id': '123', - 'data-rbd-draggable-id': '123', + 'data-rfd-draggable-context-id': '123', + 'data-rfd-draggable-id': '123', }, innerRef: jest.fn(), + dragHandleProps: null, }, { isDragging: false, isDropAnimating: false, + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, } ), DragDropContext: ({ children }: { children: React.ReactNode }) => children, diff --git a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx index 44d9300a6d65e..21312f9c24f3f 100644 --- a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx +++ b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx @@ -9,8 +9,8 @@ import { euiDarkVars } from '@kbn/ui-theme'; import { I18nProvider } from '@kbn/i18n-react'; import React from 'react'; -import type { DropResult, ResponderProvided } from 'react-beautiful-dnd'; -import { DragDropContext } from 'react-beautiful-dnd'; +import type { DropResult, ResponderProvided } from '@hello-pangea/dnd'; +import { DragDropContext } from '@hello-pangea/dnd'; import { Provider as ReduxStoreProvider } from 'react-redux'; import type { Store } from 'redux'; import { BehaviorSubject } from 'rxjs'; diff --git a/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap index 4103c9597502b..8ad225711b773 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap @@ -229,8 +229,8 @@ tr:hover .c3:focus::before { data-test-subj="draggableWrapperDiv" >
{ - const original = jest.requireActual('react-beautiful-dnd'); - return { - ...original, - Droppable: ({ children }: { children: DroppableProps['children'] }) => - children( - { - droppableProps: { - 'data-rbd-droppable-context-id': '', - 'data-rbd-droppable-id': '', - }, - innerRef: jest.fn(), +jest.mock('@hello-pangea/dnd', () => ({ + Droppable: ({ + children, + }: { + children: (a: DroppableProvided, b: DroppableStateSnapshot) => void; + }) => + children( + { + droppableProps: { + 'data-rfd-droppable-context-id': '123', + 'data-rfd-droppable-id': '123', }, - { - isDraggingOver: false, - isUsingPlaceholder: false, - } - ), - Draggable: ({ children }: { children: DraggableProps['children'] }) => - children( - { - draggableProps: { - 'data-rbd-draggable-context-id': '', - 'data-rbd-draggable-id': '', - }, - innerRef: jest.fn(), - }, - { - isDragging: false, - isDropAnimating: false, + innerRef: jest.fn(), + placeholder: null, + }, + { + isDraggingOver: false, + draggingOverWith: null, + draggingFromThisWith: null, + isUsingPlaceholder: false, + } + ), + Draggable: ({ + children, + }: { + children: (a: DraggableProvided, b: DraggableStateSnapshot) => void; + }) => + children( + { + draggableProps: { + 'data-rfd-draggable-context-id': '123', + 'data-rfd-draggable-id': '123', }, - { - draggableId: '', - mode: 'SNAP', - source: { - droppableId: '', - index: 0, - }, - } - ), - DraggableProvided: () => <>, - DraggableStateSnapshot: () => <>, - DraggingStyle: () => <>, - NotDraggingStyle: () => <>, - }; -}); + innerRef: jest.fn(), + dragHandleProps: null, + }, + { + isDragging: false, + isDropAnimating: false, + isClone: false, + dropAnimation: null, + draggingOver: null, + combineWith: null, + combineTargetFor: null, + mode: null, + } + ), + DragDropContext: ({ children }: { children: React.ReactNode }) => children, +})); describe('Body', () => { const getWrapper = async (childrenComponent: JSX.Element, store?: { store: Store }) => { diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap index cfc340d68383e..e9f09d689f0cd 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap @@ -253,8 +253,8 @@ tr:hover .c5:focus::before { data-test-subj="draggableWrapperDiv" >
{ }); describe('isValidDestination', () => { - test('it returns false when destination is undefined', () => { - expect(isValidDestination(undefined)).toBe(false); + test('it returns false when destination is null', () => { + expect(isValidDestination(null)).toBe(false); }); test('it returns true when the type guard matches as DraggableLocation ', () => { @@ -861,7 +861,7 @@ describe('helpers', () => { addProviderToGroup({ dataProviders, - destination: undefined, + destination: null, dispatch, onAddedToTimeline, providerToAdd, @@ -877,7 +877,7 @@ describe('helpers', () => { addProviderToGroup({ dataProviders, - destination: undefined, + destination: null, dispatch, onAddedToTimeline, providerToAdd, diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/helpers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/helpers.tsx index 5567e88cb05bc..d96e98212f38d 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/helpers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/helpers.tsx @@ -6,7 +6,7 @@ */ import { omit } from 'lodash/fp'; -import type { DraggableLocation } from 'react-beautiful-dnd'; +import type { DraggableLocation } from '@hello-pangea/dnd'; import type { Dispatch } from 'redux'; import { updateProviders } from '../../../store/timeline/actions'; @@ -64,7 +64,7 @@ export const move = ({ }; export const isValidDestination = ( - destination: DraggableLocation | undefined + destination: DraggableLocation | null ): destination is DraggableLocation => destination != null; export const sourceAndDestinationAreSameDroppable = ({ @@ -232,7 +232,7 @@ export const reArrangeProviders = ({ timelineId, }: { dataProviders: DataProvider[]; - destination: DraggableLocation | undefined; + destination: DraggableLocation | null; dispatch: Dispatch; source: DraggableLocation; timelineId: string; @@ -271,7 +271,7 @@ export const addProviderToGroup = ({ timelineId, }: { dataProviders: DataProvider[]; - destination: DraggableLocation | undefined; + destination: DraggableLocation | null; dispatch: Dispatch; onAddedToTimeline: (fieldOrValue: string) => void; providerToAdd: DataProvider; @@ -325,7 +325,7 @@ export const addContentToTimeline = ({ timelineId, }: { dataProviders: DataProvider[]; - destination: DraggableLocation | undefined; + destination: DraggableLocation | null; dispatch: Dispatch; onAddedToTimeline: (fieldOrValue: string) => void; providerToAdd: DataProvider; diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx index 000ba7d22c9cf..9de471e578363 100644 --- a/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx +++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx @@ -8,8 +8,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiFormHelpText, EuiSpacer } from '@elastic/eui'; import { rgba } from 'polished'; import React, { useCallback, useMemo, useRef, useState } from 'react'; -import type { DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd'; -import { Draggable, Droppable } from 'react-beautiful-dnd'; +import type { DraggingStyle, NotDraggingStyle } from '@hello-pangea/dnd'; +import { Draggable, Droppable } from '@hello-pangea/dnd'; import styled from 'styled-components'; import { useDispatch } from 'react-redux'; diff --git a/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx b/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx index dcd86b494e546..d927729a2e4af 100644 --- a/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx +++ b/x-pack/plugins/timelines/public/components/hover_actions/actions/add_to_timeline.tsx @@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useMemo } from 'react'; import { EuiContextMenuItem, EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui'; -import { DraggableId } from 'react-beautiful-dnd'; +import { DraggableId } from '@hello-pangea/dnd'; import { isEmpty } from 'lodash'; import { useDispatch } from 'react-redux'; diff --git a/x-pack/plugins/timelines/public/hooks/use_add_to_timeline.ts b/x-pack/plugins/timelines/public/hooks/use_add_to_timeline.ts index 10382853405ab..5fe02c6bad2f4 100644 --- a/x-pack/plugins/timelines/public/hooks/use_add_to_timeline.ts +++ b/x-pack/plugins/timelines/public/hooks/use_add_to_timeline.ts @@ -4,10 +4,11 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ +import type { Position } from 'css-box-model'; import { range } from 'd3-array'; import { interpolate } from 'd3-interpolate'; import { useCallback } from 'react'; -import type { DraggableId, FluidDragActions, Position, SensorAPI } from 'react-beautiful-dnd'; +import type { DraggableId, FluidDragActions, SensorAPI } from '@hello-pangea/dnd'; import { EMPTY_PROVIDERS_GROUP_CLASS_NAME, @@ -19,7 +20,7 @@ let _sensorApiSingleton: SensorAPI; /** * This hook is passed (in an array) to the `sensors` prop of the - * `react-beautiful-dnd` `DragDropContext` component. Example: + * `@hello-pangea/dnd` `DragDropContext` component. Example: * * ``` diff --git a/x-pack/plugins/timelines/public/types.ts b/x-pack/plugins/timelines/public/types.ts index 4933161f54e23..69bd8bc92f8fd 100644 --- a/x-pack/plugins/timelines/public/types.ts +++ b/x-pack/plugins/timelines/public/types.ts @@ -6,7 +6,7 @@ */ import { ReactElement } from 'react'; -import type { SensorAPI } from 'react-beautiful-dnd'; +import type { SensorAPI } from '@hello-pangea/dnd'; import { Store } from 'redux'; import { CoreStart } from '@kbn/core/public'; import type { DataPublicPluginStart } from '@kbn/data-plugin/public'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_badge.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_badge.test.tsx index a1d3b20206dbd..3a1a1d27a64c5 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_badge.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_tag_badge.test.tsx @@ -6,6 +6,7 @@ */ import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { RuleTagBadge } from './rule_tag_badge'; @@ -32,28 +33,26 @@ describe('RuleTagBadge', () => { }); it('can open and close the popover', () => { - const wrapper = mountWithIntl( + const { rerender, baseElement } = render( ); - expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-a"]').exists()).toBeFalsy(); - expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-b"]').exists()).toBeFalsy(); - expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-c"]').exists()).toBeFalsy(); - - wrapper.find('[data-test-subj="ruleTagBadge"]').at(1).simulate('click'); + expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-a"]')).toBe(null); + expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-b"]')).toBe(null); + expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-c"]')).toBe(null); + fireEvent.click(baseElement.querySelector('[data-test-subj="ruleTagBadge"]')!); expect(onClickMock).toHaveBeenCalledTimes(1); - wrapper.setProps({ - isOpen: true, - }); - - expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-a"]').exists()).toBeTruthy(); - expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-b"]').exists()).toBeTruthy(); - expect(wrapper.find('[data-test-subj="ruleTagBadgeItem-c"]').exists()).toBeTruthy(); + rerender( + + ); - wrapper.find('[data-test-subj="ruleTagBadge"]').at(1).simulate('click'); + expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-a"]')).toBeTruthy(); + expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-b"]')).toBeTruthy(); + expect(baseElement.querySelector('[data-test-subj="ruleTagBadgeItem-c"]')).toBeTruthy(); + fireEvent.click(baseElement.querySelector('[data-test-subj="ruleTagBadge"]')!); expect(onClickMock).toHaveBeenCalledTimes(2); }); diff --git a/yarn.lock b/yarn.lock index 5a72d2a9a2534..18720017db4a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1195,13 +1195,20 @@ pirates "^4.0.5" source-map-support "^0.5.16" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.22.5", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.22.10" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.10.tgz#ae3e9631fd947cb7e3610d3e9d8fef5f76696682" integrity sha512-21t/fkKLMZI4pqP2wlmsQAWnYW1PDyKyyUV4vCi+B25ydmdaYTKXPwCj0BzSUnZf4seIiYvSA3jcZ3gdsMFkLQ== dependencies: regenerator-runtime "^0.14.0" +"@babel/runtime@^7.12.1", "@babel/runtime@^7.19.4": + version "7.22.6" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.6.tgz#57d64b9ae3cff1d67eb067ae117dac087f5bd438" + integrity sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/template@^7.12.7", "@babel/template@^7.18.10", "@babel/template@^7.20.7", "@babel/template@^7.3.3": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.20.7.tgz#a15090c2839a83b02aa996c0b4994005841fd5a8" @@ -1570,15 +1577,15 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@85.1.0": - version "85.1.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-85.1.0.tgz#cad3113223992b3a857b8054440ce4f499eaf897" - integrity sha512-G2pBPJrNbO92/ttRowlxGczuAQEkcXlco4LJWWesWBqKxOW6ypF8LJxlC7J7tIBWAOUEQFSVUGELqPnynMVoew== +"@elastic/eui@86.0.0": + version "86.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-86.0.0.tgz#52137f914b4b50566c5169c23a82bd4ed0f2ed0b" + integrity sha512-+0/BggLqlZFxYI/HPikfu8lh8ejl7RIOikgxVq1hQuXqjp+cqeJL5R2OcUHQVHBwYy/FdDiQkMHA0Vg/itp4Vw== dependencies: + "@hello-pangea/dnd" "^16.2.0" "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.194" "@types/numeral" "^0.0.28" - "@types/react-beautiful-dnd" "^13.1.2" "@types/react-input-autosize" "^2.2.1" "@types/react-virtualized-auto-sizer" "^1.0.1" "@types/react-window" "^1.8.5" @@ -1591,7 +1598,6 @@ mdast-util-to-hast "^10.0.0" numeral "^2.0.6" prop-types "^15.6.0" - react-beautiful-dnd "^13.1.0" react-dropzone "^11.5.3" react-element-to-jsx-string "^14.3.4" react-focus-on "^3.9.1" @@ -2514,6 +2520,32 @@ "@hapi/bourne" "2.x.x" "@hapi/hoek" "9.x.x" +"@hello-pangea/dnd@^16.2.0": + version "16.2.0" + resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.2.0.tgz#58cbadeb56f8c7a381da696bb7aa3bfbb87876ec" + integrity sha512-inACvMcvvLr34CG0P6+G/3bprVKhwswxjcsFUSJ+fpOGjhvDj9caiA9X3clby0lgJ6/ILIJjyedHZYECB7GAgA== + dependencies: + "@babel/runtime" "^7.19.4" + css-box-model "^1.2.1" + memoize-one "^6.0.0" + raf-schd "^4.0.3" + react-redux "^8.0.4" + redux "^4.2.0" + use-memo-one "^1.1.3" + +"@hello-pangea/dnd@^16.3.0": + version "16.3.0" + resolved "https://registry.yarnpkg.com/@hello-pangea/dnd/-/dnd-16.3.0.tgz#3776212f812df4e8e69c42831ec8ab7ff3a087d6" + integrity sha512-RYQ/K8shtJoyNPvFWz0gfXIK7HF3P3mL9UZFGMuHB0ljRSXVgMjVFI/FxcZmakMzw6tO7NflWLriwTNBow/4vw== + dependencies: + "@babel/runtime" "^7.22.5" + css-box-model "^1.2.1" + memoize-one "^6.0.0" + raf-schd "^4.0.3" + react-redux "^8.1.1" + redux "^4.2.1" + use-memo-one "^1.1.3" + "@humanwhocodes/config-array@^0.11.10": version "0.11.10" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.10.tgz#5a3ffe32cc9306365fb3fd572596cd602d5e12d2" @@ -8879,7 +8911,7 @@ resolved "https://registry.yarnpkg.com/@types/hjson/-/hjson-2.4.2.tgz#fd0288a5b6778cda993c978e43cc978ddc8f22e9" integrity sha512-MSKTfEyR8DbzJTOAY47BIJBD72ol4cu6BOw5inda0q1eEtEmurVHL4OmYB3Lxa4/DwXbWidkddvtoygbGQEDIw== -"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0": +"@types/hoist-non-react-statics@*", "@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1": version "3.3.1" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== @@ -9415,13 +9447,6 @@ resolved "https://registry.yarnpkg.com/@types/rbush/-/rbush-3.0.0.tgz#b6887d99b159e87ae23cd14eceff34f139842aa6" integrity sha512-W3ue/GYWXBOpkRm0VSoifrP3HV0Ni47aVJWvXyWMcbtpBy/l/K/smBRiJ+fI8f7shXRjZBiux+iJzYbh7VmcZg== -"@types/react-beautiful-dnd@^13.0.0", "@types/react-beautiful-dnd@^13.1.2": - version "13.1.2" - resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130" - integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg== - dependencies: - "@types/react" "*" - "@types/react-dom@<18.0.0", "@types/react-dom@^17.0.17": version "17.0.17" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1" @@ -9803,6 +9828,11 @@ resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.3.tgz#9c088679876f374eb5983f150d4787aa6fb32d7e" integrity sha512-FvUupuM3rlRsRtCN+fDudtmytGO6iHJuuRKS1Ss0pG5z8oX0diNEw94UEL7hgDbpN94rgaK5R7sWm6RrSkZuAQ== +"@types/use-sync-external-store@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" + integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== + "@types/uuid@^9.0.0": version "9.0.0" resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.0.tgz#53ef263e5239728b56096b0a869595135b7952d2" @@ -13441,10 +13471,10 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== -css-box-model@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.0.tgz#3a26377b4162b3200d2ede4b064ec5b6a75186d0" - integrity sha512-lri0br+jSNV0kkkiGEp9y9y3Njq2PmpqbeGWRFQJuZteZzY9iC9GZhQ8Y4WpPwM/2YocjHePxy14igJY7YKzkA== +css-box-model@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" + integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== dependencies: tiny-invariant "^1.0.6" @@ -21490,7 +21520,7 @@ memfs@^3.1.2, memfs@^3.4.3: dependencies: fs-monkey "^1.0.3" -"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0, memoize-one@^5.1.1: +"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0: version "5.1.1" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0" integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA== @@ -24675,10 +24705,10 @@ quote-unquote@^1.0.0: resolved "https://registry.yarnpkg.com/quote-unquote/-/quote-unquote-1.0.0.tgz#67a9a77148effeaf81a4d428404a710baaac8a0b" integrity sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg== -raf-schd@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0" - integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ== +raf-schd@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== raf@^3.4.1: version "3.4.1" @@ -24818,19 +24848,6 @@ react-ace@^7.0.5: lodash.isequal "^4.5.0" prop-types "^15.7.2" -react-beautiful-dnd@^13.1.0: - version "13.1.0" - resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" - integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== - dependencies: - "@babel/runtime" "^7.9.2" - css-box-model "^1.2.0" - memoize-one "^5.1.1" - raf-schd "^4.0.2" - react-redux "^7.2.0" - redux "^4.0.4" - use-memo-one "^1.1.1" - react-clientside-effect@^1.2.6: version "1.2.6" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a" @@ -25073,7 +25090,7 @@ react-popper@^2.2.4: react-fast-compare "^3.0.1" warning "^4.0.2" -react-redux@^7.1.0, react-redux@^7.2.0, react-redux@^7.2.8: +react-redux@^7.1.0, react-redux@^7.2.8: version "7.2.8" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== @@ -25085,6 +25102,30 @@ react-redux@^7.1.0, react-redux@^7.2.0, react-redux@^7.2.8: prop-types "^15.7.2" react-is "^17.0.2" +react-redux@^8.0.4: + version "8.0.5" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.0.5.tgz#e5fb8331993a019b8aaf2e167a93d10af469c7bd" + integrity sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw== + dependencies: + "@babel/runtime" "^7.12.1" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/use-sync-external-store" "^0.0.3" + hoist-non-react-statics "^3.3.2" + react-is "^18.0.0" + use-sync-external-store "^1.0.0" + +react-redux@^8.1.1: + version "8.1.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.2.tgz#9076bbc6b60f746659ad6d51cb05de9c5e1e9188" + integrity sha512-xJKYI189VwfsFc4CJvHqHlDrzyFTY/3vZACbE+rr/zQ34Xx1wQfB4OTOSeOSNrF6BDVe8OOdxIrAnMGXA3ggfw== + dependencies: + "@babel/runtime" "^7.12.1" + "@types/hoist-non-react-statics" "^3.3.1" + "@types/use-sync-external-store" "^0.0.3" + hoist-non-react-statics "^3.3.2" + react-is "^18.0.0" + use-sync-external-store "^1.0.0" + react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -25575,6 +25616,13 @@ redux@^4.0.0, redux@^4.0.4, redux@^4.1.2, redux@^4.2.0: dependencies: "@babel/runtime" "^7.9.2" +redux@^4.2.1: + version "4.2.1" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197" + integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w== + dependencies: + "@babel/runtime" "^7.9.2" + refractor@^3.2.0, refractor@^3.5.0: version "3.6.0" resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.6.0.tgz#ac318f5a0715ead790fcfb0c71f4dd83d977935a" @@ -25616,7 +25664,7 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== -regenerator-runtime@^0.13.7: +regenerator-runtime@^0.13.11, regenerator-runtime@^0.13.7: version "0.13.11" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9" integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg== @@ -29293,10 +29341,10 @@ use-latest@^1.2.1: dependencies: use-isomorphic-layout-effect "^1.1.1" -use-memo-one@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" - integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== +use-memo-one@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99" + integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ== use-resize-observer@^9.1.0: version "9.1.0"