From 87f8e7e22321fb6ef89c1d6f7ac8489b1a0146fb Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Fri, 20 Jan 2023 16:25:01 +0100
Subject: [PATCH] Query Builder: Fix max width of input component to prevent
 overflows (#61798)

* 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
---
 .../components/Input/AutoSizeInput.test.tsx   | 30 +++++++++++++++++--
 .../src/components/Input/AutoSizeInput.tsx    |  2 +-
 .../shared/OperationParamEditor.tsx           |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
index e9e7d833bf9..cea1de3eabb 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.test.tsx
@@ -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');
+  });
 });
diff --git a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
index ae9c2873eef..3575f10b485 100644
--- a/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
+++ b/packages/grafana-ui/src/components/Input/AutoSizeInput.tsx
@@ -63,7 +63,7 @@ function getWidthFor(value: string, minWidth: number, maxWidth: number | undefin
   }
 
   if (maxWidth && realWidth > maxWidth) {
-    return realWidth;
+    return maxWidth;
   }
 
   return realWidth;
diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
index 7f5eb8e60b4..2e0941d5bfb 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/OperationParamEditor.tsx
@@ -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') {