marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added UIbox tooltip

Browse Source
This commit is contained in:
monilprajapati
2024-07-30 16:15:29 +05:30
parent 28c516217a
commit b719d4d7f0
1 changed files with 136 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ParsedAction.jsx
+136 -27
View File
@@ -46,7 +46,8 @@ import {
CircularProgress, CircularProgress,
Switch, Switch,
Collapse, Collapse,
Autocomplete Autocomplete,
Box
} from "@mui/material"; } from "@mui/material";
import { import {
@@ -182,6 +183,7 @@ const ParsedAction = (props) => {
const [prevActionName, setPrevActionName] = React.useState(selectedAction.label); const [prevActionName, setPrevActionName] = React.useState(selectedAction.label);
const [fieldCount, setFieldCount] = React.useState(0); const [fieldCount, setFieldCount] = React.useState(0);
const [hiddenDescription, setHiddenDescription] = React.useState(true); const [hiddenDescription, setHiddenDescription] = React.useState(true);
const [hiddenParameters, setHiddenParameters] = React.useState(true);
const [autoCompleting, setAutocompleting] = React.useState(false); const [autoCompleting, setAutocompleting] = React.useState(false);
const [selectedActionParameters, setSelectedActionParameters] = React.useState(selectedAction?.parameters || []); const [selectedActionParameters, setSelectedActionParameters] = React.useState(selectedAction?.parameters || []);
const [selectedVariableParameter, setSelectedVariableParameter] = React.useState(""); const [selectedVariableParameter, setSelectedVariableParameter] = React.useState("");
@@ -199,6 +201,7 @@ const ParsedAction = (props) => {
const [showDropdownNumber, setShowDropdownNumber] = React.useState(0); const [showDropdownNumber, setShowDropdownNumber] = React.useState(0);
const [showAutocomplete, setShowAutocomplete] = React.useState(false); const [showAutocomplete, setShowAutocomplete] = React.useState(false);
const [menuPosition, setMenuPosition] = useState(null); const [menuPosition, setMenuPosition] = useState(null);
const [uiBox, setUiBox] = useState(null);
const isIntegration = selectedAction.app_id === "integration" const isIntegration = selectedAction.app_id === "integration"
useEffect(() => { useEffect(() => {
@@ -1237,6 +1240,7 @@ const ParsedAction = (props) => {
} }
}); });
} }
setHiddenDescription(false)
document.activeElement.blur(); document.activeElement.blur();
}} }}
> >
@@ -2326,8 +2330,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 ( return (
<TextField <Tooltip title={actionDescription}
placement="right"
open={!hiddenDescription}
PopperProps={{
sx: {
'& .MuiTooltip-tooltip': {
backgroundColor: 'transparent',
boxShadow: 'none',
},
'& .MuiTooltip-arrow': {
color: 'transparent',
},
},
}}
>
<TextField
{...params} {...params}
data-lpignore="true" data-lpignore="true"
@@ -2345,8 +2404,8 @@ const ParsedAction = (props) => {
label={isIntegration ? "Choose a category" : "Find Actions"} label={isIntegration ? "Choose a category" : "Find Actions"}
variant="outlined" variant="outlined"
name={`disable_autocomplete_${Math.random()}`} name={`disable_autocomplete_${Math.random()}`}
/>
/> </Tooltip>
); );
}} }}
/> />
@@ -2543,7 +2602,7 @@ const ParsedAction = (props) => {
fullWidth fullWidth
disabled={selectedAction.description === undefined || selectedAction.description === null || selectedAction.description.length === 0} disabled={selectedAction.description === undefined || selectedAction.description === null || selectedAction.description.length === 0}
onClick={() => { onClick={() => {
setHiddenDescription(!hiddenDescription) setHiddenParameters(!hiddenParameters)
}} }}
> >
<b>Parameters</b> <b>Parameters</b>
@@ -2661,7 +2720,7 @@ const ParsedAction = (props) => {
/> />
</div> </div>
: null} : 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 <div
style={{ style={{
border: "1px solid rgba(255,255,255,0.6)", border: "1px solid rgba(255,255,255,0.6)",
@@ -3055,8 +3114,71 @@ const ParsedAction = (props) => {
} }
multiline = data.name.startsWith("${") && data.name.endsWith("}") ? true : multiline 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>
</Box>
</Box>
);
var datafield = ( var datafield = (
<Tooltip
title={tooltipDescription}
placement="right"
open={clickedFieldId === uiBox}
PopperProps={{
sx: {
'& .MuiTooltip-tooltip': {
backgroundColor: 'transparent',
boxShadow: 'none',
},
'& .MuiTooltip-arrow': {
color: 'transparent',
},
},
}}
>
<TextField <TextField
disabled={disabled} disabled={disabled}
style={{ style={{
@@ -3166,13 +3288,20 @@ const ParsedAction = (props) => {
handleParamChange(event, count, data) handleParamChange(event, count, data)
}} }}
helperText={returnHelperText(data.name, data.value)} helperText={returnHelperText(data.name, data.value)}
onFocus={(event) => {
setUiBox(event.target.id)
console.log(event.target.id)
}}
onBlur={(event) => { onBlur={(event) => {
baseHelperText = calculateHelpertext(event.target.value) baseHelperText = calculateHelpertext(event.target.value)
if (setLastSaved !== undefined) { if (setLastSaved !== undefined) {
setLastSaved(false) setLastSaved(false)
} }
setUiBox("closed")
}} }}
/> />
</Tooltip>
); );
// Finds headers from a string to be used for autocompletion // 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 = (
<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" //var itemColor = "#f85a3e"
//if (!data.required) { //if (!data.required) {
@@ -4001,9 +4112,7 @@ const ParsedAction = (props) => {
marginBottom: "auto", marginBottom: "auto",
}} }}
> >
<Tooltip title={tooltipDescription} placement="top">
<b>{tmpitem} </b> <b>{tmpitem} </b>
</Tooltip>
</div> </div>
{/*selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null : {/*selectedActionParameters[count].options !== undefined && selectedActionParameters[count].options !== null && selectedActionParameters[count].options.length > 0 ? null :