Fixed issues in loads of files related to newer NPM vesions

frontend/src/components/AppGrid.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 

frontend/src/components/Appsearch.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 import { useAlert } from "react-alert";

frontend/src/components/CreatorGrid.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 

frontend/src/components/DocsGrid.jsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState} from 'react';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 

frontend/src/components/Searchfield.jsx

@@ -625,7 +625,7 @@ const SearchField = props => {
 	const CustomDocHits = connectHits(DocHits)
 
 	return (
-		<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", zIndex: 12500,}}>
+		<div ref={node} style={{width: "100%", maxWidth: 425, margin: "auto", position: "relative", zIndex: 10050,}}>
 			<InstantSearch searchClient={searchClient} indexName="appsearch" onClick={() => {
 				console.log("CLICKED")	
 			}}>

frontend/src/components/SecurityFramework.jsx

@@ -2,7 +2,7 @@ import React, {useState } from 'react';
 import {isMobile} from "react-device-detect";
 import AppFramework, { usecases } from "../components/AppFramework.jsx";
 import {Link} from 'react-router-dom';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 
 import { Button, LinearProgress, Typography } from '@material-ui/core';
 

frontend/src/components/SuggestedWorkflows.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import theme from '../theme';
 import PaperComponent from "../components/PaperComponent.jsx"
 import UsecaseSearch, { usecaseTypes } from "../components/UsecaseSearch.jsx"

frontend/src/components/WelcomeForm2.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from "react";
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import Button from "@material-ui/core/Button";
 import Checkbox from '@mui/material/Checkbox';
 

frontend/src/components/Workflowsearch.jsx

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from 'react';
 
-import ReactGA from 'react-ga';
 import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 
@@ -159,25 +158,10 @@ const WorkflowSearch = props => {
 					return (
 						<Paper key={index} elevation={0} style={paperStyle} onMouseOver={() => {
 							setMouseHoverIndex(index)
-							/*
-							ReactGA.event({
-								category: "app_grid_view",
-								action: `search_bar_click`,
-								label: "",
-							})
-							*/
 						}} onMouseOut={() => {
 							setMouseHoverIndex(-1)
 						}} onClick={() => {
 							setNewSelectedApp(data)
-							//if (data.objectID !== data.objectID) {
-							//}
-
-							//ReactGA.event({
-							//	category: "app_search",
-							//	action: `app_${parsedname}_${data.id}_click`,
-							//	label: "",
-							//})
 						}}>
 							<div style={{display: "flex"}}>
 								{/*<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 30, minWidth: 30, minHeight: 30, maxHeight: 30, display: "block", }} />*/}