IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-07 22:53:56 -06:00
Code Issues Packages Projects Releases Wiki Activity

Query Builder: Fix max width of input component to prevent overflows (#61798)

Browse Source 
* fix(auto-size-input): return maxWidth when realWidth exceeds limit

* fix(query-builder): sex madWidth for simple editor component

* fix(auto-size-input): add unit test
This commit is contained in:
Matias Chomicki 2023-01-20 16:25:01 +01:00 committed by GitHub
parent c0913ce718
commit 87f8e7e223
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
View File

@ -1,13 +1,15 @@
import { screen, render, fireEvent } from '@testing-library/react';
import { screen, render, fireEvent, waitFor } from '@testing-library/react';
import React from 'react';
import { measureText } from '../../utils/measureText';
import { AutoSizeInput } from './AutoSizeInput';
jest.mock('../../utils/measureText', () => {
// Mocking measureText
const measureText = (text: string, fontSize: number) => {
const measureText = jest.fn().mockImplementation((text: string, fontSize: number) => {
return { width: text.length * fontSize };
};
});
return { measureText };
});
@ -94,4 +96,26 @@ describe('AutoSizeInput', () => {
expect(onCommitChange).toHaveBeenCalled();
});
it('should respect min width', async () => {
render(<AutoSizeInput minWidth={4} defaultValue="" />);
await waitFor(() => expect(measureText).toHaveBeenCalled());
expect(getComputedStyle(screen.getByTestId('input-wrapper')).width).toBe('32px');
});
it('should respect max width', async () => {
render(
<AutoSizeInput
minWidth={1}
maxWidth={4}
defaultValue="thisisareallylongvalueandwhenisaylongireallymeanreallylongwithlotsofcharacterscommingfromuserinputwhotookthetimetocomeupwithalongstreamofcharacters"
/>
);
await waitFor(() => expect(measureText).toHaveBeenCalled());
expect(getComputedStyle(screen.getByTestId('input-wrapper')).width).toBe('32px');
});
});

2
packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
View File

@ -63,7 +63,7 @@ function getWidthFor(value: string, minWidth: number, maxWidth: number | undefin
}
if (maxWidth && realWidth > maxWidth) {
return realWidth;
return maxWidth;
}
return realWidth;

1
public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
View File

@ -38,6 +38,7 @@ function SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {
minWidth={props.paramDef.minWidth}
placeholder={props.paramDef.placeholder}
title={props.paramDef.description}
maxWidth={(props.paramDef.minWidth || 20) * 3}
onCommitChange={(evt) => {
props.onChange(props.index, evt.currentTarget.value);
if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {