diff --git a/public/app/features/explore/QueryLibrary/QueryTemplateForm.tsx b/public/app/features/explore/QueryLibrary/QueryTemplateForm.tsx index 8ebd4f47633..b9fe287f85d 100644 --- a/public/app/features/explore/QueryLibrary/QueryTemplateForm.tsx +++ b/public/app/features/explore/QueryLibrary/QueryTemplateForm.tsx @@ -1,5 +1,5 @@ -import { useState } from 'react'; import { useForm } from 'react-hook-form'; +import { useAsync } from 'react-use'; import { AppEvents, dateTime } from '@grafana/data'; import { DataSourcePicker, getAppEvents, getDataSourceSrv } from '@grafana/runtime'; @@ -49,8 +49,6 @@ export const QueryTemplateForm = ({ onCancel, onSave, queryToAdd, templateData } const datasource = useDatasource(queryToAdd?.datasource); - const [queryStrings, setQueryStrings] = useState([]); - // this is an array to support multi query templates sometime in the future const queries = queryToAdd !== undefined ? [queryToAdd] : templateData?.query !== undefined ? [templateData?.query] : []; @@ -121,24 +119,23 @@ export const QueryTemplateForm = ({ onCancel, onSave, queryToAdd, templateData } } }; - const generateQueryText = (queries: DataQuery[]) => { + const { value: queryText } = useAsync(async () => { const promises = queries.map(async (query, i) => { const datasource = await getDataSourceSrv().get(query.datasource); return datasource?.getQueryDisplayText?.(query) || getQueryDisplayText(query); }); - Promise.all(promises).then((qStrings) => setQueryStrings(qStrings)); - }; - - generateQueryText(queries); + return Promise.all(promises); + }); return (

{info}

- {queryStrings.map((queryString, i) => ( - - - - ))} + {queryText && + queryText.map((queryString, i) => ( + + + + ))} {queryToAdd && ( <> diff --git a/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx b/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx index 211f1db16dc..17d4d80d6aa 100644 --- a/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx +++ b/public/app/features/explore/QueryLibrary/QueryTemplatesTable/ActionsCell.tsx @@ -67,8 +67,8 @@ function ActionsCell({ queryTemplate, rootDatasourceUid, queryUid }: ActionsCell className={styles.actionButton} size="lg" name="comment-alt" - title={t('explore.query-library.delete-query', 'Add/edit description')} - tooltip={t('explore.query-library.delete-query', 'Add/edit description')} + title={t('explore.query-library.add-edit-description', 'Add/edit description')} + tooltip={t('explore.query-library.add-edit-description', 'Add/edit description')} onClick={() => { setEditFormOpen(true); }} diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json index 92d54e9c3ae..cf1b1cbcd15 100644 --- a/public/locales/en-US/grafana.json +++ b/public/locales/en-US/grafana.json @@ -545,7 +545,8 @@ "delete-query": "Delete query", "delete-query-text": "You're about to remove this query from the query library. This action cannot be undone. Do you want to continue?", "delete-query-title": "Delete query", - "query-deleted": "Query deleted" + "query-deleted": "Query deleted", + "add-edit-description": "Add/edit description" }, "rich-history": { "close-tooltip": "Close query history", @@ -2069,4 +2070,4 @@ "title": "There are no variables added yet" } } -} +} \ No newline at end of file