From 5bd58be334dacbe6be9a3fef87f6d9c2b838d53f Mon Sep 17 00:00:00 2001
From: Kevin Yu <kevinwcyu@users.noreply.github.com>
Date: Thu, 7 Jul 2022 01:25:08 -0700
Subject: [PATCH] CloudMonitoring: Update Project to use experimental UI
 components (#51837)

---
 .../Experimental/MetricQueryEditor.tsx        |  2 +-
 .../components/Experimental/Project.tsx       | 51 +++++++++++++++++++
 .../Experimental/SLOQueryEditor.tsx           |  2 +-
 3 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
index 06428eca88d..4b8fff207f0 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.tsx
@@ -16,11 +16,11 @@ import {
   SLOQuery,
   ValueTypes,
 } from '../../types';
-import { Project } from '../index';
 
 import { MQLQueryEditor } from './../MQLQueryEditor';
 import { AliasBy } from './AliasBy';
 import { GraphPeriod } from './GraphPeriod';
+import { Project } from './Project';
 import { VisualMetricQueryEditor } from './VisualMetricQueryEditor';
 
 export interface Props {
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
new file mode 100644
index 00000000000..caa257d16d7
--- /dev/null
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Project.tsx
@@ -0,0 +1,51 @@
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { SelectableValue } from '@grafana/data';
+import { EditorField, EditorRow } from '@grafana/experimental';
+import { Select } from '@grafana/ui';
+
+import CloudMonitoringDatasource from '../../datasource';
+
+export interface Props {
+  refId: string;
+  datasource: CloudMonitoringDatasource;
+  onChange: (projectName: string) => void;
+  templateVariableOptions: Array<SelectableValue<string>>;
+  projectName: string;
+}
+
+export function Project({ refId, projectName, datasource, onChange, templateVariableOptions }: Props) {
+  const [projects, setProjects] = useState<Array<SelectableValue<string>>>([]);
+  useEffect(() => {
+    datasource.getProjects().then((projects) => setProjects(projects));
+  }, [datasource]);
+
+  const projectsWithTemplateVariables = useMemo(
+    () => [
+      projects,
+      {
+        label: 'Template Variables',
+        options: templateVariableOptions,
+      },
+      ...projects,
+    ],
+    [projects, templateVariableOptions]
+  );
+
+  return (
+    <EditorRow>
+      <EditorField label="Project">
+        <Select
+          width="auto"
+          allowCustomValue
+          formatCreateLabel={(v) => `Use project: ${v}`}
+          onChange={({ value }) => onChange(value!)}
+          options={projectsWithTemplateVariables}
+          value={{ value: projectName, label: projectName }}
+          placeholder="Select Project"
+          inputId={`${refId}-project`}
+        />
+      </EditorField>
+    </EditorRow>
+  );
+}
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
index baad97f1450..d340138bccf 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { SelectableValue } from '@grafana/data';
 import { EditorField, EditorFieldGroup, EditorRow, Stack } from '@grafana/experimental';
 
-import { Project } from '..';
 import { ALIGNMENT_PERIODS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
 import { AlignmentTypes, CustomMetaData, SLOQuery } from '../../types';
@@ -11,6 +10,7 @@ import { AlignmentTypes, CustomMetaData, SLOQuery } from '../../types';
 import { AliasBy } from './AliasBy';
 import { AlignmentPeriodLabel } from './AlignmentPeriodLabel';
 import { PeriodSelect } from './PeriodSelect';
+import { Project } from './Project';
 import { SLO } from './SLO';
 import { Selector } from './Selector';
 import { Service } from './Service';