Merge pull request #7 from marcusolsson/master

Update query editor to use new form components

src/QueryEditor.tsx

@@ -1,12 +1,14 @@
 import defaults from 'lodash/defaults';
 
 import React, { ChangeEvent, PureComponent } from 'react';
-import { AsyncSelect, Button, LegacyForms } from '@grafana/ui';
+import { MultiSelect, InlineFieldRow, InlineField, AsyncSelect, Input } from '@grafana/ui';
 import { QueryEditorProps, SelectableValue } from '@grafana/data';
 import { DataSource } from './DataSource';
 import { defaultQuery, MyDataSourceOptions, MyQuery, PropertiesMap } from './types';
 
-const { FormField, Select } = LegacyForms;
+// This is a temporary work-around for a styling issue related to the new Input component.
+// For more information, refer to https://github.com/grafana/grafana/issues/26512.
+import {} from '@emotion/core';
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
@@ -48,81 +50,51 @@ export class QueryEditor extends PureComponent<Props> {
     onRunQuery();
   };
 
-  onPropertyChange = (event: SelectableValue, index: number) => {
+  onPropertiesChange = (v: Array<SelectableValue<string>>) => {
     const { onChange, query, onRunQuery } = this.props;
-    const properties = JSON.parse(JSON.stringify(query.properties));
-    properties[index] = event.value;
-    onChange({ ...query, properties });
-    onRunQuery();
-  };
-
-  onPropertyRemoved = (index: number) => {
-    const { onChange, query, onRunQuery } = this.props;
-    const propertiesBefore = query.properties.slice(0, index);
-    const propertiesAfter = query.properties.slice(index + 1);
-    onChange({ ...query, properties: [...propertiesBefore, ...propertiesAfter] });
-    onRunQuery();
-  };
-
-  onAddProperty = () => {
-    const { onChange, query, onRunQuery } = this.props;
-    onChange({ ...query, properties: [...query.properties, ''] });
+    onChange({ ...query, properties: v.map(_ => _.value!) ?? [] });
     onRunQuery();
   };
 
   render() {
     const query = defaults(this.props.query, defaultQuery);
     const { station, latitude, longitude, properties } = query;
 
-    const renderProperties = properties.map((property, index) => {
-      return (
-        <div className="gf-form-inline">
-          <Select
-            width={10}
-            value={PropertiesMap[property]}
-            onChange={event => this.onPropertyChange(event, index)}
-            placeholder="Property"
-            options={Object.values(PropertiesMap)}
-          />
-          <Button onClick={() => this.onPropertyRemoved(index)}>-</Button>
-        </div>
-      );
-    });
-
     return (
-      <div className="gf-form">
-        <div className="gf-form-group">
-          <AsyncSelect
-            width={30}
-            isClearable
-            value={station}
-            isLoading={this.state.isLoadingStations}
-            loadOptions={this.searchStations}
-            noOptionsMessage="No stations found"
-            onChange={this.onSearchStationSelected}
-            placeholder="Weather Station"
-          />
-          <div className="gf-form-inline">
-            <FormField
-              labelWidth={10}
-              value={latitude || ''}
-              onChange={this.onLatitudeChange}
-              label="Latitude"
-              placeholder="Latitude"
+      <>
+        <InlineFieldRow>
+          <InlineField label="Weather station" labelWidth={15}>
+            <AsyncSelect
+              width={30}
+              isClearable
+              value={station}
+              isLoading={this.state.isLoadingStations}
+              loadOptions={this.searchStations}
+              noOptionsMessage="No stations found"
+              onChange={this.onSearchStationSelected}
             />
-            <FormField
-              labelWidth={10}
-              value={longitude || ''}
-              onChange={this.onLongitudeChange}
-              label="Longitude"
-              placeholder="Longitude"
+          </InlineField>
+        </InlineFieldRow>
+        <InlineFieldRow>
+          <InlineField label="Latitude" labelWidth={10}>
+            <Input width={30} value={latitude || ''} onChange={this.onLatitudeChange} />
+          </InlineField>
+          <InlineField label="Longitude" labelWidth={10}>
+            <Input width={30} value={longitude || ''} onChange={this.onLongitudeChange} />
+          </InlineField>
+        </InlineFieldRow>
+        <InlineFieldRow>
+          <InlineField label="Properties" labelWidth={10}>
+            <MultiSelect
+              width={71}
+              value={properties}
+              onChange={v => this.onPropertiesChange(v)}
+              placeholder="Property"
+              options={Object.values(PropertiesMap)}
             />
-          </div>
-          Properties
-          {renderProperties}
-          <Button onClick={this.onAddProperty}>+</Button>
-        </div>
-      </div>
+          </InlineField>
+        </InlineFieldRow>
+      </>
     );
   }
 }