From d00ea685e64086ea49284237daa4935d31efba59 Mon Sep 17 00:00:00 2001
From: Andreas Christou <andreas.christou@grafana.com>
Date: Wed, 4 Oct 2023 14:45:26 +0100
Subject: [PATCH] CloudMonitoring: Use `Field` instead of `InlineField`
 (#75829)

* Use Field instead of InlineField

* Prettify
---
 .../cloud-monitoring/components/Fields.tsx    |   6 +-
 .../components/VariableQueryEditor.tsx        |  14 +--
 .../VariableQueryEditor.test.tsx.snap         | 104 +++++++++++++++---
 3 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
index b04d70dce2e..f6cc8bb34ab 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/Fields.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { InlineField, Select } from '@grafana/ui';
+import { Field, Select } from '@grafana/ui';
 
 interface VariableQueryFieldProps {
   onChange: (value: string) => void;
@@ -19,7 +19,7 @@ export const VariableQueryField = ({
   allowCustomValue = false,
 }: VariableQueryFieldProps) => {
   return (
-    <InlineField label={label} labelWidth={20}>
+    <Field label={label}>
       <Select
         width={25}
         allowCustomValue={allowCustomValue}
@@ -27,6 +27,6 @@ export const VariableQueryField = ({
         onChange={({ value }) => onChange(value!)}
         options={options}
       />
-    </InlineField>
+    </Field>
   );
 };
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
index 5d188fabfa1..8a8bb39d032 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx
@@ -322,14 +322,12 @@ export class CloudMonitoringVariableQueryEditor extends PureComponent<Props, Var
   render() {
     if (this.state.loading) {
       return (
-        <div className="gf-form max-width-21">
-          <span className="gf-form-label width-10 query-keyword">Query Type</span>
-          <div className="gf-form-select-wrapper max-width-12">
-            <select className="gf-form-input">
-              <option>Loading...</option>
-            </select>
-          </div>
-        </div>
+        <VariableQueryField
+          value={'loading'}
+          options={[{ value: 'loading', label: 'Loading...' }]}
+          onChange={(value) => null}
+          label="Query Type"
+        />
       );
     }
 
diff --git a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
index 2d4fdc81ded..8d61351c259 100644
--- a/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
+++ b/public/app/plugins/datasource/cloud-monitoring/components/__snapshots__/VariableQueryEditor.test.tsx.snap
@@ -2,23 +2,99 @@
 
 exports[`VariableQueryEditor renders correctly 1`] = `
 <div
-  className="gf-form max-width-21"
+  className="css-1rplq84"
 >
-  <span
-    className="gf-form-label width-10 query-keyword"
-  >
-    Query Type
-  </span>
   <div
-    className="gf-form-select-wrapper max-width-12"
+    className="css-l4ykjo-Label"
   >
-    <select
-      className="gf-form-input"
-    >
-      <option>
-        Loading...
-      </option>
-    </select>
+    <label>
+      <div
+        className="css-70qvj9"
+      >
+        Query Type
+      </div>
+    </label>
+  </div>
+  <div>
+    <div>
+      <div
+        className="css-1nmqu8c-input-wrapper css-rmjxhr-SelectContainer"
+        onKeyDown={[Function]}
+      >
+        <span
+          className="css-1f43avz-a11yText-A11yText"
+          id="react-select-2-live-region"
+        />
+        <span
+          aria-atomic="false"
+          aria-live="polite"
+          aria-relevant="additions text"
+          className="css-1f43avz-a11yText-A11yText"
+        />
+        <div
+          className="css-1i88p6p"
+          onMouseDown={[Function]}
+          onTouchEnd={[Function]}
+        >
+          <div
+            className="css-1q0c0d5-grafana-select-value-container"
+          >
+            <div
+              className="css-8nwx1l-singleValue css-upz218-SingleValue"
+            >
+              Loading...
+            </div>
+            <div
+              className=" css-lq7btu-Input"
+              data-value=""
+            >
+              <input
+                aria-autocomplete="list"
+                aria-expanded={false}
+                aria-haspopup={true}
+                autoCapitalize="none"
+                autoComplete="off"
+                autoCorrect="off"
+                className=""
+                disabled={false}
+                id="react-select-2-input"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                role="combobox"
+                spellCheck="false"
+                style={
+                  {
+                    "background": 0,
+                    "border": 0,
+                    "color": "inherit",
+                    "font": "inherit",
+                    "gridArea": "1 / 2",
+                    "label": "input",
+                    "margin": 0,
+                    "minWidth": "2px",
+                    "opacity": 1,
+                    "outline": 0,
+                    "padding": 0,
+                    "width": "100%",
+                  }
+                }
+                tabIndex={0}
+                type="text"
+                value=""
+              />
+            </div>
+          </div>
+          <div
+            className="css-zyjsuv-input-suffix"
+          >
+            <div
+              className="css-1j2891d-Icon"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;