From b719d4d7f08e65b5c7611f1de1819702163e4f14 Mon Sep 17 00:00:00 2001 From: monilprajapati Date: Tue, 30 Jul 2024 16:15:29 +0530 Subject: [PATCH] Added UIbox tooltip --- frontend/src/components/ParsedAction.jsx | 163 +++++++++++++++++++---- 1 file changed, 136 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx index 034859e0..acc5d517 100755 --- a/frontend/src/components/ParsedAction.jsx +++ b/frontend/src/components/ParsedAction.jsx @@ -46,7 +46,8 @@ import { CircularProgress, Switch, Collapse, - Autocomplete + Autocomplete, + Box } from "@mui/material"; import { @@ -182,6 +183,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(""); @@ -199,6 +201,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(() => { @@ -1237,6 +1240,7 @@ const ParsedAction = (props) => { } }); } + setHiddenDescription(false) document.activeElement.blur(); }} > @@ -2326,8 +2330,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()}`} - - /> + /> + ); }} /> @@ -2543,7 +2602,7 @@ const ParsedAction = (props) => { fullWidth disabled={selectedAction.description === undefined || selectedAction.description === null || selectedAction.description.length === 0} onClick={() => { - setHiddenDescription(!hiddenDescription) + setHiddenParameters(!hiddenParameters) }} > Parameters @@ -2661,7 +2720,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 ? (
{ } 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"} + + + + ); + var datafield = ( + { handleParamChange(event, count, data) }} helperText={returnHelperText(data.name, data.value)} + onFocus={(event) => { + setUiBox(event.target.id) + console.log(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 @@ -3904,24 +4033,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} - - - ); //var itemColor = "#f85a3e" //if (!data.required) { @@ -4001,9 +4112,7 @@ const ParsedAction = (props) => { marginBottom: "auto", }} > - {tmpitem} -
{/*selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null :