+
+
+ {/* Shuffle 1.4.0 is out! Read more about */}
+ Shuffle 2.0.0 is out now!
+
+ {
+ ReactGA.event({
+ category: "landingpage",
+ action: "click_header_training",
+ label: "",
+ })
+
+ navigate("/articles/2.0_release")
+
+ }} style={{ cursor: "pointer", textDecoration: "none", fontWeight: 600, color: "rgba(255,255,255,0.9)" }}>
+ Read about it here.
+
+
+
+ {
+ setShowTopbar(false)
+
+ // Set storage that it's clicked
+ localStorage.setItem(topbar_var, "true")
+ }}>
+
+
+
+
+ :
+ null
+
+ const handleClickChangeOrg = (orgId) => {
+ setIsOrgChanging(true);
+ const data = { org_id: orgId };
+
+ localStorage.setItem("globalUrl", "");
+ localStorage.setItem("getting_started_sidebar", "open");
+ toast.info("Changing organization...");
+ fetch(`${globalUrl}/api/v1/orgs/${orgId}/change`, {
+ mode: "cors",
+ credentials: "include",
+ crossDomain: true,
+ method: "POST",
+ body: JSON.stringify(data),
+ withCredentials: true,
+ headers: {
+ "Content-Type": "application/json; charset=utf-8",
+ },
+ })
+ .then(function (response) {
+ if (response.status !== 200) {
+ console.log("Error in response");
+ } else {
+ localStorage.removeItem("apps");
+ localStorage.removeItem("workflows");
+ localStorage.removeItem("userinfo");
+ }
+
+ return response.json();
+ })
+ .then(function (responseJson) {
+ if (responseJson.success === true) {
+ if (
+ responseJson.region_url !== undefined &&
+ responseJson.region_url !== null &&
+ responseJson.region_url.length > 0
+ ) {
+ console.log("Region Change: ", responseJson.region_url);
+ localStorage.setItem("globalUrl", responseJson.region_url);
+ //globalUrl = responseJson.region_url
+ }
+
+ if (responseJson["reason"] === "SSO_REDIRECT") {
+ toast.info("Redirecting to SSO login page as SSO is required for this organization.");
+ setTimeout(() => {
+ window.location.href = responseJson["url"];
+ }, 2000);
+ } else {
+ toast("Successfully changed active organization - refreshing!");
+ setTimeout(() => {
+ window.location.reload();
+ }, 2000);
+ }
+ } else {
+ setIsOrgChanging(false);
+ if (
+ responseJson.reason !== undefined &&
+ responseJson.reason !== null &&
+ responseJson.reason.length > 0
+ ) {
+ toast(responseJson.reason);
+ } else {
+ toast("Failed changing org. Try again or contact support@shuffler.io if this persists.");
+ }
+ }
+ })
+ .catch((error) => {
+ console.log("error changing: ", error);
+ setIsOrgChanging(false);
+ });
+ };
+
+ // Add these helper functions from LeftSideBar
+ const getRegionTag = (region_url) => {
+ let regiontag = "EU";
+ if (region_url !== undefined && region_url !== null && region_url.length > 0) {
+ 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";
+ } else if (regiontag === "frankfurt") {
+ regiontag = "EU-2";
+ } else if (regiontag === "ca") {
+ regiontag = "CA";
+ }
+ }
+ }
+ return regiontag;
+ };
+
+ const getRegionFlag = (region_url) => {
+ const regionTag = getRegionTag(region_url);
+ const regionMapping = {
+ "US": "us",
+ "EU": "eu",
+ "EU-2": "de",
+ "CA": "ca",
+ "UK": "gb"
+ };
+
+ const region = regionMapping[regionTag] || "eu";
+ return `https://flagcdn.com/48x36/${region}.png`;
+ };
+
+ // Add this useEffect to prevent scroll locking
+ useEffect(() => {
+ // Remove modal classes that cause scroll locking
+ const removeModalClasses = () => {
+ document.body.style.overflow = 'auto';
+ document.body.style.paddingRight = '0px';
+ };
+
+ // Create observer to watch for class changes
+ const observer = new MutationObserver((mutations) => {
+ mutations.forEach((mutation) => {
+ if (mutation.attributeName === 'class') {
+ if (document.body.classList.contains('MuiModal-open')) {
+ removeModalClasses();
+ }
+ }
+ });
+ });
+
+ // Start observing
+ observer.observe(document.body, {
+ attributes: true,
+ attributeFilter: ['class'],
+ });
+
+ // Cleanup
+ return () => {
+ observer.disconnect();
+ removeModalClasses();
+ };
+ }, []);
+
+ const handleOrgSelectClick = (event) => {
+ // Prevent the default Select behavior
+ event.preventDefault();
+ if(isCloud){
+ ReactGA.event({
+ category: "navbar",
+ action: "org_dropdown_click",
+ label: "org_dropdown_click",
+ })
+ }
+ // Toggle the select open state
+ setOrgSelectOpen(!orgSelectOpen);
+ };
+
+ return (
+ ![shuffle logo]({"/images/logos/topleft_logo.svg"}){kind=logo}
+
+