Fix history bugs

- Display the APL query (instead of JSON) in the history panel
- When running a query from the history, update the editor

Author: bahlo

src/components/QueryEditor.tsx

@@ -65,6 +65,12 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
   const [queryStr, setQueryStr] = React.useState('');
   const { apl: queryText } = query;
 
+  if (query.apl !== queryStr) {
+    // query.apl could've changed from the outside (e.g. when a history query
+    // is ran), so we need to update the state.
+    setQueryStr(query.apl);
+  }
+
   const onQueryTextChange = (apl: string) => {
     onChange({ ...query, apl });
     setQueryStr(apl);
@@ -79,7 +85,9 @@ export function QueryEditor({ query, onChange, onRunQuery, datasource }: Props)
   };
 
   const addPlaceholder = (editor: any, monaco: any) => {
-    editor.executeEdits(null, [{ range: new monaco.Range(1, 1, 1, 1), text: placeholder }]);
+    if (editor.getValue() === '') {
+      editor.executeEdits(null, [{ range: new monaco.Range(1, 1, 1, 1), text: placeholder }]);
+    }
     editor.onDidFocusEditorText(() => {
       if (editor.getValue() === placeholder) {
         editor.executeEdits(null, [{ range: new monaco.Range(1, 1, placeholder.length, 1), text: '' }]);

src/datasource.ts

@@ -1,9 +1,4 @@
-import {
-  DataFrame,
-  DataQueryRequest,
-  DataQueryResponse,
-  DataSourceInstanceSettings,
-} from '@grafana/data';
+import { DataFrame, DataQueryRequest, DataQueryResponse, DataSourceInstanceSettings } from '@grafana/data';
 import { DataSourceWithBackend, getTemplateSrv } from '@grafana/runtime';
 
 import { AxiomQuery, AxiomDataSourceOptions } from './types';
@@ -55,4 +50,7 @@ export class DataSource extends DataSourceWithBackend<AxiomQuery, AxiomDataSourc
     return this.getResource('/schema-lookup');
   }
 
+  getQueryDisplayText(query: AxiomQuery) {
+    return query.apl;
+  }
 }