remove SCSS imports from presentation_panel page load bundle (elastic…

…#206533)

* removes SCSS import from presentation_panel
* Removes strings file to avoid importing all strings in page load
bundle.

packages/kbn-optimizer/limits.yml

@@ -122,8 +122,8 @@ pageLoadAssetSize:
   observabilityShared: 111036
   osquery: 107090
   painlessLab: 179748
-  presentationPanel: 55463
-  presentationUtil: 58834
+  presentationPanel: 11468
+  presentationUtil: 33186
   productDocBase: 22500
   profiling: 36694
   remoteClusters: 51327

src/platform/plugins/private/presentation_panel/public/panel_component/_presentation_panel.scss

@@ -114,15 +114,6 @@
 
 // LOADING and ERRORS
 
-.embPanel__error {
-  padding: $euiSizeL;
-
-  & > * {
-    max-height: 100%;
-    overflow: auto;
-  }
-}
-
 .embPanel__label {
   position: absolute;
   padding-left: $euiSizeS;

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_header.tsx

@@ -9,13 +9,25 @@
 
 import { EuiScreenReaderOnly } from '@elastic/eui';
 import { ViewMode } from '@kbn/presentation-publishing';
+import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
 import React, { useCallback } from 'react';
-import { getAriaLabelForTitle } from '../presentation_panel_strings';
+import { placeholderTitle } from './presentation_panel_title';
 import { DefaultPresentationPanelApi, PresentationPanelInternalProps } from '../types';
 import { PresentationPanelTitle } from './presentation_panel_title';
 import { usePresentationPanelHeaderActions } from './use_presentation_panel_header_actions';
 
+const getAriaLabelForTitle = (title?: string) => {
+  return title
+    ? i18n.translate('presentationPanel.enhancedAriaLabel', {
+        defaultMessage: 'Panel: {title}',
+        values: { title: title || placeholderTitle },
+      })
+    : i18n.translate('presentationPanel.ariaLabel', {
+        defaultMessage: 'Panel',
+      });
+};
+
 export type PresentationPanelHeaderProps<ApiType extends DefaultPresentationPanelApi> = {
   api: ApiType;
   headerId: string;

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx

@@ -50,10 +50,27 @@ import {
   panelNotificationTrigger,
   PANEL_NOTIFICATION_TRIGGER,
 } from '../../panel_actions';
-import { getContextMenuAriaLabel } from '../presentation_panel_strings';
 import { DefaultPresentationPanelApi, PresentationPanelInternalProps } from '../types';
 import { AnyApiAction } from '../../panel_actions/types';
 
+const getContextMenuAriaLabel = (title?: string, index?: number) => {
+  if (title) {
+    return i18n.translate('presentationPanel.contextMenu.ariaLabelWithTitle', {
+      defaultMessage: 'Panel options for {title}',
+      values: { title },
+    });
+  }
+  if (index) {
+    return i18n.translate('presentationPanel.contextMenu.ariaLabelWithIndex', {
+      defaultMessage: 'Options for panel {index}',
+      values: { index },
+    });
+  }
+  return i18n.translate('presentationPanel.contextMenu.ariaLabel', {
+    defaultMessage: 'Panel options',
+  });
+};
+
 const QUICK_ACTION_IDS = {
   edit: [
     'editPanel',

src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx

@@ -24,14 +24,18 @@ import {
   repeatWhen,
 } from 'rxjs';
 
+import { i18n } from '@kbn/i18n';
 import { ViewMode } from '@kbn/presentation-publishing';
-import { getEditTitleAriaLabel, placeholderTitle } from '../presentation_panel_strings';
 import {
   CustomizePanelActionApi,
   isApiCompatibleWithCustomizePanelAction,
 } from '../../panel_actions/customize_panel_action';
 import { openCustomizePanelFlyout } from '../../panel_actions/customize_panel_action/open_customize_panel';
 
+export const placeholderTitle = i18n.translate('presentationPanel.placeholderTitle', {
+  defaultMessage: '[No Title]',
+});
+
 const createDocumentMouseMoveListener = once(() => fromEvent<MouseEvent>(document, 'mousemove'));
 const createDocumentMouseUpListener = once(() => fromEvent<MouseEvent>(document, 'mouseup'));
 
@@ -107,7 +111,10 @@ export const PresentationPanelTitle = ({
         color="text"
         ref={setPanelTitleElmRef}
         className={titleClassNames}
-        aria-label={getEditTitleAriaLabel(panelTitle)}
+        aria-label={i18n.translate('presentationPanel.header.titleAriaLabel', {
+          defaultMessage: 'Click to edit title: {title}',
+          values: { title: panelTitle ?? placeholderTitle },
+        })}
         data-test-subj={'embeddablePanelTitleLink'}
       >
         {panelTitle || placeholderTitle}

src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx

@@ -7,17 +7,20 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './_presentation_panel.scss';
-
 import { EuiErrorBoundary, EuiFlexGroup, useEuiTheme } from '@elastic/eui';
 import { PanelLoader } from '@kbn/panel-loader';
 import { isPromise } from '@kbn/std';
 import React from 'react';
 import useAsync from 'react-use/lib/useAsync';
 import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
 import { untilPluginStartServicesReady } from '../kibana_services';
 import type { DefaultPresentationPanelApi, PresentationPanelProps } from './types';
-import { getErrorLoadingPanel } from './presentation_panel_strings';
+import { usePanelErrorCss } from './use_panel_error_css';
+
+const errorLoadingPanel = i18n.translate('presentationPanel.error.errorWhenLoadingPanel', {
+  defaultMessage: 'An error occurred while loading this panel.',
+});
 
 export const PresentationPanel = <
   ApiType extends DefaultPresentationPanelApi = DefaultPresentationPanelApi,
@@ -27,6 +30,7 @@ export const PresentationPanel = <
     hidePanelChrome?: boolean;
   }
 ) => {
+  const panelErrorCss = usePanelErrorCss();
   const { Component, hidePanelChrome, ...passThroughProps } = props;
   const { euiTheme } = useEuiTheme();
   const { loading, value } = useAsync(async () => {
@@ -88,14 +92,15 @@ export const PresentationPanel = <
     return (
       <EuiFlexGroup
         alignItems="center"
-        className="eui-fullHeight embPanel__error"
+        css={panelErrorCss}
+        className="eui-fullHeight"
         data-test-subj="embeddableError"
         justifyContent="center"
       >
         {PanelError ? (
-          <PanelError error={new Error(value?.loadErrorReason ?? getErrorLoadingPanel())} />
+          <PanelError error={new Error(value?.loadErrorReason ?? errorLoadingPanel)} />
         ) : (
-          value?.loadErrorReason ?? getErrorLoadingPanel()
+          value?.loadErrorReason ?? errorLoadingPanel
         )}
       </EuiFlexGroup>
     );

src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx

@@ -18,7 +18,6 @@ import { Subscription } from 'rxjs';
 import { i18n } from '@kbn/i18n';
 import { useErrorTextStyle } from '@kbn/react-hooks';
 import { ActionExecutionMeta } from '@kbn/ui-actions-plugin/public';
-import { getErrorCallToAction } from './presentation_panel_strings';
 import { DefaultPresentationPanelApi } from './types';
 import { uiActions } from '../kibana_services';
 import { executeEditPanelAction } from '../panel_actions/edit_panel_action/execute_edit_action';
@@ -65,7 +64,13 @@ export const PresentationPanelErrorInternal = ({ api, error }: PresentationPanel
 
   const panelTitle = useStateFromPublishingSubject(api?.panelTitle);
   const ariaLabel = useMemo(
-    () => (panelTitle ? getErrorCallToAction(panelTitle) : label),
+    () =>
+      panelTitle
+        ? i18n.translate('presentationPanel.error.editButton', {
+            defaultMessage: 'Edit {value}',
+            values: { value: panelTitle },
+          })
+        : label,
     [label, panelTitle]
   );
 

src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_internal.tsx

@@ -7,6 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import './_presentation_panel.scss';
+
 import { EuiErrorBoundary, EuiFlexGroup, EuiPanel, htmlIdGenerator } from '@elastic/eui';
 import { PanelLoader } from '@kbn/panel-loader';
 import {
@@ -20,6 +22,7 @@ import { PresentationPanelHeader } from './panel_header/presentation_panel_heade
 import { PresentationPanelHoverActions } from './panel_header/presentation_panel_hover_actions';
 import { PresentationPanelErrorInternal } from './presentation_panel_error_internal';
 import { DefaultPresentationPanelApi, PresentationPanelInternalProps } from './types';
+import { usePanelErrorCss } from './use_panel_error_css';
 
 export const PresentationPanelInternal = <
   ApiType extends DefaultPresentationPanelApi = DefaultPresentationPanelApi,
@@ -40,6 +43,7 @@ export const PresentationPanelInternal = <
 
   setDragHandles,
 }: PresentationPanelInternalProps<ApiType, ComponentPropsType>) => {
+  const panelErrorCss = usePanelErrorCss();
   const [api, setApi] = useState<ApiType | null>(null);
   const headerId = useMemo(() => htmlIdGenerator()(), []);
 
@@ -143,7 +147,8 @@ export const PresentationPanelInternal = <
         {blockingError && api && (
           <EuiFlexGroup
             alignItems="center"
-            className="eui-fullHeight embPanel__error"
+            css={panelErrorCss}
+            className="eui-fullHeight"
             data-test-subj="embeddableError"
             justifyContent="center"
           >

src/platform/plugins/private/presentation_panel/public/panel_component/use_panel_error_css.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const usePanelErrorCss = () => {
+  const euiTheme = useEuiTheme();
+  return css({
+    padding: euiTheme.euiTheme.size.l,
+    '& > *': {
+      maxHeight: '100%',
+      overflow: 'auto',
+    },
+  });
+};