From 8322b353f5c2637ccf4d34fa61a9070920afb729 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Wed, 7 Jun 2023 17:56:35 +0200
Subject: [PATCH] Loki: Make stream selector input in variables editor larger
 (#69729)

* Loki: Make strem selector input in variables editor larger

* Remove 75%
---
 .../loki/components/VariableQueryEditor.tsx   | 58 ++++++++++---------
 1 file changed, 32 insertions(+), 26 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx b/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
index 74b4cb937282..4b46324d75dc 100644
--- a/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
+++ b/public/app/plugins/datasource/loki/components/VariableQueryEditor.tsx
@@ -70,33 +70,40 @@ export const LokiVariableQueryEditor = ({ onChange, query, datasource }: Props)
   };
 
   return (
-    <InlineFieldRow>
-      <InlineField label="Query type" labelWidth={20}>
-        <Select
-          aria-label="Query type"
-          onChange={onQueryTypeChange}
-          onBlur={handleBlur}
-          value={type}
-          options={variableOptions}
-          width={16}
-        />
-      </InlineField>
+    <>
+      <InlineFieldRow>
+        <InlineField label="Query type" labelWidth={20}>
+          <Select
+            aria-label="Query type"
+            onChange={onQueryTypeChange}
+            onBlur={handleBlur}
+            value={type}
+            options={variableOptions}
+            width={16}
+          />
+        </InlineField>
+        {type === QueryType.LabelValues && (
+          <>
+            <InlineField label="Label" labelWidth={20}>
+              <Select
+                aria-label="Label"
+                onChange={onLabelChange}
+                onBlur={handleBlur}
+                value={{ label: label, value: label }}
+                options={labelOptions}
+                width={16}
+                allowCustomValue
+              />
+            </InlineField>
+          </>
+        )}
+      </InlineFieldRow>
       {type === QueryType.LabelValues && (
-        <>
-          <InlineField label="Label" labelWidth={20}>
-            <Select
-              aria-label="Label"
-              onChange={onLabelChange}
-              onBlur={handleBlur}
-              value={{ label: label, value: label }}
-              options={labelOptions}
-              width={16}
-              allowCustomValue
-            />
-          </InlineField>
+        <InlineFieldRow>
           <InlineField
             label="Stream selector"
             labelWidth={20}
+            grow={true}
             tooltip={
               <div>
                 {
@@ -112,11 +119,10 @@ export const LokiVariableQueryEditor = ({ onChange, query, datasource }: Props)
               value={stream}
               onChange={onStreamChange}
               onBlur={handleBlur}
-              width={22}
             />
           </InlineField>
-        </>
+        </InlineFieldRow>
       )}
-    </InlineFieldRow>
+    </>
   );
 };