Fixed most of the new MUI problems. Missing /admin and other button disabled issues

frontend/src/components/ConfigureWorkflow.jsx

@@ -14,7 +14,7 @@ import {
   List,
   ListItem,
   ListItemText,
-  Fade,
+  Collapse,
 } from "@mui/material";
 import { 
 	FavoriteBorder as FavoriteBorderIcon,

frontend/src/components/Dropzone.jsx

@@ -56,7 +56,11 @@ const Dropzone = ({ children, style, onDrop }) => {
   };
 
   useEffect(() => {
-    if (!dropzoneRef.current) return;
+    if (dropzoneRef === null || dropzoneRef === undefined || dropzoneRef.current === null || dropzoneRef.current === undefined) {
+	  	return
+	}
+
+	// Check if event listene exists for dropzoneRef.current
 
     dropzoneRef.current.addEventListener("dragover", handleDragOver);
     dropzoneRef.current.addEventListener("dragenter", handleDragEnter);
@@ -64,6 +68,10 @@ const Dropzone = ({ children, style, onDrop }) => {
     dropzoneRef.current.addEventListener("drop", handleDrop);
 
     return () => {
+		if (dropzoneRef.current === null || dropzoneRef.current === undefined) {
+			return
+		}
+
       dropzoneRef.current.removeEventListener("dragover", handleDragOver);
       dropzoneRef.current.removeEventListener("dragenter", handleDragEnter);
       dropzoneRef.current.removeEventListener("dragleave", handleDragLeave);

frontend/src/components/Header.jsx

@@ -688,7 +688,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 										{/*
 										<PolymerIcon style={{marginRight: "5px"}} />
 										*/}
-										<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
+										<Typography style={{marginTop: 0, marginRight: 8, }}>Workflows</Typography>
 									</div> 
 								</Link>
       	 			</ListItem>
@@ -698,7 +698,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<AppsIcon style={{marginRight: "5px"}} />
 											*/}
-											<span style={{marginTop: 0, marginRight: 5,  }}>Apps</span>
+											<Typography style={{marginTop: 0, marginRight: 5,  }}>Apps</Typography>
 										</div>
 								</Link>
       	 			</ListItem>
@@ -715,7 +715,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<DescriptionIcon style={{marginRight: "5px"}} />
 											*/}
-											<span style={{marginTop: 0,}}>Docs</span>
+											<Typography style={{marginTop: 0,}}>Docs</Typography>
 										</div>
 								</Link>
       	 			</ListItem>

frontend/src/components/Oauth2Auth.jsx

@@ -36,7 +36,7 @@ import {
   Breadcrumbs,
   CircularProgress,
   Switch,
-  Fade,
+  Collapse,
 } from "@mui/material";
 import { 
 	LockOpen as LockOpenIcon,

frontend/src/components/OrgHeader.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import theme from '../theme.jsx';
 import { makeStyles } from "@mui/styles";
-import { useTheme } from "@material-ui/core/styles";
 
 import Tooltip from "@material-ui/core/Tooltip";
 import Grid from "@material-ui/core/Grid";

frontend/src/components/ParsedAction.jsx

@@ -43,7 +43,7 @@ import {
   Breadcrumbs,
   CircularProgress,
   Switch,
-  Fade,
+  Collapse,
 	Autocomplete 
 } from "@mui/material";
 

frontend/src/components/Searchfield.jsx

@@ -206,11 +206,12 @@ const SearchField = props => {
 							const avatar = baseImage
 
 							var parsedUrl = isCloud ? `/workflows/${hit.objectID}` : `https://shuffler.io/workflows/${hit.objectID}`
+
 							parsedUrl += `?queryID=${hit.__queryID}`
 
 							// <a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
 							return (
-								<Link key={hit.objectID} to={{ pathname: parsedUrl }} rel="noopener noreferrer" style={{textDecoration: "none", color: "white",}} onClick={(event) => {
+								<Link key={hit.objectID} to={parsedUrl} rel="noopener noreferrer" style={{textDecoration: "none", color: "white",}} onClick={(event) => {
 									//console.log("CLICK")
 									setSearchOpen(true)
 
@@ -402,7 +403,7 @@ const SearchField = props => {
 							parsedUrl += `?queryID=${hit.__queryID}`
 
 							return (
-								<Link key={hit.objectID} to={{ pathname: parsedUrl }} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
+								<Link key={hit.objectID} to={parsedUrl} style={{textDecoration: "none", color: "white",}} onClick={(event) => {
 									console.log("CLICK")
 									setSearchOpen(true)
 
@@ -558,7 +559,8 @@ const SearchField = props => {
 						if (parsedUrl.includes("/apps/")) {
 							const extraHash = hit.url_hash === undefined ? "" : `#${hit.url_hash}`
 
-							parsedUrl = `/apps/${hit.filename}?tab=docs&queryID=${hit.__queryID}${extraHash}`
+							parsedUrl = `/apps/${hit.filename}`
+							parsedUrl += `?tab=docs&queryID=${hit.__queryID}${extraHash}`
 						}
 
 						return (

frontend/src/components/ShuffleCodeEditor.jsx

@@ -46,10 +46,10 @@ import ReactJson from "react-json-view";
 import PaperComponent from "../components/PaperComponent.jsx";
 
 import CodeMirror from '@uiw/react-codemirror';
-import 'codemirror/keymap/sublime';
-import 'codemirror/addon/selection/mark-selection.js'
-import 'codemirror/theme/gruvbox-dark.css';
-import 'codemirror/theme/duotone-light.css';
+//import 'codemirror/keymap/sublime';
+//import 'codemirror/addon/selection/mark-selection.js'
+//import 'codemirror/theme/gruvbox-dark.css';
+//import 'codemirror/theme/duotone-light.css';
 import {indentWithTab} from "@codemirror/commands"
 import { padding, textAlign } from '@mui/system';
 import data from '../frameworkStyle.jsx';

frontend/src/components/WelcomeForm2.jsx

@@ -16,7 +16,7 @@ import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 import theme from '../theme.jsx';
 import {
 	Button,
-  	Fade,
+  	Collapse,
 		IconButton,
     FormGroup,
     FormControl,
@@ -506,7 +506,7 @@ const WelcomeForm = (props) => {
         switch (step) {
             case 0:
                 return (
-									<Fade in={true}>
+									<Collapse in={true}>
                     <Grid container spacing={1} style={{margin: "auto", maxWidth: 500, minWidth: 500, minHeight: sizing, maxHeight: sizing, }}>
 											{/*isCloud ? null :
 												<Typography variant="body1" style={{marginLeft: 8, marginTop: 10, marginRight: 30, }} color="textSecondary">
@@ -587,11 +587,11 @@ const WelcomeForm = (props) => {
                             </FormControl>
                         </Grid>
                     </Grid>
-									</Fade>
+									</Collapse>
                 )
             case 1:
                 return (
-									<Fade in={true}>
+									<Collapse in={true}>
                     <div style={{minHeight: sizing, maxHeight: sizing, marginTop: 20, maxWidth: 500, }}>
 												<Typography variant="body1" style={{marginLeft: 8, marginTop: 50, marginRight: 30, marginBottom: 0, }} color="textSecondary">
 													Apps for each category are shown based on your activity and can be changed by clicking their icon. We will help you connect them later.
@@ -684,11 +684,11 @@ const WelcomeForm = (props) => {
                         </Grid>
 												*/}
 											</div>
-									</Fade>
+									</Collapse>
                 )
             case 2:
                 return (
-									<Fade in={true}>
+									<Collapse in={true}>
                     <div style={{marginTop: 0, maxWidth: 700, minWidth: 700, margin: "auto", minHeight: sizing, maxHeight: sizing, }}>
 												<Typography variant="body1" style={{marginTop: 15, marginBottom: 0, maxWidth: 500, margin: "auto", marginBottom: 15, }} color="textSecondary">
 													These are some of our Workflow templates, used to start new Workflows. Use the right and left buttons to find <a href="/usecases" target="_blank" rel="norefferer" style={{color: "#f86a3e", textDecoration: "none", }}>new Usecases</a>, and click the orange button to build it.
@@ -755,7 +755,7 @@ const WelcomeForm = (props) => {
        										</div>
 												</div>
 										</div>
-									</Fade>
+									</Collapse>
                 )
             default:
                 return "unknown step"