From d79f60d73f810c02fd15256bbc15a45d4986731f Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Mon, 10 Oct 2022 09:40:54 +0100
Subject: [PATCH] QueryEditorRow: Fix broken drag-and-drop reordering (#56515)

---
 .../features/query/components/QueryEditorRow.tsx  | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 13c9b5fd521..e3ba2ab298a 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -75,6 +75,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   element: HTMLElement | null = null;
   angularScope: AngularQueryComponentScope<TQuery> | null = null;
   angularQueryEditor: AngularComponent | null = null;
+  id = '';
 
   state: State<TQuery> = {
     datasource: null,
@@ -85,8 +86,9 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   };
 
   componentDidMount() {
-    const { data, query } = this.props;
+    const { data, query, id } = this.props;
     const dataFilteredByRefId = filterPanelDataToQuery(data, query.refId);
+    this.id = uniqueId(id + '_');
     this.setState({ data: dataFilteredByRefId });
 
     this.loadDatasource();
@@ -159,6 +161,10 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     const { datasource, loadedDataSourceIdentifier } = this.state;
     const { data, query } = this.props;
 
+    if (prevProps.id !== this.props.id) {
+      this.id = uniqueId(this.props.id + '_');
+    }
+
     if (data !== prevProps.data) {
       const dataFilteredByRefId = filterPanelDataToQuery(data, query.refId);
 
@@ -449,10 +455,9 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   };
 
   render() {
-    const { query, id, index, visualization } = this.props;
+    const { query, index, visualization } = this.props;
     const { datasource, showingHelp, data } = this.state;
     const isDisabled = query.hide;
-    const generatedUniqueId = uniqueId(id + '_');
 
     const rowClasses = classNames('query-editor-row', {
       'query-editor-row--disabled': isDisabled,
@@ -469,14 +474,14 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     return (
       <div aria-label={selectors.components.QueryEditorRows.rows}>
         <QueryOperationRow
-          id={generatedUniqueId}
+          id={this.id}
           draggable={true}
           index={index}
           headerElement={this.renderHeader}
           actions={this.renderActions}
           onOpen={this.onOpen}
         >
-          <div className={rowClasses} id={generatedUniqueId}>
+          <div className={rowClasses} id={this.id}>
             <ErrorBoundaryAlert>
               {showingHelp && DatasourceCheatsheet && (
                 <OperationRowHelp>