e2e: config auth workflows

.changeset/puny-needles-wish.md

@@ -0,0 +1,5 @@
+---
+'grafana-infinity-datasource': patch
+---
+
+Migrated deprecated `Select` component to `Combobox` across the plugin

.changeset/swift-numbers-smoke.md

@@ -0,0 +1,5 @@
+---
+'grafana-infinity-datasource': minor
+---
+
+Updated the required grafana version to 11.6 from 10.4

cspell.config.json

@@ -21,6 +21,7 @@
     "website/out/**",
     "website/public/**",
     "renovate.json",
+    "jest*.js",
     "docker-compose-debug.yaml",
     "docker-compose.yaml"
   ],
@@ -39,6 +40,7 @@
     "clsx",
     "cmdk",
     "Collapsable",
+    "Combobox",
     "compatibilitycheck",
     "contentlayer",
     "countif",

docker-compose.yaml

@@ -7,4 +7,27 @@ services:
       - ./provisioning/dashboards-actual/:/dashboards/
       - ./conf:/grafana-config
     environment:
-      - GF_PATHS_CONFIG=/grafana-config/grafana.ini 
+      - GF_PATHS_CONFIG=/grafana-config/grafana.ini
+    depends_on:
+      - httpbin
+    networks:
+      - infinity-test-network
+
+  httpbin:
+    image: mccutchen/go-httpbin:latest
+    container_name: 'infinity-httpbin'
+    ports:
+      - "8888:8080"
+    networks:
+      - infinity-test-network
+    environment:
+      - MAX_BODY_SIZE=10485760
+    healthcheck:
+      test: ["CMD", "wget", "--quiet", "--tries=1", "--spider", "http://localhost:8080/status/200"]
+      interval: 5s
+      timeout: 3s
+      retries: 3
+
+networks:
+  infinity-test-network:
+    driver: bridge 

jest-setup.js

@@ -1,2 +1,7 @@
 // Jest setup provided by Grafana scaffolding
 import './.config/jest-setup';
+
+// Mock canvas context for Combobox component
+HTMLCanvasElement.prototype.getContext = jest.fn(() => ({
+  measureText: jest.fn(() => ({ width: 100 })),
+})) as any;

playwright.config.ts

@@ -1,9 +1,16 @@
+/// <reference types="node" />
 import type { PluginOptions } from '@grafana/plugin-e2e';
 import { defineConfig, devices } from '@playwright/test';
 import { dirname } from 'node:path';
 
 const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
 
+// Test auth server URL for authentication E2E tests
+// Health checks are executed by the Grafana backend (inside Docker),
+// so the URL must be reachable from within the Docker network.
+// In Docker: http://httpbin:8080 (service name + internal port)
+export const testAuthServerUrl = process.env.TEST_AUTH_SERVER_URL || 'http://httpbin:8080';
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv

src/app/parsers/filter.ts

@@ -1,8 +1,8 @@
 import { FilterOperator } from '@/constants';
 import type { GrafanaTableRow, InfinityColumn, InfinityFilter } from '@/types';
-import type { SelectableValue } from '@grafana/data';
+import type { ComboboxOption } from '@grafana/ui';
 
-export const filterOperators: Array<SelectableValue<FilterOperator>> = [
+export const filterOperators: Array<ComboboxOption<FilterOperator>> = [
   { label: 'Equals', value: FilterOperator.Equals },
   { label: 'Not Equals', value: FilterOperator.NotEquals },
   { label: 'Contains', value: FilterOperator.Contains },

src/components/FormatSelector.test.tsx

@@ -1,4 +1,4 @@
-import { render, within } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import React from 'react';
 import { DefaultInfinityQuery } from '@/constants';
 import { Components } from '@/selectors';
@@ -17,7 +17,7 @@ describe('FormatSelector', () => {
     expect(wrapper).not.toBeNull();
     expect(wrapper.getByText(LabelText)).toBeInTheDocument();
     expect(wrapper.getByTitle(DropdownPlaceholderTitle)).toBeInTheDocument();
-    expect(within(wrapper.getByTitle(DropdownPlaceholderTitle)).getByText('Table')).toBeInTheDocument();
+    expect(wrapper.getByDisplayValue('Table')).toBeInTheDocument();
   });
   it('renders timeseries format', () => {
     const onChange = jest.fn();
@@ -27,6 +27,6 @@ describe('FormatSelector', () => {
     expect(wrapper).not.toBeNull();
     expect(wrapper.getByText(LabelText)).toBeInTheDocument();
     expect(wrapper.getByTitle(DropdownPlaceholderTitle)).toBeInTheDocument();
-    expect(within(wrapper.getByTitle(DropdownPlaceholderTitle)).getByText('Time Series')).toBeInTheDocument();
+    expect(wrapper.getByDisplayValue('Time Series')).toBeInTheDocument();
   });
 });

src/components/FormatSelector.tsx

@@ -1,4 +1,4 @@
-import { Select } from '@grafana/ui';
+import { Combobox } from '@grafana/ui';
 import React from 'react';
 import { isDataQuery } from '@/app/utils';
 import { EditorField } from '@/components/extended/EditorField';
@@ -31,7 +31,7 @@ export const FormatSelector = (props: FormatSelectorProps) => {
   return (
     <EditorField label={Components.QueryEditor.Format.Label.Text} horizontal={true}>
       <div title={Components.QueryEditor.Format.Dropdown.PlaceHolder.Title} data-testid="infinity-query-format-selector">
-        <Select className="min-width-12 width-12" value={query.format} options={getFormats()} onChange={(e) => onFormatChange(e.value as InfinityQueryFormat)} menuShouldPortal={true} />
+        <Combobox width={24} value={query.format} options={getFormats()} onChange={(e) => onFormatChange(e.value as InfinityQueryFormat)} />
       </div>
     </EditorField>
   );

src/components/GlobalQuerySelector.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { Select } from '@grafana/ui';
+import { Combobox, type ComboboxOption } from '@grafana/ui';
 import { EditorField } from '@/components/extended/EditorField';
 import type { GlobalInfinityQuery, InfinityQuery } from '@/types';
-import type { SelectableValue } from '@grafana/data';
 
 export const GlobalQuerySelector = (props: { query: InfinityQuery; instanceSettings: any; onChange: (e: InfinityQuery) => void; onRunQuery: () => void }) => {
   const { query, onChange, onRunQuery, instanceSettings } = props;
   if (query.type !== 'global') {
     return <></>;
   }
-  const global_queries: SelectableValue[] = (instanceSettings?.jsonData?.global_queries || []).map((q: GlobalInfinityQuery) => {
+  const global_queries: Array<ComboboxOption<string>> = (instanceSettings?.jsonData?.global_queries || []).map((q: GlobalInfinityQuery) => {
     return {
       label: q.name,
       value: q.id,
@@ -21,11 +20,9 @@ export const GlobalQuerySelector = (props: { query: InfinityQuery; instanceSetti
   };
   return (
     <>
-      <EditorField label="Source">
+      <EditorField label="Source" horizontal={true}>
         {global_queries.length > 0 ? (
-          <div style={{ marginRight: '5px' }}>
-            <Select options={global_queries} value={query.global_query_id} onChange={(e) => onGlobalQueryIDChange(e.value as string)} menuShouldPortal={true}></Select>
-          </div>
+          <Combobox options={global_queries} value={query.global_query_id} onChange={(e) => onGlobalQueryIDChange(e.value)}></Combobox>
         ) : (
           <label className="gf-form-label width-8">No Queries found</label>
         )}

src/components/QueryColumnItem.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { isDataQuery, isBackendQuery } from '@/app/utils';
 import { INFINITY_COLUMN_FORMATS } from '@/constants';
-import { Select, InlineFormLabel, Input } from '@grafana/ui';
+import { Combobox, InlineFormLabel, Input } from '@grafana/ui';
 import type { InfinityColumn, InfinityColumnFormat, InfinityQuery } from '@/types';
 
 interface QueryColumnItemProps {
@@ -45,19 +45,19 @@ export const QueryColumnItem = (props: QueryColumnItemProps) => {
       <InlineFormLabel width={2}>as</InlineFormLabel>
       <Input value={text} width={20} placeholder="Title" onChange={(e) => setText(e.currentTarget.value)} onBlur={onTextChange}></Input>
       <InlineFormLabel width={5}>format as</InlineFormLabel>
-      <Select width={24} value={column.type} options={INFINITY_COLUMN_FORMATS} onChange={(e) => onFormatChange(e.value as InfinityColumnFormat)} menuShouldPortal={true}></Select>
+      <Combobox width={24} value={column.type} options={INFINITY_COLUMN_FORMATS} onChange={(e) => onFormatChange(e.value as InfinityColumnFormat)}></Combobox>
       {(isBackendQuery(query) || query.type === 'google-sheets') && column.type === 'timestamp' && (
         <>
           <div style={{ marginLeft: '5px' }}>
             <InlineFormLabel width={11} tooltip={'Timestamp format in golang layout. Example: 2006-01-02T15:04:05Z07:00'}>
               Time Format (optional)
             </InlineFormLabel>
           </div>
-          <Select
+          <Combobox
             width={30}
             value={column.timestampFormat}
             placeholder="Auto"
-            allowCustomValue={true}
+            createCustomValue={true}
             options={[
               { value: '', label: 'Auto' },
               { value: '2006-01-02T15:04:05Z07:00', label: 'Default ISO' },

src/components/SourceSelector.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { INFINITY_SOURCES } from '@/constants';
-import { Select } from '@grafana/ui';
+import { Combobox } from '@grafana/ui';
 import { EditorField } from '@/components/extended/EditorField';
 import type { InfinityQuery, InfinityQuerySources } from '@/types';
 
@@ -16,14 +16,13 @@ export const SourceSelector = (props: { query: InfinityQuery; onChange: (e: Infi
   };
   return (
     <EditorField label={query.type === 'series' ? 'Scenario' : 'Source'} horizontal={true}>
-      <Select
+      <Combobox
         width={18}
         data-testid="infinity-query-source-selector"
         options={supportedSources}
         value={query.source || 'url'}
         onChange={(e) => onSourceChange(e.value as InfinityQuerySources)}
-        menuShouldPortal={true}
-      ></Select>
+      ></Combobox>
     </EditorField>
   );
 };

src/components/TypeSelector.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Select } from '@grafana/ui';
+import { Combobox, type ComboboxOption } from '@grafana/ui';
 import { SCRAP_QUERY_TYPES } from '@/constants';
 import { EditorField } from '@/components/extended/EditorField';
 import type { EditorMode, InfinityQuery, InfinityQueryType } from '@/types';
-import type { SelectableValue } from '@grafana/data';
 
 export const TypeSelector = (props: { query: InfinityQuery; onChange: (e: InfinityQuery) => void; onRunQuery: () => void; mode: EditorMode }) => {
   const { query, mode, onChange, onRunQuery } = props;
-  const getTypes = (): Array<SelectableValue<InfinityQueryType>> => {
+  const getTypes = (): Array<ComboboxOption<InfinityQueryType>> => {
     switch (mode) {
       case 'standard':
         return SCRAP_QUERY_TYPES;
@@ -25,7 +24,7 @@ export const TypeSelector = (props: { query: InfinityQuery; onChange: (e: Infini
   };
   return (
     <EditorField label="Type" tag={query.type === 'google-sheets' ? 'beta' : ''} horizontal={true}>
-      <Select width={21} options={getTypes()} onChange={(e) => onTypeChange(e.value as InfinityQueryType)} value={query.type || 'json'} menuShouldPortal={true}></Select>
+      <Combobox width={21} options={getTypes()} onChange={(e) => onTypeChange(e.value as InfinityQueryType)} value={query.type || 'json'}></Combobox>
     </EditorField>
   );
 };

src/components/config/SecureFieldsEditor.tsx

@@ -30,7 +30,7 @@ const SecureFieldEditor = ({
     marginBottom: '4px',
   };
   return (
-    <div style={layoutStyle}>
+    <div style={layoutStyle} data-testid={`infinity-config-secure-field-${label}`}>
       <FormField
         label={label || 'Key'}
         labelWidth={labelWidth || 8}

src/constants.ts

@@ -1,4 +1,4 @@
-import type { SelectableValue } from '@grafana/data';
+import type { ComboboxOption } from '@grafana/ui';
 import type { InfinityQuery, InfinityQueryType, InfinityQueryFormat, InfinityColumnFormat, ScrapQuerySources, VariableQueryType, AzureBlobCloudType } from '@/types';
 
 export const DefaultInfinityQuery: InfinityQuery = {
@@ -13,7 +13,7 @@ export const DefaultInfinityQuery: InfinityQuery = {
   filters: [],
 };
 
-export const SCRAP_QUERY_TYPES: Array<SelectableValue<InfinityQueryType>> = [
+export const SCRAP_QUERY_TYPES: Array<ComboboxOption<InfinityQueryType>> = [
   { label: 'JSON', value: 'json' },
   { label: 'CSV', value: 'csv' },
   { label: 'TSV', value: 'tsv' },
@@ -27,7 +27,7 @@ export const SCRAP_QUERY_TYPES: Array<SelectableValue<InfinityQueryType>> = [
   { label: 'Global Query', value: 'global' },
   { label: 'Transformations', value: 'transformations' },
 ];
-export const INFINITY_RESULT_FORMATS: Array<SelectableValue<InfinityQueryFormat>> = [
+export const INFINITY_RESULT_FORMATS: Array<ComboboxOption<InfinityQueryFormat>> = [
   { label: 'Data Frame', value: 'dataframe' },
   { label: 'Table', value: 'table' },
   { label: 'Logs', value: 'logs' },
@@ -45,7 +45,7 @@ export const INFINITY_SOURCES: ScrapQuerySources[] = [
   { label: 'Random Walk', value: 'random-walk', supported_types: ['series'] },
   { label: 'Expression', value: 'expression', supported_types: ['series'] },
 ];
-export const INFINITY_COLUMN_FORMATS: Array<SelectableValue<InfinityColumnFormat>> = [
+export const INFINITY_COLUMN_FORMATS: Array<ComboboxOption<InfinityColumnFormat>> = [
   { label: 'String', value: 'string' },
   { label: 'Number', value: 'number' },
   { label: 'Time', value: 'timestamp' },
@@ -54,7 +54,7 @@ export const INFINITY_COLUMN_FORMATS: Array<SelectableValue<InfinityColumnFormat
   { label: 'Boolean', value: 'boolean' },
 ];
 
-export const variableQueryTypes: Array<SelectableValue<VariableQueryType>> = [
+export const variableQueryTypes: Array<ComboboxOption<VariableQueryType>> = [
   {
     label: 'Infinity',
     value: 'infinity',
@@ -95,7 +95,7 @@ export enum FilterOperator {
   NumberGreaterThanOrEqualTo = '>=',
 }
 
-export const AWSRegions: Array<SelectableValue<string>> = [
+export const AWSRegions: Array<ComboboxOption<string>> = [
   'af-south-1',
   'ap-east-1',
   'ap-northeast-1',
@@ -127,7 +127,7 @@ export const AWSRegions: Array<SelectableValue<string>> = [
 
 export const AzureBlobCloudTypeDefault: AzureBlobCloudType = 'AzureCloud';
 
-export const AzureBlobRegions: Array<SelectableValue<AzureBlobCloudType>> = [
+export const AzureBlobRegions: Array<ComboboxOption<AzureBlobCloudType>> = [
   { value: 'AzureCloud', label: 'Azure' },
   { value: 'AzureUSGovernment', label: 'Azure US Government' },
   { value: 'AzureChinaCloud', label: 'Azure China' },

src/editors/config/Auth.AzureBlob.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Stack, InlineLabel, Input, SecretInput, Select } from '@grafana/ui';
+import { Stack, InlineLabel, Input, SecretInput, Combobox } from '@grafana/ui';
 import { onUpdateDatasourceSecureJsonDataOption, DataSourcePluginOptionsEditorProps } from '@grafana/data';
 import { Components } from '@/selectors';
 import { AzureBlobRegions, AzureBlobCloudTypeDefault } from '@/constants';
@@ -28,7 +28,7 @@ export const AzureBlobAuthEditor = (
         <InlineLabel width={24} tooltip={RegionSelector.tooltip}>
           {RegionSelector.label}
         </InlineLabel>
-        <Select
+        <Combobox
           width={24}
           aria-label={RegionSelector.ariaLabel}
           options={AzureBlobRegions}

src/editors/config/Auth.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { onUpdateDatasourceSecureJsonDataOption, DataSourcePluginOptionsEditorProps, SelectableValue } from '@grafana/data';
-import { Icon, InlineFormLabel, LegacyForms, RadioButtonGroup, Select, Grid, Link, useTheme2 } from '@grafana/ui';
+import { Icon, InlineFormLabel, LegacyForms, RadioButtonGroup, Combobox, Grid, Link, useTheme2 } from '@grafana/ui';
 import React, { useState } from 'react';
 import { AllowedHostsEditor } from '@/editors/config/AllowedHosts';
 import { AzureBlobAuthEditor } from '@/editors/config/Auth.AzureBlob';
@@ -230,7 +230,7 @@ export const AuthEditor = (props: DataSourcePluginOptionsEditorProps<InfinityOpt
               <>
                 <div className="gf-form">
                   <InlineFormLabel>Region</InlineFormLabel>
-                  <Select width={24} options={AWSRegions} placeholder="us-east-2" onChange={(e) => onAwsRegionChange(e.value!)} value={props.options.jsonData?.aws?.region || ''} />
+                  <Combobox width={24} options={AWSRegions} placeholder="us-east-2" onChange={(e) => onAwsRegionChange(e.value!)} value={props.options.jsonData?.aws?.region || ''} />
                 </div>
                 <div className="gf-form">
                   <FormField

src/editors/config/CustomHealthCheckEditor.tsx

@@ -8,9 +8,10 @@ export const CustomHealthCheckEditor = (props: DataSourcePluginOptionsEditorProp
   const { jsonData = {} } = options;
   return (
     <>
-      <div className="gf-form">
+      <div className="gf-form" data-testid="enable_custom_healthcheck_wrapper">
         <InlineLabel width={36}>Enable custom health check</InlineLabel>
         <InlineSwitch
+          data-testid="enable_custom_healthcheck_switch"
           value={jsonData.customHealthCheckEnabled || false}
           onChange={(e) => onOptionsChange({ ...options, jsonData: { ...jsonData, customHealthCheckEnabled: e.currentTarget.checked } })}
         />

src/editors/config/OtherAuthProviders.tsx

@@ -1,9 +1,9 @@
-import { InlineFormLabel, Modal, Select } from '@grafana/ui';
+import { InlineFormLabel, Modal, Combobox, type ComboboxOption } from '@grafana/ui';
 import React, { useState } from 'react';
 import { GuidedBasicAuthEditor } from '@/editors/config/guided-config/GuidedBasicAuthEditor';
 import { GoogleJWTEditor } from '@/editors/config/guided-config/GoogleJWT';
 import type { InfinityOptions } from '@/types';
-import type { DataSourceSettings, SelectableValue } from '@grafana/data';
+import type { DataSourceSettings } from '@grafana/data';
 
 export const OthersAuthentication = (props: {
   options: DataSourceSettings<InfinityOptions, {}>;
@@ -12,7 +12,7 @@ export const OthersAuthentication = (props: {
   onClose: () => void;
 }) => {
   const [provider, setProvider] = useState('Other');
-  const providers: Array<SelectableValue<string>> = [
+  const providers: Array<ComboboxOption<string>> = [
     { label: 'Github', value: 'github' },
     { label: 'Google JWT', value: 'google-jwt' },
   ];
@@ -26,7 +26,7 @@ export const OthersAuthentication = (props: {
       <Modal title="Other Authentication" isOpen={isOpen} onDismiss={onClose}>
         <div className="gf-form">
           <InlineFormLabel width={12}>Provider</InlineFormLabel>
-          <Select value={provider} options={providers} onChange={(e) => setProvider(e?.value!)} isClearable={true} menuShouldPortal={true}></Select>
+          <Combobox value={provider} options={providers} onChange={(e) => setProvider(e?.value!)} isClearable={true}></Combobox>
         </div>
         {provider === 'github' && (
           <GuidedBasicAuthEditor

src/editors/config/guided-config/GoogleJWT.tsx

@@ -6,7 +6,7 @@ import type { InfinityOptions } from '@/types';
 type GoogleJWTEditorProps = {
   options: DataSourceSettings<InfinityOptions, {}>;
   onChange: (options: DataSourceSettings<InfinityOptions, {}>) => void;
-  children?: React.ReactChild;
+  children?: React.ReactNode;
   moreLink?: string;
 };