[Lens] fix onChange annotation date picker closing the whole config f…

…lyout (#139688)
elastic · Aug 30, 2022 · b70775d · b70775d
1 parent 213496d
commit b70775d
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 12 deletions.
diff --git a/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/...lugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx
@@ -18,15 +18,8 @@ import {
   EuiFlexItem,
   EuiFocusTrap,
 } from '@elastic/eui';
-
 import { i18n } from '@kbn/i18n';
-
-/**
- * The dimension container is set up to close when it detects a click outside it.
- * Use this CSS class to exclude particular elements from this behavior.
- */
-export const DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS =
-  'lensDontCloseDimensionContainerOnClick';
+import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../utils';
 
 function fromExcludedClickTarget(event: Event) {
   for (

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -30,6 +30,7 @@ import {
   ReactExpressionRendererProps,
   ReactExpressionRendererType,
 } from '@kbn/expressions-plugin/public';
+import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../utils';
 import {
   Datasource,
   Visualization,
@@ -63,7 +64,6 @@ import {
   applyChanges,
   selectStagedActiveData,
 } from '../../state_management';
-import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from './config_panel/dimension_container';
 
 const MAX_SUGGESTIONS_DISPLAYED = 5;
 const LOCAL_STORAGE_SUGGESTIONS_PANEL = 'LENS_SUGGESTIONS_PANEL_HIDDEN';

diff --git a/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/...plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -81,9 +81,8 @@ import {
   DatasourceStates,
 } from '../../../state_management';
 import type { LensInspector } from '../../../lens_inspector_service';
-import { inferTimeField } from '../../../utils';
+import { inferTimeField, DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../utils';
 import { setChangesApplied } from '../../../state_management/lens_slice';
-import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../config_panel/dimension_container';
 
 export interface WorkspacePanelProps {
   visualizationMap: VisualizationMap;

diff --git a/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/...lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -12,6 +12,7 @@ import { EuiPageContent, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/e
 import classNames from 'classnames';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { DatasourceMap, FramePublicAPI, VisualizationMap } from '../../../types';
+import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../utils';
 import { NativeRenderer } from '../../../native_renderer';
 import { ChartSwitch } from './chart_switch';
 import { WarningsPopover } from './warnings_popover';
@@ -27,7 +28,6 @@ import {
   selectAutoApplyEnabled,
 } from '../../../state_management';
 import { WorkspaceTitle } from './title';
-import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../config_panel/dimension_container';
 
 export const AUTO_APPLY_DISABLED_STORAGE_KEY = 'autoApplyDisabled';
 

diff --git a/x-pack/plugins/lens/public/utils.ts b/x-pack/plugins/lens/public/utils.ts
@@ -185,3 +185,10 @@ export function inferTimeField(
     })
     .find(Boolean);
 }
+
+/**
+ * The dimension container is set up to close when it detects a click outside it.
+ * Use this CSS class to exclude particular elements from this behavior.
+ */
+export const DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS =
+  'lensDontCloseDimensionContainerOnClick';
diff --git a/...s/public/visualizations/xy/xy_config_panel/annotations_config_panel/annotations_panel.tsx b/...s/public/visualizations/xy/xy_config_panel/annotations_config_panel/annotations_panel.tsx
@@ -38,6 +38,7 @@ import {
 import Color from 'color';
 import { getDataLayers } from '../../visualization_helpers';
 import { FormatFactory } from '../../../../../common';
+import { DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS } from '../../../../utils';
 import {
   DimensionEditorSection,
   NameInput,
@@ -473,6 +474,7 @@ const ConfigPanelRangeDatePicker = ({
           }
         >
           <EuiDatePicker
+            calendarClassName={DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS}
             fullWidth
             showTimeSelect
             selected={value}
@@ -483,6 +485,7 @@ const ConfigPanelRangeDatePicker = ({
         </EuiFormControlLayout>
       ) : (
         <EuiDatePicker
+          calendarClassName={DONT_CLOSE_DIMENSION_CONTAINER_ON_CLICK_CLASS}
           fullWidth
           showTimeSelect
           selected={value}