Finalizing the Query Editor UI (#14)

Author: mariusoe

src/QueryEditor.tsx

@@ -2,16 +2,21 @@ import React, { PureComponent } from 'react';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from './datasource';
 import { MyDataSourceOptions, MyQuery } from './types';
-import { Label } from '@grafana/ui';
+import { InfoBox } from '@grafana/ui';
 
 type Props = QueryEditorProps<DataSource, MyQuery, MyDataSourceOptions>;
 
 export class QueryEditor extends PureComponent<Props> {
   render() {
     return (
-      <div className="gf-form">
-        <Label description="Only for Backend">Grafana Git Workflow</Label>
-      </div>
+      <InfoBox
+        title="Do Not Use This Data Source!"
+        severity="error"
+        url="https://github.com/NovatecConsulting/grafana-dashboard-sync-plugin"
+      >
+        This data source is <strong>not</strong> intended to be used to query data or to be used in dashboards and
+        panels.
+      </InfoBox>
     );
   }
 }