app file

elastic · Feb 4, 2025 · bf0f334 · bf0f334
1 parent 4490ea4
commit bf0f334
Show file tree

Hide file tree

Showing 11 changed files with 109 additions and 129 deletions.
diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/app.scss b/x-pack/platform/plugins/shared/lens/public/app_plugin/app.scss
diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/app.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/app.tsx
@@ -5,14 +5,14 @@
  * 2.0.
  */
 
-import './app.scss';
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { TimeRange } from '@kbn/es-query';
 import { EuiConfirmModal } from '@elastic/eui';
 import { useExecutionContext, useKibana } from '@kbn/kibana-react-plugin/public';
 import { OnSaveProps } from '@kbn/saved-objects-plugin/public';
 import type { VisualizeFieldContext } from '@kbn/ui-actions-plugin/public';
+import { css } from '@emotion/react';
 import { LensAppProps, LensAppServices } from './types';
 import { LensTopNavMenu } from './lens_top_nav';
 import { AddUserMessages, EditorFrameInstance, Simplify, UserMessagesGetter } from '../types';
@@ -437,7 +437,17 @@ export function App({
 
   return (
     <>
-      <div className="lnsApp" data-test-subj="lnsApp" role="main">
+      <div
+        data-test-subj="lnsApp"
+        role="main"
+        css={css`
+          flex: 1 1 auto;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          overflow: hidden;
+        `}
+      >
         <LensTopNavMenu
           initialInput={initialInput}
           redirectToOrigin={redirectToOrigin}

diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/lens_top_nav.tsx
@@ -17,8 +17,9 @@ import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { DataViewPickerProps } from '@kbn/unified-search-plugin/public';
 import { getManagedContentBadge } from '@kbn/managed-content-badge';
 import moment from 'moment';
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, UseEuiTheme, useEuiBreakpoint } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
+import { SerializedStyles, css } from '@emotion/react';
 import { LENS_APP_LOCATOR } from '../../common/locator/locator';
 import { LENS_APP_NAME } from '../../common/constants';
 import { LensAppServices, LensTopNavActions, LensTopNavMenuProps } from './types';
@@ -102,6 +103,27 @@ function getSaveButtonMeta({
   }
 }
 
+const NavItemWithDividerStyles = ({ euiTheme }: UseEuiTheme) => css`
+  @include euiBreakpoint('m', 'l', 'xl') {
+    margin-right: $euiSizeM;
+    position: relative;
+  }
+  ${useEuiBreakpoint(['m', 'l', 'xl'])} {
+    margin-right: ${euiTheme.size.m};
+    position: relative;
+    &:after {
+      border-right: ${euiTheme.border.thin};
+      bottom: 0;
+      content: '';
+      display: block;
+      pointer-events: none;
+      position: absolute;
+      right: -${euiTheme.size.s};
+      top: 0;
+    }
+  }
+`;
+
 function getLensTopNavConfig(options: {
   isByValueMode: boolean;
   actions: LensTopNavActions;
@@ -123,7 +145,10 @@ function getLensTopNavConfig(options: {
     contextFromEmbeddable,
     isByValueMode,
   } = options;
-  const topNavMenu: TopNavMenuData[] = [];
+
+  const topNavMenu: Array<
+    TopNavMenuData | ({ css: ({ euiTheme }: UseEuiTheme) => SerializedStyles } & TopNavMenuData)
+  > = [];
 
   const showSaveAndReturn = actions.saveAndReturn.visible;
 
@@ -150,13 +175,13 @@ function getLensTopNavConfig(options: {
         values: { contextOriginatingApp },
       }),
       run: actions.goBack.execute,
-      className: 'lnsNavItem__withDivider',
       testId: 'lnsApp_goBackToAppButton',
       description: i18n.translate('xpack.lens.app.goBackLabel', {
         defaultMessage: `Go back to {contextOriginatingApp}`,
         values: { contextOriginatingApp },
       }),
       disableButton: !actions.goBack.enabled,
+      css: NavItemWithDividerStyles,
     });
   }
 
@@ -169,12 +194,12 @@ function getLensTopNavConfig(options: {
       label: exploreDataInDiscoverLabel,
       run: actions.getUnderlyingDataUrl.execute,
       testId: 'lnsApp_openInDiscover',
-      className: 'lnsNavItem__withDivider',
       description: exploreDataInDiscoverLabel,
       disableButton: !actions.getUnderlyingDataUrl.enabled,
       tooltip: actions.getUnderlyingDataUrl.tooltip,
       target: '_blank',
       href: actions.getUnderlyingDataUrl.getLink?.(),
+      css: NavItemWithDividerStyles,
     });
   }
 
@@ -210,11 +235,11 @@ function getLensTopNavConfig(options: {
       defaultMessage: 'Settings',
     }),
     run: actions.openSettings.execute,
-    className: 'lnsNavItem__withDivider',
     testId: 'lnsApp_settingsButton',
     description: i18n.translate('xpack.lens.app.settingsAriaLabel', {
       defaultMessage: 'Open the Lens settings menu',
     }),
+    css: NavItemWithDividerStyles,
   });
 
   if (actions.cancel.visible) {

diff --git a/x-pack/platform/plugins/shared/lens/public/app_plugin/mounter.tsx b/x-pack/platform/plugins/shared/lens/public/app_plugin/mounter.tsx
@@ -398,8 +398,6 @@ export async function mountApp(
     window.dispatchEvent(new HashChangeEvent('hashchange'));
   });
 
-  params.element.classList.add('lnsAppWrapper');
-
   render(
     <KibanaRenderContextProvider {...coreStart}>
       <KibanaContextProvider services={lensServices}>

diff --git a/x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx b/x-pack/platform/plugins/shared/lens/public/datasources/form_based/help_popover.tsx
@@ -16,10 +16,9 @@ import {
   EuiWrappingPopoverProps,
   EuiPopoverTitle,
   EuiText,
-  useEuiTheme,
+  UseEuiTheme,
 } from '@elastic/eui';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-import { css } from '@emotion/react';
 import { StartServices } from '../../types';
 
 export const HelpPopoverButton = ({
@@ -29,43 +28,37 @@ export const HelpPopoverButton = ({
   children: string;
   onClick: EuiLinkButtonProps['onClick'];
 }) => {
-  const { euiTheme } = useEuiTheme();
   return (
     <EuiText size="xs">
       <EuiLink onClick={onClick}>
-        <EuiIcon
-          size="s"
-          type="help"
-          css={css`
-            margin-right: ${euiTheme.size.xs};
-          `}
-        />
-
+        <EuiIcon size="s" type="help" css={HelpPopoverStyles.button} />
         {children}
       </EuiLink>
     </EuiText>
   );
 };
 
 const HelpPopoverContent = ({ title, children }: { title?: string; children: ReactNode }) => {
-  const { euiTheme } = useEuiTheme();
   return (
     <>
       {title && <EuiPopoverTitle paddingSize="m">{title}</EuiPopoverTitle>}
-      <EuiText
-        className="eui-yScroll"
-        size="s"
-        css={css`
-          max-height: 40vh;
-          padding: ${euiTheme.size.m};
-        `}
-      >
+      <EuiText className="eui-yScroll" size="s" css={HelpPopoverStyles.content}>
         {children}
       </EuiText>
     </>
   );
 };
 
+const HelpPopoverStyles = {
+  button: ({ euiTheme }: UseEuiTheme) => `
+    margin-right: ${euiTheme.size.xs};
+  `,
+  content: ({ euiTheme }: UseEuiTheme) => `
+    max-height: 40vh;
+    padding: ${euiTheme.size.m};
+  `,
+};
+
 export const HelpPopover = ({
   anchorPosition,
   button,

diff --git a/...ared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx b/...ared/lens/public/datasources/form_based/operations/definitions/filters/filter_popover.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useState } from 'react';
-import { EuiPopover, EuiSpacer } from '@elastic/eui';
+import { EuiPopover, EuiSpacer, euiTextBreakWord, useEuiFontSize, UseEuiTheme } from '@elastic/eui';
 import type { Query } from '@kbn/es-query';
 // Need to keep it separate to make it work Jest mocks in dimension_panel tests
 // import { QueryInput } from '../../../../shared_components/query_input';
@@ -100,3 +100,13 @@ export const FilterPopover = ({
     </EuiPopover>
   );
 };
+
+export const DraggablePopoverButtonStyles = ({ euiTheme }: UseEuiTheme) => {
+  const euiFontSize = useEuiFontSize('s');
+  return `
+    ${euiTextBreakWord()};
+    ${euiFontSize};
+    min-height: ${euiTheme.size.xl};
+    width: 100%;
+  `;
+};
diff --git a/...gins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx b/...gins/shared/lens/public/datasources/form_based/operations/definitions/filters/filters.tsx
@@ -8,14 +8,7 @@
 import React, { useState } from 'react';
 import { omit } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import {
-  EuiFormRow,
-  EuiLink,
-  euiTextBreakWord,
-  htmlIdGenerator,
-  useEuiFontSize,
-  useEuiTheme,
-} from '@elastic/eui';
+import { EuiFormRow, EuiLink, htmlIdGenerator } from '@elastic/eui';
 import type { Query } from '@kbn/es-query';
 import type { AggFunctionsMapping } from '@kbn/data-plugin/public';
 import { queryFilterToAst } from '@kbn/data-plugin/common';
@@ -26,12 +19,11 @@ import {
   DraggableBucketContainer,
   isQueryValid,
 } from '@kbn/visualization-ui-components';
-import { css } from '@emotion/react';
 import { IndexPattern } from '../../../../../types';
 import { updateColumnParam } from '../../layer_helpers';
 import type { OperationDefinition } from '..';
 import type { BaseIndexPatternColumn } from '../column_types';
-import { FilterPopover } from './filter_popover';
+import { DraggablePopoverButtonStyles, FilterPopover } from './filter_popover';
 import { TermsIndexPatternColumn } from '../terms';
 import { isColumnOfType } from '../helpers';
 
@@ -188,8 +180,6 @@ export const FilterList = ({
   indexPattern: IndexPattern;
   defaultQuery: Filter;
 }) => {
-  const { euiTheme } = useEuiTheme();
-  const euiFontSize = useEuiFontSize('s');
   const [activeFilterId, setActiveFilterId] = useState('');
   const [localFilters, setLocalFilters] = useState(() =>
     filters.map((filter) => ({ ...filter, id: generateId() }))
@@ -284,12 +274,7 @@ export const FilterList = ({
                     title={i18n.translate('xpack.lens.indexPattern.filters.clickToEdit', {
                       defaultMessage: 'Click to edit',
                     })}
-                    css={css`
-                      ${euiTextBreakWord()};
-                      ${euiFontSize};
-                      min-height: ${euiTheme.size.xl};
-                      width: 100%;
-                    `}
+                    css={DraggablePopoverButtonStyles}
                   >
                     {filter.label || (filter.input.query as string) || defaultLabel}
                   </EuiLink>

diff --git a/...ared/lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.tsx b/...ared/lens/public/datasources/form_based/operations/definitions/ranges/advanced_editor.tsx
@@ -19,9 +19,6 @@ import {
   EuiToolTip,
   htmlIdGenerator,
   keys,
-  euiTextBreakWord,
-  useEuiTheme,
-  useEuiFontSize,
 } from '@elastic/eui';
 import { IFieldFormat } from '@kbn/field-formats-plugin/common';
 import {
@@ -35,6 +32,7 @@ import { RangeTypeLens, isValidRange } from './ranges';
 import { FROM_PLACEHOLDER, TO_PLACEHOLDER, TYPING_DEBOUNCE_TIME } from './constants';
 import { LabelInput } from '../shared_components';
 import { isValidNumber } from '../helpers';
+import { DraggablePopoverButtonStyles } from '../filters/filter_popover';
 
 const generateId = htmlIdGenerator();
 
@@ -242,9 +240,6 @@ export const AdvancedRangeEditor = ({
     setActiveRangeId(newRangeId);
   }, [localRanges]);
 
-  const { euiTheme } = useEuiTheme();
-  const euiFontSize = useEuiFontSize('s');
-
   const changeActiveRange = (rangeId: string) => {
     let newActiveRangeId = rangeId;
     if (activeRangeId === rangeId) {
@@ -313,12 +308,7 @@ export const AdvancedRangeEditor = ({
                     color="text"
                     onClick={() => changeActiveRange(range.id)}
                     data-test-subj="dataView-ranges-popover-trigger"
-                    css={css`
-                      ${euiTextBreakWord()};
-                      ${euiFontSize};
-                      min-height: ${euiTheme.size.xl};
-                      width: 100%;
-                    `}
+                    css={DraggablePopoverButtonStyles}
                   >
                     <EuiText
                       size="s"