CloudWatch: Add multi-value template variable support for log group names in logs query builder (#49737)

* Add multi-value template variable support for log group names

* add test for multi-value template variable for log group names

* add test

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.test.tsx

@@ -1,8 +1,10 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { shallow } from 'enzyme';
 import _, { DebouncedFunc } from 'lodash'; // eslint-disable-line lodash/import-scope
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { openMenu, select } from 'react-select-event';
 
 import { SelectableValue } from '@grafana/data';
 
@@ -69,6 +71,7 @@ describe('CloudWatchLogsQueryField', () => {
                 return Promise.resolve(['log_group_2']);
               }
             },
+            getVariables: jest.fn().mockReturnValue([]),
           } as any
         }
         query={{} as any}
@@ -201,6 +204,7 @@ describe('CloudWatchLogsQueryField', () => {
                 .slice(0, Math.max(params.limit ?? 50, 50));
               return Promise.resolve(theLogGroups);
             },
+            getVariables: jest.fn().mockReturnValue([]),
           } as any
         }
         query={{} as any}
@@ -235,4 +239,33 @@ describe('CloudWatchLogsQueryField', () => {
         .concat(['WaterGroup', 'WaterGroup2', 'WaterGroup3', 'VelvetGroup', 'VelvetGroup2', 'VelvetGroup3'])
     );
   });
+
+  it('should render template variables a selectable option', async () => {
+    const { datasource } = setupMockedDataSource();
+    const onChange = jest.fn();
+
+    render(
+      <CloudWatchLogsQueryField
+        history={[]}
+        absoluteRange={{ from: 1, to: 10 }}
+        exploreId={ExploreId.left}
+        datasource={datasource}
+        query={{} as any}
+        onRunQuery={() => {}}
+        onChange={onChange}
+      />
+    );
+
+    const logGroupSelector = await screen.findByLabelText('Log Groups');
+    expect(logGroupSelector).toBeInTheDocument();
+
+    await openMenu(logGroupSelector);
+    const templateVariableSelector = await screen.findByText('Template Variables');
+    expect(templateVariableSelector).toBeInTheDocument();
+
+    userEvent.click(templateVariableSelector);
+    await select(await screen.findByLabelText('Select option'), 'test');
+
+    expect(await screen.findByText('test')).toBeInTheDocument();
+  });
 });

public/app/plugins/datasource/cloudwatch/components/LogsQueryField.tsx

@@ -27,6 +27,7 @@ import { CloudWatchLanguageProvider } from '../language_provider';
 import syntax from '../syntax';
 import { CloudWatchJsonData, CloudWatchLogsQuery, CloudWatchQuery } from '../types';
 import { getStatsGroups } from '../utils/query/getStatsGroups';
+import { appendTemplateVariables } from '../utils/utils';
 
 import QueryHeader from './QueryHeader';
 
@@ -310,7 +311,7 @@ export class CloudWatchLogsQueryField extends React.PureComponent<CloudWatchLogs
               <MultiSelect
                 aria-label="Log Groups"
                 allowCustomValue={allowCustomValue}
-                options={unionBy(availableLogGroups, selectedLogGroups, 'value')}
+                options={appendTemplateVariables(datasource, unionBy(availableLogGroups, selectedLogGroups, 'value'))}
                 value={selectedLogGroups}
                 onChange={(v) => {
                   this.setSelectedLogGroups(v);