diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 4f3052d8..d4cf0541 100755 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -47,7 +47,8 @@ import { CircularProgress, Switch, Collapse, - Autocomplete + Autocomplete, + Box } from "@mui/material"; import { @@ -185,6 +186,7 @@ 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(""); @@ -195,6 +197,7 @@ const ParsedAction = (props) => { 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(() => { @@ -637,7 +640,7 @@ const ParsedAction = (props) => { setSelectedActionParameters(newParameters); setActionlist(newActionList); }, [workflow.execution_variables,paramUpdate, workflow.workflow_variables, workflowExecutions, workflow, selectedAction, listCache, getParents,setNewSelectedAction]); - + console.log("Selected Action:", selectedAction) useEffect(() => { selectedNameChange(appActionName) @@ -1317,6 +1320,7 @@ const ParsedAction = (props) => { } }); } + setHiddenDescription(false) document.activeElement.blur(); }} > @@ -2481,8 +2485,63 @@ const ParsedAction = (props) => { } } + + const actionDescription = ( + + + + {params.inputProps.value} + + { + event.preventDefault(); + event.stopPropagation(); + }} + + onClick={() => { + setHiddenDescription(true) + const inputElement = document.getElementById(uiBox); + if (inputElement) { + inputElement.focus(); + } + }}> + + + + + + + Description: {selectedAction?.description} + + + + ); + return ( - + { label={isIntegration ? "Choose a category" : "Find Actions"} variant="outlined" name={`disable_autocomplete_${Math.random()}`} - - /> + /> + ); }} /> @@ -2698,7 +2757,7 @@ const ParsedAction = (props) => { fullWidth disabled={selectedAction.description === undefined || selectedAction.description === null || selectedAction.description.length === 0} onClick={() => { - setHiddenDescription(!hiddenDescription) + setHiddenParameters(!hiddenParameters) }} > Parameters @@ -2816,7 +2875,7 @@ const ParsedAction = (props) => { /> : 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 ? (
{ ) : null} {suggestionInfo()} - {selectedActionParameters?.map((data, count) => { if (data.variant === "") { data.variant = "STATIC_VALUE"; @@ -2855,7 +2913,9 @@ const ParsedAction = (props) => { // 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] !== @@ -3214,8 +3274,79 @@ const ParsedAction = (props) => { } multiline = data.name.startsWith("${") && data.name.endsWith("}") ? true : multiline - + + const description = data.description === undefined ? "" : data?.description; + + const tooltipDescription = ( + + + + {tmpitem.charAt(0).toUpperCase() + tmpitem.slice(1)} + + { + event.preventDefault(); + event.stopPropagation(); + }} + + onClick={() => { + setUiBox("closed") + const inputElement = document.getElementById(uiBox); + if (inputElement) { + inputElement.focus(); + } + }}> + + + + + + + Required: {data.required === true || data.configuration === true ? "True" : "False"} + + + Description: {description} + + + Ex. : {data?.example.length > 0 ? data.example : "No example available"} + + { + data?.configuration === true ? + ( + + Auth: Use "\$" instead of "$" + + ) : null + } + + + ); + var datafield = ( + { // changeActionParameter(event, count, data); handleParamChange(event, count, data) }} + onFocus={(event) => { + setUiBox(event.target.id) + + }} onBlur={(event) => { baseHelperText = calculateHelpertext(event.target.value) if (setLastSaved !== undefined) { setLastSaved(false) } + setUiBox("closed") }} /> + ); // Finds headers from a string to be used for autocompletion @@ -4064,32 +4201,6 @@ const ParsedAction = (props) => { ); }; - const description = - data.description === undefined ? "" : data.description; - const tooltipDescription = ( - - - - Required:{" "} - {data.required === true || data.configuration === true - ? "True" - : "False"} - - - - Example: {data.example} - - - - Description: {description} - - { - data?.configuration ? - ( - - - Use "\$" instead of "$" - - ) : null - } - - ); //var itemColor = "#f85a3e" //if (!data.required) { @@ -4169,9 +4280,7 @@ const ParsedAction = (props) => { marginBottom: "auto", }} > - {tmpitem} -
{/*selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null :