Clean up query editors

Author: marcusolsson

src/components/DashboardQueryEditor.tsx

@@ -7,14 +7,13 @@ interface Props {
   query: string;
   onBlur: () => void;
   onChange: (v: string) => void;
-  suggestions: boolean;
   onData: () => Promise<any>;
 }
 
 /**
  * JsonPathQueryField is an editor for JSON Path.
  */
-export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange, suggestions, onData }) => {
+export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange, onData }) => {
   /**
    * The QueryField supports Slate plugins, so let's add a few useful ones.
    */
@@ -36,7 +35,7 @@ export const JsonPathQueryField: React.FC<Props> = ({ query, onBlur, onChange, s
       additionalPlugins={plugins}
       query={query}
       cleanText={cleanText}
-      onTypeahead={suggestions ? onTypeahead : undefined}
+      onTypeahead={onTypeahead}
       onRunQuery={onBlur}
       onChange={onChange}
       portalOrigin="jsonapi"

src/components/JsonPathQueryField.tsx

@@ -12,34 +12,20 @@ import {
   useTheme,
   InfoBox,
 } from '@grafana/ui';
-import { SelectableValue, FieldType, TimeRange } from '@grafana/data';
-import { JsonApiQuery, defaultQuery } from '../types';
+import { SelectableValue, FieldType, QueryEditorProps } from '@grafana/data';
+import { JsonApiQuery, defaultQuery, JsonApiDataSourceOptions } from '../types';
 import { JsonPathQueryField } from './JsonPathQueryField';
 import { KeyValueEditor } from './KeyValueEditor';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { css } from 'emotion';
 import { Pair } from '../types';
 import { JsonDataSource } from 'datasource';
 
-interface Props {
-  onRunQuery: () => void;
-  onChange: (query: JsonApiQuery) => void;
-  query: JsonApiQuery;
+interface Props extends QueryEditorProps<JsonDataSource, JsonApiQuery, JsonApiDataSourceOptions> {
   limitFields?: number;
-  datasource: JsonDataSource;
-  range?: TimeRange;
-  disableSuggestions: boolean;
 }
 
-export const QueryEditor: React.FC<Props> = ({
-  onRunQuery,
-  onChange,
-  query,
-  limitFields,
-  datasource,
-  range,
-  disableSuggestions,
-}) => {
+export const QueryEditor: React.FC<Props> = ({ onRunQuery, onChange, query, limitFields, datasource, range }) => {
   const [bodyType, setBodyType] = useState('plaintext');
   const [tabIndex, setTabIndex] = useState(0);
   const theme = useTheme();
@@ -77,31 +63,36 @@ export const QueryEditor: React.FC<Props> = ({
   };
 
   const onChangePath = (i: number) => (e: string) => {
-    fields[i] = { ...fields[i], jsonPath: e };
-    onChange({ ...query, fields });
+    onChange({
+      ...query,
+      fields: fields.map((field, n) => (i === n ? { ...fields[i], jsonPath: e } : field)),
+    });
   };
 
   const onChangeType = (i: number) => (e: SelectableValue<string>) => {
-    fields[i] = { ...fields[i], type: (e.value === 'auto' ? undefined : e.value) as FieldType };
-    onChange({ ...query, fields });
+    onChange({
+      ...query,
+      fields: fields.map((field, n) =>
+        i === n ? { ...fields[i], type: (e.value === 'auto' ? undefined : e.value) as FieldType } : field
+      ),
+    });
     onRunQuery();
   };
 
   const addField = (i: number) => () => {
-    console.log(limitFields, fields.length);
     if (!limitFields || fields.length < limitFields) {
-      if (fields) {
-        fields.splice(i + 1, 0, { name: '', jsonPath: '' });
-      }
-      onChange({ ...query, fields });
+      onChange({
+        ...query,
+        fields: [...fields.slice(0, i + 1), { name: '', jsonPath: '' }, ...fields.slice(i + 1)],
+      });
     }
   };
 
   const removeField = (i: number) => () => {
-    if (fields) {
-      fields.splice(i, 1);
-    }
-    onChange({ ...query, fields });
+    onChange({
+      ...query,
+      fields: [...fields.slice(0, i), ...fields.slice(i + 1)],
+    });
     onRunQuery();
   };
 
@@ -125,7 +116,6 @@ export const QueryEditor: React.FC<Props> = ({
                   onBlur={onRunQuery}
                   onChange={onChangePath(index)}
                   query={field.jsonPath}
-                  suggestions={!disableSuggestions}
                   onData={() => datasource.metadataRequest(query, range)}
                 />
               </InlineField>

src/components/QueryEditor.tsx

@@ -9,7 +9,6 @@ interface VariableQueryProps {
   onChange: (query: JsonApiQuery, definition: string) => void;
   datasource: JsonDataSource;
   range: TimeRange;
-  disableSuggestions: boolean;
 }
 
 // VariableQueryEditor is used to query values for a dashboard variable.

src/components/VariableQueryEditor.tsx

@@ -1,11 +1,11 @@
 import { DataSourcePlugin } from '@grafana/data';
 import { JsonDataSource } from './datasource';
 import { ConfigEditor } from './components/ConfigEditor';
-import { DashboardQueryEditor } from './components/DashboardQueryEditor';
+import { QueryEditor } from './components/QueryEditor';
 import { VariableQueryEditor } from './components/VariableQueryEditor';
 import { JsonApiQuery, JsonApiDataSourceOptions } from './types';
 
 export const plugin = new DataSourcePlugin<JsonDataSource, JsonApiQuery, JsonApiDataSourceOptions>(JsonDataSource)
   .setConfigEditor(ConfigEditor)
-  .setQueryEditor(DashboardQueryEditor)
+  .setQueryEditor(QueryEditor)
   .setVariableQueryEditor(VariableQueryEditor);