Set projectName in componentDidMount to ensure GCE project is set (#53652) (#53670)

- Update componentDidMount to call ensureGCEDefaultProject to correctly set project name for GCE Service Account auth
- Set state appropriately
- Update test

(cherry picked from commit d6a0a5c9ed)

Co-authored-by: Andreas Christou <andreas.christou@grafana.com>

public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.test.tsx

@@ -34,6 +34,7 @@ const props: Props = {
     getMetricTypes: async (projectName: string) => Promise.resolve([]),
     getSLOServices: async (projectName: string) => Promise.resolve([]),
     getServiceLevelObjectives: (projectName: string, serviceId: string) => Promise.resolve([]),
+    ensureGCEDefaultProject: async () => Promise.resolve(''),
   } as unknown as CloudMonitoringDatasource,
   onRunQuery: () => {},
 };

public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx

@@ -57,14 +57,12 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
 
   constructor(props: Props) {
     super(props);
-    this.state = Object.assign(
-      this.defaults,
-      { projectName: this.props.datasource.getDefaultProject() },
-      this.props.query
-    );
+    this.state = Object.assign(this.defaults, this.props.query);
   }
 
   async componentDidMount() {
+    await this.props.datasource.ensureGCEDefaultProject();
+    const projectName = this.props.datasource.getDefaultProject();
     const projects = (await this.props.datasource.getProjects()) as MetricDescriptor[];
     const metricDescriptors = await this.props.datasource.getMetricTypes(
       this.props.query.projectName || this.props.datasource.getDefaultProject()
@@ -88,7 +86,7 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       getTemplateSrv().replace(selectedService)
     );
 
-    const sloServices = await this.props.datasource.getSLOServices(this.state.projectName);
+    const sloServices = await this.props.datasource.getSLOServices(projectName);
 
     const state: any = {
       services,
@@ -97,9 +95,10 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
       selectedMetricType,
       metricDescriptors,
       projects,
-      ...(await this.getLabels(selectedMetricType, this.state.projectName)),
+      ...(await this.getLabels(selectedMetricType, projectName)),
       sloServices,
       loading: false,
+      projectName,
     };
     this.setState(state, () => this.onPropsChange());
   }