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

Merge branch 'nightly' of https://github.com/shuffle/shuffle into nightly

Browse Source
This commit is contained in:
Frikky
2026-02-10 14:28:16 +01:00
parent 7a3b5c08b0 316f23ec70
commit 6043200c74
24 changed files with 289 additions and 281 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/dockerbuild.yaml
+4 -4
View File
@@ -20,19 +20,19 @@ jobs:
include: include:
- app: frontend - app: frontend
path: frontend path: frontend
version: 2.1.2 version: 2.1.3
experimental: true experimental: true
- app: backend - app: backend
path: backend path: backend
version: 2.1.2 version: 2.1.3
experimental: true experimental: true
- app: orborus - app: orborus
path: functions/onprem/orborus path: functions/onprem/orborus
version: 2.1.2 version: 2.1.3
experimental: true experimental: true
- app: worker - app: worker
path: functions/onprem/worker path: functions/onprem/worker
version: 2.1.2 version: 2.1.3
experimental: true experimental: true
steps: steps:
- name: Checkout - name: Checkout
frontend/src/components/AppFramework.jsx
+1 -1
View File
@@ -1129,7 +1129,7 @@ const AppFramework = (props) => {
}, [newSelectedApp]) }, [newSelectedApp])
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const imgSize = 50; const imgSize = 50;
var parsedFrameworkData = frameworkData === undefined ? {} : frameworkData var parsedFrameworkData = frameworkData === undefined ? {} : frameworkData
frontend/src/components/AppSelection.jsx
+2 -1
View File
@@ -64,7 +64,8 @@ const AppSelection = props => {
document.title = "Choose your apps" document.title = "Choose your apps"
const ref = useRef() const ref = useRef()
let navigate = useNavigate(); let navigate = useNavigate();
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true");
const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
useEffect(() => { useEffect(() => {
if (newSelectedApp === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) { if (newSelectedApp === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID === undefined || newSelectedApp.objectID.length === 0) {
frontend/src/components/CacheView.jsx
-2
View File
@@ -55,7 +55,6 @@ import {
OpenInNew as OpenInNewIcon, OpenInNew as OpenInNewIcon,
CloudDownload as CloudDownloadIcon, CloudDownload as CloudDownloadIcon,
Description as DescriptionIcon, Description as DescriptionIcon,
Polymer as PolymerIcon,
CheckCircle as CheckCircleIcon, CheckCircle as CheckCircleIcon,
Close as CloseIcon, Close as CloseIcon,
Apps as AppsIcon, Apps as AppsIcon,
@@ -63,7 +62,6 @@ import {
Cached as CachedIcon, Cached as CachedIcon,
AccessibilityNew as AccessibilityNewIcon, AccessibilityNew as AccessibilityNewIcon,
Lock as LockIcon, Lock as LockIcon,
Eco as EcoIcon,
Schedule as ScheduleIcon, Schedule as ScheduleIcon,
Cloud as CloudIcon, Cloud as CloudIcon,
Business as BusinessIcon, Business as BusinessIcon,
frontend/src/components/ChatBot.jsx
+104 -149
View File
@@ -43,6 +43,8 @@ const ChatBot = (props) => {
const [appname, setAppname] = useState(""); const [appname, setAppname] = useState("");
const [threadId, setThreadId] = useState(""); const [threadId, setThreadId] = useState("");
const [runId, setRunId] = useState(""); const [runId, setRunId] = useState("");
const [responseId, setResponseId] = useState("");
const [conversationId, setConversationId] = useState("");
// New state for thread management // New state for thread management
const [isLoadingThread, setIsLoadingThread] = useState(false); const [isLoadingThread, setIsLoadingThread] = useState(false);
@@ -54,7 +56,7 @@ const ChatBot = (props) => {
const [showAppSearch, setShowAppSearch] = useState(false); const [showAppSearch, setShowAppSearch] = useState(false);
// Get thread ID from URL params // Get thread ID from URL params
const { threadId: urlThreadId } = useParams(); const { conversationId: urlConversationId } = useParams();
let navigate = useNavigate(); let navigate = useNavigate();
const waitingMsg = "Processing..." const waitingMsg = "Processing..."
@@ -93,24 +95,24 @@ const ChatBot = (props) => {
} }
}, [appname]) }, [appname])
// Load existing thread if threadId is in URL // Load existing conversation if conversationId is in URL
useEffect(() => { useEffect(() => {
if (urlThreadId && urlThreadId !== threadId) { if (urlConversationId && urlConversationId !== conversationId) {
loadExistingThread(urlThreadId); loadExistingThread(urlConversationId);
} }
}, [urlThreadId]); }, [urlConversationId]);
const loadExistingThread = (threadIdToLoad) => { const loadExistingThread = (conversationIdToLoad) => {
setIsLoadingThread(true); setIsLoadingThread(true);
setThreadError(""); setThreadError("");
fetch(`${globalUrl}/api/v1/conversation/thread`, { fetch(`${globalUrl}/api/v1/conversation/history`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
}, },
credentials: "include", credentials: "include",
body: JSON.stringify({ thread_id: threadIdToLoad }), body: JSON.stringify({ conversation_id: conversationIdToLoad }),
}) })
.then((response) => { .then((response) => {
if (response.status === 403) { if (response.status === 403) {
@@ -138,22 +140,22 @@ const ChatBot = (props) => {
return; return;
} }
// Set thread data - this is crucial for continuing the conversation // Set conversation data - this is crucial for continuing the conversation
setThreadId(data.thread_id); setConversationId(data.conversation_id);
console.log("Loaded existing thread:", data.thread_id);
// Transform API message format to UI format // Transform API message format to UI format
const transformedMessages = (data.messages || []).map((msg, index) => ({ const transformedMessages = (data.messages || []).map((msg, index) => ({
id: `${data.thread_id}_${index}`, id: `${data.conversation_id}_${index}`,
status: msg.role === "user" ? "sent" : "received", status: msg.role === "user" ? "sent" : "received",
message: msg.content, message: msg.content,
timestamp: msg.timestamp timestamp: msg.timestamp
})); }));
setMessages(transformedMessages); setMessages(transformedMessages);
setThreadOrgId(data.thread_org_id); setThreadOrgId(data.org_id);
setIsActiveOrg(data.is_active_org); setIsActiveOrg(data.is_active_org);
// Disable chat if not in active org
if (!data.is_active_org) { if (!data.is_active_org) {
setChatDisabled(true); setChatDisabled(true);
} else { } else {
@@ -260,12 +262,9 @@ const ChatBot = (props) => {
const sentId = uuidv4(); const sentId = uuidv4();
var parsedData = { var parsedData = {
"query": inputmsg, "query": inputmsg,
"thread_id": threadId, "conversation_id": conversationId,
"run_id": runId,
} }
console.log("Sending message with thread_id:", threadId);
if (appname !== undefined && appname !== null && appname !== "") { if (appname !== undefined && appname !== null && appname !== "") {
parsedData["app_name"] = appname parsedData["app_name"] = appname
} }
@@ -315,169 +314,125 @@ const ChatBot = (props) => {
setMessages(newmessages); setMessages(newmessages);
//fetch(`http://localhost:8080/api/v1/conversation`, { // Use streaming endpoint
fetch(`${globalUrl}/api/v1/conversation`, { fetch(`${globalUrl}/api/v1/conversation/stream`, {
method: "POST", method: "POST",
headers: { headers: {
"Content-Type": "application/json", "Content-Type": "application/json",
"Accept": "text/event-stream",
}, },
credentials: "include", credentials: "include",
body: JSON.stringify(parsedData), body: JSON.stringify(parsedData),
}) })
.then((res) => res.text()) .then(async (response) => {
.then((resText) => { if (!response.ok) {
setLoading(false) const errorText = await response.text();
var data = {} throw new Error(`Server returned status ${response.status}: ${errorText}`);
// JSON parse
try {
data = JSON.parse(resText);
} catch (e) {
console.log("Error parsing response as JSON: ", e);
newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
newmessages.push({
"status": "received",
"message": resText,
"id": uuidv4(),
});
setMessages(newmessages);
return;
} }
const reader = response.body.getReader();
const decoder = new TextDecoder();
let buffer = "";
let streamedText = "";
let newConversationId = "";
if (data.run_id !== undefined && data.run_id !== null && data.run_id !== "") { // Keep waiting message until first chunk arrives
setRunId(data.run_id) const streamMessageId = uuidv4();
} let firstChunkReceived = false;
if (data.thread_id !== undefined && data.thread_id !== null && data.thread_id !== "") { while (true) {
setThreadId(data.thread_id) const { done, value } = await reader.read();
// Update URL if this is a new thread (not already in URL) if (done) {
if (!urlThreadId && data.thread_id !== threadId) { setLoading(false);
console.log("Navigating to new thread URL:", data.thread_id); break;
navigate(`/chat/${data.thread_id}`, { replace: true });
} }
}
if (data.success === undefined) { buffer += decoder.decode(value, { stream: true });
newmessages = newmessages.filter((msg) => msg.message !== waitingMsg); const lines = buffer.split('\n');
newmessages.push({ buffer = lines.pop() || ""; // Keep incomplete line in buffer
"status": "received",
"message": resText,
"id": uuidv4(),
});
setMessages(newmessages); for (const line of lines) {
if (line.startsWith('data: ')) {
const jsonStr = line.replace('data: ', '');
try {
const data = JSON.parse(jsonStr);
const eventType = data.type;
return; if (eventType === "chunk") {
} // On first chunk, remove waiting message and add streaming message
if (!firstChunkReceived) {
newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
newmessages.push({
"id": streamMessageId,
"status": "received",
"message": "",
});
firstChunkReceived = true;
}
// authentication for app // Append chunk to streamed text
// app validation (choose one) streamedText += data.chunk || "";
const defaultMessage = `Default output. The feature you're interacting with may not have been implemented yet. Contact ${supportEmail} with a screenshot of this and your input please.`
// Update the message with accumulated text
var outputmessage = defaultMessage; newmessages = newmessages.map(msg =>
var status = "received"; msg.id === streamMessageId
var action = "" ? { ...msg, message: streamedText }
if (data.success === false) { : msg
if (data.reason !== undefined) { );
outputmessage = data.reason setMessages([...newmessages]);
}
status = "error" } else if (eventType === "done") {
} else { // Capture conversation ID for next turn
if (data.reason !== undefined) { newConversationId = data.data;
outputmessage = data.reason if (newConversationId) {
} setConversationId(newConversationId);
}
// Update URL if this is a new conversation
if (!urlConversationId && newConversationId !== conversationId) {
navigate(`/chat/${newConversationId}`, { replace: true });
}
}
if (data.action !== undefined) { } else if (eventType === "error") {
//console.log("Action is defined: ", data.action); // Handle error event
action = data.action const errorMsg = data.data || "An error occurred";
console.error("[Stream Error]:", errorMsg);
if (data.action === "app_authentication") {
// If success & app auth -> say auth success and show available labels newmessages = newmessages.map(msg =>
// If !success & app auth -> do authentication msg.id === streamMessageId
if (data.success === true) { ? { ...msg, status: "error", message: errorMsg }
newmessages = newmessages.filter((msg) => msg.message !== waitingMsg); : msg
// No action for this. );
// "action": action, setMessages([...newmessages]);
var appname = "" setLoading(false);
if (data.apps !== undefined && data.apps !== null && data.apps.length > 0) { return;
appname = data.apps[0].name.replaceAll("_", " ")
}
var outputmessage = `**Please specify which ${appname} action you want to use**: \n`
if (data.available_labels !== undefined && data.available_labels !== null && data.available_labels.length > 0) {
for (var i = 0; i < data.available_labels.length; i++) {
outputmessage += "* " + data.available_labels[i] + "\n"
} }
outputmessage += "* Reauthenticate ([see auth](/admin?tab=app_auth))"
}
//Some opavailable actions: " + data.apps.map((app) => app.name).join(", ")
const parsedmessage = {
"status": status,
"message": outputmessage,
"id": uuidv4(),
"category": data.category,
"thread_id": data.thread_id, } catch (e) {
"run_id": data.run_id, console.error("[ERROR] Failed to parse SSE data:", e, jsonStr);
}
newmessages.push(parsedmessage);
setMessages(newmessages);
return
} else {
if (data.apps !== undefined) {
setInputAuth(data.apps)
setMessage(inputmsg);
setForceReauthentication(true)
} }
} }
} else if (data.action === "select_category" || data.action === "select_app") {
console.log("[DEBUG] APP SELECTION! Should help them choose an app to use")
// Show a search field
setShowAppSearch(true)
} }
} }
newmessages = newmessages.filter((msg) => msg.message !== waitingMsg); setLoading(false);
const parsedmessage = {
"status": status,
"message": outputmessage,
"id": uuidv4(),
"action": action,
"category": data.category,
"thread_id": data.thread_id,
"run_id": data.run_id,
}
newmessages.push(parsedmessage);
setMessages(newmessages);
console.log("New message: ", parsedmessage)
}) })
.catch((err) => { .catch((err) => {
setLoading(false) setLoading(false)
console.log("Problem: ", err); console.log("Problem: ", err);
setMessage(message); setMessage(inputmsg);
newmessages = newmessages.filter((msg) => msg.message !== waitingMsg); newmessages = newmessages.filter((msg) => msg.message !== waitingMsg);
// Find the message with the sentId and change the status to error // Add error message
newmessages.push({ newmessages.push({
"status": "error", "status": "error",
"message": message, "message": inputmsg,
"error_message": "Failed to send: "+err, "error_message": "Failed to send: "+err.message,
"id": sentId, "id": sentId,
}); });
setMessages(newmessages); setMessages([...newmessages]);
}); });
}; };
@@ -654,21 +609,21 @@ const ChatBot = (props) => {
<Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius,}}> <Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius,}}>
<CardContent> <CardContent>
<Typography variant="h6"> <Typography variant="h6">
How many incidents did we get last week? What is the difference between a trigger and an action?
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
<Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, marginTop: 10, }}> <Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, marginTop: 10, }}>
<CardContent> <CardContent>
<Typography variant="h6"> <Typography variant="h6">
Answer the last email from Jim about the new project, and say we're on it How do I create a new workflow?
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
<Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, marginTop: 10, }}> <Card style={{backgroundColor: theme.palette.surfaceColor, borderRadius: theme.palette?.borderRadius, marginTop: 10, }}>
<CardContent> <CardContent>
<Typography variant="h6"> <Typography variant="h6">
Is the IP 1.2.3.4 blocked? If not, block it. Is there a way to mass abort executions of a specific workflow?
</Typography> </Typography>
</CardContent> </CardContent>
</Card> </Card>
@@ -1006,9 +961,9 @@ const ChatBot = (props) => {
padding: "0 20px" padding: "0 20px"
}}> }}>
{[ {[
"How many incidents did we get last week?", "What is the difference between a trigger and an action?",
"Answer the last email from Jim about the new project", "How do I create a new workflow?",
"Is the IP 1.2.3.4 blocked? If not, block it." "Is there a way to mass abort executions of a specific workflow?"
].map((sample, index) => ( ].map((sample, index) => (
<Card key={index} style={{ <Card key={index} style={{
backgroundColor: theme.palette.surfaceColor, backgroundColor: theme.palette.surfaceColor,
frontend/src/components/EditOrgTab.jsx
+1 -1
View File
@@ -30,7 +30,7 @@ const EditOrgTab = (props) => {
const [organizationFeatures, setOrganizationFeatures] = React.useState({}); const [organizationFeatures, setOrganizationFeatures] = React.useState({});
const [users, setUsers] = React.useState([]); const [users, setUsers] = React.useState([]);
const [orgRequest, setOrgRequest] = React.useState(true); const [orgRequest, setOrgRequest] = React.useState(true);
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
useEffect(() => { useEffect(() => {
if(users.length === 0) { if(users.length === 0) {
getUsers(); getUsers();
frontend/src/components/EditWorkflow.jsx
+1 -1
View File
@@ -633,7 +633,7 @@ const EditWorkflow = (props) => {
<AutoAwesomeIcon style={{ marginRight: 8 }} /> <AutoAwesomeIcon style={{ marginRight: 8 }} />
)} )}
AI Generate AI Generate (beta)
</Button> </Button>
</span> </span>
</Tooltip> </Tooltip>
frontend/src/components/LeftSideBar.jsx
+1 -1
View File
@@ -120,7 +120,7 @@ const LeftSideBar = ({ userdata, serverside, globalUrl, notifications, SHUFFLE_V
setCurrentSelectedTheme(userdata?.theme); setCurrentSelectedTheme(userdata?.theme);
} }
}, [userdata]); }, [userdata]);
const CustomPopper = (props) => { const CustomPopper = (props) => {
frontend/src/components/ParsedAction.jsx
+14 -4
View File
@@ -1910,7 +1910,7 @@ const ParsedAction = (props) => {
<Tooltip <Tooltip
title={ title={
<Typography variant="body2" style={{margin: 3, }}> <Typography variant="body2" style={{margin: 3, }}>
Rerun this action with results from previous executions. Built for testing individual actions in the middle of workflows. Rerun this action with results from your previously selected workflow run. Allows testing individual action changes without rerunning the full workflow.
</Typography> </Typography>
} }
placement="top" placement="top"
@@ -1922,8 +1922,8 @@ const ParsedAction = (props) => {
marginTop: "auto", marginTop: "auto",
marginBottom: "auto", marginBottom: "auto",
height: 30, height: 30,
marginLeft: 98,
textTransform: "none", textTransform: "none",
marginLeft: 115,
}} }}
disabled={autoCompleting} disabled={autoCompleting}
onClick={() => { onClick={() => {
@@ -1934,7 +1934,7 @@ const ParsedAction = (props) => {
} }
}} }}
> >
<PlayArrowIcon style={{marginRight: 5, }}/> <CachedIcon style={{marginRight: 5, }}/>
Rerun Rerun
</Button> </Button>
</Tooltip> </Tooltip>
@@ -2813,6 +2813,8 @@ const ParsedAction = (props) => {
style: { style: {
backgroundColor: theme.palette.platformColor, backgroundColor: theme.palette.platformColor,
color: theme.palette.textColor, color: theme.palette.textColor,
border: "1px solid rgba(255,255,255,0.3)",
paddingRight: 20,
}, },
}} }}
filterOptions={(options, { inputValue }) => { filterOptions={(options, { inputValue }) => {
@@ -3091,6 +3093,14 @@ const ParsedAction = (props) => {
</div> </div>
{apps.map((app, appIndex) => { {apps.map((app, appIndex) => {
// Forces it into every category (for now)
// This is to make it possible to "use" shuffle for Singul natively
if (app.name === "Shuffle Tools") {
if (actionname == "Intel" || actionname == "Intel") {
app.categories = [actionname]
}
}
if (app.categories === undefined || app.categories === null || app.categories.length === 0) { if (app.categories === undefined || app.categories === null || app.categories.length === 0) {
return null return null
} }
@@ -3176,7 +3186,7 @@ const ParsedAction = (props) => {
marginRight: 5, marginRight: 5,
borderRadius: 5, borderRadius: 5,
cursor: "pointer", cursor: "pointer",
border: isAppSelected ? "3px solid #86c142" : "2px solid rgba(255,255,255,0.6)", border: isAppSelected ? "5px solid #86c142" : "2px solid rgba(255,255,255,0.6)",
}} /> }} />
</Tooltip> </Tooltip>
</div> </div>
frontend/src/components/ParsedActionNew.jsx
-1
View File
@@ -70,7 +70,6 @@ import {
Cached as CachedIcon, Cached as CachedIcon,
DirectionsRun as DirectionsRunIcon, DirectionsRun as DirectionsRunIcon,
Add as AddIcon, Add as AddIcon,
Polymer as PolymerIcon,
FormatListNumbered as FormatListNumberedIcon, FormatListNumbered as FormatListNumberedIcon,
Create as CreateIcon, Create as CreateIcon,
PlayArrow as PlayArrowIcon, PlayArrow as PlayArrowIcon,
frontend/src/components/Priority.jsx
+1 -1
View File
@@ -25,7 +25,7 @@ const Priority = (props) => {
const { globalUrl, clickedFromOrgTab,userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props; const { globalUrl, clickedFromOrgTab,userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, appFramework, } = props;
const { themeMode, supportEmail } = useContext(Context); const { themeMode, supportEmail } = useContext(Context);
const theme = getTheme(themeMode); const theme = getTheme(themeMode);
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
let navigate = useNavigate(); let navigate = useNavigate();
if (window.location.pathname === "/workflows") { if (window.location.pathname === "/workflows") {
frontend/src/components/RuntimeDebugger.jsx
+1 -1
View File
@@ -44,7 +44,7 @@ import {
Send as SendIcon, Send as SendIcon,
} from '@mui/icons-material'; } from '@mui/icons-material';
import { DataGrid, GridValueGetterParams } from '@mui/x-data-grid' import { DataGrid } from '@mui/x-data-grid'
import { import {
Search as SearchIcon, Search as SearchIcon,
} from "@mui/icons-material"; } from "@mui/icons-material";
frontend/src/components/SearchData.jsx
+1 -1
View File
@@ -77,7 +77,7 @@ const SearchData = props => {
// return null // return null
//} //}
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
// if (window.location.pathname === "/docs" || window.location.pathname === "/apps" || window.location.pathname === "/usecases" ) { // if (window.location.pathname === "/docs" || window.location.pathname === "/apps" || window.location.pathname === "/usecases" ) {
// setModalOpen(false) // setModalOpen(false)
// } // }
frontend/src/components/ShuffleCodeEditor1.jsx
+1 -1
View File
@@ -1597,7 +1597,7 @@ const CodeEditor = (props) => {
if (e.srcElement.className === "ace_content") { if (e.srcElement.className === "ace_content") {
console.log("DRAG STOP IN CONTENT!", e.srcElement.className) console.log("DRAG STOP IN CONTENT!", e.srcElement.className)
const usedposition = e.offsetY let usedposition = e.offsetY
if (usedposition === undefined || usedposition === null) { if (usedposition === undefined || usedposition === null) {
toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`) toast.info(`Error: LayerY is undefined or null. Please contact ${supportEmail}`)
return return
frontend/src/components/UsecaseSearch.jsx
+1 -1
View File
@@ -349,7 +349,7 @@ const UsecaseSearch = (props) => {
const [selectedAction, setSelectedAction] = React.useState({}); const [selectedAction, setSelectedAction] = React.useState({});
const [firstRequest, setFirstRequest] = React.useState(true); const [firstRequest, setFirstRequest] = React.useState(true);
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
//const alert = useAlert() //const alert = useAlert()
useEffect(() => { useEffect(() => {
frontend/src/components/WelcomeForm2.jsx
+1 -1
View File
@@ -161,7 +161,7 @@ const WelcomeForm = (props) => {
const [clickdiff, setclickdiff] = useState(0); const [clickdiff, setclickdiff] = useState(0);
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1) const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
//const alert = useAlert(); //const alert = useAlert();
let navigate = useNavigate(); let navigate = useNavigate();
frontend/src/components/WorkflowGrid.jsx
+1 -1
View File
@@ -29,7 +29,7 @@ const searchClient = algoliasearch("JNSS5CFDZZ", "c8f882473ff42d41158430be09ec2b
const AppGrid = props => { const AppGrid = props => {
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, onlyResults, inputsearch } = props const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, alternativeView, onlyResults, inputsearch } = props
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
//const [apps, setApps] = React.useState([]); //const [apps, setApps] = React.useState([]);
frontend/src/components/WorkflowTemplatePopup.jsx
+1 -1
View File
@@ -47,7 +47,7 @@ const WorkflowTemplatePopup = (props) => {
const [requestSent, setRequestSent] = React.useState(false) const [requestSent, setRequestSent] = React.useState(false)
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
let navigate = useNavigate(); let navigate = useNavigate();
useEffect(() => { useEffect(() => {
if (modalOpen !== true) { if (modalOpen !== true) {
frontend/src/theme.jsx
+93 -82
View File
@@ -153,10 +153,20 @@ const theme = createTheme(adaptV4Theme({
export default theme; export default theme;
export const getTheme = (themeMode, brandColor) => export const getTheme = (themeMode, brandColor) => {
createTheme({ // Handle "system" mode by checking user's system preference
let resolvedMode = themeMode;
if (themeMode === "system" || !themeMode) {
resolvedMode = window?.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light";
}
// Ensure mode is only "dark" or "light"
if (resolvedMode !== "dark" && resolvedMode !== "light") {
resolvedMode = "dark";
}
return createTheme({
palette: { palette: {
mode: themeMode, mode: resolvedMode,
main: brandColor || "#FF8544", main: brandColor || "#FF8544",
primary: { primary: {
main: brandColor || "#FF8544", main: brandColor || "#FF8544",
@@ -167,35 +177,35 @@ export const getTheme = (themeMode, brandColor) =>
contrastText:"#000000", contrastText:"#000000",
}, },
text: { text: {
primary: themeMode === "dark" ? "#ffffff" : "#1A1A1A", primary: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
secondary: themeMode === "dark" ? "#9E9E9E" : "#616161", secondary: resolvedMode === "dark" ? "#9E9E9E" : "#616161",
}, },
type: themeMode, type: resolvedMode,
inputColor: themeMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)", inputColor: resolvedMode === "dark" ? "rgba(39,41,45,1)" : "rgba(245, 245, 245, 1)",
textColor: themeMode === "dark" ? "#F1F1F1" : "#1A1A1A", textColor: resolvedMode === "dark" ? "#F1F1F1" : "#1A1A1A",
textPrimary: themeMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)", textPrimary: resolvedMode === "dark" ? "rgba(255, 255, 255, 0.8)" : "rgba(26, 26, 26, 0.8)",
surfaceColor: themeMode === "dark" ? "#27292d" : "#EFEFEF", surfaceColor: resolvedMode === "dark" ? "#27292d" : "#EFEFEF",
platformColor: themeMode === "dark" ? "#212121" : "#ffffff", platformColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
backgroundColor: themeMode === "dark" ? "#1a1a1a" : "#f1f1f1", backgroundColor: resolvedMode === "dark" ? "#1a1a1a" : "#f1f1f1",
cytoscapeBackgroundColor: themeMode === "dark" ? "#161616" : "#f5f5f5", cytoscapeBackgroundColor: resolvedMode === "dark" ? "#161616" : "#f5f5f5",
distributionColor: themeMode === "dark" ? "#40E0D0" : "#008080", distributionColor: resolvedMode === "dark" ? "#40E0D0" : "#008080",
cardBackgroundColor: themeMode === "dark" ? "#1e1e1e" : "#eaeaea", cardBackgroundColor: resolvedMode === "dark" ? "#1e1e1e" : "#eaeaea",
cardHoverColor: themeMode === "dark" ? "#323232" : "#F0F0F0", cardHoverColor: resolvedMode === "dark" ? "#323232" : "#F0F0F0",
hoverColor: themeMode === "dark" ? "#323232" : "#D6D6D6", hoverColor: resolvedMode === "dark" ? "#323232" : "#D6D6D6",
usecaseCardColor: themeMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)", usecaseCardColor: resolvedMode === "dark" ? "#2f2f2f" : "rgba(245, 245, 245, 1)",
usecaseCardHoverColor: themeMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)", usecaseCardHoverColor: resolvedMode === "dark" ? "#2F2F2F" : "rgba(245, 245, 245, 1)",
usecaseDialogFieldColor: themeMode === "dark" ? "#2B2B2B" : "#F5F5F5", usecaseDialogFieldColor: resolvedMode === "dark" ? "#2B2B2B" : "#F5F5F5",
accentColor: themeMode === "dark" ? "#ff8544" : "#ff8544", accentColor: resolvedMode === "dark" ? "#ff8544" : "#ff8544",
green: themeMode === "dark" ? "#5cc879" : "#008000", green: resolvedMode === "dark" ? "#5cc879" : "#008000",
defaultBorder: themeMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC', defaultBorder: resolvedMode === "dark" ? '1px solid #494949' : '1px solid #CCCCCC',
linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor, linkColor: brandColor === "#ff8544" ? "#f86a3e" : brandColor,
slateGrayColor: themeMode === "dark" ? "#494949" : "#CCCCCC", slateGrayColor: resolvedMode === "dark" ? "#494949" : "#CCCCCC",
parsedAppPaperColor: themeMode === "dark" ? "#2f2f2f" : "#CCCCCC", parsedAppPaperColor: resolvedMode === "dark" ? "#2f2f2f" : "#CCCCCC",
borderRadius: 10, borderRadius: 10,
loaderColor: themeMode === "dark" ? "#1a1a1a" : "#E0E0E0", loaderColor: resolvedMode === "dark" ? "#1a1a1a" : "#E0E0E0",
jsonIconStyle: "round", jsonIconStyle: "round",
jsonTheme: themeMode === "dark" ? "summerfruit" : { jsonTheme: resolvedMode === "dark" ? "summerfruit" : {
base00: "#ffffff", // background base00: "#ffffff", // background
base01: "#f0f0f0", // very light grey base01: "#f0f0f0", // very light grey
base02: "#f5f5f5", // light grey base02: "#f5f5f5", // light grey
@@ -215,11 +225,11 @@ export const getTheme = (themeMode, brandColor) =>
}, },
jsonCollapseStringsAfterLength: 100, jsonCollapseStringsAfterLength: 100,
drawer: { drawer: {
backgroundColor: themeMode === "dark" ? "#262626" : "#f9f9f9" backgroundColor: resolvedMode === "dark" ? "#262626" : "#f9f9f9"
}, },
actionSidebarField: { actionSidebarField: {
backgroundColor: themeMode === "dark" ? "#2F2F2F" : "#F1F1F1", backgroundColor: resolvedMode === "dark" ? "#2F2F2F" : "#F1F1F1",
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
borderRadius: 8, borderRadius: 8,
height: 40, height: 40,
border: "none", border: "none",
@@ -228,53 +238,53 @@ export const getTheme = (themeMode, brandColor) =>
padding: 5, padding: 5,
width: "98%", width: "98%",
borderRadius: 5, borderRadius: 5,
border: themeMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)", border: resolvedMode === "dark" ? "1px solid rgba(255,255,255,0.7)" : "1px solid rgba(0,0,0,0.3)",
backgroundColor: themeMode === "dark" backgroundColor: resolvedMode === "dark"
? "#1A1A1A" ? "#1A1A1A"
: "#f1f1f1", : "#f1f1f1",
color: themeMode === "dark" color: resolvedMode === "dark"
? "#F1F1F1" ? "#F1F1F1"
: "#1A1A1A", : "#1A1A1A",
overflowX: "auto", overflowX: "auto",
}, },
textFieldStyle: { textFieldStyle: {
backgroundColor: themeMode === "dark" ? "#212121" : "#FFFFFF", backgroundColor: resolvedMode === "dark" ? "#212121" : "#FFFFFF",
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
borderRadius: "5px", borderRadius: "5px",
height: 40, height: 40,
border: themeMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0", border: resolvedMode === "dark" ? "1px solid #4D4D4D" : "1px solid #E0E0E0",
}, },
DialogStyle: { DialogStyle: {
backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff", backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
borderRadius: 2, borderRadius: 2,
boxShadow: themeMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)", boxShadow: resolvedMode === "dark" ? "0px 0px 10px 0px rgba(0,0,0,0.75)" : "0px 0px 10px 0px rgba(0,0,0,0.2)",
border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
}, },
innerTextfieldStyle: { innerTextfieldStyle: {
height: 40, height: 40,
fontSize: 16, fontSize: 16,
backgroundColor: themeMode === "dark" ? "#212121" : "#f5f5f5", backgroundColor: resolvedMode === "dark" ? "#212121" : "#f5f5f5",
}, },
tooltip: { tooltip: {
backgroundColor: themeMode === "dark" ? "#212121" : "#ffffff", backgroundColor: resolvedMode === "dark" ? "#212121" : "#ffffff",
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
border: themeMode === "dark" ? "1px solid #494949" : "1px solid #cccccc", border: resolvedMode === "dark" ? "1px solid #494949" : "1px solid #cccccc",
}, },
chipStyle: { chipStyle: {
backgroundColor: themeMode === "dark" ? "#333333" : "#F5F5F5", backgroundColor: resolvedMode === "dark" ? "#333333" : "#F5F5F5",
borderColor: themeMode === "dark" ? "#444444" : "#E0E0E0", borderColor: resolvedMode === "dark" ? "#444444" : "#E0E0E0",
color: themeMode === "dark" ? "#FFFFFF" : "#333333", color: resolvedMode === "dark" ? "#FFFFFF" : "#333333",
}, },
defaultImage: "/images/no_image.png", defaultImage: "/images/no_image.png",
singulOrange: "/images/singul_orange.png", singulOrange: "/images/singul_orange.png",
singulGreen: "/images/singul_green.png", singulGreen: "/images/singul_green.png",
singulBlackWhite: "/icons/workflow-page/shuffle_agent.png", singulBlackWhite: "/icons/workflow-page/shuffle_agent.png",
scrollbarColor: themeMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1", scrollbarColor: resolvedMode === "dark" ? "#494949 #2f2f2f": "#c1c1c1 #f1f1f1",
scrollbarColorTransparent: themeMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent", scrollbarColorTransparent: resolvedMode === "dark" ? '#494949 transparent': "#c1c1c1 transparent",
}, },
typography: { typography: {
fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`, fontFamily: `"inter", "Roboto", "Helvetica", "Arial", sans-serif`,
color: themeMode === "dark" ? "#ffffff" : "#000000", color: resolvedMode === "dark" ? "#ffffff" : "#000000",
useNextVariants: true, useNextVariants: true,
fontWeightLight: 300, fontWeightLight: 300,
fontWeightRegular: 400, fontWeightRegular: 400,
@@ -282,36 +292,36 @@ export const getTheme = (themeMode, brandColor) =>
fontWeightSemiBold: 600, fontWeightSemiBold: 600,
fontWeightBold: 700, fontWeightBold: 700,
allVariants: { allVariants: {
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A", color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
}, },
h1: { h1: {
fontSize: 40, fontSize: 40,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h2: { h2: {
fontSize: 36, fontSize: 36,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h3: { h3: {
fontSize: 32, fontSize: 32,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h4: { h4: {
fontSize: 30, fontSize: 30,
fontWeight: 500, fontWeight: 500,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
h6: { h6: {
fontSize: 22, fontSize: 22,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
body1: { body1: {
fontSize: 16, fontSize: 16,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
body2: { body2: {
fontSize: 14, fontSize: 14,
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A" color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A"
}, },
}, },
components: { components: {
@@ -326,7 +336,7 @@ export const getTheme = (themeMode, brandColor) =>
{ {
props: { variant: 'text', color: 'primary' }, props: { variant: 'text', color: 'primary' },
style: { style: {
color: themeMode === "dark" ? "#ffffff" : "#1A1A1A", color: resolvedMode === "dark" ? "#ffffff" : "#1A1A1A",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
}, },
@@ -334,7 +344,7 @@ export const getTheme = (themeMode, brandColor) =>
{ {
props: { variant: 'text', color: 'secondary' }, props: { variant: 'text', color: 'secondary' },
style: { style: {
color: themeMode === "dark" ? "#9E9E9E" : "#616161", color: resolvedMode === "dark" ? "#9E9E9E" : "#616161",
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
}, },
@@ -342,24 +352,24 @@ export const getTheme = (themeMode, brandColor) =>
{ {
props: { variant: 'contained', color: 'primary' }, props: { variant: 'contained', color: 'primary' },
style: { style: {
backgroundColor: themeMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35', backgroundColor: resolvedMode === "dark" ? brandColor || '#ff8544' : brandColor || '#FF7C35',
color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF', color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF',
borderRadius: '4px', borderRadius: '4px',
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
transition: 'background-color 0.2s ease-in-out', transition: 'background-color 0.2s ease-in-out',
'&:hover': { '&:hover': {
fontWeight: 600, fontWeight: 600,
backgroundColor: themeMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F', backgroundColor: resolvedMode === 'dark' ? brandColor || "#ff955c" : brandColor || '#FF8D4F',
color: themeMode === "dark" ? '#1a1a1a': '#FFFFFF', color: resolvedMode === "dark" ? '#1a1a1a': '#FFFFFF',
}, },
}, },
}, },
{ {
props: { variant: 'contained', color: 'secondary' }, props: { variant: 'contained', color: 'secondary' },
style: { style: {
backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9', backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#ffffff' : '#4C4C4C', color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C',
borderRadius: '4px', borderRadius: '4px',
boxShadow: 'none', boxShadow: 'none',
whiteSpace: "nowrap", whiteSpace: "nowrap",
@@ -367,23 +377,23 @@ export const getTheme = (themeMode, brandColor) =>
textWrap: "normal", textWrap: "normal",
'&:hover': { '&:hover': {
fontWeight: 600, fontWeight: 600,
border: themeMode === "dark" ? '1px solid #f1f1f1' : 'none', border: resolvedMode === "dark" ? '1px solid #f1f1f1' : 'none',
backgroundColor: themeMode === "dark" ? '#494949' : '#C9C9C9', backgroundColor: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#ffffff' : '#4C4C4C', color: resolvedMode === "dark" ? '#ffffff' : '#4C4C4C',
}, },
}, },
}, },
{ {
props: { variant: 'outlined', color: 'primary' }, props: { variant: 'outlined', color: 'primary' },
style: { style: {
borderColor: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", borderColor: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
color: themeMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f", color: resolvedMode === "dark" ? brandColor || "#ff8544" : brandColor || "#cc5f1f",
whiteSpace: "nowrap", whiteSpace: "nowrap",
fontWeight: 'normal', fontWeight: 'normal',
textWrap: "normal", textWrap: "normal",
'&:hover': { '&:hover': {
backgroundColor: themeMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc", backgroundColor: resolvedMode === "dark" ? brandColor || "#ff8544" : "#ffe8dc",
color: themeMode === "dark" ? "#1a1a1a" : "#8a3d00", color: resolvedMode === "dark" ? "#1a1a1a" : "#8a3d00",
fontWeight: 600, fontWeight: 600,
}, },
}, },
@@ -392,14 +402,14 @@ export const getTheme = (themeMode, brandColor) =>
props: { variant: 'outlined', color: 'secondary' }, props: { variant: 'outlined', color: 'secondary' },
style: { style: {
border: '1px solid #C5C5C5', border: '1px solid #C5C5C5',
color: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D', color: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D',
whiteSpace: "nowrap", whiteSpace: "nowrap",
textWrap: "normal", textWrap: "normal",
'&:hover': { '&:hover': {
backgroundColor: themeMode === "dark" ? '#C5C5C5' : '#EFEFEF', backgroundColor: resolvedMode === "dark" ? '#C5C5C5' : '#EFEFEF',
borderColor: themeMode === "dark" ? '#C5C5C5' : '#2D2D2D', borderColor: resolvedMode === "dark" ? '#C5C5C5' : '#2D2D2D',
fontWeight: 600, fontWeight: 600,
color: themeMode === "dark" ? '#1a1a1a' : '#1A1A1A', color: resolvedMode === "dark" ? '#1a1a1a' : '#1A1A1A',
}, },
}, },
}, },
@@ -422,8 +432,8 @@ export const getTheme = (themeMode, brandColor) =>
background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)', background: 'linear-gradient(90deg, #e6743a 0%, #d4456e 50%, #8a4de8 100%)',
}, },
'&:disabled': { '&:disabled': {
background: themeMode === "dark" ? '#494949' : '#C9C9C9', background: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
color: themeMode === "dark" ? '#9E9E9E' : '#616161', color: resolvedMode === "dark" ? '#9E9E9E' : '#616161',
}, },
}, },
}, },
@@ -468,9 +478,9 @@ export const getTheme = (themeMode, brandColor) =>
}, },
'&:disabled': { '&:disabled': {
background: 'transparent', background: 'transparent',
color: themeMode === "dark" ? '#9E9E9E' : '#616161', color: resolvedMode === "dark" ? '#9E9E9E' : '#616161',
'&::before': { '&::before': {
background: themeMode === "dark" ? '#494949' : '#C9C9C9', background: resolvedMode === "dark" ? '#494949' : '#C9C9C9',
}, },
}, },
}, },
@@ -480,7 +490,7 @@ export const getTheme = (themeMode, brandColor) =>
MuiTab: { MuiTab: {
styleOverrides: { styleOverrides: {
root: { root: {
color: themeMode === "dark" ? "#C5C5C5" : "#1A1A1A", color: resolvedMode === "dark" ? "#C5C5C5" : "#1A1A1A",
}, },
}, },
}, },
@@ -489,7 +499,7 @@ export const getTheme = (themeMode, brandColor) =>
overrides: { overrides: {
MuiMenu: { MuiMenu: {
list: { list: {
backgroundColor: themeMode === "dark" ? "#27292d" : "#ffffff", backgroundColor: resolvedMode === "dark" ? "#27292d" : "#ffffff",
}, },
}, },
MuiCssBaseline: { MuiCssBaseline: {
@@ -535,4 +545,5 @@ export const getTheme = (themeMode, brandColor) =>
}, },
}, },
}); });
}
frontend/src/views/AppExplorer.jsx
-1
View File
@@ -65,7 +65,6 @@ import { Context } from "../context/ContextApi.jsx";
import { import {
SearchBox, SearchBox,
StaticRefinementList,
RefinementList, RefinementList,
InstantSearch, InstantSearch,
connectSearchBox, connectSearchBox,
frontend/src/views/Docs.jsx
+50 -17
View File
@@ -62,7 +62,6 @@ const dividerColor = "rgb(225, 228, 232)";
const hrefStyle = { const hrefStyle = {
color: "rgba(255, 255, 255, 0.8)", color: "rgba(255, 255, 255, 0.8)",
textDecoration: "none", textDecoration: "none",
marginRight: window.location.pathname.includes("/articles/") ? "0.8em" : undefined,
}; };
@@ -387,6 +386,7 @@ export const CodeHandler = (props) => {
minWidth: "50%", minWidth: "50%",
maxWidth: "100%", maxWidth: "100%",
backgroundColor: theme.palette.inputColor, backgroundColor: theme.palette.inputColor,
whiteSpace: "pre-wrap",
overflowY: "auto", overflowY: "auto",
// Have it inline // Have it inline
borderRadius: theme.palette?.borderRadius, borderRadius: theme.palette?.borderRadius,
@@ -1020,7 +1020,7 @@ const Docs = (defaultprops) => {
} }
const fetchDocList = (resetCache = false) => { const fetchDocList = (resetCache = false) => {
var url = `${globalUrl}/api/v1/docs` var url = `${globalUrl}/api/v1/docs?resetCache=${resetCache}`
if (location.pathname.includes("/legal")) { if (location.pathname.includes("/legal")) {
url = `${globalUrl}/api/v1/docs?folder=legal&resetCache=${resetCache}` url = `${globalUrl}/api/v1/docs?folder=legal&resetCache=${resetCache}`
} else if (location.pathname.includes("/articles")) { } else if (location.pathname.includes("/articles")) {
@@ -1047,16 +1047,16 @@ const Docs = (defaultprops) => {
.catch((error) => { }); .catch((error) => { });
}; };
const fetchDoc = (docId) => { const fetchDoc = (docId, resetCache = false) => {
if (docId === undefined) { if (docId === undefined) {
return return
} }
var url = `${globalUrl}/api/v1/docs/${docId}` var url = `${globalUrl}/api/v1/docs/${docId}?resetCache=${resetCache}`
if (location.pathname.includes("/legal")) { if (location.pathname.includes("/legal")) {
url = `${globalUrl}/api/v1/docs/${docId}?folder=legal` url = `${globalUrl}/api/v1/docs/${docId}?folder=legal&resetCache=${resetCache}`
} else if (location.pathname.includes("/articles")) { } else if (location.pathname.includes("/articles")) {
url = `${globalUrl}/api/v1/docs/${docId}?folder=articles` url = `${globalUrl}/api/v1/docs/${docId}?folder=articles&resetCache=${resetCache}`
} }
fetch(url, { fetch(url, {
@@ -1082,7 +1082,7 @@ const Docs = (defaultprops) => {
autoClose: 2000, autoClose: 2000,
}); });
setTimeout(() => { setTimeout(() => {
navigate(`/articles/2.0_release`) navigate(`/articles`)
}, 2000) }, 2000)
return return
} }
@@ -1130,7 +1130,8 @@ const Docs = (defaultprops) => {
const handleResetCache = () => { const handleResetCache = () => {
fetchDocList(true); fetchDocList(true);
toast("Cache has been reset"); fetchDoc(props.match.params.key, true);
toast("Cache and list will be reset in a few seconds");
} }
if (firstrequest) { if (firstrequest) {
@@ -1343,6 +1344,21 @@ const Docs = (defaultprops) => {
tr: TableRowRenderer, tr: TableRowRenderer,
th: TableHeaderCellRenderer, th: TableHeaderCellRenderer,
td: TableCellRenderer, td: TableCellRenderer,
ul: ({ children }) => (
<Box component="ul" sx={{ my: 0.5, fontFamily: '"Segoe UI", Inter, sans-serif', fontSize: "17.6px" }}>
{children}
</Box>
),
ol: ({ children }) => (
<Box component="ol" sx={{ my: 0.5, fontFamily: '"Segoe UI", Inter, sans-serif', fontSize: "17.6px" }}>
{children}
</Box>
),
li: ({ children }) => (
<Typography component="li" sx={{ my: 0.5, color: "inherit", fontFamily: '"Segoe UI", Inter, sans-serif', fontSize: "17.6px" }}>
{children}
</Typography>
),
} }
@@ -1354,7 +1370,6 @@ const Docs = (defaultprops) => {
const activeListItemStyle = { const activeListItemStyle = {
backgroundColor: "rgba(248, 106, 62, 0.08)", // Slight orange tint backgroundColor: "rgba(248, 106, 62, 0.08)", // Slight orange tint
marginRight: window.location.pathname.includes("/articles/") ? "0.8em" : undefined,
borderLeft: "3px solid #f86a3e", borderLeft: "3px solid #f86a3e",
paddingLeft: "13px", // Compensate for the border paddingLeft: "13px", // Compensate for the border
}; };
@@ -1414,6 +1429,7 @@ const Docs = (defaultprops) => {
<List style={{ <List style={{
listStyle: "none", listStyle: "none",
paddingLeft: "0", paddingLeft: "0",
paddingRight: isArticlePage ? 15 : undefined,
paddingTop: !isArticlePage ? "60px" : undefined, paddingTop: !isArticlePage ? "60px" : undefined,
paddingBottom: !isArticlePage ? "30px" : undefined, paddingBottom: !isArticlePage ? "30px" : undefined,
display: isArticlePage ? sidebarOpen ? "block" : "none" : undefined, display: isArticlePage ? sidebarOpen ? "block" : "none" : undefined,
@@ -1523,15 +1539,32 @@ const Docs = (defaultprops) => {
} }
</div> </div>
<div style={IndexBar}> <div style={IndexBar}>
{userdata?.support && isArticlePage && ( {userdata?.support && (
<Button <Tooltip
variant="contained" title="Wait about 5 minutes after updating the file on GitHub, then click to reset the cache. (Support only) "
color="secondary" placement="top"
onClick={handleResetCache} componentsProps={{
style={{marginBottom: "15px"}} tooltip: {
sx: {
backgroundColor: "rgba(33, 33, 33, 1)",
color: "rgba(241, 241, 241, 1)",
fontSize: 14,
border: "1px solid rgba(73, 73, 73, 1)",
fontFamily: theme?.typography?.fontFamily,
}
},
}}
arrow
> >
Reset Cache <Button
</Button> variant="contained"
color="secondary"
onClick={handleResetCache}
style={{marginBottom: "15px"}}
>
Reset Cache
</Button>
</Tooltip>
)} )}
{tocLines.length > 0 ? {tocLines.length > 0 ?
( (
frontend/src/views/NewDashboard.jsx
+8 -6
View File
@@ -109,8 +109,8 @@ const NewDashboard = (props) => {
const STATIC_TIME_PERCENT = 'TBD' const STATIC_TIME_PERCENT = 'TBD'
const STATIC_MONEY_PERCENT = 'TBD' const STATIC_MONEY_PERCENT = 'TBD'
const kpis = [ const kpis = [
{ value: timeFmt.display, title: timeFmt.title, label: 'Time saved', icon: <TrendingUpIcon sx={{ color: '#5cc879', fontSize: 34 }} />, percentage: STATIC_TIME_PERCENT, color: '#5cc879', disabled: true}, //{ value: timeFmt.display, title: timeFmt.title, label: 'Time saved', icon: <TrendingUpIcon sx={{ color: '#5cc879', fontSize: 34 }} />, percentage: STATIC_TIME_PERCENT, color: '#5cc879', disabled: true},
{ value: formatCurrencyCompact(totals.moneySavedDollars), label: 'Money saved', icon: <TrendingUpIcon sx={{ color: '#5cc879', fontSize: 34 }} />, percentage: STATIC_MONEY_PERCENT, color: '#5cc879', disabled: true, }, //{ value: formatCurrencyCompact(totals.moneySavedDollars), label: 'Money saved', icon: <TrendingUpIcon sx={{ color: '#5cc879', fontSize: 34 }} />, percentage: STATIC_MONEY_PERCENT, color: '#5cc879', disabled: true, },
{ value: String(unreadCount), label: 'Total errors', icon: <ErrorOutlineIcon sx={{ color: '#f87171', fontSize: 34, opacity: 0.9 }} />, percentage: "", color: '#f87171' }, { value: String(unreadCount), label: 'Total errors', icon: <ErrorOutlineIcon sx={{ color: '#f87171', fontSize: 34, opacity: 0.9 }} />, percentage: "", color: '#f87171' },
{ value: String(readCount), label: 'Errors resolved', icon: <TaskAltIcon sx={{ color: '#5cc879', fontSize: 34, opacity: 0.9 }} />, percentage: "", color: '#5cc879' }, { value: String(readCount), label: 'Errors resolved', icon: <TaskAltIcon sx={{ color: '#5cc879', fontSize: 34, opacity: 0.9 }} />, percentage: "", color: '#5cc879' },
]; ];
@@ -131,12 +131,12 @@ const NewDashboard = (props) => {
useEffect(() => { useEffect(() => {
const anyLoading = const anyLoading =
loadingSfw || //loadingSfw ||
loadingRot || //loadingRot ||
loadingNoti || loadingNoti ||
loadingSelectedOrgStats || loadingSelectedOrgStats //||
!selectedOrganization || !selectedOrganization ||
!selectedOrgForStats; //!selectedOrgForStats;
setShowOverlay(anyLoading); setShowOverlay(anyLoading);
}, [ }, [
loadingSfw, loadingSfw,
@@ -397,6 +397,7 @@ const NewDashboard = (props) => {
headerSubtitle="Complete these steps to start seeing insights." headerSubtitle="Complete these steps to start seeing insights."
/> />
)} )}
{showOverlay && ( {showOverlay && (
<div style={{ position: 'absolute', inset: 0, background: 'rgba(17,17,17,0.6)', backdropFilter: 'blur(2px)', zIndex: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 12 }}> <div style={{ position: 'absolute', inset: 0, background: 'rgba(17,17,17,0.6)', backdropFilter: 'blur(2px)', zIndex: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 12 }}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 }}>
@@ -405,6 +406,7 @@ const NewDashboard = (props) => {
</div> </div>
</div> </div>
)} )}
{/* Header / Greeting */} {/* Header / Greeting */}
<Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '8px 0 16px 0' }}> <Box style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '8px 0 16px 0' }}>
<Typography variant="h5">{`${getGreeting()}, ${displayName ?? 'User'}!`}</Typography> <Typography variant="h5">{`${getGreeting()}, ${displayName ?? 'User'}!`}</Typography>
frontend/src/views/UpdateAuthentication.jsx
+1 -1
View File
@@ -25,7 +25,7 @@ const SetAuthentication = (props) => {
const [loadFail, setLoadFail] = useState(""); const [loadFail, setLoadFail] = useState("");
const [appAuthentication, setAppAuthentication] = React.useState([]); const [appAuthentication, setAppAuthentication] = React.useState([]);
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
//const alert = useAlert(); //const alert = useAlert();
const parseIncomingOpenapiData = (data) => { const parseIncomingOpenapiData = (data) => {
frontend/src/views/Welcome.jsx
+1 -1
View File
@@ -47,7 +47,7 @@ const Welcome = (props) => {
} }
}, [activeStep]) }, [activeStep])
const isCloud = (window.location.host === "localhost:3002" || window.location.host === "shuffler.io") ? true : (import.meta.env.VITE_IS_SSR === "true"); const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
const [steps, setSteps] = useState([ const [steps, setSteps] = useState([
"Help us get to know you", "Help us get to know you",
"Find your Apps", "Find your Apps",