[8.8] fix console errors in inspector (#156894) (#157748)

# Backport This will backport the following commits from `main` to `8.8`: - [fix console errors in inspector (#156894)](https://github.com/elastic/kibana/pull/156894)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Nathan Reese <reese.nathan@elastic.co>
2025-04-24 01:38:56 -04:00 · 2023-05-15 12:16:17 -04:00 · 2023-05-15 12:16:17 -04:00 · 7a623a822f
commit 7a623a822f
parent 42593d86f4
7 changed files with 13 additions and 22 deletions
--- 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<EuiFlyoutProps, 'onClose'> & {
  /**
   * EuiFlyout onClose handler.
   * If provided the consumer is responsible for calling flyout.close() to close the flyout;
   */
  onClose?: (flyout: OverlayRef) => void;
-}
+};
--- a/src/plugins/inspector/public/plugin.tsx
+++ b/src/plugins/inspector/public/plugin.tsx
@ -111,7 +111,7 @@ export class InspectorPublicPlugin implements Plugin<Setup, Start> {
        ),
        {
          'data-test-subj': 'inspectorPanel',
-          closeButtonAriaLabel: closeButtonLabel,
+          closeButtonProps: { 'aria-label': closeButtonLabel },
        }
      );
    };
--- 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' },
  });
 });

--- 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',
        }
--- 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',
--- 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' },
        }
      );

--- 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',
        }
      );