fix(datalinks): drag-n-drop blocks jumping

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx

@@ -112,18 +112,16 @@ export const DataLinksInlineEditor = ({
                 const key = `${link.title}/${idx}`;
 
                 const linkJSX = (
-                  <div className={styles.itemWrapper} key={key}>
-                    <DataLinksListItem
-                      key={key}
-                      index={idx}
-                      link={link}
-                      onChange={onDataLinkChange}
-                      onEdit={() => setEditIndex(idx)}
-                      onRemove={() => onDataLinkRemove(idx)}
-                      data={data}
-                      itemKey={key}
-                    />
-                  </div>
+                  <DataLinksListItem
+                    key={key}
+                    index={idx}
+                    link={link}
+                    onChange={onDataLinkChange}
+                    onEdit={() => setEditIndex(idx)}
+                    onRemove={() => onDataLinkRemove(idx)}
+                    data={data}
+                    itemKey={key}
+                  />
                 );
 
                 if (idx === 0) {
@@ -184,9 +182,6 @@ const getDataLinksInlineEditorStyles = (theme: GrafanaTheme2) => ({
     marginBottom: -10,
     display: 'inline-block',
   }),
-  itemWrapper: css({
-    padding: '4px 8px 8px 8px',
-  }),
   button: css({
     marginLeft: theme.spacing(1),
   }),

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx

@@ -32,38 +32,36 @@ export const DataLinksListItem = ({ link, onEdit, onRemove, index, itemKey }: Da
   return (
     <Draggable key={itemKey} draggableId={itemKey} index={index}>
       {(provided) => (
-        <>
-          <div
-            className={cx(styles.wrapper, styles.dragRow)}
-            ref={provided.innerRef}
-            {...provided.draggableProps}
-            key={index}
-          >
-            <div className={styles.linkDetails}>
-              <div className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}>
-                {hasTitle ? title : 'Data link title not provided'}
-              </div>
-              <div
-                className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}
-                title={url}
-              >
-                {hasUrl ? url : 'Data link url not provided'}
-              </div>
-              {isCompactExploreUrl && (
-                <FieldValidationMessage>
-                  Explore data link may not work in the future. Please edit.
-                </FieldValidationMessage>
-              )}
+        <div
+          className={cx(styles.wrapper, styles.dragRow)}
+          ref={provided.innerRef}
+          {...provided.draggableProps}
+          key={index}
+        >
+          <div className={styles.linkDetails}>
+            <div className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}>
+              {hasTitle ? title : 'Data link title not provided'}
             </div>
-            <div className={styles.icons}>
-              <IconButton name="pen" onClick={onEdit} className={styles.icon} tooltip="Edit data link" />
-              <IconButton name="trash-alt" onClick={onRemove} className={styles.icon} tooltip="Remove data link" />
-              <div className={styles.dragIcon} {...provided.dragHandleProps}>
-                <Icon name="draggabledots" size="lg" />
-              </div>
+            <div
+              className={cx(styles.url, !hasUrl && styles.notConfigured, isCompactExploreUrl && styles.errored)}
+              title={url}
+            >
+              {hasUrl ? url : 'Data link url not provided'}
             </div>
+            {isCompactExploreUrl && (
+              <FieldValidationMessage>
+                Explore data link may not work in the future. Please edit.
+              </FieldValidationMessage>
+            )}
           </div>
-        </>
+          <div className={styles.icons}>
+            <IconButton name="pen" onClick={onEdit} className={styles.icon} tooltip="Edit data link" />
+            <IconButton name="trash-alt" onClick={onRemove} className={styles.icon} tooltip="Remove data link" />
+            <div className={styles.dragIcon} {...provided.dragHandleProps}>
+              <Icon name="draggabledots" size="lg" />
+            </div>
+          </div>
+        </div>
       )}
     </Draggable>
   );
@@ -109,6 +107,7 @@ const getDataLinkListItemStyles = (theme: GrafanaTheme2) => {
     }),
     dragRow: css({
       position: 'relative',
+      margin: '4px 8px 8px 8px',
     }),
     icons: css({
       display: 'flex',