From 063c82ee0d6444b8378519593107b2e2327830a1 Mon Sep 17 00:00:00 2001
From: Frikky <frikky@shuffler.io>
Date: Thu, 29 May 2025 23:26:24 +0200
Subject: [PATCH] Many fixes: Notifications not being rendered even if api
 fetches the notifications Add copy auth id button on auth tab of admin page
 Added workflow link redirection for datastore key . Open docs in new tab for
 integration partner when it is external link. Fix multiple light theme text
 issue and dialog box issues. change usecase title for light theme to:

---
 frontend/src/components/AdminNavBar.jsx      | 10 ++-
 frontend/src/components/AppAuthTab.jsx       | 41 +++++++++++++
 frontend/src/components/CacheView.jsx        | 64 +++++++++++++++++++-
 frontend/src/components/LeftSideBar.jsx      |  5 +-
 frontend/src/components/ParsedAction.jsx     | 52 ++++++++--------
 frontend/src/components/Priorities.jsx       |  1 -
 frontend/src/components/UserManagmentTab.jsx | 30 ++++++++-
 frontend/src/views/Usecases2.jsx             |  9 ++-
 frontend/src/views/Workflows2.jsx            | 34 +++++++----
 9 files changed, 201 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/AdminNavBar.jsx b/frontend/src/components/AdminNavBar.jsx
index a37b8c15..f52e0a79 100644
--- a/frontend/src/components/AdminNavBar.jsx
+++ b/frontend/src/components/AdminNavBar.jsx
@@ -208,9 +208,17 @@ const AdminNavBar = (props) => {
         const ComponentToRender = selectedItemData.component;
         const componentProps = selectedItemData.props;
 
-        return <ComponentToRender {...componentProps} />;
+    const updatedProps = {
+        ...componentProps,
+        notifications: notifications,
+        setNotifications: setNotifications, 
+        userdata: userdata, 
+        selectedOrganization: selectedOrganization
     };
 
+    return <ComponentToRender {...updatedProps} />;
+};
+
     const defaultImage = "/images/logos/orange_logo.svg"
     const imageData =
         selectedOrganization?.image === undefined || selectedOrganization?.image.length === 0
diff --git a/frontend/src/components/AppAuthTab.jsx b/frontend/src/components/AppAuthTab.jsx
index c5b5c57f..8908590f 100644
--- a/frontend/src/components/AppAuthTab.jsx
+++ b/frontend/src/components/AppAuthTab.jsx
@@ -1181,6 +1181,47 @@ const AppAuthTab = memo((props) => {
                                     </IconButton>
                                   </Tooltip>
                                 )}
+                                <Tooltip
+                                    title={"Copy Auth ID"}
+                                    style={{}}
+                                    aria-label={"copy"}
+                                  >
+                                    <IconButton
+                                      style = {{padding: "6px"}}
+                                      onClick={() => {
+                                          navigator.clipboard.writeText(data.id);
+                                          document.execCommand("copy");
+            
+                                          toast(data.id + " copied to clipboard");
+                                      }}
+                                    >
+                                      <svg
+                                        width="24"
+                                        height="24"
+                                        viewBox="0 0 24 24"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                        <rect
+                                          width="24"
+                                          height="24"
+                                          fillOpacity="1"
+                                        />
+                                        <path
+                                          d="M14 4H7.6C7.17565 4 6.76869 4.16857 6.46863 4.46863C6.16857 4.76869 6 5.17565 6 5.6V18.4C6 18.8243 6.16857 19.2313 6.46863 19.5314C6.76869 19.8314 7.17565 20 7.6 20H17.2C17.6243 20 18.0313 19.8314 18.3314 19.5314C18.6314 19.2313 18.8 18.8243 18.8 18.4V8.8L14 4Z"
+                                          stroke={themeMode === "dark" ? "#F1F1F1" : "#333"}
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                        />
+                                        <path
+                                          d="M14 4V8.8H18.8"
+                                          stroke={themeMode === "dark" ? "#F1F1F1" : "#333"}
+                                          strokeLinecap="round"
+                                          strokeLinejoin="round"
+                                        />
+                                        </svg>
+                                    </IconButton>
+                                  </Tooltip>
                                 <IconButton
                                   style={{ }}
                                   disabled={data.org_id !== selectedOrganization.id}
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 9cff6231..9c45df62 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -867,7 +867,7 @@ const CacheView = memo((props) => {
                 overflowX: "auto",
              }}>
                 <ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore? theme.palette.defaultBorder :null, display: "table-row"}}>
-                {["Key", "Value", "Actions", "Updated", "Distribution"].map((header, index) => (
+                {["Key", "Value", "workflow", "Actions", "Updated", "Distribution"].map((header, index) => (
                         <ListItemText
                             key={index}
                             primary={header}
@@ -891,7 +891,7 @@ const CacheView = memo((props) => {
                                 backgroundColor: theme.palette.platformColor,
                             }}
                         >
-                            {Array(5)
+                            {Array(6)
                                 .fill()
                                 .map((_, colIndex) => (
                                     <ListItemText
@@ -1001,6 +1001,66 @@ const CacheView = memo((props) => {
 										data.value
 									}
 								/>
+                                <ListItemText
+                                    primary={
+                                        data.workflow_id === "" || data.workflow_id === null || data.workflow_id === undefined ?
+                                            <IconButton
+                                                disabled={data.workflow_id?.length === 0}
+                                                style={{marginLeft: 10}}
+                                            >
+                                                <OpenInNewIcon
+                                                    style={{
+                                                        color:
+                                                            data.workflow_id?.length !== 0
+                                                                ? "#FF8444"
+                                                                : "grey",
+                                                    }}
+                                                />
+                                            </IconButton>
+                                            : (
+                                            <Tooltip
+                                                title={"Go to workflow"}
+                                                style={{}}
+                                                aria-label={"Download"}
+                                            >
+                                                <span>
+                                                    <a
+                                                        rel="noopener noreferrer"
+                                                        style={{
+                                                            textDecoration: "none",
+                                                            color: "#f85a3e",
+                                                        }}
+                                                        href={`/workflows/${data.workflow_id}`}
+                                                        target="_blank"
+                                                    >
+                                                        <IconButton
+                                                            disabled={data.workflow_id?.length ===0}
+                                                            style={{marginLeft: 10}}
+                                                        >
+                                                            <OpenInNewIcon
+                                                                style={{
+                                                                    width: 24, height: 24,
+                                                                    color:
+                                                                        data.workflow_id?.length !== 0
+                                                                            ? "#FF8444"
+                                                                            : "grey",
+                                                                }}
+                                                            />
+                                                        </IconButton>
+                                                    </a>
+                                                </span>
+                                            </Tooltip>
+                                        )
+                                    }
+                                    style={{
+                                        display: "table-cell",
+                                        overflow: "hidden",
+                                        verticalAlign: "middle",
+                                        padding: "8px 8px 8px 15px",
+                                        maxWidth: 200,
+                                        overflowX: "auto",
+                                    }}
+                                />
                                 <ListItemText
                                     style={{
                                         display: "table-cell",
diff --git a/frontend/src/components/LeftSideBar.jsx b/frontend/src/components/LeftSideBar.jsx
index 92f03b7e..7e0ef311 100644
--- a/frontend/src/components/LeftSideBar.jsx
+++ b/frontend/src/components/LeftSideBar.jsx
@@ -647,7 +647,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
         <Divider style={{ marginTop: 10, marginBottom: 10, }} />
 
-        <Link to="/docs" style={hrefStyle}>
+        <Link to={userdata && userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.branding?.documentation_link?.length > 0 ? userdata?.active_org?.branding?.documentation_link : "/docs" } target={userdata?.active_org?.branding?.documentation_link?.length > 0 && userdata?.org_status?.includes("integration_partner") ? "_blank" : "_self" } style={hrefStyle}>
           <MenuItem
             onClick={(event) => {
               handleClose();
@@ -1633,7 +1633,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
 
           <Button
             component={Link}
-            to="/docs"
+            to={userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.branding?.documentation_link?.length > 0 ? userdata?.active_org?.branding?.documentation_link : "/docs"}
+            target={userdata?.org_status?.includes("integration_partner") && userdata?.active_org?.branding?.documentation_link?.length > 0 ? "_blank" : "_self"}
             onClick={(event) => {
               setCurrentOpenTab("docs");
               localStorage.setItem("lastTabOpenByUser", "docs");
diff --git a/frontend/src/components/ParsedAction.jsx b/frontend/src/components/ParsedAction.jsx
index 1dad55c4..7a2cfa2d 100755
--- a/frontend/src/components/ParsedAction.jsx
+++ b/frontend/src/components/ParsedAction.jsx
@@ -1216,7 +1216,7 @@ const ParsedAction = (props) => {
 					selectedActionParameters[1].value = splitparsed[1]
 					selectedAction.parameters[1].value = splitparsed[1]
 
-					if (splitparsed.length > 2) {
+					if (splitparsed.length >= 2) {
 						toast.warn("Filter list only supports filtering on the first list. If you want multi-level filtering, please use the 'execute python' action with the 'filter a list' function in the code editor.", {
 							autoClose: 10000,
 						})
@@ -1494,7 +1494,7 @@ const ParsedAction = (props) => {
 
 		// Helpertext for openapi fields
 		//if (helperText === "" && name === "body" && selectedApp.generated && selectedApp.activated) {
-		//	helperText = <span style={{color: "white", marginBottom: 5, marginleft: 5}}>
+		//	helperText = <span style={{color: theme.palette.text.primary, marginBottom: 5, marginleft: 5}}>
 		//}
 
 		return helperText
@@ -1563,7 +1563,7 @@ const ParsedAction = (props) => {
 		}
 
 		return <Paper style={{ padding: 10, backgroundColor: theme.palette.surfaceColor, border: "1px solid red", }}>
-			<Typography variant="body" style={{ color: "white", }}>
+			<Typography variant="body" style={{ color: theme.palette.text.primary, }}>
 				<b>Tip:</b> {suggestionText}
 			</Typography>
 		</Paper>
@@ -2606,7 +2606,7 @@ const ParsedAction = (props) => {
             }}
             style={{
               backgroundColor: theme.palette.inputColor,
-              color: "white",
+              color: theme.palette.text.primary,
               height: "50px",
               borderRadius: theme.palette?.borderRadius,
             }}
@@ -2623,7 +2623,7 @@ const ParsedAction = (props) => {
                   key={data.Name}
                   style={{
                     backgroundColor: theme.palette.inputColor,
-                    color: "white",
+                    color: theme.palette.text.primary,
                   }}
                   value={data.Name}
                 >
@@ -2702,7 +2702,7 @@ const ParsedAction = (props) => {
 						}}
 						style={{
 							backgroundColor: theme.palette.inputColor,
-							color: "white",
+							color: theme.palette.text.primary,
 							height: "50px",
 							borderRadius: theme.palette?.borderRadius,
 						}}
@@ -2710,7 +2710,7 @@ const ParsedAction = (props) => {
 						<MenuItem
 							style={{
 								backgroundColor: theme.palette.inputColor,
-								color: "white",
+								color: theme.palette.text.primary,
 							}}
 							value="No selection"
 						>
@@ -2721,7 +2721,7 @@ const ParsedAction = (props) => {
 							<MenuItem
 								style={{
 									backgroundColor: theme.palette.inputColor,
-									color: "white",
+									color: theme.palette.text.primary,
 								}}
 								value={data.name}
 							>
@@ -2986,7 +2986,7 @@ const ParsedAction = (props) => {
 				<div
 					style={{
 						marginTop: "10px",
-						borderColor: "white",
+						borderColor: theme.palette.text.primary,
 						borderWidth: "2px",
 						marginBottom: hideExtraTypes ? 50 : 200,
 					}}
@@ -3182,7 +3182,7 @@ const ParsedAction = (props) => {
 											ListboxProps={{
 												style: {
 													backgroundColor: theme.palette.inputColor,
-													color: "white",
+													color: theme.palette.text.primary,
 												},
 											}}
 											getOptionLabel={(option) => {
@@ -4422,7 +4422,7 @@ const ParsedAction = (props) => {
 												}}
 												open={!!menuPosition}
 												style={{
-													color: "white",
+													color: theme.palette.text.primary,
 													marginTop: 2,
 													maxHeight: 650,
 												}}
@@ -4550,7 +4550,7 @@ const ParsedAction = (props) => {
 															}
 															parentMenuOpen={!!menuPosition}
 															style={{
-																color: "white",
+																color: theme.palette.text.primary,
 																minWidth: 250,
 																maxWidth: 250,
 																maxHeight: 50,
@@ -4566,7 +4566,7 @@ const ParsedAction = (props) => {
 																	key={innerdata.name}
 																	style={{
 																		marginLeft: 15,
-																		color: "white",
+																		color: theme.palette.text.primary,
 																		minWidth: 250,
 																		maxWidth: 250,
 																		padding: 0,
@@ -4607,7 +4607,7 @@ const ParsedAction = (props) => {
 																		<MenuItem
 																			key={pathdata.name}
 																			style={{
-																				color: "white",
+																				color: theme.palette.text.primary,
 																				minWidth: 250,
 																				maxWidth: 250,
 																				padding: boxPadding,
@@ -4664,7 +4664,7 @@ const ParsedAction = (props) => {
 															key={innerdata.name}
 															style={{
 																backgroundColor: theme.palette.inputColor,
-																color: "white",
+																color: theme.palette.text.primary,
 																minWidth: 250,
 																maxWidth: 250,
 																marginRight: 0,
@@ -4835,17 +4835,21 @@ const ParsedAction = (props) => {
 													<OpenInFullIcon
 														style={{ color: theme.palette.textPrimary, cursor: "pointer", margin: multiline ? 5 : 0, height: 20, width: 20, }}
 														onMouseOver={(event) => {
-															const clickedField = document.getElementById(clickedFieldId)
-															if (clickedField !== null) {
-																clickedField.focus()
+															if(selectedAction?.name !== "filter_list"){
+																const clickedField = document.getElementById(clickedFieldId)
+																if (clickedField !== null) {
+																	clickedField.focus()
+																}
 															}
 														}}
 														onClick={(event) => {
 															// Set focus to the Textfield we just clicked
 															// This is to ensure focus is set correctly at all times with blur
-															const clickedField = document.getElementById(clickedFieldId)
-															if (clickedField !== null) {
-																clickedField.focus()
+															if(selectedAction?.name !== "filter_list"){
+																const clickedField = document.getElementById(clickedFieldId)
+																if (clickedField !== null) {
+																	clickedField.focus()
+																}
 															}
 
 															event.preventDefault()
@@ -4887,7 +4891,7 @@ const ParsedAction = (props) => {
 												<FormControl fullWidth style={{ marginTop: 0 }}>
 													<InputLabel
 														id="action-autocompleter"
-														style={{ marginLeft: 10, color: "white" }}
+														style={{ marginLeft: 10, color: theme.palette.text.primary }}
 													>
 														Autocomplete
 													</InputLabel>
@@ -4915,7 +4919,7 @@ const ParsedAction = (props) => {
 														fullWidth
 														open={showAutocomplete}
 														style={{
-															color: "white",
+															color: theme.palette.text.primary,
 															height: 35,
 															marginTop: 2,
 															borderRadius: theme.palette?.borderRadius,
@@ -4954,7 +4958,7 @@ const ParsedAction = (props) => {
 																	key={data.name}
 																	style={{
 																		backgroundColor: theme.palette.inputColor,
-																		color: "white",
+																		color: theme.palette.text.primary,
 																	}}
 																	value={data}
 																	onMouseOver={() => { }}
diff --git a/frontend/src/components/Priorities.jsx b/frontend/src/components/Priorities.jsx
index 5755574f..cd9d5e0d 100644
--- a/frontend/src/components/Priorities.jsx
+++ b/frontend/src/components/Priorities.jsx
@@ -228,7 +228,6 @@ const Priorities = memo((props) => {
 
 								let newJSON = notificationAppList;
 
-								console.log("item: ", item)
 
 								// keeping state changes to a minimum
 								if ((newJSON[item.name] === undefined) && (item?.authentication_data !== null)) {
diff --git a/frontend/src/components/UserManagmentTab.jsx b/frontend/src/components/UserManagmentTab.jsx
index 7d320782..d70465f6 100644
--- a/frontend/src/components/UserManagmentTab.jsx
+++ b/frontend/src/components/UserManagmentTab.jsx
@@ -1459,10 +1459,38 @@ const UserManagmentTab = memo((props) => {
                             );
                         }
 
+                        const getRegionFlag = (region_url) => {
+                            let regiontag = "UK";
+                            let regionCode = "gb";
+                            const regionsplit = region_url?.split(".");
+                            if (regionsplit?.length > 2 && !regionsplit[0]?.includes("shuffler")) {
+                                const namesplit = regionsplit[0]?.split("/");
+                                regiontag = namesplit[namesplit?.length - 1];
+
+                                if (regiontag === "california") {
+                                    regiontag = "US";
+                                    regionCode = "us";
+                                } else if (regiontag === "frankfurt") {
+                                    regiontag = "EU-2";
+                                    regionCode = "eu";
+                                } else if (regiontag === "ca") {
+                                    regiontag = "CA";
+                                    regionCode = "ca";
+                                }else if (regiontag === "au") {
+                                    regiontag = "AUS";
+                                    regionCode = "au"
+                                }
+                            }
+                            
+                            return regionCode;
+                        };
+
+                        const userRegion = data?.user_geo_info?.country?.iso_code?.length > 0 ? data?.user_geo_info?.country?.iso_code :   data?.active_org?.region_url?.length > 0 ? getRegionFlag(data?.active_org?.region_url) : "eu";
+
                         return (
                             <ListItem key={index} style={{ backgroundColor: bgColor, display: 'table-row', borderBottomLeftRadius: users?.length - 1 === index ? 8 : 0, borderBottomRightRadius: users?.length - 1 === index ? 8 : 0 }}>
                                 <ListItemText
-                                    primary={(<img src={`https://flagcdn.com/48x36/${data?.user_geo_info?.country?.iso_code.toLowerCase()}.png`} alt={data?.user_geo_info?.country?.iso_code} style={{ marginRight: 30, width: 25, height: 23, }} />)}
+                                    primary={(<img src={`https://flagcdn.com/48x36/${userRegion.toLowerCase()}.png`} alt={data?.user_geo_info?.country?.iso_code} style={{ marginRight: 30, width: 25, height: 23, }} />)}
                                     style={{ display: 'table-cell', verticalAlign: 'middle', textAlign: 'center' }}
                                 />
                                 <ListItemText
diff --git a/frontend/src/views/Usecases2.jsx b/frontend/src/views/Usecases2.jsx
index 950da807..036c26a4 100644
--- a/frontend/src/views/Usecases2.jsx
+++ b/frontend/src/views/Usecases2.jsx
@@ -126,6 +126,13 @@ const UsecaseListComponent = (props) => {
 	const { themeMode, brandName } = useContext(Context)
 	const theme = getTheme(themeMode)
 
+	const usecaseLightThemeColor = {
+		"collect": "#FB47A0",
+		"enrich": "#F38B14",
+		"detect": "#0AAD65",
+		"respond": "#289BDB",
+		"verify": "#624CE9",
+	}
 	const [expandedIndex, setExpandedIndex] = useState(-1);
 	const [expandedItem, setExpandedItem] = useState(-1);
 	const [inputUsecase, setInputUsecase] = useState({});
@@ -743,7 +750,7 @@ const UsecaseListComponent = (props) => {
 			{keys.map((usecase, index) => {
 				return (
 					<div key={index} style={{marginTop: 75, }}>
-						<Typography variant="body1" style={{color: usecase.color, textAlign: "left", marginBottom: 10, }}>
+						<Typography variant="body1" style={{color: themeMode === "dark" ? usecase.color : usecaseLightThemeColor[usecase.name.slice(3, 100).toLowerCase()], textAlign: "left", marginBottom: 10, }}>
 							<b>{index+1}. {usecase.name.slice(3, 100)}</b>
 						</Typography>
       					<Grid container spacing={1}>
diff --git a/frontend/src/views/Workflows2.jsx b/frontend/src/views/Workflows2.jsx
index 9c7f5466..4832777a 100644
--- a/frontend/src/views/Workflows2.jsx
+++ b/frontend/src/views/Workflows2.jsx
@@ -1107,23 +1107,31 @@ const Workflows2 = (props) => {
                 setSelectedWorkflowId("");
             }}
             PaperProps={{
-                style: {
-                    backgroundColor: theme.palette.surfaceColor,
-                    color: "white",
-                    minWidth: 500,
-                    padding: 50,
-                },
-            }}
+                sx: {
+                    borderRadius: theme?.palette?.DialogStyle?.borderRadius,
+                    border: theme?.palette?.DialogStyle?.border,
+                    minWidth: '440px',
+                    fontFamily: theme?.typography?.fontFamily,
+                    backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+                    zIndex: 1000,
+                    '& .MuiDialogContent-root': {
+                    backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+                    },
+                    '& .MuiDialogTitle-root': {
+                    backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+                    },
+                }
+                }}
         >
             <DialogTitle>
-                <div style={{ textAlign: "center", color: "rgba(255,255,255,0.9)" }}>
+                <div style={{ textAlign: "center", color: theme.palette.DialogStyle?.color }}>
                     Are you sure you want to delete {selectedWorkflowId.length > 0 ? filteredWorkflows.find((w) => w.id === selectedWorkflowId)?.name : `${selectedWorkflowIndexes.length} workflow${selectedWorkflowIndexes.length === 1 ? '' : 's'}`}? <div />
 
                     Other workflows relying on {selectedWorkflowIndexes.length > 0 ? "them" : "it"} one will stop working
                 </div>
             </DialogTitle>
             <DialogContent
-                style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }}
+                style={{ color: theme.palette.DialogStyle.color, textAlign: "center" }}
             >
                 <Button
                     style={{}}
@@ -1216,7 +1224,7 @@ const Workflows2 = (props) => {
 							data.status
 						).then((response) => {
 							if (response !== undefined) {
-								toast(`Successfully imported ${data.name}`);
+								toast.success(`Successfully imported ${data.name}`);
 							}
 						});
 					}
@@ -2073,7 +2081,7 @@ const Workflows2 = (props) => {
 					}
                 } else {
                     if (bulk !== true) {
-                        toast(`Deleted workflow ${id}. Child Workflows in Suborgs were also removed.`)
+                        toast.success(`Deleted workflow ${id}. Child Workflows in Suborgs were also removed.`)
                     }
                 }
 
@@ -2087,7 +2095,7 @@ const Workflows2 = (props) => {
                 }
             })
             .catch((error) => {
-                toast(error.toString());
+                toast.error(error.toString());
             })
     }
 
@@ -3040,7 +3048,7 @@ const Workflows2 = (props) => {
                                     data.status,
                                 ).then((response) => {
                                     if (response !== undefined) {
-                                        toast("Successfully imported " + data.name);
+                                        toast.success("Imported " + data.name);
                                     }
                                 });
                             }