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

frontend/src/components/AlertTemplate.js

@@ -1,8 +1,10 @@
 import React from "react";
-import InfoIcon from "@material-ui/icons/Info";
-import CheckIcon from "@material-ui/icons/Check";
-import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline";
-import CloseIcon from "@material-ui/icons/Close";
+import {
+	Info as InfoIcon, 
+	Check as CheckIcon, 
+	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";
-import data from "./frameworkStyle.jsx";
+} from "@mui/icons-material";
 
 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 SaveIcon from "@material-ui/icons/Save";
+
+import {
+	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 ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-import SaveIcon from "@material-ui/icons/Save";
+import {
+	ExpandLess as ExpandLessIcon, 
+	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';