[Lens] Hide tooltips while dragging dimensions (#122198)

elastic · Jan 4, 2022 · c2f57dc · c2f57dc
1 parent 4dcf22b
commit c2f57dc
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/...lic/editor_frame_service/editor_frame/config_panel/buttons/draggable_dimension_button.tsx b/...lic/editor_frame_service/editor_frame/config_panel/buttons/draggable_dimension_button.tsx
@@ -30,6 +30,8 @@ export function DraggableDimensionButton({
   group,
   groups,
   onDrop,
+  onDragStart,
+  onDragEnd,
   children,
   layerDatasourceDropProps,
   layerDatasource,
@@ -43,6 +45,8 @@ export function DraggableDimensionButton({
     dropTarget: DragDropIdentifier,
     dropType?: DropType
   ) => void;
+  onDragStart: () => void;
+  onDragEnd: () => void;
   group: VisualizationDimensionGroupConfig;
   groups: VisualizationDimensionGroupConfig[];
   label: string;
@@ -143,6 +147,8 @@ export function DraggableDimensionButton({
         reorderableGroup={reorderableGroup.length > 1 ? reorderableGroup : undefined}
         value={value}
         onDrop={handleOnDrop}
+        onDragStart={() => onDragStart()}
+        onDragEnd={() => onDragEnd()}
       >
         {children}
       </DragDrop>

diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -64,6 +64,7 @@ export function LayerPanel(
   const [activeDimension, setActiveDimension] = useState<ActiveDimensionState>(
     initialActiveDimensionState
   );
+  const [hideTooltip, setHideTooltip] = useState<boolean>(false);
 
   const {
     framePublicAPI,
@@ -459,6 +460,8 @@ export function LayerPanel(
                             layerDatasource={layerDatasource}
                             layerIndex={layerIndex}
                             layerId={layerId}
+                            onDragStart={() => setHideTooltip(true)}
+                            onDragEnd={() => setHideTooltip(false)}
                             onDrop={onDrop}
                           >
                             <div className="lnsLayerPanel__dimension">
@@ -506,6 +509,7 @@ export function LayerPanel(
                                     columnId: accessorConfig.columnId,
                                     groupId: group.groupId,
                                     filterOperations: group.filterOperations,
+                                    hideTooltip,
                                     invalid: group.invalid,
                                     invalidMessage: group.invalidMessage,
                                   }}

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_panel.tsx
@@ -49,7 +49,7 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
   const layerId = props.layerId;
   const layer = props.state.layers[layerId];
   const currentIndexPattern = props.state.indexPatterns[layer.indexPatternId];
-  const { columnId, uniqueLabel, invalid, invalidMessage } = props;
+  const { columnId, uniqueLabel, invalid, invalidMessage, hideTooltip } = props;
 
   const currentColumnHasErrors = useMemo(
     () => invalid || isColumnInvalid(layer, columnId, currentIndexPattern),
@@ -64,23 +64,23 @@ export const IndexPatternDimensionTriggerComponent = function IndexPatternDimens
   const formattedLabel = wrapOnDot(uniqueLabel);
 
   if (currentColumnHasErrors) {
+    let tooltipContent;
+    if (!hideTooltip) {
+      tooltipContent = invalidMessage ?? (
+        <p>
+          {i18n.translate('xpack.lens.configure.invalidConfigTooltip', {
+            defaultMessage: 'Invalid configuration.',
+          })}
+          <br />
+          {i18n.translate('xpack.lens.configure.invalidConfigTooltipClick', {
+            defaultMessage: 'Click for more details.',
+          })}
+        </p>
+      );
+    }
+
     return (
-      <EuiToolTip
-        content={
-          invalidMessage ?? (
-            <p>
-              {i18n.translate('xpack.lens.configure.invalidConfigTooltip', {
-                defaultMessage: 'Invalid configuration.',
-              })}
-              <br />
-              {i18n.translate('xpack.lens.configure.invalidConfigTooltipClick', {
-                defaultMessage: 'Click for more details.',
-              })}
-            </p>
-          )
-        }
-        anchorClassName="eui-displayBlock"
-      >
+      <EuiToolTip content={tooltipContent} anchorClassName="eui-displayBlock">
         <EuiText
           size="s"
           color="danger"

diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
@@ -343,6 +343,7 @@ export type DatasourceDimensionProps<T> = SharedDimensionProps & {
   onRemove?: (accessor: string) => void;
   state: T;
   activeData?: Record<string, Datatable>;
+  hideTooltip?: boolean;
   invalid?: boolean;
   invalidMessage?: string;
 };