Frikky
1676 lines
51 KiB
React
1676 lines
51 KiB
React
/* eslint-disable react/no-multi-comp */
|
|
import React, {useState, useEffect} from 'react';
|
|
import ReactDOM from "react-dom"
|
|
|
|
import ReactJson from "react-json-view-ssr";
|
|
import { green, yellow, red, grey} from "./AngularWorkflow.jsx";
|
|
import { CodeHandler, Img, OuterLink, } from "../views/Docs.jsx";
|
|
import { useNavigate, Link, useParams } from "react-router-dom";
|
|
import { validateJson, collapseField, GetIconInfo } from "./Workflows.jsx";
|
|
import EditWorkflow from "../components/EditWorkflow.jsx"
|
|
import { toast } from "react-toastify"
|
|
import { makeStyles } from '@mui/material/styles';
|
|
import { useInterval } from "react-powerhooks";
|
|
import { isMobile } from "react-device-detect";
|
|
import Markdown from "react-markdown";
|
|
import theme from '../theme.jsx';
|
|
import rehypeRaw from "rehype-raw";
|
|
import RecentWorkflow from "../components/RecentWorkflow.jsx";
|
|
|
|
import {
|
|
Tooltip,
|
|
Select,
|
|
IconButton,
|
|
CircularProgress,
|
|
TextField,
|
|
Button,
|
|
ButtonGroup,
|
|
Paper,
|
|
Typography,
|
|
Divider,
|
|
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
MenuItem,
|
|
} from '@mui/material';
|
|
|
|
import {
|
|
Preview as PreviewIcon,
|
|
ContentCopy as ContentCopyIcon,
|
|
ArrowBack as ArrowBackIcon,
|
|
ArrowForward as ArrowForwardIcon,
|
|
Lock as LockIcon,
|
|
LockOpen as LockOpenIcon,
|
|
OpenInNew as OpenInNewIcon,
|
|
Edit as EditIcon,
|
|
} from '@mui/icons-material';
|
|
|
|
const hrefStyle = {
|
|
color: "white",
|
|
textDecoration: "none"
|
|
}
|
|
|
|
|
|
const RunWorkflow = (defaultprops) => {
|
|
const { globalUrl, userdata, isLoaded, isLoggedIn, setIsLoggedIn, setCookie, register, serverside } = defaultprops;
|
|
|
|
let navigate = useNavigate();
|
|
const [_, setUpdate] = useState(""); // Used to force rendring, don't remove
|
|
const [explorerUi, setExplorerUi] = useState(false)
|
|
const [message, setMessage] = useState("");
|
|
const [workflow, setWorkflow] = React.useState({});
|
|
const [executionRequest, setExecutionRequest] = React.useState({});
|
|
const [executionArgument, setExecutionArgument] = useState("");
|
|
const [executionLoading, setExecutionLoading] = useState(false);
|
|
const [executionData, setExecutionData] = React.useState({});
|
|
const [executionRunning, setExecutionRunning] = useState(false);
|
|
const [workflowQuestion, setWorkflowQuestion] = useState("");
|
|
const [selectedOrganization, setSelectedOrganization] = React.useState(undefined);
|
|
const [apps, setApps] = React.useState([]);
|
|
const [buttonClicked, setButtonClicked] = React.useState("");
|
|
const [foundSourcenode, setFoundSourcenode] = React.useState(undefined);
|
|
const [editWorkflowModalOpen, setEditWorkflowModalOpen] = React.useState(false)
|
|
const [sharingOpen, setSharingOpen] = React.useState(false)
|
|
const [realtimeMarkdown, setRealtimeMarkdown] = React.useState("")
|
|
const [forms, setForms] = React.useState([])
|
|
const [boxWidth, setBoxWidth] = React.useState(500)
|
|
const [inputQuestions, setInputQuestions] = React.useState([])
|
|
|
|
const IframeWrapper = (props) => {
|
|
var propsCopy = JSON.parse(JSON.stringify(props))
|
|
propsCopy.width = 400
|
|
propsCopy.height = 225
|
|
|
|
return <iframe {...propsCopy} style={{width: propsCopy.width, height: propsCopy.height, }} />
|
|
}
|
|
|
|
const ImgWrapper = (props) => {
|
|
var propsCopy = JSON.parse(JSON.stringify(props))
|
|
if (propsCopy.width === undefined || propsCopy.width === null) {
|
|
propsCopy.width = 400
|
|
propsCopy.height = "auto"
|
|
|
|
propsCopy.margin = "auto"
|
|
}
|
|
|
|
return Img(propsCopy)
|
|
}
|
|
|
|
const bodyDivStyle = {
|
|
margin: "auto",
|
|
width: isMobile? "100%" : boxWidth,
|
|
position: "relative",
|
|
|
|
paddingBottom: 250,
|
|
}
|
|
|
|
const boxStyle = {
|
|
color: "white",
|
|
padding: "25px 50px 50px 50px",
|
|
backgroundColor: theme.palette.surfaceColor,
|
|
borderRadius: 25,
|
|
minHeight: 500,
|
|
}
|
|
|
|
const params = useParams();
|
|
var props = JSON.parse(JSON.stringify(defaultprops))
|
|
props.match = {}
|
|
props.match.params = params
|
|
|
|
const defaultTitle = workflow.name !== undefined ? "Shuffle - Form for " + workflow.name : "Shuffle - Form to Run Workflows"
|
|
if (document != undefined && document.title != defaultTitle) {
|
|
document.title = defaultTitle
|
|
}
|
|
|
|
const parsedsearch = serverside === true ? "" : window.location.search
|
|
if (serverside !== true) {
|
|
const tmpMessage = new URLSearchParams(window.location.search).get("message")
|
|
if (tmpMessage !== undefined && tmpMessage !== null && message !== tmpMessage) {
|
|
setMessage(tmpMessage)
|
|
}
|
|
}
|
|
|
|
// Used to swap from login to register. True = login, false = register
|
|
|
|
// Error messages etc
|
|
const [executionInfo, setExecutionInfo] = useState("");
|
|
|
|
const handleValidateForm = (executionArgument) => {
|
|
// Check if every field exists
|
|
if (executionArgument === undefined || executionArgument === null) {
|
|
return true
|
|
}
|
|
|
|
// Check if it's an object or not
|
|
if (typeof executionArgument === "string") {
|
|
// Make it an object
|
|
try {
|
|
executionArgument = JSON.parse(executionArgument)
|
|
} catch (e) {
|
|
console.log("Error parsing execution argument: ", e)
|
|
executionArgument = {}
|
|
}
|
|
}
|
|
|
|
console.log("EXEC: ", executionArgument)
|
|
for (var key in executionArgument) {
|
|
if (executionArgument[key] === undefined || executionArgument[key] === null || executionArgument[key] === "") {
|
|
return false
|
|
}
|
|
}
|
|
|
|
return true
|
|
}
|
|
|
|
const loadForms = (orgId) => {
|
|
const url = `${globalUrl}/api/v1/orgs/${orgId}/forms`
|
|
fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for org forms");
|
|
}
|
|
|
|
return response.json()
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success === false) {
|
|
toast.error("Failed saving workflow. Please try again.")
|
|
} else {
|
|
if (responseJson?.length > 0) {
|
|
// Sort them by name
|
|
responseJson.sort((a, b) => a.name.localeCompare(b.name))
|
|
setForms(responseJson)
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
//toast.error("Load form error: " + error)
|
|
})
|
|
}
|
|
|
|
const saveWorkflow = (workflow) => {
|
|
const url = `${globalUrl}/api/v1/workflows/${workflow.id}`
|
|
fetch(url, {
|
|
method: "PUT",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
body: JSON.stringify(workflow),
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflows :O!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success === false) {
|
|
toast.error("Failed saving workflow. Please try again.")
|
|
}
|
|
//toast.success("Saved workflow")
|
|
})
|
|
.catch((error) => {
|
|
toast.error("Save workflow error: " + error)
|
|
});
|
|
|
|
}
|
|
|
|
const getApps = () => {
|
|
fetch(globalUrl + "/api/v1/apps", {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for apps :O!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
setApps(responseJson)
|
|
})
|
|
.catch(error => {
|
|
console.log("App error: ", error);
|
|
})
|
|
}
|
|
|
|
const ShowExecutionResults = (props) => {
|
|
const { executionData } = props;
|
|
|
|
if (executionData === undefined || executionData === null || executionData === {}) {
|
|
return null
|
|
}
|
|
|
|
const executionMargin = 20
|
|
const defaultReturn = null
|
|
/*
|
|
<div style={{marginTop: executionMargin, }}>
|
|
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
|
|
No results yet
|
|
</Typography>
|
|
</div>
|
|
*/
|
|
|
|
if (executionData.results === undefined || executionData.results === null) {
|
|
return defaultReturn
|
|
}
|
|
|
|
const validate = validateJson(executionData.result)
|
|
|
|
return (
|
|
<div style={{marginTop: executionMargin, }}>
|
|
{workflowQuestion !== "" ? null :
|
|
<Divider style={{marginTop: 20, marginBottom: 20, }}/>
|
|
}
|
|
|
|
{workflowQuestion !== "" ? null :
|
|
validate.valid === false ?
|
|
<div style={{marginTop: 20, }}>
|
|
<Divider />
|
|
<Markdown
|
|
components={{
|
|
img: Img,
|
|
code: CodeHandler,
|
|
a: OuterLink,
|
|
}}
|
|
id="markdown_wrapper"
|
|
escapeHtml={false}
|
|
style={{
|
|
maxWidth: "100%",
|
|
minWidth: "100%",
|
|
overflowX: "hidden",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
{validate.result}
|
|
</Markdown>
|
|
</div>
|
|
:
|
|
<ReactJson
|
|
src={validate.result}
|
|
theme={theme.palette.jsonTheme}
|
|
style={theme.palette.reactJsonStyle}
|
|
collapsed={false}
|
|
iconStyle={theme.palette.jsonIconStyle}
|
|
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
|
|
shouldCollapse={(jsonField) => {
|
|
return collapseField(jsonField)
|
|
}}
|
|
displayArrayKey={false}
|
|
enableClipboard={(copy) => {
|
|
//handleReactJsonClipboard(copy);
|
|
}}
|
|
displayDataTypes={false}
|
|
onSelect={(select) => {
|
|
//HandleJsonCopy(validate.result, select, "exec");
|
|
}}
|
|
name={false}
|
|
/>
|
|
}
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const onSubmit = (event, execution_id, authorization, answer) => {
|
|
if (event !== null) {
|
|
event.preventDefault()
|
|
}
|
|
|
|
stop()
|
|
setMessage("")
|
|
setExecutionLoading(true)
|
|
setExecutionData({})
|
|
setExecutionInfo("")
|
|
|
|
var data = {
|
|
"execution_argument": executionArgument,
|
|
"execution_source": "form",
|
|
}
|
|
|
|
if (workflow.input_questions !== undefined && workflow.input_questions !== null && workflow.input_questions.length > 0) {
|
|
try {
|
|
data["execution_argument"] = JSON.stringify(executionArgument)
|
|
} catch (e) {
|
|
console.log("Error parsing execution argument: ", e)
|
|
}
|
|
}
|
|
|
|
if (workflow.start !== undefined && workflow.start !== null && workflow.start.length > 0) {
|
|
//data.start = workflow.start
|
|
} else {
|
|
/*
|
|
if (workflow.actions !== undefined && workflow.actions !== null && workflow.actions.length > 0) {
|
|
for (let actionkey in workflow.actions) {
|
|
if (workflow.actions[actionkey].isStartNode) {
|
|
data.start = workflow.actions[actionkey].id
|
|
break
|
|
}
|
|
}
|
|
}
|
|
*/
|
|
}
|
|
|
|
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/run`
|
|
var fetchBody = {
|
|
headers: {
|
|
'Content-Type': 'application/json; charset=utf-8',
|
|
},
|
|
mode: 'cors',
|
|
credentials: 'include',
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
}
|
|
|
|
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
|
url += `?reference_execution=${execution_id}&authorization=${authorization}&answer=${answer}`
|
|
data = {}
|
|
fetchBody.method = "GET"
|
|
|
|
if (executionArgument !== undefined && executionArgument !== null) {
|
|
try {
|
|
if (typeof executionArgument === "string") {
|
|
url += "¬e=" + executionArgument
|
|
} else {
|
|
url += "¬e=" + JSON.stringify(executionArgument)
|
|
}
|
|
} catch (e) {
|
|
url += "¬e=" + executionArgument
|
|
}
|
|
}
|
|
|
|
} else {
|
|
fetchBody.method = "POST"
|
|
fetchBody.body = JSON.stringify(data)
|
|
}
|
|
|
|
// IF there is an execution argument, we should use it
|
|
fetch(url, fetchBody)
|
|
.then((response) => {
|
|
if (response.status !== 200 && response.status !== 201) {
|
|
|
|
if (answer !== undefined && execution_id !== undefined && authorization !== undefined) {
|
|
setExecutionLoading(false)
|
|
setExecutionRunning(true);
|
|
setExecutionRequest({
|
|
"execution_id": execution_id,
|
|
"authorization": authorization,
|
|
})
|
|
|
|
start();
|
|
return response.json()
|
|
}
|
|
}
|
|
|
|
if (response.status === 401 || response.status === 403) {
|
|
toast("This Form is not available for you to run. If you this is an error, contact support@shuffler.io with a link to this form")
|
|
}
|
|
|
|
return response.json()
|
|
})
|
|
.then(responseJson => {
|
|
setExecutionLoading(false)
|
|
if (responseJson.execution_id !== undefined && responseJson.execution_id !== null && responseJson.execution_id.length > 0) {
|
|
navigate(`?execution_id=${responseJson.execution_id}`)
|
|
}
|
|
|
|
if (responseJson.success === false) {
|
|
console.log("Failed sending execution request")
|
|
if (responseJson.reason !== undefined && responseJson.reason !== null) {
|
|
toast.warn(responseJson.reason)
|
|
}
|
|
|
|
stop()
|
|
setMessage("")
|
|
setExecutionData({})
|
|
setExecutionInfo("")
|
|
setExecutionRunning(false)
|
|
setExecutionRequest({})
|
|
} else {
|
|
console.log("Started execution")
|
|
|
|
if (answer !== undefined && answer !== null) {
|
|
console.log("Skipping start")
|
|
} else {
|
|
setExecutionRunning(true);
|
|
setExecutionRequest(responseJson)
|
|
start()
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
//setExecutionInfo("Error in workflow startup: " + error)
|
|
toast.warn("Error submitting form. Please try again.")
|
|
|
|
stop()
|
|
setMessage("")
|
|
setExecutionData({})
|
|
setExecutionInfo("")
|
|
|
|
setExecutionLoading(false)
|
|
})
|
|
}
|
|
|
|
const { start, stop } = useInterval({
|
|
duration: 1500,
|
|
startImmediate: true,
|
|
callback: () => {
|
|
fetchUpdates(executionRequest.execution_id, executionRequest.authorization)
|
|
},
|
|
})
|
|
|
|
const handleExecutionLoader = () => {
|
|
if (window === undefined || window === null) {
|
|
console.log("No window")
|
|
return
|
|
}
|
|
|
|
const urlParams = new URLSearchParams(window.location.search)
|
|
if (urlParams === undefined || urlParams === null) {
|
|
console.log("No search params")
|
|
return
|
|
}
|
|
|
|
const execution = urlParams.get("execution_id")
|
|
if (execution === undefined || execution === null || execution.length === 0) {
|
|
console.log("No execution")
|
|
}
|
|
|
|
// Only works if you're logged in
|
|
fetchUpdates(execution, "")
|
|
}
|
|
|
|
const loadInputWorkflowData = (workflow_id, inputWorkflow) => {
|
|
|
|
const url = `${globalUrl}/api/v1/workflows/${workflow_id}/run`
|
|
fetch(url, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflows :O!");
|
|
}
|
|
|
|
return response.json()
|
|
})
|
|
.then((responseJson) => {
|
|
// Timeout after 5 seconds (max load time)
|
|
if (responseJson.execution_id !== undefined && responseJson.execution_id !== null && responseJson.execution_id.length > 0 && responseJson.authorization !== undefined && responseJson.authorization !== null && responseJson.authorization.length > 0) {
|
|
|
|
//for (var key in responseJson.results) {
|
|
for (let i = 0; i < 5; i++) {
|
|
setTimeout(() => {
|
|
fetchUpdates(responseJson.execution_id, responseJson.authorization, false, true)
|
|
}, i * 1000)
|
|
}
|
|
} else {
|
|
// Replace the markdown with the result
|
|
if (realtimeMarkdown !== undefined && realtimeMarkdown !== null && realtimeMarkdown.length > 0) {
|
|
const newmarkdown = realtimeMarkdown.replace(`{{ ${workflow_id} }}`, "", -1)
|
|
setRealtimeMarkdown(newmarkdown)
|
|
} else if (inputWorkflow.form_control.input_markdown !== undefined && inputWorkflow.form_control.input_markdown !== null && inputWorkflow.form_control.input_markdown.length > 0) {
|
|
const newmarkdown = inputWorkflow.form_control.input_markdown.replace(`{{ ${workflow_id} }}`, "", -1)
|
|
setRealtimeMarkdown(newmarkdown)
|
|
}
|
|
}
|
|
|
|
})
|
|
.catch((error) => {
|
|
console.log("Get workflow error: ", error.toString())
|
|
|
|
if (realtimeMarkdown !== undefined && realtimeMarkdown !== null && realtimeMarkdown.length > 0) {
|
|
const newmarkdown = inputWorkflow.form_control.input_markdown.replace(`{{ ${workflow_id} }}`, "", -1)
|
|
setRealtimeMarkdown(newmarkdown)
|
|
} else if (inputWorkflow.form_control.input_markdown !== undefined && inputWorkflow.form_control.input_markdown !== null && inputWorkflow.form_control.input_markdown.length > 0) {
|
|
const newmarkdown = inputWorkflow.form_control.input_markdown.replace(`{{ ${workflow_id} }}`, "", -1)
|
|
setRealtimeMarkdown(newmarkdown)
|
|
}
|
|
})
|
|
}
|
|
|
|
const searchParams = new URLSearchParams(window.location.search)
|
|
const answer = searchParams.get("answer")
|
|
const execution_id = searchParams.get("reference_execution")
|
|
const authorization = searchParams.get("authorization")
|
|
const sourceNode = searchParams.get("source_node")
|
|
|
|
const getWorkflow = (workflow_id, selectedNode) => {
|
|
setRealtimeMarkdown("")
|
|
|
|
const url = `${globalUrl}/api/v1/workflows/${workflow_id}`
|
|
fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for workflows :O!");
|
|
}
|
|
|
|
if (response.status === 401 || response.status === 403) {
|
|
toast("This Form is not available to you. If you think this is an error, please contact support@shuffler.io with the URL.")
|
|
}
|
|
|
|
return response.json()
|
|
})
|
|
.then((responseJson) => {
|
|
// Not sure why this is necessary.
|
|
if (responseJson.isValid === undefined) {
|
|
responseJson.isValid = true;
|
|
}
|
|
|
|
if (responseJson.errors === undefined) {
|
|
responseJson.errors = [];
|
|
}
|
|
|
|
if (responseJson.actions === undefined || responseJson.actions === null) {
|
|
responseJson.actions = [];
|
|
}
|
|
|
|
if (responseJson.triggers === undefined || responseJson.triggers === null) {
|
|
responseJson.triggers = [];
|
|
}
|
|
|
|
if (responseJson.input_questions !== undefined && responseJson.input_questions !== null && responseJson.input_questions.length > 0) {
|
|
|
|
var newexec = {}
|
|
for (let questionkey in responseJson.input_questions) {
|
|
const question = responseJson.input_questions[questionkey]
|
|
|
|
var multiChoiceOptions = question.value !== undefined && question.value !== null && question.value.length > 0 && question.value.includes(";") ? question.value.split(";") : []
|
|
if (multiChoiceOptions.length > 1) {
|
|
newexec[multiChoiceOptions[0]] = ""
|
|
} else {
|
|
newexec[question.value] = ""
|
|
}
|
|
}
|
|
|
|
// Override with just relevant fields
|
|
if (sourceNode !== undefined && sourceNode !== null && sourceNode.length > 0) {
|
|
for (var triggerkey in responseJson.triggers) {
|
|
const trig = responseJson.triggers[triggerkey]
|
|
if (trig.id !== sourceNode) {
|
|
continue
|
|
}
|
|
|
|
console.log("TRIG: ", trig)
|
|
if (trig.parameters === undefined || trig.parameters === null) {
|
|
trig.parameters = []
|
|
}
|
|
|
|
for (var paramkey in trig.parameters) {
|
|
const param = trig.parameters[paramkey]
|
|
if (param.name !== "input_questions") {
|
|
continue
|
|
}
|
|
|
|
// Parse as json
|
|
var keepfields = []
|
|
try {
|
|
const parsed = JSON.parse(param.value)
|
|
|
|
// Find this in the workflow.input_questions
|
|
for (var questionkey in responseJson.input_questions) {
|
|
var question = JSON.parse(JSON.stringify(responseJson.input_questions[questionkey]))
|
|
question.value = question.value.split(";")[0]
|
|
if (parsed.includes(question.name)) {
|
|
keepfields.push(question.value)
|
|
}
|
|
}
|
|
|
|
//newexec = {}
|
|
} catch (e) {
|
|
console.log("Error parsing input questions: ", e)
|
|
}
|
|
|
|
// Remapping it to exec
|
|
if (keepfields.length > 0) {
|
|
newexec = {}
|
|
for (var key in keepfields) {
|
|
newexec[keepfields[key]] = ""
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
setExecutionArgument(newexec)
|
|
}
|
|
|
|
if (selectedNode !== undefined && selectedNode !== null && selectedNode.length > 0) {
|
|
|
|
var found = false
|
|
for (var actionkey in responseJson.actions) {
|
|
if (responseJson.actions[actionkey].id === selectedNode) {
|
|
found = true
|
|
setFoundSourcenode(responseJson.actions[actionkey])
|
|
break
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
for (var triggerkey in responseJson.triggers) {
|
|
if (responseJson.triggers[triggerkey].id !== selectedNode) {
|
|
continue
|
|
}
|
|
|
|
|
|
setFoundSourcenode(responseJson.triggers[triggerkey])
|
|
|
|
if (responseJson.input_questions !== undefined && responseJson.input_questions !== null && responseJson.input_questions.length > 0 && responseJson.triggers[triggerkey].trigger_type === "USERINPUT") {
|
|
|
|
// Look for input questions param
|
|
for (var paramkey in responseJson.triggers[triggerkey].parameters) {
|
|
if (responseJson.triggers[triggerkey].parameters[paramkey].name === "input_questions") {
|
|
|
|
var relevantquestions = []
|
|
for (var questionkey in responseJson.input_questions) {
|
|
if (responseJson.triggers[triggerkey].parameters[paramkey].value.includes(responseJson.input_questions[questionkey].name)) {
|
|
relevantquestions.push(responseJson.input_questions[questionkey])
|
|
}
|
|
}
|
|
|
|
setInputQuestions(relevantquestions)
|
|
//responseJson.input_questions = relevantquestions
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
if (responseJson.form_control.input_markdown !== undefined && responseJson.form_control.input_markdown !== null && responseJson.form_control.input_markdown.length > 0) {
|
|
// Look for {{ uuid }} format, and try to run that workflow with their account
|
|
// This is a hack, but a fun one.
|
|
var newmarkdown = responseJson.form_control.input_markdown.replace("", "")
|
|
|
|
const uuidRegex = /{{\s[a-f0-9-]+\s}}/g
|
|
const found = newmarkdown.match(uuidRegex)
|
|
if (found !== undefined && found !== null && found.length > 0) {
|
|
var handled = []
|
|
for (var foundkey in found) {
|
|
const uuid = found[foundkey].replace("{{", "").replace("}}", "").trim()
|
|
|
|
if (handled.includes(uuid)) {
|
|
continue
|
|
}
|
|
|
|
handled.push(uuid)
|
|
|
|
const storageKey = `workflowresult_${uuid}`
|
|
const value = localStorage.getItem(storageKey)
|
|
|
|
var runWorkflow = false
|
|
if (value !== undefined && value !== null && value.length > 0) {
|
|
// Check if timestamp with new Date().getTime() is more than 10 minutes ago
|
|
const parsedValue = JSON.parse(value)
|
|
if (parsedValue.timestamp !== undefined && parsedValue.timestamp !== null) {
|
|
// 1 min = 60000ms -> 5 min = 300000ms
|
|
const now = new Date().getTime()
|
|
if (now - parsedValue.timestamp > 300000) {
|
|
localStorage.removeItem(storageKey)
|
|
runWorkflow = true
|
|
} else {
|
|
newmarkdown = newmarkdown.replace(`{{ ${uuid} }}`, parsedValue.result, -1)
|
|
}
|
|
} else {
|
|
runWorkflow = true
|
|
}
|
|
} else {
|
|
runWorkflow = true
|
|
}
|
|
|
|
if (runWorkflow) {
|
|
loadInputWorkflowData(uuid, responseJson)
|
|
}
|
|
|
|
}
|
|
|
|
setRealtimeMarkdown(newmarkdown)
|
|
}
|
|
}
|
|
|
|
|
|
handleExecutionLoader()
|
|
|
|
handleGetOrg(responseJson.org_id)
|
|
|
|
if (responseJson.form_control === undefined || responseJson.form_control === null) {
|
|
responseJson.form_control = {
|
|
"input_markdown": "",
|
|
"output_yields": [],
|
|
"form_width": 500,
|
|
}
|
|
}
|
|
|
|
|
|
if (responseJson.form_control.form_width !== undefined && responseJson.form_control.form_width !== null && responseJson.form_control.form_width > 300) {
|
|
setBoxWidth(responseJson.form_control.form_width)
|
|
}
|
|
|
|
setWorkflow(responseJson)
|
|
})
|
|
.catch((error) => {
|
|
console.log("Get workflow error: ", error.toString());
|
|
});
|
|
};
|
|
|
|
|
|
const handleUpdateResults = (responseJson, executionRequest) => {
|
|
if (responseJson === undefined || responseJson === null || responseJson.success === false) {
|
|
return
|
|
}
|
|
|
|
//console.log("Got response: ", responseJson)
|
|
|
|
ReactDOM.unstable_batchedUpdates(() => {
|
|
if (JSON.stringify(responseJson) !== JSON.stringify(executionData)) {
|
|
// FIXME: If another is selected, don't edit..
|
|
// Doesn't work because this is some async garbage
|
|
if (executionData.execution_id === undefined || (responseJson.execution_id === executionData.execution_id && responseJson.results !== undefined && responseJson.results !== null)) {
|
|
if (executionData.status !== responseJson.status || executionData.result !== responseJson.result || (executionData.results !== undefined && responseJson.results !== null && executionData.results.length !== responseJson.results.length)) {
|
|
|
|
if (responseJson.result !== undefined && responseJson.result !== null && responseJson.result.length > 0) {
|
|
if (responseJson.result.startsWith("[") && responseJson.result.endsWith("]")) {
|
|
try {
|
|
responseJson.result = JSON.parse(responseJson.result).length
|
|
} catch (e) {
|
|
console.log("Error parsing length: ", e)
|
|
}
|
|
}
|
|
}
|
|
|
|
//console.log("Updating data!")
|
|
setExecutionData(responseJson)
|
|
|
|
for (var key in responseJson.results) {
|
|
if (responseJson.results[key].status === "WAITING") {
|
|
const validate = validateJson(responseJson.results[key].result)
|
|
if (validate.valid && typeof validate.result === "string") {
|
|
validate.result = JSON.parse(validate.result)
|
|
}
|
|
|
|
if (validate.result["information"] !== undefined && validate.result["information"] !== null) {
|
|
setWorkflowQuestion(validate.result["information"])
|
|
}
|
|
|
|
break
|
|
}
|
|
}
|
|
} else {
|
|
console.log("NOT updating executiondata state.");
|
|
}
|
|
}
|
|
}
|
|
|
|
if (responseJson.status === "ABORTED" || responseJson.status === "STOPPED" || responseJson.status === "FAILURE" || responseJson.status === "WAITING") {
|
|
stop();
|
|
|
|
if (executionRunning) {
|
|
setExecutionRunning(false);
|
|
}
|
|
|
|
//getWorkflowExecution(props.match.params.key, "");
|
|
} else if (responseJson.status === "FINISHED") {
|
|
setExecutionRunning(false)
|
|
stop();
|
|
//getWorkflowExecution(props.match.params.key, "");
|
|
}
|
|
})
|
|
}
|
|
|
|
const handleGetOrg = (orgId, execution_id, authorization) => {
|
|
if (orgId === undefined || orgId === null || orgId.length === 0) {
|
|
return
|
|
}
|
|
|
|
// Just use this one?
|
|
var url = execution_id !== undefined && authorization !== undefined ? `${globalUrl}/api/v1/orgs/${orgId}?reference_execution=${execution_id}&authorization=${authorization}` : `${globalUrl}/api/v1/orgs/${orgId}`;
|
|
|
|
loadForms(orgId)
|
|
|
|
fetch(url, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (response.status === 401) {
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
} else {
|
|
if (responseJson.sync_features === undefined || responseJson.sync_features === null) {
|
|
}
|
|
|
|
if (document != undefined && document.title != defaultTitle) {
|
|
document.title = responseJson.name + " - " + defaultTitle
|
|
}
|
|
|
|
if (responseJson.image !== undefined && responseJson.image !== null && responseJson.image.length > 0) {
|
|
} else {
|
|
responseJson.image = theme.palette.defaultImage
|
|
}
|
|
setSelectedOrganization(responseJson)
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error getting org: ", error);
|
|
});
|
|
};
|
|
|
|
const fetchUpdates = (execution_id, authorization, getorg, replaceMarkdown) => {
|
|
if (execution_id === undefined || execution_id === null || execution_id === "") {
|
|
console.log("No execution id: ", execution_id)
|
|
stop()
|
|
return
|
|
}
|
|
|
|
const innerRequest = {
|
|
"execution_id": execution_id,
|
|
"authorization": authorization === undefined || authorization === null ? "" : authorization,
|
|
}
|
|
|
|
if (executionRequest.execution_id !== innerRequest.execution_id && replaceMarkdown !== true) {
|
|
setExecutionRequest(innerRequest)
|
|
}
|
|
|
|
if (execution_id === "") {
|
|
console.log("No execution id or authorization")
|
|
setExecutionLoading(false)
|
|
setExecutionRunning(false)
|
|
stop()
|
|
return
|
|
}
|
|
|
|
fetch(globalUrl + "/api/v1/streams/results", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
body: JSON.stringify(innerRequest),
|
|
credentials: "include",
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
console.log("Status not 200 for stream results :O!");
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success == false) {
|
|
return
|
|
}
|
|
|
|
if (replaceMarkdown === true) {
|
|
if (responseJson.result.length > 0) {
|
|
// Set local storage for the workflow id
|
|
const storageKey = `workflowresult_${responseJson.workflow.id}`
|
|
const value = {
|
|
"timestamp": new Date().getTime(),
|
|
"result": responseJson.result,
|
|
}
|
|
|
|
localStorage.setItem(storageKey, JSON.stringify(value))
|
|
}
|
|
|
|
if (realtimeMarkdown !== undefined && realtimeMarkdown !== null && realtimeMarkdown.length > 0) {
|
|
const newmarkdown = realtimeMarkdown.replace(`{{ ${responseJson.workflow.id} }}`, responseJson.result, -1)
|
|
setRealtimeMarkdown(newmarkdown)
|
|
|
|
} else if (workflow.form_control.input_markdown !== undefined && workflow.form_control.input_markdown !== null && workflow.form_control.input_markdown.length > 0) {
|
|
const newmarkdown = workflow.form_control.input_markdown.replace(`{{ ${responseJson.workflow.id} }}`, responseJson.result, -1)
|
|
setRealtimeMarkdown(newmarkdown)
|
|
}
|
|
|
|
} else {
|
|
if (getorg === true) {
|
|
handleGetOrg(responseJson.org_id, execution_id, authorization)
|
|
}
|
|
|
|
handleUpdateResults(responseJson, executionRequest);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Execution result Error: ", error);
|
|
});
|
|
};
|
|
|
|
|
|
useEffect(() => {
|
|
if (!isLoaded) {
|
|
return
|
|
}
|
|
|
|
if (props.match.params.key === undefined) {
|
|
setExplorerUi(true)
|
|
|
|
if (isLoggedIn) {
|
|
loadForms(userdata.active_org.id)
|
|
handleGetOrg(userdata.active_org.id)
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
getWorkflow(props.match.params.key, sourceNode)
|
|
if (execution_id !== undefined && execution_id !== null && authorization !== undefined && authorization !== null) {
|
|
console.log("Get execution: ", execution_id)
|
|
fetchUpdates(execution_id, authorization, true)
|
|
}
|
|
|
|
if (answer !== undefined && answer !== null) {
|
|
console.log("Got answer: ", answer)
|
|
}
|
|
}, [isLoaded])
|
|
|
|
useEffect(() => {
|
|
if (executionData === undefined || executionData === null || executionData === {}) {
|
|
return
|
|
}
|
|
|
|
if (foundSourcenode === undefined || foundSourcenode === null || foundSourcenode === {}) {
|
|
return
|
|
}
|
|
|
|
if (foundSourcenode.trigger_type !== "USERINPUT") {
|
|
return
|
|
}
|
|
|
|
if (executionData.results === undefined || executionData.results === null || executionData.results.length === 0) {
|
|
return
|
|
}
|
|
|
|
for (var resultkey in executionData.results) {
|
|
const result = executionData.results[resultkey]
|
|
if (result.action.id !== foundSourcenode.id) {
|
|
continue
|
|
}
|
|
|
|
var parsedresult = result.result
|
|
try {
|
|
parsedresult = JSON.parse(parsedresult)
|
|
} catch (e) {
|
|
console.log("Error parsing result: ", e)
|
|
}
|
|
|
|
if (result.status !== "WAITING") {
|
|
if (parsedresult.information !== undefined && parsedresult.information !== null && parsedresult.information.length > 0) {
|
|
setWorkflowQuestion(parsedresult.information)
|
|
}
|
|
|
|
if (parsedresult.click_info !== undefined && parsedresult.click_info !== null) {
|
|
if (parsedresult.click_info.user !== undefined && parsedresult.click_info.user !== null && parsedresult.click_info.user.length > 0) {
|
|
setMessage("Already answered by " + parsedresult.click_info.user)
|
|
|
|
}
|
|
} else {
|
|
setMessage("Answered.")
|
|
}
|
|
|
|
}
|
|
|
|
break
|
|
}
|
|
|
|
}, [executionData, foundSourcenode])
|
|
|
|
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
|
|
const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
|
|
|
|
// Check if all fields are filled in?
|
|
var disabledButtons = executionLoading || executionRunning || message.length > 0
|
|
if (disabledButtons === false && workflow.input_questions !== undefined && workflow.input_questions !== null && workflow.input_questions.length > 0) {
|
|
// Check field values
|
|
//disabledButtons = handleValidateForm(executionArgument)
|
|
}
|
|
|
|
const organization = selectedOrganization !== undefined && selectedOrganization !== null ? selectedOrganization.name : "Unknown"
|
|
const contact = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.org !== undefined && selectedOrganization.org !== null? selectedOrganization.org : "support@shuffler.io"
|
|
//const contact = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.contact !== undefined && selectedOrganization.contact !== null? selectedOrganization.contact : "support@shuffler.io"
|
|
|
|
const image = selectedOrganization !== undefined && selectedOrganization !== null && selectedOrganization.image !== undefined && selectedOrganization.image !== null && selectedOrganization.image !== "" ? selectedOrganization.image : theme.palette.defaultImage
|
|
|
|
//console.log("IMG: ", image, "ORG: ", selectedOrganization)
|
|
|
|
if (!disabledButtons && answer !== undefined && answer !== null && organization !== "Unknown" && buttonClicked.length === 0) {
|
|
console.log("Finding button!")
|
|
// Find the button
|
|
var buttonid = ""
|
|
if (answer === "false") {
|
|
buttonid = "abort_execution"
|
|
} else if (answer === "true") {
|
|
buttonid = "continue_execution"
|
|
}
|
|
|
|
if (buttonid !== "") {
|
|
const foundButton = document.getElementById(buttonid)
|
|
console.log("Button: ", foundButton)
|
|
if (foundButton !== undefined && foundButton !== null) {
|
|
foundButton.click()
|
|
}
|
|
}
|
|
}
|
|
|
|
const FormList = () => {
|
|
return (
|
|
<div>
|
|
{forms.map((form, formIndex) => {
|
|
if (form.id === undefined || form.id === null) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div key={formIndex} style={{marginBottom: 10, }}>
|
|
<RecentWorkflow
|
|
workflow={form}
|
|
onclickHandler={() => {
|
|
navigate(`/forms/${form.id}`)
|
|
getWorkflow(form.id, sourceNode)
|
|
setExplorerUi(false)
|
|
}}
|
|
currentWorkflowId={workflow.id}
|
|
/>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const ExplorerUi = () => {
|
|
return (
|
|
<div style={{paddingTop: 50, marginTop: 50, width: 250, itemAlign: "center", textAlign: "center", margin: "auto", }}>
|
|
|
|
{forms !== undefined && forms !== null && forms.length > 0 ?
|
|
<div>
|
|
<Typography variant="h6" style={{marginBottom: 20, }}>
|
|
Available forms
|
|
</Typography>
|
|
<FormList />
|
|
</div>
|
|
:
|
|
<Typography variant="h6" style={{marginTop: 100, marginBottom: 20, }}>
|
|
No Form Found
|
|
</Typography>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
var validResults = 0
|
|
const basedata =
|
|
<div style={bodyDivStyle}>
|
|
<Paper style={boxStyle}>
|
|
{explorerUi === true ?
|
|
<ExplorerUi />
|
|
:
|
|
workflow.id === undefined || workflow.id === null ?
|
|
<div style={{paddingTop: 150, marginTop: 150, width: 250, itemAlign: "center", textAlign: "center", margin: "auto", }}>
|
|
<CircularProgress />
|
|
<Typography variant="body1" style={{marginTop: 20, }}>
|
|
Loading Form Details...
|
|
</Typography>
|
|
</div>
|
|
:
|
|
<div>
|
|
{workflowQuestion !== "" || (workflow.form_control.input_markdown !== undefined && workflow.form_control.input_markdown !== null && workflow.form_control.input_markdown.length > 0) ?
|
|
<div style={{marginBottom: 20, }}>
|
|
<Markdown
|
|
components={{
|
|
iframe: IframeWrapper,
|
|
img: ImgWrapper,
|
|
code: CodeHandler,
|
|
a: OuterLink,
|
|
}}
|
|
id="markdown_wrapper"
|
|
escapeHtml={false}
|
|
style={{
|
|
maxWidth: "100%", minWidth: "100%",
|
|
}}
|
|
rehypePlugins={[rehypeRaw]}
|
|
>
|
|
{workflowQuestion !== "" ? workflowQuestion : realtimeMarkdown !== undefined && realtimeMarkdown !== null && realtimeMarkdown.length > 0 ? realtimeMarkdown : workflow.form_control.input_markdown}
|
|
</Markdown>
|
|
</div>
|
|
: null}
|
|
|
|
<form onSubmit={(e) => {onSubmit(e)}} style={{margin: "25px 0px 15px 0px",}}>
|
|
{workflowQuestion !== "" || (workflow.form_control.input_markdown !== undefined && workflow.form_control.input_markdown !== null && workflow.form_control.input_markdown.length > 0) ? null :
|
|
<div>
|
|
<img
|
|
alt={workflow.name}
|
|
src={image}
|
|
style={{
|
|
marginRight: 20,
|
|
width: 100,
|
|
height: 100,
|
|
border: `2px solid ${green}`,
|
|
borderRadius: 50,
|
|
position: "absolute",
|
|
top: -50,
|
|
left: 200,
|
|
}}
|
|
/>
|
|
|
|
<Typography variant="h6" style={{marginBottom: 10, marginTop: 50, textAlign: "center", }}>
|
|
{organization}
|
|
</Typography>
|
|
<Divider style={{marginTop: 20, marginBottom: 20, }}/>
|
|
|
|
{disabledButtons && message.length > 0 ? null :
|
|
<Typography color="textSecondary" style={{textAlign: "center", }}>
|
|
{message}
|
|
</Typography>
|
|
}
|
|
|
|
{answer !== undefined && answer !== null ? null :
|
|
<Typography variant="h6" style={{marginBottom: 15, textAlign: "center", }}><b>{workflow.name}</b></Typography>
|
|
}
|
|
|
|
{workflowQuestion.length > 0 ?
|
|
<div style={{
|
|
backgroundColor: theme.palette.inputColor,
|
|
padding: 20,
|
|
borderRadius: theme.palette?.borderRadius,
|
|
marginBottom: 35,
|
|
marginTop: 30,
|
|
}}>
|
|
<Typography variant="body1" style={{ marginRight: 15, textAlign: "center", whiteSpace: "pre-line", }}>
|
|
{workflowQuestion}
|
|
</Typography>
|
|
</div>
|
|
: null}
|
|
|
|
</div>
|
|
}
|
|
|
|
{workflow.input_questions !== undefined && workflow.input_questions !== null && workflow.input_questions.length > 0 ?
|
|
<div style={{marginBottom: 5, }}>
|
|
{inputQuestions.map((question, index) => {
|
|
|
|
// Multiple choice checks for semicolon-splits
|
|
var multiChoiceOptions = question.value !== undefined && question.value !== null && question.value.length > 0 && question.value.includes(";") ? question.value.split(";") : []
|
|
// Remove empty keys from array
|
|
multiChoiceOptions = multiChoiceOptions.filter(function(e) { return e !== "" })
|
|
if (multiChoiceOptions.length > 1 && (executionArgument[multiChoiceOptions[0]] === undefined || executionArgument[multiChoiceOptions[0]] === null || executionArgument[multiChoiceOptions[0]] === "")) {
|
|
// Set the first item to be default
|
|
executionArgument[multiChoiceOptions[0]] = multiChoiceOptions[1]
|
|
}
|
|
|
|
return (
|
|
<div style={{marginBottom: 10}} key={index}>
|
|
|
|
{multiChoiceOptions.length > 1 ?
|
|
<div>
|
|
{question.name}
|
|
<Select
|
|
disabled={disabledButtons}
|
|
fullWidth
|
|
required
|
|
label={multiChoiceOptions[0]}
|
|
value={executionArgument[multiChoiceOptions[0]]}
|
|
onChange={(e) => {
|
|
const curQuestion = multiChoiceOptions[0]
|
|
executionArgument[curQuestion] = e.target.value
|
|
setUpdate(Math.random())
|
|
}}
|
|
>
|
|
|
|
{multiChoiceOptions.map((option, menuIndex) => {
|
|
if (menuIndex === 0) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<MenuItem
|
|
key={menuIndex}
|
|
value={option}
|
|
>
|
|
{option}
|
|
</MenuItem>
|
|
)
|
|
})}
|
|
</Select>
|
|
</div>
|
|
:
|
|
<TextField
|
|
color="primary"
|
|
style={{
|
|
backgroundColor: theme.palette.inputColor,
|
|
marginTop: 5,
|
|
}}
|
|
label={question.value.charAt(0).toUpperCase() + question.value.slice(1)}
|
|
required
|
|
|
|
disabled={disabledButtons}
|
|
fullWidth={true}
|
|
placeholder=""
|
|
id="emailfield"
|
|
margin="normal"
|
|
variant="outlined"
|
|
onChange={(e) => {
|
|
executionArgument[question.value] = e.target.value
|
|
setExecutionArgument(executionArgument)
|
|
setUpdate(Math.random())
|
|
}}
|
|
/>
|
|
}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
:
|
|
answer !== undefined && answer !== null ? null :
|
|
<span>
|
|
Runtime Argument
|
|
<div style={{marginBottom: 5}}>
|
|
<TextField
|
|
color="primary"
|
|
style={{backgroundColor: theme.palette.inputColor, marginTop: 5, }}
|
|
multiLine
|
|
maxRows={2}
|
|
InputProps={{
|
|
style:{
|
|
height: "50px",
|
|
color: "white",
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
fullWidth={true}
|
|
placeholder=""
|
|
id="emailfield"
|
|
margin="normal"
|
|
variant="outlined"
|
|
onChange={(e) => {
|
|
setExecutionArgument(e.target.value)
|
|
}}
|
|
/>
|
|
</div>
|
|
</span>
|
|
}
|
|
|
|
|
|
|
|
{executionRunning ?
|
|
<span style={{width: 50, height: 50, margin: "auto", alignItems: "center", justifyContent: "center", textAlign: "center", }}>
|
|
<CircularProgress style={{marginTop: 20, marginBottom: 20, marginLeft: 185, }}/>
|
|
|
|
{/*executionData.status !== undefined && executionData.status !== null && executionData.status !== "" ?
|
|
<Typography variant="body2" style={{margin: "auto", marginTop: 20, marginBottom: 20, textAlign: "center", alignItem: "center", }} color="textSecondary">
|
|
Status: {executionData.status}
|
|
</Typography>
|
|
: null*/}
|
|
</span>
|
|
:
|
|
((answer !== undefined && answer !== null) || (foundSourcenode !== undefined && foundSourcenode !== null)) ?
|
|
<span style={{marginTop: 20, }}>
|
|
|
|
{disabledButtons && message.length > 0 ?
|
|
<Typography variant="body1" style={{textAlign: "center", marginTop: 30, marginBottom: 20, }}>
|
|
{message}. You may close this window.
|
|
</Typography>
|
|
:
|
|
<Typography variant="body1" style={{textAlign: "center", marginTop: 30, marginBottom: 20, }}>
|
|
{disabledButtons ? "Answered. You may close this window." : ""}
|
|
</Typography>
|
|
}
|
|
|
|
{disabledButtons ? null :
|
|
<Typography variant="body2" color="textSecondary" style={{textAlign: "center", marginTop: 10, }}>
|
|
What do you want to do?
|
|
</Typography>
|
|
}
|
|
|
|
<div fullWidth style={{width: "100%", marginTop: 10, marginBottom: 10, display: "flex", }}>
|
|
<Button fullWidth id="continue_execution" variant="contained" disabled={!handleValidateForm(executionArgument) || disabledButtons} color="primary" style={{flex: 1,}} onClick={() => {
|
|
setButtonClicked("FINISHED")
|
|
setExecutionData({
|
|
status: "FINISHED",
|
|
})
|
|
|
|
onSubmit(null, execution_id, authorization, true)
|
|
}}>Continue</Button>
|
|
<Typography variant="body1" style={{marginLeft: 3, marginRight: 3, marginTop: 3, }}>
|
|
or
|
|
</Typography>
|
|
<Button fullWidth id="abort_execution" variant="contained" disabled={!handleValidateForm(executionArgument) || disabledButtons} color="primary" style={{ flex: 1, }} onClick={() => {
|
|
setButtonClicked("ABORTED")
|
|
setExecutionData({
|
|
status: "ABORTED",
|
|
})
|
|
|
|
onSubmit(null, execution_id, authorization, false)
|
|
}}>Stop</Button>
|
|
</div>
|
|
</span>
|
|
:
|
|
<div style={{display: "flex", marginTop: "15px"}}>
|
|
<Button
|
|
variant={executionData.result !== undefined && executionData.result !== null && executionData.result.length > 0 ? "outlined" : "contained"}
|
|
type="submit"
|
|
color="primary"
|
|
fullWidth
|
|
disabled={!handleValidateForm(executionArgument) || executionLoading}
|
|
>
|
|
{executionLoading ?
|
|
<CircularProgress color="secondary" style={{color: "white",}} />
|
|
:
|
|
executionData.result !== undefined && executionData.result !== null && executionData.result.length > 0 ? "Run Again"
|
|
:
|
|
"Submit"
|
|
}
|
|
</Button>
|
|
</div>
|
|
}
|
|
|
|
|
|
{workflow.form_control.output_yields !== undefined && workflow.form_control.output_yields !== null && workflow.form_control.output_yields.length > 0 ?
|
|
<div style={{marginTop: 20, }}>
|
|
{workflow.form_control.output_yields.map((yieldItem, index) => {
|
|
if (executionData.results === undefined || executionData.results === null || executionData.results.length === 0) {
|
|
return null
|
|
}
|
|
|
|
const foundresult = executionData.results.find((result) => {
|
|
return result.action.id === yieldItem
|
|
})
|
|
|
|
if (foundresult === undefined || foundresult === null) {
|
|
return null
|
|
}
|
|
|
|
if (foundresult.status === "SKIPPED") {
|
|
return null
|
|
}
|
|
|
|
const validate = validateJson(foundresult.result)
|
|
validResults += 1
|
|
var appendedDetails = foundresult.result
|
|
if (validate.valid) {
|
|
appendedDetails = <ReactJson
|
|
src={validate.result}
|
|
theme={theme.palette.jsonTheme}
|
|
style={theme.palette.reactJsonStyle}
|
|
collapsed={false}
|
|
shouldCollapse={(jsonField) => {
|
|
return collapseField(jsonField)
|
|
}}
|
|
iconStyle={theme.palette.jsonIconStyle}
|
|
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
|
|
displayArrayKey={false}
|
|
enableClipboard={(copy) => {
|
|
//handleReactJsonClipboard(copy);
|
|
}}
|
|
displayDataTypes={false}
|
|
onSelect={(select) => {
|
|
//HandleJsonCopy(validate.result, select, "exec");
|
|
}}
|
|
name={false}
|
|
/>
|
|
}
|
|
|
|
return (
|
|
<div style={{marginBottom: 10, }}>
|
|
{foundresult?.action?.label?.replaceAll("_", " ")} - {foundresult.status}:
|
|
<br />
|
|
|
|
{appendedDetails}
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
: null}
|
|
|
|
<div style={{marginTop: "10px"}}>
|
|
{executionInfo}
|
|
</div>
|
|
|
|
{answer !== undefined && answer !== null ? null :
|
|
<ShowExecutionResults executionData={executionData} />
|
|
}
|
|
|
|
|
|
</form>
|
|
</div>
|
|
}
|
|
</Paper>
|
|
|
|
{workflowQuestion !== "" ? null :
|
|
<Typography variant="body2" color="textSecondary" align="center" style={{marginTop: 10, }} >
|
|
Forms are in late Beta. Form submission data includes your Organization's unique ID while logged in, or a unique identifier for your browser otherwise. Your input will be automatically sanitized.
|
|
</Typography>
|
|
}
|
|
</div>
|
|
|
|
|
|
// const isCorrectOrg = userdata.active_org.id === undefined || userdata.active_org.id === null || workflow.org_id === null || workflow.org_id === undefined || workflow.org_id.length === 0 || userdata.active_org.id === workflow.org_id
|
|
const loadedCheck = isLoaded ?
|
|
<div style={{marginTop: 30, }}>
|
|
{editWorkflowModalOpen === true ?
|
|
<EditWorkflow
|
|
saveWorkflow={saveWorkflow}
|
|
workflow={workflow}
|
|
setWorkflow={setWorkflow}
|
|
modalOpen={editWorkflowModalOpen}
|
|
setModalOpen={setEditWorkflowModalOpen}
|
|
isEditing={true}
|
|
userdata={userdata}
|
|
usecases={undefined}
|
|
|
|
expanded={true}
|
|
setRealtimeMarkdown={setRealtimeMarkdown}
|
|
boxWidth={boxWidth}
|
|
setBoxWidth={setBoxWidth}
|
|
scrollTo={"form_fill"}
|
|
/>
|
|
: null}
|
|
|
|
<Dialog
|
|
open={sharingOpen}
|
|
onClose={() => {
|
|
setSharingOpen(false);
|
|
}}
|
|
PaperProps={{
|
|
style: {
|
|
color: "white",
|
|
minWidth: isMobile ? "90%" : 500,
|
|
maxWidth: isMobile ? "90%" : 500,
|
|
minHeight: 400,
|
|
maxHeight: 400,
|
|
padding: 25,
|
|
borderRadius: theme.palette?.borderRadius,
|
|
//minWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
|
|
//maxWidth: isMobile ? "90%" : newWorkflow === true ? 1000 : 550,
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle style={{padding: 30, paddingLeft: 20, paddingBottom: 0, zIndex: 1000,}}>
|
|
Form Sharing Options for '{workflow.name}'
|
|
</DialogTitle>
|
|
<DialogContent style={{marginTop: 20,}}>
|
|
<Typography variant="body1">
|
|
<b>General Access</b>
|
|
</Typography>
|
|
|
|
<Typography variant="body2" color="textSecondary">
|
|
Form sharing and workflow sharing are not the same. By sharing a form, you are enabling anyone with the link to fill out the form AND run the workflow. They will NOT have access to seeing workflow details. By default, anyone with access to an organization can use a form.
|
|
</Typography>
|
|
|
|
<div />
|
|
{workflow !== undefined && workflow !== null && workflow.sharing !== undefined && workflow.sharing !== null ?
|
|
<Select
|
|
fullWidth
|
|
style={{marginTop: 25, }}
|
|
value={workflow.sharing === "" ? "private" : workflow.sharing}
|
|
onChange={(e) => {
|
|
console.log("SHARING: ", e.target.value)
|
|
|
|
workflow.sharing = e.target.value
|
|
setWorkflow(workflow)
|
|
saveWorkflow(workflow)
|
|
setUpdate(Math.random())
|
|
|
|
toast("Form sharing updated.")
|
|
}}
|
|
>
|
|
<MenuItem
|
|
value={"private"}
|
|
>
|
|
Organization only
|
|
</MenuItem>
|
|
<Divider />
|
|
<MenuItem
|
|
value={"form"}
|
|
>
|
|
Anyone with the link
|
|
</MenuItem>
|
|
</Select>
|
|
: null}
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{isLoggedIn && userdata?.active_org?.id === workflow?.org_id || userdata?.support === true ?
|
|
<div style={{position: "fixed", top: 10, right: 20, }}>
|
|
|
|
<Button
|
|
variant={"outlined"}
|
|
color={"secondary"}
|
|
style={{marginRight: 10, }}
|
|
onClick={() => {
|
|
window.open(`/workflows/${workflow.id}`, "_blank")
|
|
}}
|
|
>
|
|
<OpenInNewIcon style={{marginRight: 5, }}/>
|
|
Workflow
|
|
</Button>
|
|
|
|
<Button
|
|
variant={workflow.sharing === "form" ? "outlined" : "contained"}
|
|
color={"secondary"}
|
|
style={{marginRight: 10, }}
|
|
onClick={() => {
|
|
setSharingOpen(true)
|
|
}}
|
|
>
|
|
{workflow.sharing === "form" ?
|
|
<LockOpenIcon style={{marginRight: 5, }} />
|
|
:
|
|
<LockIcon style={{marginRight: 5, }} />
|
|
}
|
|
|
|
{workflow.sharing === "form" ?
|
|
"Unshare"
|
|
:
|
|
"Share"
|
|
}
|
|
</Button>
|
|
|
|
<Button
|
|
variant={"contained"}
|
|
color={"primary"}
|
|
style={{}}
|
|
onClick={() => {
|
|
setEditWorkflowModalOpen(true)
|
|
}}
|
|
>
|
|
<EditIcon style={{marginRight: 5, }} /> Edit Form
|
|
</Button>
|
|
</div>
|
|
: null}
|
|
|
|
{basedata}
|
|
</div>
|
|
:
|
|
<div style={{width: 100, itemAlign: "center", textAlign: "center", margin: "auto", }}>
|
|
<CircularProgress />
|
|
</div>
|
|
|
|
// Check width
|
|
const overlap = window !== undefined && window.innerWidth !== undefined && window.innerWidth < 1300
|
|
|
|
const formSidebar = explorerUi === true || !isLoaded || overlap || !(forms !== undefined && forms !== null && forms.length > 1) ? null :
|
|
<div style={{
|
|
minWidth: 215,
|
|
maxWidth: 215,
|
|
overflowX: "hidden",
|
|
overflowY: "auto",
|
|
minHeight: 500,
|
|
maxHeight: 500,
|
|
position: "absolute",
|
|
left: 150,
|
|
top: 0,
|
|
border: "1px solid rgba(255,255,255,0.3)",
|
|
borderRadius: theme.palette?.borderRadius,
|
|
|
|
padding: 25,
|
|
|
|
backgroundColor: theme.palette.inputColor,
|
|
zIndex: 1000,
|
|
}}>
|
|
{selectedOrganization !== undefined && selectedOrganization !== null ?
|
|
<div style={{display: "flex", marginBottom: 20, }}>
|
|
<img src={selectedOrganization.image} style={{width: 40, height: 40, borderRadius: theme.palette?.borderRadius, }} />
|
|
<Typography variant="body1" style={{marginTop: 7, marginLeft: 10, }}>
|
|
{selectedOrganization.name}
|
|
</Typography>
|
|
<Divider style={{marginTop: 10, marginBottom: 10, }}/>
|
|
</div>
|
|
: null}
|
|
|
|
{forms !== undefined && forms !== null && forms.length > 0 ?
|
|
<FormList />
|
|
:
|
|
<div>
|
|
No forms loaded
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
|
|
return (
|
|
<div style={{position: "relative", }}>
|
|
{loadedCheck}
|
|
{formSidebar}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default RunWorkflow
|