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

Synced 2.0 updates

Browse Source
This commit is contained in:
Frikky
2025-01-30 15:21:45 +01:00
parent e5ac2e3ae7
commit 4b8c860569
20 changed files with 15790 additions and 15012 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppModal.jsx
+129 -4
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useCallback, useEffect, useState } from 'react';
import { useNavigate } from 'react-router';
import {
@@ -23,14 +23,14 @@ import ForkRightIcon from '@mui/icons-material/ForkRight';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import LaunchIcon from '@mui/icons-material/Launch';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { CloudDownloadOutlined } from '@mui/icons-material';
import { CloudDownloadOutlined, Delete } from '@mui/icons-material';
import { findSpecificApp } from '../components/AppFramework.jsx';
import theme from "../theme.jsx";
import YAML from 'yaml';
import { toast } from 'react-toastify';
import { Link } from 'react-router-dom';
const AppModal = ({ open, onClose, app, globalUrl }) => {
const AppModal = ({ open, onClose, app, globalUrl, getApps }) => {
const [frameworkData, setFrameworkData] = useState({})
const [userdata, setUserdata] = useState({})
@@ -41,6 +41,8 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
const [latestUsecase, setLatestUsecase] = useState([])
const [foundAppUsecase, setFoundAppUsecase] = useState({})
const [usecaseLoading, setUsecaseLoading] = useState(false)
const [deleteModalOpen, setDeleteModalOpen] = useState(false)
const [sharingConfiguration, setSharingConfiguration] = React.useState("you");
const navigate = useNavigate();
const parseUsecase = (subcase) => {
const srcdata = findSpecificApp(frameworkData, subcase.type)
@@ -294,8 +296,101 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
setUsecaseLoading(true)
getAvailableWorkflows()
getFramework()
handleUpdateSharingConfiguration()
}, [app])
const handleUpdateSharingConfiguration = useCallback(() => {
if (app?.sharing === true) {
setSharingConfiguration("public")
}else {
setSharingConfiguration("you")
}
}, [app?.id])
const deleteApp = (appId) => {
toast("Attempting to delete app");
fetch(globalUrl + "/api/v1/apps/" + appId, {
method: "DELETE",
headers: {
Accept: "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status === 200) {
toast("Successfully deleted app");
setTimeout(() => {
//delete apps from local storage
localStorage.removeItem("apps");
getApps();
}, 1000);
} else {
toast("Failed deleting app. Does it still exist?");
}
})
.catch((error) => {
toast(error.toString());
});
};
const deleteModal = deleteModalOpen ? (
<Dialog
open={deleteModalOpen}
onClose={() => {
setDeleteModalOpen(false);
}}
PaperProps={{
sx: {
borderRadius: theme?.palette?.DialogStyle?.borderRadius,
border: theme?.palette?.DialogStyle?.border,
fontFamily: theme?.typography?.fontFamily,
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
zIndex: 1000,
minWidth: "500px",
overflow: "hidden",
'& .MuiDialogContent-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
'& .MuiDialogTitle-root': {
backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
},
}
}}
>
<DialogTitle>
<div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
Are you sure? <div />
Some workflows may stop working.
</div>
</DialogTitle>
<DialogContent
style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
>
<Button
style={{}}
onClick={() => {
deleteApp(app.id);
setDeleteModalOpen(false);
}}
color="primary"
>
Yes
</Button>
<Button
variant="outlined"
style={{marginLeft: 5}}
onClick={() => {
setDeleteModalOpen(false);
}}
color="primary"
>
No
</Button>
</DialogContent>
</Dialog>
) : null;
const downloadApp = (inputdata) => {
const id = inputdata.id;
@@ -425,6 +520,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
}
}}
>
{deleteModal}
<DialogTitle
sx={{
display: 'flex',
@@ -457,7 +553,7 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
<div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: theme?.typography?.fontFamily }}>
<img
alt={app?.name}
src={app?.large_image || app?.image_url}
src={app?.large_image || app?.image_url || "/images/no_image.png"}
style={{
borderRadius: 4,
maxWidth: 100,
@@ -536,6 +632,35 @@ const AppModal = ({ open, onClose, app, globalUrl }) => {
</Button>
</Tooltip>
) : null}
{(userdata?.id === app?.owner)? (
<Tooltip title={"Delete app (confirm box will show)"}>
<Button
variant="outlined"
component="label"
color="primary"
sx={{
bgcolor: '#494949',
'&:hover': { bgcolor: '#494949', border: 'none' },
textTransform: 'none',
borderRadius: 1,
minWidth: '45px',
width: '45px',
height: '40px',
padding: 2,
color: "#fff",
fontFamily: theme?.typography?.fontFamily,
border: 'none'
}}
onClick={() => {
setDeleteModalOpen(true);
}}
disabled={(sharingConfiguration === undefined || sharingConfiguration === null || sharingConfiguration === "public") }
>
<Delete />
</Button>
</Tooltip>
): null}
<Button
variant="contained"
sx={{
frontend/src/components/Appsearch.jsx
+3
View File
@@ -50,6 +50,9 @@ const Appsearch = props => {
return (
<form noValidate action="" role="search">
<TextField
autoFocus
autoComplete="off"
autocomplete="off"
fullWidth
style={{backgroundColor: "#2F2F2F", borderRadius: borderRadius, width: "100%",}}
InputProps={{
frontend/src/components/CacheView.jsx
+14 -3
View File
@@ -390,6 +390,10 @@ const CacheView = memo((props) => {
variant="contained"
style={{ borderRadius: "2px", backgroundColor: "#ff8544",color: "#1a1a1a", textTransform:"none" }}
onClick={() => {
if (value === "") {
toast("Key or Value can not be empty");
return;
}
{editCache ? editOrgCache(orgId) : addOrgCache(orgId)}
setKey("")
setValue("")
@@ -503,7 +507,7 @@ const CacheView = memo((props) => {
>
<DialogTitle>
<div style={{ color: "rgba(255,255,255,0.9)" }}>
Select sub-org to distribute files
Select sub-org to distribute Datastore key
</div>
</DialogTitle>
<DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
@@ -714,7 +718,9 @@ const CacheView = memo((props) => {
display: "table-cell",
overflow: "hidden",
verticalAlign: "middle",
padding: "8px 8px 8px 15px"
padding: "8px 8px 8px 15px",
maxWidth: 200,
overflowX: "auto",
}}
primary={data.key}
/>
@@ -872,6 +878,8 @@ const CacheView = memo((props) => {
style={{display: "table-cell", textAlign: 'center', verticalAlign: 'middle', }}
/>
:
<ListItemText
primary={
<Tooltip
title="Distributed to sub-organizations. This means the sub organizations can use this datastore key, but can not modify it."
placement="top"
@@ -879,7 +887,7 @@ const CacheView = memo((props) => {
<Checkbox
disabled={ userdata?.active_org?.role !== "admin" || (selectedOrganization.creator_org !== undefined && selectedOrganization.creator_org !== null && selectedOrganization.creator_org !== "" )? true : false}
checked={isDistributed}
style={{ }}
style={{ margin: "auto" }}
color="secondary"
onClick={() => {
setShowDistributionPopup(true)
@@ -893,6 +901,9 @@ const CacheView = memo((props) => {
/>
</Tooltip>
}
style={{display: "table-cell", textAlign: 'center', verticalAlign: 'middle', }}
/>
}
</ListItem>
);
})}
frontend/src/components/ConfigureWorkflow.jsx
+16 -4
View File
@@ -799,12 +799,16 @@ const ConfigureWorkflow = (props) => {
>
<div
style={{
border: filled ? `1px solid ${theme.palette.green}` : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, width: "100%", padding: 12, cursor: "pointer",
border: filled ? `1px solid ${theme.palette.green}` : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, width: "100%", padding: 12, cursor: filled ? "default" : "pointer",
}}
id="app-config"
>
<div style={{display: "flex", }}
onClick={() => {
if (filled) {
return
}
setOpened(!opened);
// Scroll to it
@@ -865,6 +869,7 @@ const ConfigureWorkflow = (props) => {
isLoggedIn={true}
getAppAuthentication={undefined}
workflow={workflow}
setFinalized={setFinalized}
/>
</div>
@@ -1377,7 +1382,7 @@ const ConfigureWorkflow = (props) => {
return (
<div>
<div style={{margin: setConfigureWorkflowModalOpen !== undefined ? "0px 50px 0px 50px" : "35px 0px 0px 0px", maxHeight: 475, }}>
<div style={{margin: setConfigureWorkflowModalOpen !== undefined ? "0px 50px 0px 50px" : "25px 0px 0px 0px", maxHeight: 475, }}>
{setConfigureWorkflowModalOpen !== undefined ?
@@ -1387,7 +1392,7 @@ const ConfigureWorkflow = (props) => {
: null
}
<div style={{marginTop: 10, }} />
<div style={{marginTop: setConfigureWorkflowModalOpen !== undefined ? 10 : 0, }} />
{/*
<WorkflowValidationTimeline
@@ -1404,7 +1409,7 @@ const ConfigureWorkflow = (props) => {
{requiredActions.length > 0 ? (
<span>
<Typography variant="body2" color="textSecondary">
Please configure the following steps to help us complete your workflow. This can also be done later.
To complete the workflow setup, please configure the following steps.
</Typography>
{setConfigureWorkflowModalOpen !== undefined ?
@@ -1434,6 +1439,13 @@ const ConfigureWorkflow = (props) => {
)
})}
</List>
{/*
<Typography variant="body2" color="textSecondary">
Once done, you may continue to the workflow.
</Typography>
*/}
</span>
) : null}
frontend/src/components/EditWorkflow.jsx
+90 -77
View File
@@ -71,7 +71,8 @@ const EditWorkflow = (props) => {
const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
const [submitLoading, setSubmitLoading] = React.useState(false);
const [showMoreClicked, setShowMoreClicked] = React.useState(expanded === true ? true : false);
//const [showMoreClicked, setShowMoreClicked] = React.useState(expanded === true ? true : false);
const [showMoreClicked, setShowMoreClicked] = React.useState(true);
const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
@@ -244,7 +245,6 @@ const EditWorkflow = (props) => {
Workflows can be built from scratch, or from templates. <a href="/usecases2" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Usecases</a> can help you discover next steps, and you can <a href="/search?tab=workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>search</a> for them directly. <a href="/docs/workflows" rel="noopener noreferrer" target="_blank" style={{ textDecoration: "none", color: "#f86a3e" }}>Learn more</a>
</Typography>
{/*
<div style={{marginTop: 10, marginBottom: 10, marginRight: 50, }}>
<WorkflowValidationTimeline
@@ -252,7 +252,6 @@ const EditWorkflow = (props) => {
workflow={workflow}
/>
</div>
*/}
{showUpload === true ?
<div style={{ float: "right" }}>
@@ -290,7 +289,7 @@ const EditWorkflow = (props) => {
bottom: 0,
zIndex: 1002,
backgroundColor: theme.palette.backgroundColor,
height: 50,
height: 75,
paddingTop: 20,
paddingLeft: 75,
}}>
@@ -327,12 +326,17 @@ const EditWorkflow = (props) => {
innerWorkflow.name = name
innerWorkflow.description = description
if (newWorkflowTags.length > 0) {
innerWorkflow.tags = newWorkflowTags
} else {
innerWorkflow.tags = []
}
if (selectedUsecases.length > 0) {
innerWorkflow.usecase_ids = selectedUsecases
} else {
innerWorkflow.usecase_ids = []
}
if (dueDate > 0) {
@@ -361,7 +365,6 @@ const EditWorkflow = (props) => {
setWorkflow({})
} else {
setWorkflow(innerWorkflow)
console.log("editing workflow: ", innerWorkflow)
}
setSubmitLoading(true)
@@ -505,7 +508,7 @@ const EditWorkflow = (props) => {
color: "white",
},
}}
multiLine
multiline
rows={3}
color="primary"
defaultValue={innerWorkflow.description}
@@ -537,81 +540,10 @@ const EditWorkflow = (props) => {
</RadioGroup>
</FormControl>
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
sx={{
marginTop: 3,
marginLeft: 3,
}}
value={dueDate}
label="Due Date"
format="YYYY-MM-DD"
onChange={(newValue) => {
setDueDate(newValue)
}}
/>
</LocalizationProvider>
</div>
<div />
<FormControl style={{ marginTop: 15, }}>
<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
defaultValue={innerWorkflow.workflow_type}
onChange={(e) => {
console.log("Data: ", e.target.value)
innerWorkflow.workflow_type = e.target.value
setInnerWorkflow(innerWorkflow)
}}
>
<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
</RadioGroup>
</FormControl>
<TextField
onBlur={(event) => {
innerWorkflow.blogpost = event.target.value
setInnerWorkflow(innerWorkflow)
}}
InputProps={{
style: {
color: "white",
},
}}
color="primary"
defaultValue={innerWorkflow.blogpost}
placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
rows="1"
label="blogpost"
margin="dense"
fullWidth
/>
<TextField
onBlur={(event) => {
innerWorkflow.video = event.target.value
setInnerWorkflow(innerWorkflow)
}}
InputProps={{
style: {
color: "white",
},
}}
color="primary"
defaultValue={innerWorkflow.video}
placeholder="A youtube or loom link to the video"
rows="1"
label="Video"
margin="dense"
fullWidth
/>
<TextField
onBlur={(event) => {
@@ -1166,6 +1098,87 @@ const EditWorkflow = (props) => {
</div>
</> : null*/}
<Typography variant="h4" style={{ marginTop: 100, }}>
Publishing
</Typography>
<Typography variant="body1" color="textSecondary" style={{ marginTop: 10, }}>
Publishing is related to making the workflow itself public. When publishing a workflow, all the details (except sensitive info) become available to everyone. The details below will help a user understand this better. When a workflow is published, you keep the original, and a copy enters the workflow search, and is associated with your <a href="/creators" style={{ textDecoration: "none", color: "#f86a3e" }} target="_blank">creator account</a>, if you have one. You can always unpublish the workflow after. To publish it, click the three dots next to the workflow.
</Typography>
<LocalizationProvider style={{marginLeft: 0, }} dateAdapter={AdapterDayjs}>
<DatePicker
sx={{
marginTop: 3,
marginLeft: 3,
}}
value={dueDate}
label="Due Date"
format="YYYY-MM-DD"
onChange={(newValue) => {
setDueDate(newValue)
}}
/>
</LocalizationProvider>
<FormControl style={{ marginTop: 15, }}>
<FormLabel id="demo-row-radio-buttons-group-label">Type</FormLabel>
<RadioGroup
row
aria-labelledby="demo-row-radio-buttons-group-label"
name="row-radio-buttons-group"
defaultValue={innerWorkflow.workflow_type}
onChange={(e) => {
console.log("Data: ", e.target.value)
innerWorkflow.workflow_type = e.target.value
setInnerWorkflow(innerWorkflow)
}}
>
<FormControlLabel value="trigger" control={<Radio />} label="Trigger" />
<FormControlLabel value="subflow" control={<Radio />} label="Subflow" />
<FormControlLabel value="standalone" control={<Radio />} label="Standalone" />
</RadioGroup>
</FormControl>
<TextField
onBlur={(event) => {
innerWorkflow.blogpost = event.target.value
setInnerWorkflow(innerWorkflow)
}}
InputProps={{
style: {
color: "white",
},
}}
color="primary"
defaultValue={innerWorkflow.blogpost}
placeholder="A blogpost or other reference for how this work workflow was built, and what it's for."
rows="1"
label="blogpost"
margin="dense"
fullWidth
/>
<TextField
onBlur={(event) => {
innerWorkflow.video = event.target.value
setInnerWorkflow(innerWorkflow)
}}
InputProps={{
style: {
color: "white",
},
}}
color="primary"
defaultValue={innerWorkflow.video}
placeholder="A youtube or loom link to the video"
rows="1"
label="Video"
margin="dense"
fullWidth
/>
<Tooltip color="primary" title={"Add more details"} placement="top">
<Button
style={{ margin: "auto", marginTop: 50, marginBottom: 10, textAlign: "center", textTransform: "none", }}
frontend/src/components/FixWorkflowValidationErrors.jsx
+5 -5
View File
@@ -644,6 +644,7 @@ const FixWorkflowValidationErrors = (props) => {
console.log("Workflow validation: ", workflow.validation)
return (
<div>
{/*
{workflow.errors !== undefined && workflow.errors !== null ?
<div>
General errors: {workflow.errors.length}
@@ -656,11 +657,8 @@ const FixWorkflowValidationErrors = (props) => {
})}
</div>
: null}
<Divider style={{marginTop: 15, marginBottom: 15, }}/>
{workflow.validation.errors !== undefined && workflow.validation.errors !== null ?
workflow.validation.errors !== undefined && workflow.validation.errors !== null ?
<div>
Validation errors: {workflow.validation.errors.length}
{workflow.validation.errors.map((error, index) => {
@@ -675,10 +673,12 @@ const FixWorkflowValidationErrors = (props) => {
)
})}
</div>
: null}
: null*/}
{/*
<Divider style={{marginTop: 15, marginBottom: 15, }} />
Apps loaded: {apps.length}
*/}
</div>
)
frontend/src/components/LeftSideBar.jsx
+155 -58
View File
@@ -7,7 +7,9 @@ import {
Add as AddIcon,
BorderColor,
Close as CloseIcon,
ConstructionOutlined,
ConstructionOutlined as ConstructionOutlinedIcon,
Toc as TocIcon,
Settings as SettingsIcon
} from "@mui/icons-material";
import SearchBox from "./SearchData.jsx";
import {
@@ -29,9 +31,6 @@ import {
Collapse,
} from "@mui/material";
import theme from "../theme.jsx";
import {
Settings as SettingsIcon
} from "@mui/icons-material";
import RecentWorkflow from "../components/RecentWorkflow.jsx";
import { useNavigate } from "react-router";
@@ -143,8 +142,6 @@ useEffect(() => {
>
<Box
sx={{
maxHeight: 250,
overflowY: "auto",
scrollbarWidth: "thin",
scrollbarColor: "#494949 transparent",
"& .MuiAutocomplete-listbox": {
@@ -238,7 +235,7 @@ useEffect(() => {
setOpenautomateTab(true);
setOpenSecurityTab(false);
setCurrentOpenTab("workflows");
} else if ((lastTabOpenByUser === "apps" && currentPath.includes("/search")) || currentPath.includes("/search")) {
} else if ((lastTabOpenByUser === "apps" && currentPath.includes("/apps")) || currentPath.includes("/apps")) {
setOpenautomateTab(true);
setOpenSecurityTab(false);
setCurrentOpenTab("apps");
@@ -500,16 +497,6 @@ useEffect(() => {
})
</MenuItem>
</Link>
<Link to="/workflows" style={hrefStyle}>
<MenuItem
onClick={(event) => {
handleClose();
}}
style={{fontSize: 18}}
>
<LightbulbIcon style={{ marginRight: 5 }} /> Use Cases
</MenuItem>
</Link>
<Divider style={{ marginTop: 10, marginBottom: 10, }} />
@@ -537,7 +524,7 @@ useEffect(() => {
<Divider style={{ marginBottom: 10, }} />
<Typography color="textSecondary" align="center" style={{ marginTop: 5, marginBottom: 5, fontSize: 18 }}>
Version: 2.0.0-rc3
Version: 2.0.0-rc4
</Typography>
</Menu>
</span>
@@ -704,16 +691,48 @@ useEffect(() => {
const CheckOrgStates = useCallback(() => {
setOrgOptions(
userdata?.orgs?.map((org) => ({
userdata?.orgs?.map((org) => {
let skipOrg = false;
if (
org.creator_org !== undefined &&
org.creator_org !== null &&
org.creator_org.length > 0
) {
// Finds the parent org
for (let key in userdata.child_orgs) {
if (userdata.child_orgs[key].id === org.creator_org) {
skipOrg = true;
break;
}
}
if (skipOrg) {
return null; // Skip this org
}
}
return {
id: org.id,
name: org.name,
image: org.image,
region_url: getRegionTag(org.region_url),
})) || []
margin_left:
org.creator_org !== undefined &&
org.creator_org !== null &&
org.creator_org.length > 0
? org.id === userdata.active_org.id
? 0
: 20
: 0,
};
}) || []
);
setActiveOrgName(userdata?.active_org?.name || "Select Organization");
setSelectedOrg(userdata?.active_org?.name || "Select Organization");
},[orgOptions, activeOrgName, selectedOrg]);
}, [userdata]);
useEffect(() => {
if (typeof userdata?.id === "string" && userdata?.id?.length > 0) {
@@ -870,7 +889,7 @@ useEffect(() => {
</Button>
</Box>
</Box>
<Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease',paddingTop: 0.5 }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true);}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false);}}>
<Box sx={{ display: "flex", flexDirection: "column", width:"100%", height: "100%", overflowY: "auto", overflowX: "hidden",transition: 'display 0.3s ease',paddingTop: 0.5 }} onMouseOver={()=>{!leftSideBarOpenByClick && setExpandLeftNav(true)}} onMouseLeave={()=>{!leftSideBarOpenByClick && setExpandLeftNav(false);setOpenAutocomplete(false)}}>
<Box
sx={{
display: "flex",
@@ -1144,7 +1163,7 @@ useEffect(() => {
color: currentOpenTab === "apps" && currentPath.includes("/apps") ? "#FFFFFF" : "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor: currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps2") ? "#2f2f2f": "transparent",
backgroundColor: currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps") ? "#2f2f2f": "transparent",
marginLeft: 16,
fontSize: 18
}}
@@ -1152,7 +1171,7 @@ useEffect(() => {
event.currentTarget.style.backgroundColor = "#2f2f2f";
}}
onMouseOut={(event)=>{
event.currentTarget.style.backgroundColor = currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/search") ? "#2f2f2f": "transparent";
event.currentTarget.style.backgroundColor = currentOpenTab === "apps" && expandLeftNav && currentPath.includes("/apps") ? "#2f2f2f": "transparent";
}}
disableRipple={expandLeftNav ? false : true}
>
@@ -1205,7 +1224,7 @@ useEffect(() => {
: "transparent";
}}
>
<ShieldOutlinedIcon
<TocIcon
style={{
width: 18,
height: 18,
@@ -1223,7 +1242,7 @@ useEffect(() => {
: "#C8C8C8"
}}
>
Discover
Content
</span>
</Button>
</Link>
@@ -1262,7 +1281,7 @@ useEffect(() => {
<Collapse in={openSecurityTab} timeout="auto" unmountOnExit>
<Box
style={{
maxHeight: openSecurityTab && expandLeftNav ? 100 : 0,
maxHeight: openSecurityTab && expandLeftNav ? 135 : 0,
overflow: "hidden",
transition: "max-height 0.3s ease, opacity 0.3s ease",
display: "flex",
@@ -1276,19 +1295,18 @@ useEffect(() => {
to={"/forms"}
style={{
...hrefStyle,
pointerEvents: userdata?.support ? "auto" : "none",
pointerEvents: "auto",
}}
>
<Button
onClick={(event) => {
if (!userdata?.support) return;
setCurrentOpenTab("detection");
localStorage.setItem("lastTabOpenByUser", "detection");
}}
sx={{
width: "100%",
height: 35,
color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
color: "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor:
@@ -1296,11 +1314,10 @@ useEffect(() => {
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
backgroundColor: "#2f2f2f",
},
cursor: userdata?.support ? "pointer" : "not-allowed",
cursor: "pointer",
}}
disabled={userdata?.support === false}
>
<span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
•
@@ -1312,11 +1329,9 @@ useEffect(() => {
transition: "opacity 0.3s ease",
fontSize: 18,
color:
userdata?.support && currentOpenTab === "detection" && currentPath.includes("/detection")
currentOpenTab === "detection" && currentPath.includes("/detection")
? "#F1F1F1"
: userdata?.support
? "#C8C8C8"
: "#6F6F6F",
: "#C8C8C8"
}}
>
Forms
@@ -1329,19 +1344,18 @@ useEffect(() => {
to={"/admin?tab=datastore"}
style={{
...hrefStyle,
pointerEvents: userdata?.support ? "auto" : "none",
pointerEvents: "auto",
}}
>
<Button
onClick={(event) => {
if (!userdata?.support) return;
setCurrentOpenTab("response");
localStorage.setItem("lastTabOpenByUser", "response");
}}
sx={{
width: "100%",
height: 35,
color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
color: "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor:
@@ -1349,9 +1363,9 @@ useEffect(() => {
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
backgroundColor: "#2f2f2f",
},
cursor: userdata?.support ? "pointer" : "not-allowed",
cursor: "pointer",
}}
>
<span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
@@ -1364,11 +1378,9 @@ useEffect(() => {
transition: "opacity 0.3s ease",
fontSize: 18,
color:
userdata?.support && currentOpenTab === "response" && currentPath.includes("/response")
currentOpenTab === "response" && currentPath.includes("/response")
? "#F1F1F1"
: userdata?.support
? "#C8C8C8"
: "#6F6F6F",
: "#C8C8C8"
}}
>
Datastore
@@ -1376,24 +1388,24 @@ useEffect(() => {
</Button>
</Link>
</span>
<span style={{ display: "inline-block", width: "100%" }}>
<Link
to={"/admin?tab=files"}
style={{
...hrefStyle,
pointerEvents: userdata?.support ? "auto" : "none",
pointerEvents: "auto",
}}
>
<Button
onClick={(event) => {
if (!userdata?.support) return;
setCurrentOpenTab("response");
localStorage.setItem("lastTabOpenByUser", "response");
}}
sx={{
width: "100%",
height: 35,
color: userdata?.support ? "#C8C8C8" : "#6F6F6F",
color: "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor:
@@ -1401,9 +1413,9 @@ useEffect(() => {
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: userdata?.support ? "#2f2f2f" : "transparent",
backgroundColor: "#2f2f2f",
},
cursor: userdata?.support ? "pointer" : "not-allowed",
cursor: "pointer",
}}
>
<span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
@@ -1416,11 +1428,9 @@ useEffect(() => {
transition: "opacity 0.3s ease",
fontSize: 18,
color:
userdata?.support && currentOpenTab === "response" && currentPath.includes("/response")
currentOpenTab === "response" && currentPath.includes("/response")
? "#F1F1F1"
: userdata?.support
? "#C8C8C8"
: "#6F6F6F",
: "#C8C8C8"
}}
>
Files
@@ -1428,8 +1438,59 @@ useEffect(() => {
</Button>
</Link>
</span>
<span style={{ display: "inline-block", width: "100%" }}>
<Link
to={"/admin?tab=locations"}
style={{
...hrefStyle,
pointerEvents: "auto",
}}
>
<Button
onClick={(event) => {
setCurrentOpenTab("response");
localStorage.setItem("lastTabOpenByUser", "response");
}}
sx={{
width: "100%",
height: 35,
color: "#C8C8C8",
justifyContent: "flex-start",
textTransform: "none",
backgroundColor:
currentOpenTab === "response" && currentPath.includes("/response")
? "#2f2f2f"
: "transparent",
"&:hover": {
backgroundColor: "#2f2f2f",
},
cursor: "pointer",
}}
>
<span style={{ position: "relative", left: !expandLeftNav ? 10 : 0, marginRight: 10, fontSize: 18 }}>
•
</span>
<span
style={{
display: expandLeftNav ? "inline" : "none",
opacity: expandLeftNav ? 1 : 0,
transition: "opacity 0.3s ease",
fontSize: 18,
color:
currentOpenTab === "response" && currentPath.includes("/response")
? "#F1F1F1"
: "#C8C8C8"
}}
>
Shuffle Agent
</span>
</Button>
</Link>
</span>
</Box>
</Collapse>
<Link to="/docs" style={hrefStyle}>
<Button
onClick={(event) => {
@@ -1464,6 +1525,38 @@ useEffect(() => {
</span>
</Button>
</Link>
<Link to="/admin?admin_tab=billingstats" style={hrefStyle}>
<Button
onClick={(event) => {
setCurrentOpenTab("admin");
localStorage.setItem("lastTabOpenByUser", "admin");
}}
style={{
...ButtonStyle,
marginTop: 8,
marginTop: 8,
backgroundColor: currentOpenTab === "docs" && currentPath.includes("/admin") ? "#2f2f2f": "transparent",
}}
onMouseOver={(event)=>{
event.currentTarget.style.backgroundColor = "#2f2f2f";
}}
onMouseOut={(event)=>{
event.currentTarget.style.backgroundColor = currentOpenTab === "docs" && currentPath.includes("/admin") ? "#2f2f2f": "transparent";
}}
>
<BusinessIcon style={{ width: 16, height: 16, marginRight: expandLeftNav ? 10 : 0, color: "rgba(255,255,255,0.5)", }} />
<span
style={{
display: expandLeftNav ? "inline" : "none",
color: currentOpenTab === "admin" && currentPath.includes("/admin") ? "#F1F1F1" : "#C8C8C8",
}}
>
Admin
</span>
</Button>
</Link>
</Box>
{recentworkflows?.length > 0 ?
@@ -1549,6 +1642,7 @@ useEffect(() => {
padding: option.id === "add_suborg" ? "0" : "12px 16px",
marginTop: index !== 0 ? 8 : 0,
borderRadius: 6,
marginLeft: option.margin_left ? option.margin_left : 0,
}}
onMouseOver={(e) => {
e.currentTarget.style.backgroundColor = "#444444";
@@ -1618,12 +1712,15 @@ useEffect(() => {
setAutocompleteValue(newInputValue);
}}
filterOptions={(options, params) => {
const normalize = (str) => str.toLowerCase().replace(/[\s-]+/g, "");
const input = normalize(params.inputValue);
return options.filter((option) =>
option.name
.toLowerCase()
.includes(params.inputValue.toLowerCase())
normalize(option.name).includes(input) ||
normalize(option.region_url).includes(input)
);
}}
value={userOrgs}
renderInput={(params) => (
<Box
frontend/src/components/Oauth2Auth.jsx
+1 -1
View File
@@ -431,7 +431,7 @@ const AuthenticationOauth2 = (props) => {
const authentication_url = authenticationType.token_uri;
const redirectUri = `${window.location.protocol}//${window.location.host}/set_authentication`;
const workflowId = workflow !== undefined ? workflow.id : "";
const workflowId = workflow !== undefined ? workflow.id : ""
var state = `workflow_id%3D${workflowId}%26reference_action_id%3d${selectedAction.app_id}%26app_name%3d${selectedAction.app_name}%26app_id%3d${selectedAction.app_id}%26app_version%3d${selectedAction.app_version}%26authentication_url%3d${authentication_url}%26scope%3d${resources}%26client_id%3d${client_id}%26client_secret%3d${client_secret}`;
frontend/src/components/ParsedAction.jsx
+98 -5
View File
@@ -200,6 +200,7 @@ const ParsedAction = (props) => {
const [menuPosition, setMenuPosition] = useState(null);
const [uiBox, setUiBox] = useState(null);
const isIntegration = selectedAction.app_id === "integration"
const [distributeAuthToSuborgs, setDistributeAuthToSuborgs] = useState(selectedAction?.selectedAuthentication?.suborg_distributed || false)
useEffect(() => {
if (setLastSaved !== undefined) {
@@ -454,7 +455,50 @@ const ParsedAction = (props) => {
});
};
const changeDistribution = (data) => {
editAuthenticationConfig(data.id, "suborg_distribute")
}
const editAuthenticationConfig = (id, parentAction) => {
const data = {
id: id,
action: parentAction !== undefined && parentAction !== null ? parentAction : "assign_everywhere",
}
const url = globalUrl + "/api/v1/apps/authentication/" + id + "/config";
fetch(url, {
mode: "cors",
method: "POST",
body: JSON.stringify(data),
credentials: "include",
crossDomain: true,
withCredentials: true,
headers: {
"Content-Type": "application/json; charset=utf-8",
},
})
.then((response) =>
response.json().then((responseJson) => {
if (responseJson["success"] === false) {
toast("Failed overwriting appauth");
} else {
if (distributeAuthToSuborgs) {
toast.success("Successfully updated auth");
} else {
toast.success("Successfully distributed auth to suborgs");
}
setTimeout(() => {
getAppAuthentication();
setDistributeAuthToSuborgs(!distributeAuthToSuborgs)
}, 1000);
}
})
)
.catch((error) => {
toast("Err: " + error.toString());
});
};
const defineStartnode = () => {
if (cy === undefined) {
@@ -725,7 +769,7 @@ const ParsedAction = (props) => {
}
}
if (param?.configuration) {
if (param?.configuration && param?.name !== "url") {
let regex = /(^|[^\\])\$/;
if (regex.test(paramvalue)) {
if (message.length > 0) {
@@ -1498,7 +1542,12 @@ const ParsedAction = (props) => {
if (newAppname === undefined || newAppname === null) {
newAppname = ""
} else {
newAppname = newAppname.replaceAll("_", " ")
try {
newAppname = newAppname?.replaceAll("_", " ")
} catch (e) {
console.log("Error in replace newappname: ", e)
}
}
var optionalFound = false
@@ -1987,8 +2036,31 @@ const ParsedAction = (props) => {
{selectedAction.authentication !== undefined &&
selectedAction.authentication !== null &&
selectedAction.authentication.length > 0 ? (
<div style={{ marginTop: 15 }}>
<div style={{ marginTop: 15, position: "relative", }}>
<Typography style={{ color: "rgba(255,255,255,0.7)" }}>Authentication</Typography>
<Tooltip
title={
workflow?.suborg_distribution?.length > 0 && Object.getOwnPropertyNames(selectedAction?.selectedAuthentication).length !== 0 ? (
<React.Fragment>
<div style={{padding: 10, backgroundColor: theme.palette.inputColor, borderRadius: theme.palette.borderRadius, border: "1px solid rgba(255,255,255,0)"}}>
<FormControlLabel
control={
<Checkbox
checked={distributeAuthToSuborgs}
onChange={(event) => {
changeDistribution(selectedAction?.selectedAuthentication)
}}
name="distributeAuth"
color="primary"
/>
}
label="Distribute auth to suborgs"
/>
</div>
</React.Fragment>
) : null
} placement="left">
<div style={{ display: "flex" }}>
<Select
MenuProps={{
@@ -2008,6 +2080,7 @@ const ParsedAction = (props) => {
}}
fullWidth
onChange={(e) => {
if (e.target.value === "No selection") {
selectedAction.selectedAuthentication = {};
selectedAction.authentication_id = "";
@@ -2033,6 +2106,7 @@ const ParsedAction = (props) => {
selectedAction.parameters[key].value = ""
}
}
setSelectedAction(selectedAction)
setUpdate(Math.random())
@@ -2064,6 +2138,9 @@ const ParsedAction = (props) => {
} else {
selectedAction.selectedAuthentication = e.target.value;
selectedAction.authentication_id = e.target.value.id;
setDistributeAuthToSuborgs(e.target.value?.suborg_distributed || false)
setSelectedAction(selectedAction)
setUpdate(Math.random())
}
@@ -2165,6 +2242,7 @@ const ParsedAction = (props) => {
</IconButton>
</Tooltip>
</div>
</Tooltip>
</div>
) : null}
@@ -4222,17 +4300,32 @@ const ParsedAction = (props) => {
data.variant = "STATIC_VALUE"
}
const isFirstOptional = optionalFound === false && data.configuration === false && data.required === false ? true : false
var isFirstOptional = optionalFound === false && data.configuration === false && data.required === false ? true : false
if (optionalFound === false && data.configuration === false && data.required === false) {
optionalFound = true
}
if (isFirstOptional) {
// Check if any required fields are found
var foundRequired = false
for (var key in selectedActionParameters) {
if (selectedActionParameters[key]?.required === true) {
foundRequired = true
break
}
}
if (!foundRequired) {
isFirstOptional = false
}
}
return (
<div key={data.name} style={{ marginTop: isFirstOptional ? 55 : 5, }}>
{isFirstOptional ? <Divider style={{ backgroundColor: "rgba(255,255,255,0.1)", marginBottom: 20, }} /> : null}
{showButtonField === true ? hideBodyButtonValue : null}
<div
style={{ marginTop: 20, marginBottom: 0, display: "flex" }}
style={{ marginTop: 18, marginBottom: 0, display: "flex" }}
>
{data.configuration === true ? (
<Tooltip
frontend/src/components/Priorities.jsx
+320 -4
View File
@@ -13,8 +13,11 @@ import {
Card,
Chip,
Switch,
Skeleton,
Autocomplete,
TextField,
MenuItem,
} from "@mui/material";
import { makeStyles } from "@mui/styles";
import { Context } from "../context/ContextApi.jsx";
import { useNavigate, Link } from "react-router-dom";
@@ -22,8 +25,15 @@ import Priority from "../components/Priority.jsx";
import { constrainMatrix } from "reaviz";
//import { useAlert
const useStyles = makeStyles({
notchedOutline: {
borderColor: "#f85a3e !important",
},
});
const Priorities = memo((props) => {
const { globalUrl, userdata,clickedFromOrgTab, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
const { globalUrl, userdata,clickedFromOrgTab,selectedOrganization, handleEditOrg, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, notifications, setNotifications, } = props;
const [showDismissed, setShowDismissed] = React.useState(false);
const [showRead, setShowRead] = React.useState(false);
@@ -32,7 +42,21 @@ const Priorities = memo((props) => {
const [selectedExecutionId, setSelectedExecutionId] = React.useState("NO HIGHLIGHT");
const [highlightKMS, setHighlightKMS] = React.useState(false)
const [workflows, setWorkflows] = React.useState([])
const [openNotification, setOpenNotification] = React.useState(false);
const [workflow, setWorkflow] = React.useState({})
const [notificationWorkflow, setNotificationWorkflow] = React.useState(
selectedOrganization.defaults === undefined
? ""
: selectedOrganization.defaults.notification_workflow === undefined ||
selectedOrganization.defaults.notification_workflow.length === 0
? ""
: selectedOrganization.defaults.notification_workflow
);
let navigate = useNavigate();
const classes = useStyles();
useEffect(() => {
getFramework()
@@ -60,6 +84,20 @@ const Priorities = memo((props) => {
}
}, [])
useEffect(() => {
if (selectedOrganization === undefined || selectedOrganization === null || selectedOrganization?.id === undefined || selectedOrganization?.id === null || selectedOrganization?.id.length === 0) {
return
}
if(workflows?.length === 0) {
getAvailableWorkflows()
}
if (notificationWorkflow !== selectedOrganization?.defaults?.notification_workflow) {
setNotificationWorkflow(selectedOrganization?.defaults?.notification_workflow)
}
}, [selectedOrganization])
if (userdata === undefined || userdata === null) {
return
}
@@ -220,11 +258,287 @@ const Priorities = memo((props) => {
const imagesize = 22
const boxColor = "#86c142"
const getAvailableWorkflows = () => {
fetch(globalUrl + "/api/v1/workflows", {
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!");
return;
}
return response.json();
})
.then((responseJson) => {
if (responseJson !== undefined) {
// Add parent notification workflow if it's a child org
// selectedOrganization,
if (selectedOrganization.creator_org !== undefined && selectedOrganization.creator_org !== null && selectedOrganization.creator_org.length > 0) {
// Add to start of the list
responseJson.unshift({
"name": "Parent-Org's Notification Workflow",
"id": "parent",
})
}
setWorkflows(responseJson)
if (selectedOrganization.defaults !== undefined && selectedOrganization.defaults.notification_workflow !== undefined) {
const workflow = responseJson.find((workflow) => workflow.id === selectedOrganization.defaults.notification_workflow)
if (workflow !== undefined && workflow !== null) {
setWorkflow(workflow)
}
}
}
})
.catch((error) => {
console.log("Error getting workflows: " + error);
})
}
const handleWorkflowSelectionUpdate = (e, isUserinput) => {
if (e.target.value === undefined || e.target.value === null || e.target.value.id === undefined) {
console.log("Returning as there's no id")
return null
}
setOpenNotification(false)
setWorkflow(e.target.value)
setNotificationWorkflow(e.target.value.id)
handleEditOrg(
selectedOrganization?.name,
selectedOrganization.description,
selectedOrganization.id,
selectedOrganization.image,
{
app_download_repo: selectedOrganization?.defaults?.app_download_repo,
app_download_branch: selectedOrganization?.defaults?.app_download_branch,
workflow_download_repo: selectedOrganization?.defaults?.workflow_download_repo,
workflow_download_branch: selectedOrganization?.defaults?.workflow_download_branch,
notification_workflow: e.target.value.id,
documentation_reference: selectedOrganization?.defaults?.documentation_reference,
workflow_upload_repo: selectedOrganization?.defaults?.workflow_upload_repo,
workflow_upload_branch: selectedOrganization?.defaults?.workflow_upload_branch,
workflow_upload_username: selectedOrganization?.defaults?.workflow_upload_username,
workflow_upload_token: selectedOrganization?.defaults?.workflow_upload_token,
newsletter: selectedOrganization?.defaults?.newsletter,
weekly_recommendations: selectedOrganization?.defaults?.weekly_recommendations,
},
{
sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
client_id: selectedOrganization?.sso_config?.client_id,
client_secret: selectedOrganization?.sso_config?.client_secret,
openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
openid_token: selectedOrganization?.sso_config?.openid_token,
SSORequired: selectedOrganization?.sso_config?.SSORequired,
auto_provision: selectedOrganization?.sso_config?.auto_provision,
}
)
}
return (
<div style={{width: "100%", height: "100%", boxSizing: 'border-box', transition: 'width 0.3s ease', padding: clickedFromOrgTab ? "27px 10px 19px 27px":null, height: clickedFromOrgTab ? "auto":null, minHeight: 843, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null, }}>
<div style={{ maxHeight: 1700, overflowY: "auto", width: '100%', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
<div style={{maxWidth: "calc(100% - 20px)"}}>
<Typography style={{ fontSize: 24, fontWeight: 'bold', display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, color: clickedFromOrgTab?"#ffffff":null }}>Notifications ({
<Typography variant="h5" style={{ color: "rgba(241, 241, 241, 1)", fontSize: 24, fontWeight: 600, textAlign: "left" }}>
Notification Workflow
</Typography>
<Typography style={{ color: "rgba(158, 158, 158, 1)", fontSize: 16, fontWeight: 400, marginTop: 5, }}>
The notification workflow triggers when an error occurs in one of your workflows. Each individual one will only start a workflow once every 2 minutes. <b>You can point child org notifications into the parent org notification by choosing it in the list.</b>
</Typography>
<div style={{ display: "flex", flexDirection: "row", alignItems: "center", }}>
{workflows !== undefined && workflows !== null && workflows.length > 0 ?
<Autocomplete
id="notification_workflow_search"
autoHighlight
open={openNotification}
onOpen={() => {
setOpenNotification(true);
}}
onClose={() => {
setOpenNotification(false);
}}
freeSolo
//autoSelect
value={workflows?.find(w => w.id === notificationWorkflow) || null}
classes={{ inputRoot: classes.inputRoot }}
ListboxProps={{
style: {
backgroundColor: "#212121",
color: "white",
},
}}
getOptionLabel={(option) => {
if (
option === undefined ||
option === null ||
option.name === undefined ||
option.name === null
) {
return "No Workflow Selected";
}
const newname = (
option.name.charAt(0).toUpperCase() + option.name.substring(1)
).replaceAll("_", " ");
return newname;
}}
options={workflows}
fullWidth
style={{
backgroundColor: "#212121",
borderRadius: theme.palette?.borderRadius,
height: 35,
marginBottom: 40,
}}
onChange={(event, newValue) => {
console.log("Found value: ", newValue)
var parsedinput = { target: { value: newValue } }
// For variables
if (typeof newValue === 'string' && newValue.startsWith("$")) {
parsedinput = {
target: {
value: {
"name": newValue,
"id": newValue,
"actions": [],
"triggers": [],
}
}
}
}
handleWorkflowSelectionUpdate(parsedinput)
}}
renderOption={(props, data, state) => {
if (data.id === workflow.id) {
data = workflow;
}
return (
<Tooltip arrow placement="right" title={
<span style={{}}>
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
<img src={data.image} alt={data.name} style={{ backgroundColor: theme.palette.surfaceColor, maxHeight: 200, minHeigth: 200, borderRadius: theme.palette?.borderRadius, }} />
: null}
<Typography>
Choose {data.name}
</Typography>
</span>
} placement="bottom">
<MenuItem
{...props}
style={{
// backgroundColor: theme.palette.inputColor,
color: data.id === workflow.id ? "red" : "white",
borderBottom: data.id === "parent" ? "2px solid rgba(255,255,255,0.5)" : null
}}
value={data}
onClick={(e) => {
props.onMouseDown?.(null);
var parsedinput = { target: { value: data } }
handleWorkflowSelectionUpdate(parsedinput)
}}
>
{data.name}
</MenuItem>
</Tooltip>
)
}}
renderInput={(params) => {
return (
<TextField
{...params}
style={{
backgroundColor: "rgba(33, 33, 33, 1)",
borderRadius: 4,
height: 35,
fontSize: 16,
marginTop: "16px"
}}
InputProps={{
...params.InputProps,
style: {
height: 35,
display: "flex",
alignItems: "center",
padding: "0px 8px",
fontSize: 16,
borderRadius: 4,
},
inputProps: {
...params.inputProps,
style: {
height: "100%",
boxSizing: "border-box",
}
}
}}
// label="Find a notification workflow"
variant="outlined"
placeholder="Select a notification workflow"
/>
);
}}
/>
:
<TextField
required
InputProps={{
style: {
height: 35,
display: "flex",
alignItems: "center",
padding: "0px 8px",
fontSize: 16,
borderRadius: 4,
},
inputProps: {
style: {
height: "100%",
boxSizing: "border-box",
}
}
}}
style={{
backgroundColor: "rgba(33, 33, 33, 1)",
borderRadius: 4,
height: 35,
fontSize: 16,
marginBottom: 30
}}
fullWidth={true}
type="name"
id="outlined-with-placeholder"
margin="normal"
variant="outlined"
placeholder="ID of the workflow to receive notifications"
value={notificationWorkflow}
onChange={(e) => {
setNotificationWorkflow(e.target.value);
}}
/>
}
{/* <div style={{ minWidth: 150, maxWidth: 150, marginTop: 5, marginLeft: 10, }}>
{orgSaveButton}
</div> */}
</div>
<Typography style={{marginTop: 50, fontSize: 24, fontWeight: 'bold', display: clickedFromOrgTab?null:"inline", marginBottom: clickedFromOrgTab? 8:null, color: clickedFromOrgTab?"#ffffff":null }}>Notifications ({
notifications?.filter((notification) => showRead === true || notification.read === false).length
})</Typography>
@@ -261,10 +575,12 @@ const Priorities = memo((props) => {
</Button>
) : null}
</div>
<NotificationComponent notifications={notifications} showRead={showRead} selectedExecutionId={selectedExecutionId} selectedWorkflow={selectedWorkflow} highlightKMS={highlightKMS} userdata={userdata} imagesize={imagesize} boxColor={boxColor} clickedFromOrgTab={clickedFromOrgTab} notificationWidth={notificationWidth} dismissNotification={dismissNotification}/>
{clickedFromOrgTab? null : <Divider style={{marginTop: 50, marginBottom: 50, }} />}
<h2 style={{ display: clickedFromOrgTab ? null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ? 30 :null, color: clickedFromOrgTab ? "#ffffff" : null }}>Suggestions</h2>
<h2 style={{ display: clickedFromOrgTab ? null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ? 60 : null, color: clickedFromOrgTab ? "#ffffff" : null }}>Suggestions</h2>
<span style={{ fontSize: 16, color: clickedFromOrgTab ?"#9E9E9E":null,marginLeft: clickedFromOrgTab ?null:25, }}>
Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. <br/>These range from simple configurations in Shuffle to Usecases you may have missed.&nbsp;
<a
frontend/src/components/ShuffleCodeEditor1.jsx
+3 -3
View File
@@ -90,8 +90,8 @@ const pythonFilters = [
{ "name": "Use files", "value": `# Create a sample file\nfiles = [{\n \"name\": \"test.txt\",\n \"data\": \"Testdata\"\n}]\nret = self.set_files(files)\n\n# Get the content of the file from Shuffle storage\n# Originally a byte string in the \"data\" key\nfile_content = (self.get_file(ret[0])[\"data\"]).decode()\nprint(file_content)`, "example": `` },
{ "name": "Use datastore", "value": `key = \"testkey\"\nvalue = \"The value of the testkey\"\n\nself.set_cache(key, value)\n\n# Print the details of the key after it's been updated\n# To get the value, use self.get_cache(key)[\"value\"]\nprint(self.get_cache(key))`, "example": `` },
{ "name": "Run an App Action", "value": `response = self.run_app(app_id="app", action="action_name", auth="authentication_id", params={})\nprint(response)`, "example": ``, "disabled": true, },
{ "name": "Run a Singul AI Action", "value": `response = self.create_ticket(app="jira/iris/ticketingsystem", fields={"title": "Test ticket!"})\nprint(response)`, "example": ``, "disabled": true, },
{ "name": "Run an App Action", "value": `response = shuffle.run_app(app_id="app", action="action_name", auth="authentication_id", params={})\nprint(response)`, "example": ``, "disabled": true, },
{ "name": "Run a Singul AI Action", "value": `response = singul.create_ticket(app="jira/iris/ticketingsystem", fields={"title": "Test ticket!"})\nprint(response)`, "example": ``, "disabled": true, },
]
@@ -1416,7 +1416,7 @@ const CodeEditor = (props) => {
return (
<MenuItem key={index} onClick={() => {
if (item.disabled) {
toast.error("This feature may not work in your environment yet, and is awaiting updates to the Shuffle python execution environment.", { autoClose: 10000 })
toast.error("This feature may not work in your environment until you update your Shuffle Tools app.", { autoClose: 10000 })
}
if (selectedAction.name !== "execute_python") {
frontend/src/components/WorkflowTemplatePopup2.jsx
+45 -22
View File
@@ -26,6 +26,7 @@ import {
Close as CloseIcon,
East as EastIcon,
Interests as InterestsIcon,
OpenInNew as OpenInNewIcon,
} from '@mui/icons-material';
import {
@@ -35,7 +36,8 @@ import {
grey,
} from "../views/AngularWorkflow.jsx"
import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup.jsx";
//import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup2.jsx";
import WorkflowTemplatePopup2 from "./WorkflowTemplatePopup2.jsx";
import ConfigureWorkflow from "../components/ConfigureWorkflow.jsx";
import WorkflowValidationTimeline from "../components/WorkflowValidationTimeline.jsx";
import FixWorkflowValidationErrors from "../components/FixWorkflowValidationErrors.jsx";
@@ -47,9 +49,11 @@ const WorkflowTemplatePopup = (props) => {
isModalOpenDefault,
setIsClicked,
inputWorkflowId,
inputWorkflow,
} = props;
const [isActive, setIsActive] = useState(workflowBuilt === true);
const [isActive, setIsActive] = useState(workflowBuilt === true || (workflowBuilt !== undefined && workflowBuilt !== null && workflowBuilt?.length > 0) || (inputWorkflow !== undefined && inputWorkflow !== null && inputWorkflow.id !== undefined && inputWorkflow.id !== null && inputWorkflow.id !== "") ? true : false)
const [isHovered, setIsHovered] = useState(false);
const [modalOpen, setModalOpen] = useState(isModalOpenDefault === true ? true : false)
const [errorMessage, setErrorMessage] = useState("");
@@ -65,7 +69,7 @@ const WorkflowTemplatePopup = (props) => {
const [showTryitOut, setShowTryitout] = React.useState(showTryit === true ? true : false)
const [loadingWorkflow, setLoadingWorkflow] = React.useState(false)
const [workflow, setWorkflow] = useState({});
const [workflow, setWorkflow] = useState(inputWorkflow !== undefined && inputWorkflow !== null && inputWorkflow.id !== undefined && inputWorkflow.id !== null && inputWorkflow.id !== "" ? inputWorkflow : {})
const [_, setUpdate] = useState(0)
const fetchWorkflow = (id) => {
@@ -455,7 +459,7 @@ const WorkflowTemplatePopup = (props) => {
//console.log("Error in workflow template: ", responseJson.error);
setRequestSent(false)
const defaultMessage = "Error: Failed to generate workflow the workflow - the Shuffle team has been notified. Contact support@shuffler.io if you want manual help building this usecase until the AI system is handled."
const defaultMessage = "Error: Failed to generate workflow the workflow - the Shuffle team has been notified. Contact support@shuffler.io if you want manual help building this usecase."
if (responseJson.reason !== undefined && responseJson.reason !== null && responseJson.reason !== "") {
setErrorMessage(defaultMessage + "\n\n" + responseJson.reason)
} else {
@@ -535,8 +539,8 @@ const WorkflowTemplatePopup = (props) => {
style: {
backgroundColor: "black",
color: "white",
minWidth: isHomePage ? null : isMobile ? 300 : 850,
maxWidth: isHomePage ? null : isMobile ? 300 : 850,
minWidth: isHomePage ? null : isMobile ? 300 : 750,
maxWidth: isHomePage ? null : isMobile ? 300 : 750,
paddingTop: isMobile ? null : 75,
itemAlign: "center",
},
@@ -564,7 +568,7 @@ const WorkflowTemplatePopup = (props) => {
{title === undefined || title === null || title === "" ? null :
<span>
<Typography variant="body2" color="textSecondary" style={{marginTop: 25, }}>
Selected Workflow:
Selected Usecase:
</Typography>
<div style={{marginBottom: 0, }} id="workflow-template">
<WorkflowTemplatePopup2
@@ -575,9 +579,10 @@ const WorkflowTemplatePopup = (props) => {
dstapp={dstapp}
title={title}
description={description}
visualOnly={true}
visualOnly={true}
workflowBuilt={workflowBuilt}
inputWorkflow={workflow}
shownColor={shownColor}
/>
@@ -585,7 +590,7 @@ const WorkflowTemplatePopup = (props) => {
</span>
}
<div style={{marginTop: 15, }}>
<div style={{marginTop: 0, }}>
{/* Fix the timeline when errors are fixed.. how? */}
<WorkflowValidationTimeline
workflow={workflow}
@@ -601,21 +606,23 @@ const WorkflowTemplatePopup = (props) => {
</div>
{workflowLoading === true ?
<div style={{marginTop: 75, textAlign: "center", }}>
<Typography variant="h4"> Generating the Workflow...
<div style={{marginTop: 60, textAlign: "center", }}>
<Typography variant="h4"> Generating Workflows...
</Typography>
<CircularProgress style={{marginLeft: 0, marginTop: 25, }}/>
</div>
:
<div>
{usecaseDetails === undefined ? null :
<Typography variant="h6" style={{marginTop: 75, }}>
{usecaseDetails === undefined || usecaseDetails === null || workflow.id !== undefined ? null :
<Typography variant="body1" style={{marginTop: 60, }} color="textSecondary">
{usecaseDetails?.description}
</Typography>
}
{errorMessage !== "" ?
<Typography variant="h6" style={{marginTop: 75, }}>
{errorMessage !== "" ? errorMessage : ""}
</Typography>
: null}
{showLoginButton ?
<Link to="/register?message=Please login to create workflows&view=usecases"
style={{
@@ -643,6 +650,7 @@ const WorkflowTemplatePopup = (props) => {
variant="outlined"
style={{
textTransform: "none",
marginTop: 15,
}}
onClick={() => {
//setWorkflowLoading(true)
@@ -730,11 +738,11 @@ const WorkflowTemplatePopup = (props) => {
const parsedDescription = description !== undefined && description !== null ? description.replaceAll("_", " ") : ""
const boxHeight = 104
const boxHeight = visualOnly ? 75 : 104
const highlightColor = shownColor !== undefined && shownColor !== null && shownColor !== "" ? shownColor : "#f85a3e"
var hasInterest = false
if (userdata.interests !== undefined && userdata.interests !== null && userdata.interests.length > 0) {
if (userdata?.interests !== undefined && userdata?.interests !== null && userdata?.interests?.length > 0) {
const comparisonTitle = title === undefined || title === null ? "" : title.trim().toLowerCase().replaceAll(" ", "_")
for (var interestkey in userdata.interests) {
if (userdata.interests[interestkey].name === undefined || userdata.interests[interestkey].name === null || userdata.interests[interestkey].name === "") {
@@ -742,12 +750,12 @@ const WorkflowTemplatePopup = (props) => {
}
if (modalOpen) {
console.log("COMPARE: ", userdata.interests[interestkey].name.trim().toLowerCase().replaceAll(" ", "_"), comparisonTitle)
//console.log("COMPARE: ", userdata.interests[interestkey].name.trim().toLowerCase().replaceAll(" ", "_"), comparisonTitle)
}
if (userdata.interests[interestkey].name.trim().toLowerCase().replaceAll(" ", "_") === comparisonTitle) {
if (modalOpen) {
console.log("FOUND: ", comparisonTitle)
//console.log("FOUND: ", comparisonTitle)
}
hasInterest = true
@@ -791,7 +799,16 @@ const WorkflowTemplatePopup = (props) => {
}}
onClick={() => {
if (visualOnly === true) {
console.log("Not showing more than visuals.")
console.log("Not showing more than visuals. Workflow built: ", workflowBuilt, workflow)
if (workflowBuilt !== undefined && workflowBuilt !== null && workflowBuilt?.length > 0) {
window.open("/workflows/" + workflowBuilt, "_blank")
} else if (workflow.id !== undefined && workflow.id !== null && workflow.id !== "") {
window.open("/workflows/" + workflow.id, "_blank")
} else {
toast("Click 'Try this usecase' to generate workflows for this usecase.")
}
return
}
@@ -822,7 +839,7 @@ const WorkflowTemplatePopup = (props) => {
: null}
<div style={{ display: "flex", itemAlign: "left", textAlign: "left", }}>
<div style={{display: "flex", flex: 1, marginLeft: 25, marginTop: showTryitOut && !isActive ? 14 : 30, }}>
<div style={{display: "flex", flex: 1, marginLeft: 25, marginTop: visualOnly ? 18 : showTryitOut && !isActive ? 14 : 30, }}>
<div style={{zIndex: 51}}>
{img1 !== undefined && img1 !== "" && srcapp !== undefined && srcapp !== "" ?
<Tooltip title={srcapp.replaceAll(":default", "").replaceAll("_", " ").replaceAll(" API", "")} placement="top">
@@ -849,7 +866,7 @@ const WorkflowTemplatePopup = (props) => {
}
</div>
<div style={{ marginLeft: 20, overflow: "hidden", maxHeight: 30, marginTop: showTryitOut && !isActive ? 8 : 23, }}>
<div style={{ marginLeft: 20, overflow: "hidden", maxHeight: 30, marginTop: visualOnly ? 12 : showTryitOut && !isActive ? 8 : 23, }}>
<Typography variant="body1" style={{ marginTop: parsedDescription.length === 0 ? 10 : 0, fontSize: isMobile ? 13 : 16, fontWeight: isHomePage ? 600 : null, textTransform: 'capitalize', color: isHomePage ? "var(--White-text, #F1F1F1)" : "rgba(241, 241, 241, 1)"}} >
<b>{parsedTitle}</b>
</Typography>
@@ -858,13 +875,19 @@ const WorkflowTemplatePopup = (props) => {
</div>
<div>
{isActive === true && errorMessage === "" ?
visualOnly === true ?
<Tooltip title="Open the workflow in a new tab" placement="top">
<OpenInNewIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", top: 22, right: 20, }} />
</Tooltip>
:
<Tooltip title="You already have workflows that are based on this usecase" placement="top">
<CheckIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", color: theme.palette.green, top: 10, right: 10, }} />
</Tooltip>
: ""}
{!isActive && hasInterest === true ?
{!isActive && hasInterest === true && !visualOnly ?
<Tooltip title="Your team has shown interest in this usecase previously." placement="top">
<InterestsIcon color="primary" sx={{ borderRadius: 4 }} style={{ position: "absolute", color: "rgba(254, 204, 0, 0.5)", top: 10, right: 10, }} />
</Tooltip>
@@ -872,7 +895,7 @@ const WorkflowTemplatePopup = (props) => {
</div>
{showTryitOut && !isActive ?
{showTryitOut && !isActive && !visualOnly ?
<Fade in={showTryitOut} timeout={300}>
<Button
variant="text"
frontend/src/components/WorkflowValidationTimeline.jsx
+18 -7
View File
@@ -287,7 +287,7 @@ const WorkflowValidationTimeline = (props) => {
var scheduleNotStarted = false
if (workflow.validation !== undefined && workflow.validation !== null && workflow.validation.validation_ran === false) {
console.log("Validation didn't run. Why?")
console.log("Validation didn't run or get set for workflow. Why?")
return null
}
@@ -367,10 +367,13 @@ const WorkflowValidationTimeline = (props) => {
action.result = foundResult
action.status = foundResult.status
} else {
action.status = "SUCCESS"
}
}
const lastitem = index === relevantactions.length - 1
if (!lastitem) {
if (action.app_name === "Shuffle Tools") {
if (action.status === "SUCCESS") {
@@ -386,9 +389,10 @@ const WorkflowValidationTimeline = (props) => {
nodecolor = grey
branchcolor = grey
}
} else {
nodecolor = green
branchcolor = green
}
} else if (action.status === "SKIPPED") {
branchcolor = grey
} else {
@@ -489,7 +493,7 @@ const WorkflowValidationTimeline = (props) => {
if (!showMiddle && relevantactions.length > 2 && index > 0 && index === relevantactions.length - 2) {
if (founderror.length > 0) {
middleError += founderror+"\n"
middleError += action.label+": "+founderror+"\n\n"
middleBranchColor = branchcolor
}
@@ -497,11 +501,18 @@ const WorkflowValidationTimeline = (props) => {
if (index === relevantactions.length-2 && relevantactions.length > 2) {
const selectedIcon = middleError.length > 0 ?
<Tooltip title={
<Tooltip
title={
<Typography variant="body1" style={{margin: 5, whiteSpace: "pre-line", }}>
{middleError}
</Typography>
}>
}
inputProps={{
paperProps: {
backgroundColor: "red",
}
}}
>
<IconButton style={{width: 30, height: 30, backgroundColor: "rgba(255,255,255,0.0)", borderRadius: 30, marginTop: 2, }}>
<ErrorOutlineIcon style={{color: "red", }} />
</IconButton>
@@ -517,7 +528,7 @@ const WorkflowValidationTimeline = (props) => {
// Returns for anything non-middle
if (relevantactions.length > 2 && index >= 1 && index < relevantactions.length - 2) {
if (founderror.length > 0) {
middleError += founderror+"\n"
middleError += action.label+": "+founderror+"\n\n"
}
return null
frontend/src/views/AngularWorkflow.jsx
+216 -169
View File
@@ -417,8 +417,8 @@ const AngularWorkflow = (defaultprops) => {
const [editWorkflowDetails, setEditWorkflowDetails] = React.useState(false);
const [workflow, setWorkflow] = React.useState({});
const [currentWorkflow, setCurrentWorkflow] = React.useState({}); // only for suborg distribution
const [originalWorkflow, setOriginalWorkflow] = React.useState({});
const [userSettings, setUserSettings] = React.useState({});
const [subworkflow, setSubworkflow] = React.useState({});
const [subworkflowStartnode, setSubworkflowStartnode] = React.useState("");
const [leftViewOpen, setLeftViewOpen] = React.useState(isMobile ? false : true);
@@ -1254,13 +1254,18 @@ const releaseToConnectLabel = "Release to Connect"
};
const getWorkflowExecutionCount = (workflowId) => {
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/workflows/${workflowId}/executions/count`, {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
headers: headers,
credentials: "include",
})
.then((response) => {
@@ -1282,12 +1287,18 @@ const releaseToConnectLabel = "Release to Connect"
};
const getAvailableWorkflows = (trigger_index) => {
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/workflows?subflow=true", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
headers: headers,
credentials: "include",
})
.then((response) => {
@@ -1312,13 +1323,13 @@ const releaseToConnectLabel = "Release to Connect"
// User Input & Subflow nodes
if (param.name === "workflow" || param.name === "subflow") {
const paramIndex = param.name === "workflow" ? 0 : 5
if (workflow.triggers[trigger_index].parameters[paramIndex].value !== subworkflow.id) {
if (param.value === workflow.id) {
if (workflow.triggers[trigger_index].parameters[paramIndex].value !== subworkflow?.id) {
if (param.value === workflow?.id) {
setSubworkflow(workflow);
baseSubflow = workflow
} else {
const sub = responseJson.find((data) => data.id === param.value);
if (sub !== undefined && subworkflow.id !== sub.id) {
const sub = responseJson.find((data) => data?.id === param.value);
if (sub !== undefined && subworkflow?.id !== sub?.id) {
baseSubflow = sub
setSubworkflow(sub);
}
@@ -1329,7 +1340,7 @@ const releaseToConnectLabel = "Release to Connect"
if (param.name === "startnode" && param.value !== undefined && param.value !== null) {
if (Object.getOwnPropertyNames(baseSubflow).length > 0) {
const foundAction = baseSubflow.actions.find(action => action.id === param.value)
const foundAction = baseSubflow.actions.find(action => action?.id === param.value)
if (foundAction !== null && foundAction !== undefined) {
setSubworkflowStartnode(foundAction);
}
@@ -1354,11 +1365,11 @@ const releaseToConnectLabel = "Release to Connect"
for (let paramkey in trigger.parameters) {
const param = trigger.parameters[paramkey]
if ((param.name === "workflow" || param.name === "subflow") && param.value === props.match.params.key && !parent_ids.includes(innerworkflow.id)) {
if ((param.name === "workflow" || param.name === "subflow") && param.value === props.match.params.key && !parent_ids.includes(innerworkflow?.id)) {
parent_ids.push(innerworkflow.id)
parent_ids.push(innerworkflow?.id)
parentworkflows.push({
id: innerworkflow.id,
id: innerworkflow?.id,
name: innerworkflow.name,
image: innerworkflow.image,
})
@@ -1369,7 +1380,7 @@ const releaseToConnectLabel = "Release to Connect"
}
if (parentworkflows.length > 0) {
setParentWorkflows(parentworkflows.filter(wf => wf.id !== props.match.params.key))
setParentWorkflows(parentworkflows.filter(wf => wf?.id !== props.match.params.key))
}
}
@@ -1404,65 +1415,6 @@ const releaseToConnectLabel = "Release to Connect"
);
}
const generateApikey = () => {
fetch(globalUrl + "/api/v1/generateapikey", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for APIKEY gen :O!");
}
return response.json();
})
.then((responseJson) => {
setUserSettings(responseJson);
})
.catch((error) => {
console.log("Apikey error: ", error);
});
};
const getSettings = () => {
fetch(globalUrl + "/api/v1/getsettings", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for get settings :O!");
}
return response.json();
})
.then((responseJson) => {
if (
responseJson.success === true &&
(responseJson.apikey === undefined ||
responseJson.apikey.length === 0 ||
responseJson.apikey === null)
) {
generateApikey();
}
if (responseJson.success === true) {
setUserSettings(responseJson)
}
})
.catch((error) => {
console.log("Settings error: ", error);
});
};
const setNewAppAuth = (appAuthData, refresh) => {
var headers = {
"Content-Type": "application/json",
@@ -1537,12 +1489,22 @@ const releaseToConnectLabel = "Release to Connect"
}
}
var formattedBody = {
method: method,
headers: {
let headers = {
"Content-Type": "application/json",
Accept: "application/json",
},
}
if (currentWorkflow?.id?.length > 0 && currentWorkflow?.id !== undefined && currentWorkflow?.id !== null) {
id = currentWorkflow.id;
}
if (currentWorkflow?.org_id?.length > 0 && currentWorkflow?.org_id !== undefined && currentWorkflow?.org_id !== null) {
headers["Org-Id"] = currentWorkflow.org_id;
}
var formattedBody = {
method: method,
headers: headers,
credentials: "include",
}
@@ -1653,12 +1615,18 @@ const releaseToConnectLabel = "Release to Connect"
};
const fetchUpdates = () => {
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/streams/results", {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
headers: headers,
body: JSON.stringify(executionRequest),
credentials: "include",
cors: "no-cors",
@@ -1689,13 +1657,19 @@ const releaseToConnectLabel = "Release to Connect"
const abortExecution = () => {
setExecutionRunning(false);
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/workflows/" + props.match.params.key + "/executions/" + executionRequest.execution_id + "/abort",
{
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
headers: headers,
credentials: "include",
}
)
@@ -2014,12 +1988,18 @@ const releaseToConnectLabel = "Release to Connect"
console.log("Error parsing body for stream: ", e)
}
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(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
headers: headers,
body: parsedbody,
credentials: "include",
})
@@ -2372,9 +2352,11 @@ const releaseToConnectLabel = "Release to Connect"
return;
}
if (!responseJson.success) {
setSavingState(0);
console.log(responseJson);
console.log("Workflow failed loading: ", responseJson);
if (responseJson.reason !== undefined && responseJson.reason !== null) {
toast("Failed to save: " + responseJson.reason);
} else {
@@ -2482,7 +2464,7 @@ const releaseToConnectLabel = "Release to Connect"
setTimeout(() => {
setSavingState(0);
}, 1500);
getRevisionHistory(useworkflow.id)
getRevisionHistory(useworkflow.id, 50, 0, useworkflow.org_id)
}
})
.catch((error) => {
@@ -2641,7 +2623,8 @@ const releaseToConnectLabel = "Release to Connect"
}
const data = { execution_argument: executionArgument, start: startNode };
fetch(`${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`,
// fetch(`${globalUrl}/api/v1/workflows/${props.match.params.key}/execute`,
fetch(`${globalUrl}/api/v1/workflows/${workflow.id}/execute`,
{
method: "POST",
headers: headers,
@@ -3820,7 +3803,8 @@ const releaseToConnectLabel = "Release to Connect"
if (responseJson.public) {
setAppAuthentication([])
console.log("RESP: ", responseJson)
setLeftBarSize(300)
if (Object.getOwnPropertyNames(creatorProfile).length === 0) {
//getUserProfile("frikky")
getUserProfile(responseJson.id, false)
@@ -3851,11 +3835,11 @@ const releaseToConnectLabel = "Release to Connect"
setTriggerGroup(appsFound)
setWorkflows([responseJson])
setCurrentWorkflow(responseJson)
} else {
getAppAuthentication();
getEnvironments(responseJson.org_id)
getSettings();
getFiles()
getWorkflowExecution(props.match.params.key, "");
getAvailableWorkflows(-1);
@@ -4007,7 +3991,9 @@ const releaseToConnectLabel = "Release to Connect"
decorator: true,
source_workflow: responseJson.id,
},
});
})
} else {
console.log("Node not found: ", target_id)
}
cy.fit(null, 400);
@@ -5819,7 +5805,6 @@ const releaseToConnectLabel = "Release to Connect"
setWorkflows([workflow])
} else {
getAvailableWorkflows(trigger_index);
getSettings();
}
} else if (data.app_name === "Webhook") {
if (workflow.triggers[trigger_index].parameters !== undefined && workflow.triggers[trigger_index].parameters !== null && workflow.triggers[trigger_index].parameters.length > 0) {
@@ -8388,9 +8373,8 @@ const releaseToConnectLabel = "Release to Connect"
const node = {};
node.position = trigger.position;
if (trigger.large_image === undefined || trigger.large_image === null || trigger.large_image.length === 0) {
// Search triggers array for it where the name is matching and set image
if (trigger.large_image === undefined || trigger.large_image === null || trigger.large_image.length === 0) {
var foundTrigger = triggers.find((t) => t.name === trigger.name)
if (foundTrigger !== undefined && foundTrigger !== null) {
console.log("Autofilled missing trigger image")
@@ -8403,6 +8387,60 @@ const releaseToConnectLabel = "Release to Connect"
node.data.id = trigger["id"];
node.data.type = "TRIGGER";
// Adds the correct branching for same-workflow trigger
if (trigger?.trigger_type === "SUBFLOW" && trigger?.parameters !== undefined && trigger?.parameters !== null && trigger?.parameters.length > 0) {
var foundTargetNode = ""
var sameWorkflow = false
for (var key in trigger.parameters) {
if (trigger.parameters[key].name === "workflow" && trigger.parameters[key].value === inputworkflow.id) {
sameWorkflow = true
}
if (trigger.parameters[key].name === "startnode" && trigger.parameters[key].value !== "") {
foundTargetNode = trigger.parameters[key].value
}
}
if (sameWorkflow && foundTargetNode !== "") {
const newid = uuidv4()
const newbranch = {
id: newid,
_id: newid,
source: trigger.id,
source_id: trigger.id,
target: foundTargetNode,
destination_id: foundTargetNode,
conditions: [],
has_errors: false,
decorator: true,
label: "Subflow",
}
if (inputworkflow.visual_branches !== undefined) {
if (inputworkflow.visual_branches === null) {
inputworkflow.visual_branches = [newbranch]
} else if (inputworkflow.visual_branches.length === 0) {
inputworkflow.visual_branches.push(newbranch)
} else {
const foundIndex = inputworkflow.visual_branches.findIndex(
(branch) => branch.source_id === newbranch.source_id
)
if (foundIndex !== -1) {
//console.log("Already found subflow branch")
} else {
inputworkflow.visual_branches.push(newbranch);
}
}
} else {
inputworkflow.visual_branches = [newbranch]
}
}
}
if (inputworkflow?.id !== undefined && originalWorkflow?.id !== undefined && inputworkflow?.id !== originalWorkflow?.id && originalWorkflow.triggers !== undefined && originalWorkflow.triggers !== null && originalWorkflow.triggers.length > 0) {
// Find the node in the original workflow
var inParent = false
@@ -8795,13 +8833,19 @@ const releaseToConnectLabel = "Release to Connect"
})
}
const getRevisionHistory = (workflow_id) => {
fetch(`${globalUrl}/api/v1/workflows/${workflow_id}/revisions`, {
method: "GET",
headers: {
const getRevisionHistory = (workflow_id, revisionCount = 50, turn = 0, orgId = "") => {
let headers = {
"Content-Type": "application/json",
Accept: "application/json",
},
}
if (orgId !== "") {
headers["Org-Id"] = orgId
}
fetch(`${globalUrl}/api/v1/workflows/${workflow_id}/revisions?count=${revisionCount}`, {
method: "GET",
headers: headers,
credentials: "include",
})
.then((response) => {
@@ -8828,7 +8872,11 @@ const releaseToConnectLabel = "Release to Connect"
setSelectedVersion(responseJson[0])
})
.catch((error) => {
console.log("Error getting workflow revisions: ", error)
console.log("Error getting workflow revisions: ", error);
++turn;
if (turn < 2) {
getRevisionHistory(workflow_id, 5, turn, orgId);
}
});
}
@@ -9132,7 +9180,8 @@ const releaseToConnectLabel = "Release to Connect"
trigger.parameters.push({
name: data.name,
value: data.command,
});}
});
}
if (data.type === "stop") trigger.status = "stopped";
else trigger.status = "running";
@@ -13324,7 +13373,8 @@ const releaseToConnectLabel = "Release to Connect"
)}
</select>
</div>
)})}
)
})}
</div>
);
};
@@ -13371,23 +13421,6 @@ const releaseToConnectLabel = "Release to Connect"
value: "",
};
/*
// API-key has been replaced by auth key for the execution.
// Parents can now automatically execute children without auth from a user, as long as the subflow in question is owned by the same org and the subflow is actually referencing it during checkin.
console.log("SETTINGS: ", userSettings);
if (
userSettings !== undefined &&
userSettings !== null &&
userSettings.apikey !== null &&
userSettings.apikey !== undefined &&
userSettings.apikey.length > 0
) {
workflow.triggers[selectedTriggerIndex].parameters[2] = {
name: "user_apikey",
value: userSettings.apikey,
};
}
*/
}
var handleSubflowStartnodeSelection = (e) => {
@@ -13419,6 +13452,7 @@ const releaseToConnectLabel = "Release to Connect"
const foundIndex = workflow.visual_branches.findIndex(
(branch) => branch.source_id === newbranch.source_id
);
if (foundIndex !== -1) {
const currentEdge = cy.getElementById(
workflow.visual_branches[foundIndex].id
@@ -13515,6 +13549,9 @@ const releaseToConnectLabel = "Release to Connect"
},
{
name: "Enrich",
},
{
name: "Ticket Creation",
}
]
@@ -13543,7 +13580,7 @@ const releaseToConnectLabel = "Release to Connect"
<h3 style={{ marginBottom: "5px", flex: 3, }}>
{selectedTrigger.app_name}
</h3>
<Tooltip title="Choose the type of subflow to run. This is NOT required, but is used to help Shuffle's workflow generators better understand the workflow." placement="top">
<Tooltip placement="left">
<Select
MenuProps={{
disableScrollLock: true,
@@ -13642,7 +13679,7 @@ const releaseToConnectLabel = "Release to Connect"
<div style={{ flex: 1, marginLeft: 5, }}>
<Tooltip
color="primary"
title={"Delay before action runs (in seconds)"}
title={"Delay before subflow runs (in seconds)"}
placement="top"
>
<span>
@@ -13787,7 +13824,6 @@ const releaseToConnectLabel = "Release to Connect"
fullWidth
style={{
backgroundColor: theme.palette.inputColor,
height: 50,
borderRadius: theme.palette?.borderRadius,
}}
onChange={(event, newValue) => {
@@ -13920,7 +13956,6 @@ const releaseToConnectLabel = "Release to Connect"
fullWidth
style={{
backgroundColor: theme.palette.inputColor,
height: 50,
borderRadius: theme.palette?.borderRadius,
}}
onChange={(event, newValue) => {
@@ -14791,12 +14826,10 @@ const releaseToConnectLabel = "Release to Connect"
fullWidth
style={{
backgroundColor: theme.palette.inputColor,
height: 50,
borderRadius: theme.palette?.borderRadius,
}}
onChange={(event, newValue) => {
// Workaround with event lol
console.log("CHANGE: ", event, newValue)
if (newValue !== undefined && newValue !== null) {
var parsedvalue = JSON.parse(JSON.stringify(newValue))
parsedvalue.actions = []
@@ -14864,7 +14897,7 @@ const releaseToConnectLabel = "Release to Connect"
variant="body1"
style={theme.palette.textFieldStyle}
{...params}
label="Find Associated App (optional)"
label="Associated App (optional)"
variant="outlined"
/>
);
@@ -14873,6 +14906,7 @@ const releaseToConnectLabel = "Release to Connect"
</div>
: null}
{selectedTrigger.status === "running" ? null :
<div style={{ marginTop: 20 }}>
<Typography>Environment</Typography>
@@ -15686,7 +15720,8 @@ const releaseToConnectLabel = "Release to Connect"
handleWorkflowSelectionUpdate({
target: {
value: data,
}},
}
},
true)
document.activeElement.blur();
}}
@@ -15876,7 +15911,8 @@ const releaseToConnectLabel = "Release to Connect"
if (selectedTrigger.trigger_type === "PIPELINE" && selectedTrigger.environment === "onprem" && defaultEnvironment !== undefined) {
selectedTrigger.environment = defaultEnvironment.Name
setSelectedTrigger(selectedTrigger) }
setSelectedTrigger(selectedTrigger)
}
const PipelineSidebar = !selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || !workflow?.triggers[selectedTriggerIndex] || !selectedTrigger.trigger_type || selectedTrigger.trigger_type !== "SCHEDULE" ? null :
<div style={appApiViewStyle}>
@@ -17388,6 +17424,10 @@ const releaseToConnectLabel = "Release to Connect"
return null
}
if (workflow.public === true) {
return null
}
return (
<div
style={{
@@ -17427,14 +17467,17 @@ const releaseToConnectLabel = "Release to Connect"
// Used for handling suborg workflow distribution management
const updateCurrentWorkflow = (inputworkflow) => {
setCurrentWorkflow(inputworkflow)
//setLastSaved(false)
setSelectedAction({});
setSelectedApp({})
setWorkflow(inputworkflow)
if (inputworkflow !== undefined && inputworkflow !== null && inputworkflow.id !== undefined && inputworkflow.id !== null) {
getRevisionHistory(inputworkflow.id)
getWorkflowExecution(inputworkflow.id)
getRevisionHistory(inputworkflow.id, 50, 0, inputworkflow.org_id)
getWorkflowExecution(inputworkflow.id, "", "")
}
// Update props match key
@@ -18228,11 +18271,10 @@ const releaseToConnectLabel = "Release to Connect"
setUserediting(true)
setWorkflow(workflow)
getAppAuthentication();
getAppAuthentication()
getEnvironments(workflow.org_id)
getWorkflowExecution(props.match.params.key, "");
getAvailableWorkflows(-1);
getSettings();
getWorkflowExecution(props.match.params.key, "")
getAvailableWorkflows(-1)
getFiles()
// For loading datastore
@@ -18990,7 +19032,8 @@ const releaseToConnectLabel = "Release to Connect"
variant="outlined"
fullWidth
onClick={() => {
getWorkflowExecution(props.match.params.key, "", executionFilter)
getWorkflowExecution(props.match.params.key, "", executionFilter);
}}
color="secondary"
>
@@ -19232,6 +19275,7 @@ const releaseToConnectLabel = "Release to Connect"
marginLeft: 10,
marginTop: "auto",
marginBottom: "auto",
color: "rgba(255,255,255,0.5)",
}}
>
{successActions} <span style={{ color: "rgba(255,255,255,0.4)" }}>+</span> {skippedActions > 0 ? skippedActions : <span style={{ color: "rgba(255,255,255,0.4)" }}>{skippedActions}</span>} <span style={{ color: "rgba(255,255,255,0.4)" }}>=</span> {calculatedResult}
@@ -19315,6 +19359,7 @@ const releaseToConnectLabel = "Release to Connect"
onClick={() => {
setExecutionRunning(false);
stop();
// getWorkflowExecution(currentWorkflow.id, "");
getWorkflowExecution(props.match.params.key, "");
setExecutionModalView(0);
setLastExecution(executionData.execution_id);
@@ -19536,31 +19581,6 @@ const releaseToConnectLabel = "Release to Connect"
</div>
{executionData.workflow !== undefined && executionData.workflow !== null && executionData.workflow.actions !== undefined && executionData.workflow.actions !== null && executionData.workflow.actions.length > 0 ?
<div style={{ display: "flex", marginLeft: 10, }}>
<Typography variant="body1">
{/*envStatus === "success" ?
<Tooltip title="Environment is healthy" placement="top">
<CheckCircleIcon style={{ color: "green" }} />
</Tooltip>
: envStatus === "failure" ?
<Tooltip title="Environment is unhealthy" placement="top">
<ErrorIcon style={{ color: "red" }} />
</Tooltip>
: null*/}
<b style={{ }}>Env &nbsp;&nbsp;&nbsp;&nbsp;</b>
</Typography>
<Typography variant="body1" color="textSecondary" style={{color: "#FF8544", cursor: "pointer", }} onClick={() => {
window.open("/admin?tab=locations", "_blank")
}}>
{executionData.workflow.actions[0].environment}
</Typography>
</div>
: null}
{executionData.status !== undefined &&
executionData.status.length > 0 ? (
<div style={{ display: "flex", marginLeft: 10, }}>
@@ -19661,6 +19681,32 @@ const releaseToConnectLabel = "Release to Connect"
) : null}
{executionData.workflow !== undefined && executionData.workflow !== null && executionData.workflow.actions !== undefined && executionData.workflow.actions !== null && executionData.workflow.actions.length > 0 ?
<div style={{ display: "flex", marginLeft: 10, }}>
<Typography variant="body1">
{/*envStatus === "success" ?
<Tooltip title="Environment is healthy" placement="top">
<CheckCircleIcon style={{ color: "green" }} />
</Tooltip>
: envStatus === "failure" ?
<Tooltip title="Environment is unhealthy" placement="top">
<ErrorIcon style={{ color: "red" }} />
</Tooltip>
: null*/}
<b style={{}}>Location &nbsp;</b>
</Typography>
<Typography variant="body1" color="textSecondary" style={{ color: "#FF8544", cursor: "pointer", }} onClick={() => {
window.open("/admin?tab=locations", "_blank")
}}>
{executionData.workflow.actions[0].environment}
</Typography>
</div>
: null}
{userdata.support === true && executionData.workflow !== undefined && executionData.workflow !== null && executionData.status !== "EXECUTING" ?
<div style={{ marginTop: 5, marginBottom: 5, }}>
<WorkflowValidationTimeline
@@ -22291,7 +22337,8 @@ const releaseToConnectLabel = "Release to Connect"
return (
<Paper
style={{padding: "15px 15px 15px 25px", minHeight: 105, maxHeight: 105, cursor: "pointer", backgroundColor: newrevision.edited === selectedVersion.edited ? "rgba(255,255,255,0.3)" : theme.palette.surfaceColor, border: showBorder === true ? `1px solid ${green}` : "1px solid rgba(255,255,255,0.3)", marginBottom: 10,
style={{
padding: "15px 15px 15px 25px", minHeight: 105, maxHeight: 105, cursor: "pointer", backgroundColor: newrevision.edited === selectedVersion.edited ? "rgba(255,255,255,0.3)" : theme.palette.surfaceColor, border: showBorder === true ? `1px solid ${green}` : "1px solid rgba(255,255,255,0.3)", marginBottom: 10,
}} onClick={(e) => {
setRightSideBarOpen(false)
if (newrevision.edited === selectedVersion.edited) {
frontend/src/views/AppCreator.jsx
+4 -2
View File
@@ -5435,6 +5435,7 @@ const AppCreator = (defaultprops) => {
minWidth: 174,
minHeight: 174,
objectFit: "contain",
borderRadius: theme.palette?.borderRadius,
}}
/>
);
@@ -5450,6 +5451,7 @@ const AppCreator = (defaultprops) => {
margin: "auto",
marginTop: 30,
marginLeft: 40,
borderRadius: theme.palette?.borderRadius,
}}
onClick={() => {
upload.click();
@@ -5832,6 +5834,7 @@ const AppCreator = (defaultprops) => {
//setOpenApiModal(true)
toast.info("Action merging & fork management coming soon")
}}
disabled={true}
style={{marginLeft: 10, }}
>
<CallMergeIcon
@@ -5846,7 +5849,7 @@ const AppCreator = (defaultprops) => {
href="https://shuffler.io/docs/app_creation#app-creator-instructions"
style={{ textDecoration: "none", color: "#f85a3e" }}
>
Click here to learn more about app creation
Click to learn more about app creation
</a>
<div
style={{
@@ -5940,7 +5943,6 @@ const AppCreator = (defaultprops) => {
<TextField
required
style={{
paddingTop: 5,
marginTop: 5,
marginRight: 15,
backgroundColor: inputColor,
frontend/src/views/Apps.jsx
-1
View File
@@ -1258,7 +1258,6 @@ const Apps = (props) => {
style={{
width: 150,
backgroundColor: theme.palette.surfaceColor,
backgroundColor: inputColor,
color: "white",
height: 35,
marginleft: 10,
frontend/src/views/Apps2.jsx
+1
View File
@@ -1853,6 +1853,7 @@ const Apps2 = (props) => {
app={selectedApp}
userdata={userdata}
globalUrl={globalUrl}
getApps={getApps}
/>
<AppCreationModal
open={createAppModalOpen}
frontend/src/views/RunWorkflow.jsx
+1 -1
View File
@@ -1642,7 +1642,7 @@ const RunWorkflow = (defaultprops) => {
maxHeight: 500,
position: "absolute",
left: 150,
top: 0,
top: 75,
border: "1px solid rgba(255,255,255,0.3)",
borderRadius: theme.palette?.borderRadius,
frontend/src/views/Usecases2.jsx
+3 -2
View File
@@ -621,7 +621,7 @@ const UsecaseListComponent = (props) => {
parsedUsecase.dstapp = newsubcase.dstapp
var workflowBuilt = false
var workflowBuilt = ""
const newname = subcase.name.toLowerCase().replaceAll(" ", "_")
for (var workflowkey in workflows) {
const workflow = workflows[workflowkey]
@@ -635,7 +635,7 @@ const UsecaseListComponent = (props) => {
//console.log("WORKFLOW: ", newname, newusecases)
if (newusecases.includes(newname)) {
workflowBuilt = true
workflowBuilt = workflow.id
break
}
}
@@ -676,6 +676,7 @@ const UsecaseListComponent = (props) => {
showTryit={false}
shownColor={""}
workflowBuilt={workflowBuilt}
inputWorkflowId={workflowBuilt}
usecaseDetails={usecaseDetails}
/>
frontend/src/views/Workflows2.jsx
+32 -8
View File
@@ -92,6 +92,7 @@ import {
ArrowRight as ArrowRightIcon,
Visibility as VisibilityIcon,
EditNote as EditNoteIcon,
ErrorOutline as ErrorOutlineIcon,
} from "@mui/icons-material";
// Additional Components
@@ -108,6 +109,8 @@ import { InstantSearch, Configure, connectHits, connectSearchBox, connectRefinem
import { debounce } from "lodash";
import { removeQuery } from "../components/ScrollToTop.jsx";
import {green, yellow, red, grey } from "../views/AngularWorkflow.jsx"
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240");
@@ -1114,12 +1117,9 @@ const Workflows2 = (props) => {
<Button
style={{}}
onClick={() => {
console.log("Editing: ", editingWorkflow);
if (selectedWorkflowId) {
deleteWorkflow(selectedWorkflowId)
setTimeout(() => {
getAvailableWorkflows();
}, 1000);
} else if (selectedWorkflowIndexes.length > 0) {
// Do backwards so it doesn't change
toast("Starting deletion of workflows. This might take a while.")
@@ -1132,11 +1132,11 @@ const Workflows2 = (props) => {
setTimeout(() => {
getAvailableWorkflows()
}, 1000);
}, 5000)
setSelectedWorkflowIndexes([]);
}
setDeleteModalOpen(false);
setDeleteModalOpen(false)
}}
color="primary"
>
@@ -2807,6 +2807,7 @@ const Workflows2 = (props) => {
{workflowMenuButtons}
</div>
) : null}
{(data.sharing !== undefined && data.sharing !== null && data.sharing === "form") || (data?.form_control?.input_markdown !== undefined && data?.form_control?.input_markdown !== null && data?.form_control?.input_markdown !== "") && type !== "public" ?
<Tooltip title="Edit Form" placement="top">
<div style={{ position: "absolute", top: 45, right: 8, }}>
@@ -2821,10 +2822,33 @@ const Workflows2 = (props) => {
>
<EditNoteIcon />
</IconButton>
{workflowMenuButtons}
</div>
</Tooltip>
: null}
{(data?.validation?.validation_ran === true && data?.validation?.valid === false && data?.validation?.errors?.length > 0 ) ?
<Tooltip title={`Explore more than ${data?.validation?.errors?.length} errors. When the last execution finishes without errors AND notifications stop occuring, this icon disappears.`} placement="top">
<div style={{ position: "absolute", top: 45, right: 8, }}>
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={() => {
window.open(`/admin?admin_tab=notifications&workflow_id=${data.id}`, "_blank")
}}
style={{
padding: "0px",
color: "#979797",
}}
>
<ErrorOutlineIcon style={{
marginRight: 2,
}} />
</IconButton>
</div>
</Tooltip>
: null}
</Grid>
</Paper>
</div>