Use textarea component

Use textarea to support multiple
lines over using an input.

app/assets/javascripts/pipeline_new/components/pipeline_new_form.vue

@@ -9,6 +9,7 @@ import {
   GlFormGroup,
   GlFormInput,
   GlFormSelect,
+  GlFormTextarea,
   GlLink,
   GlDropdown,
   GlDropdownItem,
@@ -38,6 +39,9 @@ export default {
   errorTitle: __('Pipeline cannot be run.'),
   warningTitle: __('The form contains the following warning:'),
   maxWarningsSummary: __('%{total} warnings found: showing first %{warningsDisplayed}'),
+  // this height value is used inline on the textarea to match the input field height
+  // it's used to prevent the overwrite if 'gl-h-7' or 'gl-h-7!' were used
+  textAreaStyle: { height: '32px' },
   components: {
     GlAlert,
     GlIcon,
@@ -46,6 +50,7 @@ export default {
     GlFormGroup,
     GlFormInput,
     GlFormSelect,
+    GlFormTextarea,
     GlLink,
     GlDropdown,
     GlDropdownItem,
@@ -426,10 +431,12 @@ export default {
             data-testid="pipeline-form-ci-variable-key"
             @change="addEmptyVariable(refFullName)"
           />
-          <gl-form-input
+          <gl-form-textarea
             v-model="variable.value"
             :placeholder="s__('CiVariables|Input variable value')"
             class="gl-mb-3"
+            :style="$options.textAreaStyle"
+            :no-resize="false"
             data-testid="pipeline-form-ci-variable-value"
           />
 

changelogs/unreleased/pb-move-pipeline-new-input-to-textarea.yml

+---
+title: Support multi-line string variable values when running a manual pipeline in
+  the UI.
+merge_request: 53292
+author:
+type: fixed

spec/frontend/pipeline_new/components/pipeline_new_form_spec.js

@@ -242,6 +242,9 @@ describe('Pipeline New Form', () => {
   describe('when yml defines a variable', () => {
     const mockYmlKey = 'yml_var';
     const mockYmlValue = 'yml_var_val';
+    const mockYmlMultiLineValue = `A value
+    with multiple
+    lines`;
     const mockYmlDesc = 'A var from yml.';
 
     it('loading icon is shown when content is requested and hidden when received', async () => {
@@ -261,6 +264,21 @@ describe('Pipeline New Form', () => {
       expect(findLoadingIcon().exists()).toBe(false);
     });
 
+    it('multi-line strings are added to the value field without removing line breaks', async () => {
+      createComponent('', mockParams, mount);
+
+      mock.onGet(configVariablesPath).reply(httpStatusCodes.OK, {
+        [mockYmlKey]: {
+          value: mockYmlMultiLineValue,
+          description: mockYmlDesc,
+        },
+      });
+
+      await waitForPromises();
+
+      expect(findValueInputs().at(0).element.value).toBe(mockYmlMultiLineValue);
+    });
+
     describe('with description', () => {
       beforeEach(async () => {
         createComponent('', mockParams, mount);