playing around with vite

frontend/Dockerfile

@@ -22,9 +22,11 @@ COPY ./public /usr/src/app/public/
 COPY ./src /usr/src/app/src/
 COPY ./*.sh /usr/src/app/
 COPY ./*.json /usr/src/app/
+COPY ./index.html /usr/src/app/index.html
+COPY ./vite.config.js /usr/src/app/vite.config.js
 
 
-RUN npm run build --loglevel verbose 2>&1
+RUN npm run build
 
 # Production environment
 FROM nginx:1.29.3

frontend/src/App.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useContext } from "react";
 
 import { Link, Route, Routes, BrowserRouter, useNavigate } from "react-router-dom";
 import { CookiesProvider } from "react-cookie";
-import { removeCookies, useCookies } from "react-cookie";
+import { useCookies } from "react-cookie";
 
 import Workflows from "./views/Workflows.jsx";
 import GettingStarted from "./views/GettingStarted.jsx";
@@ -514,7 +514,6 @@ const App = (message, props) => {
 						isLoaded={isLoaded}
 						isLoggedIn={isLoggedIn}
 						globalUrl={globalUrl}
-						cookies={cookies}
 						userdata={userdata}
 						{...props}
 					/>
@@ -530,7 +529,6 @@ const App = (message, props) => {
 						isLoaded={isLoaded}
 						isLoggedIn={isLoggedIn}
 						globalUrl={globalUrl}
-						cookies={cookies}
 						userdata={userdata}
 						{...props}
 					/>
@@ -694,7 +692,6 @@ const App = (message, props) => {
         	      isLoaded={isLoaded}
         	      isLoggedIn={isLoggedIn}
         	      globalUrl={globalUrl}
-        	      cookies={cookies}
         	      userdata={userdata}
         	      {...props}
         	    />
@@ -711,7 +708,6 @@ const App = (message, props) => {
         	      isLoaded={isLoaded}
         	      isLoggedIn={isLoggedIn}
         	      globalUrl={globalUrl}
-        	      cookies={cookies}
         	      userdata={userdata}
         	      {...props}
         	    />
@@ -727,7 +723,6 @@ const App = (message, props) => {
         	      isLoaded={isLoaded}
         	      isLoggedIn={isLoggedIn}
         	      globalUrl={globalUrl}
-        	      cookies={cookies}
         	      userdata={userdata}
         	      {...props}
         	    />
@@ -938,7 +933,6 @@ const App = (message, props) => {
 						isLoaded={isLoaded}
 						isLoggedIn={isLoggedIn}
 						globalUrl={globalUrl}
-						cookies={cookies}
 						userdata={userdata}
 						{...props}
 					/>
@@ -955,7 +949,6 @@ const App = (message, props) => {
 						isLoaded={isLoaded}
 						isLoggedIn={isLoggedIn}
 						globalUrl={globalUrl}
-						cookies={cookies}
 						userdata={userdata}
 						{...props}
 					/>
@@ -984,7 +977,6 @@ const App = (message, props) => {
 						isLoaded={isLoaded}
 						isLoggedIn={isLoggedIn}
 						globalUrl={globalUrl}
-						cookies={cookies}
 						userdata={userdata}
 				  		checkLogin={checkLogin}
 						{...props}

frontend/src/components/AnalyticsTab.jsx

@@ -15,7 +15,7 @@ const AnalyticsTab = (props) => {
     // const [checked, setChecked] = useState(false);
     // const [selectedOption, setSelectedOption] = useState('all');
     // const [expand, setExpand] = useState(false)
-    // const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    // const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
     
     // const handleOptionChange = (option) => {
     //     setSelectedOption(option);

frontend/src/components/AppFramework.jsx

@@ -1129,7 +1129,7 @@ const AppFramework = (props) => {
 	}, [newSelectedApp])
 
 
-  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
   const imgSize = 50;
 	var parsedFrameworkData = frameworkData === undefined ? {} : frameworkData 
 

frontend/src/components/AppSearchButtons.jsx

@@ -22,7 +22,7 @@ import {
     Paper,
     TextField,
     Collapse,
-    iconButton,
+    IconButton,
     Avatar,
     ButtonBase,
     InputAdornment,
@@ -33,7 +33,6 @@ import {
     ListItem,
     ListItemAvatar,
     ListItemText,
-    IconButton,
 } from '@mui/material';
 
 import { Context } from "../context/ContextApi.jsx";

frontend/src/components/AppSelection.jsx

@@ -64,7 +64,7 @@ const AppSelection = props => {
   	document.title = "Choose your apps"
     const ref = useRef()
     let navigate = useNavigate();
-    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 
     useEffect(() => {
         if (newSelectedApp === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {

frontend/src/components/Appsearch.jsx

@@ -25,7 +25,7 @@ const Appsearch = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, newSelectedApp, setNewSelectedApp, defaultSearch, showSearch, ConfiguredHits, userdata, cy, isCreatorPage, actionImageList, setActionImageList, setUserSpecialzedApp, inputHeight, }  = props
 	const { themeMode } = useContext(Context)
 	const theme = getTheme(themeMode)
-    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
 	const [formMail, setFormMail] = React.useState("");

frontend/src/components/AuthenticationWindow.jsx

@@ -4,7 +4,7 @@ import theme from '../theme.jsx';
 import { v4 as uuidv4 } from "uuid";
 import { toast } from 'react-toastify';
 
-import { 
+import {
 	Divider,
 	MenuItem,
 	Button,
@@ -12,8 +12,7 @@ import {
 	DialogTitle,
 	DialogActions,
 	DialogContent,
-	Textfield,
+	TextField,
-  TextField,
 	Typography,
 	Select,
 	IconButton,

frontend/src/components/BillingStats.jsx

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useContext, useCallback } from 'react';
 import {getTheme} from '../theme.jsx';
 import classNames from "classnames";
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
-import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'
+import { DataGrid } from '@mui/x-data-grid'
 import { toast } from "react-toastify" 
 
 import { 
@@ -602,7 +602,7 @@ const AppStats = (defaultprops) => {
 		},
 	}
 
-	const columns: GridColDef[] = [
+	const columns = [
 	    {
 			field: 'workflow.name',
 			headerName: 'Workflow Name',

frontend/src/components/CacheView.jsx

@@ -39,10 +39,7 @@ import {
 	Avatar,
 } from "@mui/material";
 
-import { 
+import { DataGrid } from '@mui/x-data-grid';
-	DataGrid, 
-	GridColDef,
-} from '@mui/x-data-grid';
 
 import {
 	Link as LinkIcon,
@@ -55,7 +52,6 @@ import {
     OpenInNew as OpenInNewIcon,
     CloudDownload as CloudDownloadIcon,
     Description as DescriptionIcon,
-    Polymer as PolymerIcon,
     CheckCircle as CheckCircleIcon,
     Close as CloseIcon,
     Apps as AppsIcon,
@@ -63,7 +59,6 @@ import {
     Cached as CachedIcon,
     AccessibilityNew as AccessibilityNewIcon,
     Lock as LockIcon,
-    Eco as EcoIcon,
     Schedule as ScheduleIcon,
     Cloud as CloudIcon,
     Business as BusinessIcon,
@@ -1511,7 +1506,7 @@ const CacheView = memo((props) => {
 		)
 	}
 
-	const columns: GridColDef<(typeof rows)[number]>[] = [
+	const columns = [
 	  { 
 		  field: 'key', 
 		  headerName: 'Key', 

frontend/src/components/ChatBot.jsx

@@ -734,7 +734,6 @@ const ChatBot = (props) => {
     margin: "auto",
     maxWidth: "100%",
     minWidth: "100%",
-    overflow: "hidden",
     fontSize: isMobile ? "1.3rem" : "1.0rem",
   }
 

frontend/src/components/EditOrgTab.jsx

@@ -30,7 +30,7 @@ const EditOrgTab = (props) => {
     const [organizationFeatures, setOrganizationFeatures] = React.useState({});
     const [users, setUsers] = React.useState([]);
     const [orgRequest, setOrgRequest] = React.useState(true);
-    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
     useEffect(() => { 
         if(users.length === 0) {
             getUsers();

frontend/src/components/EditWorkflow.jsx

@@ -216,8 +216,8 @@ const EditWorkflow = (props) => {
 						setNewWorkflowTags(responseJson.tags)
 					}
 
-					if (selectedUsecases === []) {
+					if (selectedUsecases.length === 0) {
-						selectedUsecases = responseJson.usecase_ids
+						setSelectedUsecases(responseJson.usecase_ids)
 					}
 
 					innerWorkflow.id = responseJson.id
@@ -979,7 +979,6 @@ const EditWorkflow = (props) => {
 									color="primary"
 									defaultValue={innerWorkflow.description}
 									placeholder="Description"
-									multiline
 									label="Description"
 									margin="dense"
 									fullWidth

frontend/src/components/FixWorkflowValidationErrors.jsx

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from "react";
 import { toast } from "react-toastify" 
 import theme from '../theme.jsx';
 import AuthenticationOauth2 from "../components/Oauth2Auth.jsx";
-import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
 
 import { 
 	Tooltip,

frontend/src/components/HealthPage.jsx

@@ -25,7 +25,7 @@ const HealthPage = (props) => {
     const [isHealthLoading, setIsHealthLoading] = useState(false); // Loading state for HealthBarChart
     const [isLiveExecutionsLoading, setIsLiveExecutionsLoading] = useState(false); // Loading state for LiveExecutionsChart
 
-    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 
     const fetchHealthStats = useCallback(async () => {
         setIsHealthLoading(true); // Start loading for HealthBarChart
@@ -374,8 +374,8 @@ const HealthPage = (props) => {
                 <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '24hr' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '24hr' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('24hr')} disabled={isHealthLoading}>24h</Button>
                 <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '7day' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '7day' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('7day')} disabled={isHealthLoading}>7d</Button>
                 <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '30d' ? '2px solid #FF8444' : 'none', background: "#000000", color: selectedRange === '30d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('30d')} disabled={isHealthLoading}>30d</Button>
-                <Button disabled variant="contained" style={{ flex: 1, borderBottom: selectedRange === '90d' ? '2px solid #FF8444' : 'none', background: "#000000", color: false === false ? "grey" : selectedRange === '90d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('90d')} disabled={isHealthLoading}>90d</Button>
+                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '90d' ? '2px solid #FF8444' : 'none', background: "#000000", color: "grey", textTransform: 'none' }} onClick={() => filterDataByRange('90d')} disabled>90d</Button>
-                <Button disabled variant="contained" style={{ flex: 1, borderBottom: selectedRange === '180d' ? '2px solid #FF8444' : 'none', background: "#000000", color: false === false ? "grey" : selectedRange === '180d' ? '#FF8444' : '#cfd8dc', textTransform: 'none' }} onClick={() => filterDataByRange('180d')} disabled={isHealthLoading}>180d</Button>
+                <Button variant="contained" style={{ flex: 1, borderBottom: selectedRange === '180d' ? '2px solid #FF8444' : 'none', background: "#000000", color: "grey", textTransform: 'none' }} onClick={() => filterDataByRange('180d')} disabled>180d</Button>
             </ButtonGroup>
 
             {/* Loading Bar for HealthBarChart */}

frontend/src/components/NewHeader.jsx

@@ -1450,7 +1450,6 @@ const Header = (props) => {
         color="transparent"
         elevation={0}
         style={{
-          backgroundColor: "transparent",
           boxShadow: "none",
           minHeight: 68,
           maxHeight: 68,

frontend/src/components/OrgHeaderexpandedNew.jsx

@@ -32,7 +32,6 @@ import {
 } from "@mui/material";
 
 import {
-	Icon as IconButton,
 	ExpandLess as ExpandLessIcon,
 	ExpandMore as ExpandMoreIcon,
 	Save as SaveIcon,

frontend/src/components/ParsedAction.jsx

@@ -67,7 +67,6 @@ import {
 	Cached as CachedIcon,
 	DirectionsRun as DirectionsRunIcon,
 	Add as AddIcon,
-	Polymer as PolymerIcon,
 	FormatListNumbered as FormatListNumberedIcon,
 	Create as CreateIcon,
 	PlayArrow as PlayArrowIcon,

frontend/src/components/Priority.jsx

@@ -25,7 +25,7 @@ const Priority = (props) => {
   	const { globalUrl, clickedFromOrgTab,userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props;
 	const { themeMode, supportEmail } = useContext(Context);
 	const theme = getTheme(themeMode);
-  	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 	let navigate = useNavigate();
 
 	if (window.location.pathname === "/workflows") {
@@ -120,7 +120,7 @@ const Priority = (props) => {
 	const srcSize = realignedSrc ? 35 : 30 
 	const dstSize = realignedDst ? 35 : 30
 	return (
-		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" :  clickedFromOrgTab ?null:"1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, marginTop: 10, marginBottom: 10, padding:  clickedFromOrgTab ? 24:15, textAlign: "center", minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: clickedFromOrgTab ?  theme.palette.backgroundColor : theme.palette.surfaceColor, display: "flex", }}>
+		<div style={{border: priority.active === false ? "1px solid #000000" :  priority.severity === 1 ? "1px solid #f85a3e" :  clickedFromOrgTab ?null:"1px solid rgba(255,255,255,0.3)", borderRadius: theme.palette?.borderRadius, marginTop: 10, marginBottom: 10, padding:  clickedFromOrgTab ? 24:15, minHeight: isCloud ? 70 : 100, maxHeight: isCloud ? 70 : 100, textAlign: "left", backgroundColor: clickedFromOrgTab ?  theme.palette.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, color: theme.palette.text.primary}}/> : null} 

frontend/src/components/RuntimeDebugger.jsx

@@ -44,7 +44,7 @@ import {
 	Send as SendIcon, 
 } from '@mui/icons-material';
 
-import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid'
+import { DataGrid } from '@mui/x-data-grid'
 import {
 	Search as SearchIcon,
   } from "@mui/icons-material";
@@ -335,7 +335,7 @@ const RuntimeDebugger = (props) => {
 	}
 	const imageSize = 30
 	const timenowUnix = Math.floor(Date.now() / 1000)
-	const columns: GridColDef[] = [
+	const columns = [
 		{
 			field: 'execution_source',
 			headerName: 'Source',

frontend/src/components/SearchData.jsx

@@ -77,7 +77,7 @@ const SearchData = props => {
     //    return null
     //}
 
-    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
     // if (window.location.pathname === "/docs" || window.location.pathname === "/apps" || window.location.pathname === "/usecases"  ) {
     //     setModalOpen(false)
     // }

frontend/src/components/ShuffleCodeEditor1.jsx

@@ -1467,7 +1467,7 @@ const CodeEditor = (props) => {
 					if (e.srcElement.className === "ace_content") {
 						console.log("DRAG STOP IN CONTENT!", e.srcElement.className)
 
-						const usedposition = e.offsetY
+						let usedposition = e.offsetY
 						if (usedposition === undefined || usedposition === null) {
 							toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`)
 							return

frontend/src/components/UsecaseSearch.jsx

@@ -349,7 +349,7 @@ const UsecaseSearch = (props) => {
   const [selectedAction, setSelectedAction] = React.useState({});
   const [firstRequest, setFirstRequest] = React.useState(true);
 
-  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
   //const alert = useAlert()
 
 	useEffect(() => {

frontend/src/components/WelcomeForm2.jsx

@@ -161,7 +161,7 @@ const WelcomeForm = (props) => {
   const [clickdiff, setclickdiff] = useState(0);
   const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
 
-  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
   //const alert = useAlert();
   let navigate = useNavigate();
 

frontend/src/components/WorkflowGrid.jsx

@@ -29,7 +29,7 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b
 const AppGrid = props => {
 	const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, onlyResults, inputsearch } = props
 
-    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+    const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
 	//const [apps, setApps] = React.useState([]);

frontend/src/components/WorkflowTemplatePopup.jsx

@@ -47,7 +47,7 @@ const WorkflowTemplatePopup = (props) => {
 
 	const [requestSent, setRequestSent] = React.useState(false)
   	
-	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 	let navigate = useNavigate();
 	useEffect(() => {
 		if (modalOpen !== true) {

frontend/src/components/WorkflowTemplatePopup2.jsx

@@ -395,8 +395,9 @@ const WorkflowTemplatePopup = (props) => {
 		}
 
 		console.log("SRCAPP: ", srcapp, "DSTAPP: ", dstapp)
-		if (srcapp === undefined || srcapp === null) {
+		let effectiveSrcapp = srcapp
-			srcapp = ""
+		if (effectiveSrcapp === undefined || effectiveSrcapp === null) {
+			effectiveSrcapp = ""
 		}
 
 		if ((srcapp !== undefined && srcapp !== null && srcapp.includes(":default")) || (dstapp !== undefined && dstapp !== null && dstapp.includes(":default"))) {

frontend/src/serviceWorker.js

@@ -1,127 +0,0 @@
-// In production, we register a service worker to serve assets from local cache.
-
-// This lets the app load faster on subsequent visits in production, and gives
-// it offline capabilities. However, it also means that developers (and users)
-// will only see deployed updates on the "N+1" visit to a page, since previously
-// cached resources are updated in the background.
-
-// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
-// This link also includes instructions on opting out of this behavior.
-
-const isLocalhost = Boolean(
-  window.location.hostname === "localhost" ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === "[::1]" ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-);
-
-export function register(config) {
-  if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
-    // The URL constructor is available in all browsers that support SW.
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
-    if (publicUrl.origin !== window.location.origin) {
-      // Our service worker won't work if PUBLIC_URL is on a different origin
-      // from what our page is served on. This might happen if a CDN is used to
-      // serve assets; see https://github.com/facebook/create-react-app/issues/2374
-      return;
-    }
-
-    window.addEventListener("load", () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
-
-      if (isLocalhost) {
-        // This is running on localhost. Let's check if a service worker still exists or not.
-        checkValidServiceWorker(swUrl, config);
-
-        // Add some additional logging to localhost, pointing developers to the
-        // service worker/PWA documentation.
-        navigator.serviceWorker.ready.then(() => {
-          console.log(
-            "This web app is being served cache-first by a service " +
-              "worker. To learn more, visit https://goo.gl/SC7cgQ"
-          );
-        });
-      } else {
-        // Is not local host. Just register service worker
-        registerValidSW(swUrl, config);
-      }
-    });
-  }
-}
-
-function registerValidSW(swUrl, config) {
-  navigator.serviceWorker
-    .register(swUrl)
-    .then((registration) => {
-      registration.onupdatefound = () => {
-        const installingWorker = registration.installing;
-        installingWorker.onstatechange = () => {
-          if (installingWorker.state === "installed") {
-            if (navigator.serviceWorker.controller) {
-              // At this point, the old content will have been purged and
-              // the fresh content will have been added to the cache.
-              // It's the perfect time to display a "New content is
-              // available; please refresh." message in your web app.
-              console.log("New content is available; please refresh.");
-
-              // Execute callback
-              if (config.onUpdate) {
-                config.onUpdate(registration);
-              }
-            } else {
-              // At this point, everything has been precached.
-              // It's the perfect time to display a
-              // "Content is cached for offline use." message.
-              console.log("Content is cached for offline use.");
-
-              // Execute callback
-              if (config.onSuccess) {
-                config.onSuccess(registration);
-              }
-            }
-          }
-        };
-      };
-    })
-    .catch((error) => {
-      console.error("Error during service worker registration:", error);
-    });
-}
-
-function checkValidServiceWorker(swUrl, config) {
-  // Check if the service worker can be found. If it can't reload the page.
-  fetch(swUrl)
-    .then((response) => {
-      // Ensure service worker exists, and that we really are getting a JS file.
-      if (
-        response.status === 404 ||
-        response.headers.get("content-type").indexOf("javascript") === -1
-      ) {
-        // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then((registration) => {
-          registration.unregister().then(() => {
-            window.location.reload();
-          });
-        });
-      } else {
-        // Service worker found. Proceed as normal.
-        registerValidSW(swUrl, config);
-      }
-    })
-    .catch(() => {
-      console.log(
-        "No internet connection found. App is running in offline mode."
-      );
-    });
-}
-
-export function unregister() {
-  if ("serviceWorker" in navigator) {
-    navigator.serviceWorker.ready.then((registration) => {
-      registration.unregister();
-    });
-  }
-}

frontend/src/views/Admin.jsx

@@ -3363,7 +3363,6 @@ If you're interested, please let me know a time that works for you, or set up a
                   color="primary"
                   label={"Edit value"}
                   defaultValue={props.data.limit}
-                  style={{}}
                   onChange={(event) => {
                     setNewValue(event.target.value);
                   }}
@@ -4084,7 +4083,6 @@ If you're interested, please let me know a time that works for you, or set up a
                 selectedOrganization={selectedOrganization}
                 adminTab={adminTab}
                 billingInfo={billingInfo}
-                selectedOrganization={selectedOrganization}
                 stripeKey={props.stripeKey}
                 handleGetOrg={handleGetOrg}
               />
@@ -6822,7 +6820,6 @@ curTab === 6 ? (
                             marginTop: 10,
                             marginBottom: 10,
                             padding: 15,
-                            textAlign: "center",
                             height: 70,
                             textAlign: "left",
                             backgroundColor: theme.palette.surfaceColor,

frontend/src/views/AppCreator.jsx

@@ -563,7 +563,7 @@ const AppCreator = (defaultprops) => {
   };
   
 
-  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 
   useEffect(() => {
 		if (window.location.pathname.includes("apps/edit")) {
@@ -791,9 +791,6 @@ const AppCreator = (defaultprops) => {
 				}
 
 				if (data.info["x-categories"] !== undefined && data.info["x-categories"].length > 0) {
-					if (typeof data.info["x-categories"] === "array") {
-					} else {
-					}
 					setNewWorkflowCategories(data.info["x-categories"]);
 				}
 			}

frontend/src/views/AppExplorer.jsx

@@ -65,7 +65,6 @@ import { Context } from "../context/ContextApi.jsx";
 
 import {
   SearchBox,
-  StaticRefinementList,
   RefinementList,
   InstantSearch,
   connectSearchBox,
@@ -247,7 +246,7 @@ const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
     read_time: 1,
   })
 
-  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 
 
   // FIXME: This is used, as useEffect() creates an issue with apps not loading at all
@@ -454,7 +453,6 @@ const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
                       rel="noopener noreferrer"
                       target="_blank"
                       href={data.url}
-                      target="_blank"
                       style={{ textDecoration: "none", color: "#f85a3e" }}
                     >
                       <Tooltip title={data.url} placement="bottom">
@@ -3106,15 +3104,13 @@ const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
           <Paper
             style={{
               flex: 6,
-              margin: 10,
+              margin: "auto",
               padding: 30,
               backgroundColor: boxStyle.backgroundColor,
               color: theme.palette.text.primary,
               textAlign: "left",
               paddingBottom: 50,
               overflow: "hidden",
-
-			  margin: "auto",
             }}
           >
             <Tabs
@@ -3137,7 +3133,7 @@ const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
               <Tab style={{color: theme.palette.text.primary, textTransform: "none", }} icon={appType === 0 || appType === 2 ? <OpenInNewIcon /> : <AppsIcon />} label={appType === 0 || appType === 2 ? "Try the API" : "Try it out"} />
 
               <Tab icon={<ShowChartIcon />} style={{color: theme.palette.text.primary, textTransform: "none", }} label="Stats & Downloads" />
-              <Tab icon={<PolylineIcon />} style={{color: theme.palette.text.primary, textTransform: "none", }} disabled style={{color: theme.palette.text.secondary}} label="Integrations" />
+              <Tab icon={<PolylineIcon />} style={{color: theme.palette.text.secondary, textTransform: "none", }} disabled label="Integrations" />
               <Tab icon={<PersonIcon />} disabled={userdata.support !== true} style={{color: userdata.support !== true ? theme.palette.text.secondary: theme.palette.text.primary, textTransform: "none", }} label="Creator" value={4}  />
             </Tabs>
             <div style={{ marginTop: 25 }}>
@@ -3689,7 +3685,6 @@ const buttonBackground = "linear-gradient(to right, #f86a3e, #f34079)";
 
 											color="primary"
 											id="checkbox-search"
-											variant="body1"
 											style={{
 												backgroundColor: theme.palette.inputColor,
 												borderRadius: theme.palette?.borderRadius,

frontend/src/views/Apps.jsx

@@ -70,11 +70,10 @@ const inputColor = "#383B40";
 
 const chipStyle = {
   backgroundColor: "#3d3f43",
-  height: 30,
+  height: 28,
   marginRight: 5,
   paddingLeft: 5,
   paddingRight: 5,
-  height: 28,
   cursor: "pointer",
   borderColor: "#3d3f43",
   color: "white",
@@ -634,7 +633,7 @@ const Apps = (props) => {
   // dropdown with copy etc I guess
   const AppPaper = (props) => {
 	const { app } = props
-	const data = app
+	let data = app
 
     if (data.name === "" && data.id === "") {
       return null;
@@ -802,7 +801,6 @@ const Apps = (props) => {
                     justifyContent: "center",
                     overflow: "hidden",
                     maxHeight: 43,
-                    overflow: "hidden",
                   }}
                 >
                   <Typography variant="body2" color="textSecondary">
@@ -1165,7 +1163,6 @@ const Apps = (props) => {
                 position: "absolute",
                 top: -10,
                 right: isCloud ? 50 : 0,
-                backgroundColor: theme.palette.surfaceColor,
                 backgroundColor: inputColor,
                 color: "white",
                 height: 35,
@@ -1511,7 +1508,6 @@ const Apps = (props) => {
                             borderRadius: 17 / 2,
                             backgroundColor: itemColor,
                             marginRight: 10,
-                            marginTop: 2,
                             marginTop: "auto",
                             marginBottom: "auto",
                           }}
@@ -1945,7 +1941,7 @@ const Apps = (props) => {
       const baseImage = <LibraryBooksIcon />
 
       return (
-        <div style={{ position: "relative", marginTop: 15, marginLeft: 0, marginRight: 10, position: "absolute", color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, minWidth: leftBarSize - 10, maxWidth: leftBarSize - 10, boxShadows: "none", overflowX: "hidden", }}>
+        <div style={{ position: "absolute", marginTop: 15, marginLeft: 0, marginRight: 10, color: "white", zIndex: 1001, backgroundColor: theme.palette.inputColor, minWidth: leftBarSize - 10, maxWidth: leftBarSize - 10, boxShadows: "none", overflowX: "hidden", }}>
           <List style={{ backgroundColor: theme.palette.inputColor, }}>
             {hits.length === 0 ?
               <ListItem style={outerlistitemStyle}>

frontend/src/views/Dashboard.jsx

@@ -853,14 +853,14 @@ const UsecaseListComponent = (props) => {
 																		<li {...props}>
 																			<Tooltip arrow placement="left" title={
 																				<span style={{}}>
-																					{data.image !== undefined && data.image !== null && data.image.length > 0 ? 
+																					{data.image !== undefined && data.image !== null && data.image.length > 0 ?
 																						<img src={data.image} alt={newname} style={{backgroundColor: theme.palette.surfaceColor, maxHeight: 200, minHeigth: 200, borderRadius: theme.palette.borderRadius, }} />
 																					: null}
 																					<Typography>
 																						Choose {newname}
 																					</Typography>
 																				</span>
-																				} placement="bottom">
+																				}>
 																				<span>
 																					<Checkbox
 																						icon={<CheckBoxOutlineBlankIcon fontSize="small" />}

frontend/src/views/Docs.jsx

@@ -1278,7 +1278,6 @@ const Docs = (defaultprops) => {
             overflow: "hidden",
             paddingBottom: 100,
             marginLeft: mobile ? 0 : 50,
-            marginTop: 50,
             textAlign: "center",
             margin: "auto",
             marginTop: 50,

frontend/src/views/LoginPage.jsx

@@ -812,7 +812,7 @@ const LoginPage = props => {
 						width: "max-content",
 					}}
 				>
-					<form onSubmit={onSubmit} style={{ margin: 15, width: isMobile ? "100%" : "360px", width: "max-content", overflow: "hidden", textAlign: "center", }}>
+					<form onSubmit={onSubmit} style={{ margin: 15, width: "max-content", overflow: "hidden", textAlign: "center", }}>
 						<img
 							style={{
 								height: isMobile ? 44 : 60,

frontend/src/views/NewDashboard.jsx

@@ -23,8 +23,6 @@ import {
 	TrendingUp as TrendingUpIcon,
 	TrendingDown as TrendingDownIcon,
 	TaskAlt as TaskAltIcon,
-	SuccessFailed as SuccessFailedIcon,
-	RunsOverTime as RunsOverTimeIcon,
 	ErrorOutline as ErrorOutlineIcon,
 } from '@mui/icons-material';
 

frontend/src/views/UpdateAuthentication.jsx

@@ -25,7 +25,7 @@ const SetAuthentication = (props) => {
   const [loadFail, setLoadFail] = useState("");
   const [appAuthentication, setAppAuthentication] = React.useState([]);
 
-  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
   //const alert = useAlert();
 
   const parseIncomingOpenapiData = (data) => {

frontend/src/views/Welcome.jsx

@@ -4,7 +4,7 @@ import WelcomeForm2 from "../components/WelcomeForm2.jsx";
 import AppFramework from "../components/AppFramework.jsx";
 import {isMobile} from "react-device-detect";
 import {
-	ArrorForwardIos as ArrowForwardIosIcon,
+	ArrowForwardIos as ArrowForwardIosIcon,
 } from '@mui/icons-material';
 
 import { 
@@ -47,7 +47,7 @@ const Welcome = (props) => {
 		}
 	}, [activeStep])
 
-  	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (process.env.IS_SSR === "true");
+  	const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
 		const [steps, setSteps] = useState([
 			"Help us get to know you", 
 			"Find your Apps", 

frontend/src/views/Workflows.jsx

@@ -3407,7 +3407,7 @@ const Workflows = (props) => {
           {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:
+              marginBottom: 10, padding: 15, height: 70, textAlign: "left", backgroundColor:
                 theme.palette.surfaceColor, display: "flex", maxHeight: "105px", minHeight: "110px"
             }}
             >