Started react 16->18 migration and material-ui->mui migration

frontend/Dockerfile

@@ -1,5 +1,5 @@
 # Build environment
-FROM node:14 as builder
+FROM node:18 as builder
 
 RUN mkdir /usr/src/app
 

frontend/build.sh

@@ -1,3 +1,3 @@
-npm run build
+yarn run build
 rm -rf ../backend/go-app/build
 cp -r build/ ../backend/go-app/build

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shuffler",
   "homepage": "https://shuffler.io",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": true,
   "dependencies": {
     "@codemirror/commands": "^6.2.2",
@@ -10,12 +10,11 @@
     "@emotion/styled": "^11.6.0",
     "@lezer/highlight": "^1.1.3",
     "@material-ui/core": "^4.5.2",
-    "@material-ui/icons": "^4.5.1",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@material-ui/styles": "^4.5.2",
     "@material-ui/utils": "^4.11.2",
     "@metamask/detect-provider": "^1.2.0",
-    "@mui/icons-material": "^5.2.1",
+    "@mui/icons-material": "^5.14.0",
     "@mui/material": "^5.2.3",
     "@mui/x-data-grid": "^5.17.11",
     "@uiw/codemirror-themes": "^4.19.9",
@@ -23,7 +22,7 @@
     "@use-it/interval": "^1.0.0",
     "algoliasearch": "^4.13.1",
     "class-transformer": "^0.4.0",
-    "create-react-app": "^4.0.3",
+    "create-react-app": "^5.0.1",
     "cytoscape": "^3.15.1",
     "cytoscape-clipboard": "^2.2.1",
     "cytoscape-cxtmenu": "^3.1.1",
@@ -41,11 +40,13 @@
     "material-icons": "^0.7.7",
     "material-icons-react": "^1.0.4",
     "material-ui-chip-input": "^2.0.0-beta.2",
-    "material-ui-nested-menu-item": "^1.0.2",
     "md5-file": "^4.0.0",
     "mdbreact": "^4.21.1",
+    "mime": "^3.0.0",
     "moment": "^2.29.1",
-    "react": "^16.14.0",
+    "mui-nested-menu": "^3.2.1",
+    "process": "^0.11.10",
+    "react": "^18.2.0",
     "react-alert": "^5.5.0",
     "react-alert-template-basic": "^1.0.0",
     "react-alice-carousel": "^2.6.4",
@@ -55,7 +56,7 @@
     "react-cookie": "^4.0.1",
     "react-cytoscapejs": "^1.2.0",
     "react-device-detect": "^1.9.10",
-    "react-dom": "^16.14.0",
+    "react-dom": "^18.2.0",
     "react-draggable": "^3.3.2",
     "react-driftjs": "^1.2.2",
     "react-dropzone": "^10.1.10",
@@ -64,12 +65,12 @@
     "react-instantsearch-dom": "^6.28.0",
     "react-json-pretty": "^2.2.0",
     "react-json-view": "^1.19.1",
-    "react-markdown": "^4.2.2",
+    "react-markdown": "^8.0.7",
     "react-markdown-github": "^3.3.1",
     "react-powerhooks": "0.0.7",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
-    "react-scripts": "^4.0.1",
+    "react-scripts": "^5.0.1",
     "react-shepherd": "^3.3.6",
     "reactstrap": "^7.1.0",
     "reaviz": "^12.1.0",
@@ -109,6 +110,9 @@
     "babel-eslint": "^10.1.0",
     "prettier": "2.4.1",
     "promise-window": "^1.2.1",
-    "webpack": "^4.44.2"
+    "react-16": "npm:react@16.13.1",
+    "react-dom-16": "npm:react-dom@16.13.1",
+    "react-error-overlay": "6.0.9",
+    "webpack": "^4.46.0"
   }
 }

frontend/run.sh

@@ -10,9 +10,9 @@ docker tag ghcr.io/frikky/shuffle-frontend:nightly ghcr.io/shuffle/shuffle-front
 
 echo "Starting server"
 # Rerun build locally for it to update :)
-#docker run -it \
+docker run -it \
-#	-p 3001:80 \
+	-p 3001:80 \
-#	-p 3002:443 \
+	-p 3002:443 \
-#	-v $(pwd)/build:/usr/share/nginx/html:ro \
+	-v $(pwd)/build:/usr/share/nginx/html:ro \
-#	--rm \
+	--rm \
-#	nginx	
+	ghcr.io/frikky/shuffle-frontend:nightly

frontend/src/App.jsx

@@ -7,7 +7,7 @@ import { removeCookies, useCookies } from "react-cookie";
 import Workflows from "./views/Workflows";
 import GettingStarted from "./views/GettingStarted";
 import EditWebhook from "./views/EditWebhook";
-import AngularWorkflow from "./views/AngularWorkflow";
+import AngularWorkflow from "./views/AngularWorkflow.jsx";
 
 import Header from "./components/Header.jsx";
 import theme from "./theme";
@@ -19,7 +19,7 @@ import Dashboard from "./views/Dashboard.jsx";
 import DashboardView from "./views/DashboardViews.jsx";
 import AdminSetup from "./views/AdminSetup";
 import Admin from "./views/Admin";
-import Docs from "./views/Docs";
+import Docs from "./views/Docs.jsx";
 import Introduction from "./views/Introduction";
 import SetAuthentication from "./views/SetAuthentication";
 import SetAuthenticationSSO from "./views/SetAuthenticationSSO";
@@ -31,10 +31,9 @@ import LoginPage from "./views/LoginPage";
 import SettingsPage from "./views/SettingsPage";
 import KeepAlive from "./views/KeepAlive.jsx";
 
-import MyView from "./views/MyView";
-
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
 
+import UpdateAuthentication from "./views/UpdateAuthentication.jsx";
 import FrameworkWrapper from "./views/FrameworkWrapper.jsx";
 import ScrollToTop from "./components/ScrollToTop";
 import AlertTemplate from "./components/AlertTemplate";
@@ -472,7 +471,7 @@ const App = (message, props) => {
         	    />
         	  }
         	/>
-			<Route exact path="/apps/authentication" element={<UpdateAuthentication serverside={serverside} userdata={userdata} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
+			<Route exact path="/apps/authentication" element={<UpdateAuthentication serverside={false} userdata={userdata} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
         	<Route
         	  exact
         	  path="/apps"

frontend/src/components/AlertTemplate.js

@@ -1,8 +1,10 @@
 import React from "react";
-import InfoIcon from "@material-ui/icons/Info";
+import {
-import CheckIcon from "@material-ui/icons/Check";
+	Info as InfoIcon, 
-import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
+	Check as CheckIcon, 
-import CloseIcon from "@material-ui/icons/Close";
+	ErrorOutline as ErrorOutlineIcon, 
+	Close as CloseIcon, 
+} from "@mui/icons-material";
 import Typography from "@material-ui/core/Typography";
 
 const alertStyle = {

frontend/src/components/AppFramework.jsx

@@ -32,7 +32,7 @@ import {
 import {
 	Close as CloseIcon,
   Delete as DeleteIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 import * as edgehandles from "cytoscape-edgehandles";
 import * as cytoscape from "cytoscape";

frontend/src/components/AppGrid.jsx

@@ -4,7 +4,11 @@ import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
+import { 
+	Search as SearchIcon, 
+	CloudQueue as CloudQueueIcon, 
+	Code as CodeIcon 
+} from '@mui/icons-material';
 
 import algoliasearch from 'algoliasearch/lite';
 import { InstantSearch, Configure, connectSearchBox, connectHits, connectHitInsights } from 'react-instantsearch-dom';

frontend/src/components/Appsearch.jsx

@@ -3,7 +3,7 @@ import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 import { useAlert } from "react-alert";
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
+import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
 
 //import algoliasearch from 'algoliasearch/lite';
 import algoliasearch from 'algoliasearch';

frontend/src/components/AppsearchPopout.jsx

@@ -17,7 +17,7 @@ import {
 import {
 	Close as CloseIcon,
   Delete as DeleteIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 const AppSearchPopout = (props) => {
   const { 

frontend/src/components/AuthenticationItem.jsx

@@ -25,7 +25,7 @@ import {
   Edit as EditIcon,
 	Delete as DeleteIcon,
 	SelectAll as SelectAllIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 const AuthenticationItem = (props) => {
 		const { data, index, globalUrl, getAppAuthentication } = props

frontend/src/components/AuthenticationNormal.jsx

@@ -17,7 +17,7 @@ import {
 
 import {
   LockOpen as LockOpenIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 const AuthenticationData = (props) => {
   const {

frontend/src/components/AuthenticationWindow.jsx

@@ -0,0 +1,476 @@
+import React, { useState, useEffect } from "react";
+
+import theme from '../theme.jsx';
+import { v4 as uuidv4 } from "uuid";
+import { useAlert } from "react-alert";
+
+import { 
+	Divider,
+	MenuItem,
+	Button,
+	Dialog,
+	DialogTitle,
+	DialogActions,
+	DialogContent,
+	Textfield,
+  TextField,
+	Typography,
+	Select,
+	IconButton,
+} from "@material-ui/core";
+
+import {
+  LockOpen as LockOpenIcon,
+	Close as CloseIcon,
+} from "@mui/icons-material";
+
+import PaperComponent from "../components/PaperComponent.jsx"
+import { useParams, useNavigate, Link } from "react-router-dom";
+
+const AuthenticationData = (props) => {
+	const { 
+		globalUrl,
+		selectedApp, 
+		getAppAuthentication,
+		authenticationModalOpen,
+		setAuthenticationModalOpen,
+
+		configureWorkflowModalOpen, 
+		workflow,
+		setUpdate,
+		selectedAction,
+		setSelectedAction,
+		isLoggedIn,
+		authFieldsOnly, 
+	} = props
+
+  const alert = useAlert()
+  let navigate = useNavigate();
+	const [submitSuccessful, setSubmitSuccessful] = useState(false)
+	const [authenticationOption, setAuthenticationOptions] = React.useState({
+		app: JSON.parse(JSON.stringify(selectedApp)),
+		fields: {},
+		label: "",
+		usage: [
+			{
+				workflow_id: workflow === undefined ? "" : workflow.id,
+			},
+		],
+		id: uuidv4(),
+		active: true,
+	});
+
+	useEffect(() => {
+		if (isLoggedIn === false && authFieldsOnly !== true) {
+			navigate(`/login?view=${window.location.pathname}&message=Log in to authenticate this app`)
+		}
+	}, [])
+
+  const setNewAppAuth = (appAuthData) => {
+		var headers = {
+			"Content-Type": "application/json",
+			"Accept": "application/json",
+		}
+
+		// Find org_id and authorization from queries and add to headers
+		if (window.location.search !== "") {
+			const params = new URLSearchParams(window.location.search)
+			const org_id = params.get("org_id")
+			const authorization = params.get("authorization")
+			if (org_id !== null && authorization !== null) {
+				headers["Org-Id"] = org_id
+				headers["Authorization"] = "Bearer " + authorization
+			}
+		}
+
+    fetch(globalUrl + "/api/v1/apps/authentication", {
+      method: "PUT",
+      headers: headers,
+      body: JSON.stringify(appAuthData),
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for setting app auth :O!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        if (!responseJson.success) {
+          if (responseJson.reason === undefined) {
+          	alert.error("Failed to set app auth. Are you logged in?")
+					} else { 
+          	alert.error("Failed to set app auth: " + responseJson.reason);
+					}
+        } else {
+					setSubmitSuccessful(true)
+					if (getAppAuthentication !== undefined) {
+          	getAppAuthentication(true, false);
+					}
+
+					if (setAuthenticationModalOpen !== undefined) {
+						setAuthenticationModalOpen(false)
+					}
+        }
+      })
+      .catch((error) => {
+        //alert.error(error.toString());
+        console.log("New auth error: ", error.toString());
+      });
+  };
+
+	if (selectedApp.authentication === undefined || selectedApp.authentication.parameters === null ||
+		selectedApp.authentication.parameters === undefined || selectedApp.authentication.parameters.length === 0) {
+	
+		return (
+			<DialogContent style={{ textAlign: "center", marginTop: 50 }}>
+				<Typography variant="h4" id="draggable-dialog-title" style={{ cursor: "move", }}>
+					{selectedApp.name} does not require authentication
+				</Typography>
+			</DialogContent>
+		);
+	}
+
+	authenticationOption.app.actions = [];
+
+	for (let paramkey in selectedApp.authentication.parameters) {
+		if (
+			authenticationOption.fields[
+			selectedApp.authentication.parameters[paramkey].name
+			] === undefined
+		) {
+			authenticationOption.fields[
+				selectedApp.authentication.parameters[paramkey].name
+			] = "";
+		}
+	}
+
+	const handleSubmitCheck = () => {
+		if (authenticationOption.label.length === 0) {
+			authenticationOption.label = `Auth for ${selectedApp.name}`;
+		}
+
+		// Automatically mapping fields that already exist (predefined).
+		// Warning if fields are NOT filled
+		for (let paramkey in selectedApp.authentication.parameters) {
+			if (
+				authenticationOption.fields[
+					selectedApp.authentication.parameters[paramkey].name
+				].length === 0
+			) {
+				if (
+					selectedApp.authentication.parameters[paramkey].value !== undefined &&
+					selectedApp.authentication.parameters[paramkey].value !== null &&
+					selectedApp.authentication.parameters[paramkey].value.length > 0
+				) {
+					authenticationOption.fields[
+						selectedApp.authentication.parameters[paramkey].name
+					] = selectedApp.authentication.parameters[paramkey].value;
+				} else {
+					if (
+						selectedApp.authentication.parameters[paramkey].schema.type === "bool"
+					) {
+						authenticationOption.fields[
+							selectedApp.authentication.parameters[paramkey].name
+						] = "false";
+					} else {
+						alert.info(
+							"Field " +
+							selectedApp.authentication.parameters[paramkey].name +
+							" can't be empty"
+						);
+						return;
+					}
+				}
+			}
+		}
+
+		console.log("Action: ", selectedAction);
+
+		if (selectedAction !== undefined) {
+			selectedAction.authentication_id = authenticationOption.id;
+			selectedAction.selectedAuthentication = authenticationOption;
+			if (
+				selectedAction.authentication === undefined ||
+				selectedAction.authentication === null
+			) {
+				selectedAction.authentication = [authenticationOption];
+			} else {
+				selectedAction.authentication.push(authenticationOption);
+			}
+
+			setSelectedAction(selectedAction);
+		}
+
+		var newAuthOption = JSON.parse(JSON.stringify(authenticationOption));
+		var newFields = [];
+		console.log("Fields: ", newAuthOption.fields)
+		for (let authkey in newAuthOption.fields) {
+			const value = newAuthOption.fields[authkey];
+			newFields.push({
+				"key": authkey,
+				"value": value,
+			});
+		}
+
+		newAuthOption.fields = newFields;
+		setNewAppAuth(newAuthOption);
+
+		if (configureWorkflowModalOpen === true) {
+			setSelectedAction({});
+		}
+
+		if (setUpdate !== undefined) {
+			setUpdate(authenticationOption.id);
+		}
+	};
+
+	if (authenticationOption.label === null || authenticationOption.label === undefined) {
+		authenticationOption.label = selectedApp.name + " authentication";
+	}
+
+	const authenticationParameters = selectedApp.authentication.parameters.map((data, index) => {
+		return (
+			<div key={index} style={{ marginTop: 10 }}>
+				<div style={{display: "flex"}}>
+					<LockOpenIcon style={{ marginRight: 10, }} />
+					<Typography variant="body1" style={{}}>
+						{data.name.replace("_basic", "", -1).replace("_", " ", -1)}
+					</Typography>
+				</div>
+
+				{data.schema !== undefined &&
+					data.schema !== null &&
+					data.schema.type === "bool" ? (
+					<Select
+						MenuProps={{
+							disableScrollLock: true,
+						}}
+						SelectDisplayProps={{
+							style: {
+								marginLeft: 10,
+							},
+						}}
+						defaultValue={"false"}
+						fullWidth
+						onChange={(e) => {
+							console.log("Value: ", e.target.value);
+							authenticationOption.fields[data.name] = e.target.value;
+						}}
+						style={{
+							backgroundColor: theme.palette.surfaceColor,
+							color: "white",
+							height: 50,
+						}}
+					>
+						<MenuItem
+							key={"false"}
+							style={{
+								backgroundColor: theme.palette.inputColor,
+								color: "white",
+							}}
+							value={"false"}
+						>
+							false
+						</MenuItem>
+						<MenuItem
+							key={"true"}
+							style={{
+								backgroundColor: theme.palette.inputColor,
+								color: "white",
+							}}
+							value={"true"}
+						>
+							true
+						</MenuItem>
+					</Select>
+				) : (
+					<TextField
+						style={{
+							backgroundColor: theme.palette.inputColor,
+							borderRadius: theme.palette.borderRadius,
+						}}
+						InputProps={{
+							style: {
+								color: "white",
+								marginLeft: "5px",
+								maxWidth: "95%",
+								height: 50,
+								fontSize: "1em",
+							},
+							disableUnderline: true,
+						}}
+						fullWidth
+						type={
+							data.example !== undefined && data.example.includes("***")
+								? "password"
+								: "text"
+						}
+						color="primary"
+						defaultValue={
+							data.value !== undefined && data.value !== null
+								? data.value
+								: ""
+						}
+						placeholder={data.example}
+						onChange={(event) => {
+							authenticationOption.fields[data.name] =
+								event.target.value;
+						}}
+					/>
+				)}
+			</div>
+		);
+	})
+
+	const authenticationButtons = <span>
+		<Button
+			style={{ borderRadius: theme.palette.borderRadius, marginTop: authFieldsOnly ? 20 : 0 }}
+			onClick={() => {
+				setAuthenticationOptions(authenticationOption);
+				handleSubmitCheck();
+			}}
+			variant={"contained"}
+			disabled={submitSuccessful}
+			color="primary"
+		>
+			Submit
+		</Button>
+		{authFieldsOnly === true ? null :
+			<Button
+				style={{ borderRadius: 0 }}
+				onClick={() => {
+					setAuthenticationModalOpen(false);
+				}}
+				color="primary"
+			>
+				Cancel
+			</Button>
+		}
+	</span>
+
+	// Check if only the auth items should show
+	if (authFieldsOnly === true) {
+		return (
+			<div>
+				{submitSuccessful === true ? 
+					<Typography variant="h6" style={{ marginTop: 10 }}>
+						App succesfully configured! You may close this window.
+					</Typography>
+					: 
+					<span>
+						{authenticationParameters}
+						{authenticationButtons}
+					</span>
+				}
+			</div>
+		)
+	}
+
+	return (
+    <Dialog
+      PaperComponent={PaperComponent}
+      aria-labelledby="draggable-dialog-title"
+      hideBackdrop={true}
+      disableEnforceFocus={true}
+      disableBackdropClick={true}
+      style={{ pointerEvents: "none" }}
+      open={authenticationModalOpen}
+      onClose={() => {
+        //if (configureWorkflowModalOpen) {
+        //  setSelectedAction({});
+        //}
+				setAuthenticationModalOpen(false);
+      }}
+      PaperProps={{
+        style: {
+          pointerEvents: "auto",
+          backgroundColor: theme.palette.surfaceColor,
+          color: "white",
+          minWidth: 600,
+          minHeight: 600,
+          maxHeight: 600,
+          padding: 15,
+          overflow: "hidden",
+          zIndex: 10012,
+          border: theme.palette.defaultBorder,
+        },
+      }}
+    >
+      <IconButton
+        style={{
+          zIndex: 5000,
+          position: "absolute",
+          top: 14,
+          right: 18,
+          color: "grey",
+        }}
+        onClick={() => {
+          setAuthenticationModalOpen(false);
+          if (configureWorkflowModalOpen === true) {
+            setSelectedAction({});
+          }
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
+			<DialogTitle id="draggable-dialog-title" style={{ cursor: "move", }}>
+				<div style={{ color: "white" }}>
+					Authentication for {selectedApp.name}
+				</div>
+			</DialogTitle>
+			<DialogContent>
+				<a
+					target="_blank"
+					rel="noopener noreferrer"
+					href="https://shuffler.io/docs/apps#authentication"
+					style={{ textDecoration: "none", color: "#f85a3e" }}
+				>
+					What is app authentication?
+				</a>
+				<div />
+				These are required fields for authenticating with {selectedApp.name}
+				<div style={{ marginTop: 15 }} />
+				<b>Name - what is this used for?</b>
+				<TextField
+					style={{
+						backgroundColor: theme.palette.inputColor,
+						borderRadius: theme.palette.borderRadius,
+					}}
+					InputProps={{
+						style: {
+							color: "white",
+							marginLeft: "5px",
+							maxWidth: "95%",
+							height: 50,
+							fontSize: "1em",
+						},
+					}}
+					fullWidth
+					color="primary"
+					placeholder={"Auth july 2020"}
+					defaultValue={`Auth for ${selectedApp.name}`}
+					onChange={(event) => {
+						authenticationOption.label = event.target.value;
+					}}
+				/>
+				<Divider
+					style={{
+						marginTop: 15,
+						marginBottom: 15,
+						backgroundColor: "rgb(91, 96, 100)",
+					}}
+				/>
+				<div />
+				{authenticationParameters}
+
+			</DialogContent>
+			<DialogActions>
+				{authenticationButtons}
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+export default AuthenticationData;

frontend/src/components/CacheView.jsx

@@ -40,8 +40,7 @@ import {
     Business as BusinessIcon,
     Visibility as VisibilityIcon,
     VisibilityOff as VisibilityOffIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
-import data from "./frameworkStyle.jsx";
 
 const scrollStyle1 = {
     height: 100,

frontend/src/components/CreatorGrid.jsx

@@ -4,7 +4,12 @@ import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
+import { 
+	SkipNext as SkipNextIcon,
+	SkipPrevious as SkipPreviousIcon,
+	PlayArrow as PlayArrowIcon,
+	VerifiedUser as VerifiedUserIcon, 
+	Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
 
 import algoliasearch from 'algoliasearch/lite';
 import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';
@@ -31,14 +36,6 @@ import {
   AvatarGroup,
 } from "@mui/material"
 
-import {
-	SkipNext as SkipNextIcon,
-	SkipPrevious as SkipPreviousIcon,
-	PlayArrow as PlayArrowIcon,
-	VerifiedUser as VerifiedUserIcon, 
-} from "@material-ui/icons";
-
-
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const CreatorGrid = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs }  = props

frontend/src/components/DocsGrid.jsx

@@ -4,7 +4,7 @@ import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
+import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon, Close as CloseIcon, Folder as FolderIcon, LibraryBooks as LibraryBooksIcon } from '@mui/icons-material';
 import aa from 'search-insights'
 
 import algoliasearch from 'algoliasearch/lite';
@@ -26,7 +26,7 @@ import {
 	ListItemText,
 } from '@material-ui/core';
 
-import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons'
+	
 
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const DocsGrid = props => {
@@ -182,7 +182,7 @@ const DocsGrid = props => {
 
 					//const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : ""
 					const secondaryText = data.data !== undefined ? data.data.slice(0, 100)+"..." : ""
-					const baseImage = <PolymerIcon /> 
+					const baseImage = <CodeIcon/> 
 					const avatar = data.image_url === undefined ? 
 						baseImage
 						:

frontend/src/components/Dropzone.jsx

@@ -1,6 +1,8 @@
 import React, { useRef, useState } from "react";
 import { useEffect } from "react";
-import BackupIcon from "@material-ui/icons/Backup";
+import {
+	Backup as BackupIcon 
+} from "@mui/icons-material";
 
 const dragOverStyle = {
   backgroundColor: "rgba(0,0,0,0.8)",

frontend/src/components/EditWorkflow.jsx

@@ -44,7 +44,7 @@ import {
   ExpandMore as ExpandMoreIcon,
   Publish as PublishIcon,
   OpenInNew as OpenInNewIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 const EditWorkflow = (props) => {
 	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props

frontend/src/components/Files.jsx

@@ -27,7 +27,7 @@ import {
   Publish as PublishIcon,
 	Clear as ClearIcon,
 	Add as AddIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 import { useAlert } from "react-alert";
 import Dropzone from "../components/Dropzone.jsx";

frontend/src/components/Header.jsx

@@ -34,12 +34,9 @@ import {
 	Description as DescriptionIcon,
 	EmojiObjects as EmojiObjectsIcon,
   Business as BusinessIcon,
-} from '@material-ui/icons';
-
-import {
 	Analytics as AnalyticsIcon,
 	Lightbulb as LightbulbIcon,
-} from "@mui/icons-material";
+} from '@mui/icons-material';
 
 import { useAlert } from "react-alert";
 

frontend/src/components/OrgHeader.jsx

@@ -9,9 +9,12 @@ import TextField from "@material-ui/core/TextField";
 import Typography from "@material-ui/core/Typography";
 import { useAlert } from "react-alert";
 import IconButton from "@material-ui/core/IconButton";
-import ExpandLessIcon from "@material-ui/icons/ExpandLess";
+
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import {
-import SaveIcon from "@material-ui/icons/Save";
+	ExpandLess as ExpandLessIcon,
+	ExpandMore as ExpandMoreIcon, 
+	Save as SaveIcon, 
+} from "@mui/icons-material";
 
 const useStyles = makeStyles({
   notchedOutline: {

frontend/src/components/OrgHeaderexpanded.jsx

@@ -26,9 +26,11 @@ import {
 } from "@material-ui/core";
 
 import IconButton from "@material-ui/core/IconButton";
-import ExpandLessIcon from "@material-ui/icons/ExpandLess";
+import {
-import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+	ExpandLess as ExpandLessIcon, 
-import SaveIcon from "@material-ui/icons/Save";
+	ExpandMore as ExpandMoreIcon, 
+	Save as SaveIcon,
+} from "@mui/icons-material";
 
 const useStyles = makeStyles({
   notchedOutline: {
@@ -699,4 +701,4 @@ const OrgHeaderexpanded = (props) => {
 	)
 }
 
-export default OrgHeaderexpanded;
+export default OrgHeaderexpanded;

frontend/src/components/ParsedAction.jsx

@@ -5,7 +5,8 @@ import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
 import { GetParsedPaths } from "../views/Apps.jsx";
 import { sortByKey } from "../views/AngularWorkflow.jsx";
 import { useTheme } from "@material-ui/core/styles";
-import NestedMenuItem from "material-ui-nested-menu-item";
+//import NestedMenuItem from "material-ui-nested-menu-item-v5";
+import { NestedMenuItem } from "mui-nested-menu";
 import { useAlert } from "react-alert";
 import theme from '../theme.jsx';
 

frontend/src/components/Searchfield.js

@@ -2,7 +2,6 @@ import React, {useState, useEffect, useRef} from 'react';
 
 import { useNavigate, Link, useParams } from "react-router-dom";
 import { useTheme } from '@material-ui/core/styles';
-import SearchIcon from '@material-ui/icons/Search';
 
 import {
 	Chip, 
@@ -23,7 +22,7 @@ import {
   AvatarGroup,
 } from "@mui/material"
 
-import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons'
+import {Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon} from '@mui/icons-material'
 
 import algoliasearch from 'algoliasearch/lite';
 import aa from 'search-insights'
@@ -158,7 +157,7 @@ const SearchField = props => {
 		}
 		
 		var type = "workflows"
-		const baseImage = <PolymerIcon /> 
+		const baseImage = <CodeIcon /> 
 
 		return (
 			<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: 405, height: 408, left: 75, boxShadows: "none",}}>

frontend/src/components/Searchfield.jsx

@@ -2,7 +2,6 @@ import React, {useState, useEffect, useRef} from 'react';
 
 import { useNavigate, Link, useParams } from "react-router-dom";
 import { useTheme } from '@material-ui/core/styles';
-import SearchIcon from '@material-ui/icons/Search';
 
 import {
 	Chip, 
@@ -23,7 +22,7 @@ import {
   AvatarGroup,
 } from "@mui/material"
 
-import {Close as CloseIcon, Folder as FolderIcon, Polymer as PolymerIcon, LibraryBooks as LibraryBooksIcon} from '@material-ui/icons'
+import {Search as SearchIcon, Close as CloseIcon, Folder as FolderIcon, Code as CodeIcon, LibraryBooks as LibraryBooksIcon} from '@mui/icons-material'
 
 import algoliasearch from 'algoliasearch/lite';
 import aa from 'search-insights'
@@ -162,7 +161,7 @@ const SearchField = props => {
 		}
 		
 		var type = "workflows"
-		const baseImage = <PolymerIcon /> 
+		const baseImage = <CodeIcon /> 
 
 		return (
 			<Card elevation={0} style={{position: "relative", marginLeft: 10, marginRight: 10, position: "absolute", color: "white", zIndex: 1002, backgroundColor: theme.palette.inputColor, width: 405, height: 408, left: 75, boxShadows: "none",}}>

frontend/src/components/ShuffleCodeEditor.jsx

@@ -18,7 +18,7 @@ import theme from '../theme.jsx';
 import Checkbox from '@mui/material/Checkbox';
 import { orange } from '@mui/material/colors';
 import { isMobile } from "react-device-detect" 
-import NestedMenuItem from "material-ui-nested-menu-item";
+import { NestedMenuItem } from "mui-nested-menu"
 import { GetParsedPaths, FindJsonPath } from "../views/Apps.jsx";
 import { SetJsonDotnotation } from "../views/AngularWorkflow.jsx";
 

frontend/src/components/WorkflowGrid.jsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
+import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
 
 import algoliasearch from 'algoliasearch/lite';
 import { InstantSearch, Configure, connectSearchBox, connectHits } from 'react-instantsearch-dom';

frontend/src/components/WorkflowPaper.jsx

@@ -19,7 +19,7 @@ import {
 	Edit as EditIcon,
 	BubbleChart as BubbleChartIcon,
 	MoreVert as MoreVertIcon,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 
 import { useNavigate, Link, useParams } from "react-router-dom";
 

frontend/src/components/WorkflowPaperNew.jsx

@@ -20,7 +20,7 @@ import {
 	Edit as EditIcon,
 	BubbleChart as BubbleChartIcon,
 	MoreVert as MoreVertIcon,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 
 import { useNavigate, Link, useParams } from "react-router-dom";
 

frontend/src/components/Workflowsearch.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
+import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
 
 //import algoliasearch from 'algoliasearch/lite';
 import algoliasearch from 'algoliasearch';

frontend/src/index.js

@@ -1,12 +1,16 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
-import "./index.css";
 import App from "./App";
-import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(<App />, document.getElementById("root"));
+//import "./index.css";
+//import reportWebVitals from "./reportWebVitals";
 
-// If you want your app to work offline and load faster, you can change
+const rootElement = document.getElementById("root");
-// unregister() to register() below. Note this comes with some pitfalls.
+const root = createRoot(rootElement);
-// Learn more about service workers: http://bit.ly/CRA-PWA
+root.render(
-serviceWorker.unregister();
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+//reportWebVitals();

frontend/src/views/Admin.jsx

@@ -7,9 +7,7 @@ import CodeEditor from "../components/ShuffleCodeEditor.jsx";
 import getLocalCodeData from "../components/ShuffleCodeEditor.jsx";
 import CacheView from "../components/CacheView.jsx";
 import theme from "../theme.jsx";
-import AddIcon from "@mui/icons-material/Add";
+
-import ClearIcon from '@mui/icons-material/Clear';
-import StorageIcon from '@mui/icons-material/Storage';
 //import ToggleButton from '@mui/material/ToggleButton';
 import {
   FormControl,
@@ -57,7 +55,7 @@ import {
   OpenInNew as OpenInNewIcon,
   CloudDownload as CloudDownloadIcon,
   Description as DescriptionIcon,
-  Polymer as PolymerIcon,
+  Code as CodeIcon,
   CheckCircle as CheckCircleIcon,
   Close as CloseIcon,
   Apps as AppsIcon,
@@ -66,13 +64,15 @@ import {
   Cached as CachedIcon,
   AccessibilityNew as AccessibilityNewIcon,
   Lock as LockIcon,
-  Eco as EcoIcon,
   Schedule as ScheduleIcon,
   Cloud as CloudIcon,
   Business as BusinessIcon,
-	Visibility as VisibilityIcon,
+  Visibility as VisibilityIcon,
-	VisibilityOff as VisibilityOffIcon,
+  VisibilityOff as VisibilityOffIcon,
-} from "@material-ui/icons";
+	Add as AddIcon, 
+	Clear as ClearIcon, 
+	Storage as StorageIcon, 
+} from "@mui/icons-material";
 
 import { useAlert } from "react-alert";
 import Dropzone from "../components/Dropzone.jsx";
@@ -182,6 +182,11 @@ const Admin = (props) => {
   const [billingInfo, setBillingInfo] = React.useState({});
 	const [selectedStatus, setSelectedStatus] = React.useState([]);
 
+  useEffect(() => {
+		getUsers()
+  }, []);
+
+
   useEffect(() => {
     if (isDropzone) {
       //redirectOpenApi();
@@ -987,6 +992,10 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 							leads.push("student")
 						}
 
+						if (responseJson.lead_info.internal) {
+							leads.push("internal")
+						}
+
 						setSelectedStatus(leads)
 					}
 
@@ -1485,10 +1494,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       });
   };
 
-  useEffect(() => {
-		getUsers()
-  }, []);
-
   const getSettings = () => {
     fetch(globalUrl + "/api/v1/getsettings", {
       method: "GET",
@@ -2186,7 +2191,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       primary: "Workflows",
       secondary: "",
       active: true,
-      icon: <PolymerIcon style={{ color: itemColor }} />,
+      icon: <CodeIcon style={{ color: itemColor }} />,
     },
     {
       primary: "Apps",
@@ -2386,7 +2391,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 										renderValue={(selected) => selected.join(', ')}
 										MenuProps={MenuProps}
 									>
-										{["contacted", "lead", "pov", "demo done", "customer", "student", ].map((name) => (
+										{["contacted", "lead", "pov", "demo done", "customer", "student", "internal"].map((name) => (
 											<MenuItem key={name} value={name}>
 												<Checkbox checked={selectedStatus.indexOf(name) > -1} />
 												<ListItemText primary={name} />
@@ -2755,7 +2760,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
             		            item.usage === null ? 0 : item.usage,
             		          data_collection: "None",
             		          active: item.active,
-            		          icon: <PolymerIcon style={{ color: itemColor }} />,
+            		          icon: <CodeIcon style={{ color: itemColor }} />,
             		        };
 
             		        return (
@@ -4356,7 +4361,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
           <Tab
             disabled={userdata.admin !== "true"}
             label=<span>
-              <EcoIcon style={iconStyle} />
+              <CodeIcon style={iconStyle} />
               Environments
             </span>
           />

frontend/src/views/AngularWorkflow.jsx

@@ -10,7 +10,7 @@ import { useNavigate, Link, useParams } from "react-router-dom";
 // import { Prompt } from "react-router"; // FIXME
 import { useBeforeunload } from "react-beforeunload";
 import ReactJson from "react-json-view";
-import NestedMenuItem from "material-ui-nested-menu-item";
+import { NestedMenuItem } from "mui-nested-menu"
 import ReactMarkdown from "react-markdown";
 import { useAlert } from "react-alert";
 import theme from '../theme.jsx';
@@ -87,7 +87,7 @@ import {
   ArrowLeft as ArrowLeftIcon,
   Cached as CachedIcon,
   DirectionsRun as DirectionsRunIcon,
-  Polymer as PolymerIcon,
+  Code as CodeIcon,
   FormatListNumbered as FormatListNumberedIcon,
   PlayArrow as PlayArrowIcon,
   AspectRatio as AspectRatioIcon,
@@ -108,15 +108,12 @@ import {
   AddComment as AddCommentIcon,
   Edit as EditIcon,
 	Send as SendIcon,
-} from "@material-ui/icons";
-
-import {
   Preview as PreviewIcon,
   ContentCopy as ContentCopyIcon,
   Circle as  CircleIcon,
 	SquareFoot as SquareFootIcon,
 	AutoFixHigh as AutoFixHighIcon,
-} from '@mui/icons-material';
+} from "@mui/icons-material";
 
 import Autocomplete from "@material-ui/lab/Autocomplete";
 
@@ -4998,6 +4995,8 @@ const AngularWorkflow = (defaultprops) => {
     const edgeData = event.target.data();
     if (edgeData.decorator === true) {
       return;
+
+
     }
 
     const cytoscapeElement = document.getElementById("cytoscape_view")
@@ -12162,7 +12161,7 @@ const AngularWorkflow = (defaultprops) => {
                   margin: "0px 0px 0px 0px",
                 }}
               >
-                <PolymerIcon style={{ marginRight: 10 }} />
+                <CodeIcon style={{ marginRight: 10 }} />
                 Workflows
               </h2>
             </Link>

frontend/src/views/AppCreator.jsx

@@ -39,11 +39,8 @@ import {
 	ZoomInOutlined as ZoomInOutlinedIcon,
 	ZoomOutOutlined as ZoomOutOutlinedIcon,
 	Loop as LoopIcon,
-} from "@material-ui/icons";
-
-import {
 	AddPhotoAlternate as AddPhotoAlternateIcon,
-} from '@mui/icons-material';
+} from "@mui/icons-material";
 
 import { v4 as uuidv4 } from "uuid";
 import { Link, useParams } from "react-router-dom";

frontend/src/views/Apps.jsx

@@ -46,7 +46,7 @@ import {
 	Search as SearchIcon,
 	Folder as FolderIcon,
 	LibraryBooks as LibraryBooksIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 import {
 	ForkRight as ForkRightIcon,

frontend/src/views/Dashboard.jsx

@@ -33,7 +33,7 @@ import {
 	CheckBox as CheckBoxIcon,
 	CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
 	OpenInNew as OpenInNewIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 import WorkflowPaper from "../components/WorkflowPaper.jsx"
 import { removeParam } from "../views/AngularWorkflow.jsx"

frontend/src/views/DashboardViews.jsx

@@ -33,7 +33,7 @@ import {
 	CheckBox as CheckBoxIcon,
 	CheckBoxOutlineBlank as CheckBoxOutlineBlankIcon,
 	OpenInNew as OpenInNewIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 import WorkflowPaper from "../components/WorkflowPaper.jsx"
 import { removeParam } from "../views/AngularWorkflow.jsx"

frontend/src/views/Docs.jsx

@@ -23,7 +23,7 @@ import {
 import { 
 	Link as LinkIcon, 
 	Edit as EditIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 const Body = {
   //maxWidth: 1000,

frontend/src/views/Faq.jsx

@@ -3,7 +3,7 @@ import {isMobile} from "react-device-detect";
 import {Link} from 'react-router-dom';
 
 import {Divider, List, ListItem, ListItemText, Card, CardContent, Grid, Typography, Button, ButtonGroup, FormControl, Dialog, DialogTitle, DialogActions, DialogContent, Tooltip}  from '@material-ui/core';
-import {ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon} from '@material-ui/icons';
+import {ExpandMore as ExpandMoreIcon, ExpandLess as ExpandLessIcon} from '@mui/icons-material';
 
 const hrefStyle = {
 	textDecoration: "none",
@@ -255,4 +255,4 @@ const Faq = (props) => {
 	)
 }
 
-export default Faq;
+export default Faq;

frontend/src/views/GettingStarted.jsx

@@ -58,7 +58,6 @@ import {
   CloudDownload as CloudDownloadIcon,
 } from "@mui/icons-material";
 
-import NestedMenuItem from "material-ui-nested-menu-item";
 //import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon, Done as DoneIcon, Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
 
 //https://next.material-ui.com/components/material-icons/
@@ -1061,13 +1060,6 @@ const GettingStarted = (props) => {
           <FileCopyIcon style={{ marginLeft: 0, marginRight: 8 }} />
           {"Duplicate Workflow"}
         </MenuItem>
-        {/*<NestedMenuItem disabled={userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length === 1 || userdata.orgs.length >= 0} style={{backgroundColor: inputColor, color: "white"}} onClick={() => {
-					//copyWorkflow(data)		
-					//setOpen(false)
-				}} key={"duplicate"}>
-					<FileCopyIcon style={{marginLeft: 0, marginRight: 8}}/>
-					{"Copy to Child Org"}
-				</NestedMenuItem>*/}
         <MenuItem
           style={{ backgroundColor: inputColor, color: "white" }}
           onClick={() => {

frontend/src/views/Landingpage.jsx

@@ -4,9 +4,11 @@ import Paper from "@material-ui/core/Paper";
 import Button from "@material-ui/core/Button";
 import Divider from "@material-ui/core/Divider";
 import { BrowserView, MobileView } from "react-device-detect";
-import ScheduleIcon from "@material-ui/icons/Schedule";
+import {
-import Web from "@material-ui/icons/Web";
+	Schedule as ScheduleIcon, 
-import AccountTree from "@material-ui/icons/AccountTree";
+	Web as WebIcon,
+	AccountTree as AccountTreeIcon,
+} from "@mui/icons-material";
 
 const bodyDivStyle = {
   margin: "auto",

frontend/src/views/LandingpageNew.jsx

@@ -11,12 +11,14 @@ import Divider from "@material-ui/core/Divider";
 import Grid from "@material-ui/core/Grid";
 import { BrowserView, MobileView } from "react-device-detect";
 
-import ScheduleIcon from "@material-ui/icons/Schedule";
+import {
-import Web from "@material-ui/icons/Web";
+	Schedule as ScheduleIcon, 
-import AccountTree from "@material-ui/icons/AccountTree";
+	Web as WebIcon, 
-import InfoIcon from "@material-ui/icons/Info";
+	AccountTree as AccountTreeIcon, 
-import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
+	Info as InfoIcon, 
-import CreateIcon from "@material-ui/icons/Create";
+	ArrowForward as ArrowForwardIcon, 
+	Create as CreateIcon, 
+} from "@mui/icons-material";
 
 const bodyDivStyle = {
   margin: "auto",
@@ -86,7 +88,7 @@ const LandingPage = (props) => {
       "Simple integrations",
       "Easily use others' or create your own integration",
       "/docs/features",
-      <Web
+      <WebIcon
         style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
       />
     ),
@@ -94,7 +96,7 @@ const LandingPage = (props) => {
       "Workflows",
       "Access the power of automation within minutes, whether its on premise or in the cloud",
       "/docs/features",
-      <AccountTree
+      <AccountTreeIcon
         style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
       />
     ),

frontend/src/views/Search.jsx

@@ -15,10 +15,10 @@ import {
 
 import {
 	Apps as AppsIcon,
-	Polymer as PolymerIcon,
+	Code as CodeIcon,
 	EmojiObjects as EmojiObjectsIcon,
   Description as DescriptionIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 
 const bodyDivStyle = {
@@ -137,7 +137,7 @@ const Search = (props) => {
 					/>
 					<Tab
 						label=<span>
-							<PolymerIcon style={iconStyle} /> Workflows
+							<CodeIcon style={iconStyle} /> Workflows
 						</span>
 					/>
 					<Tab

frontend/src/views/Services.jsx

@@ -3,7 +3,7 @@ import React, {useState } from 'react';
 import { useNavigate, Link, useParams } from "react-router-dom";
 import {isMobile} from "react-device-detect";
 
-import {Done as DoneIcon, Clear as ClearIcon} from '@material-ui/icons';
+import {Done as DoneIcon, Clear as ClearIcon} from '@mui/icons-material';
 import {Paper, Divider, List, ListItem, ListItemText, Card, CardContent, Grid, Typography, Button, ButtonGroup, FormControl, Dialog, DialogTitle, DialogActions, DialogContent, Tooltip}  from '@material-ui/core';
 import FAQ from "./Faq.jsx";
 import Newsletter from "../components/Newsletter.jsx";

frontend/src/views/Workflows.jsx

@@ -79,7 +79,7 @@ import {
 	RadioButtonUnchecked as RadioButtonUncheckedIcon,
   ArrowLeft as ArrowLeftIcon,
   ArrowRight as ArrowRightIcon,
-} from "@material-ui/icons";
+} from "@mui/icons-material";
 
 //import NestedMenuItem from "material-ui-nested-menu-item";
 //import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon,  Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
@@ -3468,7 +3468,7 @@ const Workflows = (props) => {
             </div>
           ) : null}
 
-					{userdata.priorities !== undefined && userdata.priorities !== null && userdata.priorities.length > 0 && userdata.priorities[0].name.includes("CPU") ?
+					{userdata.priorities !== undefined && userdata.priorities !== null && userdata.priorities.length > 0 && userdata.priorities[0].name.includes("CPU") && userdata.priorities[0].active === true ?
 						<div style={{border: "1px solid rgba(255,255,255,0.1)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
 							<div style={{flex: 2, overflow: "hidden",}}>
 								<Typography variant="body1" >