+ {paramComponents}
+ {(editingSegmentId === -1) && (
+
+
+
+ <>{"Add Argument"}>
+
+
+ )}
+
+ );
+}
+
+function handleArgChange(param: Parameter, allParams: Parameter[]) {
+ const arg = param.formValues["variable"];
+ const name = arg.split('.').pop();
+
+ let key = name;
+ let i = 1;
+ while (allParams.some(p => p.key === key && p.id !== param.id)) {
+ key = name + (i++);
+ }
+
+ return {
+ ...param,
+ key: key
+ };
+}
diff --git a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
index 75ac7dfc3b3..2af440e2656 100644
--- a/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
+++ b/workspaces/ballerina/ballerina-side-panel/src/components/ParamManager/ParamManager.tsx
@@ -186,7 +186,7 @@ export function ParamManagerEditor(props: ParamManagerEditorProps) {
sx={{ fontSize: 12, padding: 8, color: ThemeColors.PRIMARY, gap: 4 }}
>