From 6d2d99e804a54aa06846ef4ce3b7d8a88e2c1de3 Mon Sep 17 00:00:00 2001
From: Kevin Yu <kevinwcyu@users.noreply.github.com>
Date: Thu, 7 Jul 2022 01:26:24 -0700
Subject: [PATCH] CloudMonitoring: Update SLO to use experimental UI components
 (#51839)

---
 .../components/Experimental/SLO.tsx           | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
index bdf16170ba5..22294300551 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLO.tsx
+++ b/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>
   );
 };