[UnifiedFieldList] Add a drag handle to field list items

packages/kbn-react-field/src/field_button/field_button.scss

@@ -49,6 +49,7 @@
 
 .kbnFieldButton__dragHandle {
   margin-right: $euiSizeS;
+  height: $euiSizeXL;
 }
 
 .kbnFieldButton__fieldAction,
@@ -72,6 +73,10 @@
   .kbnFieldButton__dragHandle {
     line-height: $euiSizeL;
   }
+
+  .kbnFieldButton__dragHandle {
+    height: $euiSizeL;
+  }
 }
 
 .kbnFieldButton--flushBoth {

packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss

@@ -70,3 +70,27 @@
   background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
   color: $euiColorDarkShade;
 }
+
+// A drag handle will appear only on item hover/focus
+.unifiedFieldListItemButton--withDragHandle {
+  .kbnFieldButton__dragHandle {
+    margin-right: 0;
+    flex-shrink: 0;
+    width: 0;
+    overflow: hidden;
+    transition: $euiAnimSpeedNormal ease-in-out;
+    transition-property: width;
+  }
+
+  &:hover,
+  &[class*='-isActive'],
+  .domDragDrop__keyboardHandler:focus + & {
+    .kbnFieldButton__dragHandle {
+      width: $euiSize + $euiSizeS; // icon width plus right margin
+    }
+  }
+
+  &:hover {
+    transform: none;
+  }
+}

packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.test.tsx

@@ -121,7 +121,7 @@ describe('UnifiedFieldList <FieldItemButton />', () => {
         size="xs"
         className="custom"
         dataTestSubj="test-subj"
-        dragHandle={<span>dragHandle</span>}
+        withDragHandle
         field={bytesField}
         fieldSearchHighlight={undefined}
         isEmpty={false}

packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.tsx

@@ -14,8 +14,11 @@ import { EuiButtonIcon, EuiButtonIconProps, EuiHighlight, EuiIcon, EuiToolTip }
 import type { DataViewField } from '@kbn/data-views-plugin/common';
 import { FieldIcon, getFieldIconProps, getFieldSearchMatchingHighlight } from '@kbn/field-utils';
 import { type FieldListItem, type GetCustomFieldType } from '../../types';
+import { FieldItemDragHandle } from '../field_item_drag_handle';
 import './field_item_button.scss';
 
+const DRAG_HANDLE = <FieldItemDragHandle />;
+
 /**
  * Props of FieldItemButton component
  */
@@ -28,7 +31,7 @@ export interface FieldItemButtonProps<T extends FieldListItem> {
   infoIcon?: FieldButtonProps['fieldInfoIcon'];
   className?: FieldButtonProps['className'];
   flush?: FieldButtonProps['flush'];
-  dragHandle?: FieldButtonProps['dragHandle'];
+  withDragHandle?: boolean;
   getCustomFieldType?: GetCustomFieldType<T>;
   dataTestSubj?: string;
   size?: FieldButtonProps['size'];
@@ -53,6 +56,7 @@ export interface FieldItemButtonProps<T extends FieldListItem> {
  * @param dataTestSubj
  * @param size
  * @param onClick
+ * @param withDragHandle
  * @param shouldAlwaysShowAction
  * @param buttonAddFieldToWorkspaceProps
  * @param buttonRemoveFieldFromWorkspaceProps
@@ -74,6 +78,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
   dataTestSubj,
   size,
   onClick,
+  withDragHandle,
   shouldAlwaysShowAction,
   buttonAddFieldToWorkspaceProps,
   buttonRemoveFieldFromWorkspaceProps,
@@ -104,7 +109,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
       [`unifiedFieldListItemButton--${type}`]: type,
       [`unifiedFieldListItemButton--exists`]: !isEmpty,
       [`unifiedFieldListItemButton--missing`]: isEmpty,
-      [`unifiedFieldListItemButton--withDragHandle`]: Boolean(otherProps.dragHandle),
+      [`unifiedFieldListItemButton--withDragHandle`]: withDragHandle,
     },
     className
   );
@@ -209,6 +214,7 @@ export function FieldItemButton<T extends FieldListItem = DataViewField>({
       fieldAction={fieldAction}
       fieldInfoIcon={conflictInfoIcon || infoIcon}
       onClick={onClick}
+      {...(withDragHandle ? { dragHandle: DRAG_HANDLE } : {})}
       {...otherProps}
     />
   );

packages/kbn-unified-field-list/src/components/field_item_drag_handle/field_item_drag_handle.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { EuiIcon, useEuiTheme, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const FieldItemDragHandle: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup
+      className="unifiedFieldListItemDragHandle"
+      css={css`
+        pointer-events: none;
+        flex-shrink: 0;
+        margin-right: ${euiTheme.size.s};
+        width: ${euiTheme.size.base};
+        height: 100%;
+        overflow: hidden;
+      `}
+      alignItems="center"
+      justifyContent="center"
+    >
+      <EuiFlexItem
+        grow={false}
+        css={css`
+          flex-shrink: 0;
+        `}
+      >
+        <EuiIcon type="grabOmnidirectional" size="m" />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};

packages/kbn-unified-field-list/src/components/field_item_drag_handle/index.tsx

@@ -0,0 +1,9 @@
+/*
+ * 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 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 or the Server
+ * Side Public License, v 1.
+ */
+
+export { FieldItemDragHandle } from './field_item_drag_handle';

packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx

@@ -346,6 +346,7 @@ function UnifiedFieldListItemComponent({
           }-${field.name}`}
         >
           <FieldItemButton
+            withDragHandle
             fieldSearchHighlight={highlight}
             isEmpty={isEmpty}
             isActive={infoIsOpen}

x-pack/plugins/lens/public/datasources/common/field_item.tsx

@@ -183,6 +183,7 @@ export function InnerFieldItem(props: FieldItemProps) {
   });
 
   const commonFieldItemButtonProps = {
+    withDragHandle: true,
     isSelected: false, // multiple selections are allowed
     isEmpty: !exists,
     isActive: infoIsOpen,