CloudMonitoring: Update SLO to use experimental UI components (#51839)

public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.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,20 +36,22 @@ export const SLO: React.FC<Props> = ({ refId, query, templateVariableOptions, on
   }, [datasource, projectName, serviceId, templateVariableOptions]);
 
   return (
-    <QueryEditorRow label="SLO" htmlFor={`${refId}-slo`}>
-      <Select
-        inputId={`${refId}-slo`}
-        width={SELECT_WIDTH}
-        allowCustomValue
-        value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
-        placeholder="Select SLO"
-        options={slos}
-        onChange={async ({ value: sloId = '', label: sloName = '' }) => {
-          const slos = await datasource.getServiceLevelObjectives(projectName, serviceId);
-          const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
-          onChange({ ...query, sloId, sloName, goal: slo?.goal });
-        }}
-      />
-    </QueryEditorRow>
+    <EditorRow>
+      <EditorField label="SLO">
+        <Select
+          inputId={`${refId}-slo`}
+          width="auto"
+          allowCustomValue
+          value={query?.sloId && { value: query?.sloId, label: query?.sloName || query?.sloId }}
+          placeholder="Select SLO"
+          options={slos}
+          onChange={async ({ value: sloId = '', label: sloName = '' }) => {
+            const slos = await datasource.getServiceLevelObjectives(projectName, serviceId);
+            const slo = slos.find(({ value }) => value === datasource.templateSrv.replace(sloId));
+            onChange({ ...query, sloId, sloName, goal: slo?.goal });
+          }}
+        />
+      </EditorField>
+    </EditorRow>
   );
 };