From a928f28e9a0c3771ee5ba3a0e1d378ccab76b8d0 Mon Sep 17 00:00:00 2001 From: Nathan Reese Date: Wed, 15 Jan 2025 10:22:00 -0700 Subject: [PATCH] remove SCSS imports from presentation_panel page load bundle (#206533) * removes SCSS import from presentation_panel * Removes strings file to avoid importing all strings in page load bundle. --- packages/kbn-optimizer/limits.yml | 4 +- .../panel_component/_presentation_panel.scss | 9 --- .../presentation_panel_header.tsx | 14 ++++- .../presentation_panel_hover_actions.tsx | 19 +++++- .../panel_header/presentation_panel_title.tsx | 11 +++- .../panel_component/presentation_panel.tsx | 17 ++++-- .../presentation_panel_error_internal.tsx | 9 ++- .../presentation_panel_internal.tsx | 7 ++- .../presentation_panel_strings.ts | 61 ------------------- .../panel_component/use_panel_error_css.ts | 22 +++++++ 10 files changed, 88 insertions(+), 85 deletions(-) delete mode 100644 src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_strings.ts create mode 100644 src/platform/plugins/private/presentation_panel/public/panel_component/use_panel_error_css.ts diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml index 2ea536635c01f..bce627ab05358 100644 --- a/packages/kbn-optimizer/limits.yml +++ b/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 diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/_presentation_panel.scss b/src/platform/plugins/private/presentation_panel/public/panel_component/_presentation_panel.scss index 52e7615308fdd..80397a6f91772 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/_presentation_panel.scss +++ b/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; diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_header.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_header.tsx index 74b88cd369cf1..c66e8c986a218 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_header.tsx +++ b/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 = { api: ApiType; headerId: string; diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx index 59ac3b46ac954..f7878c13f436f 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_hover_actions.tsx +++ b/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', diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx index ef819c427c765..2a3ef95a2e228 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/panel_header/presentation_panel_title.tsx +++ b/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(document, 'mousemove')); const createDocumentMouseUpListener = once(() => fromEvent(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} diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx index 4d2c60f951eed..f16d30158cab3 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel.tsx +++ b/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 ( {PanelError ? ( - + ) : ( - value?.loadErrorReason ?? getErrorLoadingPanel() + value?.loadErrorReason ?? errorLoadingPanel )} ); diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx index 7f485621820c2..244dbba2449d2 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_error_internal.tsx +++ b/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] ); diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_internal.tsx b/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_internal.tsx index 5ba645e245803..2ae91b989921d 100644 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_internal.tsx +++ b/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) => { + const panelErrorCss = usePanelErrorCss(); const [api, setApi] = useState(null); const headerId = useMemo(() => htmlIdGenerator()(), []); @@ -143,7 +147,8 @@ export const PresentationPanelInternal = < {blockingError && api && ( diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_strings.ts b/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_strings.ts deleted file mode 100644 index 589c43164d399..0000000000000 --- a/src/platform/plugins/private/presentation_panel/public/panel_component/presentation_panel_strings.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* - * 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 { i18n } from '@kbn/i18n'; - -export const placeholderTitle = i18n.translate('presentationPanel.placeholderTitle', { - defaultMessage: '[No Title]', -}); - -export const getAriaLabelForTitle = (title?: string) => { - if (title) { - return i18n.translate('presentationPanel.enhancedAriaLabel', { - defaultMessage: 'Panel: {title}', - values: { title: title || placeholderTitle }, - }); - } - return i18n.translate('presentationPanel.ariaLabel', { - defaultMessage: 'Panel', - }); -}; - -export const getErrorCallToAction = (title: string) => - i18n.translate('presentationPanel.error.editButton', { - defaultMessage: 'Edit {value}', - values: { value: title }, - }); - -export const getErrorLoadingPanel = () => - i18n.translate('presentationPanel.error.errorWhenLoadingPanel', { - defaultMessage: 'An error occurred while loading this panel.', - }); - -export const getEditTitleAriaLabel = (title?: string) => - i18n.translate('presentationPanel.header.titleAriaLabel', { - defaultMessage: 'Click to edit title: {title}', - values: { title: title || placeholderTitle }, - }); - -export 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', - }); -}; diff --git a/src/platform/plugins/private/presentation_panel/public/panel_component/use_panel_error_css.ts b/src/platform/plugins/private/presentation_panel/public/panel_component/use_panel_error_css.ts new file mode 100644 index 0000000000000..5349970e1f3d5 --- /dev/null +++ b/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', + }, + }); +};