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 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
frontend/src/components/AppAuthTab.jsx
+41
View File
@@ -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}
frontend/src/components/CacheView.jsx
+62 -2
View File
@@ -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",
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, }} />
<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");
frontend/src/components/ParsedAction.jsx
+28 -24
View File
@@ -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={() => { }}
frontend/src/components/Priorities.jsx
-1
View File
@@ -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)) {
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 (
<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
frontend/src/views/Usecases2.jsx
+8 -1
View File
@@ -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}>
frontend/src/views/Workflows2.jsx
+21 -13
View File
@@ -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);
}
});
}