Fixed Select and Autocomplete prompts to properly select and work with mui18
This commit is contained in:
Frikky
@@ -475,7 +475,7 @@ const EditWorkflow = (props) => {
|
||||
</div>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<DialogActions style={{paddingRight: 20, }}>
|
||||
<Button
|
||||
style={{}}
|
||||
onClick={() => {
|
||||
|
||||
@@ -1146,7 +1146,7 @@ const ParsedAction = (props) => {
|
||||
// setNewSelectedAction({ target: { value: newValue.name } });
|
||||
//}
|
||||
}}
|
||||
renderOption={(data) => {
|
||||
renderOption={(props, data, state) => {
|
||||
var newActionname = data.app_name;
|
||||
if (
|
||||
data.label !== undefined &&
|
||||
@@ -1696,10 +1696,10 @@ const ParsedAction = (props) => {
|
||||
null : null
|
||||
}
|
||||
onBlur={(event) => {
|
||||
baseHelperText = calculateHelpertext(event.target.value)
|
||||
if (setLastSaved !== undefined) {
|
||||
setLastSaved(false)
|
||||
}
|
||||
baseHelperText = calculateHelpertext(event.target.value)
|
||||
if (setLastSaved !== undefined) {
|
||||
setLastSaved(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
@@ -2003,12 +2003,11 @@ const ParsedAction = (props) => {
|
||||
|
||||
datafield = (
|
||||
<Select
|
||||
MenuProps={{
|
||||
disableScrollLock: true,
|
||||
}}
|
||||
MenuProps={{
|
||||
disableScrollLock: true,
|
||||
}}
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}}
|
||||
value={selectedActionParameters[count].value}
|
||||
@@ -2587,7 +2586,6 @@ const ParsedAction = (props) => {
|
||||
labelId="action-autocompleter"
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}}
|
||||
onClose={() => {
|
||||
@@ -2680,6 +2678,62 @@ const ParsedAction = (props) => {
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
const ActionSelectOption = (actionprops) => {
|
||||
const { data, newActionname, newActiondescription, useIcon, extraDescription, } = actionprops;
|
||||
const [hover, setHover] = React.useState(false);
|
||||
|
||||
console.log("Extra desc: ", extraDescription)
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
color="secondary"
|
||||
title={newActiondescription}
|
||||
placement="left"
|
||||
>
|
||||
<div style={{
|
||||
cursor: "pointer",
|
||||
padding: 8,
|
||||
paddingLeft: 14,
|
||||
paddingBottom: 4,
|
||||
backgroundColor: hover ? theme.palette.surfaceColor : theme.palette.inputColor,
|
||||
}} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
|
||||
onClick={() => {
|
||||
//setSelectedAction(actionprops)
|
||||
//setShowActionList(false)
|
||||
//setUpdate(Math.random())
|
||||
//
|
||||
if (data !== undefined && data !== null) {
|
||||
setNewSelectedAction({
|
||||
target: {
|
||||
value: data.name
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", marginBottom: 0,}}>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 10,
|
||||
marginTop: "auto",
|
||||
marginBottom: 0,
|
||||
}}
|
||||
>
|
||||
{useIcon}
|
||||
</span>
|
||||
<span style={{marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
|
||||
</div>
|
||||
{extraDescription.length > 0 ?
|
||||
<Typography variant="body2" color="textSecondary" style={{marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block",}}>
|
||||
{extraDescription}
|
||||
</Typography>
|
||||
: null}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
//const CustomPopper = function (props) {
|
||||
// const classes = useStyles()
|
||||
// return <Popper {...props} className={classes.root} placement="bottom" />
|
||||
@@ -2906,7 +2960,6 @@ const ParsedAction = (props) => {
|
||||
}}
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}}
|
||||
>
|
||||
@@ -2941,6 +2994,7 @@ const ParsedAction = (props) => {
|
||||
<div style={{flex: 5}}>
|
||||
<Typography style={{color: "rgba(255,255,255,0.7)"}}>Name</Typography>
|
||||
<TextField
|
||||
|
||||
style={theme.palette.textFieldStyle}
|
||||
InputProps={{
|
||||
style: theme.palette.innerTextfieldStyle,
|
||||
@@ -3227,8 +3281,7 @@ const ParsedAction = (props) => {
|
||||
}
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
maxWidth: 250,
|
||||
maxWidth: 250,
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -3329,7 +3382,6 @@ const ParsedAction = (props) => {
|
||||
}
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -3375,9 +3427,9 @@ const ParsedAction = (props) => {
|
||||
<div style={{ marginTop: "20px" }}>
|
||||
<Typography>Execution variable (optional)</Typography>
|
||||
<Select
|
||||
MenuProps={{
|
||||
disableScrollLock: true,
|
||||
}}
|
||||
MenuProps={{
|
||||
disableScrollLock: true,
|
||||
}}
|
||||
value={
|
||||
selectedAction.execution_variable !== undefined
|
||||
&& selectedAction.execution_variable !== null
|
||||
@@ -3389,7 +3441,6 @@ const ParsedAction = (props) => {
|
||||
}
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
},
|
||||
}}
|
||||
fullWidth
|
||||
@@ -3458,20 +3509,20 @@ const ParsedAction = (props) => {
|
||||
autoHighlight
|
||||
value={selectedAction}
|
||||
classes={{ inputRoot: classes.inputRoot }}
|
||||
groupBy={(option) => {
|
||||
// Most popular
|
||||
// Is categorized
|
||||
// Uncategorized
|
||||
return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
|
||||
}}
|
||||
renderGroup={(params) => {
|
||||
return (
|
||||
<li key={params.key}>
|
||||
<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
|
||||
<Typography variant="body2">{params.children}</Typography>
|
||||
</li>
|
||||
)
|
||||
}}
|
||||
groupBy={(option) => {
|
||||
// Most popular
|
||||
// Is categorized
|
||||
// Uncategorized
|
||||
return option.category_label !== undefined && option.category_label !== null && option.category_label.length > 0 ? "Most used" : "All Actions";
|
||||
}}
|
||||
renderGroup={(params) => {
|
||||
return (
|
||||
<li key={params.key}>
|
||||
<Typography variant="body1" style={{textAlign: "center", marginLeft: 10, marginTop: 25, marginBottom: 10, }}>{params.group}</Typography>
|
||||
<Typography variant="body2">{params.children}</Typography>
|
||||
</li>
|
||||
)
|
||||
}}
|
||||
options={selectedApp.actions === undefined || selectedApp.actions === null ? [] : selectedApp.actions.filter((a) => a.category_label !== undefined && a.category_label !== null && a.category_label.length > 0).concat(sortByKey(selectedApp.actions, "label"))}
|
||||
ListboxProps={{
|
||||
style: {
|
||||
@@ -3509,10 +3560,10 @@ const ParsedAction = (props) => {
|
||||
// Workaround with event lol
|
||||
if (newValue !== undefined && newValue !== null) {
|
||||
setNewSelectedAction({
|
||||
target: {
|
||||
value: newValue.name
|
||||
}
|
||||
});
|
||||
target: {
|
||||
value: newValue.name
|
||||
}
|
||||
});
|
||||
}
|
||||
}}
|
||||
renderOption={(props, data, state) => {
|
||||
@@ -3560,100 +3611,87 @@ const ParsedAction = (props) => {
|
||||
method = "CONNECT"
|
||||
}
|
||||
|
||||
// FIXME: Should it require a base URL?
|
||||
if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
|
||||
var extraUrl = ""
|
||||
const descSplit = data.description.split("\n")
|
||||
// Last line of descSplit
|
||||
if (descSplit.length > 0) {
|
||||
extraUrl = descSplit[descSplit.length-1]
|
||||
}
|
||||
// FIXME: Should it require a base URL?
|
||||
if (method.length > 0 && data.description !== undefined && data.description !== null && data.description.includes("http")) {
|
||||
var extraUrl = ""
|
||||
const descSplit = data.description.split("\n")
|
||||
// Last line of descSplit
|
||||
if (descSplit.length > 0) {
|
||||
extraUrl = descSplit[descSplit.length-1]
|
||||
}
|
||||
|
||||
//for (let [line,lineval] in Object.entries(descSplit)) {
|
||||
// if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
|
||||
// const urlsplit = descSplit[line].split("/")
|
||||
// try {
|
||||
// extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
|
||||
// } catch (e) {
|
||||
// //console.log("Failed - running with -1")
|
||||
// extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
|
||||
// }
|
||||
//for (let [line,lineval] in Object.entries(descSplit)) {
|
||||
// if (descSplit[line].includes("http") && descSplit[line].includes("://")) {
|
||||
// const urlsplit = descSplit[line].split("/")
|
||||
// try {
|
||||
// extraUrl = "/"+urlsplit.slice(3, urlsplit.length).join("/")
|
||||
// } catch (e) {
|
||||
// //console.log("Failed - running with -1")
|
||||
// extraUrl = "/"+urlsplit.slice(3, urlsplit.length-1).join("/")
|
||||
// }
|
||||
|
||||
|
||||
// //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
|
||||
// //break
|
||||
// }
|
||||
//}
|
||||
// //console.log("NO BASEURL TOO!! Why missing last one in certain scenarios (sevco)?", extraUrl, urlsplit, descSplit[line])
|
||||
// //break
|
||||
// }
|
||||
//}
|
||||
|
||||
if (extraUrl.length > 0) {
|
||||
if (extraUrl.includes(" ")) {
|
||||
extraUrl = extraUrl.split(" ")[0]
|
||||
}
|
||||
if (extraUrl.length > 0) {
|
||||
if (extraUrl.includes(" ")) {
|
||||
extraUrl = extraUrl.split(" ")[0]
|
||||
}
|
||||
|
||||
if (extraUrl.includes("#")) {
|
||||
extraUrl = extraUrl.split("#")[0]
|
||||
}
|
||||
if (extraUrl.includes("#")) {
|
||||
extraUrl = extraUrl.split("#")[0]
|
||||
}
|
||||
|
||||
extraDescription = `${method} ${extraUrl}`
|
||||
} else {
|
||||
//console.log("No url found. Check again :)")
|
||||
}
|
||||
}
|
||||
extraDescription = `${method} ${extraUrl}`
|
||||
} else {
|
||||
//console.log("No url found. Check again :)")
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
color="secondary"
|
||||
title={newActiondescription}
|
||||
placement="left"
|
||||
>
|
||||
<div>
|
||||
<div style={{ display: "flex", marginBottom: 0,}}>
|
||||
<span
|
||||
style={{
|
||||
marginRight: 10,
|
||||
marginTop: "auto",
|
||||
marginBottom: 0,
|
||||
}}
|
||||
>
|
||||
{useIcon}
|
||||
</span>
|
||||
<span style={{marginBottom: 0, marginTop: 3, }}>{newActionname}</span>
|
||||
</div>
|
||||
{extraDescription.length > 0 ?
|
||||
<Typography variant="body2" color="textSecondary" style={{marginTop: 0, overflow: "hidden", whiteSpace: "nowrap", display: "block",}}>
|
||||
{extraDescription}
|
||||
</Typography>
|
||||
: null}
|
||||
</div>
|
||||
</Tooltip>
|
||||
<ActionSelectOption
|
||||
data={data}
|
||||
newActiondescription={newActiondescription}
|
||||
useIcon={useIcon}
|
||||
newActionname={newActionname}
|
||||
extraDescription={extraDescription}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
renderInput={(params) => {
|
||||
if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
|
||||
const prefixes = ["Post", "Put", "Patch"]
|
||||
for (let [key,keyval] in Object.entries(prefixes)) {
|
||||
if (params.inputProps.value.startsWith(prefixes[key])) {
|
||||
params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
|
||||
if (params.inputProps.value.length > 1) {
|
||||
params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
if (params.inputProps !== undefined && params.inputProps !== null && params.inputProps.value !== undefined && params.inputProps.value !== null) {
|
||||
const prefixes = ["Post", "Put", "Patch"]
|
||||
for (let [key,keyval] in Object.entries(prefixes)) {
|
||||
if (params.inputProps.value.startsWith(prefixes[key])) {
|
||||
params.inputProps.value = params.inputProps.value.replace(prefixes[key]+" ", "", -1)
|
||||
if (params.inputProps.value.length > 1) {
|
||||
params.inputProps.value = params.inputProps.value.charAt(0).toUpperCase()+params.inputProps.value.substring(1)
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<TextField
|
||||
color="primary"
|
||||
variant="body1"
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
{...params}
|
||||
label="Find Actions"
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
data-lpignore="true"
|
||||
autocomplete="off"
|
||||
dataLPIgnore="true"
|
||||
|
||||
color="primary"
|
||||
id="checkbox-search"
|
||||
variant="body1"
|
||||
style={{
|
||||
backgroundColor: theme.palette.inputColor,
|
||||
borderRadius: theme.palette.borderRadius,
|
||||
}}
|
||||
{...params}
|
||||
label="Find Actions"
|
||||
variant="outlined"
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user