Analytics: Collect information about queries reordering (#45392)

public/app/core/components/QueryOperationRow/QueryOperationRow.tsx

@@ -4,6 +4,7 @@ import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { useUpdateEffect } from 'react-use';
 import { Draggable } from 'react-beautiful-dnd';
+import { reportInteraction } from '@grafana/runtime';
 
 interface QueryOperationRowProps {
   index: number;
@@ -47,6 +48,24 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
     setIsContentVisible(!isContentVisible);
   }, [isContentVisible, setIsContentVisible]);
 
+  const reportDragMousePosition = useCallback((e) => {
+    // When drag detected react-beautiful-dnd will preventDefault the event
+    // Ref: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/how-we-use-dom-events.md#a-mouse-drag-has-started-and-the-user-is-now-dragging
+    if (e.defaultPrevented) {
+      const rect = e.currentTarget.getBoundingClientRect();
+      var x = e.clientX - rect.left;
+      var y = e.clientY - rect.top;
+
+      // report relative mouse position within the header element
+      reportInteraction('query_row_reorder_drag_position', {
+        x: x / rect.width,
+        y: y / rect.height,
+        width: rect.width,
+        height: rect.height,
+      });
+    }
+  }, []);
+
   useUpdateEffect(() => {
     if (isContentVisible) {
       if (onOpen) {
@@ -106,7 +125,9 @@ export const QueryOperationRow: React.FC<QueryOperationRowProps> = ({
           return (
             <>
               <div ref={provided.innerRef} className={styles.wrapper} {...provided.draggableProps}>
-                <div {...dragHandleProps}>{rowHeader}</div>
+                <div {...dragHandleProps} onMouseMove={reportDragMousePosition}>
+                  {rowHeader}
+                </div>
                 {isContentVisible && <div className={styles.content}>{children}</div>}
               </div>
             </>