Fixed most of the muiV5 / react 18 version problems
This commit is contained in:
Frikky
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
|
||||
@@ -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();
|
||||
|
||||
+25
-182
@@ -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.
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user