BUG: Fixed app dragging and hovering stopper in workflow

This commit is contained in:
frikky
2021-12-16 00:55:39 +01:00
parent d6c29ebc6d
commit ae9bc32a47
4 changed files with 201 additions and 148 deletions
+43 -24
View File
@@ -2486,7 +2486,7 @@ const ParsedAction = (props) => {
</div>
) : null}
{showEnvironment !== undefined && showEnvironment ? (
{showEnvironment !== undefined && showEnvironment && environments.length > 1 ? (
<div style={{ marginTop: "20px" }}>
<Typography>Environment</Typography>
<Select
@@ -2515,13 +2515,14 @@ const ParsedAction = (props) => {
borderRadius: theme.palette.borderRadius,
}}
>
{environments.map((data) => {
if (data.archived) {
{environments.map((data, index) => {
if (data.archived === true) {
return null;
}
return (
<MenuItem
key={index}
key={data.Name}
style={{
backgroundColor: theme.palette.inputColor,
@@ -2663,6 +2664,16 @@ const ParsedAction = (props) => {
newActionname = data.label;
}
var newActiondescription = data.description;
console.log("DESC: ", newActiondescription)
if (
data.description === undefined || data.description === null
) {
newActiondescription = "Description: No description defined for this action"
} else {
newActiondescription = "Description: "+newActiondescription
}
const iconInfo = GetIconInfo({ name: data.name });
const useIcon = iconInfo.originalIcon;
@@ -2671,32 +2682,40 @@ const ParsedAction = (props) => {
newActionname.substring(1)
).replaceAll("_", " ");
return (
<div style={{ display: "flex" }}>
<span
style={{
marginRight: 10,
marginTop: "auto",
marginBottom: "auto",
}}
>
{useIcon}
</span>
<span style={{}}>{newActionname}</span>
</div>
<Tooltip
color="secondary"
title={newActiondescription}
placement="left"
>
<div style={{ display: "flex" }}>
<span
style={{
marginRight: 10,
marginTop: "auto",
marginBottom: "auto",
}}
>
{useIcon}
</span>
<span style={{}}>{newActionname}</span>
</div>
</Tooltip>
);
}}
renderInput={(params) => {
return (
<TextField
style={{
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius,
}}
{...params}
label="Find Actions"
variant="outlined"
/>
<TextField
style={{
backgroundColor: theme.palette.inputColor,
borderRadius: theme.palette.borderRadius,
}}
{...params}
label="Find Actions"
variant="outlined"
/>
);
}}
/>
+38 -13
View File
@@ -2132,6 +2132,7 @@ const AngularWorkflow = (props) => {
if (data.id !== undefined && data.app_name !== undefined) {
//newapps.push(data)
workflow.actions.push(data)
setWorkflow(workflow)
curaction = data
} else {
alert.error("Action not found. Please remake it.");
@@ -2257,10 +2258,16 @@ const AngularWorkflow = (props) => {
cy.on("free", "node", (e) => onNodeDragStop(e, curaction));
}
if (environments !== undefined && environments !== null) {
var env = environments.find((a) => a.Name === curaction.environment);
console.log("Object: ", environments)
if (environments !== undefined && environments !== null && (typeof environments === "array" || typeof environments === "object")) {
var parsedenv = environments
if (typeof environments === "object") {
parsedenv = [environments]
}
var env = parsedenv.find((a) => a.Name === curaction.environment);
if (!env || env === undefined) {
env = environments[defaultEnvironmentIndex];
env = parsedenv[defaultEnvironmentIndex];
}
setSelectedActionEnvironment(env);
@@ -2384,7 +2391,13 @@ const AngularWorkflow = (props) => {
// Finds the FIRST json only
if (jsonvalid) {
exampledata = JSON.parse(foundResult.result);
try {
exampledata = JSON.parse(foundResult.result)
} catch (e) {
console.log("Result: ", exampledata)
}
break;
}
}
@@ -2596,10 +2609,17 @@ const AngularWorkflow = (props) => {
}
}
const eventTarget = event.target.target()
console.log("BUTTON! Find parent from: ", eventTarget)
if (eventTarget.data("isButton") === true) {
console.log("ACTUALLY A BUTTON!")
}
if (
event.target.target().data("isButton") === true ||
event.target.target().data("isDescriptor") === true
eventTarget.data("isDescriptor") === true ||
eventTarget.data("type") === "COMMENT"
) {
console.log("Removing because of descriptor or comment")
event.target.remove();
return;
}
@@ -3152,9 +3172,9 @@ const AngularWorkflow = (props) => {
if (response.status !== 200) {
console.log("Status not 200 for apps :O!");
if (isCloud) {
setEnvironments({ name: "Cloud", type: "cloud" });
setEnvironments([{ Name: "Cloud", Type: "cloud" }]);
} else {
setEnvironments({ name: "Onprem", type: "onprem" });
setEnvironments([{ Name: "Onprem", Type: "onprem" }]);
}
return;
@@ -3191,7 +3211,7 @@ const AngularWorkflow = (props) => {
// FIXME: Don't allow multiple in cloud yet. Cloud -> Onprem isn't stable.
if (isCloud) {
setEnvironments({ name: "Cloud", type: "cloud" });
setEnvironments([{ Name: "Cloud", Type: "cloud" }]);
} else {
setEnvironments(responseJson);
}
@@ -3505,9 +3525,11 @@ const AngularWorkflow = (props) => {
const onNodeHover = (event) => {
const nodedata = event.target.data();
if (nodedata.finished === false) {
return;
}
//console.log("NODE: ", nodedata)
//if (nodedata.finished === false) {
// return;
//}
//var parentNode = cy.$("#" + event.target.data("id"));
//if (parentNode.data("isButton") || parentNode.data("buttonId")) return;
@@ -10141,6 +10163,9 @@ const AngularWorkflow = (props) => {
/* Copy the text inside the text field */
document.execCommand("copy");
console.log("COPYING!");
alert.info("Copied value to clipboard, NOT json path.")
} else {
console.log("Failed to copy from " + elementName + ": ", copyText);
}
@@ -10208,7 +10233,7 @@ const AngularWorkflow = (props) => {
/* Copy the text inside the text field */
document.execCommand("copy");
console.log("COPYING!");
alert.info("Copied value to clipboard.")
alert.info("Copied JSON path to clipboard.")
} else {
console.log("Couldn't find element ", elementName);
}
+115 -109
View File
@@ -1332,6 +1332,7 @@ const AppCreator = (props) => {
}
}
if (data.servers !== undefined && data.servers.length > 0) {
var firstUrl = data.servers[0].url;
if (
@@ -1366,123 +1367,128 @@ const AppCreator = (props) => {
//console.log("SECURITY: ", securitySchemes)
//if (Object.entries(securitySchemes) > 1 &&
var newauth = [];
for (const [key, value] of Object.entries(securitySchemes)) {
console.log(key, value);
if (key === "jwt") {
setAuthenticationOption("JWT");
setAuthenticationRequired(true);
try {
for (const [key, value] of Object.entries(securitySchemes)) {
console.log(key, value);
if (key === "jwt") {
setAuthenticationOption("JWT");
setAuthenticationRequired(true);
if (
value.in !== undefined &&
value.in !== null &&
value.in.length > 0
) {
setParameterName(value.in);
}
} else if (value.scheme === "bearer") {
setAuthenticationOption("Bearer auth");
setAuthenticationRequired(true);
} else if (key === "Oauth2" || key === "Oauth2c") {
//alert.info("Can't handle Oauth2 auth yet.")
setAuthenticationOption("Oauth2");
setAuthenticationRequired(true);
if (
value.in !== undefined &&
value.in !== null &&
value.in.length > 0
) {
setParameterName(value.in);
}
} else if (value.scheme === "bearer") {
setAuthenticationOption("Bearer auth");
setAuthenticationRequired(true);
} else if (key === "Oauth2" || key === "Oauth2c") {
//alert.info("Can't handle Oauth2 auth yet.")
setAuthenticationOption("Oauth2");
setAuthenticationRequired(true);
//console.log("FLOW-1: ", value)
const flowkey = value.flow === undefined ? "flows" : "flow";
//console.log("FLOW: ", value[flowkey])
const basekey =
value[flowkey].authorizationCode !== undefined
? "authorizationCode"
: "implicit";
//console.log("FLOW2: ", value[flowkey][basekey])
if (
value[flowkey] !== undefined &&
value[flowkey][basekey] !== undefined
) {
if (
value[flowkey][basekey].authorizationUrl !== undefined &&
parameterName.length === 0
) {
setParameterName(value[flowkey][basekey].authorizationUrl);
}
//console.log("FLOW-1: ", value)
const flowkey = value.flow === undefined ? "flows" : "flow";
//console.log("FLOW: ", value[flowkey])
const basekey =
value[flowkey].authorizationCode !== undefined
? "authorizationCode"
: "implicit";
//console.log("FLOW2: ", value[flowkey][basekey])
if (
value[flowkey] !== undefined &&
value[flowkey][basekey] !== undefined
) {
if (
value[flowkey][basekey].authorizationUrl !== undefined &&
parameterName.length === 0
) {
setParameterName(value[flowkey][basekey].authorizationUrl);
}
var tokenUrl = "";
if (value[flowkey][basekey].tokenUrl !== undefined) {
setParameterLocation(value[flowkey][basekey].tokenUrl);
tokenUrl = value[flowkey][basekey].tokenUrl;
} else {
setParameterLocation("");
}
var tokenUrl = "";
if (value[flowkey][basekey].tokenUrl !== undefined) {
setParameterLocation(value[flowkey][basekey].tokenUrl);
tokenUrl = value[flowkey][basekey].tokenUrl;
} else {
setParameterLocation("");
}
if (value[flowkey][basekey].refreshUrl !== undefined) {
setRefreshUrl(value[flowkey][basekey].refreshUrl);
} else if (tokenUrl.length > 0) {
setRefreshUrl(tokenUrl);
}
if (value[flowkey][basekey].refreshUrl !== undefined) {
setRefreshUrl(value[flowkey][basekey].refreshUrl);
} else if (tokenUrl.length > 0) {
setRefreshUrl(tokenUrl);
}
if (
value[flowkey][basekey].scopes !== undefined &&
value[flowkey][basekey].scopes !== null
) {
if (value[flowkey][basekey].scopes.length > 0) {
setOauth2Scopes(value[flowkey][basekey].scopes);
} else {
var newscopes = [];
for (let [scopekey, scopevalue] of Object.entries(
value[flowkey][basekey].scopes
)) {
if (scopekey.startsWith("http")) {
const scopekeysplit = scopekey.split("/");
if (scopekeysplit.length < 5) {
console.log("Skipping scope: ", scopekey);
alert.info("Skipping scope: " + scopekey);
continue;
}
if (
value[flowkey][basekey].scopes !== undefined &&
value[flowkey][basekey].scopes !== null
) {
if (value[flowkey][basekey].scopes.length > 0) {
setOauth2Scopes(value[flowkey][basekey].scopes);
} else {
var newscopes = [];
for (let [scopekey, scopevalue] of Object.entries(
value[flowkey][basekey].scopes
)) {
if (scopekey.startsWith("http")) {
const scopekeysplit = scopekey.split("/");
if (scopekeysplit.length < 5) {
console.log("Skipping scope: ", scopekey);
alert.info("Skipping scope: " + scopekey);
continue;
}
//console.log("Checking scope for: ", scopekey, scopekeysplit.length)
}
//console.log("Checking scope for: ", scopekey, scopekeysplit.length)
}
newscopes.push(scopekey);
}
newscopes.push(scopekey);
}
setOauth2Scopes(newscopes);
}
}
} else {
console.log(
"Bad flowkey and basekey for oauth2: ",
flowkey,
basekey
);
}
} else if (key === "ApiKeyAuth") {
setAuthenticationOption("API key");
setOauth2Scopes(newscopes);
}
}
} else {
console.log(
"Bad flowkey and basekey for oauth2: ",
flowkey,
basekey
);
}
} else if (key === "ApiKeyAuth" || key === "Token") {
setAuthenticationOption("API key");
value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
setParameterLocation(value.in);
if (!apikeySelection.includes(value.in)) {
console.log("APIKEY SELECT: ", apikeySelection);
alert.error("Might be error in setting up API key authentication");
}
value.in = value.in.charAt(0).toUpperCase() + value.in.slice(1);
setParameterLocation(value.in);
if (!apikeySelection.includes(value.in)) {
console.log("APIKEY SELECT: ", apikeySelection);
alert.error("Might be error in setting up API key authentication");
}
console.log("PARAM NAME: ", value.name);
setParameterName(value.name);
setAuthenticationRequired(true);
} else if (value.scheme === "basic") {
setAuthenticationOption("Basic auth");
setAuthenticationRequired(true);
} else if (value.scheme === "oauth2") {
setAuthenticationOption("Oauth2");
setAuthenticationRequired(true);
} else {
alert.error("Couldn't handle AUTH type: ", key);
//newauth.push({
// "name": key,
// "type": value.in,
// "example": "",
//})
}
}
console.log("PARAM NAME: ", value.name);
setParameterName(value.name);
setAuthenticationRequired(true);
} else if (value.scheme === "basic") {
setAuthenticationOption("Basic auth");
setAuthenticationRequired(true);
} else if (value.scheme === "oauth2") {
setAuthenticationOption("Oauth2");
setAuthenticationRequired(true);
} else {
alert.error("Couldn't handle AUTH type: ", key);
//newauth.push({
// "name": key,
// "type": value.in,
// "example": "",
//})
}
}
} catch (e) {
alert.error("Failed to handle auth")
console.log("Error: ", e)
}
if (newauth.length > 0) {
setExtraAuth(newauth);
@@ -2192,7 +2198,7 @@ const AppCreator = (props) => {
//console.log("Location: ", parameterLocation)
//console.log("Name: ", parameterName)
const extraKeys = (
<div style={{ marginTop: 50 }}>
<div style={{ marginTop: 50, marginRight: 25, }}>
<div style={{ display: "flex" }}>
<Typography variant="body1">Extra authentication</Typography>
{extraAuth.length === 0 ? (
@@ -4394,7 +4400,7 @@ const AppCreator = (props) => {
const imageInfo = (
<img
crossorigin="anonymous"
crossOrigin="anonymous"
src={imageData}
id="logo"
style={{
+5 -2
View File
@@ -18,8 +18,8 @@ import {
import { Link as LinkIcon, Edit as EditIcon } from "@material-ui/icons";
const Body = {
maxWidth: "1000px",
minWidth: "768px",
maxWidth: 1000,
minWidth: 768,
margin: "auto",
display: "flex",
height: "100%",
@@ -81,6 +81,9 @@ const Docs = (props) => {
maxWidth: 250,
flex: 1,
position: "fixed",
maxHeight: "83vh",
overflowX: "hidden",
overflowY: "auto",
};
const fetchDocList = () => {