CloudMonitoring: Update Selector to use experimental UI components (#51840)

public/app/plugins/datasource/cloud-monitoring/components/Experimental/Selector.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
+import { EditorField, EditorRow } from '@grafana/experimental';
 import { Select } from '@grafana/ui';
 
-import { QueryEditorRow } from '..';
-import { SELECT_WIDTH, SELECTORS } from '../../constants';
+import { SELECTORS } from '../../constants';
 import CloudMonitoringDatasource from '../../datasource';
 import { SLOQuery } from '../../types';
 
@@ -18,21 +18,23 @@ export interface Props {
 
 export const Selector: React.FC<Props> = ({ refId, query, templateVariableOptions, onChange, datasource }) => {
   return (
-    <QueryEditorRow label="Selector" htmlFor={`${refId}-slo-selector`}>
-      <Select
-        inputId={`${refId}-slo-selector`}
-        width={SELECT_WIDTH}
-        allowCustomValue
-        value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}
-        options={[
-          {
-            label: 'Template Variables',
-            options: templateVariableOptions,
-          },
-          ...SELECTORS,
-        ]}
-        onChange={({ value: selectorName }) => onChange({ ...query, selectorName: selectorName ?? '' })}
-      />
-    </QueryEditorRow>
+    <EditorRow>
+      <EditorField label="Selector" htmlFor={`${refId}-slo-selector`}>
+        <Select
+          inputId={`${refId}-slo-selector`}
+          width="auto"
+          allowCustomValue
+          value={[...SELECTORS, ...templateVariableOptions].find((s) => s.value === query?.selectorName ?? '')}
+          options={[
+            {
+              label: 'Template Variables',
+              options: templateVariableOptions,
+            },
+            ...SELECTORS,
+          ]}
+          onChange={({ value: selectorName }) => onChange({ ...query, selectorName: selectorName ?? '' })}
+        />
+      </EditorField>
+    </EditorRow>
   );
 };