Fixed most of the muiV5 / react 18 version problems

backend/app_sdk/app_base.py

@@ -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:
+                                        #try:
-                                            e = json.loads(f"{e}")
+                                        #    e = json.loads(f"{e}")
-                                        except:
+                                        #except:
-                                            e = f"{e}"
+                                        #    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:
+                                    #try:
-                                        e = json.loads(f"{e}")
+                                    #    e = json.loads(f"{e}")
-                                    except:
+                                    #except:
-                                        e = f"{e}"
+                                    #    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

@@ -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

@@ -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

@@ -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 {
-import Grid from "@material-ui/core/Grid";
+	Tooltip,
-import Button from "@material-ui/core/Button";
+	Grid, 
-import TextField from "@material-ui/core/TextField";
+	Button, 
-import Typography from "@material-ui/core/Typography";
+	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

@@ -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

@@ -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

@@ -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

@@ -1,14 +1,9 @@
 import React, { useState, useEffect } from "react";
 
-import { makeStyles } from "@mui/styles";
+import { useNavigate, } from "react-router-dom";
-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 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 [showApiKey, setShowApiKey] = useState(false);
-  const [billingInfo, setBillingInfo] = React.useState({});
+  const [selectedStatus, setSelectedStatus] = React.useState([]);
-	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 = {
+          //var lists = {
-            active: {
+          //  active: {
-              triggers: [],
+          //    triggers: [],
-              features: [],
+          //    features: [],
-              sync: [],
+          //    sync: [],
-            },
+          //  },
-            inactive: {
+          //  inactive: {
-              triggers: [],
+          //    triggers: [],
-              features: [],
+          //    features: [],
-              sync: [],
+          //    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

@@ -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

@@ -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
+		// Not going there yet
-			//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
+		//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
-			//	return <Navigate to="/getting-started" replace />;
+		//	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>
-      //)
     }
 
 		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}}>
+				<Typography variant="h1" style={{fontSize: 30}}>
-              	Workflows
+              		Workflows
-							</Typography>
+				</Typography>
             </div>
-						{/*
+			{isMobile ? null : 
-            <div style={{ flex: 1 }}>
+				<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
-              <Typography style={{ marginTop: 7, marginBottom: "auto" }}>
+					<div style={{ flex: 1, float: "right" }}>
-                <a
+						<ChipInput
-                  rel="noopener noreferrer"
+							style={{}}
-                  target="_blank"
+							InputProps={{
-                  href="https://shuffler.io/docs/workflows"
+								style: {
-                  style={{ textDecoration: "none", color: "#f85a3e" }}
+									color: "white",
-                >
+									maxWidth: 275,
-                  Learn more about Workflows
+									minWidth: 275,
-                </a>
+								},
-              </Typography>
+							}}
-            </div>
+							placeholder="Add Filter"
-						*/}
+							color="primary"
-						{isMobile ? null : 
+							fullWidth
-							<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
+							value={filters}
-								<div style={{ flex: 1, float: "right" }}>
+							onAdd={(chip) => {
-									<ChipInput
+								addFilter(chip);
-										style={{}}
+							}}
-										InputProps={{
+							onDelete={(_, index) => {
-											style: {
+								removeFilter(index);
-												color: "white",
+							}}
-												maxWidth: 275,
+						/>
-												minWidth: 275,
+					</div>
-											},
+				</div>
-										}}
+			}
-										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 &&
+          {!isMobile && actionImageList !== undefined && actionImageList !== null && actionImageList.length > 0 ? (
-					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" }}>
+											<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-												<WorkflowPaper key={index} data={data} />
+												<Grid key={index} item xs={isMobile ? 12 : 4} style={{}}>
-											</Grid>
+													<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" }}>
+										<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-											<WorkflowPaper key={index} data={data} />
+											<Grid item xs={isMobile ? 12 : 4} style={{}}>
-										</Grid>
+												<WorkflowPaper key={index} data={data} />
+											</Grid>
+										</Zoom>
 									)
 								})}
 							</Grid>