From 038ac89c1c396bb4bb3357e0ad4996b23d251ad4 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Wed, 4 Oct 2023 12:32:03 -0700 Subject: [PATCH] Upgrade EUI to v88.5.4 (#167555) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `v88.5.0`⏩`v88.5.4` This EUI upgrade helps unblock the Shared UX team with some beta serverless nav updates not listed in the below changelog (https://github.com/elastic/eui/pull/7228 and https://github.com/elastic/eui/pull/7248). --- ## [`88.5.4`](https://github.com/elastic/eui/tree/v88.5.4) - This release contains internal changes to a beta component needed by Kibana. ## [`88.5.3`](https://github.com/elastic/eui/tree/v88.5.3) **Bug fixes** - Fixed `EuiComboBox` search input width not resetting correctly on selection ([#7240](https://github.com/elastic/eui/pull/7240)) ## [`88.5.2`](https://github.com/elastic/eui/tree/v88.5.2) **Bug fixes** - Fixed broken `EuiTextTruncate` testenv mocks ([#7234](https://github.com/elastic/eui/pull/7234)) ## [`88.5.1`](https://github.com/elastic/eui/tree/v88.5.1) - Improved the performance of `EuiComboBox` by removing the `react-autosizer-input` dependency ([#7215](https://github.com/elastic/eui/pull/7215)) **Dependency updates** - Updated `react-element-to-jsx-string` to v5.0.0 ([#7214](https://github.com/elastic/eui/pull/7214)) - Removed unused `@types/vfile-message` dependency ([#7214](https://github.com/elastic/eui/pull/7214)) --- package.json | 2 +- .../__snapshots__/index.test.tsx.snap | 240 +++++++----------- .../src/field/__tests__/index.test.tsx | 4 +- .../ui/components/navigation_section_ui.tsx | 28 +- .../src/ui/components/navigation_ui.tsx | 10 +- src/dev/license_checker/config.ts | 2 +- .../connectors/jira/case_fields.test.tsx | 10 +- .../use_combo_box_reset/index.test.tsx | 3 +- .../chart_panels/index.test.tsx | 6 +- .../rule_creation/indicator_match_rule.cy.ts | 10 +- yarn.lock | 48 ++-- 11 files changed, 163 insertions(+), 200 deletions(-) diff --git a/package.json b/package.json index b46f28b82b3a..5df7c8919a27 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "88.5.0", + "@elastic/eui": "88.5.4", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap b/packages/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap index 5225cbc31deb..9fefe47c379b 100644 --- a/packages/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/kbn-securitysolution-autocomplete/src/field/__tests__/__snapshots__/index.test.tsx.snap @@ -30,25 +30,18 @@ Object { machine.os.raw -
-
-
@@ -297,26 +276,19 @@ Object { machine.os.raw - @@ -406,25 +378,18 @@ Object { machine.os.raw -
-
-
-
{ ); const fieldAutocompleteComboBox = wrapper.getByTestId('comboBoxSearchInput'); fireEvent.change(fieldAutocompleteComboBox, { target: { value: '_source' } }); - await waitFor(() => - expect(wrapper.getByTestId('fieldAutocompleteComboBox')).toHaveTextContent('_source') - ); + expect(fieldAutocompleteComboBox).toHaveValue('_source'); }); it('it allows custom user input if "acceptsCustomOptions" is "true"', async () => { diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx index 1f60ade15930..2d31154ddf2e 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_section_ui.tsx @@ -11,7 +11,8 @@ import React, { FC, useEffect, useState } from 'react'; import { EuiCollapsibleNavItem, EuiCollapsibleNavItemProps, - EuiCollapsibleNavSubItemGroupTitle, + EuiCollapsibleNavSubItemProps, + EuiTitle, } from '@elastic/eui'; import { ChromeProjectNavigationNode } from '@kbn/core-chrome-browser'; import classnames from 'classnames'; @@ -22,7 +23,7 @@ import { isAbsoluteLink } from '../../utils'; const navigationNodeToEuiItem = ( item: ChromeProjectNavigationNode, { navigateToUrl, basePath }: { navigateToUrl: NavigateToUrlFn; basePath: BasePathService } -): EuiCollapsibleNavSubItemGroupTitle | EuiCollapsibleNavItemProps => { +): EuiCollapsibleNavSubItemProps => { const href = item.deepLink?.url ?? item.href; const id = item.path ? item.path.join('.') : item.id; const isExternal = Boolean(href) && isAbsoluteLink(href!); @@ -33,9 +34,30 @@ const navigationNodeToEuiItem = ( [`nav-item-isActive`]: isSelected, }); + // Note: this can be replaced with an `isGroup` API or whatever you prefer + // Could also probably be pulled out to a separate component vs inlined + if (item.isGroupTitle) { + return { + renderItem: () => ( + ({ + marginTop: euiTheme.size.base, + paddingBlock: euiTheme.size.xs, + paddingInline: euiTheme.size.s, + })} + > +
+ {item.title} +
+ + ), + }; + } + return { id, - isGroupTitle: item.isGroupTitle, title: item.title, isSelected, accordionProps: { diff --git a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx index 113bfc0add6d..039823daa9a1 100644 --- a/packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx +++ b/packages/shared-ux/chrome/navigation/src/ui/components/navigation_ui.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import { EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui'; +import { EuiCollapsibleNavBeta } from '@elastic/eui'; import React, { FC } from 'react'; interface Props { @@ -22,10 +22,12 @@ export const NavigationUI: FC = ({ children, unstyled, footerChildren, da <>{children} ) : ( <> - + {children} - - {footerChildren && {footerChildren}} + + {footerChildren && ( + {footerChildren} + )} )} diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 7efffb58d307..e5ee6fbf7673 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = { 'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint '@elastic/ems-client@8.4.0': ['Elastic License 2.0'], - '@elastic/eui@88.5.0': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@88.5.4': ['SSPL-1.0 OR Elastic License 2.0'], 'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry 'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary }; diff --git a/x-pack/plugins/cases/public/components/connectors/jira/case_fields.test.tsx b/x-pack/plugins/cases/public/components/connectors/jira/case_fields.test.tsx index b03bb35d895b..c35252f81b12 100644 --- a/x-pack/plugins/cases/public/components/connectors/jira/case_fields.test.tsx +++ b/x-pack/plugins/cases/public/components/connectors/jira/case_fields.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { omit } from 'lodash/fp'; -import { waitFor, screen, fireEvent, act, within } from '@testing-library/react'; +import { waitFor, screen, fireEvent, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { connector, issues } from '../mock'; @@ -132,13 +132,11 @@ describe('Jira Fields', () => { ); + const input = screen.getByTestId('comboBoxSearchInput'); - await act(async () => { - const event = { target: { value: 'parentId' } }; - fireEvent.change(screen.getByTestId('comboBoxSearchInput'), event); - }); + fireEvent.change(input, { target: { value: 'parentId' } }); - expect(screen.getByText('parentId')).toBeInTheDocument(); + expect(input).toHaveValue('parentId'); }); it('searches parent correctly', async () => { diff --git a/x-pack/plugins/security_solution/public/common/components/use_combo_box_reset/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/use_combo_box_reset/index.test.tsx index c1c432829005..e9082e2ca72a 100644 --- a/x-pack/plugins/security_solution/public/common/components/use_combo_box_reset/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/use_combo_box_reset/index.test.tsx @@ -73,7 +73,8 @@ describe('useEuiComboBoxReset', () => { fireEvent.change(searchInput, { target: { value: invalidValue } }); const afterInvalidInput = screen.getByTestId('comboBoxInput'); - expect(afterInvalidInput).toHaveTextContent(invalidValue); // the EuiComboBox is now in the "error state" + expect(searchInput).toHaveValue(invalidValue); // the EuiComboBox is now in the "error state" + expect(afterInvalidInput).not.toHaveTextContent(invalidValue); // Value should not have been applied const resetButton = screen.getByRole('button', { name: 'Reset' }); fireEvent.click(resetButton); // clicking invokes onReset() diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.test.tsx index 8baf8d8f59fa..07f07df47d88 100644 --- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/index.test.tsx @@ -253,7 +253,8 @@ describe('ChartPanels', () => { fireEvent.change(searchInput, { target: { value: invalidValue } }); const afterInvalidInput = screen.getAllByTestId('comboBoxInput')[0]; - expect(afterInvalidInput).toHaveTextContent(invalidValue); // the 'Group by' EuiComboBox is now in the "error state" + expect(searchInput).toHaveValue(invalidValue); // the 'Group by' EuiComboBox is now in the "error state" + expect(afterInvalidInput).not.toHaveTextContent(invalidValue); // Value should not have been applied resetGroupByFields(); // invoke the `Reset group by fields` context menu action @@ -292,7 +293,8 @@ describe('ChartPanels', () => { fireEvent.change(searchInput, { target: { value: invalidValue } }); const afterInvalidInput = screen.getAllByTestId('comboBoxInput')[1]; - expect(afterInvalidInput).toHaveTextContent(invalidValue); // the 'Group by top' EuiComboBox is now in the "error state" + expect(searchInput).toHaveValue(invalidValue); // the 'Group by top' EuiComboBox is now in the "error state" + expect(afterInvalidInput).not.toHaveTextContent(invalidValue); // Value should not have been applied resetGroupByFields(); // invoke the `Reset group by fields` context menu action diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/rule_creation/indicator_match_rule.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/rule_creation/indicator_match_rule.cy.ts index 0d1466a75518..8a0e74c2987e 100644 --- a/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/rule_creation/indicator_match_rule.cy.ts +++ b/x-pack/test/security_solution_cypress/cypress/e2e/detection_response/rule_creation/indicator_match_rule.cy.ts @@ -286,7 +286,7 @@ describe('indicator match', { tags: ['@ess', '@serverless', '@brokenInServerless validColumns: 'indicatorField', }); getIndicatorDeleteButton().click(); - getIndicatorIndexComboField().should('have.text', 'agent.name'); + getIndicatorIndexComboField().find('input').should('have.value', 'agent.name'); getIndicatorMappingComboField().should( 'have.text', getNewThreatIndicatorRule().threat_mapping[0].entries[0].value @@ -309,7 +309,9 @@ describe('indicator match', { tags: ['@ess', '@serverless', '@brokenInServerless validColumns: 'indexField', }); getIndicatorDeleteButton().click(); - getIndicatorMappingComboField().should('have.text', 'second-non-existent-value'); + getIndicatorMappingComboField() + .find('input') + .should('have.value', 'second-non-existent-value'); getIndicatorIndexComboField(2).should('not.exist'); getIndicatorMappingComboField(2).should('not.exist'); }); @@ -328,7 +330,9 @@ describe('indicator match', { tags: ['@ess', '@serverless', '@brokenInServerless validColumns: 'indicatorField', }); getIndicatorDeleteButton().click(); - getIndicatorIndexComboField().should('have.text', 'second-non-existent-value'); + getIndicatorIndexComboField() + .find('input') + .should('have.value', 'second-non-existent-value'); getIndicatorIndexComboField(2).should('not.exist'); getIndicatorMappingComboField(2).should('not.exist'); }); diff --git a/yarn.lock b/yarn.lock index 9fc330c952c4..7069092bc0cb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1603,19 +1603,17 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@88.5.0": - version "88.5.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-88.5.0.tgz#7d5c6f41e322479e6ea81e232a9c9c274a093de3" - integrity sha512-TFBr7T9qnbuk3gCgoZjX9Y37Byu4Cp3KVkmT0VeCTYBEwFkxKNzIRIhdLbZFzTsxCc3rssLqaE3d1qstqh3GtA== +"@elastic/eui@88.5.4": + version "88.5.4" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-88.5.4.tgz#7bfb1b0f9b49d745d98cfd3a912784b7f25626bd" + integrity sha512-1aq//kTcwuyXeH48kgG91i+4qlzreZUaLfpfQ0Lxcfq09fmJYqNjJLFnCE8f5zj1vIiEEdINywkr4Bk64VIoVQ== dependencies: "@hello-pangea/dnd" "^16.3.0" "@types/lodash" "^4.14.198" "@types/numeral" "^2.0.2" - "@types/react-input-autosize" "^2.2.1" "@types/react-window" "^1.8.5" "@types/refractor" "^3.0.2" "@types/resize-observer-browser" "^0.1.7" - "@types/vfile-message" "^2.0.0" chroma-js "^2.4.2" classnames "^2.3.2" lodash "^4.17.21" @@ -1623,9 +1621,8 @@ numeral "^2.0.6" prop-types "^15.6.0" react-dropzone "^11.7.1" - react-element-to-jsx-string "^14.3.4" + react-element-to-jsx-string "^15.0.0" react-focus-on "^3.9.1" - react-input-autosize "^3.0.0" react-is "^17.0.2" react-remove-scroll-bar "^2.3.4" react-virtualized-auto-sizer "^1.0.20" @@ -9647,13 +9644,6 @@ dependencies: "@types/react" "*" -"@types/react-input-autosize@^2.2.1": - version "2.2.1" - resolved "https://registry.yarnpkg.com/@types/react-input-autosize/-/react-input-autosize-2.2.1.tgz#6a335212e7fce1e1a4da56ae2095c8c5c35fbfe6" - integrity sha512-RxzEjd4gbLAAdLQ92Q68/AC+TfsAKTc4evsArUH1aIShIMqQMIMjsxoSnwyjtbFTO/AGIW/RQI94XSdvOxCz/w== - dependencies: - "@types/react" "*" - "@types/react-intl@^2.3.15": version "2.3.17" resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.17.tgz#e1fc6e46e8af58bdef9531259d509380a8a99e8e" @@ -10027,13 +10017,6 @@ resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.2.tgz#ede1d1b1e451548d44919dc226253e32a6952c4b" integrity sha512-kNnC1GFBLuhImSnV7w4njQkUiJi0ZXUycu1rUaouPqiKlXkh77JKgdRnTAp1x5eBwcIwbtI+3otwzuIDEuDoxQ== -"@types/vfile-message@^2.0.0": - version "2.0.0" - resolved "https://registry.yarnpkg.com/@types/vfile-message/-/vfile-message-2.0.0.tgz#690e46af0fdfc1f9faae00cd049cc888957927d5" - integrity sha512-GpTIuDpb9u4zIO165fUy9+fXcULdD8HFRNli04GehoMVbeNq7D6OBnqSmg3lxZnC+UvgUhEWKxdKiwYUkGltIw== - dependencies: - vfile-message "*" - "@types/vinyl-fs@*", "@types/vinyl-fs@^3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@types/vinyl-fs/-/vinyl-fs-3.0.2.tgz#cbaef5160ad7695483af0aa1b4fe67f166c18feb" @@ -25562,6 +25545,15 @@ react-element-to-jsx-string@^14.3.4: is-plain-object "5.0.0" react-is "17.0.2" +react-element-to-jsx-string@^15.0.0: + version "15.0.0" + resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6" + integrity sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ== + dependencies: + "@base2/pretty-print-object" "1.0.1" + is-plain-object "5.0.0" + react-is "18.1.0" + react-error-boundary@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/react-error-boundary/-/react-error-boundary-3.1.1.tgz#932c5ca5cbab8ec4fe37fd7b415aa5c3a47597e7" @@ -25652,16 +25644,16 @@ react-is@17.0.2, react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-is@18.1.0, "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0: + version "18.1.0" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" + integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== + react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0: - version "18.1.0" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" - integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== - react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -30576,7 +30568,7 @@ vfile-location@^3.0.0: resolved "https://registry.yarnpkg.com/vfile-location/-/vfile-location-3.0.1.tgz#d78677c3546de0f7cd977544c367266764d31bb3" integrity sha512-yYBO06eeN/Ki6Kh1QAkgzYpWT1d3Qln+ZCtSbJqFExPl1S3y2qqotJQXoh6qEvl/jDlgpUJolBn3PItVnnZRqQ== -vfile-message@*, vfile-message@^2.0.0: +vfile-message@^2.0.0: version "2.0.4" resolved "https://registry.yarnpkg.com/vfile-message/-/vfile-message-2.0.4.tgz#5b43b88171d409eae58477d13f23dd41d52c371a" integrity sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==