From cd323622b73dc6846c8c298bd025abf56c4b0e5a Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 6 Apr 2023 22:10:29 +0200
Subject: [PATCH] [v9.4.x] CloudMonitoring: Add project selector for MQL
 editor[fix] (#65844)

CloudMonitoring: Add project selector for MQL editor[fix] (#65567)

(cherry picked from commit 81cb84d098098a76318ad4e0f760b1b2e7ebb506)

Co-authored-by: Alyssa Bull <58453566+alyssabull@users.noreply.github.com>
---
 .../components/MetricQueryEditor.test.tsx                | 9 +++++++++
 .../cloud-monitoring/components/MetricQueryEditor.tsx    | 8 ++++++++
 .../datasource/cloud-monitoring/components/Project.tsx   | 1 -
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
index 82ca0af7ee1..4a1e679771c 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.test.tsx
@@ -55,4 +55,13 @@ describe('MetricQueryEditor', () => {
     const l = await screen.findByLabelText('Project');
     expect(l).toBeInTheDocument();
   });
+
+  it('renders a Project dropdown', async () => {
+    const query = createMockQuery();
+    query.queryType = QueryType.TIME_SERIES_QUERY;
+
+    render(<MetricQueryEditor {...defaultProps} />);
+    const projectDropdown = await screen.findByLabelText('Project');
+    expect(projectDropdown).toBeInTheDocument();
+  });
 });
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
index 6da65007a55..3375a3dd17d 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/MetricQueryEditor.tsx
@@ -15,6 +15,7 @@ import {
 
 import { GraphPeriod } from './GraphPeriod';
 import { MQLQueryEditor } from './MQLQueryEditor';
+import { Project } from './Project';
 import { VisualMetricQueryEditor } from './VisualMetricQueryEditor';
 
 export interface Props {
@@ -99,6 +100,13 @@ function Editor({
 
       {query.queryType === QueryType.TIME_SERIES_QUERY && query.timeSeriesQuery && (
         <>
+          <Project
+            refId={refId}
+            datasource={datasource}
+            onChange={(projectName) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, projectName: projectName })}
+            templateVariableOptions={variableOptionGroup.options}
+            projectName={query.timeSeriesQuery.projectName!}
+          />
           <MQLQueryEditor
             onChange={(q: string) => onChangeTimeSeriesQuery({ ...query.timeSeriesQuery!, query: q })}
             onRunQuery={onRunQuery}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
index 59f8038c6df..a36b41f2cd2 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Project.tsx
@@ -22,7 +22,6 @@ export function Project({ refId, projectName, datasource, onChange, templateVari
 
   const projectsWithTemplateVariables = useMemo(
     () => [
-      projects,
       {
         label: 'Template Variables',
         options: templateVariableOptions,