Fixed some of the first basic rendering issues

backend/go-app/main.go

@@ -6052,9 +6052,16 @@ func initHandlers() {
 	r.HandleFunc("/api/v1/orgs/{orgId}/list_cache", shuffle.HandleListCacheKeys).Methods("GET", "OPTIONS")
 	r.HandleFunc("/api/v1/orgs/{orgId}/get_cache", shuffle.HandleGetCacheKey).Methods("POST", "OPTIONS")
 	r.HandleFunc("/api/v1/orgs/{orgId}/set_cache", shuffle.HandleSetCacheKey).Methods("POST", "OPTIONS")
-	r.HandleFunc("/api/v1/orgs/{orgId}/cache/{cache_key}", shuffle.HandleDeleteCacheKey).Methods("DELETE", "OPTIONS")
+
 	r.HandleFunc("/api/v1/orgs/{orgId}/stats", shuffle.HandleGetStatistics).Methods("GET", "OPTIONS")
-	r.HandleFunc("/api/v1/orgs/{orgId}/revisions", shuffle.GetWorkflowRevisions).Methods("GET", "OPTIONS")
+
+	r.HandleFunc("/api/v1/orgs/{orgId}/cache", shuffle.HandleListCacheKeys).Methods("GET", "OPTIONS")
+	r.HandleFunc("/api/v1/orgs/{orgId}/cache", shuffle.HandleSetCacheKey).Methods("POST", "OPTIONS")
+	r.HandleFunc("/api/v1/orgs/{orgId}/cache/{cache_key}", shuffle.HandleDeleteCacheKey).Methods("DELETE", "OPTIONS")
+	r.HandleFunc("/api/v1/orgs/{orgId}/datastore", shuffle.HandleListCacheKeys).Methods("GET", "OPTIONS")
+	r.HandleFunc("/api/v1/orgs/{orgId}/datastore", shuffle.HandleSetCacheKey).Methods("POST", "OPTIONS")
+	r.HandleFunc("/api/v1/orgs/{orgId}/datastore/{cache_key}", shuffle.HandleDeleteCacheKey).Methods("DELETE", "OPTIONS")
+
 
 	// Docker orborus specific - downloads an image
 	r.HandleFunc("/api/v1/get_docker_image", getDockerImage).Methods("POST", "OPTIONS")

frontend/package.json

@@ -13,6 +13,7 @@
     "@mui/material": "^5.14.0",
     "@mui/styles": "^5.14.0",
     "@mui/x-data-grid": "^5.17.11",
+    "@mui/x-date-pickers": "^6.11.1",
     "@uiw/codemirror-themes": "^4.21.7",
     "@uiw/react-codemirror": "^4.21.7",
     "@use-it/interval": "^1.0.0",
@@ -24,6 +25,7 @@
     "cytoscape-edgehandles": "^3.6.0",
     "cytoscape-node-html-label": "^1.1.5",
     "d3": "^7.1.1",
+    "dayjs": "^1.11.9",
     "dotenv": "^6.1.0",
     "downshift": "^3.3.5",
     "github-markdown-css": "^3.0.1",
@@ -36,11 +38,11 @@
     "jss-nested": "^6.0.1",
     "jss-props-sort": "^6.0.0",
     "jss-vendor-prefixer": "^8.0.1",
-    "material-ui-chip-input": "^2.0.0-beta.2",
     "md5-file": "^4.0.0",
     "mdbreact": "^4.21.1",
     "mime": "^3.0.0",
     "moment": "^2.29.1",
+    "mui-chips-input": "^2.1.3",
     "mui-nested-menu": "^3.2.1",
     "process": "^0.11.10",
     "react": "^18.2.0",

frontend/src/App.jsx

@@ -167,7 +167,7 @@ const App = (message, props) => {
   const includedData =
       <div
         style={{
-          backgroundColor: "#1F2023",
+          backgroundColor: theme.palette.backgroundColor,
           color: "rgba(255, 255, 255, 0.65)",
           minHeight: "100vh",
         }}

frontend/src/components/AppFramework.jsx

@@ -18,21 +18,19 @@ import {
 	Divider,
 	IconButton, 
 	Badge,
-  CircularProgress,
+  	CircularProgress,
 	Tooltip,
 	Dialog,
 	Chip,
 	Avatar,
-} from "@material-ui/core";
+	Button,
+} from "@mui/material";
 
-import { 
-	Button 
-} from '@material-ui/core';
 
 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";
@@ -1996,7 +1994,7 @@ const AppFramework = (props) => {
 
   		{
 				Object.getOwnPropertyNames(discoveryData).length > 0 ? 
-					<Paper style={{width: 275, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 35, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
+					<Paper style={{width: 300, maxHeight: 400, overflow: "hidden", zIndex: 12500, padding: 25, paddingRight: 25, backgroundColor: theme.palette.surfaceColor, border: "1px solid rgba(255,255,255,0.2)", position: "absolute", top: -50, left: 50, }}>
 						{paperTitle.length > 0 ? 
 							<span>
 								<Typography variant="h6" style={{textAlign: "center"}}>
@@ -2130,7 +2128,7 @@ const AppFramework = (props) => {
 									? 
 									<span>
 										<Typography variant="body2" color="textSecondary" style={{marginTop: 10}}>
-											Click an app below to select it
+											Search to find your app 
 										</Typography>
 									</span>
 									:
@@ -2165,7 +2163,7 @@ const AppFramework = (props) => {
 				elements={elements} 
 				minZoom={0.35}
 				maxZoom={2.00}
-				style={{width: 560*scale, height: 560*scale, backgroundColor: "transparent", margin: "auto",}} 
+				style={{width: 560*scale, height: 560*scale, backgroundColor: theme.palette.backgroundColor, margin: "auto",}} 
 				stylesheet={frameworkStyle}
 				boxSelectionEnabled={false}
 				panningEnabled={false}

frontend/src/components/Appsearch.jsx

@@ -1,14 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import ReactGA from 'react-ga4';
-import { useTheme } from '@material-ui/core/styles';
+import theme from '../theme';
+//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';
 import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
-import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@material-ui/core';
+import { 
+	Grid, 
+	Paper, 
+	TextField, 
+	ButtonBase, 
+	InputAdornment, 
+	Typography, 
+	Button, 
+	Tooltip
+} from '@mui/material';
+
 import aa from 'search-insights'
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const Appsearch = props => {
@@ -18,7 +29,7 @@ const Appsearch = props => {
   const alert = useAlert();
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
-	const theme = useTheme();
+	//const theme = useTheme();
 	//const [apps, setApps] = React.useState([]);
 	//const [filteredApps, setFilteredApps] = React.useState([]);
 	const [formMail, setFormMail] = React.useState("");

frontend/src/components/EditWorkflow.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useContext } from "react";
 import theme from '../theme.jsx';
 import { isMobile } from "react-device-detect" 
-import ChipInput from "material-ui-chip-input";
+import { MuiChipsInput } from "mui-chips-input";
 import UsecaseSearch from "../components/UsecaseSearch.jsx"
 import dayjs from 'dayjs';
 
@@ -38,7 +38,7 @@ import {
 	FormControl,
 	FormLabel,
 
-} from "@material-ui/core";
+} from "@mui/material";
 
 import { 
 	DatePicker, 
@@ -52,7 +52,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
@@ -260,7 +260,7 @@ const EditWorkflow = (props) => {
 				/>
 			</div>
 						<div style={{display: "flex", marginTop: 10, }}>
-							<ChipInput
+							<MuiChipsInput
 								style={{ flex: 1, maxHeight: 40, marginTop: 12, overflow: "auto",  }}
 								InputProps={{
 									style: {

frontend/src/components/Files.jsx

@@ -15,7 +15,7 @@ import {
 	Divider,
 	Select,
 	MenuItem,
-} from "@material-ui/core";
+} from "@mui/material";
 
 import {
   OpenInNew as OpenInNewIcon,
@@ -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

@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
+import theme from '../theme.jsx';
 import {BrowserView, MobileView} from "react-device-detect";
-import { useTheme } from '@material-ui/core/styles';
+//import { useTheme } from '@material-ui/core/styles';
 
 import { useNavigate, Link } from "react-router-dom";
 import ReactGA from 'react-ga4';
@@ -21,7 +22,7 @@ import {
 	IconButton,
 	Divider,
 	LinearProgress, 
-} from '@material-ui/core'
+} from '@mui/material'
 
 import { 
 	MeetingRoom as MeetingRoomIcon, 
@@ -29,12 +30,13 @@ import {
 	Settings as SettingsIcon, 
 	Notifications as NotificationsIcon, 
 	Home as HomeIcon, 
-	Polymer as PolymerIcon, 
 	Apps as AppsIcon, 
 	Description as DescriptionIcon,
 	EmojiObjects as EmojiObjectsIcon,
   Business as BusinessIcon,
-} from '@material-ui/icons';
+
+	Polyline as PolylineIcon, 
+} from '@mui/icons-material';
 
 import {
 	Analytics as AnalyticsIcon,
@@ -49,7 +51,7 @@ const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
 const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
-	const theme = useTheme();
+	//const theme = useTheme();
 	const alert = useAlert()
 
 
@@ -519,6 +521,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 	}
 
 	// Handle top bar or something
+  const defaultTop = 7
   const loginTextBrowser = !isLoggedIn ? 
     <div style={{display: "flex", minWidth: 1250, maxWidth: 1250, margin: "auto", textAlign: "center",}}>
 			<div style={{display: "flex", flex: 1, }}>
@@ -669,7 +672,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 			</div>
 	    </div>
     	: 
-		<div style={{display: "flex", backgroundColor: "#1f2023",}}>
+		<div style={{display: "flex", }}>
 			<div style={{minWidth: 1250, maxWidth: 1250, display: "flex", margin: "auto", }}>
 				<div style={{flex: 1, flexDirection: "row"}}>
 					<List style={{height: 56, marginTop: "auto", marginBottom: "auto", display: "flex", flexDirect: "row", alignItems: "baseline", maxWidth: 340, }} component="nav">
@@ -691,9 +694,9 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 								<Link to="/workflows" style={hrefStyle}>
 									<div onMouseOver={handleSoarHover} onMouseOut={handleSoarHoverOut} style={{color: SoarHoverColor, cursor: "pointer", display: "flex"}}>
 										{/*
-										<PolymerIcon style={{marginRight: "5px"}} />
+										<PolylineIcon style={{marginRight: "5px"}} />
 										*/}
-										<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
+										<Typography style={{marginTop: defaultTop, marginRight: 8, }}>Workflows</Typography>
 									</div> 
 								</Link>
       	 			</ListItem>
@@ -703,7 +706,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<AppsIcon style={{marginRight: "5px"}} />
 											*/}
-											<span style={{marginTop: 0, marginRight: 5,  }}>Apps</span>
+											<Typography style={{marginTop: defaultTop, marginRight: 5,  }}>Apps</Typography>
 										</div>
 								</Link>
       	 			</ListItem>
@@ -720,7 +723,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<DescriptionIcon style={{marginRight: "5px"}} />
 											*/}
-											<span style={{marginTop: 0,}}>Docs</span>
+											<Typography style={{marginTop: defaultTop,}}>Docs</Typography>
 										</div>
 								</Link>
       	 			</ListItem>
@@ -1029,16 +1032,16 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 	const loadedCheck = 
 		<div style={{minHeight: 68}}>
 			<BrowserView>
-      	{loginTextBrowser}
+      			{loginTextBrowser}
 			</BrowserView>
 			<MobileView>
-      	{loginTextMobile}
+      			{loginTextMobile}
 			</MobileView>
 		</div>
     // <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
   	return (
-    	<div style={{backgroundColor: props.color === "undefined" ? "inherit" : props.color}}>
+    	<div style={{backgroundColor: theme.palette.backgroundColor, }}>
-				{loadedCheck}
+			{loadedCheck}
 	    </div>
   )
 }

frontend/src/components/Oauth2Auth.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { useParams, useNavigate, Link } from "react-router-dom";
-import { useTheme } from "@material-ui/core/styles";
+//import { useTheme } from "@material-ui/core/styles";
 import theme from '../theme.jsx';
 import { useAlert } from "react-alert";
 
@@ -38,7 +38,8 @@ import {
   CircularProgress,
   Switch,
   Fade,
-} from "@material-ui/core";
+} from "@mui/material";
+
 import { 
 	LockOpen as LockOpenIcon,
 	SupervisorAccount as SupervisorAccountIcon,

frontend/src/components/OrgHeader.jsx

@@ -1,17 +1,23 @@
 import React, { useEffect } from "react";
-import { makeStyles } from "@material-ui/styles";
+import theme from "../theme";
-import { useTheme } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
+
+import {
+	Tooltip,
+	Grid,
+	Button,
+	TextField,
+	Typography,
+	IconButton,
+} from "@mui/material";
+
+import {
+	ExpandLess as ExpandLessIcon,
+	ExpandMore as ExpandMoreIcon,
+	Save as SaveIcon,
+} from "@mui/icons-material";
 
-import Tooltip from "@material-ui/core/Tooltip";
-import Grid from "@material-ui/core/Grid";
-import Button from "@material-ui/core/Button";
-import TextField from "@material-ui/core/TextField";
-import Typography from "@material-ui/core/Typography";
 import { 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";
 
 const useStyles = makeStyles({
   notchedOutline: {
@@ -33,7 +39,6 @@ const OrgHeader = (props) => {
   	handleEditOrg, 
   } = props;
 
-  const theme = useTheme();
   const alert = useAlert();
   const classes = useStyles();
 

frontend/src/components/Priorities.jsx

@@ -9,7 +9,7 @@ import {
 	Grid,
 	Card,
   Switch,
-} from "@material-ui/core";
+} from "@mui/material";
 
 import Priority from "../components/Priority.jsx";
 import { useAlert } from "react-alert";

frontend/src/components/Priority.jsx

@@ -10,7 +10,7 @@ import {
 	Button,
 	Grid,
 	Card,
-} from "@material-ui/core";
+} from "@mui/material";
 
 // import magic wand icon from material ui icons 
 import {
@@ -69,7 +69,7 @@ const Priority = (props) => {
 
 
 	return (
-		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" : "1px solid rgba(255,255,255,0.3)", 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: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" : "1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 95, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
 			<div style={{flex: 2, overflow: "hidden",}}>
 				<span style={{display: "flex", }}>
 					{priority.type === "usecase" || priority.type == "apps" ? <AutoFixHighIcon style={{height: 19, width: 19, marginLeft: 3, marginRight: 10, }}/> : null} 
@@ -102,7 +102,7 @@ const Priority = (props) => {
 				}
 			</div>
 			<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
-				<Button style={{height: 50, borderRadius: 25,  marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "white", }} variant="contained" color="secondary" onClick={() => {
+				<Button style={{height: 50, borderRadius: 25,  marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
 
 					if (isCloud) {
 						ReactGA.event({
@@ -125,7 +125,7 @@ const Priority = (props) => {
 						}
 					}
 				}}>
-					explore		
+					Explore		
 				</Button>
 				{priority.active === true ?
 					<Button style={{borderRadius: 25, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {

frontend/src/components/WelcomeForm2.jsx

@@ -615,7 +615,7 @@ const WelcomeForm = (props) => {
                         <Grid item xs={11} style={{marginTop: 25, }}>
                             {/*<FormLabel style={{ color: "#B9B9BA" }}>Find your integrations!</FormLabel>*/}
                             <div style={{display: "flex"}}>
-															<Button disabled={finishedApps.includes("CASES")} variant={defaultSearch === "CASES" ? "contained" : "outlined"}  style={{
+															<Button disabled={finishedApps.includes("CASES")} variant={defaultSearch === "CASES" ? "contained" : "outlined"} color="secondary" style={{
 																flex: 1,
 																width: "100%", 
 																padding: 25,
@@ -627,20 +627,20 @@ const WelcomeForm = (props) => {
 															</Button>
                             </div>
                             <div style={{display: "flex"}}>
-															<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} onClick={(event) => { onNodeSelect("SIEM") }} >
+															<Button disabled={finishedApps.includes("SIEM")} variant={defaultSearch === "SIEM" ? "contained" : "outlined"} style={buttonStyle} startIcon={<SearchIcon />} color="secondary" onClick={(event) => { onNodeSelect("SIEM") }} >
 																	SIEM
 															</Button>
-															<Button disabled={finishedApps.includes("EDR & AV") || finishedApps.includes("ERADICATION")} variant={defaultSearch === "Eradication" ? "contained" : "outlined"}  style={buttonStyle} startIcon={<NewReleasesIcon />} onClick={(event) => { onNodeSelect("ERADICATION") }} >
+															<Button disabled={finishedApps.includes("EDR & AV") || finishedApps.includes("ERADICATION")} variant={defaultSearch === "Eradication" ? "contained" : "outlined"}  style={buttonStyle} startIcon={<NewReleasesIcon />} color="secondary" onClick={(event) => { onNodeSelect("ERADICATION") }} >
 																	Endpoint
 															</Button>
                             </div>
                             <div style={{display: "flex"}}>
-															<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"}  style={buttonStyle} startIcon={<ExtensionIcon />} onClick={(event) => { onNodeSelect("INTEL") }} >
+															<Button disabled={finishedApps.includes("INTEL")} variant={defaultSearch === "INTEL" ? "contained" : "outlined"}  style={buttonStyle} startIcon={<ExtensionIcon />} color="secondary" onClick={(event) => { onNodeSelect("INTEL") }} >
 															
 
 																	Intel
 															</Button>
-															<Button disabled={finishedApps.includes("COMMS") || finishedApps.includes("EMAIL")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} onClick={(event) => { onNodeSelect("EMAIL") }} >
+															<Button disabled={finishedApps.includes("COMMS") || finishedApps.includes("EMAIL")} variant={defaultSearch === "EMAIL" ? "contained" : "outlined"} style={buttonStyle} startIcon={<EmailIcon />} color="secondary" onClick={(event) => { onNodeSelect("EMAIL") }} >
 																	Email
 															</Button>
                             </div>

frontend/src/views/Admin.jsx

@@ -1,16 +1,14 @@
 import React, { useState, useEffect } from "react";
 
-import { makeStyles } from "@material-ui/styles";
+import theme from "../theme.jsx";
+import { makeStyles } from "@mui/styles";
+
 import { useNavigate, Link } from "react-router-dom";
 import countries from "../components/Countries.jsx";
 import CodeEditor from "../components/ShuffleCodeEditor.jsx";
 import getLocalCodeData from "../components/ShuffleCodeEditor.jsx";
 import 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,
   InputLabel,
@@ -45,19 +43,21 @@ import {
   DialogContent,
   CircularProgress,
   Box,
-	InputAdornment,
+  InputAdornment,
-} from "@material-ui/core";
+  Autocomplete 
-
+} from "@mui/material";
-import { Autocomplete } from "@mui/material";
 
 import {
+  Add as AddIcon,
+  Clear as ClearIcon,
+  Storage as StorageIcon,
   Edit as EditIcon,
   FileCopy as FileCopyIcon,
   SelectAll as SelectAllIcon,
   OpenInNew as OpenInNewIcon,
   CloudDownload as CloudDownloadIcon,
   Description as DescriptionIcon,
-  Polymer as PolymerIcon,
+  Polyline as PolylineIcon,
   CheckCircle as CheckCircleIcon,
   Close as CloseIcon,
   Apps as AppsIcon,
@@ -66,13 +66,14 @@ 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";
+
+  FmdGood as FmdGoodIcon,
+} from "@mui/icons-material";
 
 import { useAlert } from "react-alert";
 import Dropzone from "../components/Dropzone.jsx";
@@ -2199,7 +2200,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: <PolylineIcon style={{ color: itemColor }} />,
     },
     {
       primary: "Apps",
@@ -2753,7 +2754,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: <PolylineIcon style={{ color: itemColor }} />,
             		        };
 
             		        return (
@@ -4356,7 +4357,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} />
+              <FmdGoodIcon style={iconStyle} />
               Environments
             </span>
           />

frontend/src/views/AngularWorkflow.jsx

@@ -2,26 +2,21 @@
 import React, { useState, useEffect, useLayoutEffect } from "react";
 import ReactDOM from "react-dom"
 
+import theme from "../theme.jsx";
 import { useInterval } from "react-powerhooks";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
+import { makeStyles, } from "@mui/styles";
 
 import { v4 as uuidv4 } from "uuid";
 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';
 import { isMobile } from "react-device-detect"
 import aa from 'search-insights'
 import Drift from "react-driftjs";
 
-//import { Cron } from 'react-js-cron';
-//import 'react-js-cron/dist/styles.css'
-
-
 import { InstantSearch, Configure, connectSearchBox, connectHits, Index } from 'react-instantsearch-dom';
 import algoliasearch from 'algoliasearch/lite';
 
@@ -67,11 +62,9 @@ import {
   ListItemText,
   ListItemAvatar,
   Badge,
-} from "@material-ui/core";
-
-import {
   AvatarGroup,
-} from "@mui/material"
+  Autocomplete, 
+} from "@mui/material";
 
 import {
   Folder as FolderIcon,
@@ -87,7 +80,6 @@ import {
   ArrowLeft as ArrowLeftIcon,
   Cached as CachedIcon,
   DirectionsRun as DirectionsRunIcon,
-  Polymer as PolymerIcon,
   FormatListNumbered as FormatListNumberedIcon,
   PlayArrow as PlayArrowIcon,
   AspectRatio as AspectRatioIcon,
@@ -109,28 +101,26 @@ import {
   Edit as EditIcon,
   Send as SendIcon,
   Restore as RestoreIcon, 
-} from "@material-ui/icons";
-
-import {
   Preview as PreviewIcon,
   ContentCopy as ContentCopyIcon,
   Circle as  CircleIcon,
 	SquareFoot as SquareFootIcon,
 	AutoFixHigh as AutoFixHighIcon,
-} from '@mui/icons-material';
 
-import Autocomplete from "@material-ui/lab/Autocomplete";
+  Polyline as PolylineIcon, 
+} from "@mui/icons-material";
+
 
 import * as cytoscape from "cytoscape";
 import * as edgehandles from "cytoscape-edgehandles";
-import * as clipboard from "cytoscape-clipboard";
+//import * as clipboard from "cytoscape-clipboard";
+//import undoRedo from "cytoscape-undo-redo";
+//import cxtmenu from "cytoscape-cxtmenu";
 import CytoscapeComponent from "react-cytoscapejs";
-import undoRedo from "cytoscape-undo-redo";
 
 import Draggable from "react-draggable";
 
 import cytoscapestyle from "../defaultCytoscapeStyle.jsx";
-import cxtmenu from "cytoscape-cxtmenu";
 
 import { validateJson, GetIconInfo } from "./Workflows.jsx";
 import { GetParsedPaths } from "./Apps.jsx";
@@ -236,9 +226,9 @@ const inputColor = "#383B40";
 
 // http://apps.cytoscape.org/apps/yfileslayoutalgorithms
 cytoscape.use(edgehandles);
-cytoscape.use(clipboard);
+//cytoscape.use(clipboard);
-cytoscape.use(undoRedo);
+//cytoscape.use(undoRedo);
-cytoscape.use(cxtmenu);
+//cytoscape.use(cxtmenu);
 
 // Adds specific text to items
 //import popper from 'cytoscape-popper';
@@ -403,9 +393,6 @@ const AngularWorkflow = (defaultprops) => {
   props.match = {}
   props.match.params = params
 
-  //const theme = useTheme();
-
-
   var to_be_copied = "";
   const [firstrequest, setFirstrequest] = React.useState(true);
   const [cystyle] = useState(cytoscapestyle);
@@ -12257,7 +12244,7 @@ const AngularWorkflow = (defaultprops) => {
                   margin: "0px 0px 0px 0px",
                 }}
               >
-                <PolymerIcon style={{ marginRight: 10 }} />
+                <PolylineIcon style={{ marginRight: 10 }} />
                 Workflows
               </h2>
             </Link>

frontend/src/views/AppCreator.jsx

@@ -45,7 +45,7 @@ import {
 import { v4 as uuidv4 } from "uuid";
 import { Link, useParams } from "react-router-dom";
 import YAML from "yaml";
-import ChipInput from "material-ui-chip-input";
+import { MuiChipsInput } from "mui-chips-input";
 import { useAlert } from "react-alert";
 import words from "shellwords";
 
@@ -2925,7 +2925,7 @@ const AppCreator = (defaultprops) => {
         >
           Scopes for Oauth2
         </Typography>
-        <ChipInput
+        <MuiChipsInput
           style={{border: "2px solid #f86a3e", borderRadius: theme.palette.borderRadius,}}
 					required
           InputProps={{
@@ -4396,7 +4396,7 @@ const AppCreator = (defaultprops) => {
 				})}
       </Select>
       <h4>Tags</h4>
-      <ChipInput
+      <MuiChipsInput
         style={{ marginTop: 10 }}
         InputProps={{
           style: {

frontend/src/views/Apps.jsx

@@ -1867,12 +1867,6 @@ const Apps = (props) => {
               style={{ backgroundColor: inputColor, borderRadius: 5 }}
               InputProps={{
                 style: {
-                  color: "white",
-                  minHeight: "50px",
-                  marginLeft: "5px",
-                  maxWidth: "95%",
-                  fontSize: "1em",
-                  borderRadius: 5,
                 },
               }}
               disabled={

frontend/src/views/GettingStarted.jsx

@@ -69,7 +69,7 @@ import Dropzone from "../components/Dropzone.jsx";
 
 import { useNavigate, Link, useParams } from "react-router-dom";
 import { useAlert } from "react-alert";
-import ChipInput from "material-ui-chip-input";
+import { MuiChipsInput } from "mui-chips-input";
 import { v4 as uuidv4 } from "uuid";
 
 const inputColor = "#383B40";
@@ -1930,7 +1930,7 @@ const GettingStarted = (props) => {
             margin="dense"
             fullWidth
           />
-          <ChipInput
+          <MuiChipsInput
             style={{ marginTop: 10 }}
             InputProps={{
               style: {
@@ -2435,7 +2435,7 @@ const GettingStarted = (props) => {
               </Typography>
             </div>
             <div style={{ flex: 1, float: "right" }}>
-              <ChipInput
+              <MuiChipsInput
                 style={{}}
                 InputProps={{
                   style: {

frontend/src/views/Welcome.jsx

@@ -1,11 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import ReactGA from 'react-ga4';
 import WelcomeForm2 from "../components/WelcomeForm2.jsx";
-import Stepper from "@material-ui/core/Stepper";
-import Step from "@material-ui/core/Step";
-import StepLabel from "@material-ui/core/StepLabel";
 import AppFramework from "../components/AppFramework.jsx";
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+
+import {
+	ArrorForwardIos as ArrowForwardIosIcon,
+} from '@mui/icons-material';
+
 import { 
 	Grid, 
 	Container,
@@ -16,6 +17,9 @@ import {
 	Card,
 	CardContent,
 	CardActionArea,
+	Stepper,
+	Step,
+	StepLabel,
 } from '@mui/material';
 import theme from '../theme.jsx';
 import { useNavigate, Link } from "react-router-dom";

frontend/src/views/Workflows.jsx

@@ -1,14 +1,10 @@
 import React, { useEffect, useContext } from "react";
 import ReactDOM from "react-dom"
 
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/styles";
 import { Navigate } from "react-router-dom";
-//import { Redirect } from "react-router-dom";
-
-
 import SecurityFramework from '../components/SecurityFramework.jsx';
 import EditWorkflow from "../components/EditWorkflow.jsx" 
-import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
 import Priority from "../components/Priority.jsx";
 
 import { isMobile } from "react-device-detect" 
@@ -32,7 +28,6 @@ import {
   MenuItem,
   Chip,
   Typography,
-  Zoom,
   CircularProgress,
   Dialog,
   DialogTitle,
@@ -41,11 +36,10 @@ import {
 	Checkbox,
 	LinearProgress,
 	ListItemText,
-} from "@material-ui/core";
-
-import {
   AvatarGroup,
-} from "@mui/material"
+
+  Zoom,
+} from "@mui/material";
 
 import {
   GridOn as GridOnIcon,
@@ -79,7 +73,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';
@@ -93,12 +87,10 @@ import Dropzone from "../components/Dropzone.jsx";
 
 import { useNavigate, Link } from "react-router-dom";
 import { useAlert } from "react-alert";
-import ChipInput from "material-ui-chip-input";
+import { MuiChipsInput } from "mui-chips-input";
 import { v4 as uuidv4 } from "uuid";
 import theme from "../theme.jsx";
 
-const inputColor = "#383B40";
-const surfaceColor = "#27292D";
 const svgSize = 24;
 const imagesize = 22;
 
@@ -780,7 +772,7 @@ const Workflows = (props) => {
       }}
       PaperProps={{
         style: {
-          backgroundColor: surfaceColor,
+          backgroundColor: theme.palette.surfaceColor,
           color: "white",
           minWidth: 500,
           padding: 30,
@@ -835,7 +827,7 @@ const Workflows = (props) => {
       }}
       PaperProps={{
         style: {
-          backgroundColor: surfaceColor,
+          backgroundColor: theme.palette.surfaceColor,
           color: "white",
           minWidth: 500,
           padding: 50,
@@ -892,7 +884,7 @@ const Workflows = (props) => {
       }}
       PaperProps={{
         style: {
-          backgroundColor: surfaceColor,
+          backgroundColor: theme.palette.surfaceColor,
           color: "white",
           minWidth: 500,
         },
@@ -1253,7 +1245,7 @@ const Workflows = (props) => {
     width: "100%",
     height: "250px",
     color: "white",
-    backgroundColor: surfaceColor,
+    backgroundColor: theme.palette.surfaceColor,
     display: "flex",
     flexDirection: "column",
   };
@@ -1271,7 +1263,7 @@ const Workflows = (props) => {
     overflow: "hidden",
     width: "100%",
     color: "white",
-    backgroundColor: surfaceColor,
+    backgroundColor: theme.palette.surfaceColor,
     padding: "12px 12px 0px 15px",
     borderRadius: 5,
     display: "flex",
@@ -1283,7 +1275,7 @@ const Workflows = (props) => {
     height: "auto",
     color: "white",
     margin: "10px",
-    backgroundColor: surfaceColor,
+    backgroundColor: theme.palette.surfaceColor,
   };
 
   const workflowActionStyle = {
@@ -1603,7 +1595,7 @@ 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,
@@ -1710,7 +1702,7 @@ const Workflows = (props) => {
         }}
       >
         <MenuItem
-          style={{ backgroundColor: inputColor, color: "white" }}
+          style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
           onClick={(event) => {
 						event.stopPropagation()
 						ReactDOM.unstable_batchedUpdates(() => {
@@ -1734,7 +1726,7 @@ const Workflows = (props) => {
           {"Edit details"}
         </MenuItem>
         <MenuItem
-          style={{ backgroundColor: inputColor, color: "white" }}
+          style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
           onClick={() => {
             setSelectedWorkflow(data);
             setPublishModalOpen(true);
@@ -1745,7 +1737,7 @@ const Workflows = (props) => {
           {"Publish Workflow"}
         </MenuItem>
         <MenuItem
-          style={{ backgroundColor: inputColor, color: "white" }}
+          style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
           onClick={() => {
             copyWorkflow(data);
             setOpen(false);
@@ -1755,7 +1747,7 @@ const Workflows = (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={() => {
+        {/*<NestedMenuItem disabled={userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length === 1 || userdata.orgs.length >= 0} style={{backgroundColor: theme.palette.inputColor, color: "white"}} onClick={() => {
 					//copyWorkflow(data)		
 					//setOpen(false)
 				}} key={"duplicate"}>
@@ -1763,7 +1755,7 @@ const Workflows = (props) => {
 					{"Copy to Child Org"}
 				</NestedMenuItem>*/}
         <MenuItem
-          style={{ backgroundColor: inputColor, color: "white" }}
+          style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
           onClick={() => {
             setExportModalOpen(true);
 
@@ -1817,7 +1809,7 @@ const Workflows = (props) => {
           {"Export Workflow"}
         </MenuItem>
         <MenuItem
-          style={{ backgroundColor: inputColor, color: "white" }}
+          style={{ backgroundColor: theme.palette.inputColor, color: "white" }}
           onClick={() => {
             setDeleteModalOpen(true);
             setSelectedWorkflowId(data.id);
@@ -1909,7 +1901,7 @@ const Workflows = (props) => {
 		}
 
     return (
-			<div style={{width: "100%", position: "relative",}}>
+	  <div style={{width: "100%", position: "relative",}}>
         <Paper square style={paperAppStyle}>
 					{selectedCategory !== "" ?
 						<Tooltip title={`Usecase Category: ${selectedCategory}`} placement="bottom">
@@ -2704,7 +2696,7 @@ const Workflows = (props) => {
       }}
       PaperProps={{
         style: {
-          backgroundColor: surfaceColor,
+          backgroundColor: theme.palette.surfaceColor,
           color: "white",
           minWidth: isMobile ? "90%" : "800px",
           maxWidth: isMobile ? "90%" : "800px",
@@ -2760,7 +2752,7 @@ const Workflows = (props) => {
             fullWidth
           />
 					<div style={{display: "flex", marginTop: 10, }}>
-						<ChipInput
+						<MuiChipsInput
 							style={{ flex: 1}}
 							InputProps={{
 								style: {
@@ -3245,7 +3237,7 @@ const Workflows = (props) => {
 						{isMobile ? null : 
 							<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
 								<div style={{ flex: 1, float: "right" }}>
-									<ChipInput
+									<MuiChipsInput
 										style={{}}
 										InputProps={{
 											style: {
@@ -3326,7 +3318,7 @@ const Workflows = (props) => {
 								{usecases.map((usecase, index) => {
 									//console.log(usecase)
 									const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length/usecase.list.length*100) : 0
-									console.log("Usecase Matches: ", usecase.matches, ", Percent: ", percentDone)
+									//console.log("Usecase Matches: ", usecase.matches, ", Percent: ", percentDone)
 
 									return (
 										<Paper
@@ -3461,9 +3453,11 @@ const Workflows = (props) => {
 								}
 
                 return (
-									<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
+					<span>
-										{returnData}
+					{/*<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>*/}
-									</Zoom>
+						{returnData}
+					{/*</Zoom>*/}
+					</span>
               );
             })}
             </div>
@@ -3500,12 +3494,12 @@ const Workflows = (props) => {
 						/>
 					: null}
 
-					<div style={{marginTop: 15, marginBottom: 50, }}>
+					<div style={{marginTop: 30, marginBottom: 50, marginLeft: 30, }}>
 						{view === "grid" ? (
 							<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
-								<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+								{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
 									<NewWorkflowPaper />
-								</Zoom>
+								{/*</Zoom>*/}
 
 								{filteredWorkflows.map((data, index) => {
 									// Shouldn't be a part of this list
@@ -3524,11 +3518,13 @@ const Workflows = (props) => {
 									}
 
 									return (
-										<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+										<span>
+										{/*<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
 											<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
 												<WorkflowPaper key={index} data={data} />
 											</Grid>
-										</Zoom>
+										{/*</Zoom>*/}
+										</span>
 									)
 								})}
 							</Grid>
@@ -3613,7 +3609,7 @@ const Workflows = (props) => {
       onClose={() => {}}
       PaperProps={{
         style: {
-          backgroundColor: surfaceColor,
+          backgroundColor: theme.palette.surfaceColor,
           color: "white",
           minWidth: "800px",
           minHeight: "320px",
@@ -3640,7 +3636,7 @@ const Workflows = (props) => {
       <DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
         Repository (supported: github, gitlab, bitbucket)
         <TextField
-          style={{ backgroundColor: inputColor }}
+          style={{ backgroundColor: theme.palette.inputColor }}
           variant="outlined"
           margin="normal"
           defaultValue={downloadUrl}
@@ -3660,7 +3656,7 @@ const Workflows = (props) => {
         </span>
         <div style={{ display: "flex" }}>
           <TextField
-            style={{ backgroundColor: inputColor }}
+            style={{ backgroundColor: theme.palette.inputColor }}
             variant="outlined"
             margin="normal"
             defaultValue={downloadBranch}
@@ -3681,7 +3677,7 @@ const Workflows = (props) => {
         </span>
         <div style={{ display: "flex" }}>
           <TextField
-            style={{ flex: 1, backgroundColor: inputColor }}
+            style={{ flex: 1, backgroundColor: theme.palette.inputColor }}
             variant="outlined"
             margin="normal"
             InputProps={{
@@ -3697,7 +3693,7 @@ const Workflows = (props) => {
             fullWidth
           />
           <TextField
-            style={{ flex: 1, backgroundColor: inputColor }}
+            style={{ flex: 1, backgroundColor: theme.palette.inputColor }}
             variant="outlined"
             margin="normal"
             InputProps={{
@@ -3847,7 +3843,7 @@ const Workflows = (props) => {
 				}}
 				PaperProps={{
 					style: {
-						backgroundColor: surfaceColor,
+						backgroundColor: theme.palette.surfaceColor,
 						color: "white",
 						minWidth: 560,
 						minHeight: 415,