From 4cf630bfec224f6d4fd88214f75b9e51469de3cf Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Thu, 6 Jul 2023 15:46:55 -0400 Subject: [PATCH] Upgrade EUI to 83.0.0 (#160813) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `eui@82.1.0` ⏩ `83.0.0` ⚠️ The biggest change in this PR by far is the `EuiButtonEmpty` Emotion conversion, which changes the DOM structure of the button slightly as well as several CSS classes around it. EUI has attempted to convert any custom EuiButtonEmpty CSS overrides where possible, but would super appreciate it if CODEOWNERS checked their touched files. If anything other than a snapshot or test was touched, please double check the display of your button(s) and confirm everything still looks shipshape. Feel free to ping us for advice if not. --- ## [`83.0.0`](https://github.com/elastic/eui/tree/v83.0.0) **Bug fixes** - Fixed `EuiPaginationButton` styling affected by `EuiButtonEmpty`'s Emotion conversion ([#6893](https://github.com/elastic/eui/pull/6893)) **Breaking changes** - Removed `isPlaceholder` prop from `EuiPaginationButton` ([#6893](https://github.com/elastic/eui/pull/6893)) ## [`82.2.1`](https://github.com/elastic/eui/tree/v82.2.1) - Updated supported Node engine versions to allow Node 16, 18 and >=20 ([#6884](https://github.com/elastic/eui/pull/6884)) ## [`82.2.0`](https://github.com/elastic/eui/tree/v82.2.0) - Updated EUI's SVG icons library to use latest SVGO v3 optimization ([#6843](https://github.com/elastic/eui/pull/6843)) - Added success color `EuiNotificationBadge` ([#6864](https://github.com/elastic/eui/pull/6864)) - Added `badgeColor` prop to `EuiFilterButton` ([#6864](https://github.com/elastic/eui/pull/6864)) - Updated `EuiBadge` to use CSS-in-JS for named colors instead of inline styles. Custom colors will still use inline styles. ([#6864](https://github.com/elastic/eui/pull/6864)) **CSS-in-JS conversions** - Converted `EuiButtonGroup` and `EuiButtonGroupButton` to Emotion ([#6841](https://github.com/elastic/eui/pull/6841)) - Converted `EuiButtonIcon` to Emotion ([#6844](https://github.com/elastic/eui/pull/6844)) - Converted `EuiButtonEmpty` to Emotion ([#6863](https://github.com/elastic/eui/pull/6863)) - Converted `EuiCollapsibleNav` and `EuiCollapsibleNavGroup` to Emotion ([#6865](https://github.com/elastic/eui/pull/6865)) - Removed Sass variables `$euiCollapsibleNavGroupLightBackgroundColor`, `$euiCollapsibleNavGroupDarkBackgroundColor`, and `$euiCollapsibleNavGroupDarkHighContrastColor` ([#6865](https://github.com/elastic/eui/pull/6865)) --------- Co-authored-by: Cee Chen Co-authored-by: Jeramy Soucy Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- package.json | 2 +- .../__snapshots__/server_status.test.tsx.snap | 9 +- .../collapsible_nav.test.tsx.snap | 82 ++++++------ .../header/__snapshots__/header.test.tsx.snap | 14 +- .../screen_reader_a11y.test.tsx.snap | 20 +-- .../__snapshots__/modal_service.test.tsx.snap | 22 ++-- .../sample_data_card.test.tsx.snap | 18 +-- .../disabled_footer.test.tsx.snap | 2 +- .../install_footer.test.tsx.snap | 2 +- .../__snapshots__/remove_footer.test.tsx.snap | 8 +- .../__snapshots__/view_button.test.tsx.snap | 6 +- .../__snapshots__/details_info.test.tsx.snap | 4 - .../__snapshots__/header_menu.test.tsx.snap | 92 ++++++------- .../src/header_menu/index.tsx | 7 +- .../__snapshots__/list_header.test.tsx.snap | 54 ++++---- .../__snapshots__/edit_modal.test.tsx.snap | 10 +- .../__snapshots__/menu_items.test.tsx.snap | 122 +++++++++--------- .../text_with_edit.test.tsx.snap | 4 +- .../add_from_library.test.tsx.snap | 2 +- .../icon_button_group.test.tsx.snap | 12 +- .../toolbar_button.test.tsx.snap | 4 +- .../__snapshots__/popover.test.tsx.snap | 2 +- .../__snapshots__/toolbar.test.tsx.snap | 2 +- .../__snapshots__/no_data_card.test.tsx.snap | 8 +- .../impl/__snapshots__/markdown.test.tsx.snap | 27 ++-- src/core/public/styles/_base.scss | 3 - src/dev/license_checker/config.ts | 2 +- .../dashboard_empty_screen.test.tsx.snap | 11 +- .../__snapshots__/data_view.test.tsx.snap | 103 +++++++-------- .../get_render_cell_value.test.tsx | 4 +- .../__snapshots__/table_header.test.tsx.snap | 30 ++--- .../__snapshots__/field_name.test.tsx.snap | 2 +- .../view_api_request_flyout.test.tsx.snap | 14 +- .../saved_objects_installer.test.js.snap | 4 +- .../inspector_panel.test.tsx.snap | 15 +-- .../__snapshots__/page_template.test.tsx.snap | 2 +- .../__snapshots__/no_data_card.test.tsx.snap | 4 +- .../__snapshots__/header.test.tsx.snap | 4 +- .../filter_item/actions/actions.tsx | 17 ++- .../filter_item/filter_item.styles.ts | 6 +- .../legend/__snapshots__/legend.test.tsx.snap | 2 +- .../dimension_buttons/empty_button.tsx | 5 +- .../context_editor/get_columns/index.test.tsx | 12 +- .../transaction_action_menu.test.tsx.snap | 2 +- .../api/__snapshots__/shareable.test.tsx.snap | 60 ++++----- .../__snapshots__/app.test.tsx.snap | 2 +- .../__snapshots__/settings.test.tsx.snap | 2 +- .../configure_cases/connectors_dropdown.tsx | 16 ++- .../resource_findings_container.tsx | 10 +- .../resource_vulnerabilities.tsx | 10 +- .../deduplication_panel.scss | 5 +- .../deduplication_panel.scss | 5 +- .../add_inference_pipeline_flyout.scss | 5 +- .../__snapshots__/policy_table.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 96 +++++++------- .../tree_view_container/breadcrumb/styles.ts | 5 +- .../embeddable/embeddable_info_badges.tsx | 6 +- .../__snapshots__/add_license.test.js.snap | 4 +- .../request_trial_extension.test.js.snap | 8 +- .../revert_to_basic.test.js.snap | 6 +- .../__snapshots__/start_trial.test.js.snap | 8 +- .../upload_license.test.tsx.snap | 40 +++--- .../__snapshots__/layer_control.test.tsx.snap | 16 +-- .../layer_control/layer_control.tsx | 17 +-- .../nodes/__snapshots__/cells.test.js.snap | 4 +- .../__snapshots__/no_data.test.js.snap | 16 +-- .../collection_enabled.test.js.snap | 2 +- .../collection_interval.test.js.snap | 4 +- .../__snapshots__/reason_found.test.js.snap | 2 +- .../osquery/cypress/e2e/all/alerts.cy.ts | 4 +- ...screen_capture_panel_content.test.tsx.snap | 12 +- .../user_profile/user_profile.test.tsx | 2 +- .../overwritten_session_page.test.tsx.snap | 2 +- .../api_keys_grid/api_keys_empty_prompt.tsx | 22 ++-- .../public/management/table_utils.tsx | 4 +- .../nav_control/nav_control_service.test.ts | 6 +- .../__snapshots__/prompt_page.test.tsx.snap | 4 +- .../unauthenticated_page.test.tsx.snap | 4 +- .../reset_session_page.test.tsx.snap | 4 +- .../security_solution/cypress/tasks/alerts.ts | 18 ++- .../__snapshots__/index.test.tsx.snap | 3 +- .../add_note_icon_item.test.tsx | 4 +- .../header_actions/header_actions.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 44 +++---- .../action_connectors_warning.test.tsx.snap | 12 +- .../public/common/components/page/index.tsx | 3 +- .../utility_bar/utility_bar_action.tsx | 6 +- .../components/rules/add_item_form/index.tsx | 5 +- .../authentications_host_table.test.tsx.snap | 55 ++++---- .../authentications_user_table.test.tsx.snap | 55 ++++---- .../flyout/__snapshots__/index.test.tsx.snap | 8 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../components/timeline/footer/index.tsx | 20 +-- .../__snapshots__/index.test.tsx.snap | 8 +- .../components/session_view/index.test.tsx | 4 +- .../certificates/fingerprint_col.tsx | 10 +- .../cypress/e2e/timeline.cy.ts | 5 +- .../components/common/field_value.test.tsx | 3 +- .../components/common/tlp_badge.test.tsx | 6 +- .../certificates/fingerprint_col.tsx | 8 +- .../__snapshots__/monitor_tags.test.tsx.snap | 12 +- .../ml_integerations.test.tsx.snap | 2 +- .../__snapshots__/tag_label.test.tsx.snap | 3 +- .../waterfall/waterfall_filter.test.tsx | 12 +- .../filter_status_button.test.tsx.snap | 6 +- .../__snapshots__/status_filter.test.tsx.snap | 18 +-- .../services/ml/stack_management_jobs.ts | 14 +- .../page_objects/detections/index.ts | 2 +- yarn.lock | 8 +- 109 files changed, 727 insertions(+), 823 deletions(-) diff --git a/package.json b/package.json index bed23b10b7cfa..3881592e73950 100644 --- a/package.json +++ b/package.json @@ -98,7 +98,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "82.1.0", + "@elastic/eui": "83.0.0", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap b/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap index fe17c420479eb..8ebf1050b6ac0 100644 --- a/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap +++ b/packages/core/apps/core-apps-browser-internal/src/status/components/__snapshots__/server_status.test.tsx.snap @@ -3,9 +3,8 @@ exports[`ServerStatus renders correctly for green state 2`] = `
- + + Custom link + + + + +
@@ -62,12 +66,12 @@ Array [ style="flex-shrink: 0;" >
@@ -161,7 +165,7 @@ Array [ class=" emotion-euiAccordion__children" >
    @@ -286,7 +290,7 @@ Array [ class=" emotion-euiAccordion__children" >
    @@ -418,7 +422,7 @@ Array [ class=" emotion-euiAccordion__children" >
    @@ -533,7 +537,7 @@ Array [ class=" emotion-euiAccordion__children" >
    @@ -631,7 +635,7 @@ Array [ class=" emotion-euiAccordion__children" >
    , @@ -478,20 +477,19 @@ Object { > @@ -570,20 +568,19 @@ Object { > @@ -605,20 +602,19 @@ Object { > @@ -697,21 +693,20 @@ Object { > @@ -733,21 +728,20 @@ Object { > @@ -826,20 +820,19 @@ Object { > @@ -861,20 +854,19 @@ Object { > diff --git a/packages/kbn-securitysolution-exception-list-components/src/header_menu/index.tsx b/packages/kbn-securitysolution-exception-list-components/src/header_menu/index.tsx index f042be34a8cee..aa83549ff4fda 100644 --- a/packages/kbn-securitysolution-exception-list-components/src/header_menu/index.tsx +++ b/packages/kbn-securitysolution-exception-list-components/src/header_menu/index.tsx @@ -9,17 +9,16 @@ import React, { FC, ReactElement, useMemo, useState } from 'react'; import { EuiButtonEmpty, + EuiButtonEmptyProps, EuiButtonIcon, EuiContextMenuItem, EuiContextMenuPanel, EuiFlexGroup, EuiPopover, - IconType, PanelPaddingSize, PopoverAnchorPosition, } from '@elastic/eui'; -import { ButtonContentIconSide } from '@elastic/eui/src/components/button/_button_content_deprecated'; import { css } from '@emotion/react'; export interface Action { @@ -34,8 +33,8 @@ interface HeaderMenuComponentProps { disableActions: boolean; actions: Action[] | ReactElement[] | null; text?: string; - iconType?: IconType; - iconSide?: ButtonContentIconSide; + iconType?: EuiButtonEmptyProps['iconType']; + iconSide?: EuiButtonEmptyProps['iconSide']; dataTestSubj?: string; emptyButton?: boolean; useCustomActions?: boolean; diff --git a/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap index c5b380bef6737..7047f3b013528 100644 --- a/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap +++ b/packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap @@ -73,7 +73,7 @@ Object { >
    @@ -62,7 +61,7 @@ Object { >
    @@ -138,7 +136,7 @@ Object { >
    @@ -753,7 +750,7 @@ Object { >
    @@ -931,7 +927,7 @@ Object { >
    @@ -1053,7 +1048,7 @@ Object { class="euiFlexItem emotion-euiFlexItem-grow-1" >
    @@ -1148,7 +1142,7 @@ Object { class="euiFlexItem emotion-euiFlexItem-grow-1" >
    @@ -346,23 +345,22 @@ Array [ class="euiPopover__anchor css-16vtueo-render" >
    @@ -373,7 +371,7 @@ Array [ >
@@ -525,7 +522,7 @@ Array [ class="euiPopover__anchor css-16vtueo-render" >
@@ -689,23 +685,22 @@ Array [ class="euiPopover__anchor css-16vtueo-render" >
@@ -716,7 +711,7 @@ Array [ >
"` + `"
100
"` ); }); @@ -155,7 +155,7 @@ describe('Discover grid cell rendering', function () { /> ); expect(component.html()).toMatchInlineSnapshot( - `"
100
"` + `"
100
"` ); findTestSubject(component, 'docTableClosePopover').simulate('click'); expect(closePopoverMockFn).toHaveBeenCalledTimes(1); diff --git a/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap b/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap index cf539f43b39f4..22e4b3a0d9657 100644 --- a/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap +++ b/src/plugins/discover/public/components/doc_table/components/table_header/__snapshots__/table_header.test.tsx.snap @@ -31,7 +31,7 @@ exports[`TableHeader with time column renders correctly 1`] = ` > diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap index 38b09264c4f81..4dea9549670f3 100644 --- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap +++ b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap @@ -370,7 +370,7 @@ exports[`KibanaPageTemplate render solutionNav 1`] = ` "`; -exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; +exports[`VisLegend Component Legend open should match the snapshot 1`] = `"
"`; diff --git a/src/plugins/visualization_ui_components/public/components/dimension_buttons/empty_button.tsx b/src/plugins/visualization_ui_components/public/components/dimension_buttons/empty_button.tsx index e66d512e80f73..5b0cf67789879 100644 --- a/src/plugins/visualization_ui_components/public/components/dimension_buttons/empty_button.tsx +++ b/src/plugins/visualization_ui_components/public/components/dimension_buttons/empty_button.tsx @@ -42,10 +42,7 @@ export const EmptyDimensionButton = ({ justify-content: flex-start; padding: 0 !important; color: ${euiThemeVars.euiTextSubduedColor}; - - .euiButtonEmpty__text { - margin-left: 0; - } + gap: 0; .euiIcon { margin-left: ${euiThemeVars.euiSizeS}; diff --git a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor/get_columns/index.test.tsx b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor/get_columns/index.test.tsx index 1f6590d576c30..b38b026d37112 100644 --- a/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor/get_columns/index.test.tsx +++ b/x-pack/packages/kbn-elastic-assistant/impl/data_anonymization_editor/context_editor/get_columns/index.test.tsx @@ -231,10 +231,8 @@ describe('getColumns', () => { ); - expect(container.getElementsByClassName('euiButtonContent__icon')[0]).toHaveAttribute( - 'data-euiicon-type', - 'eyeClosed' - ); + expect(container.querySelector('[data-euiicon-type="eyeClosed"]')).not.toBeNull(); + expect(container.querySelector('[data-euiicon-type="eye"]')).toBeNull(); }); it('displays a open eye icon when the field is NOT anonymized', () => { @@ -247,10 +245,8 @@ describe('getColumns', () => { ); - expect(container.getElementsByClassName('euiButtonContent__icon')[0]).toHaveAttribute( - 'data-euiicon-type', - 'eye' - ); + expect(container.querySelector('[data-euiicon-type="eyeClosed"]')).toBeNull(); + expect(container.querySelector('[data-euiicon-type="eye"]')).not.toBeNull(); }); it('displays Yes when the field is anonymized', () => { diff --git a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap index 01e8add1196c6..17f22a43a1c43 100644 --- a/x-pack/plugins/apm/public/components/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap +++ b/x-pack/plugins/apm/public/components/shared/transaction_action_menu/__snapshots__/transaction_action_menu.test.tsx.snap @@ -10,7 +10,7 @@ exports[`TransactionActionMenu component matches the snapshot 1`] = ` class="euiPopover__anchor css-16vtueo-render" >
"`; +exports[` App renders properly 1`] = `"
markdown mock
markdown mock
My Canvas Workpad
"`; diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__snapshots__/settings.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__snapshots__/settings.test.tsx.snap index 5e66854d82bb2..a51ccfc876c79 100644 --- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__snapshots__/settings.test.tsx.snap +++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__snapshots__/settings.test.tsx.snap @@ -323,7 +323,7 @@ exports[` can navigate Autoplay Settings 2`] = ` class="euiFormRow__fieldWrapper" > + /> `; diff --git a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_control.tsx b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_control.tsx index d79f0360b9071..7a4e04066b37c 100644 --- a/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_control.tsx +++ b/x-pack/plugins/maps/public/connected_components/right_side_controls/layer_control/layer_control.tsx @@ -15,7 +15,6 @@ import { EuiSpacer, EuiButtonIcon, EuiToolTip, - EuiLoadingSpinner, } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import { i18n } from '@kbn/i18n'; @@ -49,25 +48,11 @@ function renderExpandButton({ defaultMessage: 'Expand layers panel', }); - if (isLoading) { - // Can not use EuiButtonIcon with spinner because spinner is a class and not an icon - return ( - - ); - } - return ( "`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; -exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; +exports[`ResetSessionPage renders as expected with custom page title 1`] = `"My Company NameMockedFonts

You do not have permission to access the requested page

Either go back to the previous page or log in as a different user.

Log in as different user
"`; diff --git a/x-pack/plugins/security_solution/cypress/tasks/alerts.ts b/x-pack/plugins/security_solution/cypress/tasks/alerts.ts index 0e6a152414763..8ec3a990c919b 100644 --- a/x-pack/plugins/security_solution/cypress/tasks/alerts.ts +++ b/x-pack/plugins/security_solution/cypress/tasks/alerts.ts @@ -122,11 +122,19 @@ export const closeAlerts = () => { export const expandFirstAlertActions = () => { waitForAlerts(); - cy.get(TIMELINE_CONTEXT_MENU_BTN).first().click(); - cy.get(TIMELINE_CONTEXT_MENU_BTN) - .first() - .should('be.visible') - .should('have.attr', 'data-popover-open', 'true'); + const togglePopover = () => { + cy.get(TIMELINE_CONTEXT_MENU_BTN).first().click(); + cy.get(TIMELINE_CONTEXT_MENU_BTN) + .first() + .should('be.visible') + .then(($btnEl) => { + if ($btnEl.attr('data-popover-open') !== 'true') { + cy.log(`${TIMELINE_CONTEXT_MENU_BTN} was flaky, attempting to re-open popover`); + togglePopover(); + } + }); + }; + togglePopover(); }; export const expandFirstAlert = () => { diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap index 86c89bf79eda9..6ee4557d2ee22 100644 --- a/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap +++ b/x-pack/plugins/security_solution/public/common/components/event_details/overview/__snapshots__/index.test.tsx.snap @@ -90,8 +90,7 @@ exports[`Event Details Overview Cards renders rows and spacers correctly 1`] = ` > @@ -407,7 +406,7 @@ exports[`Authentication Host Table Component rendering it renders the host authe class="euiFlexItem emotion-euiFlexItem-growZero" >