[Lens] Drag and drop info bottom bar POC implementation

x-pack/plugins/lens/public/drag_drop/drag_drop.scss

@@ -134,3 +134,8 @@
     }
   }
 }
+
+.lnsDragDrop-bottomBar {
+  text-align: center;
+  font-weight: $euiFontWeightBold;
+}

x-pack/plugins/lens/public/drag_drop/providers/bottom_bar.tsx

@@ -0,0 +1,77 @@
+/*
+ * 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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { EuiBottomBar } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { DropIdentifier, DraggingIdentifier } from './types';
+
+interface BottomBarProps {
+  dragging: DraggingIdentifier;
+  activeDropTarget?: DropIdentifier;
+}
+
+const DEFAULT_DRAGGING_MESSAGE = i18n.translate('xpack.lens.dragDrop.bottomBar.dragging', {
+  defaultMessage: `Drop a configuration to replace an existing one or add to a different dimension. (This copy doesn't say anything about reordering)`,
+});
+
+const REPLACE_INCOMPATIBLE_MESSAGE = i18n.translate(
+  'xpack.lens.dragDrop.bottomBar.replaceIncompatible',
+  {
+    defaultMessage: `A partial replace can only keep the field, not the function.`,
+  }
+);
+
+const MOVE_INCOMPATIBLE_MESSAGE = i18n.translate('xpack.lens.dragDrop.bottomBar.moveIncompatible', {
+  defaultMessage: `A partial move can only keep the field, not the function.`,
+});
+
+const MOVE_COMPATIBLE_MESSAGE = i18n.translate('xpack.lens.dragDrop.bottomBar.moveCompatible', {
+  defaultMessage: `Drop to move to new dimension.`,
+});
+
+const REPLACE_COMPATIBLE_MESSAGE = i18n.translate(
+  'xpack.lens.dragDrop.bottomBar.replaceCompatible',
+  {
+    defaultMessage: `Drop to replace the existing dimension.`,
+  }
+);
+
+const REORDER_MESSAGE = i18n.translate('xpack.lens.dragDrop.bottomBar.reorder', {
+  defaultMessage: `Drop to reorder.`,
+});
+const DUPLICATE_INGROUP_MESSAGE = i18n.translate('xpack.lens.dragDrop.bottomBar.duplicateInGroup', {
+  defaultMessage: `Drop to duplicate.`,
+});
+
+const getMessage = ({ activeDropTarget }: BottomBarProps) => {
+  if (activeDropTarget) {
+    switch (activeDropTarget.dropType) {
+      case 'replace_incompatible':
+        return REPLACE_INCOMPATIBLE_MESSAGE;
+      case 'move_incompatible':
+        return MOVE_INCOMPATIBLE_MESSAGE;
+      case 'move_compatible':
+        return MOVE_COMPATIBLE_MESSAGE;
+      case 'replace_compatible':
+        return REPLACE_COMPATIBLE_MESSAGE;
+      case 'reorder':
+        return REORDER_MESSAGE;
+      case 'duplicate_in_group':
+        return DUPLICATE_INGROUP_MESSAGE;
+    }
+  }
+  return DEFAULT_DRAGGING_MESSAGE;
+};
+
+export const BottomBar = ({ dragging, activeDropTarget }: BottomBarProps) => {
+  return (
+    <EuiBottomBar className="lnsDragDrop-bottomBar" paddingSize="m">
+      <span>{getMessage({ dragging, activeDropTarget })}</span>
+    </EuiBottomBar>
+  );
+};

x-pack/plugins/lens/public/drag_drop/providers/providers.tsx

@@ -8,6 +8,7 @@
 import React, { useState, useMemo } from 'react';
 import { EuiScreenReaderOnly, EuiPortal } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { BottomBar } from './bottom_bar';
 import {
   DropIdentifier,
   DraggingIdentifier,
@@ -122,6 +123,9 @@ export function RootDragDropProvider({ children }: { children: React.ReactNode }
           </div>
         </EuiScreenReaderOnly>
       </EuiPortal>
+      {draggingState.dragging?.humanData.showBarOnDrag && (
+        <BottomBar dragging={draggingState.dragging} activeDropTarget={activeDropTargetState} />
+      )}
     </div>
   );
 }

x-pack/plugins/lens/public/drag_drop/providers/types.tsx

@@ -12,6 +12,7 @@ export interface HumanData {
   groupLabel?: string;
   position?: number;
   nextLabel?: string;
+  showBarOnDrag?: boolean;
 }
 
 export type DragDropIdentifier = Record<string, unknown> & {

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/draggable_dimension_button.tsx

@@ -88,6 +88,7 @@ export function DraggableDimensionButton({
         groupLabel: group.groupLabel,
         position: accessorIndex + 1,
         nextLabel: nextLabel || '',
+        showBarOnDrag: true,
       },
     }),
     [columnId, group.groupId, accessorIndex, layerId, dropType, label, group.groupLabel, nextLabel]