Config Editor: Update with new Auth components

package.json

@@ -22,6 +22,7 @@
     "@grafana/aws-sdk": "0.0.37",
     "@grafana/data": "9.0.2",
     "@grafana/e2e-selectors": "9.0.2",
+    "@grafana/experimental": "^1.7.0",
     "@grafana/runtime": "9.0.2",
     "@grafana/ui": "9.0.2",
     "lodash": "4.17.21",

src/components/QueryEditor/QueryTypeEditor/index.tsx

@@ -7,6 +7,9 @@ import { queryTypeConfig, getQueryTypeOptions } from './utils';
 import { segmentStyles } from '../styles';
 import { QueryType } from '../../../types';
 
+const isValidQueryType = (t: string): t is QueryType => {
+  return Object.values(QueryType).includes(t as QueryType);
+};
 const toOption = (queryType: QueryType) => {
   return {
     label: queryTypeConfig[queryType].label,
@@ -26,7 +29,9 @@ export const QueryTypeEditor = ({ value }: Props) => {
     <Segment
       className={segmentStyles}
       options={getQueryTypeOptions(datasource.getSupportedQueryTypes())}
-      onChange={e => dispatch(changeQueryType(e.value!))}
+      onChange={e => {
+        isValidQueryType(e.value) && dispatch(changeQueryType(e.value!));
+      }}
       value={toOption(value)}
     />
   );

src/configuration/ConfigEditor.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { DataSourceHttpSettings } from '@grafana/ui';
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
 import { OpenSearchOptions } from '../types';
 import { OpenSearchDetails } from './OpenSearchDetails';
 import { LogsConfig } from './LogsConfig';
@@ -9,21 +8,54 @@ import { config, getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
 import { coerceOptions, isValidOptions } from './utils';
 import { SIGV4ConnectionConfig } from '@grafana/aws-sdk';
 import { OpenSearchDatasource } from 'datasource';
+import { AdvancedHttpSettings, Auth, AuthMethod, ConfigSection, convertLegacyAuthProps } from '@grafana/experimental';
+import { InlineField, Input, Select } from '@grafana/ui';
+import { css } from '@emotion/css';
+import { useEffectOnce } from 'react-use';
+
+const Sigv4MethodId: CustomMethodId = 'custom-sigv4'
+type CustomMethodId = `custom-${string}`;
+
+const ACCESS_OPTIONS: Array<SelectableValue<string>> = [
+  {
+    label: 'Server (default)',
+    value: 'proxy',
+  },
+  {
+    label: 'Browser',
+    value: 'direct',
+  },
+];
 
 export type Props = DataSourcePluginOptionsEditorProps<OpenSearchOptions>;
 export const ConfigEditor = (props: Props) => {
   const { options: originalOptions, onOptionsChange } = props;
+  const [visibleMethods, setVisibleMethods] = useState([AuthMethod.BasicAuth, AuthMethod.OAuthForward, ...(config.sigV4AuthEnabled? [Sigv4MethodId]: [])])
   const options = coerceOptions(originalOptions);
-
+  const convertedAuthProps = {
+    ...convertLegacyAuthProps({
+      config: props.options,
+      onChange: props.onOptionsChange,
+    }),
+  };
   // Apply some defaults on initial render
-  useEffect(() => {
+  useEffectOnce(() => {
     if (!isValidOptions(originalOptions)) {
       onOptionsChange(coerceOptions(originalOptions));
     }
+  });
 
-    // We can't enforce the eslint rule here because we only want to run this once.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  useEffect(function setAllowedAuthMethods() {
+    // if direct access, only basic auth and credentials
+    if (props.options.access === 'direct') {
+    setVisibleMethods([AuthMethod.BasicAuth, AuthMethod.CrossSiteCredentials])
+      if(!props.options.basicAuth) {
+        convertedAuthProps.onAuthMethodSelect(AuthMethod.BasicAuth);
+      }
+    } else {
+      setVisibleMethods([AuthMethod.BasicAuth, AuthMethod.OAuthForward, AuthMethod.CrossSiteCredentials, ...(config.sigV4AuthEnabled? [Sigv4MethodId]: [])])
+    }
+  }, [props.options.access])
 
   const [saved, setSaved] = useState(!!options.version && options.version > 1);
   const datasource = useDatasource(props);
@@ -50,18 +82,84 @@ export const ConfigEditor = (props: Props) => {
     setSaved(true);
   };
 
+
+  const onSelectAuth = (auth: AuthMethod | CustomMethodId) => {
+    // convertedAuthProps.onAuthMethodSelect(auth);
+    // hanve to overwrite props.onAuthMethodSelect cause it looks like there's a race condition when 
+    // calling both that and onChange below
+    if (auth === 'custom-sigv4') {
+      onOptionsChange({ ...props.options, basicAuth: false, withCredentials: false, jsonData: { ...props.options.jsonData, sigV4Auth: true } });
+    } else if (auth === AuthMethod.BasicAuth) {
+      onOptionsChange({ ...props.options, basicAuth: true, withCredentials: false, jsonData: { ...props.options.jsonData, sigV4Auth: false } })
+
+    } else if(auth === AuthMethod.CrossSiteCredentials){
+      onOptionsChange({ ...props.options, basicAuth: false, withCredentials: true, jsonData: { ...props.options.jsonData, sigV4Auth: false } })
+    } 
+    else{
+      onOptionsChange({ ...props.options, basicAuth: false, withCredentials: false, jsonData: { ...props.options.jsonData, sigV4Auth: false } })
+
+    }
+  };
+
   return (
     <>
-      <DataSourceHttpSettings
-        defaultUrl={'http://localhost:9200'}
-        dataSourceConfig={options}
-        showAccessOptions={true}
-        onChange={onOptionsChange}
-        sigV4AuthToggleEnabled={config.sigV4AuthEnabled}
-        renderSigV4Editor={<SIGV4ConnectionConfig {...props}></SIGV4ConnectionConfig>}
+      {/* css */}
+    <ConfigSection
+      title="HTTP"
+      className={css`{marginBottom: 24px}`}
+    >
+      <InlineField
+        label="URL"
+        labelWidth={16}
+        required
+        htmlFor="url-input"
+        interactive
+        grow
+      >
+        <Input
+          id="url-input"
+          placeholder="http://localhost:9200"
+          value={props.options.url}
+          onChange={(e) => onOptionsChange({...props.options, url: e.currentTarget.value})}
+          required
+          width={40}
+        />
+      </InlineField>
+      <InlineField label="Access" labelWidth={16} style={{ marginBottom: 16 }}>
+        <Select 
+          aria-label="Access"
+          className="width-20 gf-form-input"
+          options={ACCESS_OPTIONS}
+          value={ACCESS_OPTIONS.filter((o) => o.value === props.options.access)[0] || ACCESS_OPTIONS[0]}
+          onChange={(selectedValue) => onOptionsChange({...props.options, access: selectedValue.value})}
+          disabled={ props.options.readOnly}
+        /> 
+      </InlineField>
+      <AdvancedHttpSettings
+      className={css({marginBottom: 16})}
+        config={ props.options}
+        onChange={props.onOptionsChange}
+      />
+      </ConfigSection>
+
+      <Auth
+
+        { ...convertedAuthProps}
+        selectedMethod={props.options.jsonData.sigV4Auth ? 'custom-sigv4' : convertedAuthProps.selectedMethod}
+        visibleMethods={visibleMethods}
+        customMethods={[
+          {
+            id: 'custom-sigv4',
+            label: 'SigV4',
+            description: 'sigv4 deszcription',
+            component: <SIGV4ConnectionConfig options={options} onOptionsChange={onOptionsChange} />,
+          },
+        ]}
+        onAuthMethodSelect={onSelectAuth}
+        customHeaders={convertedAuthProps.customHeaders}
       />
 
-      <OpenSearchDetails value={options} onChange={onOptionsChange} saveOptions={saveOptions} datasource={datasource} />
+      <OpenSearchDetails  value={options} onChange={onOptionsChange} saveOptions={saveOptions} datasource={datasource} />
 
       <LogsConfig
         value={options.jsonData}

src/configuration/OpenSearchDetails.tsx

@@ -75,7 +75,7 @@ export const OpenSearchDetails = (props: Props) => {
   };
 
   return (
-    <>
+    <div style={{ marginTop: 24 }}>
       <h3 className="page-heading">OpenSearch details</h3>
 
       {!value.jsonData.serverless && (
@@ -216,7 +216,7 @@ export const OpenSearchDetails = (props: Props) => {
           </div>
         )}
       </div>
-    </>
+    </div>
   );
 };
 

yarn.lock

@@ -1676,6 +1676,14 @@
     eslint-plugin-react-hooks "4.3.0"
     typescript "4.6.4"
 
+"@grafana/experimental@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@grafana/experimental/-/experimental-1.7.0.tgz#f05ce178f3201cd5268645eb14dc5bcfefa05a4c"
+  integrity sha512-3DfDzGTUnvG/v2U0lhBaB05j4x0bczrgylrg5Co6LMyRYh1kPA4XnK0dTshSxA6igjKqAjSacfwZQ40f4rLdqw==
+  dependencies:
+    "@types/uuid" "^8.3.3"
+    uuid "^8.3.2"
+
 "@grafana/runtime@9.0.2":
   version "9.0.2"
   resolved "https://registry.yarnpkg.com/@grafana/runtime/-/runtime-9.0.2.tgz#d8fef14bbfc3e716d71043e31eb8d99f4414b13b"
@@ -3144,6 +3152,11 @@
   dependencies:
     source-map "^0.6.1"
 
+"@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/webpack-dev-server@3":
   version "3.11.6"
   resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.11.6.tgz#d8888cfd2f0630203e13d3ed7833a4d11b8a34dc"