Fix: Config editor crash when global query added (#1330)

Author: zoltanbedi

.changeset/wet-countries-breathe.md

@@ -0,0 +1,5 @@
+---
+'grafana-infinity-datasource': patch
+---
+
+Fix: Config editor crash when global query added

src/components/SourceSelector.tsx

@@ -16,7 +16,14 @@ export const SourceSelector = (props: { query: InfinityQuery; onChange: (e: Infi
   };
   return (
     <EditorField label={query.type === 'series' ? 'Scenario' : 'Source'} horizontal={true}>
-      <Select width={18} options={supportedSources} value={query.source || 'url'} onChange={(e) => onSourceChange(e.value as InfinityQuerySources)} menuShouldPortal={true}></Select>
+      <Select
+        width={18}
+        data-testid="infinity-query-source-selector"
+        options={supportedSources}
+        value={query.source || 'url'}
+        onChange={(e) => onSourceChange(e.value as InfinityQuerySources)}
+        menuShouldPortal={true}
+      ></Select>
     </EditorField>
   );
 };

src/editors/config.editor.tsx

@@ -219,6 +219,7 @@ export const InfinityConfigEditor = (props: DataSourcePluginOptionsEditorProps<I
               tabIndex={tabIndex + 1}
               className={activeTab === tab.value ? styles.tab_active : styles.tab}
               onClick={() => setActiveTab(tab.value)}
+              role="button"
               onKeyDown={(e) => {
                 if (e.key === ' ' || e.key === 'Enter') {
                   setActiveTab(tab.value);

src/editors/config/GlobalQueryEditor.tsx

@@ -1,9 +1,11 @@
+import { Datasource } from '@/datasource';
+import { InfinityQueryEditor } from '@/editors/query/infinityQuery';
+import type { GlobalInfinityQuery, InfinityOptions, InfinityQuery } from '@/types';
 import { DataSourcePluginOptionsEditorProps, DataSourceSettings } from '@grafana/data';
+import { getDataSourceSrv } from '@grafana/runtime';
 import { Button, Drawer, InlineFormLabel, Input, Stack } from '@grafana/ui';
 import React, { useState } from 'react';
-import { InfinityQueryEditor } from '@/editors/query/infinityQuery';
-import { Datasource } from '@/datasource';
-import type { GlobalInfinityQuery, InfinityOptions, InfinityQuery } from '@/types';
+import { useAsync } from 'react-use';
 
 const DefaultGlobalQuery: InfinityQuery = {
   refId: '',
@@ -106,6 +108,7 @@ const GlobalQuery = (props: { query: GlobalInfinityQuery; onUpdate: (query: Glob
   const [id, setId] = useState(query.id || '');
   const [name, setName] = useState(query.name || '');
   const [popupState, setPopupState] = useState(false);
+  const datasource = useAsync(async () => await getDataSourceSrv().get(options.name));
   return (
     <>
       <Button
@@ -148,7 +151,7 @@ const GlobalQuery = (props: { query: GlobalInfinityQuery; onUpdate: (query: Glob
               onRunQuery={() => {}}
               instanceSettings={options}
               mode="global"
-              datasource={{} as Datasource}
+              datasource={datasource.value as Datasource}
             />
             <Button variant="primary" onClick={() => setPopupState(false)}>
               Update

tests/e2e/configeditor.spec.ts

@@ -0,0 +1,14 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('Config editor: should be able to add a global query', async ({ createDataSourceConfigPage, page }) => {
+    await createDataSourceConfigPage({ type: 'yesoreyeram-infinity-datasource' });
+    await page.getByRole('button', { name: 'Global queries' }).click();
+    await page.getByRole('button', { name: 'Add Global Query' }).click();
+    await page.getByRole('button', { name: 'Edit' }).click();
+
+    await page.getByTestId('infinity-query-source-selector').click();
+    const select = page.getByLabel('Select options menu');
+    await select.locator(page.getByText('Reference')).click();
+
+    expect(await page.getByTestId('infinity-query-field-label-reference')).toBeVisible();
+});