Finish getting form to populate

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<string[]>([]);
-
   // 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 (
     <form onSubmit={handleSubmit(onSubmit)}>
       <p>{info}</p>
-      {queryStrings.map((queryString, i) => (
-        <Field key={`query-${i}`} label={t('explore.add-to-library-modal.query', 'Query')}>
-          <TextArea readOnly={true} value={queryString}></TextArea>
-        </Field>
-      ))}
+      {queryText &&
+        queryText.map((queryString, i) => (
+          <Field key={`query-${i}`} label={t('explore.add-to-library-modal.query', 'Query')}>
+            <TextArea readOnly={true} value={queryString}></TextArea>
+          </Field>
+        ))}
       {queryToAdd && (
         <>
           <Field label={t('explore.add-to-library-modal.data-source-name', 'Data source name')}>

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);
         }}

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"
     }
   }
-}
+}