marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Many fixes: Notifications not being rendered even if api fetches the notifications

Browse Source 
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:
This commit is contained in:
Frikky
2025-05-29 23:26:24 +02:00
parent 1281f25405
commit 063c82ee0d
9 changed files with 201 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AdminNavBar.jsx
+9 -1
View File
@@ -208,9 +208,17 @@ const AdminNavBar = (props) => {
const ComponentToRender = selectedItemData.component; const ComponentToRender = selectedItemData.component;
const componentProps = selectedItemData.props; 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 defaultImage = "/images/logos/orange_logo.svg"
const imageData = const imageData =
selectedOrganization?.image === undefined || selectedOrganization?.image.length === 0 selectedOrganization?.image === undefined || selectedOrganization?.image.length === 0
frontend/src/components/AppAuthTab.jsx
+41
View File
@@ -1181,6 +1181,47 @@ const AppAuthTab = memo((props) => {
</IconButton> </IconButton>
</Tooltip> </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 <IconButton
style={{ }} style={{ }}
disabled={data.org_id !== selectedOrganization.id} disabled={data.org_id !== selectedOrganization.id}
frontend/src/components/CacheView.jsx
+62 -2
View File
@@ -867,7 +867,7 @@ const CacheView = memo((props) => {
overflowX: "auto", overflowX: "auto",
}}> }}>
<ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore? theme.palette.defaultBorder :null, display: "table-row"}}> <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 <ListItemText
key={index} key={index}
primary={header} primary={header}
@@ -891,7 +891,7 @@ const CacheView = memo((props) => {
backgroundColor: theme.palette.platformColor, backgroundColor: theme.palette.platformColor,
}} }}
> >
{Array(5) {Array(6)
.fill() .fill()
.map((_, colIndex) => ( .map((_, colIndex) => (
<ListItemText <ListItemText
@@ -1001,6 +1001,66 @@ const CacheView = memo((props) => {
data.value 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 <ListItemText
style={{ style={{
display: "table-cell", display: "table-cell",
frontend/src/components/LeftSideBar.jsx
+3 -2
View File
@@ -647,7 +647,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
<Divider style={{ marginTop: 10, marginBottom: 10, }} /> <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 <MenuItem
onClick={(event) => { onClick={(event) => {
handleClose(); handleClose();
@@ -1633,7 +1633,8 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, }) => {
<Button <Button
component={Link} 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) => { onClick={(event) => {
setCurrentOpenTab("docs"); setCurrentOpenTab("docs");
localStorage.setItem("lastTabOpenByUser", "docs"); localStorage.setItem("lastTabOpenByUser", "docs");
frontend/src/components/ParsedAction.jsx
+28 -24
View File
@@ -1216,7 +1216,7 @@ const ParsedAction = (props) => {
selectedActionParameters[1].value = splitparsed[1] selectedActionParameters[1].value = splitparsed[1]
selectedAction.parameters[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.", { 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, autoClose: 10000,
}) })
@@ -1494,7 +1494,7 @@ const ParsedAction = (props) => {
// Helpertext for openapi fields // Helpertext for openapi fields
//if (helperText === "" && name === "body" && selectedApp.generated && selectedApp.activated) { //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 return helperText
@@ -1563,7 +1563,7 @@ const ParsedAction = (props) => {
} }
return <Paper style={{ padding: 10, backgroundColor: theme.palette.surfaceColor, border: "1px solid red", }}> 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} <b>Tip:</b> {suggestionText}
</Typography> </Typography>
</Paper> </Paper>
@@ -2606,7 +2606,7 @@ const ParsedAction = (props) => {
}} }}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
height: "50px", height: "50px",
borderRadius: theme.palette?.borderRadius, borderRadius: theme.palette?.borderRadius,
}} }}
@@ -2623,7 +2623,7 @@ const ParsedAction = (props) => {
key={data.Name} key={data.Name}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
}} }}
value={data.Name} value={data.Name}
> >
@@ -2702,7 +2702,7 @@ const ParsedAction = (props) => {
}} }}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
height: "50px", height: "50px",
borderRadius: theme.palette?.borderRadius, borderRadius: theme.palette?.borderRadius,
}} }}
@@ -2710,7 +2710,7 @@ const ParsedAction = (props) => {
<MenuItem <MenuItem
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
}} }}
value="No selection" value="No selection"
> >
@@ -2721,7 +2721,7 @@ const ParsedAction = (props) => {
<MenuItem <MenuItem
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
}} }}
value={data.name} value={data.name}
> >
@@ -2986,7 +2986,7 @@ const ParsedAction = (props) => {
<div <div
style={{ style={{
marginTop: "10px", marginTop: "10px",
borderColor: "white", borderColor: theme.palette.text.primary,
borderWidth: "2px", borderWidth: "2px",
marginBottom: hideExtraTypes ? 50 : 200, marginBottom: hideExtraTypes ? 50 : 200,
}} }}
@@ -3182,7 +3182,7 @@ const ParsedAction = (props) => {
ListboxProps={{ ListboxProps={{
style: { style: {
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
}, },
}} }}
getOptionLabel={(option) => { getOptionLabel={(option) => {
@@ -4422,7 +4422,7 @@ const ParsedAction = (props) => {
}} }}
open={!!menuPosition} open={!!menuPosition}
style={{ style={{
color: "white", color: theme.palette.text.primary,
marginTop: 2, marginTop: 2,
maxHeight: 650, maxHeight: 650,
}} }}
@@ -4550,7 +4550,7 @@ const ParsedAction = (props) => {
} }
parentMenuOpen={!!menuPosition} parentMenuOpen={!!menuPosition}
style={{ style={{
color: "white", color: theme.palette.text.primary,
minWidth: 250, minWidth: 250,
maxWidth: 250, maxWidth: 250,
maxHeight: 50, maxHeight: 50,
@@ -4566,7 +4566,7 @@ const ParsedAction = (props) => {
key={innerdata.name} key={innerdata.name}
style={{ style={{
marginLeft: 15, marginLeft: 15,
color: "white", color: theme.palette.text.primary,
minWidth: 250, minWidth: 250,
maxWidth: 250, maxWidth: 250,
padding: 0, padding: 0,
@@ -4607,7 +4607,7 @@ const ParsedAction = (props) => {
<MenuItem <MenuItem
key={pathdata.name} key={pathdata.name}
style={{ style={{
color: "white", color: theme.palette.text.primary,
minWidth: 250, minWidth: 250,
maxWidth: 250, maxWidth: 250,
padding: boxPadding, padding: boxPadding,
@@ -4664,7 +4664,7 @@ const ParsedAction = (props) => {
key={innerdata.name} key={innerdata.name}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
minWidth: 250, minWidth: 250,
maxWidth: 250, maxWidth: 250,
marginRight: 0, marginRight: 0,
@@ -4835,17 +4835,21 @@ const ParsedAction = (props) => {
<OpenInFullIcon <OpenInFullIcon
style={{ color: theme.palette.textPrimary, cursor: "pointer", margin: multiline ? 5 : 0, height: 20, width: 20, }} style={{ color: theme.palette.textPrimary, cursor: "pointer", margin: multiline ? 5 : 0, height: 20, width: 20, }}
onMouseOver={(event) => { onMouseOver={(event) => {
const clickedField = document.getElementById(clickedFieldId) if(selectedAction?.name !== "filter_list"){
if (clickedField !== null) { const clickedField = document.getElementById(clickedFieldId)
clickedField.focus() if (clickedField !== null) {
clickedField.focus()
}
} }
}} }}
onClick={(event) => { onClick={(event) => {
// Set focus to the Textfield we just clicked // Set focus to the Textfield we just clicked
// This is to ensure focus is set correctly at all times with blur // This is to ensure focus is set correctly at all times with blur
const clickedField = document.getElementById(clickedFieldId) if(selectedAction?.name !== "filter_list"){
if (clickedField !== null) { const clickedField = document.getElementById(clickedFieldId)
clickedField.focus() if (clickedField !== null) {
clickedField.focus()
}
} }
event.preventDefault() event.preventDefault()
@@ -4887,7 +4891,7 @@ const ParsedAction = (props) => {
<FormControl fullWidth style={{ marginTop: 0 }}> <FormControl fullWidth style={{ marginTop: 0 }}>
<InputLabel <InputLabel
id="action-autocompleter" id="action-autocompleter"
style={{ marginLeft: 10, color: "white" }} style={{ marginLeft: 10, color: theme.palette.text.primary }}
> >
Autocomplete Autocomplete
</InputLabel> </InputLabel>
@@ -4915,7 +4919,7 @@ const ParsedAction = (props) => {
fullWidth fullWidth
open={showAutocomplete} open={showAutocomplete}
style={{ style={{
color: "white", color: theme.palette.text.primary,
height: 35, height: 35,
marginTop: 2, marginTop: 2,
borderRadius: theme.palette?.borderRadius, borderRadius: theme.palette?.borderRadius,
@@ -4954,7 +4958,7 @@ const ParsedAction = (props) => {
key={data.name} key={data.name}
style={{ style={{
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
color: "white", color: theme.palette.text.primary,
}} }}
value={data} value={data}
onMouseOver={() => { }} onMouseOver={() => { }}
frontend/src/components/Priorities.jsx
-1
View File
@@ -228,7 +228,6 @@ const Priorities = memo((props) => {
let newJSON = notificationAppList; let newJSON = notificationAppList;
console.log("item: ", item)
// keeping state changes to a minimum // keeping state changes to a minimum
if ((newJSON[item.name] === undefined) && (item?.authentication_data !== null)) { if ((newJSON[item.name] === undefined) && (item?.authentication_data !== null)) {
frontend/src/components/UserManagmentTab.jsx
+29 -1
View File
@@ -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 ( return (
<ListItem key={index} style={{ backgroundColor: bgColor, display: 'table-row', borderBottomLeftRadius: users?.length - 1 === index ? 8 : 0, borderBottomRightRadius: users?.length - 1 === index ? 8 : 0 }}> <ListItem key={index} style={{ backgroundColor: bgColor, display: 'table-row', borderBottomLeftRadius: users?.length - 1 === index ? 8 : 0, borderBottomRightRadius: users?.length - 1 === index ? 8 : 0 }}>
<ListItemText <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' }} style={{ display: 'table-cell', verticalAlign: 'middle', textAlign: 'center' }}
/> />
<ListItemText <ListItemText
frontend/src/views/Usecases2.jsx
+8 -1
View File
@@ -126,6 +126,13 @@ const UsecaseListComponent = (props) => {
const { themeMode, brandName } = useContext(Context) const { themeMode, brandName } = useContext(Context)
const theme = getTheme(themeMode) const theme = getTheme(themeMode)
const usecaseLightThemeColor = {
"collect": "#FB47A0",
"enrich": "#F38B14",
"detect": "#0AAD65",
"respond": "#289BDB",
"verify": "#624CE9",
}
const [expandedIndex, setExpandedIndex] = useState(-1); const [expandedIndex, setExpandedIndex] = useState(-1);
const [expandedItem, setExpandedItem] = useState(-1); const [expandedItem, setExpandedItem] = useState(-1);
const [inputUsecase, setInputUsecase] = useState({}); const [inputUsecase, setInputUsecase] = useState({});
@@ -743,7 +750,7 @@ const UsecaseListComponent = (props) => {
{keys.map((usecase, index) => { {keys.map((usecase, index) => {
return ( return (
<div key={index} style={{marginTop: 75, }}> <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> <b>{index+1}. {usecase.name.slice(3, 100)}</b>
</Typography> </Typography>
<Grid container spacing={1}> <Grid container spacing={1}>
frontend/src/views/Workflows2.jsx
+21 -13
View File
@@ -1107,23 +1107,31 @@ const Workflows2 = (props) => {
setSelectedWorkflowId(""); setSelectedWorkflowId("");
}} }}
PaperProps={{ PaperProps={{
style: { sx: {
backgroundColor: theme.palette.surfaceColor, borderRadius: theme?.palette?.DialogStyle?.borderRadius,
color: "white", border: theme?.palette?.DialogStyle?.border,
minWidth: 500, minWidth: '440px',
padding: 50, 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> <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 /> 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 Other workflows relying on {selectedWorkflowIndexes.length > 0 ? "them" : "it"} one will stop working
</div> </div>
</DialogTitle> </DialogTitle>
<DialogContent <DialogContent
style={{ color: "rgba(255,255,255,0.65)", textAlign: "center" }} style={{ color: theme.palette.DialogStyle.color, textAlign: "center" }}
> >
<Button <Button
style={{}} style={{}}
@@ -1216,7 +1224,7 @@ const Workflows2 = (props) => {
data.status data.status
).then((response) => { ).then((response) => {
if (response !== undefined) { if (response !== undefined) {
toast(`Successfully imported ${data.name}`); toast.success(`Successfully imported ${data.name}`);
} }
}); });
} }
@@ -2073,7 +2081,7 @@ const Workflows2 = (props) => {
} }
} else { } else {
if (bulk !== true) { 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) => { .catch((error) => {
toast(error.toString()); toast.error(error.toString());
}) })
} }
@@ -3040,7 +3048,7 @@ const Workflows2 = (props) => {
data.status, data.status,
).then((response) => { ).then((response) => {
if (response !== undefined) { if (response !== undefined) {
toast("Successfully imported " + data.name); toast.success("Imported " + data.name);
} }
}); });
} }