DataSourcePlugin: support custom tabs (#16859)

* use ConfigEditor

* add tabs

* add tabs

* set the nav in state

* remove actions

* reorder imports

* catch plugin loading errors

* better text

* keep props

* fix typo

* update snapshot

* rename tab to page

* add missing pages

public/app/plugins/datasource/testdata/TestInfoTab.tsx

@@ -0,0 +1,28 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Types
+import { PluginConfigPageProps, DataSourcePlugin } from '@grafana/ui';
+import { TestDataDatasource } from './datasource';
+
+interface Props extends PluginConfigPageProps<DataSourcePlugin<TestDataDatasource>> {}
+
+export class TestInfoTab extends PureComponent<Props> {
+  constructor(props: Props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        See github for more information about setting up a reproducable test environment.
+        <br />
+        <br />
+        <a className="btn btn-inverse" href="https://github.com/grafana/grafana/tree/master/devenv" target="_blank">
+          Github
+        </a>
+        <br />
+      </div>
+    );
+  }
+}

public/app/plugins/datasource/testdata/module.tsx

@@ -1,6 +1,7 @@
 import { DataSourcePlugin } from '@grafana/ui';
 import { TestDataDatasource } from './datasource';
 import { TestDataQueryCtrl } from './query_ctrl';
+import { TestInfoTab } from './TestInfoTab';
 import { ConfigEditor } from './ConfigEditor';
 
 class TestDataAnnotationsQueryCtrl {
@@ -12,4 +13,10 @@ class TestDataAnnotationsQueryCtrl {
 export const plugin = new DataSourcePlugin(TestDataDatasource)
   .setConfigEditor(ConfigEditor)
   .setQueryCtrl(TestDataQueryCtrl)
-  .setAnnotationQueryCtrl(TestDataAnnotationsQueryCtrl);
+  .setAnnotationQueryCtrl(TestDataAnnotationsQueryCtrl)
+  .addConfigPage({
+    title: 'Setup',
+    icon: 'fa fa-list-alt',
+    body: TestInfoTab,
+    id: 'setup',
+  });