Saved Queries: Pass editor ref for dynamic dropdown display (#114321)

* Saved Queries: Pass editor ref for dynamic dropdown display * Updated docs per feedback * Update docs/sources/visualizations/dashboards/build-dashboards/annotate-visualizations/index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/dashboards/build-dashboards/annotate-visualizations/index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/dashboards/build-dashboards/create-dashboard/index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/dashboards/build-dashboards/create-dashboard/index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/explore/get-started-with-explore.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/panels-visualizations/query-transform-data/_index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/panels-visualizations/query-transform-data/_index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/panels-visualizations/query-transform-data/_index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/panels-visualizations/query-transform-data/_index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> * Update docs/sources/visualizations/panels-visualizations/query-transform-data/_index.md Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com> --------- Co-authored-by: Nathan Marrs <nathanielmarrs@gmail.com> Co-authored-by: Isabel Matwawana <76437239+imatwawana@users.noreply.github.com>
2025-12-18 18:18:24 -05:00
parent 0ec716a433
commit 606a59584a
8 changed files with 31 additions and 19 deletions
@@ -163,9 +163,9 @@ To add a new annotation query to a dashboard, follow these steps:

 1. To create a query, do one of the following:
   - Write or construct a query in the query language of your data source. The annotation query options are different for each data source. For information about annotations in a specific data source, refer to the specific [data source](ref:data-source) topic.
-   - Click **Replace with saved query** to reuse a [saved query](ref:saved-queries).
+   - Open the **Saved queries** drop-down menu and click **Replace query** to reuse a [saved query](ref:saved-queries).

-1. (Optional) To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
+1. (Optional) To [save the query](ref:save-query) for reuse, open the **Saved queries** drop-down menu and click the **Save query** option.
 1. (Optional) Click **Test annotation query** to ensure that the query is working properly.
 1. (Optional) To add subsequent queries, click **+ Add query** or **+ Add from saved queries**, and test them as many times as needed.

@@ -125,9 +125,9 @@ Dashboards and panels allow you to show your data in visual form. Each panel nee

 1. To create a query, do one of the following:
   - Write or construct a query in the query language of your data source.
-   - Click **Replace with saved query** to reuse a [saved query](ref:saved-queries).
+   - Open the **Saved queries** drop-down menu and click **Replace query** to reuse a [saved query](ref:saved-queries).

-1. (Optional) To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
+1. (Optional) To [save the query](ref:save-query) for reuse, open the **Saved queries** drop-down menu and click the **Save query** option.
 1. Click **Refresh** to query the data source.
 1. (Optional) To add subsequent queries, click **+ Add query** or **+ Add from saved queries**, and refresh the data source as many times as needed.

@@ -71,8 +71,9 @@ Explore consists of a toolbar, outline, query editor, the ability to add multipl
  - **Run query** - Click to run your query.

 - **Query editor** - Interface where you construct the query for a specific data source. Query editor elements differ based on data source. In order to run queries across multiple data sources you need to select **Mixed** from the data source picker.
-  - **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
-  - **Replace with saved query** - Reuse a saved query.
+  - **Saved queries**:
+    - **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
+    - **Replace query** - Reuse a saved query.
  - **+ Add query** - Add an additional query.
  - **+ Add from saved queries** - Add an additional query by reusing a saved query.

@@ -88,8 +88,9 @@ The data section contains tabs where you enter queries, transform your data, and

 - **Queries**
  - Select your data source. You can also set or update the data source in existing dashboards using the drop-down menu in the **Queries** tab.
-  - **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
-  - **Replace with saved query** - Reuse a saved query.
+  - **Saved queries**:
+    - **Save query** - To [save the query](ref:save-query) for reuse, click the **Save query** button (or icon).
+    - **Replace query** - Reuse a saved query.
  - **+ Add query** - Add an additional query.
  - **+ Add from saved queries** - Add an additional query by reusing a saved query.

@@ -156,11 +156,11 @@ In the **Saved queries** drawer, you can:
 - Edit a query title, description, tags, or the availability of the query to other users in your organization. By default, saved queries are locked for editing.
 - When you access the **Saved queries** drawer from Explore, you can use the **Edit in Explore** option to edit the body of a query.

-To access your saved queries, click **+ Add from saved queries** or **Replace with saved query** in the query editor:
+To access your saved queries, click **+ Add from saved queries** or open the **Saved queries** drop-down menu and click **Replace query** in the query editor:

 {{< figure src="/media/docs/grafana/dashboards/screenshot-use-saved-queries-v12.3.png" max-width="750px" alt="Access saved queries" >}}

-Clicking **+ Add from saved queries** adds an additional query, while clicking **Replace with saved query** updates your existing query.
+Clicking **+ Add from saved queries** adds an additional query, while clicking **Replace query** in the **Saved queries** drop-down menu updates your existing query.

 {{< admonition type="note" >}}
 Users with Admin and Editor roles can create and save queries for reuse.
@@ -172,7 +172,7 @@ Viewers can only reuse queries.

 To save a query you've created:

-1. From the query editor, click the **Save query** icon:
+1. From the query editor, open the **Saved queries** drop-down menu and click the **Save query** option:

   {{< figure src="/media/docs/grafana/panels-visualizations/screenshot-save-query-v12.2.png" max-width="750px" alt="Save a query" >}}

@@ -227,7 +227,7 @@ To add a query, follow these steps:

 1. To create a query, do one of the following:
   - Write or construct a query in the query language of your data source.
-   - Click **Replace with saved query** to reuse a saved query.
+   - Open the **Saved queries** drop-down menu and click **Replace query** to reuse a saved query.

   {{< admonition type="note" >}}
   [Saved queries](#saved-queries) is currently in [public preview](https://grafana.com/docs/release-life-cycle/). Grafana Labs offers limited support, and breaking changes might occur prior to the feature being made generally available.
@@ -235,7 +235,7 @@ To add a query, follow these steps:
   This feature is only available on Grafana Enterprise and Grafana Cloud.
   {{< /admonition >}}

-1. (Optional) To [save the query](#save-a-query) for reuse, click the **Save query** button (or icon).
+1. (Optional) To [save the query](#save-a-query) for reuse, click the **Save query** option in the **Saved queries** drop-down menu.
 1. (Optional) Click **+ Add query** or **Add from saved queries** to add more queries as needed.

 1. Click **Run queries**.
@@ -43,7 +43,8 @@ export type QueryLibraryContextType = {
    app?: CoreApp,
    onUpdateSuccess?: () => void,
    onSelectQuery?: (query: DataQuery) => void,
-    datasourceFilters?: string[]
+    datasourceFilters?: string[],
+    parentRef?: React.RefObject<HTMLDivElement>
  ) => ReactNode;

  /**
@@ -461,8 +461,7 @@ describe('QueryEditorRow', () => {
      render(<QueryEditorRow {...props(testData)} app={CoreApp.UnifiedAlerting} />);

      await waitFor(() => {
-        expect(screen.queryByText('Save query')).not.toBeInTheDocument();
-        expect(screen.queryByText('Replace with saved query')).not.toBeInTheDocument();
+        expect(screen.queryByText('Saved queries')).not.toBeInTheDocument();
      });
    });

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { cloneDeep, filter, uniqBy, uniqueId } from 'lodash';
 import pluralize from 'pluralize';
-import { PureComponent, ReactNode, type JSX } from 'react';
+import { PureComponent, ReactNode, type JSX, createRef } from 'react';

 import {
  CoreApp,
@@ -88,6 +88,7 @@ interface State<TQuery extends DataQuery> {
 export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Props<TQuery>, State<TQuery>> {
  dataSourceSrv = getDataSourceSrv();
  id = '';
+  editorRef = createRef<HTMLDivElement>();

  state: State<TQuery> = {
    datasource: null,
@@ -419,6 +420,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
            onUpdateSuccess={this.onExitQueryLibraryEditingMode}
            onSelectQuery={this.onSelectQueryFromLibrary}
            datasourceFilters={datasource?.name ? [datasource.name] : []}
+            parentRef={this.editorRef}
          />
        )}

@@ -542,7 +544,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
    );

    return (
-      <div data-testid="query-editor-row" aria-label={selectors.components.QueryEditorRows.rows}>
+      <div data-testid="query-editor-row" aria-label={selectors.components.QueryEditorRows.rows} ref={this.editorRef}>
        {queryLibraryRef && (
          <MaybeQueryLibraryEditingHeader
            query={query}
@@ -611,9 +613,17 @@ function SavedQueryButtons(props: {
  onUpdateSuccess?: () => void;
  onSelectQuery: (query: DataQuery) => void;
  datasourceFilters: string[];
+  parentRef: React.RefObject<HTMLDivElement>;
 }) {
  const { renderSavedQueryButtons } = useQueryLibraryContext();
-  return renderSavedQueryButtons(props.query, props.app, props.onUpdateSuccess, props.onSelectQuery);
+  return renderSavedQueryButtons(
+    props.query,
+    props.app,
+    props.onUpdateSuccess,
+    props.onSelectQuery,
+    undefined,
+    props.parentRef
+  );
 }

 // Will render editing header only if query library is enabled