Loki: Fix showing of correct line limit in options (#69572)

* Loki: Fix showing of line limit

* Refactor tests to not use id

public/app/plugins/datasource/loki/components/LokiOptionFields.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen, waitFor, fireEvent } from '@testing-library/react';
 import React from 'react';
 
-import { LokiOptionFieldsProps, LokiOptionFields } from './LokiOptionFields';
+import { LokiOptionFieldsProps, LokiOptionFields, preprocessMaxLines } from './LokiOptionFields';
 
 const setup = () => {
   const lineLimitValue = '1';
@@ -89,3 +89,15 @@ describe('Resolution Field', () => {
     expect(await screen.findByText('1/5')).toBeInTheDocument();
   });
 });
+
+describe('preprocessMaxLines', () => {
+  test.each([
+    { inputValue: '', expected: undefined },
+    { inputValue: 'abc', expected: undefined },
+    { inputValue: '-1', expected: undefined },
+    { inputValue: '1', expected: 1 },
+    { inputValue: '100', expected: 100 },
+  ])('should return correct max lines value', ({ inputValue, expected }) => {
+    expect(preprocessMaxLines(inputValue)).toBe(expected);
+  });
+});

public/app/plugins/datasource/loki/components/LokiOptionFields.tsx

@@ -154,16 +154,11 @@ export function LokiOptionFields(props: LokiOptionFieldsProps) {
 
 export default memo(LokiOptionFields);
 
-export function preprocessMaxLines(value: string): number {
-  if (value.length === 0) {
-    // empty input - falls back to dataSource.maxLines limit
-    return NaN;
-  } else if (value.length > 0 && (isNaN(+value) || +value < 0)) {
-    // input with at least 1 character and that is either incorrect (value in the input field is not a number) or negative
-    // falls back to the limit of 0 lines
-    return 0;
-  } else {
-    // default case - correct input
-    return +value;
+export function preprocessMaxLines(value: string): number | undefined {
+  const maxLines = parseInt(value, 10);
+  if (isNaN(maxLines) || maxLines < 0) {
+    return undefined;
   }
+
+  return maxLines;
 }

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.test.tsx

@@ -7,7 +7,7 @@ import { LokiQuery, LokiQueryType } from '../../types';
 import { LokiQueryBuilderOptions } from './LokiQueryBuilderOptions';
 
 describe('LokiQueryBuilderOptions', () => {
-  it('Can change query type', async () => {
+  it('can change query type', async () => {
     const { props } = setup();
 
     await userEvent.click(screen.getByTitle('Click to edit options'));
@@ -21,12 +21,13 @@ describe('LokiQueryBuilderOptions', () => {
     });
   });
 
-  it('Can change legend format', async () => {
+  it('can change legend format', async () => {
     const { props } = setup();
 
     await userEvent.click(screen.getByTitle('Click to edit options'));
 
-    const element = screen.getByLabelText('Legend');
+    // First autosize input is a Legend
+    const element = screen.getAllByTestId('autosize-input')[0];
     await userEvent.type(element, 'asd');
     await userEvent.keyboard('{enter}');
 
@@ -35,6 +36,58 @@ describe('LokiQueryBuilderOptions', () => {
       legendFormat: 'asd',
     });
   });
+
+  it('can change line limit to valid value', async () => {
+    const { props } = setup();
+    props.query.expr = '{foo="bar"}';
+
+    await userEvent.click(screen.getByTitle('Click to edit options'));
+    // Second autosize input is a Line limit
+    const element = screen.getAllByTestId('autosize-input')[1];
+    await userEvent.type(element, '10');
+    await userEvent.keyboard('{enter}');
+
+    expect(props.onChange).toHaveBeenCalledWith({
+      ...props.query,
+      maxLines: 10,
+    });
+  });
+
+  it('does not change line limit to invalid numeric value', async () => {
+    const { props } = setup();
+    // We need to start with some value to be able to change it
+    props.query.maxLines = 10;
+    props.query.expr = '{foo="bar"}';
+
+    await userEvent.click(screen.getByTitle('Click to edit options'));
+    // Second autosize input is a Line limit
+    const element = screen.getAllByTestId('autosize-input')[1];
+    await userEvent.type(element, '-10');
+    await userEvent.keyboard('{enter}');
+
+    expect(props.onChange).toHaveBeenCalledWith({
+      ...props.query,
+      maxLines: undefined,
+    });
+  });
+
+  it('does not change line limit to invalid text value', async () => {
+    const { props } = setup();
+    // We need to start with some value to be able to change it
+    props.query.maxLines = 10;
+    props.query.expr = '{foo="bar"}';
+
+    await userEvent.click(screen.getByTitle('Click to edit options'));
+    // Second autosize input is a Line limit
+    const element = screen.getAllByTestId('autosize-input')[1];
+    await userEvent.type(element, 'asd');
+    await userEvent.keyboard('{enter}');
+
+    expect(props.onChange).toHaveBeenCalledWith({
+      ...props.query,
+      maxLines: undefined,
+    });
+  });
 });
 
 function setup(queryOverrides: Partial<LokiQuery> = {}) {

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilderOptions.tsx

@@ -77,7 +77,6 @@ export const LokiQueryBuilderOptions = React.memo<Props>(
           >
             <AutoSizeInput
               placeholder="{{label}}"
-              id="loki-query-editor-legend-format"
               type="string"
               minWidth={14}
               defaultValue={query.legendFormat}