Resolved the conflicts

2024-08-01 00:31:01 +05:30
parent c10ed7bd01 1b8e114f7b
commit ae66160d4e
23 changed files with 2046 additions and 525 deletions
@@ -3,12 +3,13 @@ import { toast } from 'react-toastify';
 import { makeStyles, createStyles } from "@mui/styles";
 import theme from '../theme.jsx';

-
+import { useNavigate, Link, useParams } from "react-router-dom";
 import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
 import { GetParsedPaths } from "../views/Apps.jsx";
 import { sortByKey } from "../views/AngularWorkflow.jsx";
 import { NestedMenuItem } from "mui-nested-menu";
 import { parsedDatatypeImages } from "../components/AppFramework.jsx";
+import { green, yellow, red } from "../views/AngularWorkflow.jsx"
 //import { useAlert 

 import {
@@ -46,7 +47,8 @@ import {
  CircularProgress,
  Switch,
  Collapse,
-	Autocomplete 
+	Autocomplete, 
+	Box
 } from "@mui/material";

 import {
@@ -175,7 +177,9 @@ const ParsedAction = (props) => {
 	setAiQueryModalOpen,
  } = props;

+  let navigate = useNavigate();
  const classes = useStyles();
+
  const [hideBody, setHideBody] = React.useState(true)
  const [activateHidingBodyButton, setActivateHidingBodyButton] = React.useState(false)
  const [appActionName, setAppActionName] = React.useState(selectedAction?.label);
@@ -183,23 +187,18 @@ const ParsedAction = (props) => {
  const [prevActionName, setPrevActionName] = React.useState(selectedAction?.label);
  const [fieldCount, setFieldCount] = React.useState(0);
  const [hiddenDescription, setHiddenDescription] = React.useState(true);
+  const [hiddenParameters, setHiddenParameters] = React.useState(true);
  const [autoCompleting, setAutocompleting] = React.useState(false);
  const [selectedActionParameters, setSelectedActionParameters] = React.useState(selectedAction?.parameters || []);
-    const [selectedVariableParameter, setSelectedVariableParameter] = React.useState("");
-	const [paramValues, setParamValues] = React.useState(
-		selectedAction?.parameters?.map((param) => {
-			return {
-				name: param.name,
-				value: param.value,
-			}
-		})
-	);
+  const [selectedVariableParameter, setSelectedVariableParameter] = React.useState("");
+  const [paramUpdate, setParamUpdate] = React.useState("");
    const [actionlist, setActionlist] = React.useState([]);
    const [jsonList, setJsonList] = React.useState([]);
    const [showDropdown, setShowDropdown] = React.useState(false);
    const [showDropdownNumber, setShowDropdownNumber] = React.useState(0);
    const [showAutocomplete, setShowAutocomplete] = React.useState(false);
    const [menuPosition, setMenuPosition] = useState(null);
+	const [uiBox, setUiBox] = useState(null);
  const isIntegration = selectedAction.app_id === "integration"

  useEffect(() => {
@@ -208,16 +207,36 @@ const ParsedAction = (props) => {
 	}
  }, [expansionModalOpen])

-//   useEffect(() => {
-// 		setParamValues(selectedAction.parameters?.map((param) => {
-// 			return {
-// 				name: param.name,
-// 				value: param.value,
-// 			}
-// 		}))
-//   },[
-// 	selectedAction, selectedApp,setNewSelectedAction, workflow,
-//   ])
+
+  useEffect(() => {
+	  if (selectedActionEnvironment === undefined || selectedActionEnvironment === null || Object.keys(selectedActionEnvironment).length === 0) {
+
+		  if (environments !== undefined && environments !== null && environments.length > 0) {
+			  if (selectedAction.environment !== undefined && selectedAction.environment !== null) {
+
+				  const foundenv = environments.find(env => env.id === selectedAction.environment || selectedAction.environment === env.Name)
+
+				  if (foundenv !== undefined && foundenv !== null) {
+				  	setSelectedActionEnvironment(foundenv)
+				  }
+			  }
+		  }
+	  }
+  }, [])
+
+  /*
+  useEffect(() => {
+		setParamValues(selectedAction.parameters.map((param) => {
+			return {
+				name: param.name,
+				value: param.value,
+			}
+		}))
+  },[
+	selectedAction, selectedApp,setNewSelectedAction, workflow,
+  ])
+  */
+

  useEffect(() => {
 	if (selectedAction.parameters === null || selectedAction.parameters === undefined) {
@@ -418,8 +437,8 @@ const ParsedAction = (props) => {
 			}
 		
 			// Only set selected action parameters if they have changed
-			if (selectedAction.parameters && selectedAction.parameters.length > 0) {
-				setSelectedActionParameters(selectedAction.parameters);
+			if (selectedAction?.parameters && selectedAction?.parameters.length > 0) {
+				setSelectedActionParameters(selectedAction?.parameters);
 			}
 		
 			// Only set selected variable parameter if it is null or undefined
@@ -434,6 +453,7 @@ const ParsedAction = (props) => {

 	useEffect(() => {
        const newActionList = [];
+		const parentActionList = [];

        // Process workflowExecutions
        if (workflowExecutions.length > 0) {
@@ -561,88 +581,66 @@ const ParsedAction = (props) => {
                            autocomplete: parentNode.label.split(" ").join("_"),
                            example: exampleData,
                        });
-                    }
-                }
-            }
-        }

-        // Update the actionlist state
-        setActionlist(newActionList);
-    }, [workflow.execution_variables, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents]);
-	
-
-	const memoizedParam = useMemo(() => {
-		let appActions = [];
-		if (getParents) {
-            const parents = getParents(selectedAction);
-            if (parents.length > 1) {
-                const labels = [];
-                for (let parentNode of parents) {
-                    if (parentNode.label !== "Execution Argument" && !labels.includes(parentNode.label)) {
-                        labels.push(parentNode.label);
-                        let exampleData = parentNode.example ?? "";
-                        if (!exampleData && workflowExecutions.length > 0) {
-                            for (let exec of workflowExecutions) {
-                                const foundResult = exec.results?.find(result => result.action.id === parentNode.id);
-                                if (foundResult) {
-                                    const valid = validateJson(foundResult.result);
-                                    if (valid.valid && valid.result.success !== false) {
-                                        exampleData = valid.result;
-                                        break;
-                                    }
-                                }
-                            }
-                        }
-                        appActions.push({
+						parentActionList.push({
                            type: "action",
                            id: parentNode.id,
                            name: parentNode.label,
                            autocomplete: parentNode.label.split(" ").join("_"),
                            example: exampleData,
                        });
+
+							
                    }
                }
            }
        }

-		let newParameters =  selectedAction.parameters?.map((param) => {
+		let newParameters =  selectedAction?.parameters?.map((param) => {
 			let paramvalue = param.value;
+			let errorVars = [];
 			if(paramvalue.includes("$")){
 				let actions = workflow.actions?.map((action) => {
 					return "$"+action.label.toLowerCase();
 				})
-				if(actionlist.length > 0){
-					let appParentActions = appActions?.map(action => "$" + action.name.toLowerCase());
+				if(newActionList?.length > 0){
+					let appParentActions = parentActionList?.map(action => "$" + action.name.toLowerCase());
 					let notPresentAction = actions?.filter((action) => !appParentActions?.includes(action))
-					console.log("ACTIONS: ", actions)
-					console.log("APP ACTIONS: ", appParentActions)
-					console.log("NOT PRESENT: ", notPresentAction)
 					notPresentAction?.forEach((action) => {
-						console.log("Not included Action: ", action)
+						action = action.replace(" ", "_");
 						if(paramvalue.includes(action)){
-							paramvalue = paramvalue.replace(action, "")
-							paramvalue = paramvalue.replace(/^\s*[\r\n]/gm, "");
+							errorVars.push(action);
+							// paramvalue = paramvalue.replace(action, "")
+							// paramvalue = paramvalue.replace(/^\s*[\r\n]/gm, "");
 						}
 					})
 				}
 			}
-			console.log("After removing param value: ", paramvalue)
-			return {...param, value: paramvalue}
-		});	
-		selectedAction.parameters = newParameters;
-		setSelectedActionParameters(newParameters);
-		setSelectedAction(selectedAction);
-		return newParameters;
-	},[actionlist,selectedAction,workflow.actions,workflow,selectedApp,setNewSelectedAction])

-	useEffect(() => {
-		setParamValues(memoizedParam?.map((param) => {
-			return {
-				name: param.name,
-				value: param.value,
+			let message = "";
+			if(errorVars.length > 0){
+				if(errorVars.length === 1){
+					message = errorVars[0] + " is not accessible in this action.";
+				}else{
+					message = errorVars.join(", ") + " are not accessible in this action.";
+				}
 			}
-		}))
-	},[memoizedParam])
+
+			if (param?.configuration) {
+				let regex = /(^|[^\\])\$/;
+				if (regex.test(paramvalue)) {
+					if(message.length > 0){
+					message += "\nUse \"\\$\" instead of \"$\".";
+					}else{
+					message = "Use \"\\$\" instead of \"$\".";
+					}
+				}
+			}
+			return {...param, value: paramvalue, error: message}
+		});	
+		setSelectedActionParameters(newParameters);
+        setActionlist(newActionList);
+    }, [workflow.execution_variables,paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents,setNewSelectedAction]);

 	useEffect(() => {
 		selectedNameChange(appActionName)
@@ -653,15 +651,17 @@ const ParsedAction = (props) => {
 	  },[appActionName,delay])
 	 
 		const handleParamChange = (event, count,data) => {
-			const newParams = [...paramValues];
+			const newParams = [...selectedActionParameters];
 			newParams.map((param) => {
 				if (param.name === data.name) {
 					param.value = event.target.value;
 				}
 			})
-			setParamValues(newParams);
+			setSelectedActionParameters(newParams);
+			setParamUpdate(event.target.value);
 			changeActionParameter(event, count, data)
 		}
+
 		const calculateHelpertext = (input_data) => {
 			var helperText = ""
 			var looperText = ""
@@ -1187,6 +1187,15 @@ const ParsedAction = (props) => {
 		return helperText
 	}

+	const errorHelperText = (name, value, error) => {
+		return (
+			<div style={{ whiteSpace: 'pre-line' }}>
+				{error}
+			</div>
+		);
+	}
+
+
 	const analyzeFields = () => {

 		if (selectedAction === undefined || selectedAction === null) {
@@ -1248,7 +1257,7 @@ const ParsedAction = (props) => {
 	}

    // FIXME: Issue #40 - selectedActionParameters not reset
-	if (Object.getOwnPropertyNames(selectedAction).length > 0 && selectedActionParameters.length > 0) {
+	if (Object.getOwnPropertyNames(selectedAction)?.length > 0 && selectedActionParameters?.length > 0) {
 	  var wrapperapp = {
 	  	"id": "",
 	  	"name": "noapp",
@@ -1312,6 +1321,7 @@ const ParsedAction = (props) => {
 							} 
 						});
              		}
+					  setHiddenDescription(false)
 					  document.activeElement.blur();
 				}}
 				>
@@ -2036,6 +2046,7 @@ const ParsedAction = (props) => {
 			  }}
              labelId="select-app-auth"
              value={
+				selectedAction.authentication_id === "authgroups" ? "authgroups" :
                Object.getOwnPropertyNames(selectedAction.selectedAuthentication).length === 0
                  ? "No selection"
                  : selectedAction.selectedAuthentication
@@ -2052,18 +2063,48 @@ const ParsedAction = (props) => {
                  selectedAction.authentication_id = "";

                  for (let [key,keyval] in Object.entries(selectedAction.parameters)) {
-                    //console.log(selectedAction.parameters[key])
                    if (selectedAction.parameters[key].configuration) {
-                      selectedAction.parameters[key].value = "";
+
+					  if (selectedAction.parameters[key].example !== undefined && selectedAction.parameters[key].example !== null && selectedAction.parameters[key].example !== "") {
+		  				if (selectedAction.parameters[key].example.toLowerCase().includes("api") || selectedAction.parameters[key].example.toLowerCase().includes("key") || selectedAction.parameters[key].example.toLowerCase().includes("pass")) {
+                      		selectedAction.parameters[key].value = ""
+						} else {
+                      		selectedAction.parameters[key].value = selectedAction.parameters[key].example
+						}
+					  } else {
+                      	selectedAction.parameters[key].value = ""
+					  }
                    }
                  }
                  setSelectedAction(selectedAction);
                  setUpdate(Math.random());
+				
+				} else if (e.target.value === "authgroups") {
+					if (authGroups !== undefined && authGroups !== null && authGroups.length === 0) {
+						toast("No auth groups created. Opening window to create one")
+
+						setTimeout(() => {
+							window.open("/admin?tab=app_auth", "_blank")
+						}, 2500)
+					} else {
+						selectedAction.selectedAuthentication = {};
+						selectedAction.authentication_id = "authgroups"
+
+						for (let [key,keyval] in Object.entries(selectedAction.parameters)) {
+						  //console.log(selectedAction.parameters[key])
+						  if (selectedAction.parameters[key].configuration) {
+							selectedAction.parameters[key].value = "authgroup controlled"
+						  }
+						}
+
+						setSelectedAction(selectedAction)
+						setUpdate(Math.random())
+					}
                } else {
                  selectedAction.selectedAuthentication = e.target.value;
                  selectedAction.authentication_id = e.target.value.id;
-                  setSelectedAction(selectedAction);
-                  setUpdate(Math.random());
+                  setSelectedAction(selectedAction)
+                  setUpdate(Math.random())
                }
              }}
              style={{
@@ -2119,6 +2160,19 @@ const ParsedAction = (props) => {
                  </MenuItem>
                );
              })}
+
+			  <Divider style={{marginTop: 10, marginBottom: 10, }}/>
+
+              <MenuItem
+                style={{
+                  backgroundColor: theme.palette.inputColor,
+                  color: "white",
+                }}
+                value="authgroups"
+              >
+                <em>Auth Groups</em>
+              </MenuItem>
+
            </Select>

            {/*
@@ -2149,6 +2203,7 @@ const ParsedAction = (props) => {
        </div>
      ) : null}

+
      {showEnvironment !== undefined && showEnvironment && environments.length > 1 && !isIntegration  ? (
        <div style={{ marginTop: "20px" }}>
          <Typography style={{color: "rgba(255,255,255,0.7)"}}>Environment</Typography>
@@ -2157,10 +2212,7 @@ const ParsedAction = (props) => {
 				disableScrollLock: true,
 			}}
            value={
-              selectedActionEnvironment === undefined || selectedActionEnvironment === null ||
-              selectedActionEnvironment.Name === undefined || selectedActionEnvironment.Name === null 
-                ? isCloud ? "Cloud" : "Shuffle"
-                : selectedActionEnvironment.Name
+              selectedActionEnvironment === undefined || selectedActionEnvironment === null || selectedActionEnvironment.Name === undefined || selectedActionEnvironment.Name === null ? isCloud ? "Cloud" : "Shuffle" : selectedActionEnvironment.Name
            }
            SelectDisplayProps={{
              style: {
@@ -2177,7 +2229,7 @@ const ParsedAction = (props) => {
 				  workflow.actions[actionkey].environment = env.Name
 			  }
 			  setWorkflow(workflow)
-			  toast("Set environment for ALL actions to " + env.Name)
+			  toast.success("Set environment for ALL actions to " + env.Name)
            }}
            style={{
              backgroundColor: theme.palette.inputColor,
@@ -2188,9 +2240,11 @@ const ParsedAction = (props) => {
          >
            {environments.map((data, index) => {
              if (data.archived === true) {
-                return null;
+                return null
              }

+			  const isRunning = data.running_ip !== "" 
+
              return (
                <MenuItem
                  key={data.Name}
@@ -2200,6 +2254,27 @@ const ParsedAction = (props) => {
                  }}
                  value={data.Name}
                >
+
+				  {data.Name === "cloud" || data.Name === "Cloud" ? null : !isRunning ?
+					  <a href={`/admin?tab=environments&env=${data.Name}`} target="_blank" style={{textDecoration: "none",}}>
+						  <Tooltip title={"Click to configure the environment"} placement="top">
+							  <Chip
+								style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer", backgroundColor: red, }}
+								label={"Stopped"}
+								variant="outlined"
+								color="secondary"
+					  			onClick={(e) => {
+									e.preventDefault()
+									e.stopPropagation()
+									window.open(`/admin?tab=environments&env=${data.Name}`, "_blank", "noopener,noreferrer")
+								}}
+
+
+							  />
+						  </Tooltip>
+					  </a>
+					: null}
+
 				  {data.default === true ?
 					  <Chip
 						style={{marginLeft: 0, padding: 0, marginRight: 10, cursor: "pointer",}}
@@ -2208,12 +2283,22 @@ const ParsedAction = (props) => {
 						color="secondary"
 					  />
 					  : null}
+
+
                  {data.Name}
                </MenuItem>
              );
            })}
          </Select>
-        </div>
+
+		  {/*selectedActionEnvironment.running_ip === "" && selectedActionEnvironment.Name !== "Cloud" && selectedActionEnvironment.Name !== "cloud" ?
+			  <a href={`/admin?tab=environment&env=${selectedActionEnvironment.Name}`} target="_blank" style={{textDecoration: "none", color: "#f85a3e",}}>
+				<Typography style={{}}>
+				  Configure the environment
+				</Typography>
+			  </a>
+		  : null*/}
+	</div>
      ) : null}
      {workflow.execution_variables !== undefined &&
      workflow.execution_variables !== null &&
@@ -2473,8 +2558,63 @@ const ParsedAction = (props) => {
 					}
 				}

+
+			const actionDescription = (
+				<Box
+				p={1.5}
+				borderRadius={3}
+				boxShadow={2}
+				backgroundColor={theme.palette.textFieldStyle}
+				display="flex"
+				flexDirection="column"
+				>
+					<Box display="flex" alignItems="center" justifyContent="space-between">
+					<Typography variant="body1" style={{ flexGrow: 1 }}>
+						{params.inputProps.value}
+					</Typography>
+					<IconButton size="small"
+					 
+					 onMouseDown={(event) => {
+						event.preventDefault();
+						event.stopPropagation();
+					  }}
+					
+					 onClick={() => {
+						setHiddenDescription(true)
+						const inputElement = document.getElementById(uiBox);
+						if (inputElement) {
+						  inputElement.focus();
+						}
+					}}>
+						<CloseIcon fontSize="small" />
+					</IconButton>
+					</Box>
+					<Divider sx={{ backgroundColor: theme.palette.surfaceColor, marginTop: "5px", marginBottom : "10px", height: "3px" }}/>
+					<Box display="flex" flexDirection="column">
+						<Typography variant="body2" mb={0.5}>
+						<strong>Description: </strong> {selectedAction?.description}
+						</Typography>
+					</Box>
+				</Box>
+			);
+
              return (
-					<TextField
+					<Tooltip title={actionDescription}
+					placement="right" 
+					open={!hiddenDescription}
+					PopperProps={{
+						sx: {
+						'& .MuiTooltip-tooltip': {
+							backgroundColor: 'transparent',
+							boxShadow: 'none',
+						},
+						'& .MuiTooltip-arrow': {
+							color: 'transparent',
+						},
+						},
+					}}
+					>
+						<TextField
 						{...params}

 						data-lpignore="true"
@@ -2492,8 +2632,8 @@ const ParsedAction = (props) => {
 						label={isIntegration ? "Choose a category" : "Find Actions"}
 						variant="outlined"
 				        name={`disable_autocomplete_${Math.random()}`}
-
-					/>
+						/>	
+					</Tooltip>
              );
            }}
          />
@@ -2690,7 +2830,7 @@ const ParsedAction = (props) => {
 						fullWidth
 						disabled={selectedAction.description === undefined || selectedAction.description === null || selectedAction.description.length === 0}
 						onClick={() => {
-							setHiddenDescription(!hiddenDescription)
+							setHiddenParameters(!hiddenParameters)
 						}}
 					>
 						<b>Parameters</b>
@@ -2808,7 +2948,7 @@ const ParsedAction = (props) => {
          		/>
 						</div>
 					: null}
-        	{selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 &&  hiddenDescription === false ? (
+        	{selectedAction.description !== undefined && selectedAction.description !== null && selectedAction.description.length > 0 &&  hiddenParameters === false ? (
 						<div
 							style={{
 								border: "1px solid rgba(255,255,255,0.6)",
@@ -2830,8 +2970,7 @@ const ParsedAction = (props) => {
 					) : null}

 		  {suggestionInfo()}
-
-          {selectedActionParameters.map((data, count) => {
+          {selectedActionParameters?.map((data, count) => {
            if (data.variant === "") {
              data.variant = "STATIC_VALUE";
            }
@@ -2840,10 +2979,16 @@ const ParsedAction = (props) => {
 			  return null
 			}

+			if (data.value === "authgroup controlled") {
+				return null
+			}
+
            // selectedAction.selectedAuthentication = e.target.value
            // selectedAction.authentication_id = e.target.value.id
            if (
-              !selectedAction.auth_not_required &&
+              (selectedAction.auth_not_required !== undefined && !selectedAction.auth_not_required) &&
+			  selectedActionParameters[count].value !== undefined &&
+			  selectedAction.parameters[count].value !== undefined &&
              selectedAction.selectedAuthentication !== undefined &&
              selectedAction.selectedAuthentication.fields !== undefined &&
              selectedAction.selectedAuthentication.fields[data.name] !==
@@ -3202,8 +3347,79 @@ const ParsedAction = (props) => {
 						}

 						multiline = data.name.startsWith("${") && data.name.endsWith("}") ? true : multiline
-						
+			
+			const description = data.description === undefined ? "" : data?.description;
+			
+			const tooltipDescription = (
+				<Box
+				p={1.5}
+				borderRadius={3}
+				boxShadow={2}
+				backgroundColor={theme.palette.textFieldStyle}
+				display="flex"
+				flexDirection="column"
+				>
+					<Box display="flex" alignItems="center" justifyContent="space-between">
+					<Typography variant="body1" style={{ flexGrow: 1 }}>
+						{tmpitem.charAt(0).toUpperCase() + tmpitem.slice(1)}
+					</Typography>
+					<IconButton size="small"
+					 
+					 onMouseDown={(event) => {
+						event.preventDefault();
+						event.stopPropagation();
+					  }}
+					
+					 onClick={() => {
+						setUiBox("closed")
+						const inputElement = document.getElementById(uiBox);
+						if (inputElement) {
+						  inputElement.focus();
+						}
+					}}>
+						<CloseIcon fontSize="small" />
+					</IconButton>
+					</Box>
+					<Divider sx={{ backgroundColor: theme.palette.surfaceColor, marginTop: "5px", marginBottom : "10px", height: "3px" }}/>
+					<Box display="flex" flexDirection="column">
+						<Typography variant="body2" mb={0.5}>
+						<strong>Required:</strong> {data.required === true || data.configuration === true ? "True" : "False"}
+						</Typography>
+						<Typography variant="body2" mb={0.5}>
+						<strong>Description:</strong> {description}
+						</Typography>
+						<Typography variant="body2">
+						<strong>Ex. :</strong> {data?.example.length > 0 ? data.example : "No example available"}
+						</Typography>
+						{
+							data?.configuration === true ?
+							(
+								<Typography variant="body2" mt={0.5}>
+								<strong>Auth: </strong>Use "\$" instead of "$"
+								</Typography>
+							) : null
+						}
+					</Box>
+				</Box>
+			);
+
            var datafield = (
+			<Tooltip 
+				title={tooltipDescription} 
+				placement="right" 
+				open={clickedFieldId === uiBox}
+				PopperProps={{
+					sx: {
+					  '& .MuiTooltip-tooltip': {
+						backgroundColor: 'transparent',
+						boxShadow: 'none',
+					  },
+					  '& .MuiTooltip-arrow': {
+						color: 'transparent',
+					  },
+					},
+				  }}
+				>
              <TextField
                disabled={disabled}
                style={{
@@ -3292,10 +3508,12 @@ const ParsedAction = (props) => {
                color="primary"
                // defaultValue={data.value}
                value={
-					paramValues.find((param) => param.name === data.name) !== undefined
-						? paramValues.find((param) => param.name === data.name).value
-						: ""
+					data?.value
 				}
+				error={
+					data?.error?.length > 0 ? true : false
+				}
+				helperText={data?.error?.length > 0 ? errorHelperText(data?.name,data?.value,data?.error) : returnHelperText(data.name, data.value)}
                //options={{
                //	theme: 'gruvbox-dark',
                //	keyMap: 'sublime',
@@ -3318,14 +3536,19 @@ const ParsedAction = (props) => {
                //   changeActionParameter(event, count, data);
 				handleParamChange(event, count, data)
                }}
-                helperText={returnHelperText(data.name, data.value)}
+				onFocus={(event) => {
+					setUiBox(event.target.id)
+					
+				}}
                onBlur={(event) => {
 					baseHelperText = calculateHelpertext(event.target.value)
 					if (setLastSaved !== undefined) {
 						setLastSaved(false)
 					}
+					setUiBox("closed")
                }}
              />
+			</Tooltip>
            );
 		
 						// Finds headers from a string to be used for autocompletion
@@ -4057,24 +4280,6 @@ const ParsedAction = (props) => {
              );
            };
 
-            const description =
-              data.description === undefined ? "" : data.description;
-            const tooltipDescription = (
-              <span>
-                <Typography variant="body2">
-                  - Required:{" "}
-                  {data.required === true || data.configuration === true
-                    ? "True"
-                    : "False"}
-                </Typography>
-                <Typography variant="body2">
-                  - Example: {data.example}
-                </Typography>
-                <Typography variant="body2">
-                  - Description: {description}
-                </Typography>
-              </span>
-            );

            //var itemColor = "#f85a3e"
            //if (!data.required) {
@@ -4154,9 +4359,7 @@ const ParsedAction = (props) => {
                      marginBottom: "auto",
                    }}
                  >
-                    <Tooltip title={tooltipDescription} placement="top">
                      <b>{tmpitem} </b>
-                    </Tooltip>
                  </div>

                  {/*selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0  ? null : 
@@ -4239,11 +4442,7 @@ const ParsedAction = (props) => {
                      onClose={() => {
                        setShowAutocomplete(false);

-                        if (
-                          !selectedActionParameters[count].value[
-                            selectedActionParameters[count].value.length - 1
-                          ] === "."
-                        ) {
+                        if (!selectedActionParameters[count].value[selectedActionParameters[count].value.length - 1] === ".") {
                          setShowDropdown(false);
                        }