From bb6488338bc7a4806958a51f05e10324834e820f Mon Sep 17 00:00:00 2001
From: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
Date: Mon, 1 Mar 2021 16:08:53 +0100
Subject: [PATCH] Loki: Refactor line limit to use grafana/ui component
 (#31509)

* Refactor line limit to use grafana/ui component

* preprocess lines reefactor

* Revert "preprocess lines reefactor"

This reverts commit 9e9c0342694146e90f31dcda65a55831592b2089.
---
 .../loki/components/LokiOptionFields.tsx      | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
index d5fd8edeb24..4e3c0bb8d07 100644
--- a/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiOptionFields.tsx
@@ -4,7 +4,7 @@ import { css, cx } from 'emotion';
 import { LokiQuery } from '../types';
 
 // Types
-import { InlineFormLabel, RadioButtonGroup } from '@grafana/ui';
+import { InlineFormLabel, RadioButtonGroup, InlineField, Input } from '@grafana/ui';
 
 export interface LokiOptionFieldsProps {
   lineLimitValue: string;
@@ -108,21 +108,22 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
         )}
         aria-label="Line limit field"
       >
-        <InlineFormLabel width={5}>Line limit</InlineFormLabel>
-        <input
-          type="number"
-          className="gf-form-input width-4"
-          placeholder={'auto'}
-          min={0}
-          onChange={onMaxLinesChange}
-          onKeyDown={onReturnKeyDown}
-          value={lineLimitValue}
-          onBlur={() => {
-            if (runOnBlur) {
-              onRunQuery();
-            }
-          }}
-        />
+        <InlineField label="Line limit">
+          <Input
+            className="width-4"
+            placeholder="auto"
+            type="number"
+            min={0}
+            onChange={onMaxLinesChange}
+            onKeyDown={onReturnKeyDown}
+            value={lineLimitValue}
+            onBlur={() => {
+              if (runOnBlur) {
+                onRunQuery();
+              }
+            }}
+          />
+        </InlineField>
       </div>
     </div>
   );