Merge pull request #1558 from Monilprajapati/2.0.0

App page modal and some fixes

frontend/src/App.jsx

@@ -24,6 +24,7 @@ import DashboardView from "./views/DashboardViews.jsx";
 import AdminSetup from "./views/AdminSetup";
 import Admin from "./views/Admin";
 import Docs from "./views/Docs.jsx";
+import Usecases2 from "./views/Usecases2.jsx";
 //import Introduction from "./views/Introduction";
 import SetAuthentication from "./views/SetAuthentication";
 import SetAuthenticationSSO from "./views/SetAuthenticationSSO";
@@ -383,6 +384,19 @@ const App = (message, props) => {
         	      {...props}
         	    />
         	  }
+        	/>
+			<Route
+        	  exact
+        	  path="/usecases2"
+        	  element={
+        	    <Usecases2
+				  userdata={userdata}
+        	      isLoaded={isLoaded}
+        	      isLoggedIn={isLoggedIn}
+        	      globalUrl={globalUrl}
+        	      {...props}
+        	    />
+        	  }
         	/>
         	<Route
         	  exact

frontend/src/components/AppModal.jsx

@@ -0,0 +1,584 @@
+import React, { useEffect, useState } from 'react';
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  IconButton,
+  Typography,
+  Box,
+  Button,
+  Stack,
+  Avatar,
+} from '@mui/material';
+
+import CloseIcon from '@mui/icons-material/Close';
+import EditIcon from '@mui/icons-material/Edit';
+import Search from '@mui/icons-material/Search';
+import AddIcon from '@mui/icons-material/Add';
+import ForkRightIcon from '@mui/icons-material/ForkRight';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import LaunchIcon from '@mui/icons-material/Launch';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { CloudDownloadOutlined } from '@mui/icons-material';
+import { findSpecificApp } from './AppFramework';
+
+const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
+
+  const [frameworkData, setFrameworkData] = useState({})
+  const [usecases, setUsecases] = useState([])
+  const [workflows, setWorkflows] = useState([])
+  const [prevSubcase, setPrevSubcase] = useState({})
+  const [inputUsecase, setInputUsecase] = useState({})
+  const [latestUsecase, setLatestUsecase] = useState([])
+  const [foundAppUsecase, setFoundAppUsecase] = useState({})
+
+  const parseUsecase = (subcase) => {
+    const srcdata = findSpecificApp(frameworkData, subcase.type)
+    const dstdata = findSpecificApp(frameworkData, subcase.last)
+
+    if (srcdata !== undefined && srcdata !== null) {
+      subcase.srcimg = srcdata.large_image
+      subcase.srcapp = srcdata.name
+    }
+
+    if (dstdata !== undefined && dstdata !== null) {
+      subcase.dstimg = dstdata.large_image
+      subcase.dstapp = dstdata.name
+    }
+    return subcase
+  }
+
+
+  const getFramework = () => {
+    fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for framework!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        if (responseJson.success === false) {
+          const preparedData = {
+            "siem": findSpecificApp({}, "SIEM"),
+            "communication": findSpecificApp({}, "COMMUNICATION"),
+            "assets": findSpecificApp({}, "ASSETS"),
+            "cases": findSpecificApp({}, "CASES"),
+            "network": findSpecificApp({}, "NETWORK"),
+            "intel": findSpecificApp({}, "INTEL"),
+            "edr": findSpecificApp({}, "EDR"),
+            "iam": findSpecificApp({}, "IAM"),
+            "email": findSpecificApp({}, "EMAIL"),
+          }
+
+          setFrameworkData(preparedData)
+        } else {
+          setFrameworkData(responseJson)
+        }
+      })
+      .catch((error) => {
+        console.log("Error getting framework: ", error)
+      })
+  }
+
+  const fetchUsecases = (workflows) => {
+    fetch(globalUrl + "/api/v1/workflows/usecases", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for usecases");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+
+
+        const newUsecases = [...usecases]
+        newUsecases.forEach((category, index) => {
+          category.list.forEach((subcase, subindex) => {
+            getUsecase(subcase, index, subindex)
+          })
+        })
+
+        setLatestUsecase(newUsecases)
+        // Matching workflows with usecases
+        if (responseJson.success !== false) {
+          if (workflows !== undefined && workflows !== null && workflows.length > 0) {
+            var categorydata = responseJson
+
+            var newcategories = []
+            for (var key in categorydata) {
+              var category = categorydata[key]
+              category.matches = []
+
+              for (var subcategorykey in category.list) {
+                var subcategory = category.list[subcategorykey]
+                subcategory.matches = []
+
+                for (var workflowkey in workflows) {
+                  const workflow = workflows[workflowkey]
+
+                  if (workflow.usecase_ids !== undefined && workflow.usecase_ids !== null) {
+                    for (var usecasekey in workflow.usecase_ids) {
+                      if (workflow.usecase_ids[usecasekey].toLowerCase() === subcategory?.name?.toLowerCase()) {
+
+                        category.matches.push({
+                          "workflow": workflow.id,
+                          "category": subcategory?.name,
+                        })
+
+                        subcategory.matches.push(workflow)
+                        break
+                      }
+                    }
+                  }
+
+                  if (subcategory.matches.length > 0) {
+                    break
+                  }
+                }
+              }
+
+              newcategories.push(category)
+            }
+
+            if (newcategories !== undefined && newcategories !== null && newcategories.length > 0) {
+              setUsecases(newcategories)
+            } else {
+              setUsecases(responseJson)
+            }
+          } else {
+            setUsecases(responseJson)
+          }
+        }
+      })
+      .catch((error) => {
+        //toast("ERROR: " + error.toString());
+        console.log("ERROR: " + error.toString());
+      });
+  };
+
+  const getAvailableWorkflows = () => {
+    fetch(globalUrl + "/api/v1/workflows", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          fetchUsecases()
+          console.log("Status not 200 for workflows :O!: ", response.status);
+          return;
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        fetchUsecases(responseJson)
+
+        if (responseJson !== undefined) {
+          setWorkflows(responseJson);
+        }
+      })
+      .catch((error) => {
+        fetchUsecases()
+        //toast(error.toString());
+      });
+  }
+
+  const getUsecase = (subcase, index, subindex) => {
+    subcase = parseUsecase(subcase)
+    setPrevSubcase(subcase)
+
+    fetch(`${globalUrl}/api/v1/workflows/usecases/${escape(subcase?.name?.replaceAll(" ", "_"))}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for framework!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        var parsedUsecase = responseJson
+
+        if (responseJson.success === false) {
+          parsedUsecase = subcase
+        } else {
+          parsedUsecase = responseJson
+
+          parsedUsecase.srcimg = subcase.srcimg
+          parsedUsecase.srcapp = subcase.srcapp
+          parsedUsecase.dstimg = subcase.dstimg
+          parsedUsecase.dstapp = subcase.dstapp
+        }
+        // Look for the type of app and fill in img1, srcapp...
+        setInputUsecase(parsedUsecase)
+      })
+      .catch((error) => {
+        //toast(error.toString());
+        setInputUsecase(subcase)
+        console.log("Error getting usecase: ", error)
+      })
+  }
+
+
+
+  useEffect(() => {
+    getAvailableWorkflows()
+    getFramework()
+  }, [app])
+
+
+  useEffect(() => {
+    const foundCategory = latestUsecase?.find((category) =>
+      category?.list?.some((subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name)
+    );
+
+    const foundSubcase = foundCategory?.list?.find(
+      (subcase) => subcase?.srcapp === app?.name || subcase?.dstapp === app?.name
+    );
+
+    setFoundAppUsecase(foundSubcase);
+  }, [latestUsecase])
+
+  const isCloud =
+    window.location.host === "localhost:3002" ||
+      window.location.host === "shuffler.io" || window.location.host === "localhost:3000"
+      ? true
+      : false;
+
+  var newAppname = app?.name;
+  if (newAppname === undefined) {
+    newAppname = "Undefined";
+  } else {
+    newAppname = newAppname.charAt(0).toUpperCase() + newAppname.substring(1);
+    newAppname = newAppname?.replaceAll("_", " ");
+  }
+
+  var canEditApp = userdata.admin === "true" || userdata.id === app?.owner || app?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === app?.reference_org) || !app?.generated
+
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="sm"
+      fullWidth
+      PaperProps={{
+        sx: {
+          borderRadius: 3,
+          border: "1px solid var(--Container-Stroke, #494949)",
+          backgroundColor: "var(--Container, #212121)",
+          minWidth: '440px',
+          fontFamily: "Inter"
+        }
+      }}
+    >
+      <DialogTitle
+        sx={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          pb: 1,
+          pt: 2,
+          px: 3
+        }}
+      >
+        <Typography variant="h5" component="div" sx={{ fontWeight: 500 }}>
+          About Gmail
+        </Typography>
+        <IconButton
+          onClick={onClose}
+          sx={{
+            color: 'text.secondary',
+            '&:hover': { bgcolor: 'action.hover' }
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent>
+        <Box sx={{ display: 'flex', alignItems: 'space-between', justifyContent: 'space-between', pt: 2 }}>
+
+          <div style={{ display: "flex", flexDirection: "row", gap: 10, fontFamily: "Inter" }}>
+            <img
+              alt={app?.name}
+              src={app?.large_image || app?.image_url}
+              style={{
+                borderRadius: 4,
+                maxWidth: 100,
+                minWidth: 100,
+                maxHeight: "100%",
+                display: "block",
+                margin: "0 auto",
+                boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.2)"
+              }}
+            />
+            <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
+              <div style={{
+                display: "flex",
+                flexDirection: "row",
+              }}>
+                <Typography variant="h6" component="div" sx={{ fontWeight: 600 }}>
+                  {newAppname}
+                </Typography>
+                {
+                  isCloud && (
+                    <a
+                      rel="noopener noreferrer"
+                      href={"https://shuffler.io/apps/" + app?.id}
+                      style={{ textDecoration: "none", color: "#f85a3e", marginTop: "-2px" }}
+                      target="_blank"
+                    >
+                      <IconButton
+                        style={{
+                          color: "#f85a3e",
+                          fontSize: 20,
+                        }}
+                      >
+                        <OpenInNewIcon />
+                      </IconButton>
+                    </a>
+                  )
+                }
+              </div>
+              <Typography
+                variant="body2"
+                color="textSecondary"
+              >
+                {app?.categories ? app.categories.join(", ") : "Communication"}
+              </Typography>
+            </div>
+          </div>
+          <div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignItems: "center", gap: 10 }}>
+            <Button
+              variant="contained"
+              sx={{
+                bgcolor: '#ff7043',
+                '&:hover': { bgcolor: '#f4511e' },
+                textTransform: 'none',
+                borderRadius: 1,
+                py: 1,
+                display: 'flex',
+                alignItems: 'center'
+              }}
+            >
+              <CloudDownloadOutlined />
+            </Button>
+            <Button
+              variant="contained"
+              sx={{
+                bgcolor: '#ff7043',
+                '&:hover': { bgcolor: '#f4511e' },
+                textTransform: 'none',
+                borderRadius: 1,
+                py: 1,
+                display: 'flex',
+                alignItems: 'center'
+              }}
+              startIcon={
+                canEditApp ? <EditIcon /> : <ForkRightIcon />
+              }
+            >
+              {canEditApp ? "Edit" : "Fork"}
+            </Button>
+          </div>
+        </Box>
+
+        <div style={{
+          display: "flex",
+          justifyContent: "space-between",
+          fontFamily: "Inter",
+          padding: "26px 0px"
+        }}>
+          <div style={{
+            textAlign: "start",
+            flex: 1,
+          }}>
+            <Typography variant="h4" sx={{
+              fontWeight: 700,
+              mb: 0.3,
+              color: '#fff'
+            }}>
+              20
+            </Typography>
+            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
+              Public Workflow
+            </Typography>
+          </div>
+          <div style={{
+            flex: 1,
+            textAlign: "start",
+            borderLeft: "1px solid rgba(255, 255, 255, 0.12)",
+            paddingLeft: "10px",
+            height: "100%",
+          }}>
+            <Typography variant="h4" sx={{
+              fontWeight: 700,
+              mb: 0.3,
+              color: '#fff'
+            }}>
+              {Array.isArray(app?.actions) ? app.actions.length : app?.actions}
+            </Typography>
+            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)' }}>
+              Actions
+            </Typography>
+          </div>
+          <div style={{
+            borderLeft: "1px solid rgba(255, 255, 255, 0.12)",
+            flex: 1,
+            paddingLeft: "10px",
+            paddingTop: "5px"
+          }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '4px', marginBottom: "5px" }}>
+              {
+                app?.collection ? (
+                  <>
+                    <CheckCircleIcon sx={{ color: '#4CAF50' }} />
+                    <Typography variant="body1" sx={{
+                      fontWeight: 500,
+                      color: '#fff',
+                      marginTop: "1px"
+                    }}>
+                      app.collection
+
+                    </Typography>
+                  </>
+                ) : "No collection yet"
+              }
+
+            </div>
+            <Typography variant="body2" sx={{ color: 'rgba(255, 255, 255, 0.7)', marginLeft: "1px" }}>
+              Part of a collection
+            </Typography>
+          </div>
+        </div>
+
+        <div style={{
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "start",
+          width: "100%"
+        }}>
+          <div style={{
+            fontFamily: "Inter",
+            fontSize: "16px",
+            fontWeight: 500,
+            color: "#fff",
+            marginBottom: "5px"
+          }}>
+            {
+              (foundAppUsecase?.srcapp !== undefined && foundAppUsecase?.dstapp !== undefined) ? (
+                "Connect " + foundAppUsecase?.srcapp?.replaceAll("_", " ") + " to " + foundAppUsecase?.dstapp?.replaceAll("_", " ")
+              ) : (
+                "Connect " + app?.name + " to any tool"
+              )
+            }
+          </div>
+
+          <Box sx={{
+            bgcolor: 'action.hover',
+            p: 2,
+            borderRadius: 1,
+            display: 'flex',
+            alignItems: 'center',
+            mb: 3
+          }}>
+            <Stack direction="row" spacing={-1}>
+              {
+                foundAppUsecase === undefined ? (
+                  <Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }}>
+                    <Search sx={{ color: 'text.primary', zIndex: 10, fontSize: 18}} />
+                  </Avatar>
+                ) : (
+                  <Avatar
+                    src={foundAppUsecase?.srcimg}
+                    sx={{
+                      width: 32,
+                      height: 32,
+                      bgcolor: 'background.paper',
+                      border: 1,
+                      borderColor: 'divider',
+                      zIndex: 10
+                    }}
+                  />
+                )
+              }
+             {
+                foundAppUsecase === undefined ? (
+                  <Avatar sx={{ width: 32, height: 32, bgcolor: 'background.paper', border: 1, borderColor: 'divider' }}>
+                    <AddIcon sx={{ color: 'text.primary', zIndex: 10, fontSize: 18}} />
+                  </Avatar>
+                ) : (
+                  <Avatar
+                    src={foundAppUsecase?.dstimg}
+                    sx={{
+                      width: 32,
+                      height: 32,
+                      bgcolor: 'background.paper',
+                      border: 1,
+                      borderColor: 'divider',
+                      zIndex: 10
+                    }}
+                  />
+                )
+              }
+            </Stack>
+            <Typography sx={{ ml: 2, fontSize: "14px", letterSpacing: "0.5px" }}>
+              {foundAppUsecase?.name || "Search for a Usecase"}
+            </Typography>
+          </Box>
+        </div>
+
+        <div style={{ display: "flex", justifyContent: "center", fontFamily: "Inter" }}>
+          <Button
+            variant="contained"
+            sx={{
+              bgcolor: '#ff7043',
+              '&:hover': {
+                bgcolor: '#f4511e'
+              },
+              textTransform: 'none',
+              borderRadius: 1,
+              py: 1,
+              px: 5,
+              fontSize: "16px",
+              tracking: "0.5px",
+              color: "black"
+            }}
+          >
+            Create a Usecase
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog >
+  );
+};
+
+export default AppModal;

frontend/src/components/ConfigureWorkflow.jsx

@@ -324,7 +324,7 @@ const ConfigureWorkflow = (props) => {
             }
           }
 
-		  if (app.authentication.type === "oauth2" || app.authentication.type === "oauth2-app") {
+		  if (app?.authentication?.type === "oauth2" || app?.authentication?.type === "oauth2-app") {
 			  filled = false
 			
 			  action.auth_type = "oauth2"
@@ -848,7 +848,7 @@ const ConfigureWorkflow = (props) => {
 				{opened ?
 					<div style={{padding: 12, }}>
 	
-						{action.app.authentication.type === "oauth2-app" || action.app.authentication.type === "oauth2" || action.auth_type === "oauth2" ?
+						{action.app?.authentication?.type === "oauth2-app" || action.app?.authentication?.type === "oauth2" || action.auth_type === "oauth2" ?
 							<div>
 								<AuthenticationOauth2
 									selectedApp={action.app}
@@ -945,7 +945,7 @@ const ConfigureWorkflow = (props) => {
 							)
 						})}
 
-						{action.app.authentication.type !== "oauth2-app" && action.app.authentication.type !== "oauth2" ?  
+						{action.app?.authentication?.type !== "oauth2-app" && action.app?.authentication?.type !== "oauth2" ?  
 							<Button
 								variant="contained"
 								color="primary"

frontend/src/views/Apps2.jsx

@@ -25,6 +25,7 @@ import { toast } from "react-toastify";
 import algoliasearch from "algoliasearch/lite";
 import { debounce } from "lodash";
 import AppSelection from "../components/AppSelection.jsx";
+import AppModal from "../components/AppModal.jsx";
 
 
 const searchClient = algoliasearch(
@@ -33,7 +34,7 @@ const searchClient = algoliasearch(
 );
 
 // AppCard Component
-const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab }) => {
+const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl, deactivatedIndexes, currTab, handleAppClick }) => {
   const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io" || window.location.host === "localhost:3000";
   const appUrl = isCloud ? `/apps/${data.id}` : `https://shuffler.io/apps/${data.id}`;
 
@@ -66,11 +67,8 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
             width: '100%',
             backgroundColor: mouseHoverIndex === index ? "#2F2F2F" : "#212121"
           }}
-          onClick={(event) => {
+          onClick={() => {
-            // if (!event.target.closest('.deactivate-button')) {
+            handleAppClick(data);
-            //   window.location.href = appUrl;
-            // }
-            console.log("clicked");
           }}
         >
           <img
@@ -188,6 +186,7 @@ const AppCard = ({ data, index, mouseHoverIndex, setMouseHoverIndex, globalUrl,
 const Hits = ({
   userdata,
   hits,
+  handleAppClick,
   setIsAnyAppActivated,
   searchQuery,
   globalUrl,
@@ -208,7 +207,6 @@ const Hits = ({
   };
 
 
-
   //Function for activation and deactivation of app
   const handleActivateButton = (event, data, type) => {
 
@@ -315,193 +313,192 @@ const Hits = ({
                           transitionDelay: `${workflowDelay}ms`,
                         }}
                       >
-                        <Grid>
+                        <div
-                          <a
+                          onClick={
-                            href={appUrl}
+                            () => {
-                            rel="noopener noreferrer"
+                              handleAppClick(data);
-                            target="_blank"
+                            }
+                          }
+                          style={{
+                            color: "#f85a3e",
+                          }}
+                        >
+                          <Paper
+                            elevation={0}
                             style={{
-                              textDecoration: "none",
+                              backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
-                              color: "#f85a3e",
+                              color: "rgba(241, 241, 241, 1)",
+                              cursor: "pointer",
+                              position: "relative",
+                              width: 365,
+                              height: 96,
+                              borderRadius: 8,
+                              boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
+                              marginBottom: 20,
+                            }}
+                            onMouseEnter={() => {
+                              setHoverEffect(index);
+                            }}
+                            onMouseLeave={() => {
+                              setHoverEffect(-1);
                             }}
                           >
-                            <Paper
+                            <ButtonBase style={{
-                              elevation={0}
+                              borderRadius: 6,
-                              style={{
+                              fontSize: 16,
-                                backgroundColor: hoverEffect === index ? "rgba(26, 26, 26, 1)" : "#1A1A1A",
+                              overflow: "hidden",
-                                color: "rgba(241, 241, 241, 1)",
+                              display: "flex",
-                                cursor: "pointer",
+                              alignItems: "flex-start",
-                                position: "relative",
+                              width: '100%',
-                                width: 365,
+                              backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
-                                height: 96,
+                            }}>
-                                borderRadius: 8,
+                              <img
-                                boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)",
+                                alt={data.name}
-                                marginBottom: 20,
+                                src={data.image_url ? data.image_url : "/images/no_image.png"}
-                              }}
+                                style={{
-                              onMouseEnter={() => {
+                                  width: 100,
-                                setHoverEffect(index);
+                                  height: 100,
-                              }}
+                                  borderRadius: 6,
-                              onMouseLeave={() => {
+                                  margin: 10,
-                                setHoverEffect(-1);
+                                  border: "1px solid #212122",
-                              }}
+                                  boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
-                            >
+                                }}
-                              <ButtonBase style={{
+                              />
-                                borderRadius: 6,
+                              <div
-                                fontSize: 16,
+                                style={{
-                                overflow: "hidden",
+                                  display: "flex",
-                                display: "flex",
+                                  flexDirection: "column",
-                                alignItems: "flex-start",
+                                  alignItems: "flex-start",
-                                width: '100%',
+                                  width: 339,
-                                backgroundColor: hoverEffect === index ? "#2F2F2F" : "#212121"
+                                  gap: 8,
-                              }}>
+                                  fontWeight: '400',
-                                <img
+                                  overflow: "hidden",
-                                  alt={data.name}
+                                  margin: "12px 0",
-                                  src={data.image_url ? data.image_url : "/images/no_image.png"}
+                                  fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
+                                }}
+                              >
+                                <div
                                   style={{
-                                    width: 100,
+                                    display: 'flex',
-                                    height: 100,
+                                    flexDirection: "row",
-                                    borderRadius: 6,
+                                    overflow: "hidden",
-                                    margin: 10,
+                                    gap: 8,
-                                    border: "1px solid #212122",
+                                    textOverflow: "ellipsis",
-                                    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.1)"
+                                    whiteSpace: "nowrap",
+                                    color: '#F1F1F1'
                                   }}
-                                />
+                                >
+                                  {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
+                                  {normalizedString(data.name)}
+                                </div>
+
+                                <div
+                                  style={{
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                    color: "rgba(158, 158, 158, 1)",
+                                    marginTop: 5
+                                  }}
+                                >
+                                  {data.categories !== null
+                                    ? normalizedString(data.categories).join(", ")
+                                    : "NA"}
+                                </div>
                                 <div
                                   style={{
                                     display: "flex",
-                                    flexDirection: "column",
+                                    justifyContent: 'space-between',
-                                    alignItems: "flex-start",
+                                    width: 230,
-                                    width: 339,
+                                    textAlign: 'start',
-                                    gap: 8,
+                                    color: "rgba(158, 158, 158, 1)",
-                                    fontWeight: '400',
-                                    overflow: "hidden",
-                                    margin: "12px 0",
-                                    fontFamily: "var(--zds-typography-base,Inter,Helvetica,arial,sans-serif)"
                                   }}
                                 >
-                                  <div
+                                  <div style={{ marginBottom: 15, }}>
-                                    style={{
+                                    {hoverEffect === index && isCloud ? (
-                                      display: 'flex',
+                                      <div>
-                                      flexDirection: "row",
+                                        {data.tags && (
-                                      overflow: "hidden",
+                                          <Tooltip
-                                      gap: 8,
+                                            title={data.tags.join(", ")}
-                                      textOverflow: "ellipsis",
+                                            placement="bottom"
-                                      whiteSpace: "nowrap",
+                                            componentsProps={{
-                                      color: '#F1F1F1'
+                                              tooltip: {
-                                    }}
+                                                sx: {
-                                  >
+                                                  backgroundColor: "rgba(33, 33, 33, 1)",
-                                    {(allActivatedAppIds && allActivatedAppIds.includes(data.objectID)) && <Box sx={{ width: 8, height: 8, backgroundColor: "#02CB70", borderRadius: '50%' }} />}
+                                                  color: "rgba(241, 241, 241, 1)",
-                                    {normalizedString(data.name)}
+                                                  width: "auto",
-                                  </div>
+                                                  height: "auto",
-
+                                                  fontSize: 16,
-                                  <div
+                                                  border: "1px solid rgba(73, 73, 73, 1)",
-                                    style={{
-                                      overflow: "hidden",
-                                      textOverflow: "ellipsis",
-                                      whiteSpace: "nowrap",
-                                      color: "rgba(158, 158, 158, 1)",
-                                      marginTop: 5
-                                    }}
-                                  >
-                                    {data.categories !== null
-                                      ? normalizedString(data.categories).join(", ")
-                                      : "NA"}
-                                  </div>
-                                  <div
-                                    style={{
-                                      display: "flex",
-                                      justifyContent: 'space-between',
-                                      width: 230,
-                                      textAlign: 'start',
-                                      color: "rgba(158, 158, 158, 1)",
-                                    }}
-                                  >
-                                    <div style={{ marginBottom: 15, }}>
-                                      {hoverEffect === index && isCloud ? (
-                                        <div>
-                                          {data.tags && (
-                                            <Tooltip
-                                              title={data.tags.join(", ")}
-                                              placement="bottom"
-                                              componentsProps={{
-                                                tooltip: {
-                                                  sx: {
-                                                    backgroundColor: "rgba(33, 33, 33, 1)",
-                                                    color: "rgba(241, 241, 241, 1)",
-                                                    width: "auto",
-                                                    height: "auto",
-                                                    fontSize: 16,
-                                                    border: "1px solid rgba(73, 73, 73, 1)",
-                                                  }
                                                 }
-                                              }}
+                                              }
-                                            >
+                                            }}
-                                              <span>
+                                          >
-                                                {data.tags.slice(0, 1).map((tag, tagIndex) => (
+                                            <span>
-                                                  <span key={tagIndex}>
+                                              {data.tags.slice(0, 1).map((tag, tagIndex) => (
-                                                    {normalizedString(tag)}
+                                                <span key={tagIndex}>
-                                                    {tagIndex < 1 ? ", " : ""}
+                                                  {normalizedString(tag)}
-                                                  </span>
+                                                  {tagIndex < 1 ? ", " : ""}
-                                                ))}
+                                                </span>
-                                              </span>
+                                              ))}
-                                            </Tooltip>
+                                            </span>
-                                          )}
+                                          </Tooltip>
-                                        </div>
+                                        )}
-                                      ) : (
+                                      </div>
-                                        <div style={{ width: 230, textOverflow: "ellipsis", overflow: 'hidden', whiteSpace: 'nowrap', }}>
+                                    ) : (
-                                          {data.tags &&
+                                      <div style={{ width: 230, textOverflow: "ellipsis", overflow: 'hidden', whiteSpace: 'nowrap', }}>
-                                            data.tags.map((tag, tagIndex) => (
+                                        {data.tags &&
-                                              <span key={tagIndex}>
+                                          data.tags.map((tag, tagIndex) => (
-                                                {normalizedString(tag)}
+                                            <span key={tagIndex}>
-                                                {tagIndex < data.tags.length - 1 ? ", " : ""}
+                                              {normalizedString(tag)}
-                                              </span>
+                                              {tagIndex < data.tags.length - 1 ? ", " : ""}
-                                            ))}
+                                            </span>
-                                        </div>
+                                          ))}
-                                      )}
+                                      </div>
-                                    </div>
+                                    )}
-                                    <div style={{ position: 'relative', bottom: 5 }}>
+                                  </div>
-                                      {hoverEffect === index && isCloud && (
+                                  <div style={{ position: 'relative', bottom: 5 }}>
-                                        <div>
+                                    {hoverEffect === index && isCloud && (
-                                          {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
+                                      <div>
-                                            <Button style={{
+                                        {allActivatedAppIds && allActivatedAppIds.includes(data.objectID) ? (
+                                          <Button style={{
+                                            width: 102,
+                                            height: 35,
+                                            borderRadius: 200,
+                                            backgroundColor: "rgba(73, 73, 73, 1)",
+                                            color: "rgba(241, 241, 241, 1)",
+                                            textTransform: "none",
+                                          }}
+                                            onClick={(event) => {
+                                              handleActivateButton(event, data, "deactivate");
+                                            }}>
+                                            Deactivate
+                                          </Button>
+                                        ) : (
+                                          <Button
+                                            style={{
                                               width: 102,
                                               height: 35,
                                               borderRadius: 200,
-                                              backgroundColor: "rgba(73, 73, 73, 1)",
+                                              backgroundColor: "rgba(242, 101, 59, 1)",
-                                              color: "rgba(241, 241, 241, 1)",
+                                              color: "rgba(255, 255, 255, 1)",
                                               textTransform: "none",
                                             }}
-                                              onClick={(event) => {
+                                            onClick={(event) => {
-                                                handleActivateButton(event, data, "deactivate");
+                                              handleActivateButton(event, data, "activate");
-                                              }}>
+                                            }}
-                                              Deactivate
+                                          >
-                                            </Button>
+                                            Activate
-                                          ) : (
+                                          </Button>
-                                            <Button
+                                        )}
-                                              style={{
+                                      </div>
-                                                width: 102,
+                                    )}
-                                                height: 35,
-                                                borderRadius: 200,
-                                                backgroundColor: "rgba(242, 101, 59, 1)",
-                                                color: "rgba(255, 255, 255, 1)",
-                                                textTransform: "none",
-                                              }}
-                                              onClick={(event) => {
-                                                handleActivateButton(event, data, "activate");
-                                              }}
-                                            >
-                                              Activate
-                                            </Button>
-                                          )}
-                                        </div>
-                                      )}
-                                    </div>
                                   </div>
                                 </div>
-                              </ButtonBase>
+                              </div>
-                            </Paper>
+                            </ButtonBase>
-                          </a>
+                          </Paper>
-                        </Grid>
+                        </div>
                       </Zoom>
                     );
                   })}
@@ -569,7 +566,7 @@ const SearchBox = ({ refine, searchQuery, setSearchQuery }) => {
       setSearchQuery(value);
       removeQuery("q");
       refine(value);
-    }, 300) // Adjust the delay as needed
+    }, 300)
   ).current;
 
   useEffect(() => {
@@ -702,8 +699,8 @@ const Apps2 = (props) => {
   const [mouseHoverIndex, setMouseHoverIndex] = useState(-1);
   var counted = 0;
   const [showNoAppFound, setShowNoAppFound] = useState(false);
-
+  const [openModal, setOpenModal] = useState(false);
-
+  const [selectedApp, setSelectedApp] = useState(null);
   const [appFramework, setAppFramework] = useState(undefined);
   const [defaultSearch, setDefaultSearch] = useState("");
   // Set the current tab based on the query parameter
@@ -799,6 +796,7 @@ const Apps2 = (props) => {
       }
     };
 
+
     // Only fetch if we have required data
     if (globalUrl && (currTab === 0 || (currTab === 1 && userdata?.id))) {
       fetchApps();
@@ -883,7 +881,7 @@ const Apps2 = (props) => {
 
   const handleCreateApp = (e) => {
     e.preventDefault();
-    console.log("Create app clicked")
+    setOpenModal(true);
   };
 
 
@@ -941,7 +939,6 @@ const Apps2 = (props) => {
     queryParams.set('tab', newQueryParam);
     queryParams.delete('q');
     window.history.replaceState({}, '', `${location.pathname}?${queryParams.toString()}`);
-    console.log("Apps to show", appsToShow)
   };
 
 
@@ -968,9 +965,24 @@ const Apps2 = (props) => {
     setSelectedLabel(value);
   };
 
+  const handleAppClick = (app) => {
+    setSelectedApp(app);
+    setOpenModal(true);
+  }
+
+  const handleAppModalClose = () => {
+    setOpenModal(false)
+  }
 
   return (
     <InstantSearch searchClient={searchClient} indexName="appsearch">
+      <AppModal
+        open={openModal}
+        onClose={handleAppModalClose}
+        app={selectedApp}
+        userdata={userdata}
+        globalUrl={globalUrl}
+      />
       <div style={boxStyle}>
         <Typography variant="h4" style={{ marginBottom: 20, paddingLeft: 15, textTransform: 'none' }}>
           Apps
@@ -1103,7 +1115,7 @@ const Apps2 = (props) => {
                     {appsToShow?.length > 0 && appsToShow !== undefined && !isLoading ? (
                       <div style={{ rowGap: 16, columnGap: 16, marginTop: 16, display: "flex", flexWrap: "wrap", justifyContent: "flex-start", maxHeight: 570, scrollbarWidth: "thin", scrollbarColor: "#494949 #2f2f2f" }}>
                         {appsToShow.map((data, index) => (
-                          <AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab} />
+                          <AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab} handleAppClick={handleAppClick} />
                         ))}
                       </div>
                     ) : (
@@ -1137,7 +1149,9 @@ const Apps2 = (props) => {
                     {appsToShow?.length > 0 && appsToShow !== undefined ? (
                       <div style={{ rowGap: 16, columnGap: 16, marginTop: 16, display: "flex", flexWrap: "wrap", justifyContent: "flex-start", maxHeight: 570, scrollbarWidth: "thin", scrollbarColor: "#494949 #2f2f2f" }}>
                         {appsToShow.map((data, index) => (
-                          <AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab} />
+                          <AppCard key={index} data={data} index={index} mouseHoverIndex={mouseHoverIndex} setMouseHoverIndex={setMouseHoverIndex} globalUrl={globalUrl} deactivatedIndexes={deactivatedIndexes} currTab={currTab} 
+                          handleAppClick={handleAppClick}
+                          />
                         ))}
                       </div>
                     ) : (
@@ -1156,6 +1170,7 @@ const Apps2 = (props) => {
             <CustomHits
               isLoggedIn={isLoggedIn}
               userdata={userdata}
+              handleAppClick={handleAppClick}
               setIsAnyAppActivated={setIsAnyAppActivated}
               hitsPerPage={5}
               globalUrl={globalUrl}

frontend/src/views/LoginPage.jsx

@@ -183,7 +183,10 @@ const LoginDialog = (props) => {
 
 			  if (responseJson.tutorials === undefined || responseJson.tutorials === null || !responseJson.tutorials.includes("welcome")) {
 			  	console.log("RUN Welcome!!")
-			  	window.location.pathname = "/welcome?tab=2" 
+          setTimeout(() => {
+            navigate("/welcome?tab=2")
+          },200)
+			  	// window.location.pathname = "" 
 			  	return
 			  }
 

frontend/src/views/Usecases2.jsx

@@ -692,7 +692,7 @@ const UsecaseListComponent = (props) => {
 
 // This is the start of a dashboard that can be used.
 // What data do we fill in here? Idk
-const Dashboard = (props) => {
+const Usecases2 = (props) => {
   const { globalUrl, isLoggedIn, userdata } = props;
   //const alert = useAlert();
   const { leftSideBarOpenByClick} = useContext(Context);
@@ -1250,4 +1250,4 @@ const Dashboard = (props) => {
   return dataWrapper
 };
 
-export default Dashboard;
+export default Usecases2;