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

Fixed most of the muiV5 / react 18 version problems

Browse Source
This commit is contained in:
Frikky
2023-07-13 22:58:51 +02:00
parent b9a25ee537
commit 2fec45b47e
10 changed files with 109 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/app_sdk/app_base.py
+11 -10
View File
@@ -3556,15 +3556,15 @@ class AppBase:
if "the JSON object must be" in errorstring:
self.logger.info("[ERROR] Something is wrong with the input for this function. Are lists and JSON data handled parsed properly (0)? the JSON object must be in...")
try:
e = json.loads(f"{e}")
except:
e = f"{e}"
#try:
# e = json.loads(f"{e}")
#except:
# e = f"{e}"
newres = json.dumps({
"success": False,
"reason": "An exception occurred while running this function (1). See exception for more details and contact support if this persists (support@shuffler.io)",
"exception": e,
"exception": f"{type(e).__name__} - {e}",
})
break
elif "got an unexpected keyword argument" in errorstring:
@@ -3587,15 +3587,16 @@ class AppBase:
except Exception as e:
self.logger.info(f"[ERROR] Something is wrong with the input for this function. Are lists and JSON data handled parsed properly (1)? err: {e}")
try:
e = json.loads(f"{e}")
except:
e = f"{e}"
#try:
# e = json.loads(f"{e}")
#except:
# e = f"{e}"
newres = json.dumps({
"success": False,
"reason": "An exception occurred while running this function (2). See exception for more details and contact support if this persists (support@shuffler.io)",
"exception": e,
"exception": f"{type(e).__name__} - {e}",
})
break
frontend/package.json
+1 -4
View File
@@ -36,8 +36,6 @@
"jss-nested": "^6.0.1",
"jss-props-sort": "^6.0.0",
"jss-vendor-prefixer": "^8.0.1",
"material-icons": "^0.7.7",
"material-icons-react": "^1.0.4",
"material-ui-chip-input": "^2.0.0-beta.2",
"md5-file": "^4.0.0",
"mdbreact": "^4.21.1",
@@ -60,13 +58,12 @@
"react-driftjs": "^1.2.2",
"react-dropzone": "^14.2.3",
"react-ga4": "^2.0.0",
"react-iframe": "^1.8.0",
"react-instantsearch-dom": "^6.28.0",
"react-json-pretty": "^2.2.0",
"react-json-view": "^1.21.3",
"react-markdown": "^8.0.7",
"react-markdown-github": "^3.3.1",
"react-powerhooks": "0.0.7",
"react-powerhooks": "^0.0.7",
"react-router": "^6.14.1",
"react-router-dom": "^6.14.1",
"react-scripts": "^5.0.1",
frontend/src/components/Header.jsx
+4 -12
View File
@@ -688,7 +688,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
{/*
<PolymerIcon style={{marginRight: "5px"}} />
*/}
<Typography style={{marginTop: 0, marginRight: 8, }}>Workflows</Typography>
<Typography style={{marginTop: 5, marginRight: 8, }}>Workflows</Typography>
</div>
</Link>
</ListItem>
@@ -698,24 +698,17 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
{/*
<AppsIcon style={{marginRight: "5px"}} />
*/}
<Typography style={{marginTop: 0, marginRight: 5, }}>Apps</Typography>
<Typography style={{marginTop: 5, marginRight: 5, }}>Apps</Typography>
</div>
</Link>
</ListItem>
{/*
<ListItem style={{textAlign: "center"}}>
<Link to="/dashboard" style={hrefStyle}>
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div>
</Link>
</ListItem>
*/}
<ListItem style={listItemStyle}>
<Link to="/docs" style={hrefStyle}>
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
{/*
<DescriptionIcon style={{marginRight: "5px"}} />
*/}
<Typography style={{marginTop: 0,}}>Docs</Typography>
<Typography style={{marginTop: 5,}}>Docs</Typography>
</div>
</Link>
</ListItem>
@@ -796,8 +789,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
:
<span style={{paddingTop: 12, }}>
<Select
disableUnderline
disableunderline
SelectDisplayProps={{
style: {
maxWidth: 50,
frontend/src/components/OrgHeader.jsx
+11 -6
View File
@@ -2,13 +2,16 @@ import React, { useEffect } from "react";
import theme from '../theme.jsx';
import { makeStyles } from "@mui/styles";
import Tooltip from "@material-ui/core/Tooltip";
import Grid from "@material-ui/core/Grid";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import Typography from "@material-ui/core/Typography";
import {
Tooltip,
Grid,
Button,
TextField,
Typography,
IconButton,
} from "@mui/material";
import { useAlert } from "react-alert";
import IconButton from "@material-ui/core/IconButton";
import {
ExpandLess as ExpandLessIcon,
@@ -98,6 +101,7 @@ const OrgHeader = (props) => {
//console.log("USER: ", userdata)
const orgSaveButton = (
<Tooltip title="Save any unsaved data" placement="bottom">
<div>
<Button
style={{ width: 150, height: 55, flex: 1 }}
variant="contained"
@@ -119,6 +123,7 @@ const OrgHeader = (props) => {
>
<SaveIcon />
</Button>
</div>
</Tooltip>
);
frontend/src/components/OrgHeaderexpanded.jsx
+2
View File
@@ -201,6 +201,7 @@ const OrgHeaderexpanded = (props) => {
const orgSaveButton = (
<Tooltip title="Save any unsaved data" placement="bottom">
<div>
<Button
style={{ width: 150, height: 55, flex: 1 }}
variant="contained"
@@ -237,6 +238,7 @@ const OrgHeaderexpanded = (props) => {
>
<SaveIcon />
</Button>
</div>
</Tooltip>
);
frontend/src/components/ScrollToTop.jsx
+1 -1
View File
@@ -9,7 +9,7 @@ function ScrollToTop({ getUserNotifications, curpath, setCurpath, history }) {
useEffect(() => {
// Custom handler for certain scroll mechanics
//
console.log("OLD: ", curpath, "NeW: ", window.location.pathname)
//console.log("OLD: ", curpath, "NeW: ", window.location.pathname)
if (curpath === window.location.pathname && curpath === "/usecases") {
} else {
frontend/src/index.js
+2 -2
View File
@@ -8,9 +8,9 @@ import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<React.StrictMode>
<React.Fragment>
<App />
</React.StrictMode>
</React.Fragment>
);
//reportWebVitals();
frontend/src/views/Admin.jsx
+25 -182
View File
@@ -1,14 +1,9 @@
import React, { useState, useEffect } from "react";
import { makeStyles } from "@mui/styles";
import { useNavigate, Link } from "react-router-dom";
import countries from "../components/Countries.jsx";
import CodeEditor from "../components/ShuffleCodeEditor.jsx";
import getLocalCodeData from "../components/ShuffleCodeEditor.jsx";
import { useNavigate, } from "react-router-dom";
import CacheView from "../components/CacheView.jsx";
import theme from "../theme.jsx";
//import ToggleButton from '@mui/material/ToggleButton';
import {
FormControl,
InputLabel,
@@ -17,7 +12,6 @@ import {
Checkbox,
Card,
Tooltip,
FormControlLabel,
Typography,
Switch,
Select,
@@ -33,7 +27,6 @@ import {
ListItem,
ListItemText,
ListItemAvatar,
ListItemSecondaryAction,
IconButton,
Avatar,
Zoom,
@@ -42,56 +35,38 @@ import {
DialogActions,
DialogContent,
CircularProgress,
Box,
InputAdornment,
InputAdornment,
} from "@mui/material";
import { Autocomplete } from "@mui/material";
import {
Edit as EditIcon,
FileCopy as FileCopyIcon,
SelectAll as SelectAllIcon,
OpenInNew as OpenInNewIcon,
CloudDownload as CloudDownloadIcon,
Description as DescriptionIcon,
Code as CodeIcon,
CheckCircle as CheckCircleIcon,
Close as CloseIcon,
Apps as AppsIcon,
Image as ImageIcon,
Delete as DeleteIcon,
Cached as CachedIcon,
AccessibilityNew as AccessibilityNewIcon,
Lock as LockIcon,
Schedule as ScheduleIcon,
Cloud as CloudIcon,
Business as BusinessIcon,
Visibility as VisibilityIcon,
VisibilityOff as VisibilityOffIcon,
Add as AddIcon,
Clear as ClearIcon,
Storage as StorageIcon,
} from "@mui/icons-material";
import { useAlert } from "react-alert";
import Dropzone from "../components/Dropzone.jsx";
import HandlePaymentNew from "../views/HandlePaymentNew.jsx";
import OrgHeader from "../components/OrgHeader.jsx";
import OrgHeaderexpanded from "../components/OrgHeaderexpanded.jsx";
import Billing from "../components/Billing.jsx";
import Priorities from "../components/Priorities.jsx";
import Branding from "../components/Branding.jsx";
import Files from "../components/Files.jsx";
import { display, style } from "@mui/system";
//import EnvironmentStats from "../components/EnvironmentStats.jsx";
const useStyles = makeStyles({
notchedOutline: {
borderColor: "#f85a3e !important",
},
});
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
@@ -104,37 +79,10 @@ const MenuProps = {
getContentAnchorEl: () => null,
};
const FileCategoryInput = (props) => {
const isSet = props.isSet;
console.log("inside filecategoryinput");
console.log("isset value" , isSet);
if (isSet){
return (
<TextField
onBlur={""}
InputProps={{
style: {
color: "white",
},
}}
color="primary"
placeholder="File category name"
required
margin="dense"
defaultValue={""}
autoFocus
fullWidth
/>
)}
}
const Admin = (props) => {
const { globalUrl, userdata, serverside, checkLogin } = props;
var to_be_copied = "";
const classes = useStyles();
let navigate = useNavigate();
const [firstRequest, setFirstRequest] = React.useState(true);
@@ -150,11 +98,9 @@ const Admin = (props) => {
const [selectedOrganization, setSelectedOrganization] = React.useState({});
//console.log("Selected: ", selectedOrganization)
const [organizationFeatures, setOrganizationFeatures] = React.useState({});
const [loginInfo, setLoginInfo] = React.useState("");
const [curTab, setCurTab] = React.useState(0);
const [users, setUsers] = React.useState([]);
const [organizations, setOrganizations] = React.useState([]);
const [orgSyncResponse, setOrgSyncResponse] = React.useState("");
const [userSettings, setUserSettings] = React.useState({});
const [matchingOrganizations, setMatchingOrganizations] = React.useState([]);
@@ -170,30 +116,21 @@ const Admin = (props) => {
const [selectedAuthenticationModalOpen, setSelectedAuthenticationModalOpen] = React.useState(false);
const [authenticationFields, setAuthenticationFields] = React.useState([]);
const [showArchived, setShowArchived] = React.useState(false);
const [isDropzone, setIsDropzone] = React.useState(false);
const [image2FA, setImage2FA] = React.useState("");
const [value2FA, setValue2FA] = React.useState("");
const [secret2FA, setSecret2FA] = React.useState("");
const [show2faSetup, setShow2faSetup] = useState(false);
const [billingInfo, ] = React.useState({});
const [adminTab, setAdminTab] = React.useState(2);
const [showApiKey, setShowApiKey] = useState(false);
const [billingInfo, setBillingInfo] = React.useState({});
const [selectedStatus, setSelectedStatus] = React.useState([]);
const [showApiKey, setShowApiKey] = useState(false);
const [selectedStatus, setSelectedStatus] = React.useState([]);
useEffect(() => {
getUsers()
getUsers()
}, []);
useEffect(() => {
if (isDropzone) {
//redirectOpenApi();
setIsDropzone(false);
}
}, [isDropzone]);
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const get2faCode = (userId) => {
@@ -225,39 +162,7 @@ const Admin = (props) => {
});
};
const getApps = () => {
fetch(globalUrl + "/api/v1/apps", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for apps :O!");
}
return response.json();
})
.then((responseJson) => {
console.log("apps: ", responseJson);
//setApps(responseJson)
//setFilteredApps(responseJson)
//if (responseJson.length > 0) {
// setSelectedApp(responseJson[0])
// if (responseJson[0].actions !== null && responseJson[0].actions.length > 0) {
// setSelectedAction(responseJson[0].actions[0])
// } else {
// setSelectedAction({})
// }
//}
})
.catch((error) => {
alert.error(error.toString());
});
};
const categories = [
{
@@ -673,7 +578,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
} else if (!responseJson.success) {
alert.error("Failed to handle sync.");
} else {
getOrgs();
if (disableSync) {
alert.success("Successfully disabled sync!");
setOrgSyncResponse("Successfully disabled syncronization");
@@ -1000,18 +904,18 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
}
setSelectedOrganization(responseJson)
var lists = {
active: {
triggers: [],
features: [],
sync: [],
},
inactive: {
triggers: [],
features: [],
sync: [],
},
};
//var lists = {
// active: {
// triggers: [],
// features: [],
// sync: [],
// },
// inactive: {
// triggers: [],
// features: [],
// sync: [],
// },
//};
// FIXME: Set up features
//Object.keys(responseJson.sync_features).map(function(key, index) {
@@ -1020,7 +924,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
//setOrgName(responseJson.name)
//setOrgDescription(responseJson.description)
setOrganizationFeatures(lists);
//setOrganizationFeatures(lists);
}
})
.catch((error) => {
@@ -1113,7 +1017,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
alert.info("Setting default env to " + environment.name);
var newEnv = [];
for (var key in environments) {
if (environments[key].id == environment.id) {
if (environments[key].id === environment.id) {
if (environments[key].archived) {
alert.error("Can't set archived to default");
return;
@@ -1121,7 +1025,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
environments[key].default = true;
} else if (
environments[key].default == true &&
environments[key].default === true &&
environments[key].id !== environment.id
) {
environments[key].default = false;
@@ -1161,33 +1065,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
});
};
const flushQueue = (name) => {
// Just use this one?
const url = globalUrl + "/api/v1/flush_queue";
fetch(url, {
method: "DELETE",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
})
.then((response) =>
response.json().then((responseJson) => {
if (responseJson["success"] === false) {
alert.error(responseJson.reason);
getEnvironments();
} else {
setLoginInfo("");
setModalOpen(false);
getEnvironments();
}
})
)
.catch((error) => {
console.log("Error when deleting: ", error);
});
};
const rerunCloudWorkflows = (environment) => {
alert.info("Starting execution reruns. This can run in the background.")
fetch(
@@ -1277,7 +1154,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
//alert.info("Modifying environment " + environment.Name)
var newEnv = [];
for (var key in environments) {
if (environments[key].id == id) {
if (environments[key].id === id) {
if (environments[key].default) {
alert.error("Can't modify the default environment");
return;
@@ -1356,9 +1233,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
});
};
var localData = "";
const getSchedules = () => {
fetch(globalUrl + "/api/v1/workflows/schedules", {
method: "GET",
@@ -1440,34 +1314,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
});
};
const getOrgs = () => {
// API no longer in use, as it's in handleInfo request
return;
fetch(globalUrl + "/api/v1/orgs", {
method: "GET",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
credentials: "include",
})
.then((response) => {
if (response.status !== 200) {
console.log("Status not 200 for apps :O!");
return;
}
return response.json();
})
.then((responseJson) => {
setOrganizations(responseJson);
})
.catch((error) => {
alert.error(error.toString());
});
};
const getUsers = () => {
fetch(globalUrl + "/api/v1/getusers", {
method: "GET",
@@ -1560,8 +1406,8 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
document.title = "Shuffle - admin - environments";
getEnvironments();
} else if (newValue === 7) {
//getOrgs();
document.title = "Shuffle - admin - orgs";
getOrgs();
} else {
document.title = "Shuffle - admin";
}
@@ -2063,7 +1909,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
maxHeight: 200,
maxWidth: 200,
minWidth: 200,
maxWidth: 200,
}}
/>
) : (
@@ -2779,7 +2624,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
selectedOrganization={selectedOrganization}
adminTab={adminTab}
billingInfo={billingInfo}
selectedOrganization={selectedOrganization}
stripeKey={props.stripeKey}
handleGetOrg={handleGetOrg}
/>
@@ -2791,7 +2635,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
globalUrl={globalUrl}
handleGetOrg={handleGetOrg}
selectedOrganization={selectedOrganization}
selectedOrganization={selectedOrganization}
setSelectedOrganization={setSelectedOrganization}
/>
: null
@@ -4077,7 +3920,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
</ListItem>
{showCPUAlert === false ? null :
<ListItem key={index+"_cpu"} style={{ backgroundColor: bgColor }}>
<div style={{border: "1px solid #f85a3e", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
<div style={{border: "1px solid #f85a3e", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
<div style={{flex: 2, overflow: "hidden",}}>
<Typography variant="body1" >
90% CPU the server(s) hosting the Shuffle App Runner (Orborus) was found.
frontend/src/views/AngularWorkflow.jsx
+3 -6
View File
@@ -4,7 +4,7 @@ import ReactDOM from "react-dom"
import theme from '../theme.jsx';
import { useInterval } from "react-powerhooks";
import { makeStyles, } from "@mui/styles";
//import { makeStyles, } from "@mui/styles";
import { v4 as uuidv4 } from "uuid";
import { useNavigate, Link, useParams } from "react-router-dom";
@@ -357,6 +357,7 @@ export function removeParam(key, sourceURL) {
return rtn;
}
/*
const useStyles = makeStyles({
notchedOutline: {
borderColor: "#f85a3e !important",
@@ -382,6 +383,7 @@ const useStyles = makeStyles({
},
},
});
*/
const splitter = "|~|";
const svgSize = 24;
@@ -554,7 +556,6 @@ const AngularWorkflow = (defaultprops) => {
const appBarSize = isCloud ? 75 : 72;
const triggerEnvironments = isCloud ? ["cloud"] : ["onprem", "cloud"];
const unloadText = "Are you sure you want to leave without saving (CTRL+S)?";
const classes = useStyles();
const [bodyWidth, bodyHeight] = useWindowSize()
//console.log("Mobile: ", isMobile, bodyWidth, bodyHeight)
@@ -10080,7 +10081,6 @@ const AngularWorkflow = (defaultprops) => {
freeSolo
//autoSelect
value={subworkflow}
classes={{ inputRoot: classes.inputRoot }}
ListboxProps={{
style: {
backgroundColor: theme.palette.inputColor,
@@ -10199,7 +10199,6 @@ const AngularWorkflow = (defaultprops) => {
id="subflow_node_search"
autoHighlight
value={subworkflowStartnode}
classes={{ inputRoot: classes.inputRoot }}
ListboxProps={{
style: {
backgroundColor: theme.palette.inputColor,
@@ -10707,7 +10706,6 @@ const AngularWorkflow = (defaultprops) => {
id="action_search"
autoHighlight
value={selectedTrigger.app_association}
classes={{ inputRoot: classes.inputRoot }}
ListboxProps={{
style: {
backgroundColor: theme.palette.inputColor,
@@ -11678,7 +11676,6 @@ const AngularWorkflow = (defaultprops) => {
id="subflow_search"
autoHighlight
value={subworkflow}
classes={{ inputRoot: classes.inputRoot }}
ListboxProps={{
style: {
backgroundColor: theme.palette.inputColor,
frontend/src/views/Workflows.jsx
+49 -250
View File
@@ -1272,11 +1272,11 @@ const Workflows = (props) => {
width: "100%",
color: "white",
backgroundColor: surfaceColor,
padding: "12px 12px 0px 15px",
borderRadius: 5,
display: "flex",
boxSizing: "border-box",
position: "relative",
padding: "12px 12px 0px 15px",
};
const gridContainer = {
@@ -1603,10 +1603,9 @@ const Workflows = (props) => {
const innerColor = "rgba(255,255,255,0.3)";
const setupPaperStyle = {
minHeight: paperAppStyle.minHeight,
maxWidth: "100%",
maxWidth: "100%",
minWidth: paperAppStyle.width,
color: innerColor,
padding: paperAppStyle.padding,
borderRadius: paperAppStyle.borderRadius,
display: "flex",
boxSizing: "border-box",
@@ -1614,10 +1613,12 @@ const Workflows = (props) => {
border: `2px solid ${innerColor}`,
cursor: "pointer",
backgroundColor: hover ? "rgba(39,41,45,0.5)" : "rgba(39,41,45,1)",
padding: paperAppStyle.padding,
};
return (
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<Grid item xs={isMobile ? 12 : 4} style={{ }}>
<Paper
square
style={setupPaperStyle}
@@ -3066,153 +3067,12 @@ const Workflows = (props) => {
</span>
);
// const tourOptions = {
// defaultStepOptions: {
// classes: "shadow-md bg-purple-dark",
// scrollTo: true
// },
// useModalOverlay: true,
// tourName: workflows,
// exitOnEsc: true,
// }
// //classes: "custom-class-name-1 custom-class-name-2",
// const newSteps = [
// {
// id: "intro",
// scrollTo: true,
// beforeShowPromise: function() {
// return new Promise(function(resolve) {
// setTimeout(function() {
// window.scrollTo(0, 0);
// resolve();
// }, 500);
// });
// },
// buttons: [
// {
// classes: "shepherd-button-primary",
// style: {
// backgroundColor: "red",
// color: "white",
// },
// text: "Next",
// type: "next"
// }
// ],
// highlightClass: "highlight",
// showCancelLink: true,
// text: [
// "React-Shepherd is a JavaScript library for guiding users through your React app."
// ],
// when: {
// show: () => {
// console.log("show step 1");
// },
// hide: () => {
// console.log("hide step 1");
// }
// }
// },
// {
// id: "second",
// attachTo: {
// element: "second-step",
// on: "top"
// },
// text: [
// "Yuk eksplorasi hasil Tes Minat Bakat-mu dan rekomendasi <b>Jurusan</b> dan Karier."
// ],
// buttons: [
// {
// classes: "btn btn-info",
// text: "Kembali",
// type: "back"
// },
// {
// classes: "btn btn-success",
// text: "Saya Mengerti",
// type: "cancel"
// }
// ],
// when: {
// show: () => {
// console.log("show stepp");
// },
// hide: () => {
// console.log("complete step");
// }
// },
// showCancelLink: false,
// scrollTo: true,
// modalOverlayOpeningPadding: 4,
// useModalOverlay: false,
// canClickTarget: false
// }
// ]
// function TourButton() {
// const tour = useContext(ShepherdTourContext);
// return (
// <Button variant="contained" color="primary" onClick={tour.start}>
// Start Tour
// </Button>
// );
// }
const WorkflowView = () => {
if (workflows.length === 0) {
// Not going there yet
//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
// return <Navigate to="/getting-started" replace />;
//}
//return (
// <div style={emptyWorkflowStyle}>
// <Paper style={boxStyle}>
// <div>
// <h2>Welcome to Shuffle</h2>
// </div>
// <div>
// <p>
// <b>Shuffle</b> is a flexible, easy to use, automation platform
// allowing users to integrate their services and devices freely.
// It's made to significantly reduce the amount of manual labor,
// and is focused on security applications.{" "}
// <a
// href="/docs/about"
// style={{ textDecoration: "none", color: "#f85a3e" }}
// >
// Click here to learn more.
// </a>
// </p>
// </div>
// <div>
// If you want to jump straight into it, click here to create your
// first workflow:
// </div>
// <div style={{ display: "flex" }}>
// <Button
// id="second-step"
// color="primary"
// style={{ marginTop: "20px" }}
// variant="outlined"
// onClick={() => setModalOpen(true)}
// >
// New workflow
// </Button>
// <span style={{ paddingTop: 20, display: "flex" }}>
// <Typography
// style={{ marginTop: 5, marginLeft: 30, marginRight: 15 }}
// >
// ..OR
// </Typography>
// {workflowButtons}
// </span>
// </div>
// </Paper>
// </div>
//)
// Not going there yet
//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
// return <Navigate to="/getting-started" replace />;
//}
}
var workflowDelay = -150
@@ -3224,101 +3084,40 @@ const Workflows = (props) => {
<div style={workflowViewStyle}>
<div style={{ display: "flex", marginTop: 25, }}>
<div style={{ flex: 1 }}>
<Typography variant="h1" style={{fontSize: 30}}>
Workflows
</Typography>
<Typography variant="h1" style={{fontSize: 30}}>
Workflows
</Typography>
</div>
{/*
<div style={{ flex: 1 }}>
<Typography style={{ marginTop: 7, marginBottom: "auto" }}>
<a
rel="noopener noreferrer"
target="_blank"
href="https://shuffler.io/docs/workflows"
style={{ textDecoration: "none", color: "#f85a3e" }}
>
Learn more about Workflows
</a>
</Typography>
</div>
*/}
{isMobile ? null :
<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
<div style={{ flex: 1, float: "right" }}>
<ChipInput
style={{}}
InputProps={{
style: {
color: "white",
maxWidth: 275,
minWidth: 275,
},
}}
placeholder="Add Filter"
color="primary"
fullWidth
value={filters}
onAdd={(chip) => {
addFilter(chip);
}}
onDelete={(_, index) => {
removeFilter(index);
}}
/>
</div>
</div>
}
{isMobile ? null :
<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
<div style={{ flex: 1, float: "right" }}>
<ChipInput
style={{}}
InputProps={{
style: {
color: "white",
maxWidth: 275,
minWidth: 275,
},
}}
placeholder="Add Filter"
color="primary"
fullWidth
value={filters}
onAdd={(chip) => {
addFilter(chip);
}}
onDelete={(_, index) => {
removeFilter(index);
}}
/>
</div>
</div>
}
<div style={{ flex: 1, textAlign: "right", }}>
{workflowButtons}
</div>
</div>
{/*
<div style={flexContainerStyle}>
<div style={{...flexBoxStyle, ...activeWorkflowStyle}}>
<div style={flexContentStyle}>
<div><img src={mobileImage} style={iconStyle} /></div>
<div style={ blockRightStyle }>
<div style={counterStyle}>{workflows.length}</div>
<div style={fontSize_16}>ACTIVE WORKFLOWS</div>
</div>
</div>
</div>
<div style={{...flexBoxStyle, ...availableWorkflowStyle}}>
<div style={flexContentStyle}>
<div><img src={bookImage} style={iconStyle} /></div>
<div style={ blockRightStyle }>
<div style={counterStyle}>{workflows.length}</div>
<div style={fontSize_16}>AVAILABE WORKFLOWS</div>
</div>
</div>
</div>
<div style={{...flexBoxStyle, ...notificationStyle}}>
<div style={flexContentStyle}>
<div><img src={bagImage} style={iconStyle} /></div>
<div style={ blockRightStyle }>
<div style={counterStyle}>{workflows.length}</div>
<div style={fontSize_16}>NOTIFICATIONS</div>
</div>
</div>
</div>
</div>
*/}
{/*
chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => {
console.log("VALUE: ", value)
return (
<Chip
key={key}
style={chipStyle}
>
{value}
</Chip>
)
}}
*/}
<div style={{width: "100%", minHeight: isMobile ? 0 : 51, maxHeight: isMobile ? 0 : 51, marginTop: 10, }}>
{!isMobile && usecases !== null && usecases !== undefined && usecases.length > 0 ?
@@ -3367,10 +3166,7 @@ const Workflows = (props) => {
</div>
<div style={{ marginTop: 10, marginBottom: 10, }} />
{!isMobile &&
actionImageList !== undefined &&
actionImageList !== null &&
actionImageList.length > 0 ? (
{!isMobile && actionImageList !== undefined && actionImageList !== null && actionImageList.length > 0 ? (
<div
style={{
display: "flex",
@@ -3515,17 +3311,20 @@ const Workflows = (props) => {
workflowDelay += 75
} else {
return (
<Grid key={index} item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} />
</Grid>
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<Grid key={index} item xs={isMobile ? 12 : 4} style={{}}>
<WorkflowPaper key={index} data={data} />
</Grid>
</Zoom>
)
}
/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/
return (
<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
<WorkflowPaper key={index} data={data} />
</Grid>
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
<Grid item xs={isMobile ? 12 : 4} style={{}}>
<WorkflowPaper key={index} data={data} />
</Grid>
</Zoom>
)
})}
</Grid>