From d6fd17531d49b3f5d5a65e3fa6579494e6ab24df Mon Sep 17 00:00:00 2001
From: Alex Khomenko <Clarity-89@users.noreply.github.com>
Date: Mon, 4 Oct 2021 09:05:43 +0300
Subject: [PATCH] QueryEditor: Add missing keys to extra action components
 (#39913)

---
 .../components/QueryOperationRow/QueryOperationRow.tsx     | 2 +-
 public/app/features/query/components/QueryEditorRow.tsx    | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
index 5326adfa4f4..8db97692933 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
@@ -138,7 +138,7 @@ const getQueryOperationRowStyles = stylesFactory((theme: GrafanaTheme) => {
       }
     `,
     dragIcon: css`
-      cursor: drag;
+      cursor: grab;
       color: ${theme.colors.textWeak};
       &:hover {
         color: ${theme.colors.text};
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 2e8e137999e..a4b610fcbab 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -100,10 +100,10 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
       dashboard: dashboard,
       refresh: () => {
         // Old angular editors modify the query model and just call refresh
-        // Important that this use this.props here so that as this fuction is only created on mount and it's
+        // Important that this use this.props here so that as this function is only created on mount and it's
         // important not to capture old prop functions in this closure
 
-        // the "hide" attribute of the quries can be changed from the "outside",
+        // the "hide" attribute of the queries can be changed from the "outside",
         // it will be applied to "this.props.query.hide", but not to "query.hide".
         // so we have to apply it.
         if (query.hide !== me.props.query.hide) {
@@ -304,13 +304,14 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
 
   renderExtraActions = () => {
     const { query, queries, data, onAddQuery, dataSource } = this.props;
-    return RowActionComponents.getAllExtraRenderAction().map((c) => {
+    return RowActionComponents.getAllExtraRenderAction().map((c, index) => {
       return React.createElement(c, {
         query,
         queries,
         timeRange: data.timeRange,
         onAddQuery: onAddQuery as (query: DataQuery) => void,
         dataSource: dataSource,
+        key: index,
       });
     });
   };