CloudMonitoring: Update Project to use experimental UI components (#51837)

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 {

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>
+  );
+}

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';