From ee6c3b6255af8404ff8880249107957962edbac1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ida=20=C5=A0tambuk?= <ida.stambuk@grafana.com>
Date: Thu, 10 Apr 2025 14:56:13 +0200
Subject: [PATCH] ElasticSearch: Make script field input a text area (#103708)

---
 .betterer.results                             |  3 ---
 .../BucketScriptSettingsEditor/index.tsx      |  1 +
 .../SettingsEditor/SettingField.tsx           | 25 +++++++++++++------
 .../SettingsEditor/index.tsx                  | 10 ++++++--
 .../QueryEditor/SettingsEditorContainer.tsx   | 14 +++++++++--
 5 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index e358c837c8c..d032dca6159 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -4433,9 +4433,6 @@ exports[`no gf-form usage`] = {
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
index bbd855d3f86..62f38e2820b 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx
@@ -101,6 +101,7 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
       <SettingField
         label="Script"
         metric={value}
+        inputType="textarea"
         settingName="script"
         tooltip="Elasticsearch v5.0 and above: Scripting language is Painless. Use params.<var> to reference a variable. Elasticsearch pre-v5.0: Scripting language is per default Groovy if not changed. For Groovy use <var> to reference a variable."
         placeholder="params.var1 / params.var2"
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx
index cefb32fd682..aadca71e0ed 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx
@@ -1,7 +1,7 @@
 import { uniqueId } from 'lodash';
 import { ComponentProps, useState } from 'react';
 
-import { InlineField, Input } from '@grafana/ui';
+import { InlineField, Input, TextArea } from '@grafana/ui';
 
 import { useDispatch } from '../../../../hooks/useStatelessReducer';
 import { MetricAggregationWithInlineScript, MetricAggregationWithSettings } from '../../../../types';
@@ -15,6 +15,7 @@ interface Props<T extends MetricAggregationWithSettings, K extends SettingKeyOf<
   metric: T;
   placeholder?: ComponentProps<typeof Input>['placeholder'];
   tooltip?: ComponentProps<typeof InlineField>['tooltip'];
+  inputType?: 'input' | 'textarea';
 }
 
 export function SettingField<T extends MetricAggregationWithSettings, K extends SettingKeyOf<T>>({
@@ -23,6 +24,7 @@ export function SettingField<T extends MetricAggregationWithSettings, K extends
   metric,
   placeholder,
   tooltip,
+  inputType = 'input',
 }: Props<T, K>) {
   const dispatch = useDispatch();
   const [id] = useState(uniqueId(`es-field-id-`));
@@ -36,12 +38,21 @@ export function SettingField<T extends MetricAggregationWithSettings, K extends
 
   return (
     <InlineField label={label} labelWidth={16} tooltip={tooltip}>
-      <Input
-        id={id}
-        placeholder={placeholder}
-        onBlur={(e) => dispatch(changeMetricSetting({ metric, settingName, newValue: e.target.value }))}
-        defaultValue={defaultValue}
-      />
+      {inputType === 'textarea' ? (
+        <TextArea
+          id={id}
+          placeholder={placeholder}
+          onBlur={(e) => dispatch(changeMetricSetting({ metric, settingName, newValue: e.target.value }))}
+          defaultValue={defaultValue}
+        />
+      ) : (
+        <Input
+          id={id}
+          placeholder={placeholder}
+          onBlur={(e) => dispatch(changeMetricSetting({ metric, settingName, newValue: e.target.value }))}
+          defaultValue={defaultValue}
+        />
+      )}
     </InlineField>
   );
 }
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
index be8246fc0cc..e632d90d7cb 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/index.tsx
@@ -67,7 +67,7 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
       {metric.type === 'moving_fn' && (
         <>
           <SettingField label="Window" metric={metric} settingName="window" />
-          <SettingField label="Script" metric={metric} settingName="script" />
+          <SettingField label="Script" metric={metric} settingName="script" inputType="textarea" />
           <SettingField label="Shift" metric={metric} settingName="shift" />
         </>
       )}
@@ -157,7 +157,13 @@ export const SettingsEditor = ({ metric, previousMetrics }: Props) => {
       )}
 
       {isMetricAggregationWithInlineScript(metric) && (
-        <SettingField label="Script" metric={metric} settingName="script" placeholder="_value * 1" />
+        <SettingField
+          label="Script"
+          metric={metric}
+          settingName="script"
+          placeholder="_value * 1"
+          inputType="textarea"
+        />
       )}
 
       {isMetricAggregationWithMissingSupport(metric) && (
diff --git a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
index d8888ed2614..7d290b0b375 100644
--- a/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
+++ b/public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx
@@ -14,6 +14,8 @@ const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
       flexDirection: 'column',
     }),
     settingsWrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
       paddingTop: theme.spacing(0.5),
     }),
     icon: css({
@@ -21,7 +23,15 @@ const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
     }),
     button: css(
       {
-        justifyContent: 'start',
+        justifyContent: 'flex-start',
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing(0, 1),
+        fontSize: theme.typography.bodySmall.fontSize,
+        backgroundColor: theme.colors.background.secondary,
+        height: '32px',
+        lineHeight: '32px',
+        border: 'none',
       },
       hidden && {
         color: theme.colors.text.disabled,
@@ -45,7 +55,7 @@ export const SettingsEditorContainer = ({ label, children, hidden = false }: Pro
     <InlineSegmentGroup>
       <div className={cx(styles.wrapper)}>
         <button
-          className={cx('gf-form-label query-part', styles.button, segmentStyles)}
+          className={cx(styles.button, segmentStyles)}
           onClick={() => setOpen(!open)}
           aria-expanded={open}
           type="button"