From 7ddae8551579f8d0cab6c2380104ce82173e10fd Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Mon, 15 May 2023 09:02:27 -0600 Subject: [PATCH] fix console errors in inspector (#156894) Steps to view problem * install sample data set * Open lens visualization * Open inspector. Notice console errors Screen Shot 2023-05-05 at 11 03 25 AM https://github.com/elastic/eui/pull/6566 removed `closeButtonAriaLabel` prop from [EuiFlyout](https://elastic.github.io/eui/#/layout/flyout) EUI 75.0.0 (Effecting 8.8 and 8.9). FlyoutService spreads options into `EuiFlyout`, resulting in `closeButtonAriaLabel` getting added to dom and causing error. `OverlayFlyoutOpenOptions` type added by https://github.com/elastic/kibana/issues/37894. I replaced `OverlayFlyoutOpenOptions` with `EuiFlyoutProps` to make it more clear what props are accepted and provide stronger typing that stays in sync with EUI typings --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit b803ba9d7b69250d8bfb0567919128f954c1e935) --- .../overlays/core-overlays-browser/src/flyout.ts | 16 +++------------- src/plugins/inspector/public/plugin.tsx | 2 +- .../overlays/create_react_overlays.test.tsx | 4 ++-- .../log_categorization/show_flyout.tsx | 2 +- .../workspace_layout/workspace_top_nav_menu.tsx | 8 +++++--- .../embeddables/common/resolve_job_selection.tsx | 2 +- .../job_creation/common/create_flyout.tsx | 1 - 7 files changed, 13 insertions(+), 22 deletions(-) diff --git a/packages/core/overlays/core-overlays-browser/src/flyout.ts b/packages/core/overlays/core-overlays-browser/src/flyout.ts index efa4ca7a5c564..23e86c08e4434 100644 --- a/packages/core/overlays/core-overlays-browser/src/flyout.ts +++ b/packages/core/overlays/core-overlays-browser/src/flyout.ts @@ -5,7 +5,7 @@ * in compliance with, at your election, the Elastic License 2.0 or the Server * Side Public License, v 1. */ -import type { EuiFlyoutSize, EuiOverlayMaskProps } from '@elastic/eui'; +import type { EuiFlyoutProps } from '@elastic/eui'; import type { MountPoint, OverlayRef } from '@kbn/core-mount-utils-browser'; /** @@ -28,20 +28,10 @@ export interface OverlayFlyoutStart { /** * @public */ -export interface OverlayFlyoutOpenOptions { - className?: string; - closeButtonAriaLabel?: string; - ownFocus?: boolean; - 'data-test-subj'?: string; - 'aria-label'?: string; - size?: EuiFlyoutSize; - maxWidth?: boolean | number | string; - hideCloseButton?: boolean; - outsideClickCloses?: boolean; - maskProps?: EuiOverlayMaskProps; +export type OverlayFlyoutOpenOptions = Omit & { /** * EuiFlyout onClose handler. * If provided the consumer is responsible for calling flyout.close() to close the flyout; */ onClose?: (flyout: OverlayRef) => void; -} +}; diff --git a/src/plugins/inspector/public/plugin.tsx b/src/plugins/inspector/public/plugin.tsx index 6842a271e9819..0c6ce20105be6 100644 --- a/src/plugins/inspector/public/plugin.tsx +++ b/src/plugins/inspector/public/plugin.tsx @@ -111,7 +111,7 @@ export class InspectorPublicPlugin implements Plugin { ), { 'data-test-subj': 'inspectorPanel', - closeButtonAriaLabel: closeButtonLabel, + closeButtonProps: { 'aria-label': closeButtonLabel }, } ); }; diff --git a/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx b/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx index 85be2c2a50514..4f5b81dbc8692 100644 --- a/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx +++ b/src/plugins/kibana_react/public/overlays/create_react_overlays.test.tsx @@ -69,12 +69,12 @@ test('passes through flyout options when opening flyout', () => { overlays.openFlyout(<>foo, { 'data-test-subj': 'foo', - closeButtonAriaLabel: 'bar', + closeButtonProps: { 'aria-label': 'bar' }, }); expect(coreOverlays.openFlyout.mock.calls[0][1]).toEqual({ 'data-test-subj': 'foo', - closeButtonAriaLabel: 'bar', + closeButtonProps: { 'aria-label': 'bar' }, }); }); diff --git a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx b/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx index 1a1f60a75f9e7..16ef28ef75fc0 100644 --- a/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx +++ b/x-pack/plugins/aiops/public/components/log_categorization/show_flyout.tsx @@ -85,7 +85,7 @@ export async function showCategorizeFlyout( { 'data-test-subj': 'aiopsCategorizeFlyout', ownFocus: true, - closeButtonAriaLabel: 'aiopsCategorizeFlyout', + closeButtonProps: { 'aria-label': 'aiopsCategorizeFlyout' }, onClose: onFlyoutClose, size: 'l', } diff --git a/x-pack/plugins/graph/public/components/workspace_layout/workspace_top_nav_menu.tsx b/x-pack/plugins/graph/public/components/workspace_layout/workspace_top_nav_menu.tsx index bf6e9cb2adde0..99ec4a3d5ce5f 100644 --- a/x-pack/plugins/graph/public/components/workspace_layout/workspace_top_nav_menu.tsx +++ b/x-pack/plugins/graph/public/components/workspace_layout/workspace_top_nav_menu.tsx @@ -171,9 +171,11 @@ export const WorkspaceTopNavMenu = (props: WorkspaceTopNavMenuProps) => { ), { size: 'm', - closeButtonAriaLabel: i18n.translate('xpack.graph.settings.closeLabel', { - defaultMessage: 'Close', - }), + closeButtonProps: { + 'aria-label': i18n.translate('xpack.graph.settings.closeLabel', { + defaultMessage: 'Close', + }), + }, 'data-test-subj': 'graphSettingsFlyout', ownFocus: true, className: 'gphSettingsFlyout', diff --git a/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx b/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx index 61512ff46a66d..f1b84a7d046c0 100644 --- a/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx +++ b/x-pack/plugins/ml/public/embeddables/common/resolve_job_selection.tsx @@ -92,7 +92,7 @@ export async function resolveJobSelection( { 'data-test-subj': 'mlFlyoutJobSelector', ownFocus: true, - closeButtonAriaLabel: 'jobSelectorFlyout', + closeButtonProps: { 'aria-label': 'jobSelectorFlyout' }, } ); diff --git a/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx b/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx index 1bbf8c18cf25c..a0b38bbb1e849 100644 --- a/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx +++ b/x-pack/plugins/ml/public/embeddables/job_creation/common/create_flyout.tsx @@ -71,7 +71,6 @@ export function createFlyout( 'data-test-subj': 'mlFlyoutLayerSelector', ownFocus: true, onClose: onFlyoutClose, - // @ts-expect-error should take any number/string compatible with the CSS width attribute size: '35vw', } );