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

Fixed a bunch of form deploy systems

Browse Source
This commit is contained in:
Frikky
2024-10-18 10:24:40 +02:00
parent 691af569fa
commit 01a23bff41
16 changed files with 730 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AuthenticationNormal.jsx
+2 -1
View File
@@ -344,12 +344,13 @@ const AuthenticationData = (props) => {
onClick={() => {
setAuthenticationModalOpen(false);
}}
color="primary"
color="secondary"
>
Cancel
</Button>
<Button
style={{ borderRadius: "0px" }}
variant="outlined"
onClick={() => {
setAuthenticationOptions(authenticationOption);
handleSubmitCheck();
frontend/src/components/AuthenticationWindow.jsx
+12 -7
View File
@@ -104,14 +104,19 @@ const AuthenticationData = (props) => {
toast("Failed to set app auth: " + responseJson.reason);
}
} else {
setSubmitSuccessful(true)
if (getAppAuthentication !== undefined) {
getAppAuthentication(true, false);
}
setSubmitSuccessful(true)
if (getAppAuthentication !== undefined) {
if (setAuthenticationModalOpen !== undefined) {
setAuthenticationModalOpen(false)
}
if (workflow !== undefined && workflow !== null && workflow.org_id !== undefined && workflow.org_id !== null && workflow.org_id.length > 0) {
getAppAuthentication(true, false, undefined, workflow.org_id)
} else {
getAppAuthentication(true, false)
}
}
if (setAuthenticationModalOpen !== undefined) {
setAuthenticationModalOpen(false)
}
}
})
.catch((error) => {
frontend/src/components/Billing.jsx
+4 -8
View File
@@ -1097,7 +1097,7 @@ const Billing = (props) => {
</Button>
) : (
<Button
variant="contained"
variant="outlined"
color="primary"
onClick={toggleEditMode}
style={{ textTransform: 'none' }}
@@ -1191,7 +1191,6 @@ const Billing = (props) => {
height: 40,
fontSize: 16,
color: "white",
backgroundColor: "#f86743",
textTransform: 'none',
cursor: getProfessionalServices ? 'pointer' : 'not-allowed',
opacity: getProfessionalServices ? 1 : 0.6,
@@ -1202,7 +1201,7 @@ const Billing = (props) => {
}
}}
>
Get Professional Service
Use Professional Service Hours
</Button>
</span>
</Tooltip>
@@ -1368,7 +1367,7 @@ const Billing = (props) => {
<Button
fullWidth
disabled={false}
variant="outlined"
variant="contained"
color="primary"
style={{
marginTop: 10,
@@ -1376,7 +1375,6 @@ const Billing = (props) => {
height: 40,
fontSize: 16,
color: "white",
backgroundColor: "#f86743",
textTransform: 'none'
}}
onClick={() => {
@@ -1403,8 +1401,6 @@ const Billing = (props) => {
borderRadius: 25,
height: 40,
fontSize: 16,
color: "white",
backgroundColor: "#f86743",
textTransform: 'none'
}}
onClick={() => {
@@ -2446,4 +2442,4 @@ const Billing = (props) => {
)
}
export default Billing;
export default Billing;
frontend/src/components/EditWorkflow.jsx
+13 -14
View File
@@ -626,13 +626,13 @@ const EditWorkflow = (props) => {
<Typography variant="body1" style={{marginTop: 50, }}>
MSSP Suborg Distribution (beta - contact support@shuffler.io for more info)
MSSP Suborg Distribution (<b>beta</b> - contact support@shuffler.io for more info)
</Typography>
{userdata !== undefined && userdata !== null && userdata.orgs !== undefined && userdata.orgs !== null && userdata.orgs.length > 0 ?
userdata.orgs.filter(org => org.creator_org === userdata.active_org.id).length === 0 ?
userdata.active_org.creator_org === undefined || userdata.active_org.creator_org === null || userdata.active_org.creator_org === "" ?
<Typography variant="body2" style={{marginTop: 10, color: "rgba(255,255,255,0.7)"}}>
Your organization does not have any suborgs yet, OR you may not have access to any suborgs directly.. Please <a href="/admin?tab=suborgs" style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">make one</a> or get access to suborgs by admin, then try again.
Your organization does not have any suborgs yet OR your user may not have access to available suborgs. Please <a href="/admin?tab=suborgs" style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">make one</a> or get access to suborgs by another admin, then try again.
</Typography>
:
<Typography variant="body2" style={{marginTop: 10, color: "rgba(255,255,255,0.7)"}}>
@@ -738,9 +738,7 @@ const EditWorkflow = (props) => {
Git Backup Repository
</Typography>
<Typography variant="body2" style={{ textAlign: "left", marginTop: 5, }} color="textSecondary">
Decide where this workflow is backed up in a Git repository. Will create logs and notifications if upload fails. <b>The repository and branch must already have been initialized</b>. Files will show up in the root folder in the format 'orgid/workflow status/workflow id.json' without images. Overrides the <a href="/admin?admin_tab=organization" style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">default backup repository</a> your org has chosen. All fields must be filled in for the backup to work.
<br />
PS: This is a beta feature, and might not work as expected. Credentials are NOT encrypted.
Decide where this workflow is backed up in a Git repository. Will create logs and notifications if upload fails. <b>The repository and branch must already have been initialized</b>. Files will show up in the root folder in the format 'orgid/workflow status/workflow id.json' without images. Overrides your <a href="/admin?admin_tab=organization" style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">default backup repository</a>. <a href="/docs/configuration#environment-variables" style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">Credentials are encrypted.</a> Creates <a href="/admin?admin_tab=priorities" style={{textDecoration: "none", color: "#f86a3e"}} target="_blank">notifications</a> if it fails.
</Typography>
<Grid container style={{ marginTop: 10, }} spacing={2}>
<Grid item xs={6} style={{}}>
@@ -782,7 +780,6 @@ const EditWorkflow = (props) => {
<span>
<Typography>Branch</Typography>
<TextField
required
style={{
flex: "1",
marginTop: "5px",
@@ -795,7 +792,7 @@ const EditWorkflow = (props) => {
variant="outlined"
multiline={true}
rows={1}
placeholder="The branch to use"
placeholder="The branch to use (default: master)"
defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_branch === undefined || innerWorkflow.backup_config.upload_branch === null || innerWorkflow.backup_config.upload_branch === "" ? "" : innerWorkflow.backup_config.upload_branch}
onChange={(e) => {
innerWorkflow.backup_config.upload_branch = e.target.value
@@ -818,7 +815,6 @@ const EditWorkflow = (props) => {
<span>
<Typography>Username</Typography>
<TextField
required
style={{
flex: "1",
marginTop: "5px",
@@ -831,7 +827,7 @@ const EditWorkflow = (props) => {
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
placeholder="The username to use"
placeholder="Username to use"
defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_username === undefined || innerWorkflow.backup_config.upload_username === null || innerWorkflow.backup_config.upload_username === "" ? "" : innerWorkflow.backup_config.upload_username}
onChange={(e) => {
innerWorkflow.backup_config.upload_username = e.target.value
@@ -864,7 +860,7 @@ const EditWorkflow = (props) => {
variant="outlined"
multiline={true}
rows={1}
placeholder="The API token to use"
placeholder="Your API token. Required."
defaultValue={innerWorkflow.backup_config === undefined || innerWorkflow.backup_config.upload_token === undefined || innerWorkflow.backup_config.upload_token === null || innerWorkflow.backup_config.upload_token === "" ? "" : innerWorkflow.backup_config.upload_token}
onChange={(e) => {
innerWorkflow.backup_config.upload_token = e.target.value
@@ -1032,7 +1028,7 @@ const EditWorkflow = (props) => {
Input Markdown
</Typography>
<Typography variant="body2" color="textSecondary" style={{marginBottom: 20, }}>
Markdown will be shown on the <a href={`/forms/${workflow.id}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Form page</a>. Output for a Workflow is also shown in Markdown, and is controlled by the LAST action that runs.
Markdown will be shown on the <a href={`/forms/${workflow.id}`} rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Form page</a>. The first image added will be used in your Form Toolbox list. Output for a Workflow is shown in Markdown, and is controlled by the LAST action that runs. Supports HTML.
</Typography>
<TextField
multiline
@@ -1098,7 +1094,7 @@ const EditWorkflow = (props) => {
<MenuItem value="none">
<em>None</em>
</MenuItem>
{workflow.actions.map((action, actionIndex) => {
{workflow?.actions?.map((action, actionIndex) => {
return (
<MenuItem
key={actionIndex}
@@ -1121,14 +1117,17 @@ const EditWorkflow = (props) => {
<Tooltip color="primary" title={"Add more details"} placement="top">
<Button
style={{ margin: "auto", marginTop: 50, textAlign: "center", }}
style={{ margin: "auto", marginTop: 50, textAlign: "center", textTransform: "none", }}
variant="outlined"
disabled={newWorkflow === true}
color="secondary"
onClick={() => {
setShowMoreClicked(!showMoreClicked);
}}
>
{showMoreClicked ? <ExpandLessIcon /> : <ExpandMoreIcon/>}
{showMoreClicked ? <ExpandLessIcon style={{marginRight: 10, }}/> : <ExpandMoreIcon style={{marginRight: 10, }}/>}
{showMoreClicked ? "Less Options": "More Options"}
</Button>
</Tooltip>
</div>
frontend/src/components/NewHeader.jsx
+17 -41
View File
@@ -142,7 +142,7 @@ const Header = (props) => {
const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
const [subAnchorEl, setSubAnchorEl] = React.useState(null);
const [upgradeHovered, setUpgradeHovered] = React.useState(false);
const [showTopbar, setShowTopbar] = useState(false)
const [showTopbar, setShowTopbar] = useState(false) // Set to true to show top bar
const stripeKey = typeof window === 'undefined' || window.location === undefined ? "" : window.location.origin === "https://shuffler.io" ? "pk_live_51PXYYMEJjT17t98N20qEqItyt1fLQjrnn41lPeG2PjnSlZHTDNKHuisAbW00s4KAn86nGuqB9uSVU4ds8MutbnMU00DPXpZ8ZD" : "pk_test_51PXYYMEJjT17t98NbDkojZ3DRvsFUQBs35LGMx3i436BXwEBVFKB9nCvHt0Q3M4MG3dz4mHheuWvfoYvpaL3GmsG00k1Rb2ksO"
let navigate = useNavigate();
const classes = useStyles();
@@ -171,15 +171,13 @@ const Header = (props) => {
setTooltipOpen(true);
};
const topbar_var = "topbar_closed4"
const topbar_var = "topbar_closed5"
useEffect(() => {
// Manually setShowTopbar(true) to show topbar by default
const topbar = localStorage.getItem(topbar_var)
if (topbar === "true") {
setShowTopbar(false)
} else {
setShowTopbar(true)
}
}
}, [])
const hoverColor = "#f85a3e";
@@ -433,29 +431,18 @@ const Header = (props) => {
</Link>
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
<Link to="/admin?admin_tab=priorities" style={hrefStyle}>
<MenuItem
onClick={(event) => {
handleClose();
}}
>
<NotificationsIcon style={{ marginRight: 5 }} /> Notifications ({
notifications === undefined || notifications === null ? 0 :
notifications?.filter((notification) => notification.read === false).length
})
</MenuItem>
</Link>
{/*
<Link to="/getting-started" style={hrefStyle}>
<MenuItem
onClick={(event) => {
handleClose();
}}
>
<AnalyticsIcon style={{marginRight: 5 }}/> Get Started
</MenuItem>
</Link>
*/}
<Link to="/admin?admin_tab=priorities" style={hrefStyle}>
<MenuItem
onClick={(event) => {
handleClose();
}}
>
<NotificationsIcon style={{ marginRight: 5 }} /> Notifications ({
notifications === undefined || notifications === null ? 0 :
notifications?.filter((notification) => notification.read === false).length
})
</MenuItem>
</Link>
<Link to="/usecases2" style={hrefStyle}>
<MenuItem
onClick={(event) => {
@@ -466,19 +453,8 @@ const Header = (props) => {
</MenuItem>
</Link>
{/*userdata?.public_username === undefined || userdata?.public_username === null || userdata?.public_username.length <= 0 ? null :
<Link to={`/creators/${userdata.public_username}`} style={hrefStyle}>
<MenuItem
onClick={(event) => {
handleClose();
}}
>
<EmojiObjectsIcon style={{ marginRight: 5 }} /> Creator page
</MenuItem>
</Link>
*/}
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
<Link to="/docs" style={hrefStyle}>
<MenuItem
onClick={(event) => {
frontend/src/components/Oauth2Auth.jsx
+13 -8
View File
@@ -460,16 +460,16 @@ const AuthenticationOauth2 = (props) => {
}
if (
authenticationType.refresh_uri !== undefined &&
authenticationType.refresh_uri !== null &&
authenticationType.refresh_uri.length > 0
) {
state += `%26refresh_uri%3d${authenticationType.refresh_uri}`;
if (authenticationType.refresh_uri !== undefined && authenticationType.refresh_uri !== null && authenticationType.refresh_uri.length > 0) {
state += `%26refresh_uri%3d${authenticationType.refresh_uri}`
} else {
state += `%26refresh_uri%3d${authentication_url}`;
state += `%26refresh_uri%3d${authentication_url}`
}
if (workflow.org_id !== undefined && workflow.org_id !== null && workflow.org_id.length > 0) {
state += `%26org_id%3d${workflow.org_id}`
}
// FIXME: Should this be =consent?
var defaultPrompt = "login"
if (prompt !== undefined && prompt !== null && prompt.length > 0) {
@@ -524,7 +524,12 @@ const AuthenticationOauth2 = (props) => {
//alert('"Secure Payment" window closed!');
if (getAppAuthentication !== undefined) {
getAppAuthentication(true, true, true, selectedAction.id)
// This should be orgId, not action Id as to load auth properly
if (workflow !== undefined && workflow !== null && workflow.org_id !== undefined && workflow.org_id !== null && workflow.org_id.length > 0) {
getAppAuthentication(true, true, true, workflow.org_id)
} else {
getAppAuthentication(true, true, true)
}
}
toast("Authentication successful!")
frontend/src/components/OrgHeaderexpanded.jsx
+2 -40
View File
@@ -382,46 +382,8 @@ const OrgHeaderexpanded = (props) => {
})
.catch((err) => {
console.log("error for sso test is: ", err);
});
};
const HandleTestSSO = () => {
const url = `${globalUrl}/api/v1/orgs/${selectedOrganization?.id}/change`;
const data = {
org_id: selectedOrganization?.id,
sso_test: true,
}
fetch(url, {
mode: "cors",
credentials: "include",
crossDomain: true,
method: "POST",
body: JSON.stringify(data),
withCredentials: true,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
}).then((response) => {
if (response.status !== 200) {
toast.error("Failed to test sso. Please try again later or contact support@shuffler.io if issue persist.")
return
}
return response.json();
}).then((responjson) => {
if (responjson["reason"] === "SSO_REDIRECT") {
setTimeout(() => {
toast.info("Redirecting to SSO login page as SSO is required for this organization.")
window.location.href = responjson["url"];
return
}, 2000)
} else {
toast.error("No SSO found for this org. Please set up sso for this org.")
}
}).catch((err) => {
console.log("error for sso test is: ", err)
})
}
})
}
return (
<div style={{ textAlign: "center" }}>
frontend/src/components/ParsedAction.jsx
+4 -34
View File
@@ -207,7 +207,6 @@ const ParsedAction = (props) => {
}
}, [expansionModalOpen])
useEffect(() => {
if (selectedActionEnvironment === undefined || selectedActionEnvironment === null || Object.keys(selectedActionEnvironment).length === 0) {
@@ -224,20 +223,6 @@ const ParsedAction = (props) => {
}
}, [])
/*
useEffect(() => {
setParamValues(selectedAction.parameters.map((param) => {
return {
name: param.name,
value: param.value,
}
}))
},[
selectedAction, selectedApp,setNewSelectedAction, workflow,
])
*/
useEffect(() => {
if (selectedAction.parameters === null || selectedAction.parameters === undefined) {
return
@@ -1855,6 +1840,7 @@ const ParsedAction = (props) => {
</div>
</span>
)}
{selectedApp.name !== undefined &&
selectedAction.authentication !== null &&
selectedAction.authentication !== undefined &&
@@ -1937,8 +1923,8 @@ const ParsedAction = (props) => {
selectedAction.parameters[key].value = ""
}
}
setSelectedAction(selectedAction);
setUpdate(Math.random());
setSelectedAction(selectedAction)
setUpdate(Math.random())
} else if (e.target.value === "authgroups") {
if (authGroups !== undefined && authGroups !== null && authGroups.length === 0) {
@@ -2051,14 +2037,6 @@ const ParsedAction = (props) => {
</Select>
{/*
<Button fullWidth style={{margin: "auto", marginTop: "10px",}} color="primary" variant="contained" onClick={() => setAuthenticationModalOpen(true)}>
AUTHENTICATE
</Button>
curaction.authentication = authenticationOptions
if (curaction.selectedAuthentication === null || curaction.selectedAuthentication === undefined || curaction.selectedAuthentication.length === "")
*/}
<Tooltip
color="primary"
title={"Add authentication option"}
@@ -4163,20 +4141,12 @@ const ParsedAction = (props) => {
/*<div style={{width: 17, height: 17, borderRadius: 17 / 2, backgroundColor: itemColor, marginRight: 10, marginTop: 2, marginTop: "auto", marginBottom: "auto",}}/>*/
}
const buttonTitle = `Authenticate ${selectedApp.name.replaceAll("_", " ")}`
const buttonTitle = `Authenticate API ${selectedApp.name.replaceAll("_", " ")}`
const hasAutocomplete = data?.autocompleted === true
if (data.variant === undefined || data.variant === null) {
data.variant = "STATIC_VALUE"
}
/*
if (data?.configuration === true) {
if (data?.name === "url" && authenticationType?.type === "oauth2-app") {
data.configuration = false
}
}
*/
return (
<div key={data.name}>
{/* {hideBodyButton} */}
frontend/src/components/SearchData.jsx
+7 -7
View File
@@ -47,7 +47,7 @@ const chipStyle = {
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
const SearchData = props => {
const { serverside, globalUrl, userdata, setModalOpen, modalOpen } = props
const { serverside, globalUrl, userdata, searchBarModalOpen, setSearchBarModalOpen } = props
let navigate = useNavigate();
const borderRadius = 3
const node = useRef()
@@ -56,8 +56,8 @@ const SearchData = props => {
const [value, setValue] = useState("");
const handleLinkClick = () => {
if (modalOpen) {
setModalOpen(false); // Assuming setModalOpen is defined correctly
if (searchBarModalOpen) {
setSearchBarModalOpen(false); // Assuming setModalOpen is defined correctly
} else {
console.log("Condition not met, staying on the same page");
}
@@ -95,7 +95,7 @@ const SearchData = props => {
const trimmedValue = inputValue.trim();
if (trimmedValue !== '') {
navigate(`/search?q=${trimmedValue}`, { state: trimmedValue, replace: true });
setModalOpen(false);
setSearchBarModalOpen(false);
}
}
};
@@ -249,7 +249,7 @@ const SearchData = props => {
<Link key={hit.objectID} to={parsedUrl} rel="noopener noreferrer" style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
//console.log("CLICK")
setSearchOpen(true)
setModalOpen(false)
setSearchBarModalOpen(false)
aa('init', {
appId: searchClient.appId,
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
@@ -498,7 +498,7 @@ const SearchData = props => {
return (
<Link key={hit.objectID} to={parsedUrl} style={{ textDecoration: "none", color: "white", }} onClick={(event) => {
setSearchOpen(true)
setModalOpen(false)
setSearchBarModalOpen(false)
aa('init', {
appId: searchClient.appId,
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
@@ -702,7 +702,7 @@ const SearchData = props => {
console.log("CLICK")
setSearchOpen(true)
setModalOpen(false)
setSearchBarModalOpen(false)
}}>
<ListItem key={hit.objectID} style={innerlistitemStyle} onMouseOver={() => {
setMouseHoverIndex(index)
frontend/src/components/Searchfield.jsx
+13 -9
View File
@@ -1,9 +1,11 @@
import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useEffect, useRef, useContext } from 'react';
import theme from '../theme.jsx';
import { useNavigate, Link, useParams } from "react-router-dom";
import SearchBox from "../components/SearchData.jsx";
import { Context } from '../Context/contextApi.js';
import {
Chip,
IconButton,
@@ -45,20 +47,22 @@ const chipStyle = {
const SearchField = props => {
const { serverside, userdata, isMobile, isLoaded, globalUrl, isHeader, isLoggedIn, small, rounded } = props
const {searchBarModalOpen, setSearchBarModalOpen} = useContext(Context);
let navigate = useNavigate();
const borderRadius = 3
const node = useRef()
const [searchOpen, setSearchOpen] = useState(false)
const [modalOpen, setModalOpen] = React.useState(false);
// const [modalOpen, setModalOpen] = React.useState(false);
const [oldPath, setOldPath] = useState("")
const [value, setValue] = useState("");
useEffect(() => {
Mousetrap.bind(['command+k', 'ctrl+k'], () => {
setModalOpen(true);
setSearchBarModalOpen(true);
return false; // Prevent the default action
});
Mousetrap.bind(['esc'], () => {
setModalOpen(false);
setSearchBarModalOpen(false);
return false; // Prevent the default action
});
@@ -72,9 +76,9 @@ const SearchField = props => {
// console.log("key:", dataValue.key),
//console.log("value:",dataValue.value),
<Dialog
open={modalOpen}
open={searchBarModalOpen}
onClose={() => {
setModalOpen(false);
setSearchBarModalOpen(false);
}}
PaperProps={{
style: {
@@ -92,12 +96,12 @@ const SearchField = props => {
{isHeader ? <div style={{ display: "flex"}}>
<DialogTitle style={{ marginTop: 15, marginLeft: 5, color: "var(--Paragraph-text, #C8C8C8)" }} >Search for Docs, Apps, Workflows and more</DialogTitle>
<Button color="secondary" fullWidth style={{ marginLeft:180, }} onClick={() => {
setModalOpen(false);
setSearchBarModalOpen(false);
}}><CloseIcon /></Button>
</div>
: null}
<DialogContent className='dialog-content' style={{}}>
<SearchBox globalUrl={globalUrl} setModalOpen={setModalOpen} modalOpen={modalOpen} serverside={serverside} userdata={userdata} />
<SearchBox globalUrl={globalUrl} setSearchBarModalOpen={setSearchBarModalOpen} modalOpen={searchBarModalOpen} serverside={serverside} userdata={userdata} />
</DialogContent>
<Divider style={{overflow: "hidden"}}/>
<span style={{display:"flex", width:"100%", height:30}}>
@@ -155,7 +159,7 @@ const SearchField = props => {
color="primary"
placeholder="Search Apps, Workflows, Docs..."
onClick={(event) => {
setModalOpen(true)
setSearchBarModalOpen(true)
}}
limit={5}
/>
frontend/src/components/WorkflowValidationTimeline.jsx
-2
View File
@@ -261,8 +261,6 @@ const WorkflowValidationTimeline = (props) => {
relevantactions.push(...newactions)
}
console.log("Relevant actions (return null if 0-1): ", relevantactions)
if (relevantactions.length <= 1) {
return null
}
frontend/src/views/AngularWorkflow.jsx
+112 -62
View File
@@ -141,7 +141,7 @@ import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
import ShuffleCodeEditor from "../components/ShuffleCodeEditor1.jsx";
import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx"
import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
import { validateJson, collapseField, GetIconInfo } from "../views/Workflows.jsx";
import { GetParsedPaths, internalIds, } from "../views/Apps.jsx";
import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
@@ -1242,12 +1242,18 @@ const releaseToConnectLabel = "Release to Connect"
};
const setNewAppAuth = (appAuthData, refresh) => {
var headers = {
"Content-Type": "application/json",
"Accept": "application/json",
}
if (workflow.org_id !== undefined && workflow.org_id !== null && workflow.org_id.length > 0) {
headers["Org-Id"] = workflow.org_id
}
fetch(globalUrl + "/api/v1/apps/authentication", {
method: "PUT",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
headers: headers,
body: JSON.stringify(appAuthData),
credentials: "include",
})
@@ -2522,13 +2528,11 @@ const releaseToConnectLabel = "Release to Connect"
}
}
selectedAction.authentication = authenticationOptions;
if (
selectedAction.selectedAuthentication === null ||
selectedAction.selectedAuthentication === undefined ||
selectedAction.selectedAuthentication.length === ""
) {
selectedAction.selectedAuthentication = {};
console.log("auth options: ", authenticationOptions)
selectedAction.authentication = authenticationOptions
if (selectedAction.selectedAuthentication === null || selectedAction.selectedAuthentication === undefined || selectedAction.selectedAuthentication.length === "") {
selectedAction.selectedAuthentication = {}
}
if (appUpdates === true) {
@@ -2555,7 +2559,7 @@ const releaseToConnectLabel = "Release to Connect"
}
} else {
setAppAuthentication([]);
setAppAuthentication([])
shouldClose = true
}
@@ -5274,7 +5278,10 @@ const releaseToConnectLabel = "Release to Connect"
authenticationOptions[latestindex].last_modified = true
}
curaction.authentication = authenticationOptions;
console.log("auth options 2: ", authenticationOptions)
curaction.authentication = authenticationOptions
if (
curaction.selectedAuthentication === null ||
curaction.selectedAuthentication === undefined ||
@@ -5283,7 +5290,9 @@ const releaseToConnectLabel = "Release to Connect"
curaction.selectedAuthentication = {};
}
} else {
curaction.authentication = [];
console.log("auth option 3")
curaction.authentication = []
curaction.authentication_id = "";
curaction.selectedAuthentication = {};
}
@@ -7022,9 +7031,9 @@ const releaseToConnectLabel = "Release to Connect"
const px = parentNode.position("x") + 0;
const py = parentNode.position("y") + 100;
const parentlabel = parentNode.data("label").toLowerCase().replace(" ", "_")
const parentname = parentNode.data("app_name").toLowerCase().replace(" ", "_")
if (!parentlabel.startsWith(parentname)+"_") {
const parentlabel = parentNode.data("label")?.toLowerCase().replace(" ", "_")
const parentname = parentNode.data("app_name")?.toLowerCase().replace(" ", "_")
if (!parentlabel?.startsWith(parentname)+"_") {
return
}
@@ -7855,6 +7864,7 @@ const releaseToConnectLabel = "Release to Connect"
return node
})
// What are these again? Where are they used?
const decoratorNodes = inputworkflow.actions.map((action) => {
if (!action.isStartNode) {
if (action.app_name === "Testing") {
@@ -7866,11 +7876,20 @@ const releaseToConnectLabel = "Release to Connect"
}
}
if (action.id === undefined || action.id === null) {
return null
}
if (action.position === undefined || action.position === null || action.position.x === undefined || action.position.x === null || action.position.y === undefined || action.position.y === null) {
return null
}
const iconInfo = GetIconInfo(action);
const svg_pin = `<svg width="${svgSize}" height="${svgSize}" viewBox="0 0 ${svgSize} ${svgSize}" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="${iconInfo.icon}" fill="${iconInfo.iconColor}"></path></svg>`;
const svgpin_Url = encodeURI("data:image/svg+xml;utf-8," + svg_pin);
const offset = action.isStartNode ? 36 : 44;
const decoratorNode = {
position: {
x: action.position.x + offset,
@@ -7886,9 +7905,9 @@ const releaseToConnectLabel = "Release to Connect"
imageColor: iconInfo.iconBackgroundColor,
attachedTo: action.id,
},
};
return decoratorNode;
});
}
return decoratorNode
})
const foundtriggers = inputworkflow.triggers.map((trigger) => {
@@ -9371,6 +9390,7 @@ const releaseToConnectLabel = "Release to Connect"
}
}
} else {
newAppData.authentication = [];
newAppData.authentication_id = "";
newAppData.selectedAuthentication = {};
@@ -9505,11 +9525,9 @@ const releaseToConnectLabel = "Release to Connect"
}
var parsedEnvironments =
environments === null || environments === []
? "cloud"
: environments[defaultEnvironmentIndex] === undefined
? "cloud"
: environments[defaultEnvironmentIndex].Name
environments === undefined || environments === null || environments === []
? isCloud ? "cloud" : "Shuffle" : environments[defaultEnvironmentIndex] === undefined
? isCloud ? "cloud" : "Shuffle" : environments[defaultEnvironmentIndex].Name
// Basic automatic auth mapping
var authId = ""
@@ -10512,6 +10530,10 @@ const releaseToConnectLabel = "Release to Connect"
// description
// ACTION select
const selectedNameChange = (appActionName) => {
if (appActionName === undefined || appActionName === null) {
return
}
appActionName = appActionName.replaceAll("(", "");
appActionName = appActionName.replaceAll(")", "");
appActionName = appActionName.replaceAll("]", "");
@@ -18142,7 +18164,10 @@ const releaseToConnectLabel = "Release to Connect"
src={validate.result}
theme={theme.palette.jsonTheme}
style={theme.palette.reactJsonStyle}
collapsed={true}
collapsed={false}
shouldCollapse={(jsonField) => {
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
@@ -18483,12 +18508,12 @@ const releaseToConnectLabel = "Release to Connect"
theme={theme.palette.jsonTheme}
style={theme.palette.reactJsonStyle}
collapsed={parsedCollapse}
shouldCollapse={(jsonField) => {
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
shouldCollapse={(field) => {
console.log("FIELD: ", field)
}}
enableClipboard={(copy) => {
handleReactJsonClipboard(copy);
}}
@@ -19799,7 +19824,10 @@ const releaseToConnectLabel = "Release to Connect"
src={validate.result}
theme={theme.palette.jsonTheme}
style={theme.palette.reactJsonStyle}
collapsed={true}
collapsed={false}
shouldCollapse={(jsonField) => {
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
@@ -19959,6 +19987,9 @@ const releaseToConnectLabel = "Release to Connect"
theme={theme.palette.jsonTheme}
style={theme.palette.reactJsonStyle}
collapsed={data.value.length < 10000 ? false : true}
shouldCollapse={(jsonField) => {
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
@@ -20379,6 +20410,9 @@ const releaseToConnectLabel = "Release to Connect"
theme={theme.palette.jsonTheme}
style={theme.palette.reactJsonStyle}
collapsed={selectedResult.result.length < 10000 ? false : true}
shouldCollapse={(jsonField) => {
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
@@ -21098,13 +21132,13 @@ const releaseToConnectLabel = "Release to Connect"
}
}
console.log("Action: ", selectedAction);
selectedAction.authentication_id = authenticationOption.id;
selectedAction.selectedAuthentication = authenticationOption;
if (
selectedAction.authentication === undefined ||
selectedAction.authentication === null
) {
console.log("auth option 4: ", authenticationOption)
if (selectedAction.authentication === undefined || selectedAction.authentication === null) {
selectedAction.authentication = [authenticationOption]
} else {
@@ -21115,7 +21149,7 @@ const releaseToConnectLabel = "Release to Connect"
}
}
setSelectedAction(selectedAction);
setSelectedAction(selectedAction)
var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
var newFields = [];
@@ -21128,21 +21162,18 @@ const releaseToConnectLabel = "Release to Connect"
});
}
newAuthOption.fields = newFields;
setNewAppAuth(newAuthOption);
newAuthOption.fields = newFields
setNewAppAuth(newAuthOption)
if (configureWorkflowModalOpen) {
setSelectedAction({});
setSelectedAction({})
}
setUpdate(authenticationOption.id);
};
setUpdate(authenticationOption.id)
}
if (
authenticationOption.label === null ||
authenticationOption.label === undefined
) {
authenticationOption.label = selectedApp.name + " authentication";
if (authenticationOption.label === null || authenticationOption.label === undefined) {
authenticationOption.label = selectedApp.name + " authentication";
}
return (
@@ -21164,7 +21195,7 @@ const releaseToConnectLabel = "Release to Connect"
<div />
These are required fields for authenticating with {selectedApp.name}
<div style={{ marginTop: 15 }} />
<b>Name - what is this used for?</b>
<b>Label for you to remember</b>
<TextField
style={{
backgroundColor: theme.palette.inputColor,
@@ -21294,19 +21325,20 @@ const releaseToConnectLabel = "Release to Connect"
</DialogContent>
<DialogActions>
<Button
style={{ borderRadius: "0px" }}
style={{}}
onClick={() => {
setAuthenticationModalOpen(false);
}}
color="primary"
color="secondary"
>
Cancel
</Button>
<Button
style={{ borderRadius: "0px" }}
style={{}}
variant="outlined"
onClick={() => {
setAuthenticationOptions(authenticationOption);
handleSubmitCheck();
handleSubmitCheck()
}}
color="primary"
>
@@ -21410,11 +21442,12 @@ const releaseToConnectLabel = "Release to Connect"
width: 50,
}}
>
{selectedApp.reference_info === undefined ||
{ selectedApp.reference_info === undefined ||
selectedApp.reference_info === null ||
selectedApp.reference_info.github_url === undefined ||
selectedApp.reference_info.github_url === null ||
selectedApp.reference_info.github_url.length === 0 ? (
<a
rel="noopener noreferrer"
target="_blank"
@@ -21557,12 +21590,30 @@ const releaseToConnectLabel = "Release to Connect"
<span
style={{ textAlign: "center" }}
>
<Typography
variant="body1"
style={{ marginLeft: 25, marginRight: 25 }}
>
{selectedApp.description}
</Typography>
<div style={{textAlign: "left", }}>
<Markdown
components={{
img: Img,
code: CodeHandler,
h1: Heading,
h2: Heading,
h3: Heading,
h4: Heading,
h5: Heading,
h6: Heading,
a: OuterLink,
}}
id="markdown_wrapper"
escapeHtml={false}
style={{
maxWidth: "100%",
minWidth: "100%",
textAlign: "left",
}}
>
{selectedApp.description}
</Markdown>
</div>
<Divider
style={{
marginTop: 25,
@@ -21580,7 +21631,7 @@ const releaseToConnectLabel = "Release to Connect"
}}
>
<Typography variant="h6" style={{marginBottom: 25, }}>
There is no Shuffle-specific documentation for this app yet. Documentation is written custom for each app, and is a community effort. Hope to see your contribution
There is no Shuffle-specific documentation for this app yet outside of the general description above. Documentation is written for each api, and is a community effort. We hope to see your contribution!
</Typography>
<Button
variant="contained"
@@ -21724,6 +21775,7 @@ const releaseToConnectLabel = "Release to Connect"
</div>
</div>
: null}
<Markdown
components={{
img: Img,
@@ -22299,8 +22351,6 @@ const releaseToConnectLabel = "Release to Connect"
const changeActionParameterCodeMirror = (event, count, data, actionlist) => {
// Check if event.target.value is an array. If it is, split with comma
console.log("1 - SELECTED ACTION: ", selectedAction)
console.log("1 - DATA: ", data)
if (data.startsWith("${") && data.endsWith("}")) {
// PARAM FIX - Gonna use the ID field, even though it's a hack
frontend/src/views/Docs.jsx
+2
View File
@@ -152,6 +152,8 @@ export const OuterLink = (props) => {
export const Img = (props) => {
// Find parent container and check width
var height = "auto"
var width = 750
if (props.height !== undefined && props.height !== null) {
frontend/src/views/RunWorkflow.jsx
+419 -109
View File
@@ -6,7 +6,7 @@ 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, GetIconInfo } from "./Workflows.jsx";
import { validateJson, collapseField, GetIconInfo } from "./Workflows.jsx";
import EditWorkflow from "../components/EditWorkflow.jsx"
import { toast } from "react-toastify"
import { makeStyles } from '@mui/material/styles';
@@ -15,6 +15,7 @@ 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,
@@ -39,6 +40,9 @@ import {
ContentCopy as ContentCopyIcon,
ArrowBack as ArrowBackIcon,
ArrowForward as ArrowForwardIcon,
Lock as LockIcon,
LockOpen as LockOpenIcon,
OpenInNew as OpenInNewIcon,
} from '@mui/icons-material';
const hrefStyle = {
@@ -75,12 +79,30 @@ const RunWorkflow = (defaultprops) => {
const [editWorkflowModalOpen, setEditWorkflowModalOpen] = React.useState(false)
const [sharingOpen, setSharingOpen] = React.useState(false)
const [realtimeMarkdown, setRealtimeMarkdown] = React.useState("")
const [forms, setForms] = 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"
}
return Img(propsCopy)
}
const boxStyle = {
color: "white",
padding: "25px 50px 50px 50px",
backgroundColor: theme.palette.surfaceColor,
marginBottom: 150,
borderRadius: 25,
minHeight: 500,
}
@@ -123,6 +145,39 @@ const RunWorkflow = (defaultprops) => {
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, {
@@ -198,26 +253,13 @@ const RunWorkflow = (defaultprops) => {
return defaultReturn
}
const validate = validateJson(executionData.result)
return (
<div style={{marginTop: executionMargin, }}>
{/*executionData !== undefined && executionData !== null && executionData !== {} && executionData.status !== undefined && (answer === undefined || answer === null) ?
<div style={{ marginBottom: 5, display: "flex" }}>
<Typography variant="body1">
<b>Status&nbsp;</b>
</Typography>
<Typography variant="body1" color="textSecondary" style={{ marginRight: 15, }}>
{executionData.status}
</Typography>
</div>
: null*/}
<Divider style={{marginTop: 20, marginBottom: 20, }}/>
{/*
<Typography variant="h6" style={{color: theme.palette.primaryColor}}>
Results: {executionData.results.length}/{executionData.workflow.actions.length}
</Typography>
*/}
{executionData.result !== undefined && executionData.result !== null && executionData.result.length > 0 ?
{validate.valid === false ?
<div style={{marginTop: 20, }}>
<Divider />
<Markdown
@@ -235,10 +277,31 @@ const RunWorkflow = (defaultprops) => {
overflowY: "auto",
}}
>
{executionData.result}
{validate.result}
</Markdown>
</div>
: null}
:
<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>
)
@@ -249,8 +312,6 @@ const RunWorkflow = (defaultprops) => {
event.preventDefault()
}
console.log("ONSUBMIT: ", event, execution_id, authorization, answer)
stop()
setMessage("")
setExecutionLoading(true)
@@ -285,7 +346,7 @@ const RunWorkflow = (defaultprops) => {
*/
}
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`
var url = `${globalUrl}/api/v1/workflows/${props.match.params.key}/run`
var fetchBody = {
headers: {
'Content-Type': 'application/json; charset=utf-8',
@@ -319,8 +380,6 @@ const RunWorkflow = (defaultprops) => {
}
// IF there is an execution argument, we should use it
console.log("FULL URL: ", url)
fetch(url, fetchBody)
.then((response) => {
if (response.status !== 200 && response.status !== 201) {
@@ -346,6 +405,10 @@ const RunWorkflow = (defaultprops) => {
})
.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) {
@@ -372,7 +435,7 @@ const RunWorkflow = (defaultprops) => {
})
.catch(error => {
//setExecutionInfo("Error in workflow startup: " + error)
toast.warn("Error in workflow startup: " + error)
toast.warn("Error submitting form. Please try again.")
stop()
setMessage("")
@@ -383,10 +446,104 @@ const RunWorkflow = (defaultprops) => {
})
}
/*
useEffect(() => {
if (executionRequest === undefined || executionRequest === null || executionRequest.execution_id === undefined || executionRequest.execution_id === null || executionRequest.execution_id.length === 0) {
return
}
if (executionRequest.start === true) {
start()
}
}, [executionRequest])
*/
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.input_markdown !== undefined && inputWorkflow.input_markdown !== null && inputWorkflow.input_markdown.length > 0) {
const newmarkdown = inputWorkflow.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.input_markdown.replace(`{{ ${workflow_id} }}`, "", -1)
setRealtimeMarkdown(newmarkdown)
} else if (inputWorkflow.input_markdown !== undefined && inputWorkflow.input_markdown !== null && inputWorkflow.input_markdown.length > 0) {
const newmarkdown = inputWorkflow.input_markdown.replace(`{{ ${workflow_id} }}`, "", -1)
setRealtimeMarkdown(newmarkdown)
}
})
}
const getWorkflow = (workflow_id, selectedNode) => {
const url = `${globalUrl}/api/v1/workflows/${workflow_id}`
setRealtimeMarkdown("")
const url = `${globalUrl}/api/v1/workflows/${workflow_id}`
fetch(url, {
method: "GET",
headers: {
@@ -404,7 +561,7 @@ const RunWorkflow = (defaultprops) => {
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();
return response.json()
})
.then((responseJson) => {
// Not sure why this is necessary.
@@ -488,20 +645,57 @@ const RunWorkflow = (defaultprops) => {
if (responseJson.input_markdown !== undefined && responseJson.input_markdown !== null && responseJson.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.input_markdown.replace("", "")
const uuidRegex = /{{\s*[a-f0-9-]+\s*}}/g
const found = responseJson.input_markdown.match(uuidRegex)
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()
// Run the workflow, then replace it.
// Only run if logged in
console.log("Found UUID: " + uuid)
responseJson.input_markdown = responseJson.input_markdown.replace(found[foundkey], "")
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)
setWorkflow(responseJson);
})
@@ -510,13 +704,6 @@ const RunWorkflow = (defaultprops) => {
});
};
const { start, stop } = useInterval({
duration: 1500,
startImmediate: true,
callback: () => {
fetchUpdates(executionRequest.execution_id, executionRequest.authorization)
},
});
const handleUpdateResults = (responseJson, executionRequest) => {
if (responseJson === undefined || responseJson === null || responseJson.success === false) {
@@ -582,13 +769,16 @@ const RunWorkflow = (defaultprops) => {
})
}
const handleGetOrg = (orgId, execution_id, authorization) => {
if (orgId.length === 0) {
return;
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",
@@ -611,6 +801,11 @@ const RunWorkflow = (defaultprops) => {
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)
}
})
@@ -619,23 +814,25 @@ const RunWorkflow = (defaultprops) => {
});
};
const fetchUpdates = (execution_id, authorization, getorg) => {
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
"authorization": authorization === undefined || authorization === null ? "" : authorization,
}
if (executionRequest.execution_id !== innerRequest.execution_id) {
if (executionRequest.execution_id !== innerRequest.execution_id && replaceMarkdown !== true) {
setExecutionRequest(innerRequest)
}
if (execution_id === "" || authorization === "") {
setExecutionLoading(false)
if (execution_id === "") {
console.log("No execution id or authorization")
setExecutionLoading(false)
setExecutionRunning(false)
stop()
return
@@ -658,11 +855,38 @@ const RunWorkflow = (defaultprops) => {
return response.json();
})
.then((responseJson) => {
if (getorg === true) {
handleGetOrg(responseJson.org_id, execution_id, authorization)
if (responseJson.success == false) {
return
}
handleUpdateResults(responseJson, executionRequest);
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.input_markdown !== undefined && workflow.input_markdown !== null && workflow.input_markdown.length > 0) {
const newmarkdown = workflow.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);
@@ -741,10 +965,8 @@ const RunWorkflow = (defaultprops) => {
const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)"
const buttonStyle = {borderRadius: 25, height: 50, fontSize: 18, backgroundImage: handleValidateForm(executionArgument) || executionLoading ? buttonBackground : "grey", color: "white"}
const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
//{disabledButtons ? null :
//const disabledButtons = message.length > 0 || executionData.status === "FINISHED" || executionData.status === "ABORTED"
const disabledButtons = executionLoading || executionRunning
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"
@@ -786,12 +1008,12 @@ const RunWorkflow = (defaultprops) => {
</div>
:
<div>
{workflow.input_markdown !== undefined && workflow.input_markdown !== null && workflow.input_markdown.length > 0 ?
<div style={{marginBottom: 20, }}>
<Markdown
components={{
img: Img,
iframe: IframeWrapper,
img: ImgWrapper,
code: CodeHandler,
a: OuterLink,
}}
@@ -872,43 +1094,47 @@ const RunWorkflow = (defaultprops) => {
return (
<div style={{marginBottom: 10}} key={index}>
{question.name}
{multiChoiceOptions.length > 1 ?
<Select
fullWidth
required
label={multiChoiceOptions[0]}
value={executionArgument[multiChoiceOptions[0]]}
onChange={(e) => {
const curQuestion = multiChoiceOptions[0]
executionArgument[curQuestion] = e.target.value
setUpdate(Math.random())
}}
>
<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
}
{multiChoiceOptions.map((option, menuIndex) => {
if (menuIndex === 0) {
return null
}
return (
<MenuItem
key={menuIndex}
value={option}
>
{option}
</MenuItem>
)
})}
</Select>
return (
<MenuItem
key={menuIndex}
value={option}
>
{option}
</MenuItem>
)
})}
</Select>
</div>
:
<TextField
color="primary"
style={{backgroundColor: theme.palette.inputColor, marginTop: 5, }}
label={question.value}
style={{
backgroundColor: theme.palette.inputColor,
marginTop: 5,
}}
label={question.value.charAt(0).toUpperCase() + question.value.slice(1)}
required
disabled={disabledButtons}
@@ -1021,7 +1247,12 @@ const RunWorkflow = (defaultprops) => {
disabled={!handleValidateForm(executionArgument) || executionLoading}
>
{executionLoading ?
<CircularProgress color="secondary" style={{color: "white",}} /> : "Submit"}
<CircularProgress color="secondary" style={{color: "white",}} />
:
executionData.result !== undefined && executionData.result !== null && executionData.result.length > 0 ? "Run Again"
:
"Submit"
}
</Button>
</div>
}
@@ -1048,15 +1279,16 @@ const RunWorkflow = (defaultprops) => {
const validate = validateJson(foundresult.result)
validResults += 1
console.log("VAlid: ", validate)
var appendedDetails = foundresult.result
if (validate.valid) {
appendedDetails = <ReactJson
src={validate.result}
theme={theme.palette.jsonTheme}
style={theme.palette.reactJsonStyle}
collapsed={true}
collapsed={false}
shouldCollapse={(jsonField) => {
return collapseField(jsonField)
}}
iconStyle={theme.palette.jsonIconStyle}
collapseStringsAfterLength={theme.palette.jsonCollapseStringsAfterLength}
displayArrayKey={false}
@@ -1096,6 +1328,9 @@ const RunWorkflow = (defaultprops) => {
</div>
}
</Paper>
<Typography variant="body2" color="textSecondary" align="center" style={{marginTop: 10, }} >
Forms are in Beta. Form submissions 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>
@@ -1185,39 +1420,38 @@ const RunWorkflow = (defaultprops) => {
{isLoggedIn && userdata?.active_org?.id === workflow?.org_id ?
<div style={{position: "fixed", top: 10, right: 20, }}>
<Button
variant={"outlined"}
color={"secondary"}
style={{marginRight: 10, }}
onClick={() => {
navigate(`/workflows`)
}}
>
<ArrowBackIcon style={{marginRight: 5, }} />
Workflows
</Button>
<Button
variant={"outlined"}
color={"secondary"}
style={{marginRight: 10, }}
onClick={() => {
window.open(`/workflow/${workflow.id}`, "_blank")
window.open(`/workflows/${workflow.id}`, "_blank")
}}
>
<ArrowForwardIcon style={{marginRight: 5, }} />
<OpenInNewIcon style={{marginRight: 5, }}/>
Workflow
</Button>
<Button
variant={"outlined"}
variant={workflow.sharing === "form" ? "outlined" : "contained"}
color={"secondary"}
style={{marginRight: 10, }}
onClick={() => {
setSharingOpen(true)
}}
>
Share Form
{workflow.sharing === "form" ?
<LockOpenIcon style={{marginRight: 5, }} />
:
<LockIcon style={{marginRight: 5, }} />
}
{workflow.sharing === "form" ?
"Unshare"
:
"Share"
}
</Button>
<Button
@@ -1240,9 +1474,85 @@ const RunWorkflow = (defaultprops) => {
<CircularProgress />
</div>
// Check width
const overlap = window !== undefined && window.innerWidth !== undefined && window.innerWidth < 1300
const formSidebar = !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: 100,
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 ?
<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)
}}
currentWorkflowId={workflow.id}
/>
{/*
<Button
variant="outlined"
color="primary"
fullWidth
style={{textTransform: "none", }}
onClick={() => {
navigate(`/forms/${form.id}`)
getWorkflow(form.id, sourceNode)
}}
>
{form.name}
</Button>
*/}
</div>
)
})}
</div>
:
<div>
No forms loaded
</div>
}
</div>
return (
<div>
<div style={{position: "relative", }}>
{loadedCheck}
{formSidebar}
</div>
)
}
frontend/src/views/SetAuthentication.jsx
+14 -8
View File
@@ -3,6 +3,8 @@ import React, { useState } from "react";
import { Typography, CircularProgress } from "@mui/material";
import theme from '../theme.jsx';
import { red, } from "../views/AngularWorkflow.jsx"
const SetAuthentication = (props) => {
const { globalUrl } = props;
@@ -300,7 +302,7 @@ const SetAuthentication = (props) => {
}
return (
<div style={{ maringTop: 50, padding: 50, border: "1px solid rgba(255,255,255,0.6)", borderRadius: theme.palette.borderRadius, width: 500, margin: "auto", itemAlign: "center", textAlign: "center",}}>
<div style={{ padding: 50, border: failed === true ? `1px solid ${red}` : "1px solid rgba(255,255,255,0.6)", borderRadius: theme.palette.borderRadius, width: 500, margin: "auto", marginTop: 50, itemAlign: "center", textAlign: "center",}}>
<Typography
variant="h4"
style={{ marginLeft: "auto", marginRight: "auto", marginTop: 50}}
@@ -311,18 +313,22 @@ const SetAuthentication = (props) => {
variant="h6"
style={{ marginLeft: "auto", marginRight: "auto", marginTop: 50}}
>
{!finished ? (
{!finished ?
failed ?
null :
<CircularProgress />
) : (
"Done - this window should close within 3 seconds."
)}
<div />
{failed ? "Failed setup. Error: " : ""} {response}
:
failed ?
null
:
"Done - this window should close within 3 seconds."
}
<div style={{marginTop: 10, }} />
<b>{failed ? "Failed auth. Error: " : ""}</b> {response}
<br/>
<br/>
{failed ? "If the error persists, try to use fewer scopes. Contact our support at support@shuffler.io if you need further assistance. You may close this window." : ""}
{failed ? "If the error persists, try to use fewer scopes. Contact support@shuffler.io if you need further assistance, and include the current URL and a screenshot. You may now close this window." : ""}
</Typography>
</div>
);
frontend/src/views/Workflows.jsx
+96 -60
View File
@@ -417,7 +417,37 @@ const chipStyle = {
color: "white",
};
export const collapseField = (field) => {
if (field === undefined || field === null) {
return true
}
if (field.name === "headers" || field.name === "cookies") {
return true
}
if (field.type === "array") {
return true
}
// If more than 10 keys in object, collapse
if (field.type === "object") {
if (Object.keys(field.src).length > 7) {
return true
}
}
return false
}
export const validateJson = (showResult) => {
if (showResult === undefined || showResult === null) {
return {
valid: false,
result: "",
}
}
if (typeof showResult === 'string') {
showResult = showResult.split(" False").join(" false")
showResult = showResult.split(" True").join(" true")
@@ -645,24 +675,21 @@ const Workflows = (props) => {
}
setGettingStartedItems(activeFiltered)
//const doneFiltered = activeFiltered.filter((item) => item.done === true)
//if (doneFiltered.length > 0) {
// console.log("DONE: ", doneFiltered)
//}
const sidebar = localStorage.getItem(sidebarKey);
if (sidebar === null || sidebar === undefined) {
console.log("No sidebar defined")
localStorage.setItem(sidebarKey, "open");
setDrawerOpen(true)
} else {
/*
const sidebar = localStorage.getItem(sidebarKey)
if (sidebar === null || sidebar === undefined) {
console.log("No sidebar defined")
localStorage.setItem(sidebarKey, "open");
setDrawerOpen(true)
} else {
if (sidebar === "open") {
setDrawerOpen(true)
setDrawerOpen(true)
} else {
setDrawerOpen(false)
setDrawerOpen(false)
}
}
*/
}
}
@@ -976,7 +1003,7 @@ const Workflows = (props) => {
onClick={() => {
console.log("Editing: ", editingWorkflow);
if (selectedWorkflowId) {
deleteWorkflow(selectedWorkflowId);
deleteWorkflow(selectedWorkflowId)
setTimeout(() => {
getAvailableWorkflows();
}, 1000);
@@ -1877,7 +1904,7 @@ const Workflows = (props) => {
toast("Failed deleting workflow. Do you have access?");
} else {
if (bulk !== true) {
toast("Deleted workflow " + id);
toast(`Deleted workflow ${id}. Child Workflows in Suborgs were also removed.`)
}
}
@@ -2063,6 +2090,8 @@ const Workflows = (props) => {
{"Create Form"}
</MenuItem>
<Divider />
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
disabled={isDistributed}
@@ -2076,19 +2105,8 @@ const Workflows = (props) => {
<CloudUploadIcon style={{ marginLeft: 0, marginRight: 8 }} />
{"Publish Workflow"}
</MenuItem>
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
disabled={isDistributed}
onClick={() => {
duplicateWorkflow(data)
setOpen(false)
}}
key={"duplicate"}
>
<FileCopyIcon style={{ marginLeft: 0, marginRight: 8 }} />
{"Duplicate Workflow"}
</MenuItem>
<MenuItem
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
disabled={isDistributed}
onClick={() => {
@@ -2101,6 +2119,22 @@ const Workflows = (props) => {
<GetAppIcon style={{ marginLeft: 0, marginRight: 8 }} />
{"Export Workflow"}
</MenuItem>
<Divider />
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
disabled={isDistributed}
onClick={() => {
duplicateWorkflow(data)
setOpen(false)
}}
key={"duplicate"}
>
<FileCopyIcon style={{ marginLeft: 0, marginRight: 8 }} />
{"Duplicate Workflow"}
</MenuItem>
<MenuItem
style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
disabled={isDistributed}
@@ -4092,27 +4126,27 @@ const Workflows = (props) => {
)
}
const gettingStartedDrawer =
<Drawer
anchor={"right"}
open={drawerOpen}
variant="persistent"
keepMounted={true}
PaperProps={{
style: {
resize: "both",
overflow: "auto",
minWidth: drawerWidth,
maxWidth: drawerWidth,
backgroundColor: "#1F2023",
color: "white",
fontSize: 18,
borderLeft: theme.palette.defaultBorder,
marginTop: 100,
borderRadius: "5px 0px 0px 0px",
},
}}
>
const gettingStartedDrawer = true == true ? null :
<Drawer
anchor={"right"}
open={drawerOpen}
variant="persistent"
keepMounted={true}
PaperProps={{
style: {
resize: "both",
overflow: "auto",
minWidth: drawerWidth,
maxWidth: drawerWidth,
backgroundColor: "#1F2023",
color: "white",
fontSize: 18,
borderLeft: theme.palette.defaultBorder,
marginTop: 100,
borderRadius: "5px 0px 0px 0px",
},
}}
>
<div style={{backgroundColor: "#f86a3e", display: "flex", }}>
<Typography variant="h6" style={{flex: 5, marginTop: 20, marginLeft: 20, marginBottom: 20, }}>
Getting Started
@@ -4222,6 +4256,7 @@ const Workflows = (props) => {
maxWidth: window.innerWidth > 1366 ? 1366 : isMobile ? "100%" : 1200,
margin: "auto",
padding: 20,
paddingLeft: userdata?.support ? 80 : 0
}}
onDrop={uploadFile}
>
@@ -4233,16 +4268,17 @@ const Workflows = (props) => {
{publishModal}
{workflowDownloadModalOpen}
{!drawerOpen ? <div style={{ position: "fixed", top: 64, right: -5, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, }}>
<Tooltip title={`Getting started`} placement="bottom">
<IconButton onClick={() => {
setDrawerOpen(true)
localStorage.setItem(sidebarKey, "open");
}}>
<ArrowLeftIcon />
</IconButton>
</Tooltip>
</div> : null}
{/*!drawerOpen ?
<div style={{ position: "fixed", top: 64, right: -5, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, }}>
<Tooltip title={`Getting Started`} placement="bottom">
<IconButton onClick={() => {
setDrawerOpen(true)
localStorage.setItem(sidebarKey, "open");
}}>
<ArrowLeftIcon />
</IconButton>
</Tooltip>
</div> : null*/}
{isMobile ? null : gettingStartedDrawer}
{videoView}