From ceb724cfc695c7678ad3ee5c889164e6dc56360e Mon Sep 17 00:00:00 2001
From: Frikky <frikky@shuffler.io>
Date: Fri, 20 Dec 2024 17:26:41 +0200
Subject: [PATCH] Cloud synced

---
 frontend/src/components/CacheView.jsx    |   4 +-
 frontend/src/components/Files.jsx        |  54 ++++++-----
 frontend/src/components/LicencePopup.jsx |  13 ++-
 frontend/src/components/NewHeader.jsx    |  44 ++++++++-
 frontend/src/views/AngularWorkflow.jsx   |  87 ++++++++++--------
 frontend/src/views/Apps2.jsx             |  69 ++++++++++----
 frontend/src/views/Workflows2.jsx        | 110 ++++++++++++++++++-----
 7 files changed, 272 insertions(+), 109 deletions(-)

diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 636509eb..7929a7ab 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -303,7 +303,7 @@ const CacheView = memo((props) => {
                 Key
                 <TextField
                     color="primary"
-                    style={{ backgroundColor: theme.palette.inputColor }}
+                    style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
                     autoFocus
                     InputProps={{
                         style: {
@@ -341,7 +341,7 @@ const CacheView = memo((props) => {
 				</div>
                 <TextField
                     color="primary"
-                    style={{ backgroundColor: theme.palette.inputColor, marginTop: 0, }}
+                    style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor, marginTop: 0, }}
                     InputProps={{
                         style: {
                             color: "white",
diff --git a/frontend/src/components/Files.jsx b/frontend/src/components/Files.jsx
index 43a89e3b..b912e8ef 100644
--- a/frontend/src/components/Files.jsx
+++ b/frontend/src/components/Files.jsx
@@ -280,7 +280,7 @@ const Files = memo((props) => {
       <DialogContent style={{ color: "rgba(255,255,255,0.65)" }}>
         Repository URL (supported: github, gitlab, bitbucket)
         <TextField
-          style={{ backgroundColor: theme.palette.inputColor }}
+          style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
           variant="outlined"
           margin="normal"
           defaultValue={downloadUrl}
@@ -301,7 +301,7 @@ const Files = memo((props) => {
 			  Branch (default value is "main"):
 			</span>
             <TextField
-              style={{ backgroundColor: theme.palette.inputColor }}
+              style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
               variant="outlined"
               margin="normal"
               defaultValue={downloadBranch}
@@ -322,7 +322,7 @@ const Files = memo((props) => {
 			  Folder (can use / for subfolders):
 			</span>
 		    <TextField
-                style={{ backgroundColor: theme.palette.inputColor }}
+                style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
                 variant="outlined"
                 margin="normal"
                 defaultValue={downloadFolder}
@@ -344,7 +344,7 @@ const Files = memo((props) => {
         </span>
         <div style={{ display: "flex" }}>
           <TextField
-            style={{ flex: 1, backgroundColor: theme.palette.inputColor }}
+            style={{ flex: 1, backgroundColor: theme.palette.textFieldStyle.backgroundColork }}
             variant="outlined"
             margin="normal"
             InputProps={{
@@ -360,7 +360,7 @@ const Files = memo((props) => {
             fullWidth
           />
           <TextField
-            style={{ flex: 1, backgroundColor: theme.palette.inputColor }}
+            style={{ flex: 1, backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
             variant="outlined"
             margin="normal"
             InputProps={{
@@ -668,7 +668,7 @@ const Files = memo((props) => {
 				{fileDownloadModal} 
 
 				<div style={{ marginTop: isSelectedFiles ? 2: 20, marginBottom:20 }}>
-					<h2 style={{ display: isSelectedFiles ? null : "inline", marginTop: isSelectedFiles?0:null, marginBottom: isSelectedFiles?8:null }}>Files</h2>
+					<h2 style={{ display: isSelectedFiles ? null : "inline", marginTop: isSelectedFiles?0:null, marginBottom: isSelectedFiles?8:null, color: "#FFFFFF"}}>Files</h2>
 					<span style={{ marginLeft: isSelectedFiles ? null : 25, color:isSelectedFiles?"#9E9E9E":null}}>
 						Files from Workflows are a way to store as well as edit files.{" "}
 						<a
@@ -833,7 +833,7 @@ const Files = memo((props) => {
 					style={{
 						marginTop: 20,
 						marginBottom: 20,
-						backgroundColor: theme.palette.inputColor,
+						backgroundColor: theme.palette.textFieldStyle.backgroundColor,
 					}}
 				/>}
 				<div
@@ -1209,20 +1209,28 @@ const Files = memo((props) => {
 export default memo(Files);
 
 
-const DownloadFileIcon = memo(({ setLoadFileModalOpen, isSelectedFiles, }) => {
-
-	const { leftSideBarOpenByClick } = useContext(Context)
-
-	return(
-		<Tooltip color="primary" title={"Import files to Shuffle from Git"} placement="top">
-			<IconButton
-				color="secondary"
-				style={{position: "absolute", right: 0, top: isSelectedFiles?null:0, left: isSelectedFiles? leftSideBarOpenByClick ? "90%": "85%":null, transition: "left 0.3s ease" }}
-				variant="text"
-				onClick={() => setLoadFileModalOpen(true)}
-			>
-				<CloudDownloadIcon />
-			</IconButton>
+const DownloadFileIcon = memo(({ setLoadFileModalOpen, isSelectedFiles }) => {
+	
+    return (
+        <Tooltip color="primary" title={"Import files to Shuffle from Git"} placement="top">
+            <IconButton
+                color="secondary"
+                onClick={() => setLoadFileModalOpen(true)}
+                sx={{
+                    position: "absolute",
+                    right: 0,
+                    top: isSelectedFiles ? null : 0,
+                    left: isSelectedFiles
+                        ? "93%"
+                        : null,
+                    transition: "left 0.3s ease",
+                    width: 48,
+                    height: 48,
+                    borderRadius: "50%",
+                }}
+            >
+                <CloudDownloadIcon />
+            </IconButton>
         </Tooltip>
-	)
-})
+    );
+});
diff --git a/frontend/src/components/LicencePopup.jsx b/frontend/src/components/LicencePopup.jsx
index 5812cc09..b8d009a3 100644
--- a/frontend/src/components/LicencePopup.jsx
+++ b/frontend/src/components/LicencePopup.jsx
@@ -93,7 +93,7 @@ const LicencePopup = (props) => {
     const paperStyle = {
         padding: 20,
         borderRadius: theme.palette?.borderRadius,
-        height: "100%",
+        height: "100%"
     }
 
     billingInfo.subscription = {
@@ -596,7 +596,8 @@ const LicencePopup = (props) => {
                                 </div>
 							: null}
                         </div>
-                        <Button
+                        {isCloud ? (
+                            <Button
 							fullWidth
 							disabled={false}
 							color="primary"
@@ -626,11 +627,11 @@ const LicencePopup = (props) => {
 								:
 								"Add Card Details"
 							}
-						</Button> 
+						</Button> ) : null}
                             <Button
                             variant="outlined"
                             style={{
-                                marginTop: 10,
+                                marginTop: isCloud? 10 : 30,
                                 borderRadius: 4,
                                 width: "100%",
                                 cursor: "pointer",
@@ -725,14 +726,13 @@ const LicencePopup = (props) => {
     }
 
     const handleChange = (event, newValue) => {
-        console.log("Event, value: ", event.target, newValue)
 
         if (shuffleVariant === 1) {
             setSelectedValue(newValue)
             if (newValue === 32) {
                 setCalculatedCost(`Get A Quote`)
             } else {
-                setCalculatedCost(`$${newValue * 75}`)
+                setCalculatedCost(`$${newValue * 120}`)
             }
         } else {
             setSelectedValue(newValue)
@@ -1112,7 +1112,6 @@ const LicencePopup = (props) => {
 								navigate(`/register?view=pricing&message=You need to create a user to continue`)
 							}
 						} else {
-                            console.log("window.drift: ", window.drift)
 							if (window.drift !== undefined) {
 								window.drift.api.startInteraction({ 
 									interactionId: 386403, 
diff --git a/frontend/src/components/NewHeader.jsx b/frontend/src/components/NewHeader.jsx
index abdbcafd..e193460c 100644
--- a/frontend/src/components/NewHeader.jsx
+++ b/frontend/src/components/NewHeader.jsx
@@ -141,6 +141,7 @@ const Header = (props) => {
   const [subAnchorEl, setSubAnchorEl] = React.useState(null);
   const [upgradeHovered, setUpgradeHovered] = React.useState(false);
   const [showTopbar, setShowTopbar] = useState(false) // Set to true to show top bar
+  const [selectedOrganization, setSelectedOrganization] = useState({});
   const stripeKey = typeof window === 'undefined' || window.location === undefined ? "" : window.location.origin === "https://shuffler.io" ? "pk_live_51PXYYMEJjT17t98N20qEqItyt1fLQjrnn41lPeG2PjnSlZHTDNKHuisAbW00s4KAn86nGuqB9uSVU4ds8MutbnMU00DPXpZ8ZD" : "pk_test_51PXYYMEJjT17t98NbDkojZ3DRvsFUQBs35LGMx3i436BXwEBVFKB9nCvHt0Q3M4MG3dz4mHheuWvfoYvpaL3GmsG00k1Rb2ksO"
   let navigate = useNavigate();
   const classes = useStyles();
@@ -222,10 +223,45 @@ const Header = (props) => {
       window.location.host === "shuffler.io" ||
       window.location.host === "localhost:5002";
 
+
   const curpath = (typeof window !== "undefined" && window.location && typeof window.location.pathname === "string")
     ? window.location.pathname
     : "";
 
+
+    const handleGetOrg = (orgId) => {
+            fetch(`${globalUrl}/api/v1/orgs/${orgId}`, {
+                method: "GET",
+                credentials: "include",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+            })
+                .then((response) => {
+                    if (response.status === 401) {
+                    }
+    
+                    return response.json();
+                })
+                .then((responseJson) => {
+                    if (responseJson["success"] === false) {
+                        console.log("Error getting org: ", responseJson);
+                    } else {
+                        setSelectedOrganization(responseJson);
+                    }
+                })
+                .catch((error) => {
+                    console.log("Error getting org: ", error);
+                });
+    };
+
+
+    useEffect(() => {
+        if (isLoggedIn && userdata?.active_org?.id?.length > 0) {
+                handleGetOrg(userdata.active_org.id);
+        }
+    }, [isLoggedIn]);
+
   // DEBUG HERE
   const handleClickLogout = () => {
     console.log("SHOULD LOG OUT");
@@ -441,7 +477,7 @@ const Header = (props) => {
 			}) 
 		  </MenuItem>
 		</Link>
-        <Link to="/usecases2" style={hrefStyle}>
+        <Link to="/usecases" style={hrefStyle}>
           <MenuItem
             onClick={(event) => {
               handleClose();
@@ -537,9 +573,9 @@ const Header = (props) => {
           isLoaded={isLoaded}
           isLoggedIn={isLoggedIn}
           globalUrl={globalUrl}
-
+          selectedOrganization={selectedOrganization}
           billingInfo={billingInfo}
-
+          isCloud={isCloud}
           userdata={userdata}
           stripeKey={stripeKey}
           setModalOpen={setModalOpen}
@@ -590,7 +626,7 @@ const Header = (props) => {
       </List>
       <List className={classes.menuList} component="nav">
         <ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
-          <Link to="/usecases2" style={hrefStyle}>
+          <Link to="/usecases" style={hrefStyle}>
             <Button
               variant="text"
               color="secondary"
diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index f14fbdff..7550369c 100755
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -4859,7 +4859,7 @@ const releaseToConnectLabel = "Release to Connect"
 	// This causes memory referencing to become a nightmare
 	const data = event.target.data()
     if (data.app_name === "Shuffle Workflow") {
-      if ((data.parameters !== undefined) && (data.parameters.length > 0)) {
+      if ((data?.parameters !== undefined) && (data?.parameters?.length > 0)) {
         getWorkflowApps(data.parameters[0].value)
       }
     }
@@ -10657,7 +10657,7 @@ const releaseToConnectLabel = "Release to Connect"
 
 
 						return(
-							<div style={{marginLeft: index !== 0 ? 5 : 0, }}>
+							<div key={index} style={{marginLeft: index !== 0 ? 5 : 0, }}>
 								<ParsedAppPaper small={true} action={trigger.name} app={JSON.parse(JSON.stringify(trigger))} />
 							</div>
 						)
@@ -11200,7 +11200,7 @@ const releaseToConnectLabel = "Release to Connect"
   const minSize = 370 
   var rightsidebarStyle = {
     position: "fixed",
-    top: appBarSize - 35,
+    top: workflow?.public && !isLoggedIn ? 100 : showWorkflowRevisions ? 100 : appBarSize - 35,
     right: 25,
     height:  "90vh",
     maxWidth: 600,
@@ -13218,7 +13218,7 @@ const releaseToConnectLabel = "Release to Connect"
       };
 
   
-    if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
+    if (Object.getOwnPropertyNames(selectedTrigger)?.length > 0) {
       if (workflow.triggers[selectedTriggerIndex] === undefined) {
         return null;
       }
@@ -14378,7 +14378,7 @@ const releaseToConnectLabel = "Release to Connect"
 
   // Special SCHEDULE handler
   var trigger_header_auth = ""
-  if (Object.getOwnPropertyNames(selectedTrigger).length > 0 && workflow.triggers !== null && workflow.triggers !== undefined && workflow.triggers.length >= selectedTriggerIndex && workflow.triggers[selectedTriggerIndex] !== undefined ) {
+  if (Object.getOwnPropertyNames(selectedTrigger)?.length > 0 && workflow?.triggers !== null && workflow?.triggers !== undefined && workflow?.triggers?.length >= selectedTriggerIndex && workflow?.triggers[selectedTriggerIndex] !== undefined ) {
       if (selectedTrigger.trigger_type === "SCHEDULE" && workflow.triggers[selectedTriggerIndex].parameters === undefined || workflow.triggers[selectedTriggerIndex].parameters === null) {
 	    console.log("Autofixing schedule")
 
@@ -14447,7 +14447,7 @@ const releaseToConnectLabel = "Release to Connect"
         if (
           workflow.triggers[selectedTriggerIndex].parameters === undefined ||
           workflow.triggers[selectedTriggerIndex].parameters === null ||
-          workflow.triggers[selectedTriggerIndex].parameters.length === 0
+          workflow?.triggers[selectedTriggerIndex]?.parameters?.length === 0
         ) {
           workflow.triggers[selectedTriggerIndex].parameters = [];
           workflow.triggers[selectedTriggerIndex].parameters[0] = {
@@ -14485,7 +14485,7 @@ const releaseToConnectLabel = "Release to Connect"
       }
   }
 
-  const WebhookSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined || selectedTrigger.trigger_type !== "WEBHOOK" ? null :
+  const WebhookSidebar =!selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || workflow?.triggers[selectedTriggerIndex] === undefined || selectedTrigger?.trigger_type !== "WEBHOOK" ? null :
         <div style={appApiViewStyle}>
 		  <h3 style={{ marginBottom: "5px" }}>
 			{selectedTrigger.app_name}: {selectedTrigger.status}
@@ -14752,8 +14752,8 @@ const releaseToConnectLabel = "Release to Connect"
               </div>
               <TextField
                 style={{
-                  backgroundColor: theme.palette.inputColor,
-                  borderRadius: theme.palette?.borderRadius,
+                  backgroundColor: theme.palette.textFieldStyle.backgroundColor,
+                  borderRadius: theme.palette.textFieldStyle.borderRadius,
                 }}
                 id="webhook_uri_field"
                 onClick={() => {
@@ -15217,7 +15217,7 @@ const releaseToConnectLabel = "Release to Connect"
 	  })
   }
 
-  const UserinputSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined || selectedTrigger.trigger_type !== "USERINPUT" ? null :
+  const UserinputSidebar = !selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || !workflow?.triggers[selectedTriggerIndex] || !selectedTrigger.trigger_type || selectedTrigger.trigger_type !== "USERINPUT"   ? null :
         <div style={appApiViewStyle}>
 		  <h3 style={{ marginBottom: "5px" }}>
 			{selectedTrigger.app_name}
@@ -15378,7 +15378,13 @@ const releaseToConnectLabel = "Release to Connect"
                 label={<div style={{ color: "white" }}>SMS</div>}
               />
             </FormGroup>
-			{workflow.triggers[selectedTriggerIndex].parameters[2] !== undefined && workflow.triggers[selectedTriggerIndex].parameters[2].value.includes("subflow") ? (
+			{workflow?.triggers &&
+        workflow?.triggers[selectedTriggerIndex] &&
+        workflow?.triggers[selectedTriggerIndex].parameters &&
+        workflow?.triggers[selectedTriggerIndex].parameters[2] &&
+        workflow?.triggers[selectedTriggerIndex].parameters[2].value &&
+        workflow?.triggers[selectedTriggerIndex].parameters[2].value.includes("subflow")
+      ? (
 			<div style={{  }}>
               	{workflows === undefined ||
               	  workflows === null ||
@@ -15506,9 +15512,13 @@ const releaseToConnectLabel = "Release to Connect"
 				</div>
             ) : null}
 
-            {workflow.triggers[selectedTriggerIndex].parameters[2] !==
-              undefined &&
-              workflow.triggers[selectedTriggerIndex].parameters[2].value.includes("email") ? (
+            {workflow?.triggers &&
+              workflow?.triggers[selectedTriggerIndex] &&
+              workflow?.triggers[selectedTriggerIndex].parameters &&
+              workflow?.triggers[selectedTriggerIndex].parameters[2] &&
+              workflow?.triggers[selectedTriggerIndex].parameters[2].value &&
+              workflow?.triggers[selectedTriggerIndex].parameters[2].value.includes("email")
+               ? (
               <TextField
                 style={{
                   backgroundColor: theme.palette.inputColor,
@@ -15538,11 +15548,15 @@ const releaseToConnectLabel = "Release to Connect"
               />
             ) : null}
 
-            {workflow.triggers[selectedTriggerIndex].parameters[2] !==
-              undefined &&
-              workflow.triggers[
-                selectedTriggerIndex
-              ].parameters[2].value.includes("sms") ? (
+            {workflow?.triggers &&
+              workflow?.triggers[selectedTriggerIndex] &&
+              workflow?.triggers[selectedTriggerIndex].parameters &&
+              workflow?.triggers[selectedTriggerIndex].parameters[2] &&
+              workflow?.triggers[selectedTriggerIndex].parameters[2].value &&
+              (
+                workflow?.triggers[selectedTriggerIndex].parameters[2].value.includes("email") || 
+                workflow?.triggers[selectedTriggerIndex].parameters[2].value.includes("sms")
+              ) ? (
               <TextField
                 style={{
                   backgroundColor: theme.palette.inputColor,
@@ -15639,7 +15653,7 @@ const releaseToConnectLabel = "Release to Connect"
      selectedTrigger.environment = defaultEnvironment.Name
      setSelectedTrigger(selectedTrigger)  }
 
-  const PipelineSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined && selectedTrigger.trigger_type !== "SCHEDULE" ? null : 
+  const PipelineSidebar = !selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || !workflow?.triggers[selectedTriggerIndex] || !selectedTrigger.trigger_type || selectedTrigger.trigger_type !== "SCHEDULE"    ? null : 
           <div style={appApiViewStyle}>
             <h3 style={{ marginBottom: "5px" }}>
               {selectedTrigger.app_name}: {selectedTrigger.status}
@@ -15901,7 +15915,7 @@ const releaseToConnectLabel = "Release to Connect"
             </div>
           </div>
 
-  const ScheduleSidebar = Object.getOwnPropertyNames(selectedTrigger).length === 0 || workflow.triggers[selectedTriggerIndex] === undefined && selectedTrigger.trigger_type !== "SCHEDULE" ? null :
+  const ScheduleSidebar = !selectedTrigger || Object.getOwnPropertyNames(selectedTrigger)?.length === 0 || !workflow?.triggers || !workflow?.triggers[selectedTriggerIndex] && (!selectedTrigger.trigger_type || selectedTrigger.trigger_type !== "SCHEDULE")   ? null :
         <div style={appApiViewStyle}>
 		  <h3 style={{ marginBottom: "5px" }}>
 			{selectedTrigger.app_name}: {selectedTrigger.status}
@@ -16158,9 +16172,8 @@ const releaseToConnectLabel = "Release to Connect"
     position: "absolute",
 
     top: isMobile ? 30 : 25,
-	left: isMobile ? 20 : leftSideBarOpenByClick ? leftBarSize + 275 : leftBarSize+135,
-
-    transition: "left 0.3s ease",
+  transform: isMobile ? "translateX(20px)" : `translateX(${leftBarSize}px)`,
+    transition: "all 0.3s ease",
 	zoom: 0.9, 
   }
 
@@ -16922,7 +16935,7 @@ const releaseToConnectLabel = "Release to Connect"
 			border: "1px solid rgba(255,255,255,0.1)",
   			position: "absolute",
   			bottom: 100,
-  			left: leftSideBarOpenByClick ? leftBarSize+300 : leftBarSize+115,
+  			left: leftSideBarOpenByClick ? leftBarSize+270 : leftBarSize+115,
 
 			color: "white",
 			padding: 10, 
@@ -17374,8 +17387,8 @@ const releaseToConnectLabel = "Release to Connect"
                 color="secondary"
 				variant="text"
                 style={{
-                  height: workflow.public ? 100 : buttonHeights,
-                  width: workflow.public ? 100 : 64,
+                  height: buttonHeights,
+                  width:  64,
                 }}
                 variant={
                   lastSaved && !workflow.public ? "text" : "contained"
@@ -17619,7 +17632,7 @@ const releaseToConnectLabel = "Release to Connect"
       defaultReturn = <CommentSidebar />
     } else if (Object.getOwnPropertyNames(selectedTrigger).length > 0) {
       if (selectedTrigger.trigger_type === undefined) {
-        //defaultReturn = <UserinputSidebar />
+        // defaultReturn = <UserinputSidebar />
         return null;
       } else {
 		/*
@@ -17776,7 +17789,7 @@ const releaseToConnectLabel = "Release to Connect"
           <Typography variant="body1" style={{ marginRight: 10, }}>
             Tags
           </Typography>
-          <div style={{ display: "flex" }}>
+          <div style={{ display: "flex", flexWrap: 'wrap', gap: 5, }}>
             {workflow.tags.map((tag, index) => {
               if (index >= 3) {
                 return null;
@@ -17958,9 +17971,8 @@ const releaseToConnectLabel = "Release to Connect"
           </Typography>
           <Button
             color="primary"
-            variant="contained"
             fullWidth
-            style={{ marginTop: 15, }}
+            style={{ marginTop: 15, backgroundColor: "#ff8544", color: "#1a1a1a", fontSize: 16, textTransform: "none" }}
             onClick={() => {
               // Further checks are being done on the backend
               // Even if the user can "edit" a workflow on the frontend,
@@ -17990,7 +18002,7 @@ const releaseToConnectLabel = "Release to Connect"
             variant="outlined"
 		    disabled={workflow.public !== true}
             fullWidth
-            style={{ marginTop: 15, }}
+            style={{ marginTop: 15, textTransform: "none", fontSize: 16}}
             onClick={() => {
               // setEditWorkflowDetails(true)
               // workflow.public = false
@@ -20554,7 +20566,7 @@ const releaseToConnectLabel = "Release to Connect"
   );
 
   const newView = (
-    <div style={{ color: "white", marginLeft:   leftSideBarOpenByClick ? 280 : 100, transition: "margin-left 0.3s ease", }}>
+    <div style={{ color: "white", marginLeft:   leftSideBarOpenByClick ? workflow?.public ? 210 : 250 : workflow?.public ? isLoggedIn ? 60 : 0 : isLoggedIn ? 100 : 0, transition: "margin-left 0.3s ease", overflow: 'hidden' }}>
       <div
         style={{ display: "flex", borderTop: "0px solid rgba(91, 96, 100, 1)" }}
       >
@@ -20590,8 +20602,8 @@ const releaseToConnectLabel = "Release to Connect"
               maxZoom={2.0}
               wheelSensitivity={0.25}
               style={{
-                width: cytoscapeWidth,
-                height: bodyHeight - 5,
+                width: workflow?.public && !isLoggedIn ? cytoscapeWidth + 50 : cytoscapeWidth ,
+                height: workflow?.public && !isLoggedIn ? (bodyHeight - 50) : bodyHeight - 2,
                 backgroundColor: theme.palette.surfaceColor,
               }}
               stylesheet={cystyle}
@@ -20678,7 +20690,7 @@ const releaseToConnectLabel = "Release to Connect"
 	  {/* Most important: Actions. But these are a lot more complex */}
 	  {rightSideBarOpen && (selectedTrigger.trigger_type === "SCHEDULE" || selectedTrigger.trigger_type === "WEBHOOK" || selectedTrigger.trigger_type === "PIPELINE" || selectedTrigger.trigger_type === "USERINPUT") ?
 		  <div id="rightside_actions" style={rightsidebarStyle}>
-			  {Object.getOwnPropertyNames(selectedTrigger).length > 0 ? 
+			  {Object.getOwnPropertyNames(selectedTrigger)?.length > 0 ? 
 				selectedTrigger.trigger_type === "SCHEDULE" ? 
 					ScheduleSidebar 
 				: selectedTrigger.trigger_type === "PIPELINE" ? 
@@ -20693,7 +20705,7 @@ const releaseToConnectLabel = "Release to Connect"
 	  : null}
 
     {
-      rightSideBarOpen && selectedTrigger.trigger_type === "SUBFLOW"&& Object.getOwnPropertyNames(selectedTrigger).length > 0   ? 
+      rightSideBarOpen && selectedTrigger?.trigger_type === "SUBFLOW"&& Object.getOwnPropertyNames(selectedTrigger)?.length > 0   ? 
       <div id="rightside_actions" style={rightsidebarStyle}>
         <SubflowSidebar/>
         </div> : null
@@ -22033,6 +22045,7 @@ const releaseToConnectLabel = "Release to Connect"
 		  	<Paper 
 				style={{padding: "15px 15px 15px 25px", minHeight: 105, maxHeight: 105, cursor: "pointer", backgroundColor: newrevision.edited === selectedVersion.edited ? "rgba(255,255,255,0.3)" : theme.palette.surfaceColor, border: showBorder === true ? `1px solid ${green}` : "1px solid rgba(255,255,255,0.3)", marginBottom: 10, 
 				}} onClick={(e) => {
+          setRightSideBarOpen(false)
 					if (newrevision.edited === selectedVersion.edited) {
 						console.log("Same revision! No setting.")
 						return
diff --git a/frontend/src/views/Apps2.jsx b/frontend/src/views/Apps2.jsx
index 230e5b57..8e4944a5 100644
--- a/frontend/src/views/Apps2.jsx
+++ b/frontend/src/views/Apps2.jsx
@@ -22,13 +22,13 @@ import {
 import { Context } from "../context/ContextApi.jsx";
 
 import {
-	Add as AddIcon,
-	Edit as EditIcon,
-	Search as SearchIcon,
-	Clear as ClearIcon,
-	Close as CloseIcon,
-	Cached as CachedIcon,
-	CloudDownload as CloudDownloadIcon,
+  Add as AddIcon,
+  Edit as EditIcon,
+  Search as SearchIcon,
+  Clear as ClearIcon,
+  Close as CloseIcon,
+  Cached as CachedIcon,
+  CloudDownload as CloudDownloadIcon,
 } from "@mui/icons-material";
 
 import InputAdornment from '@mui/material/InputAdornment';
@@ -1194,9 +1194,9 @@ const Apps2 = (props) => {
         for (var key in responseJson) {
           const app = responseJson[key];
 
-		  if (app.categories !== undefined && app.categories !== null && app?.categories.includes("Eradication")) {
-			  app.categories = ["EDR"]
-		  }
+          if (app.categories !== undefined && app.categories !== null && app?.categories.includes("Eradication")) {
+            app.categories = ["EDR"]
+          }
 
           if (app.is_valid && !(!app.activated && app.generated)) {
             privateapps.push(app);
@@ -1724,6 +1724,22 @@ const Apps2 = (props) => {
     setOpenModal(false)
   }
 
+  const tabStyle = {
+    textTransform: 'none',
+    marginRight: 20,
+    fontFamily: theme?.typography?.fontFamily,
+    fontSize: 16,
+    borderBottom: "5px solid transparent",
+    minHeight: "48px",
+    padding: "12px 16px",
+  }
+
+  const tabActive = {
+    borderBottom: "5px solid #FF8544",
+    borderRadius: "2px",
+    color: "#FF8544"
+  }
+
   return (
     <div style={{ paddingTop: 70, paddingLeft: leftSideBarOpenByClick ? 200 : 0, transition: "padding-left 0.3s ease", backgroundColor: "#1A1A1A", fontFamily: theme?.typography?.fontFamily, zoom: 0.7, }}>
       <InstantSearch searchClient={searchClient} indexName="appsearch">
@@ -1837,12 +1853,35 @@ const Apps2 = (props) => {
             <Tabs
               value={currTab}
               onChange={(event, newTab) => handleTabChange(event, newTab)}
-              TabIndicatorProps={{ style: { height: '3px', borderRadius: 10, backgroundColor: "#FF8544" } }}
-              style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}
+              style={{ 
+                fontFamily: theme?.typography?.fontFamily, 
+                fontSize: 16,
+                marginBottom: "-2px"
+              }}
+              TabIndicatorProps={{ style: { display: 'none' } }} 
             >
-              <Tab label="Organization Apps" style={{ textTransform: 'none', marginRight: 20, fontFamily: theme?.typography?.fontFamily, fontSize: 16 }} />
-              <Tab label="My Apps" style={{ textTransform: 'none', marginRight: 20, fontFamily: theme?.typography?.fontFamily, fontSize: 16 }} />
-              <Tab label="Discover Apps" style={{ textTransform: 'none', fontFamily: theme?.typography?.fontFamily, fontSize: 16 }} />
+              <Tab 
+                label="Organization Apps" 
+                style={{ 
+                  ...tabStyle,
+                  ...(currTab === 0 ? tabActive : {})
+                }} 
+              />
+              <Tab 
+                label="My Apps" 
+                style={{ 
+                  ...tabStyle,
+                  ...(currTab === 1 ? tabActive : {})
+                }} 
+              />
+              <Tab 
+                label="Discover Apps" 
+                style={{ 
+                  ...tabStyle,
+                  marginRight: 0,
+                  ...(currTab === 2 ? tabActive : {})
+                }} 
+              />
             </Tabs>
           </div>
           <div style={{ display: "flex", justifyContent: "space-between", gap: 10, marginBottom: 20, height: 45, paddingRight: 25 }}>
diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx
index 80ef805a..e948244b 100644
--- a/frontend/src/views/Workflows2.jsx
+++ b/frontend/src/views/Workflows2.jsx
@@ -3980,6 +3980,12 @@ const Workflows2 = (props) => {
         justifyContent: 'center',
 
     }
+    
+    const iconButtonDisabledStyle = {
+        ...iconButtonStyle,
+        cursor: 'not-allowed',
+        opacity: 0.9, // Reduce opacity
+    }
 
     const Hits = ({ hits, isSearchStalled, searchQuery }) => {
 
@@ -4110,7 +4116,7 @@ const Workflows2 = (props) => {
                 variant="outlined"
                 displayEmpty
                 multiple
-                value={currentRefinement || []} // Ensure currentRefinement is always an array
+                value={currentRefinement || []} 
                 onChange={handleChange}
                 style={{
                     width: "25%",
@@ -4120,7 +4126,24 @@ const Workflows2 = (props) => {
                     borderRadius: 4,
                     backgroundColor: "#212121",
                     fontFamily: theme?.typography?.fontFamily,
-                    color: "#FFFFFF", // White text for better readability
+                    color: "#FFFFFF", 
+                }}
+                MenuProps={{
+                    anchorOrigin: {
+                        vertical: 'bottom',
+                        horizontal: 'left',
+                    },
+                    transformOrigin: {
+                        vertical: 'top',
+                        horizontal: 'left',
+                    },
+                    PaperProps: {
+                        style: {
+                            backgroundColor: '#212121',
+                            color: '#FFFFFF',
+                            fontFamily: theme?.typography?.fontFamily,
+                        }
+                    }
                 }}
                 sx={{
                     '& .MuiOutlinedInput-root': {
@@ -4154,7 +4177,7 @@ const Workflows2 = (props) => {
                     )
                 }
             >
-                <MenuItem disabled value="">
+                <MenuItem disabled value="" style={{ fontFamily: theme?.typography?.fontFamily, fontSize: 16 }}>
                     All Usecases
                 </MenuItem>
                 {items.map((usecase, index) => (
@@ -4168,12 +4191,12 @@ const Workflows2 = (props) => {
                                 backgroundColor: '#3A3A3A', // Darker background on hover
                             },
                             fontFamily: theme?.typography?.fontFamily,
-                            fontSize: "16px"
+                            fontSize: 16
                         }}
                     >
                         <Checkbox
                             checked={currentRefinement.includes(usecase.label)}
-                            style={{ marginRight: 8, color: '#FFFFFF' }}
+                            style={{ marginRight: 8, color: '#FFFFFF', fontSize: 16 }}
                         />
                         {usecase.label} ({usecase.count})
                     </MenuItem>
@@ -4183,6 +4206,21 @@ const Workflows2 = (props) => {
     };
     const CustomCategoryDropdown = connectRefinementList(CategoryDropdown)
 
+    const tabStyle = {
+        textTransform: 'none',
+        marginRight: 20,
+        fontFamily: theme?.typography?.fontFamily,
+        fontSize: 16,
+        borderBottom: "5px solid transparent",
+        minHeight: "48px",
+        padding: "12px 16px",
+    }
+
+    const tabActive = {
+        borderBottom: "5px solid #FF8544",
+        borderRadius: "2px",
+        color: "#FF8544"
+    }
 
 
     const WorkflowView = memo(() => {
@@ -4211,13 +4249,36 @@ const Workflows2 = (props) => {
                         <div style={{ borderBottom: '1px solid gray', marginBottom: 30 }}>
                             <Tabs
                                 value={currTab}
-                                onChange={handleTabChange}
-                                TabIndicatorProps={{ style: { height: '3px', borderRadius: 10, backgroundColor: "#FF8544" } }}
-                                style={{ fontFamily: theme?.typography?.fontFamily }}
+                                onChange={(event, newTab) => handleTabChange(event, newTab)}
+                                style={{
+                                    fontFamily: theme?.typography?.fontFamily,
+                                    fontSize: 16,
+                                    marginBottom: "-2px"
+                                }}
+                                TabIndicatorProps={{ style: { display: 'none' } }}
                             >
-                                <Tab label="Organization Workflows" style={{ textTransform: 'none', marginRight: 20, fontFamily: theme?.typography?.fontFamily }} />
-                                <Tab label="My Workflows" style={{ textTransform: 'none', marginRight: 20, fontFamily: theme?.typography?.fontFamily }} />
-                                <Tab label="Discover Workflows" style={{ textTransform: 'none', fontFamily: theme?.typography?.fontFamily }} />
+                                <Tab
+                                    label="Organization Apps"
+                                    style={{
+                                        ...tabStyle,
+                                        ...(currTab === 0 ? tabActive : {})
+                                    }}
+                                />
+                                <Tab
+                                    label="My Apps"
+                                    style={{
+                                        ...tabStyle,
+                                        ...(currTab === 1 ? tabActive : {})
+                                    }}
+                                />
+                                <Tab
+                                    label="Discover Apps"
+                                    style={{
+                                        ...tabStyle,
+                                        marginRight: 0,
+                                        ...(currTab === 2 ? tabActive : {})
+                                    }}
+                                />
                             </Tabs>
                         </div>
 
@@ -4305,7 +4366,7 @@ const Workflows2 = (props) => {
 
                                         setSelectedCategory(remainingCategories);
                                         findWorkflow(chips);
-                                    
+
                                     }}
                                 //onAdd={(chip) => {
                                 //	console.log("ADd: ", chip);
@@ -4435,7 +4496,8 @@ const Workflows2 = (props) => {
 
                             <div style={{ width: "50%", minWidth: "50%", maxWidth: "50%", height: 47, display: "flex", gap: 5 }}>
                                 <div style={{
-                                    display: "flex", height: "100%",
+                                    display: "flex",
+                                    height: "100%",
                                     justifyContent: "space-around",
                                     flex: 0.7,
                                     paddingLeft: 1,
@@ -4444,17 +4506,17 @@ const Workflows2 = (props) => {
                                 }}>
                                     <Tooltip title="Explore Workflow Runs" placement="top">
                                         <IconButton
-                                            style={iconButtonStyle}
+                                            style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
                                             onClick={() => navigate("/workflows/debug")}
                                             disabled={currTab === 2}
                                         >
-                                            <QueryStatsIcon style={{ color: "#F1F1F1" }} />
+                                            <QueryStatsIcon style={{ color: currTab === 2 ? "rgba(241, 241, 241, 0.5)" : "#F1F1F1" }} />
                                         </IconButton>
                                     </Tooltip>
 
                                     <Tooltip title={view === "grid" ? "List view" : "Grid view"} placement="top">
                                         <IconButton
-                                            style={iconButtonStyle}
+                                            style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
                                             onClick={() => {
                                                 const newView = view === "grid" ? "list" : "grid";
                                                 localStorage.setItem("workflowView", newView);
@@ -4462,17 +4524,23 @@ const Workflows2 = (props) => {
                                             }}
                                             disabled={currTab === 2}
                                         >
-                                            {view === "grid" ? <ListIcon /> : <GridOnIcon />}
+                                            {view === "grid" ?
+                                                <ListIcon style={{ color: currTab === 2 ? "rgba(255, 255, 255, 0.5)" : "white" }} /> :
+                                                <GridOnIcon style={{ color: currTab === 2 ? "rgba(255, 255, 255, 0.5)" : "white" }} />
+                                            }
                                         </IconButton>
                                     </Tooltip>
 
                                     <Tooltip title="Import workflows" placement="top">
                                         <IconButton
-                                            style={iconButtonStyle}
+                                            style={currTab === 2 ? iconButtonDisabledStyle : iconButtonStyle}
                                             onClick={() => upload.click()}
                                             disabled={currTab === 2}
                                         >
-                                            {submitLoading ? <CircularProgress color="secondary" /> : <PublishIcon />}
+                                            {submitLoading ?
+                                                <CircularProgress color="secondary" /> :
+                                                <PublishIcon style={{ color: currTab === 2 ? "rgba(255, 255, 255, 0.5)" : "white" }} />
+                                            }
                                         </IconButton>
                                     </Tooltip>
 
@@ -4486,11 +4554,11 @@ const Workflows2 = (props) => {
 
                                     <Tooltip title={`Download ALL workflows (${workflows.length})`} placement="top">
                                         <IconButton
-                                            style={{ ...iconButtonStyle, cursor: "pointer" }}
+                                            style={(isCloud || currTab === 2) ? iconButtonDisabledStyle : { ...iconButtonStyle, cursor: "pointer" }}
                                             disabled={isCloud || currTab === 2}
                                             onClick={() => exportAllWorkflows(workflows)}
                                         >
-                                            <GetAppIcon />
+                                            <GetAppIcon style={{ color: (isCloud || currTab === 2) ? "rgba(255, 255, 255, 0.5)" : "white" }} />
                                         </IconButton>
                                     </Tooltip>
                                 </div>