From 3a33297885cd9ade8ccac8c33807b682da2d7ccc Mon Sep 17 00:00:00 2001
From: alexandra vargas <alexa1866@gmail.com>
Date: Fri, 18 Jul 2025 14:52:12 +0200
Subject: [PATCH] implement onCancelEditingQuery library

---
 .../QueryLibrary/QueryLibraryContext.tsx      |  2 +-
 public/app/features/explore/QueryRows.tsx     |  6 ++
 .../hooks/useStateSync/external.utils.ts      |  3 +-
 .../hooks/useStateSync/synchronizer/toURL.ts  |  3 +-
 .../query/components/QueryEditorRow.tsx       | 71 +++++++++++++------
 .../query/components/QueryEditorRows.tsx      |  3 +
 6 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx b/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx
index 90640203d48..e5acaf3cc3a 100644
--- a/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx
+++ b/public/app/features/explore/QueryLibrary/QueryLibraryContext.tsx
@@ -46,7 +46,7 @@ export type QueryLibraryContextType = {
    * Returns a predefined small button that can be used to save a query to the library.
    * @param query
    */
-  renderSaveQueryButton: (query: DataQuery) => ReactNode;
+  renderSaveQueryButton: (query: DataQuery, queryRef?: string) => ReactNode;
   queryLibraryEnabled: boolean;
 };
 
diff --git a/public/app/features/explore/QueryRows.tsx b/public/app/features/explore/QueryRows.tsx
index 2355b8bbc07..040532c4abb 100644
--- a/public/app/features/explore/QueryRows.tsx
+++ b/public/app/features/explore/QueryRows.tsx
@@ -11,6 +11,7 @@ import { QueryEditorRows } from '../query/components/QueryEditorRows';
 
 import { ContentOutlineItem } from './ContentOutline/ContentOutlineItem';
 import { changeDatasource } from './state/datasource';
+import { updateQueryRefAction } from './state/explorePane';
 import { changeQueries, runQueries } from './state/query';
 import { getExploreItemSelector } from './state/selectors';
 
@@ -86,6 +87,10 @@ export const QueryRows = ({ exploreId }: Props) => {
     reportInteraction('grafana_query_row_toggle', queryStatus === undefined ? {} : { queryEnabled: queryStatus });
   };
 
+  const onCancelQueryLibraryEdit = useCallback(() => {
+    dispatch(updateQueryRefAction({ exploreId, queryRef: undefined }));
+  }, [dispatch, exploreId]);
+
   return (
     <QueryEditorRows
       dsSettings={dsSettings}
@@ -103,6 +108,7 @@ export const QueryRows = ({ exploreId }: Props) => {
       history={history}
       eventBus={eventBridge}
       queryRef={queryRef}
+      onCancelQueryLibraryEdit={onCancelQueryLibraryEdit}
       queryRowWrapper={(children, refId) => (
         <ContentOutlineItem
           title={refId}
diff --git a/public/app/features/explore/hooks/useStateSync/external.utils.ts b/public/app/features/explore/hooks/useStateSync/external.utils.ts
index 0a31fd02713..7f09d7e6066 100644
--- a/public/app/features/explore/hooks/useStateSync/external.utils.ts
+++ b/public/app/features/explore/hooks/useStateSync/external.utils.ts
@@ -13,7 +13,8 @@ export function getUrlStateFromPaneState(pane: ExploreItemState): ExploreUrlStat
     range: toURLRange(pane.range.raw),
     // don't include panelsState in the url unless a piece of state is actually set
     panelsState: pruneObject(pane.panelsState),
-    queryRef: pane.queryRef || undefined,
+    // don't include queryRef in the url unless it's actually set
+    ...(pane.queryRef && { queryRef: pane.queryRef }),
   };
 }
 
diff --git a/public/app/features/explore/hooks/useStateSync/synchronizer/toURL.ts b/public/app/features/explore/hooks/useStateSync/synchronizer/toURL.ts
index 9485eef2446..d213d0a94a0 100644
--- a/public/app/features/explore/hooks/useStateSync/synchronizer/toURL.ts
+++ b/public/app/features/explore/hooks/useStateSync/synchronizer/toURL.ts
@@ -5,7 +5,7 @@ import { MutableRefObject } from 'react';
 import { UrlQueryMap } from '@grafana/data';
 import { LocationService } from '@grafana/runtime';
 import { changeDatasource } from 'app/features/explore/state/datasource';
-import { changePanelsStateAction } from 'app/features/explore/state/explorePane';
+import { changePanelsStateAction, updateQueryRefAction } from 'app/features/explore/state/explorePane';
 import { splitClose, splitOpen } from 'app/features/explore/state/main';
 import { runQueries } from 'app/features/explore/state/query';
 import { changeRangeAction } from 'app/features/explore/state/time';
@@ -37,6 +37,7 @@ export function syncToURLPredicate(paused: MutableRefObject<boolean>, action: Ac
       changeRangeAction.type,
       changePanelsStateAction.type,
       changeDatasource.fulfilled.type,
+      updateQueryRefAction.type,
     ].includes(action.type) && !paused.current
   );
 }
diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 41330d74228..cdcaabf1979 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -22,7 +22,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { Trans, t } from '@grafana/i18n';
 import { getDataSourceSrv, renderLimitedComponents, reportInteraction, usePluginComponents } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
-import { Badge, ErrorBoundaryAlert, List } from '@grafana/ui';
+import { Badge, Divider, ErrorBoundaryAlert, List } from '@grafana/ui';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
 import {
   QueryOperationAction,
@@ -68,6 +68,7 @@ export interface Props<TQuery extends DataQuery> {
   collapsable?: boolean;
   hideRefId?: boolean;
   queryRef?: string;
+  onCancelQueryLibraryEdit?: () => void;
 }
 
 interface State<TQuery extends DataQuery> {
@@ -232,6 +233,13 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     }
   };
 
+  onCancelQueryLibraryEdit = () => {
+    const { onCancelQueryLibraryEdit } = this.props;
+    if (onCancelQueryLibraryEdit) {
+      onCancelQueryLibraryEdit();
+    }
+  };
+
   onCopyQuery = () => {
     const { query, onAddQuery, onQueryCopied } = this.props;
     const copy = cloneDeep(query);
@@ -327,7 +335,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
 
   renderQueryLibraryBadge = () => {
     const { queryRef } = this.props;
-    return <QueryLibraryBadgeWrapper queryRef={queryRef} />;
+    return <QueryLibraryBadgeWrapper key="query-library-badge-wrapper" queryRef={queryRef} />;
   };
 
   renderExtraActions = () => {
@@ -368,11 +376,13 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
       hideHideQueryButton: hideHideQueryButton = false,
       onReplace,
       onQueryReplacedFromLibrary,
+      queryRef,
     } = this.props;
     const { datasource, showingHelp } = this.state;
     const isHidden = !!query.hide;
 
     const hasEditorHelp = datasource?.components?.QueryEditorHelp;
+    const isEditingQueryLibraryRef = queryRef !== undefined;
 
     return (
       <>
@@ -385,19 +395,33 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
           />
         )}
         {this.renderExtraActions()}
-        <MaybeQueryLibrarySaveButton query={query} />
-        <QueryOperationAction
-          title={t('query-operation.header.duplicate-query', 'Duplicate query')}
-          icon="copy"
-          onClick={this.onCopyQuery}
-        />
-        <ReplaceQueryFromLibrary
-          datasourceFilters={datasource?.name ? [datasource.name] : []}
-          onSelectQuery={(query) => {
-            onQueryReplacedFromLibrary?.();
-            onReplace?.(query);
-          }}
-        />
+        <MaybeQueryLibrarySaveButton query={query} queryRef={queryRef} />
+        {isEditingQueryLibraryRef && (
+          <>
+            <QueryOperationAction
+              title={t('query-operation.header.cancel-query-library-edit', 'Cancel editing from library')}
+              icon="times"
+              onClick={this.onCancelQueryLibraryEdit}
+            />
+            <Divider direction="vertical" spacing={0} />
+          </>
+        )}
+        {!isEditingQueryLibraryRef && (
+          <QueryOperationAction
+            title={t('query-operation.header.duplicate-query', 'Duplicate query')}
+            icon="copy"
+            onClick={this.onCopyQuery}
+          />
+        )}
+        {!isEditingQueryLibraryRef && (
+          <ReplaceQueryFromLibrary
+            datasourceFilters={datasource?.name ? [datasource.name] : []}
+            onSelectQuery={(query) => {
+              onQueryReplacedFromLibrary?.();
+              onReplace?.(query);
+            }}
+          />
+        )}
         {!hideHideQueryButton ? (
           <QueryOperationToggleAction
             dataTestId={selectors.components.QueryEditorRow.actionButton('Hide response')}
@@ -411,11 +435,13 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
             onClick={this.onHideQuery}
           />
         ) : null}
-        <QueryOperationAction
-          title={t('query-operation.header.remove-query', 'Remove query')}
-          icon="trash-alt"
-          onClick={this.onRemoveQuery}
-        />
+        {!isEditingQueryLibraryRef && (
+          <QueryOperationAction
+            title={t('query-operation.header.remove-query', 'Remove query')}
+            icon="trash-alt"
+            onClick={this.onRemoveQuery}
+          />
+        )}
       </>
     );
   };
@@ -499,7 +525,6 @@ export function QueryLibraryBadgeWrapper(props: { queryRef?: string }) {
 
   return (
     <Badge
-      key="query-library-badge"
       color="blue"
       icon="book"
       text={t('query-operation.query-library.from-library', 'Editing From Query Library')}
@@ -552,9 +577,9 @@ export function filterPanelDataToQuery(data: PanelData, refId: string): PanelDat
 }
 
 // Will render anything only if query library is enabled
-function MaybeQueryLibrarySaveButton(props: { query: DataQuery }) {
+function MaybeQueryLibrarySaveButton(props: { query: DataQuery; queryRef?: string }) {
   const { renderSaveQueryButton } = useQueryLibraryContext();
-  return renderSaveQueryButton(props.query);
+  return renderSaveQueryButton(props.query, props.queryRef);
 }
 
 interface ReplaceQueryFromLibraryProps<TQuery extends DataQuery> {
diff --git a/public/app/features/query/components/QueryEditorRows.tsx b/public/app/features/query/components/QueryEditorRows.tsx
index 2d969abbb7a..49d7ff97514 100644
--- a/public/app/features/query/components/QueryEditorRows.tsx
+++ b/public/app/features/query/components/QueryEditorRows.tsx
@@ -41,6 +41,7 @@ export interface Props {
   onQueryReplacedFromLibrary?: () => void;
   queryRowWrapper?: (children: ReactNode, refId: string) => ReactNode;
   queryRef?: string;
+  onCancelQueryLibraryEdit?: () => void;
 }
 
 export class QueryEditorRows extends PureComponent<Props> {
@@ -177,6 +178,7 @@ export class QueryEditorRows extends PureComponent<Props> {
       onQueryReplacedFromLibrary,
       queryRowWrapper,
       queryRef,
+      onCancelQueryLibraryEdit,
     } = this.props;
 
     return (
@@ -215,6 +217,7 @@ export class QueryEditorRows extends PureComponent<Props> {
                       history={history}
                       eventBus={eventBus}
                       queryRef={queryRef}
+                      onCancelQueryLibraryEdit={onCancelQueryLibraryEdit}
                     />
                   );