Migrate drag and drop logic from Lens plugin to its own package (#151836

)

Closes #151702

## Summary

This PR migrates drag and drop logic from Lens plugin to a new package
so we can reuse it on Discover page later. At this point there should be
no visual changes. If you notice something, please comment on the PR.

- [x] Migrate drag&drop code to its own package `@kbn/dom-drag-drop`
- [x] Clean up i18n strings
- [x] Clean up styles
- [x] Adjust tests 
- [x] Make telemetry optional  
- [x] Configurable `data-test-subj`

Please test by using your mouse and also by using keyword shortcuts.

# Next steps

- Redesign for field list item (smaller button, a separate handle icon,
pill styles)
- Redesign for draggable buttons in the Lens layer panels (smaller
buttons)
-
[Figma](https://www.figma.com/file/SvpfCqaZPb2iAYnPtd0Gnr/KUI-Library?node-id=674%3A198901&t=OnQH2EQ4fdBjsRLp-0)
- #151703

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>

.github/CODEOWNERS

@@ -312,6 +312,7 @@ x-pack/plugins/discover_enhanced @elastic/kibana-data-discovery
 src/plugins/discover @elastic/kibana-data-discovery
 packages/kbn-doc-links @elastic/kibana-docs
 packages/kbn-docs-utils @elastic/kibana-operations
+packages/kbn-dom-drag-drop @elastic/kibana-visualizations @elastic/kibana-data-discovery
 packages/kbn-ebt-tools @elastic/kibana-core
 packages/kbn-ecs @elastic/kibana-core @elastic/security-threat-hunting-investigations
 x-pack/packages/kbn-ecs-data-quality-dashboard @elastic/security-threat-hunting-investigations

.i18nrc.json

@@ -14,6 +14,7 @@
     "core": ["src/core", "packages/core"],
     "customIntegrations": "src/plugins/custom_integrations",
     "dashboard": "src/plugins/dashboard",
+    "domDragDrop": "packages/kbn-dom-drag-drop",
     "controls": "src/plugins/controls",
     "data": "src/plugins/data",
     "ecsDataQualityDashboard": "x-pack/packages/kbn-ecs-data-quality-dashboard",

package.json

@@ -351,6 +351,7 @@
     "@kbn/discover-enhanced-plugin": "link:x-pack/plugins/discover_enhanced",
     "@kbn/discover-plugin": "link:src/plugins/discover",
     "@kbn/doc-links": "link:packages/kbn-doc-links",
+    "@kbn/dom-drag-drop": "link:packages/kbn-dom-drag-drop",
     "@kbn/ebt-tools": "link:packages/kbn-ebt-tools",
     "@kbn/ecs": "link:packages/kbn-ecs",
     "@kbn/ecs-data-quality-dashboard": "link:x-pack/packages/kbn-ecs-data-quality-dashboard",

x-pack/plugins/lens/public/drag_drop/readme.md → packages/kbn-dom-drag-drop/README.md

@@ -1,4 +1,4 @@
-# Drag / Drop
+# DOM Drag & Drop
 
 This is a simple drag / drop mechanism that plays nice with React.
 
@@ -9,7 +9,7 @@ We aren't using EUI or another library, due to the fact that Lens visualizations
 First, place a RootDragDropProvider at the root of your application.
 
 ```js
-<RootDragDropProvider>
+<RootDragDropProvider onTrackUICounterEvent={...}>
   ... your app here ...
 </RootDragDropProvider>
 ```

packages/kbn-dom-drag-drop/index.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 {
+  type DragDropIdentifier,
+  type DragContextState,
+  type DropType,
+  type DraggingIdentifier,
+  DragDrop,
+  DragContext,
+  RootDragDropProvider,
+  ChildDragDropProvider,
+  ReorderProvider,
+} from './src';
+
+export { DropTargetSwapDuplicateCombine } from './src/drop_targets';

packages/kbn-dom-drag-drop/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-dom-drag-drop'],
+};

packages/kbn-dom-drag-drop/kibana.jsonc

@@ -0,0 +1,8 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/dom-drag-drop",
+  "owner": [
+    "@elastic/kibana-visualizations",
+    "@elastic/kibana-data-discovery"
+  ]
+}

packages/kbn-dom-drag-drop/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/dom-drag-drop",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}

packages/kbn-dom-drag-drop/src/constants.ts

@@ -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 const DEFAULT_DATA_TEST_SUBJ = 'domDragDrop';