update config page (#391)

* add grafana/experimental

* update config page

* use custom divider component

Author: itsgareth

package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@emotion/css": "^11.1.3",
     "@grafana/data": "10.1.4",
+    "@grafana/experimental": "^1.7.4",
     "@grafana/runtime": "10.1.4",
     "@grafana/ui": "10.1.4",
     "dayjs": "^1.10.4",

src/components/ConfigEditor.tsx

@@ -1,7 +1,17 @@
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
-import { DataSourceHttpSettings, InlineField, InlineFieldRow, Input } from '@grafana/ui';
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import { Field, Input, useStyles2 } from '@grafana/ui';
 import React, { ChangeEvent } from 'react';
 import { JsonApiDataSourceOptions } from '../types';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
+import { css } from '@emotion/css';
+import { Divider } from './Divider';
 
 type Props = DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions>;
 
@@ -10,6 +20,8 @@ type Props = DataSourcePluginOptionsEditorProps<JsonApiDataSourceOptions>;
  * authentication.
  */
 export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
+  const styles = useStyles2(getStyles);
+
   const onParamsChange = (e: ChangeEvent<HTMLInputElement>) => {
     onOptionsChange({
       ...options,
@@ -22,29 +34,51 @@ export const ConfigEditor: React.FC<Props> = ({ options, onOptionsChange }) => {
 
   return (
     <>
-      {/* DataSourceHttpSettings handles most the settings for connecting over
-      HTTP. */}
-      <DataSourceHttpSettings
-        defaultUrl="http://localhost:8080"
-        dataSourceConfig={options}
-        onChange={onOptionsChange}
+      <DataSourceDescription
+        dataSourceName="JSON API"
+        docsLink="https://grafana.github.io/grafana-json-datasource/"
+        hasRequiredFields={false}
+      />
+
+      <Divider />
+
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:8080" />
+
+      <Divider />
+
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
       />
 
-      {/* The Grafana proxy strips query parameters from the URL set in
-      DataSourceHttpSettings. To support custom query parameters, the user need
-      to set them explicitly.  */}
-      <h3 className="page-heading">Misc</h3>
-      <InlineFieldRow>
-        <InlineField label="Query string" tooltip="Add a custom query string to your queries.">
+      <Divider />
+
+      <ConfigSection title="Additional settings" isCollapsible>
+        <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+        <div className={styles.space} />
+
+        <Field label="Query string" description="Add a custom query string to your queries.">
           <Input
-            width={50}
+            width={40}
             value={options.jsonData.queryParams}
             onChange={onParamsChange}
             spellCheck={false}
-            placeholder="page=1&limit=100"
+            placeholder="limit=100"
           />
-        </InlineField>
-      </InlineFieldRow>
+        </Field>
+      </ConfigSection>
     </>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    space: css({
+      width: '100%',
+      height: theme.spacing(2),
+    }),
+  };
+};

src/components/Divider.tsx

@@ -0,0 +1,21 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
+// this custom component is necessary because the Grafana UI <Divider /> component is not backwards compatible with Grafana < 10.1.0
+export const Divider = () => {
+  const styles = useStyles2(getStyles);
+  return <hr className={styles.horizontalDivider} />;
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    horizontalDivider: css({
+      borderTop: `1px solid ${theme.colors.border.weak}`,
+      margin: theme.spacing(2, 0),
+      width: '100%',
+    }),
+  };
+};

yarn.lock

@@ -900,6 +900,15 @@
     eslint-plugin-react-hooks "4.6.0"
     typescript "4.8.4"
 
+"@grafana/experimental@^1.7.4":
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/@grafana/experimental/-/experimental-1.7.4.tgz#5b5efe89abf38b1d3358251148d42b9111de539e"
+  integrity sha512-uYkv9HRx+cqJRktsY43ApG0+kgG4fNR8lv+bkaFvGyCg46dcTeNqokujoPnHp6lt9MEn+0Y3jKEQbvCXjcz2bA==
+  dependencies:
+    "@types/uuid" "^8.3.3"
+    semver "^7.5.4"
+    uuid "^8.3.2"
+
 "@grafana/faro-core@^1.1.0":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@grafana/faro-core/-/faro-core-1.2.1.tgz#a95fd1376a928917f855068f101d356db067a0f4"
@@ -2248,6 +2257,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.3.tgz#3d06b6769518450871fbc40770b7586334bdfd90"
   integrity sha512-THo502dA5PzG/sfQH+42Lw3fvmYkceefOspdCwpHRul8ik2Jv1K8I5OZz1AT3/rs46kwgMCe9bSBmDLYkkOMGg==
 
+"@types/uuid@^8.3.3":
+  version "8.3.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
+  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
+
 "@types/yargs-parser@*":
   version "21.0.1"
   resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-21.0.1.tgz#07773d7160494d56aa882d7531aac7319ea67c3b"
@@ -8295,6 +8309,11 @@ uuid@9.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
   integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
 
+uuid@^8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"