From 2b3f1c1d8593de8fc75192ac2159a6db9f91b4ee Mon Sep 17 00:00:00 2001
From: Piotr Rudnicki <piotr.rudnicki94@protonmail.com>
Date: Wed, 16 Oct 2024 11:27:40 +0200
Subject: [PATCH] [NU-7016] Introduce Add button when typing element in user
 defined list (#7017) (#7023)

* [NU-7016] Add new button

* [NU-7016] Use i18n

---------

Co-authored-by: Piotr Rudnicki <prn@touk.pl>
---
 .../variants/fields/UserDefinedListInput.tsx  | 49 ++++++++++---------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/designer/client/src/components/graph/node-modal/fragment-input-definition/settings/variants/fields/UserDefinedListInput.tsx b/designer/client/src/components/graph/node-modal/fragment-input-definition/settings/variants/fields/UserDefinedListInput.tsx
index 76cd0a53b2c..c0a3ad5565f 100644
--- a/designer/client/src/components/graph/node-modal/fragment-input-definition/settings/variants/fields/UserDefinedListInput.tsx
+++ b/designer/client/src/components/graph/node-modal/fragment-input-definition/settings/variants/fields/UserDefinedListInput.tsx
@@ -15,7 +15,7 @@ import { GenericValidationRequest } from "../../../../../../../actions/nk/generi
 import { debounce } from "lodash";
 import { EditorType } from "../../../../editors/expression/Editor";
 import { useSettings } from "../../SettingsProvider";
-import { Box, FormControl } from "@mui/material";
+import { Box, Button, FormControl, Stack } from "@mui/material";
 
 interface Props {
     onChange: (path: string, value: onChangeType) => void;
@@ -167,27 +167,32 @@ export const UserDefinedListInput = ({
     return (
         <FormControl>
             <SettingLabelStyled>{t("fragment.addListItem", "Add list item:")}</SettingLabelStyled>
-            <Box width={"100%"} flex={1}>
-                <EditableEditor
-                    validationLabelInfo={temporaryValuesTyping && "Typing..."}
-                    expressionObj={{ language: ExpressionLang.SpEL, expression: temporaryListItem }}
-                    onValueChange={(value) => {
-                        setTemporaryListItem(value);
-                        setTemporaryValuesTyping(true);
-                        setTemporaryValueErrors([]);
-                        validateTemporaryListItem(value);
-                    }}
-                    variableTypes={variableTypes}
-                    readOnly={readOnly}
-                    ref={(ref: AceEditor | null) => {
-                        if (ref?.editor) {
-                            ref.editor.commands.addCommand(aceEditorEnterCommand);
-                        }
-                    }}
-                    param={{ editor: { type: EditorType.RAW_PARAMETER_EDITOR } }}
-                    fieldErrors={getValidationErrorsForField(temporaryValueErrors, temporaryItemName)}
-                    showValidation
-                />
+            <Box width={"80%"} flex={1}>
+                <Stack direction="row" paddingY={1} spacing={1} justifyContent={"space-between"} alignItems={"start"}>
+                    <EditableEditor
+                        validationLabelInfo={temporaryValuesTyping && "Typing..."}
+                        expressionObj={{ language: ExpressionLang.SpEL, expression: temporaryListItem }}
+                        onValueChange={(value) => {
+                            setTemporaryListItem(value);
+                            setTemporaryValuesTyping(true);
+                            setTemporaryValueErrors([]);
+                            validateTemporaryListItem(value);
+                        }}
+                        variableTypes={variableTypes}
+                        readOnly={readOnly}
+                        ref={(ref: AceEditor | null) => {
+                            if (ref?.editor) {
+                                ref.editor.commands.addCommand(aceEditorEnterCommand);
+                            }
+                        }}
+                        param={{ editor: { type: EditorType.RAW_PARAMETER_EDITOR } }}
+                        fieldErrors={getValidationErrorsForField(temporaryValueErrors, temporaryItemName)}
+                        showValidation
+                    />
+                    <Button variant="contained" onClick={handleAddNewListItem}>
+                        {t("fragment.addListItemButton", "Add")}
+                    </Button>
+                </Stack>
                 {userDefinedListOptions?.length > 0 && (
                     <ListItems
                         items={fixedValuesList}