Update datasource configuration page

src/components/ConfigEditor.tsx

@@ -1,37 +1,39 @@
-import { css } from '@emotion/css';
-import {
-  DataSourcePluginOptionsEditorProps,
-  onUpdateDatasourceJsonDataOptionChecked,
-  onUpdateDatasourceJsonDataOptionSelect,
-} from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, onUpdateDatasourceJsonDataOptionSelect } from '@grafana/data';
 import { AuthConfig, GOOGLE_AUTH_TYPE_OPTIONS } from '@grafana/google-sdk';
 import { config } from '@grafana/runtime';
-import { Field, FieldSet, InlineField, Select, Switch } from '@grafana/ui';
+import { Field, SecureSocksProxySettings, Select } from '@grafana/ui';
 import React from 'react';
 import { PROCESSING_LOCATIONS } from '../constants';
 import { BigQueryOptions, BigQuerySecureJsonData } from '../types';
 import { ConfigurationHelp } from './/ConfigurationHelp';
-
-const styles = {
-  toggle: css`
-    margin-top: 7px;
-    margin-left: 5px;
-  `,
-};
+import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import { Divider } from './Divider';
 
 export type BigQueryConfigEditorProps = DataSourcePluginOptionsEditorProps<BigQueryOptions, BigQuerySecureJsonData>;
 
 export const BigQueryConfigEditor: React.FC<BigQueryConfigEditorProps> = (props) => {
-  const { options } = props;
+  const { options, onOptionsChange } = props;
   const { jsonData } = options;
 
   return (
     <>
+      <DataSourceDescription
+        dataSourceName="Google BigQuery"
+        docsLink="https://grafana.com/grafana/plugins/grafana-bigquery-datasource/"
+        hasRequiredFields={false}
+      />
+
+      <Divider />
+
       <ConfigurationHelp />
 
+      <Divider />
+
       <AuthConfig {...props} authOptions={GOOGLE_AUTH_TYPE_OPTIONS} />
 
-      <FieldSet label="Other settings">
+      <Divider />
+
+      <ConfigSection title="Additional Settings" isCollapsible>
         <Field
           label="Processing location"
           description={
@@ -59,32 +61,9 @@ export const BigQueryConfigEditor: React.FC<BigQueryConfigEditorProps> = (props)
         </Field>
 
         {config.secureSocksDSProxyEnabled && (
-          <>
-            <InlineField
-              label="Secure Socks Proxy"
-              tooltip={
-                <>
-                  Enable proxying the datasource connection through the secure socks proxy to a different network. See{' '}
-                  <a
-                    href="https://grafana.com/docs/grafana/next/setup-grafana/configure-grafana/proxy/"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    Configure a datasource connection proxy.
-                  </a>
-                </>
-              }
-            >
-              <div className={styles.toggle}>
-                <Switch
-                  value={options.jsonData.enableSecureSocksProxy}
-                  onChange={onUpdateDatasourceJsonDataOptionChecked(props, 'enableSecureSocksProxy')}
-                />
-              </div>
-            </InlineField>
-          </>
+          <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
         )}
-      </FieldSet>
+      </ConfigSection>
     </>
   );
 };

src/components/ConfigurationHelp.tsx

@@ -1,74 +1,54 @@
 import React from 'react';
-import { Alert } from '@grafana/ui';
-import { TEST_IDS } from 'utils/testIds';
+import { Collapse } from '@grafana/ui';
 
 export const ConfigurationHelp = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+
   return (
-    <Alert
-      data-testid={TEST_IDS.helpBox}
-      title={`How to configure Google BigQuery datasource?`}
-      severity="info"
-      bottomSpacing={4}
+    <Collapse
+      collapsible
+      label="How to configure Google BigQuery datasource?"
+      isOpen={isOpen}
+      onToggle={() => setIsOpen((x) => !x)}
     >
-      <div>
-        <p>There are two ways to authenticate the BigQuery plugin:</p>
-        <ul style={{ padding: 'revert' }}>
-          <li>By uploading Google Service Account key</li>
-          <li>
-            By automatically retrieving credentials from the Google metadata server{' '}
-            <em>(only available when running Grafana on a GCE virtual machine)</em>
-          </li>
-        </ul>
-        <hr />
-        <h5>Uploading Google Service Account key</h5>
-        <p>
-          <a
-            className="external-link"
-            rel="noreferrer"
-            href="https://cloud.google.com/iam/docs/creating-managing-service-accounts"
-            target="_blank"
-          >
-            Create a Google Cloud Platform (GCP) Service Account
-          </a>{' '}
-          or the Project you want to show data. The <strong>BigQuery Data Viewer</strong> role and the{' '}
-          <strong>Job User</strong> role provide all the permissions that Grafana needs.{' '}
-          <a
-            className="external-link"
-            rel="noreferrer"
-            target="_blank"
-            href="https://console.cloud.google.com/apis/library/bigquery.googleapis.com"
-          >
-            BigQuery API
-          </a>{' '}
-          has to be enabled on GCP for the data source to work.
-          <br />
-          Find instructions on how to create a Service Account{' '}
-          <a
-            className="external-link"
-            rel="noreferrer"
-            target="_blank"
-            href="https://cloud.google.com/iam/docs/creating-managing-service-accounts"
-          >
-            here
-          </a>
-          .
-        </p>
-        <br />
-        <h5>Using GCE Default Service Account</h5>
-        <p>
-          When Grafana is running on a Google Compute Engine (GCE) virtual machine, it is possible for Grafana to
-          automatically retrieve the default project id and authentication token from the metadata server. For this to
-          work, you need to make sure that you have a service account that is setup as the default account for the
-          virtual machine and that the service account has been given read access to the BigQuery API.
-        </p>
-        <br />
-        <p>
-          <strong>
-            Note that, Grafana data source integrates with a single GCP project. If you need to visualize data from
-            multiple GCP projects, create one data source per GCP project.
-          </strong>
-        </p>
-      </div>
-    </Alert>
+      <h5>Uploading Google Service Account key</h5>
+      <p>
+        Create a{' '}
+        <a
+          className="external-link"
+          rel="noreferrer"
+          href="https://cloud.google.com/iam/docs/creating-managing-service-accounts"
+          target="_blank"
+        >
+          Google Cloud Platform (GCP) Service Account
+        </a>{' '}
+        on the project you want to show data. The <strong>BigQuery Data Viewer</strong> role and the{' '}
+        <strong>Job User</strong> role provide all the permissions that Grafana needs. The{' '}
+        <a
+          className="external-link"
+          rel="noreferrer"
+          target="_blank"
+          href="https://console.cloud.google.com/apis/library/bigquery.googleapis.com"
+        >
+          BigQuery API
+        </a>{' '}
+        has to be enabled on GCP for the data source to work.
+      </p>
+
+      <h5>Using GCE Default Service Account</h5>
+      <p>
+        When Grafana is running on a Google Compute Engine (GCE) virtual machine, it is possible for Grafana to
+        automatically retrieve the default project id and authentication token from the metadata server. For this to
+        work, you need to make sure that you have a service account that is setup as the default account for the virtual
+        machine and that the service account has been given read access to the BigQuery API.
+      </p>
+
+      <p>
+        <strong>
+          Note that, Grafana data source integrates with a single GCP project. If you need to visualize data from
+          multiple GCP projects, create one data source per GCP project.
+        </strong>
+      </p>
+    </Collapse>
   );
 };

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%',
+    }),
+  };
+};