From 98f73d674a40c09936df6dc1b12fc0337cece614 Mon Sep 17 00:00:00 2001 From: Constance Date: Wed, 7 Sep 2022 13:35:23 -0700 Subject: [PATCH] Upgrade EUI to v63.0.6 - updates to new EuiPageTemplate and deprecates old page components (#139524) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Update all usages of EuiPageTemplate to EuiPageTemplate_Deprecated * EuiPageContent_Deprecated as EuiPageContent * EuiPageContentBody_Deprecated as EuiPageContentBody * EuiPageContentHeader_Deprecated as EuiPageContentHeader * EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection * EuiPageSideBar_Deprecated as EuiPageSideBar * EuiPageContent__Deprecated to EuiPageContent_Deprecated * Fix rogue semi-colons * WIP: NoDataConfigPage & NoDataPage converted to new template - `withSolutionNav` not yet handled * WIP: KibanaPageTemplateInner converted to use new template - Pushes existing `pageHeader` prompts onto created EuiPageTemplate.PageHeader - Uses `isEmptyState` to push `pageHeader` props to EuiPageTemplate.EmptyPrompt instead (if `children` are not supplied) * WIP: `withSolutionNav` now renders the sidebar content properly - Collapsing isn’t working (minWidth isn’t updating) * Fixing stickiness of sidebar * [Security] Fixed SecuritySolutionTemplateWrapper’s usage - Moved `bottomBar` to EuiPageTemplate.BottomBar (now contained in just the page contents) - Change EuiPanel children wrapper with EuiPageTemplate.Section * [O11y] Wrap `children` with EuiPageTemplate.Section * Fix getting_started usage * WIP: Fixing types * Removing `template` pass through * Set EUI to 63.0.0 * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * More import fixes * Sidebar component update * Expand `KibanaPageTemplate` to all namespaced EUI counterparts - Updated `docs/tutorials` mdx page - Fixed SolutionNav prop types * Updated the tutorial mdx page * [Stack Management] Updated app layout to new template - Some temporary props applied for BWC until all other pages can be converted - Converted `API Keys` page’s layout (and especially prompt usags) to new paradigm * Fix circular dep * Fix new circular dependency - copying and pasting types from KibanaPageTemplateProps, but ah well * [Security Solution] Remove `template` prop - no longer a prop on Kibana/EuiPageTemplate * [O11y] Allow customizing EuiPageTemplate.Section wrapper - converts pageBodyProps - fixes non-centered loading template * [Enterprise Search] Update page templates - fix layouts by auto-wrapping an EuiPageSection for padding, while adding a `customPageSections` prop for more custom sections/layouts - re-center 404 errors - update tests * Update KibanaPageTemplate tests * Update snapshots * Fix FTR test with removed EUI classNames * Fix FTR tests with changed kbn classNames * Update failing dashboard snapshots - drop shadow changed slightly in EUI * Fix failing Security Cypress test * [O11y] Fix Inventory page using deprecated CSS hooks * [O11y][Uptime] Fix missing bottom bars - Modifies ObservabilityPageTemplate to accept a `bottomBar` prop (a la the old EuiPageTemplate behavior) NOTE: This opinionated page layout structure is starting to feel like it could be potentially limiting / have all the same pitfalls the previous EuiPageTemplate did. If so, consider something closer to the Enterprise Search page template conversion (`customPageSections`). - Misc cleanup: Use `KibanaPageTemplate` over `EuiPageTemplate` * [O11y] Fix route template typing - Since theObservabilityPageTemplate is using the new Eui/KibanaPageTemplate, its child templates and types need to be updated accordingly * Fix broken minWidth behavior - was an EUI issue that required a patch release + update snapshots * [Security Solution] Type fixes, restore empty state - Fix empty state logic removed in a previous commit - bogarts KibanaPageTemplate's `isEmptyState` prop instead of using `template="noData"` - extend template wrappers to past ...rest to underlying Kibana/EuiPageTemplate + replace EuiPageTemplate with KibanaPageTemplate for consistency * Fix failing synthetics selector * Grab EUI v63.0.6 - for deprecation tags and section tag support * Fix Kibana Overview plugin layout - needs to use KibanaPageTemplate.Section to get padding back - use `bottomBorder` prop over horizontal rules - restore previous page color via panelled=false * Convert Home plugin to new KibanaPageTemplate - use KibanaPageTemplate.Section instead to preserve page width/paddings - use `bottomBorder` instead of `EuiHorizontalRule` - NOTE: This causes margins to decrease slightly from xxl to xl (largest padding available for EuiPageSection) - this can be restored by CSS overrides if desired - update CSS to preserve previous looks, + convert to logical properties * [O11y] Fix non-centered empty/loading states * [O11y] Restore subdued background on various empty state prompts * [O11y] Fix all instances of views that require a scrollable full-height child + restore comment for inventory view * [O11y][ux] Fix broken sidebar - The entire app was missing a wrapping EuiProvider, and as such breakpoint utils were not working, and the sidebar was missing + misc cleanup - remove unnecessary fragment - remove role="main" attr - now that EuiPageTemplate sets a `main` tag, they'll conflict - add isEmptyState to center loading component * [APM Cypress tests] harden flaky test * [APM Cypress tests] Fix failing Cypress test, again Co-authored-by: cchaos Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> --- dev_docs/tutorials/kibana_page_template.mdx | 187 +++---- .../advanced/sharing-saved-objects.asciidoc | 4 +- .../public/components/page/index.tsx | 4 +- .../public/containers/app/sidebar/index.tsx | 2 +- .../public/app.tsx | 6 +- .../public/app.tsx | 4 +- examples/developer_examples/public/app.tsx | 4 +- examples/embeddable_explorer/public/app.tsx | 2 +- .../public/embeddable_panel_example.tsx | 4 +- .../public/hello_world_embeddable_example.tsx | 4 +- .../public/list_container_example.tsx | 4 +- .../public/todo_embeddable_example.tsx | 4 +- .../public/actions_and_expressions.tsx | 4 +- .../public/actions_and_expressions2.tsx | 4 +- examples/expressions_explorer/public/app.tsx | 4 +- .../public/render_expressions.tsx | 4 +- .../public/run_expressions.tsx | 4 +- examples/field_formats_example/public/app.tsx | 4 +- examples/locator_examples/public/app.tsx | 4 +- examples/locator_explorer/public/app.tsx | 4 +- examples/locator_explorer/public/page.tsx | 4 +- .../public/app/app.tsx | 4 +- examples/preboot_example/public/app.tsx | 2 +- .../public/components/page.tsx | 4 +- .../public/containers/app/sidebar.tsx | 2 +- examples/routing_example/public/app.tsx | 4 +- .../public/components/app.tsx | 6 +- .../public/common/example_page.tsx | 2 +- .../search_examples/public/search/app.tsx | 4 +- .../public/search_sessions/app.tsx | 4 +- .../search_examples/public/sql_search/app.tsx | 4 +- .../public/common/example_page.tsx | 2 +- .../public/todo/todo.tsx | 4 +- .../public/with_data_services/app.tsx | 2 +- examples/ui_actions_explorer/public/app.tsx | 4 +- examples/ui_actions_explorer/public/page.tsx | 4 +- .../user_profile_examples/public/plugin.tsx | 6 +- package.json | 2 +- .../src/ui/app_not_found_screen.tsx | 7 +- .../fatal_errors_screen.test.tsx.snap | 4 +- .../src/fatal_errors_screen.tsx | 2 +- .../template/public/components/app.tsx.ejs | 6 +- .../__snapshots__/page_template.test.tsx.snap | 33 +- .../page_template_inner.test.tsx.snap | 84 ++-- .../impl/src/page_template.tsx | 25 +- .../impl/src/page_template_inner.test.tsx | 17 +- .../impl/src/page_template_inner.tsx | 75 +-- .../page/kibana_template/types/index.d.ts | 16 +- .../page/no_data/impl/src/no_data_page.tsx | 11 +- .../page/no_data_config/impl/src/constants.ts | 12 - .../impl/src/no_data_config_page.tsx | 26 +- .../page/no_data_config/types/index.d.ts | 10 +- .../with_solution_nav.test.tsx.snap | 6 +- .../solution_nav/src/collapse_button.scss | 4 +- .../solution_nav/src/with_solution_nav.scss | 11 +- .../solution_nav/src/with_solution_nav.tsx | 39 +- .../core_app/errors/error_application.tsx | 7 +- .../status/components/status_section.tsx | 8 +- .../status/components/version_header.tsx | 7 +- src/core/public/styles/rendering/_base.scss | 6 + src/dev/license_checker/config.ts | 2 +- .../components/editor_content_spinner.tsx | 2 +- .../application/containers/main/main.tsx | 7 +- .../application/dashboard_app_no_data.tsx | 2 +- .../dashboard_empty_screen.test.tsx.snap | 8 +- .../empty_screen/dashboard_empty_screen.tsx | 2 +- .../empty_index_list_prompt.test.tsx.snap | 16 +- .../empty_index_list_prompt.tsx | 8 +- .../application/context/context_app.tsx | 7 +- .../public/application/doc/components/doc.tsx | 8 +- .../components/layout/discover_layout.tsx | 2 +- .../components/sidebar/discover_sidebar.tsx | 2 +- .../authorization/components/page_error.tsx | 6 +- .../components/page_loading/page_loading.tsx | 7 +- .../section_loading/section_loading.tsx | 13 +- .../__snapshots__/home.test.tsx.snap | 42 +- .../application/components/_add_data.scss | 9 +- .../components/_solutions_section.scss | 10 +- .../__snapshots__/add_data.test.tsx.snap | 199 ++++---- .../components/add_data/add_data.tsx | 169 +++---- .../getting_started.test.tsx.snap | 149 +++--- .../guided_onboarding/getting_started.tsx | 68 +-- .../public/application/components/home.tsx | 5 +- .../__snapshots__/manage_data.test.tsx.snap | 472 +++++++++--------- .../components/manage_data/manage_data.tsx | 168 +++---- .../solutions_section.test.tsx.snap | 230 ++++----- .../solutions_section/solutions_section.tsx | 43 +- .../__snapshots__/overview.test.tsx.snap | 9 +- .../public/components/overview/overview.tsx | 69 ++- .../overview_page_footer.test.tsx.snap | 5 +- .../overview_page_footer.tsx | 7 +- .../__snapshots__/page_template.test.tsx.snap | 32 +- .../no_data_config_page.tsx | 2 +- .../public/page_template/page_template.tsx | 4 +- .../page_template/page_template_inner.tsx | 2 +- .../public/components/landing/landing.tsx | 61 ++- .../management_app/management_app.tsx | 16 +- .../__snapshots__/header.test.tsx.snap | 8 +- .../url_service/redirect/components/page.tsx | 2 +- .../public/visualize_app/app.tsx | 2 +- .../dashboard/group2/dashboard_snapshots.ts | 4 +- .../apps/kibana_overview/_page_header.ts | 12 +- .../baseline/dashboard_controls_dark.png | Bin 64176 -> 195119 bytes .../baseline/dashboard_controls_light.png | Bin 62470 -> 191495 bytes .../services/management/management_menu.ts | 2 +- .../public/app/components/main.tsx | 7 +- .../core_app_status/public/application.tsx | 8 +- .../core_plugin_a/public/application.tsx | 10 +- .../public/application.tsx | 8 +- .../core_plugin_b/public/application.tsx | 10 +- .../public/application.tsx | 8 +- .../public/application.tsx | 10 +- .../public/application.tsx | 8 +- .../public/components/documentation.tsx | 8 +- .../public/components/page.tsx | 4 +- .../embedded_lens_example/public/app.tsx | 4 +- .../exploratory_view_example/public/app.tsx | 4 +- .../files_example/public/components/app.tsx | 2 +- .../public/containers/capture_test.tsx | 4 +- .../public/containers/main.tsx | 4 +- .../screenshotting_example/public/app/app.tsx | 4 +- .../testing_embedded_lens/public/app.tsx | 2 +- .../public/components/page.tsx | 4 +- .../public/components/sidebar.tsx | 6 +- .../public/components/page/index.tsx | 4 +- .../explain_log_rate_spikes_page.tsx | 6 +- .../service_overview/service_overview.spec.ts | 4 +- .../infra_tabs/failure_prompt.tsx | 5 +- .../home/__snapshots__/home.stories.storyshot | 107 ++-- .../public/app/app.tsx | 2 +- .../auto_follow_pattern_add.js | 5 +- .../auto_follow_pattern_edit.js | 7 +- .../follower_index_add/follower_index_add.js | 5 +- .../follower_index_edit.js | 4 +- .../auto_follow_pattern_list.js | 8 +- .../follower_indices_list.js | 8 +- .../components/about_panel/about_panel.tsx | 2 +- .../components/import_view/import_view.js | 2 +- .../components/results_view/results_view.tsx | 2 +- .../index_data_visualizer_view.tsx | 6 +- .../components/analytics_section.tsx | 2 +- .../components/credentials/credentials.tsx | 4 +- .../app_search/components/library/library.tsx | 4 +- .../components/not_found/not_found.tsx | 2 +- .../components/not_found/not_found.tsx | 5 +- .../shared/layout/page_template.test.tsx | 11 +- .../shared/layout/page_template.tsx | 18 +- .../not_found/not_found_prompt.test.tsx | 13 +- .../shared/not_found/not_found_prompt.tsx | 5 +- .../shared/setup_guide/cloud/instructions.tsx | 12 +- .../shared/setup_guide/instructions.tsx | 2 +- .../shared/setup_guide/setup_guide.tsx | 2 +- .../personal_dashboard_layout.tsx | 4 +- .../views/not_found/not_found.tsx | 2 +- .../es_requirements_page.tsx | 2 +- .../error_pages/components/no_data_layout.tsx | 7 +- .../components/grok_debugger/grok_debugger.js | 4 +- .../public/components/inactive_license.js | 4 +- .../edit_policy/edit_policy.container.tsx | 7 +- .../policy_list/policy_list.container.tsx | 7 +- .../sections/policy_list/policy_list.tsx | 8 +- .../component_template_create.tsx | 6 +- .../component_template_edit.tsx | 6 +- .../data_stream_list/data_stream_list.tsx | 2 +- .../index_list/index_table/index_table.js | 2 +- .../template_clone/template_clone.tsx | 2 +- .../template_create/template_create.tsx | 2 +- .../sections/template_edit/template_edit.tsx | 6 +- .../components/empty_states/no_indices.tsx | 4 +- x-pack/plugins/infra/public/pages/error.tsx | 2 +- .../page_setup_content.tsx | 5 +- .../log_entry_rate/page_setup_content.tsx | 5 +- .../indices_configuration_panel.stories.tsx | 8 +- .../public/pages/logs/stream/page_content.tsx | 32 +- .../public/pages/metrics/hosts/index.tsx | 32 +- .../pages/metrics/inventory_view/index.tsx | 33 +- .../components/chart_section_vis.tsx | 2 +- .../components/gauges_section_vis.tsx | 2 +- .../components/layout_content.tsx | 2 +- .../metric_detail/components/side_nav.tsx | 7 +- .../public/application/app.tsx | 2 +- .../pipelines_clone/pipelines_clone.tsx | 2 +- .../pipelines_edit/pipelines_edit.tsx | 2 +- .../sections/pipelines_list/empty_list.tsx | 2 +- .../sections/pipelines_list/main.tsx | 2 +- .../lens/public/app_plugin/mounter.tsx | 1 - .../geo_field_workspace_panel.tsx | 2 +- .../workspace_panel/workspace_panel.tsx | 2 +- .../workspace_panel_wrapper.tsx | 7 +- .../license_page_header.test.js.snap | 16 +- .../public/application/app.js | 6 +- .../license_dashboard/license_dashboard.js | 6 +- .../sections/upload_license/upload_license.js | 4 +- .../pipeline_editor.test.js.snap | 24 +- .../pipeline_editor/pipeline_editor.js | 2 +- .../components/pipeline_list/pipeline_list.js | 2 +- .../public/application/access_denied/page.tsx | 8 +- .../components/ml_page/ml_page.tsx | 2 +- .../source_selection/source_selection.tsx | 7 +- .../new_job/pages/index_or_search/page.tsx | 2 +- .../jobs/new_job/pages/new_job/page.tsx | 5 +- .../components/access_denied_page.tsx | 2 +- .../components/insufficient_license_page.tsx | 2 +- .../jobs_list_page/jobs_list_page.tsx | 2 +- .../settings/anomaly_detection_settings.tsx | 2 +- .../application/pages/kibana/instance.tsx | 2 +- .../application/pages/kibana/overview.tsx | 2 +- .../application/pages/logstash/advanced.tsx | 2 +- .../application/pages/logstash/node.tsx | 2 +- .../application/pages/page_template.tsx | 4 +- .../public/components/apm/apm_metrics.tsx | 2 +- .../components/apm/instances/instances.js | 2 +- .../public/components/beats/beat/beat.js | 2 +- .../components/beats/listing/listing.js | 2 +- .../__snapshots__/overview.test.js.snap | 8 +- .../components/beats/overview/overview.js | 2 +- .../components/cluster/listing/listing.js | 2 +- .../ccr/__snapshots__/ccr.test.js.snap | 8 +- .../components/elasticsearch/ccr/ccr.js | 4 +- .../elasticsearch/index/advanced.js | 2 +- .../components/elasticsearch/index/index.js | 2 +- .../elasticsearch/indices/indices.js | 2 +- .../elasticsearch/ml_jobs/ml_jobs.tsx | 2 +- .../components/elasticsearch/node/advanced.js | 2 +- .../components/elasticsearch/node/node.js | 2 +- .../components/elasticsearch/nodes/nodes.js | 2 +- .../elasticsearch/overview/overview.js | 2 +- .../enterprise_search/overview/overview.tsx | 2 +- .../components/kibana/instances/instances.tsx | 2 +- .../components/logstash/listing/listing.js | 2 +- .../components/logstash/overview/overview.js | 2 +- .../pipeline_listing/pipeline_listing.js | 2 +- .../pipeline_viewer.test.js.snap | 8 +- .../pipeline_viewer/views/pipeline_viewer.js | 8 +- .../__snapshots__/no_data.test.js.snap | 12 +- .../public/components/no_data/no_data.js | 4 +- .../__snapshots__/page_loading.test.js.snap | 4 +- .../public/components/page_loading/index.tsx | 2 +- .../shared/page_template/page_template.tsx | 26 +- .../components/loading_observability.tsx | 2 +- .../plugins/osquery/public/components/app.tsx | 7 +- .../remote_cluster_edit.js | 8 +- .../remote_cluster_list.js | 2 +- .../sections/job_create/job_create.js | 2 +- .../crud_app/sections/job_list/job_list.js | 2 +- .../plugins/screenshotting/public/app/app.tsx | 4 +- .../searchprofiler/public/application/app.tsx | 4 +- .../user_profile/user_profile.tsx | 2 +- .../api_keys_grid/api_keys_empty_prompt.tsx | 11 +- .../api_keys_grid/api_keys_grid_page.tsx | 88 ++-- .../api_keys_grid/not_enabled/not_enabled.tsx | 5 +- .../permission_denied/permission_denied.tsx | 43 +- .../permission_denied/permission_denied.tsx | 2 +- .../edit_role_mapping_page.tsx | 2 +- .../role_mappings_grid_page.tsx | 2 +- .../permission_denied/permission_denied.tsx | 2 +- .../users/users_grid/users_grid_page.tsx | 2 +- .../__snapshots__/prompt_page.test.tsx.snap | 4 +- .../unauthenticated_page.test.tsx.snap | 2 +- .../reset_session_page.test.tsx.snap | 2 +- .../plugins/security/server/prompt_page.tsx | 8 +- .../cypress/tasks/create_new_rule.ts | 1 + .../security_solution/public/app/404.tsx | 2 +- .../template_wrapper/bottom_bar/index.tsx | 6 +- .../app/home/template_wrapper/index.tsx | 133 ++--- .../public/app/no_privileges.tsx | 2 +- .../common/components/page_wrapper/index.tsx | 4 - .../plugin_template_wrapper.tsx | 11 +- .../components/administration_list_page.tsx | 4 +- .../management_empty_state_wrapper.tsx | 2 +- .../policy_artifacts_empty_unassigned.tsx | 7 +- .../policy_artifacts_empty_unexisting.tsx | 6 +- .../layout/policy_artifacts_layout.tsx | 2 +- .../pages/policy/view/policy_details.tsx | 6 +- .../public/application/app.tsx | 2 +- .../public/application/components/loading.tsx | 2 +- .../sections/home/policy_list/policy_list.tsx | 8 +- .../home/repository_list/repository_list.tsx | 6 +- .../home/restore_list/restore_list.tsx | 2 +- .../components/repository_empty_prompt.tsx | 6 +- .../components/repository_error.tsx | 2 +- .../components/snapshot_empty_prompt.tsx | 8 +- .../sections/policy_add/policy_add.tsx | 6 +- .../sections/policy_edit/policy_edit.tsx | 7 +- .../repository_add/repository_add.tsx | 6 +- .../repository_edit/repository_edit.tsx | 7 +- .../restore_snapshot/restore_snapshot.tsx | 6 +- .../edit_space/manage_space_page.tsx | 4 +- .../spaces_grid/spaces_grid_page.tsx | 2 +- .../add_monitor_private_location.ts | 2 +- .../public/apps/synthetics/routes.tsx | 28 +- .../synthetics/utils/testing/rtl_helpers.tsx | 2 +- .../uptime_page_template.test.tsx.snap | 12 +- .../legacy_uptime/lib/helper/rtl_helpers.tsx | 2 +- .../public/legacy_uptime/routes.tsx | 12 +- .../enterprise_guard/enterprise_guard.tsx | 2 +- .../integrations_guard/integrations_guard.tsx | 2 +- ...urity_solution_plugin_template_wrapper.tsx | 18 +- .../public/modules/empty_page/empty_page.tsx | 2 +- .../public/app/components/section_error.tsx | 2 +- .../components/with_privileges.tsx | 6 +- .../clone_transform_section.tsx | 2 +- .../create_transform_section.tsx | 2 +- .../transform_list.test.tsx.snap | 4 +- .../transform_list/transform_list.tsx | 2 +- .../transform_management_section.tsx | 4 +- .../rule_details/components/rule_details.tsx | 2 +- .../public/application/app.tsx | 6 +- .../components/coming_soon_prompt.tsx | 2 +- .../es_deprecation_logs.tsx | 2 +- .../es_deprecations/es_deprecations.tsx | 8 +- .../kibana_deprecations.tsx | 7 +- .../components/overview/overview.tsx | 2 +- .../deprecations_page_loading_error.tsx | 2 +- .../plugins/ux/public/application/ux_app.tsx | 41 +- .../components/app/rum_dashboard/rum_home.tsx | 25 +- .../watcher/public/application/app.tsx | 2 +- .../json_watch_edit/json_watch_edit.tsx | 6 +- .../monitoring_watch_edit.tsx | 2 +- .../threshold_watch_edit.tsx | 2 +- .../watch_edit_page/watch_edit_page.tsx | 2 +- .../watch_list_page/watch_list_page.tsx | 2 +- .../watch_status_page/watch_status_page.tsx | 2 +- .../plugins/cases/public/application.tsx | 2 +- yarn.lock | 8 +- 325 files changed, 2185 insertions(+), 1969 deletions(-) diff --git a/dev_docs/tutorials/kibana_page_template.mdx b/dev_docs/tutorials/kibana_page_template.mdx index 5c037f4f3d062..4b21b9222b395 100644 --- a/dev_docs/tutorials/kibana_page_template.mdx +++ b/dev_docs/tutorials/kibana_page_template.mdx @@ -2,96 +2,26 @@ id: kibDevDocsKPTTutorial slug: /kibana-dev-docs/tutorials/kibana-page-template title: Kibana Page Template -description: Learn how to create pages in Kibana +description: Learn how to create page layouts in Kibana date: 2021-03-20 -tags: ['kibana', 'dev', 'ui', 'tutorials'] +tags: ['kibana', 'dev', 'ui', 'tutorials', 'pages', 'layout'] --- -`KibanaPageTemplate` is a thin wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/layout/page) that makes setting up common types of Kibana pages quicker and easier while also adhering to any Kibana-specific requirements and patterns. - -Refer to EUI's documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/layout/page) for constructing page layouts. - -## `isEmptyState` - -Use the `isEmptyState` prop for when there is no page content to show. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met. - -The default empty state uses any `pageHeader` info provided to populate an [**EuiEmptyPrompt**](https://elastic.github.io/eui/#/display/empty-prompt) and uses the `centeredBody` template type. - -```tsx - - Create new dashboard - , - ], - }} -/> -``` - -![Screenshot of demo empty state code. Shows the Kibana navigation bars and a centered empty state with the dashboard app icon, a level 1 heading "Dashboards", body text "You don't have any dashboards yet.", and a button that says "Create new dashboard".](../assets/kibana_default_empty_state.png) - - - Because all properties of the page header are optional, the empty state has the potential to - render blank. Make sure your empty state doesn't leave the user confused. + + Be sure to import the `KibanaPageTemplate` from `@kbn/shared-ux-page-kibana-template`. -### Custom empty state - -You can also provide a custom empty prompt to replace the pre-built one. You'll want to remove any `pageHeader` props and pass an [`EuiEmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) directly as the child of KibanaPageTemplate. - -```tsx - - No data} - body="You have no data. Would you like some of ours?" - actions={[ - - Get sample data - , - ]} - /> - -``` - -![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_custom_empty_state.png) +`KibanaPageTemplate` is a Kibana-specific wrapper around [EuiPageTemplate](https://elastic.github.io/eui/#/templates/page-template) and it's namespaced components such as `KibanaPageTemplate.Header`. This component makes setting up common types of Kibana pages quicker and easier while also adhering to certain Kibana-specific requirements and patterns. -### Empty states with a page header +**Refer to EUI's own documentation on [**EuiPageTemplate**](https://elastic.github.io/eui/#/templates/page-template) for constructing page layouts and inherited props.** -When passing both a `pageHeader` configuration and `isEmptyState`, the component will render the proper template (`centeredContent`). Be sure to reduce the heading level within your child empty prompt to `

`. - -```tsx - - No data

} - body="You have no data. Would you like some of ours?" - actions={[ - - Get sample data - , - ]} - /> -
-``` - -![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png) +The following props are Kibana-specific extensions. ## `solutionNav` -To add left side navigation for your solution, we recommend passing [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav) props to the `solutionNav` prop. The template component will then handle the mobile views and add the solution nav embellishments. On top of the EUI props, you'll need to pass your solution `name` and an optional `icon`. - -If you need to custom side bar content, you will need to pass you own navigation component to `pageSideBar`. We still recommend using [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav). +To add left side navigation for your solution, we recommend using the provided `solutionNav` prop which is an object that extends [**EuiSideNavProps**](https://elastic.github.io/eui/#/navigation/side-nav). -When using `EuiSideNav`, root level items should not be linked but provide section labelling only. +Simply pass your array of `solutionNav.items` and the required `solution.name` and the template component will then handle the mobile views and collapsibility. For solutions and larger applications, we recommend also passing an `solutionNav.icon`. ```tsx ``` +> When using `EuiSideNav`, root level items should not be linked but provide section labelling only. ![Screenshot of Stack Management empty state with a provided solution navigation shown on the left, outlined in pink.](../assets/kibana_template_solution_nav.png) ![Screenshots of Stack Management page in mobile view. Menu closed on the left, menu open on the right.](../assets/kibana_template_solution_nav_mobile.png) +If you need custom solution navigation **content**, you can pass your own `solutionNav.children` instead of the items or supply your own componen with `` We still recommend using [**EuiSideNav**](https://elastic.github.io/eui/#/navigation/side-nav). + ## `noDataConfig` -Increases the consistency in messaging across all the solutions during the getting started process when no data exists. Each solution/template instance decides when is the most appropriate time to show this configuration, but is messaged specifically towards having no indices or index patterns at all or that match the particular solution. +Increases the consistency in messaging across all the solutions during the getting started process when no data exists. Each solution/template instance decides when is the most appropriate time to show this configuration, but is messaged specifically towards having **no indices and/or data views at all or that match the particular solution**. -This is a built-in configuration that displays a very specific UI and requires very specific keys. It will also ignore all other configurations of the template including `pageHeader` and `children`, with the exception of continuing to show `solutionNav`. +This is a built-in configuration that displays a very specific UI and requires very specific object keys. It will also ignore all other configurations of the template including `pageHeader` and `children`, with the exception of continuing to show `solutionNav`. -The `noDataConfig` is of type [`NoDataPagProps`](https://github.com/elastic/kibana/blob/main/src/plugins/kibana_react/public/page_template/no_data_page/no_data_page.tsx): +The `noDataConfig` is of type [`NoDataPageProps`](https://github.com/elastic/kibana/blob/main/packages/kbn-shared-ux-components/src/page_template/no_data_page/types.ts): -1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description *(required)* -2. `docsLink: string`: Required to set the docs link for the whole solution *(required)* +1. `solution: string`: Single name for the current solution, used to auto-generate the title, logo, and description _(required)_ +2. `docsLink: string`: Required to set the docs link for the whole solution _(required)_ 3. `logo?: string`: Optionally replace the auto-generated logo 4. `pageTitle?: string`: Optionally replace the auto-generated page title (h1) -5. `actions: NoDataPageActionsProps`: An object of `NoDataPageActions` configurations with unique primary keys *(required)* +5. `action: NoDataPageActions`: An object of `NoDataPageActions` configurations with a single primary key _(required)_ ### `NoDataPageActions` -There are two main actions for adding data that we promote throughout Kibana, Elastic Agent and Beats. They are added to the cards that are displayed by using the keys `elasticAgent` and `beats` respectively. For consistent messaging, these two cards are pre-configured but require specific `href`s and/or `onClick` handlers for directing the user to the right location for that solution. - -It also accepts a `recommended` prop as a boolean to promote one or more of the cards through visuals added to the UI. It will also place the `recommended` ones first in the list. Optionally you can also replace the `button` label by passing a string, or the whole component by passing a `ReactNode`. +There is currently only one promotoed path to ingesting data and that is through the Fleet / Ingest UI. This gets presented to the user by rendering a card that provides consistent messaging. It is mostly pre-configured but require specific `href`s and/or `onClick` handlers for directing the user to the right location for that solution. +Optionally you can also replace the `button` label by passing a string, or the whole button component by passing a `ReactNode`. ```tsx // Perform your own check @@ -148,10 +80,7 @@ const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = { solution: 'Analytics', logo: 'logoKibana', docsLink: '#', - actions: { - beats: { - href: '#', - }, + action: { elasticAgent: { href: '#', }, @@ -165,8 +94,80 @@ const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = { noDataConfig={hasData ? undefined : noDataConfig} > {/* Children will be ignored */} +; +``` + +![Screenshot of and example in Analytics using the no data configuration and using the corresponding list numbers to point out the UI elements that they adjust.](../assets/kibana_template_no_data_config.png) + +## `isEmptyState` + +Use the `isEmptyState` prop for when there is no page **content** to show. This is for when the user **has data** but has not created the thing that the page displays. For example, before the user has created something, when no search results are found, before data is populated, or when permissions aren't met. + +This prop is a simple boolean uses any `pageHeader` info provided to populate an centered [**EuiPageTemplate.EmptyPrompt**](https://elastic.github.io/eui/#/templates/page-template#empty-pages-or-content). + +```tsx + + Create new dashboard + , + ], + }} +/> +``` + +![Screenshot of demo empty state code. Shows the Kibana navigation bars and a centered empty state with the dashboard app icon, a level 1 heading "Dashboards", body text "You don't have any dashboards yet.", and a button that says "Create new dashboard".](../assets/kibana_default_empty_state.png) + + + Because all properties of the page header are optional, the empty state has the potential to + render blank. Make sure your empty state doesn't leave the user confused. + + +### Custom empty states + +You can also provide a custom empty prompt to replace the pre-built one using [`KibanaPageTemplate.EmptyPrompt`](https://elastic.github.io/eui/#/display/empty-prompt) as a child of KibanaPageTemplate. + +```tsx + + No data} + body="You have no data. Would you like some of ours?" + actions={[ + + Get sample data + , + ]} + /> ``` +![Screenshot of demo custom empty state code. Shows the Kibana navigation bars and a centered empty state with the a level 1 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_custom_empty_state.png) + +### Empty states with a page header + +When passing both a `pageHeader` configuration and rendering a `KibanaPageTemplate.EmptyPrompt`, be sure to reduce the heading level within your child empty prompt to `

`. + +```tsx + + No data

} + body="You have no data. Would you like some of ours?" + actions={[ + + Get sample data + , + ]} + /> +
+``` -![Screenshot of and example in Observability using the no data configuration and using the corresponding list numbers to point out the UI elements that they adjust.](../assets/kibana_template_no_data_config.png) +![Screenshot of demo custom empty state code with a page header. Shows the Kibana navigation bars, a level 1 heading "Dashboards", and a centered empty state with the a level 2 heading "No data", body text "You have no data. Would you like some of ours?", and a button that says "Get sample data".](../assets/kibana_header_and_empty_state.png) diff --git a/docs/developer/advanced/sharing-saved-objects.asciidoc b/docs/developer/advanced/sharing-saved-objects.asciidoc index 69ffab1910b5e..6121201bb07c5 100644 --- a/docs/developer/advanced/sharing-saved-objects.asciidoc +++ b/docs/developer/advanced/sharing-saved-objects.asciidoc @@ -284,10 +284,10 @@ const getLegacyUrlConflictCallout = () => { return ( - + {/* If we have a legacy URL conflict callout to display, show it at the top of the page */} {getLegacyUrlConflictCallout()} - + ... ); ``` diff --git a/examples/bfetch_explorer/public/components/page/index.tsx b/examples/bfetch_explorer/public/components/page/index.tsx index 7f9f6ee9be940..b4ce0806b1356 100644 --- a/examples/bfetch_explorer/public/components/page/index.tsx +++ b/examples/bfetch_explorer/public/components/page/index.tsx @@ -9,8 +9,8 @@ import * as React from 'react'; import { EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiTitle, diff --git a/examples/bfetch_explorer/public/containers/app/sidebar/index.tsx b/examples/bfetch_explorer/public/containers/app/sidebar/index.tsx index 7bb2a5737c4ac..fe0902f88f321 100644 --- a/examples/bfetch_explorer/public/containers/app/sidebar/index.tsx +++ b/examples/bfetch_explorer/public/containers/app/sidebar/index.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { EuiPageSideBar, EuiSideNav } from '@elastic/eui'; +import { EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { useHistory } from 'react-router-dom'; import { routes } from '../../../routes'; diff --git a/examples/dashboard_embeddable_examples/public/app.tsx b/examples/dashboard_embeddable_examples/public/app.tsx index 69d4668d829d7..531a78a35999c 100644 --- a/examples/dashboard_embeddable_examples/public/app.tsx +++ b/examples/dashboard_embeddable_examples/public/app.tsx @@ -12,9 +12,9 @@ import { BrowserRouter as Router, Route, RouteComponentProps, withRouter } from import { EuiPage, - EuiPageContent, - EuiPageContentBody, - EuiPageSideBar, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, + EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav, } from '@elastic/eui'; import 'brace/mode/json'; diff --git a/examples/data_view_field_editor_example/public/app.tsx b/examples/data_view_field_editor_example/public/app.tsx index 846ff0b290fb4..9fae5797c8d61 100644 --- a/examples/data_view_field_editor_example/public/app.tsx +++ b/examples/data_view_field_editor_example/public/app.tsx @@ -15,8 +15,8 @@ import { EuiInMemoryTable, EuiPage, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiText, useGeneratedHtmlId, diff --git a/examples/developer_examples/public/app.tsx b/examples/developer_examples/public/app.tsx index a179ebb6abb6a..15fa925a0f56b 100644 --- a/examples/developer_examples/public/app.tsx +++ b/examples/developer_examples/public/app.tsx @@ -11,9 +11,9 @@ import ReactDOM from 'react-dom'; import { EuiText, - EuiPageContent, + EuiPageContent_Deprecated as EuiPageContent, EuiCard, - EuiPageContentHeader, + EuiPageContentHeader_Deprecated as EuiPageContentHeader, EuiFlexGroup, EuiFlexItem, EuiFieldSearch, diff --git a/examples/embeddable_explorer/public/app.tsx b/examples/embeddable_explorer/public/app.tsx index ad7eb76188b54..e37765b007ee3 100644 --- a/examples/embeddable_explorer/public/app.tsx +++ b/examples/embeddable_explorer/public/app.tsx @@ -10,7 +10,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from 'react-router-dom'; -import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui'; +import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { EmbeddableStart } from '@kbn/embeddable-plugin/public'; import { UiActionsStart } from '@kbn/ui-actions-plugin/public'; diff --git a/examples/embeddable_explorer/public/embeddable_panel_example.tsx b/examples/embeddable_explorer/public/embeddable_panel_example.tsx index 50c941938cb74..e656bb8958aaf 100644 --- a/examples/embeddable_explorer/public/embeddable_panel_example.tsx +++ b/examples/embeddable_explorer/public/embeddable_panel_example.tsx @@ -10,8 +10,8 @@ import React, { useState, useEffect, useRef } from 'react'; import { EuiPanel, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiTitle, diff --git a/examples/embeddable_explorer/public/hello_world_embeddable_example.tsx b/examples/embeddable_explorer/public/hello_world_embeddable_example.tsx index 228dd0b9c14e7..4df857fa80c0e 100644 --- a/examples/embeddable_explorer/public/hello_world_embeddable_example.tsx +++ b/examples/embeddable_explorer/public/hello_world_embeddable_example.tsx @@ -9,8 +9,8 @@ import React from 'react'; import { EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/embeddable_explorer/public/list_container_example.tsx b/examples/embeddable_explorer/public/list_container_example.tsx index 764f02b28e14c..f04bf8a5dfa25 100644 --- a/examples/embeddable_explorer/public/list_container_example.tsx +++ b/examples/embeddable_explorer/public/list_container_example.tsx @@ -9,8 +9,8 @@ import React from 'react'; import { EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/embeddable_explorer/public/todo_embeddable_example.tsx b/examples/embeddable_explorer/public/todo_embeddable_example.tsx index 0710f5b0d082e..5bf05bdc97d5d 100644 --- a/examples/embeddable_explorer/public/todo_embeddable_example.tsx +++ b/examples/embeddable_explorer/public/todo_embeddable_example.tsx @@ -14,8 +14,8 @@ import { EuiFlexItem, EuiFormRow, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/expressions_explorer/public/actions_and_expressions.tsx b/examples/expressions_explorer/public/actions_and_expressions.tsx index a42a7d3b31f10..d7322cd34e236 100644 --- a/examples/expressions_explorer/public/actions_and_expressions.tsx +++ b/examples/expressions_explorer/public/actions_and_expressions.tsx @@ -11,8 +11,8 @@ import { EuiFlexItem, EuiFlexGroup, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/expressions_explorer/public/actions_and_expressions2.tsx b/examples/expressions_explorer/public/actions_and_expressions2.tsx index 9745fbbb3241b..10a3c7a679195 100644 --- a/examples/expressions_explorer/public/actions_and_expressions2.tsx +++ b/examples/expressions_explorer/public/actions_and_expressions2.tsx @@ -11,8 +11,8 @@ import { EuiFlexItem, EuiFlexGroup, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/expressions_explorer/public/app.tsx b/examples/expressions_explorer/public/app.tsx index 0ff1ae36f7a9b..6b36d7cba036b 100644 --- a/examples/expressions_explorer/public/app.tsx +++ b/examples/expressions_explorer/public/app.tsx @@ -12,8 +12,8 @@ import { EuiPage, EuiPageHeader, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiSpacer, EuiText, EuiLink, diff --git a/examples/expressions_explorer/public/render_expressions.tsx b/examples/expressions_explorer/public/render_expressions.tsx index c0301a3f07281..768aaff133686 100644 --- a/examples/expressions_explorer/public/render_expressions.tsx +++ b/examples/expressions_explorer/public/render_expressions.tsx @@ -11,8 +11,8 @@ import { EuiFlexItem, EuiFlexGroup, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/expressions_explorer/public/run_expressions.tsx b/examples/expressions_explorer/public/run_expressions.tsx index 6e29f3fbad3ba..0b0558568522e 100644 --- a/examples/expressions_explorer/public/run_expressions.tsx +++ b/examples/expressions_explorer/public/run_expressions.tsx @@ -13,8 +13,8 @@ import { EuiFlexItem, EuiFlexGroup, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiPanel, diff --git a/examples/field_formats_example/public/app.tsx b/examples/field_formats_example/public/app.tsx index 4b9cffeec1862..a354a767d7df7 100644 --- a/examples/field_formats_example/public/app.tsx +++ b/examples/field_formats_example/public/app.tsx @@ -15,8 +15,8 @@ import { EuiLink, EuiPage, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiSpacer, diff --git a/examples/locator_examples/public/app.tsx b/examples/locator_examples/public/app.tsx index c874319de8120..048da396833bf 100644 --- a/examples/locator_examples/public/app.tsx +++ b/examples/locator_examples/public/app.tsx @@ -10,8 +10,8 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { EuiPageBody } from '@elastic/eui'; -import { EuiPageContent } from '@elastic/eui'; -import { EuiPageContentBody } from '@elastic/eui'; +import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui'; +import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui'; import { Route, Switch, Redirect, Router, useLocation } from 'react-router-dom'; import { createBrowserHistory } from 'history'; import { EuiText } from '@elastic/eui'; diff --git a/examples/locator_explorer/public/app.tsx b/examples/locator_explorer/public/app.tsx index 951320ba83a5c..66bb295891fd6 100644 --- a/examples/locator_explorer/public/app.tsx +++ b/examples/locator_explorer/public/app.tsx @@ -11,8 +11,8 @@ import ReactDOM from 'react-dom'; import { EuiPage } from '@elastic/eui'; import { EuiButton } from '@elastic/eui'; import { EuiPageBody } from '@elastic/eui'; -import { EuiPageContent } from '@elastic/eui'; -import { EuiPageContentBody } from '@elastic/eui'; +import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui'; +import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui'; import { EuiSpacer } from '@elastic/eui'; import { EuiText } from '@elastic/eui'; import { EuiFieldText } from '@elastic/eui'; diff --git a/examples/locator_explorer/public/page.tsx b/examples/locator_explorer/public/page.tsx index cc7aead1c9cfc..05d64781c2ea3 100644 --- a/examples/locator_explorer/public/page.tsx +++ b/examples/locator_explorer/public/page.tsx @@ -10,8 +10,8 @@ import React from 'react'; import { EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiTitle, diff --git a/examples/partial_results_example/public/app/app.tsx b/examples/partial_results_example/public/app/app.tsx index 1f71a398ddb7f..8988b631a8e94 100644 --- a/examples/partial_results_example/public/app/app.tsx +++ b/examples/partial_results_example/public/app/app.tsx @@ -14,8 +14,8 @@ import { EuiCodeBlock, EuiPage, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiSpacer, diff --git a/examples/preboot_example/public/app.tsx b/examples/preboot_example/public/app.tsx index 095b8af4fef82..10d5cfd57a06e 100644 --- a/examples/preboot_example/public/app.tsx +++ b/examples/preboot_example/public/app.tsx @@ -12,7 +12,7 @@ import { EuiFieldText, EuiFlexGroup, EuiFlexItem, - EuiPageTemplate, + EuiPageTemplate_Deprecated as EuiPageTemplate, EuiPanel, EuiText, } from '@elastic/eui'; diff --git a/examples/response_stream/public/components/page.tsx b/examples/response_stream/public/components/page.tsx index 86267a97a441d..15455d58d54e1 100644 --- a/examples/response_stream/public/components/page.tsx +++ b/examples/response_stream/public/components/page.tsx @@ -10,8 +10,8 @@ import * as React from 'react'; import { EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiTitle, diff --git a/examples/response_stream/public/containers/app/sidebar.tsx b/examples/response_stream/public/containers/app/sidebar.tsx index 28783a8704c6d..eb29ace491376 100644 --- a/examples/response_stream/public/containers/app/sidebar.tsx +++ b/examples/response_stream/public/containers/app/sidebar.tsx @@ -7,7 +7,7 @@ */ import React from 'react'; -import { EuiPageSideBar, EuiSideNav } from '@elastic/eui'; +import { EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { useHistory } from 'react-router-dom'; import { routes } from '../../routes'; diff --git a/examples/routing_example/public/app.tsx b/examples/routing_example/public/app.tsx index 37b6d18a4e669..51389ae913424 100644 --- a/examples/routing_example/public/app.tsx +++ b/examples/routing_example/public/app.tsx @@ -12,10 +12,10 @@ import { AppMountParameters } from '@kbn/core/public'; import { EuiPage, EuiPageBody, - EuiPageContent, + EuiPageContent_Deprecated as EuiPageContent, EuiText, EuiHorizontalRule, - EuiPageContentHeader, + EuiPageContentHeader_Deprecated as EuiPageContentHeader, EuiListGroup, } from '@elastic/eui'; import { RandomNumberRouteExample } from './random_number_example'; diff --git a/examples/screenshot_mode_example/public/components/app.tsx b/examples/screenshot_mode_example/public/components/app.tsx index ed4475a9a90b5..be4a193f2ddba 100644 --- a/examples/screenshot_mode_example/public/components/app.tsx +++ b/examples/screenshot_mode_example/public/components/app.tsx @@ -13,9 +13,9 @@ import { FormattedMessage, I18nProvider } from '@kbn/i18n-react'; import { EuiPage, EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, + EuiPageContentHeader_Deprecated as EuiPageContentHeader, EuiPageHeader, EuiTitle, EuiText, diff --git a/examples/search_examples/public/common/example_page.tsx b/examples/search_examples/public/common/example_page.tsx index 502d6545be76c..15def7e18c5bc 100644 --- a/examples/search_examples/public/common/example_page.tsx +++ b/examples/search_examples/public/common/example_page.tsx @@ -7,7 +7,7 @@ */ import React, { PropsWithChildren } from 'react'; -import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui'; +import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { IBasePath } from '@kbn/core/public'; import { PLUGIN_ID } from '../../common'; diff --git a/examples/search_examples/public/search/app.tsx b/examples/search_examples/public/search/app.tsx index b668630bc05ba..94cf19436c3f5 100644 --- a/examples/search_examples/public/search/app.tsx +++ b/examples/search_examples/public/search/app.tsx @@ -18,8 +18,8 @@ import { EuiFormLabel, EuiHorizontalRule, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiProgress, EuiSpacer, diff --git a/examples/search_examples/public/search_sessions/app.tsx b/examples/search_examples/public/search_sessions/app.tsx index 63657765af8b4..b9aa8e6fe961a 100644 --- a/examples/search_examples/public/search_sessions/app.tsx +++ b/examples/search_examples/public/search_sessions/app.tsx @@ -21,8 +21,8 @@ import { EuiFormLabel, EuiLoadingSpinner, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiSpacer, diff --git a/examples/search_examples/public/sql_search/app.tsx b/examples/search_examples/public/sql_search/app.tsx index b63425bbe2679..cd0db29db8a81 100644 --- a/examples/search_examples/public/sql_search/app.tsx +++ b/examples/search_examples/public/sql_search/app.tsx @@ -14,8 +14,8 @@ import { EuiFlexItem, EuiForm, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPanel, EuiSuperUpdateButton, diff --git a/examples/state_containers_examples/public/common/example_page.tsx b/examples/state_containers_examples/public/common/example_page.tsx index 91107066e3bc6..ab1141fd96e6c 100644 --- a/examples/state_containers_examples/public/common/example_page.tsx +++ b/examples/state_containers_examples/public/common/example_page.tsx @@ -7,7 +7,7 @@ */ import React, { PropsWithChildren } from 'react'; -import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui'; +import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui'; import { CoreStart } from '@kbn/core/public'; export interface ExampleLink { diff --git a/examples/state_containers_examples/public/todo/todo.tsx b/examples/state_containers_examples/public/todo/todo.tsx index 1a4e85fbb0928..a02e27d91c4ad 100644 --- a/examples/state_containers_examples/public/todo/todo.tsx +++ b/examples/state_containers_examples/public/todo/todo.tsx @@ -14,8 +14,8 @@ import { EuiCheckbox, EuiFieldText, EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiSpacer, diff --git a/examples/state_containers_examples/public/with_data_services/app.tsx b/examples/state_containers_examples/public/with_data_services/app.tsx index 04d41cb6aa6a5..7a3520ff333d1 100644 --- a/examples/state_containers_examples/public/with_data_services/app.tsx +++ b/examples/state_containers_examples/public/with_data_services/app.tsx @@ -13,7 +13,7 @@ import { Router } from 'react-router-dom'; import { EuiFieldText, EuiPageBody, - EuiPageContent, + EuiPageContent_Deprecated as EuiPageContent, EuiPageHeader, EuiText, EuiTitle, diff --git a/examples/ui_actions_explorer/public/app.tsx b/examples/ui_actions_explorer/public/app.tsx index f1f0bcb314c27..b467c4c47d585 100644 --- a/examples/ui_actions_explorer/public/app.tsx +++ b/examples/ui_actions_explorer/public/app.tsx @@ -13,8 +13,8 @@ import { EuiPage } from '@elastic/eui'; import { EuiButton } from '@elastic/eui'; import { EuiPageBody } from '@elastic/eui'; -import { EuiPageContent } from '@elastic/eui'; -import { EuiPageContentBody } from '@elastic/eui'; +import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui'; +import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui'; import { EuiSpacer } from '@elastic/eui'; import { EuiText } from '@elastic/eui'; import { EuiFieldText } from '@elastic/eui'; diff --git a/examples/ui_actions_explorer/public/page.tsx b/examples/ui_actions_explorer/public/page.tsx index cc7aead1c9cfc..05d64781c2ea3 100644 --- a/examples/ui_actions_explorer/public/page.tsx +++ b/examples/ui_actions_explorer/public/page.tsx @@ -10,8 +10,8 @@ import React from 'react'; import { EuiPageBody, - EuiPageContent, - EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, EuiPageHeader, EuiPageHeaderSection, EuiTitle, diff --git a/examples/user_profile_examples/public/plugin.tsx b/examples/user_profile_examples/public/plugin.tsx index 4a273dc097291..e821ebebcd7d9 100755 --- a/examples/user_profile_examples/public/plugin.tsx +++ b/examples/user_profile_examples/public/plugin.tsx @@ -10,7 +10,7 @@ import ReactDOM from 'react-dom'; import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public'; import { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public'; import { SecurityPluginSetup, SecurityPluginStart } from '@kbn/security-plugin/public'; -import { EuiPageTemplate } from '@elastic/eui'; +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import { AvatarDemo } from './avatar_demo'; import { PopoverDemo } from './popover_demo'; import { SelectableDemo } from './selectable_demo'; @@ -38,7 +38,7 @@ export class UserProfilesPlugin implements Plugin - , + , element ); return () => ReactDOM.unmountComponentAtNode(element); diff --git a/package.json b/package.json index fa57a8c0d6f27..92dc1590d9a51 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.3.0-canary.1", "@elastic/ems-client": "8.3.3", - "@elastic/eui": "62.2.4", + "@elastic/eui": "63.0.6", "@elastic/filesaver": "1.1.2", "@elastic/node-crypto": "1.2.1", "@elastic/numeral": "^2.5.1", diff --git a/packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx b/packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx index b0f71d69e31e2..924f59d973878 100644 --- a/packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx +++ b/packages/core/application/core-application-browser-internal/src/ui/app_not_found_screen.tsx @@ -6,7 +6,12 @@ * Side Public License, v 1. */ -import { EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui'; +import { + EuiEmptyPrompt, + EuiPage, + EuiPageBody, + EuiPageContent_Deprecated as EuiPageContent, +} from '@elastic/eui'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; diff --git a/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap b/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap index 7b7debc128fb1..93ee3f89667ca 100644 --- a/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap +++ b/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/__snapshots__/fatal_errors_screen.test.tsx.snap @@ -9,7 +9,7 @@ exports[`FatalErrorsScreen rendering render matches snapshot 1`] = ` } > - @@ -93,7 +93,7 @@ Error: bar stack...bar.js:1:1 - + `; diff --git a/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx b/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx index 6fbf6ab80aebb..bdcb6334eb48e 100644 --- a/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx +++ b/packages/core/fatal-errors/core-fatal-errors-browser-internal/src/fatal_errors_screen.tsx @@ -14,7 +14,7 @@ import { EuiEmptyPrompt, EuiPage, EuiPageBody, - EuiPageContent, + EuiPageContent_Deprecated as EuiPageContent, } from '@elastic/eui'; import React from 'react'; import { Observable, Subscription, merge, tap, fromEvent } from 'rxjs'; diff --git a/packages/kbn-plugin-generator/template/public/components/app.tsx.ejs b/packages/kbn-plugin-generator/template/public/components/app.tsx.ejs index 8da267c864fda..0de37b340a17e 100644 --- a/packages/kbn-plugin-generator/template/public/components/app.tsx.ejs +++ b/packages/kbn-plugin-generator/template/public/components/app.tsx.ejs @@ -8,9 +8,9 @@ import { EuiHorizontalRule, EuiPage, EuiPageBody, - EuiPageContent, - EuiPageContentBody, - EuiPageContentHeader, + EuiPageContent_Deprecated as EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, + EuiPageContentHeader_Deprecated as EuiPageContentHeader, EuiPageHeader, EuiTitle, EuiText, diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap index ed9a0b61e86f9..2932ceff41cc7 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap +++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template.test.tsx.snap @@ -2,21 +2,23 @@ exports[`KibanaPageTemplate render basic template 1`] = `
-
-
-
-
- Child element -
-
+
+ Child element
-
+
`; diff --git a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap index ef665dff6fe6d..0588fbfae152d 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap +++ b/packages/shared-ux/page/kibana_template/impl/src/__snapshots__/page_template_inner.test.tsx.snap @@ -1,68 +1,44 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`KibanaPageTemplateInner custom template 1`] = ` - - - test -

- } - iconColor="" - iconType="test" - title={ -

- test -

- } - /> -
-`; - exports[`KibanaPageTemplateInner isEmpty no pageHeader 1`] = ` - `; exports[`KibanaPageTemplateInner isEmpty pageHeader & children 1`] = ` - + <_EuiPageHeader + description="test" + iconType="test" + pageTitle="test" + rightSideItems={ + Array [ "test", - ], + ] } - } - template="centeredContent" -> + />
Child element
-
+ `; exports[`KibanaPageTemplateInner isEmpty pageHeader & no children 1`] = ` - - } /> - + +`; + +exports[`KibanaPageTemplateInner page sidebar 1`] = ` +<_EuiPageTemplate + className="kbnPageTemplate" + minHeight={0} + offset={0} +> + + Test + + `; diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template.tsx index 5a05315d395a7..afd981ca9eaa5 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/page_template.tsx +++ b/packages/shared-ux/page/kibana_template/impl/src/page_template.tsx @@ -7,6 +7,7 @@ */ import React, { FC } from 'react'; +import { EuiPageTemplate } from '@elastic/eui'; import { NoDataConfigPage, @@ -16,8 +17,7 @@ import { KibanaPageTemplateProps } from '@kbn/shared-ux-page-kibana-template-typ import { KibanaPageTemplateInner, KibanaPageTemplateWithSolutionNav } from './page_template_inner'; -export const KibanaPageTemplate: FC = ({ - template, +export const _KibanaPageTemplate: FC = ({ className, children, solutionNav, @@ -51,7 +51,6 @@ export const KibanaPageTemplate: FC = ({ if (solutionNav) { return ( = ({ ); } - return ( - - ); + return ; }; + +/** + * Kibana-specific wrapper of EuiPageTemplate and it's namespaced components + */ +export const KibanaPageTemplate = Object.assign(_KibanaPageTemplate, { + Sidebar: EuiPageTemplate.Sidebar, + Header: EuiPageTemplate.Header, + Section: EuiPageTemplate.Section, + BottomBar: EuiPageTemplate.BottomBar, + EmptyPrompt: EuiPageTemplate.EmptyPrompt, +}); diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.test.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.test.tsx index c17b83c4f4eed..d7278ac889669 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.test.tsx +++ b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.test.tsx @@ -10,9 +10,6 @@ import React from 'react'; import { shallow } from 'enzyme'; -// imports from elastic packages -import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui'; - // imports from immediate files import { KibanaPageTemplateInner } from './page_template_inner'; @@ -42,7 +39,7 @@ describe('KibanaPageTemplateInner', () => { ); expect(component).toMatchSnapshot(); - expect(component.find(EuiEmptyPrompt).length).toBe(1); + expect(component.find('_EuiPageEmptyPrompt').length).toBe(1); }); test('no pageHeader', () => { @@ -53,15 +50,9 @@ describe('KibanaPageTemplateInner', () => { }); }); - test('custom template', () => { - const component = shallow( - - ); + test('page sidebar', () => { + const component = shallow(Test} />); expect(component).toMatchSnapshot(); - expect(component.find(EuiPageTemplate).props().template).toEqual('centeredContent'); + expect(component.find('EuiPageSidebar')).toHaveLength(1); }); }); diff --git a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx index 6d836a3c66d7f..762435157f97d 100644 --- a/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx +++ b/packages/shared-ux/page/kibana_template/impl/src/page_template_inner.tsx @@ -8,7 +8,7 @@ import React, { FC } from 'react'; import classNames from 'classnames'; -import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui'; +import { EuiPageTemplate } from '@elastic/eui'; import { withSolutionNav } from '@kbn/shared-ux-page-solution-nav'; import { KibanaPageTemplateProps as Props } from '@kbn/shared-ux-page-kibana-template-types'; @@ -25,45 +25,60 @@ const getClasses = (template?: string, className?: string) => { * A thin wrapper around EuiPageTemplate with a few Kibana specific additions */ export const KibanaPageTemplateInner: FC = ({ - template, className, pageHeader, children, isEmptyState, + pageSideBar, + pageSideBarProps, ...rest }) => { - /** - * An easy way to create the right content for empty pages - */ - const emptyStateDefaultTemplate = 'centeredBody'; - let header = pageHeader; + let header; - if (isEmptyState) { - if (pageHeader && !children) { - template = template ?? emptyStateDefaultTemplate; - const { iconType, pageTitle, description, rightSideItems } = pageHeader; - const title = pageTitle ?

{pageTitle}

: undefined; - const body = description ?

{description}

: undefined; - header = undefined; - children = ( - - ); - } else if (pageHeader && children) { - template = template ?? 'centeredContent'; - } else if (!pageHeader) { - template = template ?? emptyStateDefaultTemplate; - } + if (isEmptyState && pageHeader && !children) { + const { iconType, pageTitle, description, rightSideItems } = pageHeader; + const title = pageTitle ?

{pageTitle}

: undefined; + const body = description ?

{description}

: undefined; + children = ( + + ); + } else if (pageHeader) { + header = ; } - const classes = getClasses(template, className); + let sideBar; + if (pageSideBar) { + sideBar = ( + + {pageSideBar} + + ); + } + + const classes = getClasses(undefined, className); + return ( - + + {sideBar} + {header} {children} ); diff --git a/packages/shared-ux/page/kibana_template/types/index.d.ts b/packages/shared-ux/page/kibana_template/types/index.d.ts index 8f3129c31817d..a8181876204e2 100644 --- a/packages/shared-ux/page/kibana_template/types/index.d.ts +++ b/packages/shared-ux/page/kibana_template/types/index.d.ts @@ -6,8 +6,9 @@ * Side Public License, v 1. */ -import { EuiPageTemplateProps } from '@elastic/eui'; +import { EuiPageTemplateProps, EuiPageSidebarProps, EuiPageHeaderProps } from '@elastic/eui'; import { SolutionNavProps } from '@kbn/shared-ux-page-solution-nav'; +import { ReactNode } from 'react'; import { NoDataConfig, @@ -21,10 +22,7 @@ export type { NoDataConfig } from '@kbn/shared-ux-page-no-data-config-types'; export type KibanaPageTemplateProps = EuiPageTemplateProps & { /** - * Changes the template type depending on other props provided. - * With `pageHeader` only: Uses `centeredBody` and fills an EuiEmptyPrompt with `pageHeader` info. - * With `children` only: Uses `centeredBody` - * With `pageHeader` and `children`: Uses `centeredContent` + * Converts the `pageHeader` contents into an EuiEmptyPrompt when no `children` are present */ isEmptyState?: boolean; /** @@ -32,8 +30,14 @@ export type KibanaPageTemplateProps = EuiPageTemplateProps & { */ solutionNav?: SolutionNavProps; /** - * Accepts a configuration object, that when provided, ignores pageHeader and children and instead + * Accepts a configuration object, that when provided, ignores `pageHeader` and `children` and instead * displays Agent, Beats, and custom cards to direct users to the right ingest location */ noDataConfig?: NoDataConfig; + /** + * BWC Props from old EUI template + */ + pageHeader?: EuiPageHeaderProps; + pageSideBar?: ReactNode; + pageSideBarProps?: EuiPageSidebarProps; }; diff --git a/packages/shared-ux/page/no_data/impl/src/no_data_page.tsx b/packages/shared-ux/page/no_data/impl/src/no_data_page.tsx index 1bc93123aea95..1ba9b18049e87 100644 --- a/packages/shared-ux/page/no_data/impl/src/no_data_page.tsx +++ b/packages/shared-ux/page/no_data/impl/src/no_data_page.tsx @@ -9,7 +9,7 @@ import React from 'react'; import classNames from 'classnames'; -import { EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; +import { EuiPageTemplate, EuiLink, EuiSpacer, EuiText, EuiTextColor } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; @@ -51,7 +51,12 @@ export const NoDataPage = ({ ); return ( -
+ @@ -62,6 +67,6 @@ export const NoDataPage = ({ -
+ ); }; diff --git a/packages/shared-ux/page/no_data_config/impl/src/constants.ts b/packages/shared-ux/page/no_data_config/impl/src/constants.ts index 1c4c2685433d4..96e1b1ac6b777 100644 --- a/packages/shared-ux/page/no_data_config/impl/src/constants.ts +++ b/packages/shared-ux/page/no_data_config/impl/src/constants.ts @@ -6,16 +6,4 @@ * Side Public License, v 1. */ -import type { NoDataConfigPageProps } from '@kbn/shared-ux-page-no-data-config-types'; - export const NO_DATA_PAGE_MAX_WIDTH = 950; - -export const NO_DATA_PAGE_TEMPLATE_PROPS: NoDataConfigPageProps = { - restrictWidth: NO_DATA_PAGE_MAX_WIDTH, - template: 'centeredBody', - pageContentProps: { - hasShadow: false, - color: 'transparent', - paddingSize: 'none', - }, -}; diff --git a/packages/shared-ux/page/no_data_config/impl/src/no_data_config_page.tsx b/packages/shared-ux/page/no_data_config/impl/src/no_data_config_page.tsx index f5153aa25686e..5ebebb72cb434 100644 --- a/packages/shared-ux/page/no_data_config/impl/src/no_data_config_page.tsx +++ b/packages/shared-ux/page/no_data_config/impl/src/no_data_config_page.tsx @@ -14,7 +14,7 @@ import { withSolutionNav } from '@kbn/shared-ux-page-solution-nav'; import { NoDataPage } from '@kbn/shared-ux-page-no-data'; import type { NoDataConfigPageProps } from '@kbn/shared-ux-page-no-data-config-types'; -import { NO_DATA_PAGE_TEMPLATE_PROPS } from './constants'; +import { NO_DATA_PAGE_MAX_WIDTH } from './constants'; const getClasses = (template?: string, className?: string) => { return classNames( @@ -25,20 +25,34 @@ const getClasses = (template?: string, className?: string) => { }; export const NoDataConfigPage = (props: NoDataConfigPageProps) => { - const { className: classNameProp, noDataConfig, ...rest } = props; + const { className, noDataConfig, pageSideBar, pageSideBarProps, ...rest } = props; if (!noDataConfig) { return null; } - const className = getClasses(NO_DATA_PAGE_TEMPLATE_PROPS.template, classNameProp); + let sideBar; + if (pageSideBar) { + sideBar = ( + {pageSideBar} + ); + } + + const classes = getClasses(undefined, className); return ( + {sideBar} ); diff --git a/packages/shared-ux/page/no_data_config/types/index.d.ts b/packages/shared-ux/page/no_data_config/types/index.d.ts index 10950bcf296c8..7d2258099a051 100644 --- a/packages/shared-ux/page/no_data_config/types/index.d.ts +++ b/packages/shared-ux/page/no_data_config/types/index.d.ts @@ -6,7 +6,8 @@ * Side Public License, v 1. */ -import { EuiPageTemplateProps } from '@elastic/eui'; +import { ReactNode } from 'react'; +import { EuiPageTemplateProps, EuiPageSidebarProps } from '@elastic/eui'; import type { NoDataPageProps, @@ -20,8 +21,13 @@ export type NoDataConfig = NoDataPageProps; export type NoDataConfigPageProps = EuiPageTemplateProps & { /** - * Accepts a configuration object, that when provided, ignores pageHeader and children and instead + * Accepts a configuration object, that when provided, ignores `pageHeader` and `children` and instead * displays Agent, Beats, and custom cards to direct users to the right ingest location */ noDataConfig?: NoDataConfig; + /** + * BWC Props from old EUI template + */ + pageSideBar?: ReactNode; + pageSideBarProps?: EuiPageSidebarProps; }; diff --git a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap index ad42fa64b24c8..bae96ec7b65d3 100644 --- a/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap +++ b/packages/shared-ux/page/solution_nav/src/__snapshots__/with_solution_nav.test.tsx.snap @@ -52,7 +52,8 @@ exports[`WithSolutionNav renders wrapped component 1`] = ` } pageSideBarProps={ Object { - "className": "kbnSolutionNav__sidebar", + "className": "kbnSolutionNav__sidebar kbnStickyMenu", + "minWidth": undefined, "paddingSize": "none", } } @@ -111,7 +112,8 @@ exports[`WithSolutionNav with children 1`] = ` } pageSideBarProps={ Object { - "className": "kbnSolutionNav__sidebar", + "className": "kbnSolutionNav__sidebar kbnStickyMenu", + "minWidth": undefined, "paddingSize": "none", } } diff --git a/packages/shared-ux/page/solution_nav/src/collapse_button.scss b/packages/shared-ux/page/solution_nav/src/collapse_button.scss index 3dca222cdb1af..fa6f0864e71d6 100644 --- a/packages/shared-ux/page/solution_nav/src/collapse_button.scss +++ b/packages/shared-ux/page/solution_nav/src/collapse_button.scss @@ -35,11 +35,11 @@ opacity: 1 !important; transition-delay: 0s !important; left: 0 !important; - right: 0; + right: auto; top: 0; bottom: 0; height: 100%; - width: 100%; + width: $euiSizeXXL; border-radius: 0; // Keep the icon at the top instead of it getting shifted to the center of the page padding-top: $euiSizeL + $euiSizeS; diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss b/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss index 1e4dfba82d13c..00cfb7b9f927a 100644 --- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss +++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.scss @@ -1,17 +1,8 @@ +// TODO: Can now be converted to Emotion .kbnSolutionNav__sidebar { overflow: hidden; - // Temporary hack till the sizing is changed directly in EUI - min-width: 248px; @include euiCanAnimate { transition: min-width $euiAnimSpeedFast $euiAnimSlightResistance; } - - &.kbnSolutionNav__sidebar--shrink { - min-width: $euiSizeXXL; - } - - .kbnPageTemplate--centeredBody & { - border-right: $euiBorderThin; - } } diff --git a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx index 5b6fc9e083dbe..ef94ed89ac873 100644 --- a/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx +++ b/packages/shared-ux/page/solution_nav/src/with_solution_nav.tsx @@ -6,9 +6,9 @@ * Side Public License, v 1. */ -import React, { ComponentType, useState } from 'react'; +import React, { ComponentType, ReactNode, useState } from 'react'; import classNames from 'classnames'; -import { useIsWithinBreakpoints, EuiPageTemplateProps } from '@elastic/eui'; +import { useIsWithinBreakpoints, useEuiTheme, EuiPageSidebarProps } from '@elastic/eui'; import { SolutionNav, SolutionNavProps } from './solution_nav'; import './with_solution_nav.scss'; @@ -18,31 +18,30 @@ function getDisplayName(Component: ComponentType) { return Component.displayName || Component.name || 'UnnamedComponent'; } -type TemplateProps = Pick< - EuiPageTemplateProps, - 'pageSideBar' | 'pageSideBarProps' | 'template' | 'children' ->; - -type ComponentProps = TemplateProps & { - isEmptyState?: boolean; -}; +// TODO: Would be nice to grab these from KibanaPageTemplate or vice-versa +interface TemplateProps { + pageSideBar?: ReactNode; + pageSideBarProps?: Partial; + children?: ReactNode; +} type Props

= P & - ComponentProps & { + TemplateProps & { solutionNav: SolutionNavProps; }; const SOLUTION_NAV_COLLAPSED_KEY = 'solutionNavIsCollapsed'; -export const withSolutionNav =

(WrappedComponent: ComponentType

) => { +export const withSolutionNav =

(WrappedComponent: ComponentType

) => { const WithSolutionNav = (props: Props

) => { const isMediumBreakpoint = useIsWithinBreakpoints(['m']); const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']); const [isSideNavOpenOnDesktop, setisSideNavOpenOnDesktop] = useState( !JSON.parse(String(localStorage.getItem(SOLUTION_NAV_COLLAPSED_KEY))) ); - const { solutionNav, ...propagatedProps } = props; - const { children, isEmptyState, template } = propagatedProps; + + const { solutionNav, children, ...propagatedProps } = props; + const { euiTheme } = useEuiTheme(); const toggleOpenOnDesktop = () => { setisSideNavOpenOnDesktop(!isSideNavOpenOnDesktop); @@ -52,17 +51,17 @@ export const withSolutionNav =

(WrappedComponent: Comp // Default navigation to allow collapsing const { canBeCollapsed = true } = solutionNav; + const isSidebarShrunk = + isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop); const sideBarClasses = classNames( 'kbnSolutionNav__sidebar', + 'kbnStickyMenu', { - 'kbnSolutionNav__sidebar--shrink': - isMediumBreakpoint || (canBeCollapsed && isLargerBreakpoint && !isSideNavOpenOnDesktop), + 'kbnSolutionNav__sidebar--shrink': isSidebarShrunk, }, props.pageSideBarProps?.className ); - const templateToUse = isEmptyState && !template ? 'centeredContent' : template; - const pageSideBar = ( (WrappedComponent: Comp /> ); - const pageSideBarProps = { + const pageSideBarProps: TemplateProps['pageSideBarProps'] = { paddingSize: 'none' as 'none', ...props.pageSideBarProps, + minWidth: isSidebarShrunk ? euiTheme.size.xxl : undefined, className: sideBarClasses, }; @@ -83,7 +83,6 @@ export const withSolutionNav =

(WrappedComponent: Comp ...(propagatedProps as P), pageSideBar, pageSideBarProps, - template: templateToUse, }} > {children} diff --git a/src/core/public/core_app/errors/error_application.tsx b/src/core/public/core_app/errors/error_application.tsx index fb9420319b350..69c257e84e1a5 100644 --- a/src/core/public/core_app/errors/error_application.tsx +++ b/src/core/public/core_app/errors/error_application.tsx @@ -12,7 +12,12 @@ import type { History } from 'history'; import { i18n } from '@kbn/i18n'; import { I18nProvider } from '@kbn/i18n-react'; -import { EuiEmptyPrompt, EuiPage, EuiPageBody, EuiPageContent } from '@elastic/eui'; +import { + EuiEmptyPrompt, + EuiPage, + EuiPageBody, + EuiPageContent_Deprecated as EuiPageContent, +} from '@elastic/eui'; import { CoreThemeProvider } from '@kbn/core-theme-browser-internal'; import type { IBasePath } from '@kbn/core-http-browser'; import type { AppMountParameters } from '@kbn/core-application-browser'; diff --git a/src/core/public/core_app/status/components/status_section.tsx b/src/core/public/core_app/status/components/status_section.tsx index 5cfa0e34971a6..15a5f65be59b1 100644 --- a/src/core/public/core_app/status/components/status_section.tsx +++ b/src/core/public/core_app/status/components/status_section.tsx @@ -7,7 +7,13 @@ */ import React, { FC, useMemo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiSpacer, EuiTitle } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiPageContent_Deprecated as EuiPageContent, + EuiSpacer, + EuiTitle, +} from '@elastic/eui'; import { StatusTable } from './status_table'; import { FormattedStatus, getHighestStatus } from '../lib'; import { StatusBadge } from './status_badge'; diff --git a/src/core/public/core_app/status/components/version_header.tsx b/src/core/public/core_app/status/components/version_header.tsx index b07dc26c9dd02..c9b4109cf1f78 100644 --- a/src/core/public/core_app/status/components/version_header.tsx +++ b/src/core/public/core_app/status/components/version_header.tsx @@ -7,7 +7,12 @@ */ import React, { FC } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiPageContent, EuiText } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiPageContent_Deprecated as EuiPageContent, + EuiText, +} from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import type { ServerVersion } from '../../../../types/status'; diff --git a/src/core/public/styles/rendering/_base.scss b/src/core/public/styles/rendering/_base.scss index 80638711f0335..b64595e69a791 100644 --- a/src/core/public/styles/rendering/_base.scss +++ b/src/core/public/styles/rendering/_base.scss @@ -49,6 +49,12 @@ max-height: calc(100vh - #{$headerHeight + $euiSize}); top: $headerHeight + $euiSize; } + + .kbnSolutionNav__sidebar { + position: sticky; + max-height: calc(100vh - #{$headerHeight}); + top: $headerHeight; + } } } diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts index 6b455b28166ad..fb7416baf0d03 100644 --- a/src/dev/license_checker/config.ts +++ b/src/dev/license_checker/config.ts @@ -84,6 +84,6 @@ 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.3.3': ['Elastic License 2.0'], - '@elastic/eui@62.2.4': ['SSPL-1.0 OR Elastic License 2.0'], + '@elastic/eui@63.0.6': ['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 }; diff --git a/src/plugins/console/public/application/components/editor_content_spinner.tsx b/src/plugins/console/public/application/components/editor_content_spinner.tsx index bc06bde509623..9a819b7fd90e9 100644 --- a/src/plugins/console/public/application/components/editor_content_spinner.tsx +++ b/src/plugins/console/public/application/components/editor_content_spinner.tsx @@ -7,7 +7,7 @@ */ import React, { FunctionComponent } from 'react'; -import { EuiLoadingContent, EuiPageContent } from '@elastic/eui'; +import { EuiLoadingContent, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui'; export const EditorContentSpinner: FunctionComponent = () => { return ( diff --git a/src/plugins/console/public/application/containers/main/main.tsx b/src/plugins/console/public/application/containers/main/main.tsx index 889c9d352bc5d..74956a08d4194 100644 --- a/src/plugins/console/public/application/containers/main/main.tsx +++ b/src/plugins/console/public/application/containers/main/main.tsx @@ -8,7 +8,12 @@ import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiPageContent } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiPageContent_Deprecated as EuiPageContent, +} from '@elastic/eui'; import { ConsoleHistory } from '../console_history'; import { Editor } from '../editor'; import { Settings } from '../settings'; diff --git a/src/plugins/dashboard/public/application/dashboard_app_no_data.tsx b/src/plugins/dashboard/public/application/dashboard_app_no_data.tsx index 72ffa3f9fdb7f..7cd43e635b495 100644 --- a/src/plugins/dashboard/public/application/dashboard_app_no_data.tsx +++ b/src/plugins/dashboard/public/application/dashboard_app_no_data.tsx @@ -33,7 +33,7 @@ export const DashboardAppNoDataPage = ({ }; return ( - ; + ); }; diff --git a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap index b075e079466be..6ccb34d7f52c5 100644 --- a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap +++ b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap @@ -32,12 +32,12 @@ exports[`DashboardEmptyScreen renders correctly with edit mode 1`] = ` exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `

- - - + +

-
-
+ + - +
- - + + `; diff --git a/src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx b/src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx index 153c51e5f0894..8630f71f65b3c 100644 --- a/src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx +++ b/src/plugins/data_view_management/public/components/empty_index_list_prompt/empty_index_list_prompt.tsx @@ -10,11 +10,11 @@ import './empty_index_list_prompt.scss'; import React from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { - EuiPageContentHeader, - EuiPageContentHeaderSection, + EuiPageContentHeader_Deprecated as EuiPageContentHeader, + EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection, EuiTitle, - EuiPageContentBody, - EuiPageContent, + EuiPageContentBody_Deprecated as EuiPageContentBody, + EuiPageContent_Deprecated as EuiPageContent, EuiIcon, EuiSpacer, EuiFlexItem, diff --git a/src/plugins/discover/public/application/context/context_app.tsx b/src/plugins/discover/public/application/context/context_app.tsx index 5aeec390be3fe..f44103f70b8dd 100644 --- a/src/plugins/discover/public/application/context/context_app.tsx +++ b/src/plugins/discover/public/application/context/context_app.tsx @@ -10,7 +10,12 @@ import React, { Fragment, memo, useEffect, useRef, useMemo, useCallback } from ' import './context_app.scss'; import classNames from 'classnames'; import { FormattedMessage } from '@kbn/i18n-react'; -import { EuiText, EuiPageContent, EuiPage, EuiSpacer } from '@elastic/eui'; +import { + EuiText, + EuiPageContent_Deprecated as EuiPageContent, + EuiPage, + EuiSpacer, +} from '@elastic/eui'; import { cloneDeep } from 'lodash'; import { DataView, DataViewField } from '@kbn/data-views-plugin/public'; import { useExecutionContext } from '@kbn/kibana-react-plugin/public'; diff --git a/src/plugins/discover/public/application/doc/components/doc.tsx b/src/plugins/discover/public/application/doc/components/doc.tsx index 74cc25f339953..8ec6133b73328 100644 --- a/src/plugins/discover/public/application/doc/components/doc.tsx +++ b/src/plugins/discover/public/application/doc/components/doc.tsx @@ -8,7 +8,13 @@ import React, { useEffect, useRef } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; -import { EuiCallOut, EuiLink, EuiLoadingSpinner, EuiPageContent, EuiPage } from '@elastic/eui'; +import { + EuiCallOut, + EuiLink, + EuiLoadingSpinner, + EuiPageContent_Deprecated as EuiPageContent, + EuiPage, +} from '@elastic/eui'; import type { DataView } from '@kbn/data-views-plugin/public'; import { i18n } from '@kbn/i18n'; import { DocViewer } from '../../../services/doc_views/components/doc_viewer'; diff --git a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx index 4806e8f35a007..97c79647d32e1 100644 --- a/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx +++ b/src/plugins/discover/public/application/main/components/layout/discover_layout.tsx @@ -15,7 +15,7 @@ import { EuiHorizontalRule, EuiPage, EuiPageBody, - EuiPageContent, + EuiPageContent_Deprecated as EuiPageContent, EuiSpacer, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; diff --git a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx index d67f385578365..87c5205170836 100644 --- a/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx +++ b/src/plugins/discover/public/application/main/components/sidebar/discover_sidebar.tsx @@ -18,7 +18,7 @@ import { EuiTitle, EuiSpacer, EuiNotificationBadge, - EuiPageSideBar, + EuiPageSideBar_Deprecated as EuiPageSideBar, useResizeObserver, EuiButton, } from '@elastic/eui'; diff --git a/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx b/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx index 54a75fbd3ee65..c338ee982e62f 100644 --- a/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx +++ b/src/plugins/es_ui_shared/__packages_do_not_import__/authorization/components/page_error.tsx @@ -6,7 +6,11 @@ * Side Public License, v 1. */ -import { EuiSpacer, EuiEmptyPrompt, EuiPageContent } from '@elastic/eui'; +import { + EuiSpacer, + EuiEmptyPrompt, + EuiPageContent_Deprecated as EuiPageContent, +} from '@elastic/eui'; import React from 'react'; // eslint-disable-next-line @kbn/imports/no_boundary_crossing import { APP_WRAPPER_CLASS } from '@kbn/core/public'; diff --git a/src/plugins/es_ui_shared/public/components/page_loading/page_loading.tsx b/src/plugins/es_ui_shared/public/components/page_loading/page_loading.tsx index 2fb99208e58ac..38caa1d817720 100644 --- a/src/plugins/es_ui_shared/public/components/page_loading/page_loading.tsx +++ b/src/plugins/es_ui_shared/public/components/page_loading/page_loading.tsx @@ -7,7 +7,12 @@ */ import React from 'react'; -import { EuiEmptyPrompt, EuiLoadingSpinner, EuiText, EuiPageContent } from '@elastic/eui'; +import { + EuiEmptyPrompt, + EuiLoadingSpinner, + EuiText, + EuiPageContent_Deprecated as EuiPageContent, +} from '@elastic/eui'; export const PageLoading: React.FunctionComponent = ({ children }) => { return ( diff --git a/src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx b/src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx index 09c6986ee252d..119e053312dc8 100644 --- a/src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx +++ b/src/plugins/es_ui_shared/public/components/section_loading/section_loading.tsx @@ -8,14 +8,9 @@ import React from 'react'; -import { - EuiEmptyPrompt, - EuiLoadingSpinner, - EuiText, - EuiFlexGroup, - EuiFlexItem, - EuiTextColor, -} from '@elastic/eui'; +import { EuiLoadingSpinner, EuiText, EuiFlexGroup, EuiFlexItem, EuiTextColor } from '@elastic/eui'; + +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; interface Props { inline?: boolean; @@ -40,7 +35,7 @@ export const SectionLoading: React.FunctionComponent = ({ inline, childre } return ( - } body={{children}} data-test-subj="sectionLoading" diff --git a/src/plugins/home/public/application/components/__snapshots__/home.test.tsx.snap b/src/plugins/home/public/application/components/__snapshots__/home.test.tsx.snap index 43d8f935221b3..3cc05cb41c6f9 100644 --- a/src/plugins/home/public/application/components/__snapshots__/home.test.tsx.snap +++ b/src/plugins/home/public/application/components/__snapshots__/home.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`home change home route should render a link to change the default route in advanced settings if advanced settings is enabled 1`] = ` -, } } - template="empty" + panelled={false} > - + `; exports[`home directories should not render directory entry when showOnHomePage is false 1`] = ` -, } } - template="empty" + panelled={false} > - + `; exports[`home directories should render ADMIN directory entry in "Manage your data" panel 1`] = ` -, } } - template="empty" + panelled={false} > - + `; exports[`home directories should render solutions in the "solution section" 1`] = ` -, } } - template="empty" + panelled={false} > - + `; exports[`home isNewKibanaInstance should safely handle exceptions 1`] = ` -, } } - template="empty" + panelled={false} > - + `; exports[`home isNewKibanaInstance should set isNewKibanaInstance to false when there are index patterns 1`] = ` -, } } - template="empty" + panelled={false} > - + `; exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when there are no index patterns 1`] = ` @@ -379,7 +379,7 @@ exports[`home isNewKibanaInstance should set isNewKibanaInstance to true when th `; exports[`home should render home component 1`] = ` -, } } - template="empty" + panelled={false} > - + `; diff --git a/src/plugins/home/public/application/components/_add_data.scss b/src/plugins/home/public/application/components/_add_data.scss index e69d14b9be41a..638a636421bcb 100644 --- a/src/plugins/home/public/application/components/_add_data.scss +++ b/src/plugins/home/public/application/components/_add_data.scss @@ -1,12 +1,13 @@ .homDataAdd__illustration { display: block; - margin: 0 auto #{-($euiSizeXXL + $euiSizeXS)} auto; + margin-block: 0 #{-($euiSizeXL + $euiSizeXS)}; + margin-inline: auto; @include euiBreakpoint('m', 'l', 'xl') { - margin-bottom: -$euiSizeXXL; + margin-block-end: -$euiSizeXL; } @include euiBreakpoint('l', 'xl') { - width: 80%; + inline-size: 80%; } -} \ No newline at end of file +} diff --git a/src/plugins/home/public/application/components/_solutions_section.scss b/src/plugins/home/public/application/components/_solutions_section.scss index 5b886b0d8bb42..93da045674261 100644 --- a/src/plugins/home/public/application/components/_solutions_section.scss +++ b/src/plugins/home/public/application/components/_solutions_section.scss @@ -1,13 +1,17 @@ +.homSolutions__content { + padding-block-start: 0; +} + .homSolutions__item { @include euiBreakpoint('l', 'xl') { - max-width: calc(33.33% - #{$euiSizeM * 2}); + max-inline-size: calc(33.33% - #{$euiSizeM * 2}); } } .homSolutionPanel { img { background-color: $euiColorPrimary; - max-height: $euiSize * 10; + max-block-size: $euiSize * 10; object-fit: cover; } @@ -22,4 +26,4 @@ &--securitySolution img { background-color: $euiColorSuccess; } -} \ No newline at end of file +} diff --git a/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap b/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap index fcc4b3e8f1d0f..58f9581a1ec91 100644 --- a/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap +++ b/src/plugins/home/public/application/components/add_data/__snapshots__/add_data.test.tsx.snap @@ -1,116 +1,113 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AddData render 1`] = ` - -
+ - - - + +

-

- -

-
- - -

- -

-
- - + +
+ + +

+ +

+
+ + + - - - - - - - - - - - - + + + + - - - - - -
- - - -
-
- -
+ + + + + + + + + + + + + + + `; diff --git a/src/plugins/home/public/application/components/add_data/add_data.tsx b/src/plugins/home/public/application/components/add_data/add_data.tsx index 8946e3e80a217..27f98a85ff4e8 100644 --- a/src/plugins/home/public/application/components/add_data/add_data.tsx +++ b/src/plugins/home/public/application/components/add_data/add_data.tsx @@ -12,12 +12,12 @@ import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, - EuiHorizontalRule, EuiImage, EuiSpacer, EuiText, EuiTitle, } from '@elastic/eui'; +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import { FormattedMessage } from '@kbn/i18n-react'; import { METRIC_TYPE } from '@kbn/analytics'; import { ApplicationStart } from '@kbn/core/public'; @@ -36,99 +36,100 @@ export const AddData: FC = ({ addBasePath, application, isDarkMode }) => const canAccessIntegrations = application.capabilities.navLinks.integrations; if (canAccessIntegrations) { return ( - <> -
- - - -

- -

-
- - + + + + +

+ +

+
- -

- -

-
+ - + +

+ +

+
- - - - {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} - { - trackUiMetric(METRIC_TYPE.CLICK, 'home_tutorial_directory'); - createAppNavigationHandler('/app/integrations/browse')(event); - }} - > - - - - + - - + + + {/* eslint-disable-next-line @elastic/eui/href-or-on-click */} + { + trackUiMetric(METRIC_TYPE.CLICK, 'home_tutorial_directory'); + createAppNavigationHandler('/app/integrations/browse')(event); + }} > - - + + +
- - - - - -
-
+ + + + + - - - -
-
+ + + + + + + - - + + + + + ); } else { return null; diff --git a/src/plugins/home/public/application/components/guided_onboarding/__snapshots__/getting_started.test.tsx.snap b/src/plugins/home/public/application/components/guided_onboarding/__snapshots__/getting_started.test.tsx.snap index 5e18ec73565d7..89105328eec7d 100644 --- a/src/plugins/home/public/application/components/guided_onboarding/__snapshots__/getting_started.test.tsx.snap +++ b/src/plugins/home/public/application/components/guided_onboarding/__snapshots__/getting_started.test.tsx.snap @@ -1,81 +1,88 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`getting started should render getting started component 1`] = ` - -
+ - -

- What would you like to do first? -

-
- - -

- Select a starting point for a quick tour of how Elastic can help you do even more with your data. -

-
- - - - - - - - - - - - - - - - -
- +

+ What would you like to do first? +

+ + + +

+ Select a starting point for a quick tour of how Elastic can help you do even more with your data. +

+
+ + + + + + + + + + + + + + + + +
- No thanks, I’ll explore on my own. - -
-
- + + No thanks, I’ll explore on my own. + +
+ + + `; diff --git a/src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx b/src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx index 9f27a0194a3ca..f3131e63ad393 100644 --- a/src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx +++ b/src/plugins/home/public/application/components/guided_onboarding/getting_started.tsx @@ -12,6 +12,8 @@ import { EuiFlexItem, EuiHorizontalRule, EuiLink, + EuiPageTemplate, + EuiPanel, EuiSpacer, EuiText, EuiTitle, @@ -72,38 +74,40 @@ export const GettingStarted = () => { padding: calc(${euiTheme.size.base}*3) calc(${euiTheme.size.base}*4); `; return ( - -
- -

{title}

-
- - -

{subtitle}

-
- - - - - - - - - - - - - - - - -
- {/* data-test-subj used for FS tracking */} - - {skipText} - -
-
+ + + + +

{title}

+
+ + +

{subtitle}

+
+ + + + + + + + + + + + + + + + +
+ {/* data-test-subj used for FS tracking */} + + {skipText} + +
+
+
); }; diff --git a/src/plugins/home/public/application/components/home.tsx b/src/plugins/home/public/application/components/home.tsx index f3d4fd8e01323..f6b579213d420 100644 --- a/src/plugins/home/public/application/components/home.tsx +++ b/src/plugins/home/public/application/components/home.tsx @@ -10,7 +10,8 @@ import React, { Component } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { METRIC_TYPE } from '@kbn/analytics'; import { i18n } from '@kbn/i18n'; -import { KibanaPageTemplate, OverviewPageFooter } from '@kbn/kibana-react-plugin/public'; +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; +import { OverviewPageFooter } from '@kbn/kibana-react-plugin/public'; import { HOME_APP_BASE_PATH } from '../../../common/constants'; import type { FeatureCatalogueEntry, @@ -143,7 +144,7 @@ export class Home extends Component { bottomBorder: false, pageTitle: , }} - template="empty" + panelled={false} > diff --git a/src/plugins/home/public/application/components/manage_data/__snapshots__/manage_data.test.tsx.snap b/src/plugins/home/public/application/components/manage_data/__snapshots__/manage_data.test.tsx.snap index 401af74231e5d..9d9b35b1f8817 100644 --- a/src/plugins/home/public/application/components/manage_data/__snapshots__/manage_data.test.tsx.snap +++ b/src/plugins/home/public/application/components/manage_data/__snapshots__/manage_data.test.tsx.snap @@ -1,266 +1,260 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ManageData hide dev tools and stack management links if unavailable 1`] = ` - -
+ - - - -

- -

-
-
-
- - + + + + + + + - - - - - - - - - - - - - -
- -
+ + + + + + + + + + + + + `; exports[`ManageData render 1`] = ` - -
+ - - - -

- -

-
-
- + + + + + - - - - - - - - - - + + + + + + + - - - - - - - -
- - + + + + + +
+ + + - - - - - - - - - - - - - -
- -
+ + + + + + + + + + + + + `; exports[`ManageData render null without any features 1`] = `""`; diff --git a/src/plugins/home/public/application/components/manage_data/manage_data.tsx b/src/plugins/home/public/application/components/manage_data/manage_data.tsx index 092d9b2e7a504..9b93d3149c342 100644 --- a/src/plugins/home/public/application/components/manage_data/manage_data.tsx +++ b/src/plugins/home/public/application/components/manage_data/manage_data.tsx @@ -7,14 +7,8 @@ */ import React, { FC, MouseEvent } from 'react'; -import { - EuiButtonEmpty, - EuiFlexGroup, - EuiHorizontalRule, - EuiSpacer, - EuiTitle, - EuiFlexItem, -} from '@elastic/eui'; +import { EuiButtonEmpty, EuiFlexGroup, EuiSpacer, EuiTitle, EuiFlexItem } from '@elastic/eui'; +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import { FormattedMessage } from '@kbn/i18n-react'; import { METRIC_TYPE } from '@kbn/analytics'; import { ApplicationStart } from '@kbn/core/public'; @@ -43,90 +37,88 @@ export const ManageData: FC = ({ addBasePath, application, features }) => application.capabilities.navLinks; return ( - <> -
- - - -

- -

-
-
- - {isDevToolsEnabled || isManagementEnabled ? ( - - - {/* Check if both the Dev Tools UI and the Console UI are enabled. */} - {isDevToolsEnabled && consoleHref !== undefined ? ( - - - - - - - - ) : null} + + + + +

+ +

+
+
- {isManagementEnabled ? ( - - - - - - - - ) : null} -
-
- ) : null} -
+ {isDevToolsEnabled || isManagementEnabled ? ( + + + {/* Check if both the Dev Tools UI and the Console UI are enabled. */} + {isDevToolsEnabled && consoleHref !== undefined ? ( + + + + + + + + ) : null} - + {isManagementEnabled ? ( + + + + + + + + ) : null} + + + ) : null} + - - {features.map((feature) => ( - - { - trackUiMetric(METRIC_TYPE.CLICK, `manage_data_card_${feature.id}`); - createAppNavigationHandler(feature.path)(event); - }} - title={feature.title} - url={addBasePath(feature.path)} - /> - - ))} - -
+ - - + + {features.map((feature) => ( + + { + trackUiMetric(METRIC_TYPE.CLICK, `manage_data_card_${feature.id}`); + createAppNavigationHandler(feature.path)(event); + }} + title={feature.title} + url={addBasePath(feature.path)} + /> + + ))} + + ); } else { return null; diff --git a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solutions_section.test.tsx.snap b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solutions_section.test.tsx.snap index 676745e7f1a52..68a5578b69f1f 100644 --- a/src/plugins/home/public/application/components/solutions_section/__snapshots__/solutions_section.test.tsx.snap +++ b/src/plugins/home/public/application/components/solutions_section/__snapshots__/solutions_section.test.tsx.snap @@ -1,129 +1,133 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SolutionsSection renders a single solution 1`] = ` - -
- -

- -

-
- + +

- - -

- -
+ + + + + + `; exports[`SolutionsSection renders multiple solutions 1`] = ` - -
- -

- -

-
- + +

- - + + + - + - + - -

- -
+ } + /> + + + `; exports[`SolutionsSection renders null if no solutions are available 1`] = `""`; diff --git a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx index 41978b97cd5a3..4d913646437c1 100644 --- a/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx +++ b/src/plugins/home/public/application/components/solutions_section/solutions_section.tsx @@ -7,7 +7,8 @@ */ import React, { FC } from 'react'; -import { EuiFlexGroup, EuiHorizontalRule, EuiScreenReaderOnly } from '@elastic/eui'; +import { EuiFlexGroup, EuiScreenReaderOnly } from '@elastic/eui'; +import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import { FormattedMessage } from '@kbn/i18n-react'; import { SolutionPanel } from './solution_panel'; import { FeatureCatalogueEntry, FeatureCatalogueSolution } from '../../..'; @@ -27,26 +28,28 @@ export const SolutionsSection: FC = ({ addBasePath, solutions }) => { solutions = solutions.sort(sortByOrder); return ( - <> -
- -

- -

-
+ + +

+ +

+
- - {solutions.map((solution) => ( - - ))} - -
- - - + + {solutions.map((solution) => ( + + ))} + + ); } else { return null; diff --git a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap index 7a558339f8c38..6b192533c173c 100644 --- a/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap +++ b/src/plugins/kibana_overview/public/components/overview/__snapshots__/overview.test.tsx.snap @@ -214,6 +214,7 @@ exports[`Overview renders correctly 1`] = ` @@ -914,6 +915,7 @@ exports[`Overview renders correctly without features 1`] = ` @@ -1109,6 +1111,7 @@ exports[`Overview renders correctly without solutions 1`] = ` diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx index 245fcb12c7afd..f87c90a4591d4 100644 --- a/src/plugins/kibana_overview/public/components/overview/overview.tsx +++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx @@ -12,7 +12,6 @@ import { EuiCard, EuiFlexGroup, EuiFlexItem, - EuiHorizontalRule, EuiScreenReaderOnly, EuiSpacer, EuiTitle, @@ -214,45 +213,45 @@ export const Overview: FC = ({ newsFetchResult, solutions, features }) => showDevToolsLink: !!devTools, showManagementLink: !!manageDataFeatures, }), + bottomBorder: true, }} - template="empty" + panelled={false} > - <> -
- -

- -

-
- - {mainApps.length ? ( - <> - - {mainApps.map(renderAppCard)} - - - - - ) : null} - - {remainingApps.length ? ( + + +

+ +

+
+ + {mainApps.length ? ( + <> - {remainingApps.map(renderAppCard)} + {mainApps.map(renderAppCard)} - ) : null} -
- -