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

---
 .../components/Experimental/Service.tsx       | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
index a759874da2e..c755e19976f 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/Service.tsx
@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
+import { EditorField, EditorRow } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
-import { QueryEditorRow } from '..';
-import { SELECT_WIDTH } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
 
@@ -37,18 +36,20 @@ export const Service: React.FC<Props> = ({ refId, query, templateVariableOptions
   }, [datasource, projectName, templateVariableOptions]);
 
   return (
-    <QueryEditorRow label="Service" htmlFor={`${refId}-slo-service`}>
-      <Select
-        inputId={`${refId}-slo-service`}
-        width={SELECT_WIDTH}
-        allowCustomValue
-        value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
-        placeholder="Select service"
-        options={services}
-        onChange={({ value: serviceId = '', label: serviceName = '' }) =>
-          onChange({ ...query, serviceId, serviceName, sloId: '' })
-        }
-      />
-    </QueryEditorRow>
+    <EditorRow>
+      <EditorField label="Service">
+        <Select
+          inputId={`${refId}-slo-service`}
+          width="auto"
+          allowCustomValue
+          value={query?.serviceId && { value: query?.serviceId, label: query?.serviceName || query?.serviceId }}
+          placeholder="Select service"
+          options={services}
+          onChange={({ value: serviceId = '', label: serviceName = '' }) =>
+            onChange({ ...query, serviceId, serviceName, sloId: '' })
+          }
+        />
+      </EditorField>
+    </EditorRow>
   );
 };