From 14c8acc1fef657941d5ff9d188d7de36ea698d35 Mon Sep 17 00:00:00 2001 From: Cee Chen <549407+cee-chen@users.noreply.github.com> Date: Mon, 15 May 2023 14:09:31 -0700 Subject: [PATCH] Upgrade EUI to v79.0.1 (#156925) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary `eui@77.2.2` ⏩ `eui@79.0.1` 🦴 The primary changes in this upgrade are around the deprecated `EuiLoadingContent` being removed in favor of `EuiSkeletonText`. - Most instances have been a [direct swap of usage](https://github.com/elastic/kibana/pull/156925/commits/327626a7bef0484016d09a2dc2fd62cc03a15edc), but [some replacements were a bit more opinionated](https://github.com/elastic/kibana/pull/156925/commits/e6ceb36a7504aa742a440aa7d78e79f790511cab) as I saw them as potential to take advantage of `EuiSkeletonText`'s syntactical sugar and screen reader announcements for when state switches to loaded. --- ## [`79.0.1`](https://github.com/elastic/eui/tree/v79.0.1) **Bug fixes** - Fixed broken push `EuiFlyout` behavior ([#6764](https://github.com/elastic/eui/pull/6764)) ## [`79.0.0`](https://github.com/elastic/eui/tree/v79.0.0) - Updated all `EuiSkeleton` components with new props that allow for more control over screen reader live announcements: `announceLoadingStatus`, `announceLoadedStatus`, and `ariaLiveProps` ([#6752](https://github.com/elastic/eui/pull/6752)) - Improved keyboard accessibility in `EuiPageHeader` by ensuring the right side menu items come into focus from left to right. ([#6753](https://github.com/elastic/eui/pull/6753)) **Breaking changes** - Removed deprecated `EuiLoadingContent`. Use the `EuiSkeleton` components instead. ([#6754](https://github.com/elastic/eui/pull/6754)) ## [`78.0.0`](https://github.com/elastic/eui/tree/v78.0.0) - Improved the contrast ratio of `EuiCheckbox`, `EuiRadio`, and `EuiSwitch` in their unchecked states to meet WCAG AA guidelines. ([#6729](https://github.com/elastic/eui/pull/6729)) - Added React Testing Library `*ByTestSubject` custom commands to `within()`. RTL utilities can be imported from `@elastic/eui/lib/test/rtl`. ([#6737](https://github.com/elastic/eui/pull/6737)) - Updated `EuiAvatar` to support a new letter `casing` prop that allow customizing text capitalization ([#6739](https://github.com/elastic/eui/pull/6739)) - Updated `EuiFocusTrap` to support the `gapMode` prop configuration (now defaults to `padding`) ([#6744](https://github.com/elastic/eui/pull/6744)) **Bug fixes** - Fixed inconsistency in `EuiSearchBar`'s AND/OR semantics between DSL and query string generation ([#6717](https://github.com/elastic/eui/pull/6717)) - Fixed `EuiFieldNumber`'s native browser validity detection causing extra unnecessary rerenders ([#6741](https://github.com/elastic/eui/pull/6741)) - Fixed the `scrollLock` property on `EuiFocusTrap` (and other components using `EuiFocusTrap`, such as `EuiFlyout` and `EuiModal`) to no longer block scrolling on nested portalled content, such as combobox dropdowns ([#6744](https://github.com/elastic/eui/pull/6744)) **Breaking changes** - `EuiAvatar`s with the default `user` type will now default to capitalizing all initials in uppercase ([#6739](https://github.com/elastic/eui/pull/6739)) --------- Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- package.json | 2 +- .../src/tooltip/skeleton.tsx | 12 ++- .../src/empty_viewer_state/index.tsx | 17 ++-- .../__snapshots__/comments.test.tsx.snap | 16 ++-- .../__snapshots__/list_header.test.tsx.snap | 16 ++-- .../__snapshots__/page_template.test.tsx.snap | 2 +- src/dev/license_checker/config.ts | 2 +- .../components/editor_content_spinner.tsx | 4 +- .../__snapshots__/format_editor.test.tsx.snap | 4 +- .../field_format_editor/format_editor.tsx | 6 +- .../field_format_editor.test.tsx.snap | 4 +- .../field_format_editor.tsx | 6 +- src/plugins/discover/public/plugin.tsx | 6 +- .../public/components/code_editor/index.tsx | 6 +- .../__snapshots__/page_template.test.tsx.snap | 6 +- .../public/finder/index.tsx | 4 +- .../__snapshots__/header.test.tsx.snap | 32 +++---- .../apps/kibana_overview/_page_header.ts | 4 +- .../log_categorization_page.tsx | 4 +- .../aiops/public/shared_lazy_components.tsx | 4 +- .../error_sampler/error_sample_detail.tsx | 8 +- .../service_overview/stats/metric_item.tsx | 4 +- .../service_groups_list/service_stat.tsx | 4 +- .../intance_details.tsx | 4 +- .../storage_details_per_service.tsx | 4 +- .../app/storage_explorer/summary_stats.tsx | 4 +- .../waterfall_with_summary/index.tsx | 4 +- .../transaction_tabs.tsx | 4 +- .../waterfall/span_flyout/index.tsx | 23 ++--- .../waterfall/transaction_flyout/index.tsx | 23 ++--- .../labs/labs_flyout.tsx | 4 +- .../templates/service_group_template.tsx | 20 ++-- .../shared/service_icons/icon_popover.tsx | 4 +- .../public/components/all_cases/table.tsx | 4 +- .../public/components/files/files_table.tsx | 4 +- .../recent_cases/loading_placeholders.tsx | 4 +- .../credentials/credentials.test.tsx | 4 +- .../components/credentials/credentials.tsx | 6 +- .../documents/organic_documents.test.tsx | 4 +- .../curation/documents/organic_documents.tsx | 96 +++++++++---------- .../api/geo_upload_wizard_async_wrapper.tsx | 4 +- .../api/index_name_form_async_wrapper.tsx | 4 +- .../components/node_attrs_details.tsx | 4 +- .../metric_anomaly/components/expression.tsx | 4 +- .../log_entry_examples_loading_indicator.tsx | 4 +- .../node_details/tabs/osquery/index.tsx | 4 +- .../layer_wizard_select.test.tsx.snap | 2 +- .../flyout_body/layer_wizard_select.tsx | 4 +- x-pack/plugins/maps/public/lazy_wrapper.tsx | 4 +- .../components/page_header/page_header.tsx | 4 +- .../expandable_section/expandable_section.tsx | 4 +- .../public/application/explorer/explorer.tsx | 8 +- .../test_models/output_loading.tsx | 6 +- .../ml/public/application/routing/router.tsx | 10 +- .../load_when_in_view/load_when_in_view.tsx | 4 +- ...squery_managed_custom_button_extension.tsx | 4 +- .../osquery/public/live_queries/index.tsx | 4 +- .../osquery/public/packs/packs_table.tsx | 4 +- .../osquery/public/results/results_table.tsx | 4 +- .../public/routes/packs/edit/index.tsx | 4 +- .../public/routes/packs/list/index.tsx | 4 +- .../osquery_action/index.tsx | 6 +- .../access_agreement_page.test.tsx | 6 +- .../access_agreement_page.tsx | 4 +- .../api_keys/api_keys_grid/api_key_flyout.tsx | 8 +- .../users/edit_user/change_password_modal.tsx | 8 +- .../cypress/e2e/timelines/flyout_button.cy.ts | 2 +- .../cti_details/threat_details_view.tsx | 4 +- .../event_details/event_details.tsx | 4 +- .../insights/simple_alert_table.tsx | 4 +- .../components/add_exception_flyout/index.tsx | 11 +-- .../empty_viewer_state.tsx | 4 +- .../edit_exception_flyout/index.tsx | 4 +- .../add_to_lists_table/index.tsx | 7 +- .../linked_to_list/index.tsx | 4 +- .../components/rules_table/rules_tables.tsx | 4 +- .../detection_engine/chart_panels/index.tsx | 10 +- .../pages/list_detail_view/index.tsx | 4 +- .../components/paginated_table/index.tsx | 4 +- .../context_menu_with_router_support.tsx | 4 +- .../components/management_empty_state.tsx | 4 +- .../view/details/components/flyout_header.tsx | 4 +- .../view/details/endpoint_details.tsx | 8 +- .../endpoint_policy_artifact_cards.tsx | 4 +- .../pages/policy/view/policy_details_form.tsx | 4 +- .../components/loading_placeholders/index.tsx | 4 +- .../public/overview/components/stat_value.tsx | 10 +- .../event_details/expandable_event.tsx | 4 +- .../timeline/tabs_content/index.tsx | 14 +-- .../policy_retention_schedule.tsx | 4 +- .../components/monitor_details_panel.tsx | 4 +- .../components/monitor_location_select.tsx | 4 +- .../common/components/monitor_status.tsx | 4 +- .../common/components/thershold_indicator.tsx | 4 +- .../monitor_test_result/status_badge.tsx | 4 +- .../components/error_started_at.tsx | 4 +- .../components/error_timeline.tsx | 4 +- .../monitor_details_last_run.tsx | 4 +- .../monitor_details_status.tsx | 4 +- .../monitor_errors/failed_tests_by_step.tsx | 4 +- .../monitor_summary/alert_actions.tsx | 4 +- .../monitor_summary/last_test_run.tsx | 9 +- .../monitor_summary/monitor_alerts.tsx | 4 +- .../monitor_details_panel_container.tsx | 4 +- .../overview/overview/overview_alerts.tsx | 4 +- .../overview_errors/overview_errors.tsx | 4 +- .../overview/overview_grid_item_loader.tsx | 4 +- .../components/settings/policy_link.tsx | 4 +- .../step_details_page/step_details_status.tsx | 4 +- .../step_objects/color_palette.tsx | 13 +-- .../step_details_page/step_page_nav.tsx | 4 +- .../step_details_page/step_title.tsx | 13 +-- .../test_run_details/components/step_info.tsx | 4 +- .../components/test_run_details_status.tsx | 4 +- .../components/test_run_details/step_tabs.tsx | 4 +- .../transform_management_section.tsx | 4 +- .../alerts_page/alerts_page_flyout_body.tsx | 10 +- .../sections/alerts_table/alerts_table.tsx | 4 +- .../deprecations_count_checkpoint.tsx | 4 +- .../overview/backup_step/cloud_backup.tsx | 4 +- .../overview/logs_step/logs_step.tsx | 11 +-- yarn.lock | 15 +-- 122 files changed, 394 insertions(+), 426 deletions(-) diff --git a/package.json b/package.json index ab936f36f4af7..5a1e897b65be4 100644 --- a/package.json +++ b/package.json @@ -97,7 +97,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.6.0-canary.3", "@elastic/ems-client": "8.4.0", - "@elastic/eui": "77.2.2", + "@elastic/eui": "79.0.1", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/kbn-cases-components/src/tooltip/skeleton.tsx b/packages/kbn-cases-components/src/tooltip/skeleton.tsx index f0c78e2a2e215..9ade847de0e73 100644 --- a/packages/kbn-cases-components/src/tooltip/skeleton.tsx +++ b/packages/kbn-cases-components/src/tooltip/skeleton.tsx @@ -7,13 +7,19 @@ */ import React from 'react'; -import { EuiFlexItem, EuiLoadingContent, EuiHorizontalRule, EuiSpacer } from '@elastic/eui'; +import { + EuiFlexItem, + EuiSkeletonTitle, + EuiSkeletonText, + EuiHorizontalRule, + EuiSpacer, +} from '@elastic/eui'; const SkeletonComponent: React.FC = () => { return ( - - + + diff --git a/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx b/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx index 993c07eaa7ce7..492a34a5df76c 100644 --- a/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx +++ b/packages/kbn-securitysolution-exception-list-components/src/empty_viewer_state/index.tsx @@ -10,7 +10,7 @@ import React, { useMemo } from 'react'; import type { FC } from 'react'; import { css } from '@emotion/react'; import { - EuiLoadingContent, + EuiSkeletonText, EuiImage, EuiEmptyPrompt, EuiButton, @@ -116,13 +116,16 @@ const EmptyViewerStateComponent: FC = ({ listType, ]); - if (viewerStatus === ViewerStatus.LOADING || viewerStatus === ViewerStatus.SEARCHING) - return ; - return ( - - - + + + + + ); }; diff --git a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap index 141ba955b4e27..92aa17170f1fa 100644 --- a/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap +++ b/packages/kbn-securitysolution-exception-list-components/src/exception_item_card/comments/__snapshots__/comments.test.tsx.snap @@ -127,7 +127,7 @@ Object { >