+
{info?.title ? (
@@ -1487,7 +1489,7 @@ const ActionsList = memo(({
marginTop: 15,
backgroundColor: "#1a1a1a",
overflowY: "auto",
- height: userdata?.support ? "calc(100vh - 190px)" : "calc(100vh - 260px)",
+ height: (isLoaded && isLoggedIn) ? "calc(100vh - 190px)" : "calc(100vh - 260px)",
paddingRight: 5,
}}
>
@@ -2776,7 +2778,7 @@ const Action = memo((
);
})
-const ActionResponse = memo(({ apiResponse, ExampleBody, userdata }) => {
+const ActionResponse = memo(({ apiResponse, ExampleBody, isLoggedIn, isLoaded }) => {
const [height, setHeight] = useState("14vh")
const [responseTabIndex, setResponseTabIndex] = useState(0)
const [oldResponse, setOldResponse] = useState(apiResponse)
@@ -2897,7 +2899,7 @@ const ActionResponse = memo(({ apiResponse, ExampleBody, userdata }) => {
}, []);
return (
-
+
{
/>
)})
-const PaddingWrapper = memo(({ userdata, children }) => {
+const PaddingWrapper = memo(({ isLoggedIn, isLoaded, children }) => {
const { leftSideBarOpenByClick, windowWidth } = useContext(Context);
return (
= 1920 ? "calc(100% - 630px)" : "calc(100% - 570px)"
: windowWidth >= 1920 ? "calc(100vw - 460px)": "calc(100% - 410px)"
@@ -3042,9 +3044,9 @@ const PaddingWrapper = memo(({ userdata, children }) => {
);
});
-const ApiResponseWrapper = memo(({ children, userdata }) => {
+const ApiResponseWrapper = memo(({ children, isLoaded, isLoggedIn }) => {
return (
-
+
{children}
);
diff --git a/frontend/src/components/AppModal.jsx b/frontend/src/components/AppModal.jsx
index 17189887..4fcc5d07 100644
--- a/frontend/src/components/AppModal.jsx
+++ b/frontend/src/components/AppModal.jsx
@@ -1,4 +1,6 @@
import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router';
+
import {
Dialog,
DialogTitle,
@@ -21,17 +23,22 @@ import LaunchIcon from '@mui/icons-material/Launch';
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
import { CloudDownloadOutlined } from '@mui/icons-material';
import { findSpecificApp } from './AppFramework';
+import theme from "../theme";
+import YAML from 'yaml';
+import { toast } from 'react-toastify';
+import { Link } from 'react-router-dom';
-const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
+const AppModal = ({ open, onClose, app, globalUrl }) => {
const [frameworkData, setFrameworkData] = useState({})
+ const [userdata, setUserdata] = useState({})
const [usecases, setUsecases] = useState([])
const [workflows, setWorkflows] = useState([])
const [prevSubcase, setPrevSubcase] = useState({})
const [inputUsecase, setInputUsecase] = useState({})
const [latestUsecase, setLatestUsecase] = useState([])
const [foundAppUsecase, setFoundAppUsecase] = useState({})
-
+ const navigate = useNavigate();
const parseUsecase = (subcase) => {
const srcdata = findSpecificApp(frameworkData, subcase.type)
const dstdata = findSpecificApp(frameworkData, subcase.last)
@@ -48,6 +55,25 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
return subcase
}
+ useEffect(() => {
+ var baseurl = globalUrl;
+ fetch(baseurl + "/api/v1/me", {
+ credentials: "include",
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ })
+ .then(response => response.json())
+ .then(responseJson => {
+ if (responseJson.success) {
+ setUserdata(responseJson)
+ }
+ })
+ .catch(error => {
+ console.log("Failed login check: ", error);
+ });
+ }, [app]);
+
const getFramework = () => {
fetch(globalUrl + "/api/v1/apps/frameworkConfiguration", {
@@ -266,6 +292,89 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
setFoundAppUsecase(foundSubcase);
}, [latestUsecase])
+ const downloadApp = (inputdata) => {
+ const id = inputdata.id;
+
+ toast("Downloading..");
+ fetch(globalUrl + "/api/v1/apps/" + id + "/config", {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ Accept: "application/json",
+ },
+ credentials: "include",
+ })
+ .then((response) => {
+ if (response.status !== 200) {
+ window.location.pathname = "/apps";
+ }
+
+ return response.json();
+ })
+ .then((responseJson) => {
+ if (!responseJson.success) {
+ toast("Failed to download file");
+ } else {
+ console.log(responseJson);
+ const basedata = atob(responseJson.openapi);
+ console.log("BASE: ", basedata);
+ var inputdata = JSON.parse(basedata);
+ console.log("POST INPUT: ", inputdata);
+ inputdata = JSON.parse(inputdata.body);
+
+ const newpaths = {};
+ if (inputdata["paths"] !== undefined) {
+ Object.keys(inputdata["paths"]).forEach(function (key) {
+ newpaths[key.split("?")[0]] = inputdata.paths[key];
+ });
+ }
+
+ inputdata.paths = newpaths;
+ console.log("INPUT: ", inputdata);
+ var name = inputdata.info.title;
+ name = name.replace(/ /g, "_", -1);
+ name = name.toLowerCase();
+
+ delete inputdata.id;
+ delete inputdata.editing;
+
+ const data = YAML.stringify(inputdata);
+ var blob = new Blob([data], {
+ type: "application/octet-stream",
+ });
+
+ var url = URL.createObjectURL(blob);
+ var link = document.createElement("a");
+ link.setAttribute("href", url);
+ link.setAttribute("download", `${name}.yaml`);
+ var event = document.createEvent("MouseEvents");
+ event.initMouseEvent(
+ "click",
+ true,
+ true,
+ window,
+ 1,
+ 0,
+ 0,
+ 0,
+ 0,
+ false,
+ false,
+ false,
+ false,
+ 0,
+ null
+ );
+ link.dispatchEvent(event);
+ //link.parentNode.removeChild(link)
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ toast(error.toString());
+ });
+ };
+
const isCloud =
window.location.host === "localhost:3002" ||
window.location.host === "shuffler.io" || window.location.host === "localhost:3000"
@@ -280,7 +389,8 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
newAppname = newAppname?.replaceAll("_", " ");
}
- var canEditApp = userdata.admin === "true" || userdata.id === app?.owner || app?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === app?.reference_org) || !app?.generated
+ var canEditApp = userdata.admin === "true" || userdata?.id === app?.owner || app?.owner === "" || (userdata.admin === "true" && userdata.active_org.id === app?.reference_org) || !app?.generated
+
return (
@@ -294,7 +404,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
borderRadius: 2,
border: "1px solid #494949",
minWidth: '440px',
- fontFamily: "Inter",
+ fontFamily: theme?.typography?.fontFamily,
backgroundColor: "#212121",
'& .MuiDialogContent-root': {
backgroundColor: "#212121",
@@ -303,10 +413,10 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
backgroundColor: "#212121",
},
'& .MuiTypography-root': {
- fontFamily: 'Inter, sans-serif',
+ fontFamily: theme?.typography?.fontFamily,
},
'& .MuiButton-root': {
- fontFamily: 'Inter, sans-serif',
+ fontFamily: theme?.typography?.fontFamily,
},
}
}}
@@ -320,7 +430,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
pt: 2,
pl: 3,
pr: 2,
- fontFamily: "Inter"
+ fontFamily: theme?.typography?.fontFamily
}}
>
@@ -340,7 +450,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
-
+
{
{
isCloud && (
-
{
>
-
+
)
}
@@ -391,23 +499,33 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
-
+
+ {app?.activated &&
+ app?.private_id !== undefined &&
+ app?.private_id?.length > 0 &&
+ app?.generated ? (
+ ) : null}
@@ -431,17 +561,17 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
- {
>
20
-
@@ -468,12 +598,12 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px",
height: "100%",
}}>
-
+
{Array.isArray(app?.actions) ? app.actions.length : app?.actions}
@@ -486,7 +616,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
paddingLeft: "10px",
paddingTop: "5px"
}}>
-
)
}
@@ -1892,13 +1888,15 @@ const Billing = (props) => {
}
};
-
- const isChildOrg = userdata.active_org.creator_org !== "" && userdata.active_org.creator_org !== undefined && userdata.active_org.creator_org !== null
+ const isChildOrg = userdata?.active_org?.creator_org !== "" && userdata?.active_org?.creator_org !== undefined && userdata?.active_org?.creator_org !== null
+
return (
-
+ {
color="primary"
style={{
marginTop: 10,
- borderRadius: 25,
+ borderRadius: 8,
height: 40,
fontSize: 16,
- color: "white",
- textTransform: 'none'
+ color: "#1A1A1A",
+ textTransform: 'none',
+ backgroundColor: "#FF8544"
}}
onClick={() => {
if (Cloud) {
@@ -1397,10 +1390,12 @@ const Billing = (props) => {
color="primary"
style={{
marginTop: 10,
- borderRadius: 25,
+ borderRadius: 8,
height: 40,
fontSize: 16,
- textTransform: 'none'
+ textTransform: 'none',
+ color: "#FF8544",
+ backgroundColor: "#1a1a1a",
}}
onClick={() => {
if (Cloud) {
@@ -1425,6 +1420,7 @@ const Billing = (props) => {
style: {
width: 500,
margin: 0,
+ backgroundColor: "rgb(26, 26, 26)",
}
}}
>
@@ -1464,7 +1460,7 @@ const Billing = (props) => {
-
+
{
app?.collection ? (
<>
@@ -494,13 +624,25 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
app.collection
- ) : "No collection yet"
+ ) : (
+
+ No collection yet
+
+ )
}
@@ -517,7 +659,7 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
width: "100%"
}}>
{
{
foundAppUsecase === undefined ? (
-
) : (
{
/>
)
}
- {
+ {
foundAppUsecase === undefined ? (
-
) : (
{
-
+
@@ -611,4 +756,4 @@ const AppModal = ({ open, onClose, app, userdata, globalUrl }) => {
);
};
-export default AppModal;
\ No newline at end of file
+export default AppModal;
diff --git a/frontend/src/components/AppSelection.jsx b/frontend/src/components/AppSelection.jsx
index 76d38d88..e9539eeb 100644
--- a/frontend/src/components/AppSelection.jsx
+++ b/frontend/src/components/AppSelection.jsx
@@ -465,7 +465,7 @@ const AppSelection = props => {
style={{
fontSize: 16,
color: "rgba(158, 158, 158, 1)",
- fontFamily: "Inter",
+ fontFamily: theme?.typography?.fontFamily,
}}
>
Your organization has no apps yet, select your starting apps here
diff --git a/frontend/src/components/Billing.jsx b/frontend/src/components/Billing.jsx
index f4fff846..c1ce38a3 100644
--- a/frontend/src/components/Billing.jsx
+++ b/frontend/src/components/Billing.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext, memo, useMemo } from "react";
import ReactGA from 'react-ga4';
import theme from "../theme.jsx";
@@ -41,7 +41,8 @@ import {
Delete,
RestaurantRounded,
Cloud,
- CheckCircle
+ CheckCircle,
+ Padding,
} from "@mui/icons-material";
//import { useAlert
@@ -49,8 +50,9 @@ import { typecost, typecost_single, } from "../views/HandlePaymentNew.jsx";
import BillingStats from "./BillingStats.jsx";
import { handlePayasyougo } from "../views/HandlePaymentNew.jsx"
import DeleteIcon from '@mui/icons-material/Delete';
+import { Context } from "../context/ContextApi.jsx";
-const Billing = (props) => {
+const Billing = memo((props) => {
const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, clickedFromOrgTab } = props;
//const alert = useAlert();
let navigate = useNavigate();
@@ -72,7 +74,7 @@ const Billing = (props) => {
const [alertThresholds, setAlertThresholds] = useState(selectedOrganization.Billing !== undefined && selectedOrganization.Billing.AlertThreshold !== undefined && selectedOrganization.Billing.AlertThreshold !== null ? selectedOrganization.Billing.AlertThreshold : [{ percentage: '', count: '', Email_send: false }]);
const [currentIndex, setCurrentIndex] = useState(0);
const [deleteAlertVerification, setDeleteAlertVerification] = useState(false);
-
+
useEffect(() => {
if (userdata.app_execution_limit !== undefined && userdata.app_execution_usage !== undefined) {
const percentage = (userdata.app_execution_usage / userdata.app_execution_limit) * 100;
@@ -81,18 +83,12 @@ const Billing = (props) => {
}
}, [userdata]);
+ const [BillingEmail, setBillingEmail] = useState(selectedOrganization?.Billing?.Email);
- const [BillingEmail, setBillingEmail] = useState(selectedOrganization.Billing !== undefined && selectedOrganization.Billing.Email !== undefined && selectedOrganization.Billing.Email != null && selectedOrganization.Billing.Email.length > 0 ? selectedOrganization.Billing.Email : selectedOrganization.org);
-
- useState(() => {
- // Set the billing email
- setBillingEmail(
- selectedOrganization.Billing !== undefined &&
- selectedOrganization.Billing.Email !== undefined &&
- selectedOrganization.Billing.Email.length > 0
- ? selectedOrganization.Billing.Email
- : selectedOrganization.org
- );
+ useEffect(() => {
+ if (BillingEmail !== selectedOrganization?.Billing?.Email) {
+ setBillingEmail(selectedOrganization?.Billing?.Email);
+ }
// Set and sort the alert thresholds
const alertThresholds = selectedOrganization.Billing !== undefined &&
@@ -126,7 +122,6 @@ const Billing = (props) => {
];
const handleGetDeals = (orgId) => {
- console.log("Get deals!");
if (orgId.length === 0) {
toast(
@@ -178,7 +173,7 @@ const Billing = (props) => {
width: 340,
height: 480,
// width: "100%",
- backgroundColor: theme.palette.platformColor,
+ backgroundColor: theme.palette.backgroundColor,
borderRadius: theme.palette?.borderRadius * 2,
border: "1px solid rgba(255,255,255,0.3)",
marginRight: 10,
@@ -384,7 +379,7 @@ const Billing = (props) => {
}
if (hovered) {
- newPaperstyle.backgroundColor = theme.palette.surfaceColor
+ newPaperstyle.backgroundColor = "#2b2b2b"
}
const handleClickOpen = () => {
@@ -412,7 +407,6 @@ const Billing = (props) => {
const HandleChangeBillingEmail = (orgId) => {
const email = newBillingEmail;
const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
- console.log("Pattern matches: ", emailPattern.test(email));
if (!emailPattern.test(email)) {
toast("Please enter a valid email address");
return;
@@ -445,7 +439,6 @@ const Billing = (props) => {
}
return response.json();
}).then((responseJson) => {
- console.log("Got org:", responseJson);
if (responseJson.success === true) {
toast.success("Successfully updated billing email");
setBillingEmail(newBillingEmail);
@@ -460,7 +453,7 @@ const Billing = (props) => {
}
return (
- setHovered(true)}
onMouseLeave={() => setHovered(false)}
@@ -726,7 +719,7 @@ const Billing = (props) => {
- Billing email: {BillingEmail}
+ {BillingEmail?.length > 0 ? `Billing email: ${BillingEmail}` : null}
{userdata.has_card_available === true && (
)
}
const ConsultationManagement = (props) => {
@@ -1035,12 +1027,12 @@ const Billing = (props) => {
})
return (
- {
color="primary"
style={{
marginTop: userdata.support ? 0 : 10,
- borderRadius: 25,
+ borderRadius: 8,
height: 40,
fontSize: 16,
- color: "white",
- backgroundColor: "#f86743",
+ color: "#1A1A1A",
+ backgroundColor: "#FF8544",
textTransform: 'none',
}}
onClick={() => {
@@ -1150,7 +1142,7 @@ const Billing = (props) => {
>
Buy
-
+
)
}
@@ -1308,13 +1300,13 @@ const Billing = (props) => {
}
return (
-
- {addDealModal}
+
+
+
+ {addDealModal}
{clickedFromOrgTab ?
- Billing & Licensing :
Billing & Licensing
}
@@ -1942,11 +1940,11 @@ const Billing = (props) => {
{isChildOrg ?
- Billing is handled by your parent organisation. Reach out to support@shuffler.io if you have questions about this.
+ Licensing is handled by your parent organisation. Reach out to support@shuffler.io if you have questions about this.
: null}
-
Billing & Licensing
: +
+
{isCloud && billingInfo.subscription !== undefined && billingInfo.subscription !== null ? isChildOrg ? null :
{
) : null*/}
{!isChildOrg && isCloud && (
-
+
Professional Services
-
+
We offer priority support through consultations and training to help you make the most of our product. If you have any questions, please reach out to us at support@shuffler.io.
@@ -2280,15 +2278,14 @@ const Billing = (props) => {
)}
Manage Billing
-
+
Manage your billing and licensing information below. When you reach the certain thresholds of your subscription limit, you will be notified by email.
- Current Usage:
+ Current Usage:
{
marginBottom: 10,
}}
/>
-
+
You have used {currentAppRunsInPercentage}% of total app execution limit or {userdata.app_execution_usage} app runs out of {userdata.app_execution_limit} app runs.
Utilization & Stats
@@ -2436,9 +2433,41 @@ const Billing = (props) => {
globalUrl={globalUrl}
selectedOrganization={selectedOrganization}
userdata={userdata}
- />
-
+ />
+
+
)
-}
+})
-export default Billing;
+export default memo(Billing);
+
+const PaddingWrapper = memo(({ clickedFromOrgTab, children }) => {
+
+ const wrapperStyle = useMemo(() => ({
+ width: clickedFromOrgTab
+ ? "100%"
+ : "auto",
+ padding: "27px 10px 19px 27px",
+ backgroundColor: '#212121',
+ borderRadius: '16px',
+ height: '100%',
+ boxSizing: 'border-box',
+ borderLeft: '1px solid #494949',
+ overflow: 'hidden',
+ maxHeight: "1700px", overflowY: "auto",scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'
+ }), [clickedFromOrgTab]);
+
+ return (
+
+ {children}
+
+ );
+ });
diff --git a/frontend/src/components/BillingStats.jsx b/frontend/src/components/BillingStats.jsx
index 34405f29..8b5d4a1c 100644
--- a/frontend/src/components/BillingStats.jsx
+++ b/frontend/src/components/BillingStats.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useContext, memo, useMemo } from 'react';
import theme from '../theme.jsx';
import classNames from "classnames";
@@ -37,6 +37,7 @@ import {
} from 'reaviz';
import { typecost, typecost_single, } from "../views/HandlePaymentNew.jsx";
+import { Context } from '../context/ContextApi.jsx';
const LineChartWrapper = ({keys, inputname, height, width}) => {
const [hovered, setHovered] = useState("");
@@ -82,8 +83,8 @@ const AppStats = (defaultprops) => {
const [workflows, setWorkflows] = useState(inputWorkflows === undefined ? [] : inputWorkflows)
const [resultRows, setResultRows] = useState([])
const [resultLoading, setResultLoading] = useState(true)
-
- const includedExecutions = selectedOrganization.sync_features.app_executions !== undefined ? selectedOrganization.sync_features.app_executions.limit : 0
+
+ const includedExecutions = selectedOrganization?.sync_features?.app_executions !== undefined ? selectedOrganization?.sync_features?.app_executions?.limit : 0
useEffect(() => {
if (workflows === undefined || workflows === null || workflows.length === 0) {
@@ -92,7 +93,6 @@ const AppStats = (defaultprops) => {
}, [])
-
const getWorkflowStats = async (workflow, startTime, endTime) => {
if (!userdata.support) {
return workflow
@@ -162,8 +162,6 @@ const AppStats = (defaultprops) => {
const loadWorkflowStats = (foundWorkflows, startTime, endTime) => {
if (!userdata.support) {
- console.log("Not support")
-
return
}
@@ -488,8 +486,13 @@ const AppStats = (defaultprops) => {
setApprunCosts(appcostRuns)
}
- const getStats = () => {
- fetch(`${globalUrl}/api/v1/orgs/${selectedOrganization.id}/stats`, {
+ const getStats = (orgid) => {
+
+ if (orgid === undefined || orgid === null) {
+ return
+ }
+
+ fetch(`${globalUrl}/api/v1/orgs/${orgid}/stats`, {
method: "GET",
headers: {
"Content-Type": "application/json",
@@ -519,8 +522,10 @@ const AppStats = (defaultprops) => {
}
useEffect(() => {
- getStats()
- }, [])
+ if(selectedOrganization?.id?.length > 0) {
+ getStats(selectedOrganization.id)
+ }
+ }, [selectedOrganization])
const paperStyle = {
textAlign: "center",
@@ -639,7 +644,7 @@ const AppStats = (defaultprops) => {
const data = (
+
+ ):(
{
/>
+ )}
+
diff --git a/frontend/src/components/Branding.jsx b/frontend/src/components/Branding.jsx
index 39734084..e549d12e 100644
--- a/frontend/src/components/Branding.jsx
+++ b/frontend/src/components/Branding.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext } from "react";
import ReactGA from 'react-ga4';
import theme from "../theme.jsx";
import { ToastContainer, toast } from "react-toastify"
@@ -21,6 +21,7 @@ import {
red,
green,
} from "../views/AngularWorkflow.jsx"
+import { Context } from "../context/ContextApi.jsx";
//import { useAlert
@@ -30,7 +31,8 @@ const Branding = (props) => {
const [publishingInfo, setPublishingInfo] = useState("");
const [publishRequirements, setPublishRequirements] = useState([])
-
+ const { leftSideBarOpenByClick } = useContext(Context)
+
const handleEditOrg = (joinStatus) => {
const data = {
"org_id": selectedOrganization.id,
@@ -115,48 +117,73 @@ const Branding = (props) => {
const leadinfo = selectedOrganization.lead_info === undefined || selectedOrganization.lead_info === null || selectedOrganization.lead_info === "" ? "" : JSON.stringify(selectedOrganization.lead_info)
const isPartner = leadinfo.includes("partner")
- console.log("LEADINFO: ", leadinfo)
-
- console.log("SELECTEDORGANIZATION: ", selectedOrganization)
return (
-
-
+
Set email alert thresholds for app runs
-
+
You will be notified by email when you reach the
{currentIndex !== -1
? " " + getSafeValue(alertThresholds[currentIndex].percentage) + '%' + " "
@@ -2320,8 +2317,8 @@ const Billing = (props) => {
: " " + 0 + " "}
app runs.
-
- Please note: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification.
+
+ Please note: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification.
{alertThresholds.map((threshold, index) => (
@@ -2329,7 +2326,7 @@ const Billing = (props) => {
{
{
Save
+
+ {children}
+
+ );
+ });
+
+ const Wrapper = memo(({ children, clickedFromOrgTab }) => {
+ return (
+
-
+
All shown statistics are gathered from {
: null}
+ {clickedFromOrgTab? (
+
+
+
+
+
+
+
-
+
+
+
+
+
Partner Status & Branding
-
-
+
+
You can customize your organization's branding by uploading a logo, changing the color scheme and a lot more.
-
+
{isPublished ?
-
+
{!isPartner ?
- {!isPartner? "Not Officially Partnered" : "Officially Partnered"}
+ {!isPartner? "Not Officially Partnered" : "Officially Partnered"}
-
-
-
+ {!isPublished ? (
+
+
+
+ ) : (
+
+ )}
+
Partner Program
-
-
+
+
-
+
By changing publishing settings, you agree to our Terms of Service, and acknowledge that your organization's non-sensitive data will be added as a creator account. None of your existing workflows, apps, or other stored data will be published. Any admin in your organization can manage the creator configuration. Becoming a creator organization IS reversible.Support: support@shuffler.io
{selectedOrganization.creator_id == "" ?
@@ -167,9 +194,8 @@ const Branding = (props) => {
null
}
-
+
+
)
}
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 59d541ba..4e8c6c24 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext, memo } from "react";
import theme from "../theme.jsx";
import { toast } from 'react-toastify';
import ReactJson from "react-json-view-ssr";
@@ -19,6 +19,7 @@ import {
Dialog,
DialogTitle,
DialogActions,
+ Skeleton,
} from "@mui/material";
import {
@@ -47,6 +48,7 @@ import {
VisibilityOff as VisibilityOffIcon,
} from "@mui/icons-material";
import { validateJson, } from "../views/Workflows.jsx";
+import { Context } from "../context/ContextApi.jsx";
const scrollStyle1 = {
height: 100,
@@ -65,7 +67,7 @@ const scrollStyle2 = {
}
-const CacheView = (props) => {
+const CacheView = memo((props) => {
const { globalUrl, userdata, serverside, orgId, isSelectedDataStore } = props;
const [orgCache, setOrgCache] = React.useState("");
const [listCache, setListCache] = React.useState([]);
@@ -78,11 +80,13 @@ const CacheView = (props) => {
const [cacheCursor, setCacheCursor] = React.useState("");
const [dataValue, setDataValue] = React.useState({});
const [editCache, setEditCache] = React.useState(false);
+ const [cachedLoaded, setCachedLoaded] = React.useState(false);
const [show, setShow] = useState({});
-
useEffect(() => {
- listOrgCache(orgId);
- }, []);
+ if(orgId?.length >0){
+ listOrgCache(orgId);
+ }
+ }, [orgId]);
const listOrgCache = (orgId) => {
fetch(globalUrl + `/api/v1/orgs/${orgId}/list_cache`, {
@@ -104,6 +108,7 @@ const CacheView = (props) => {
.then((responseJson) => {
if (responseJson.success === true) {
setListCache(responseJson.keys);
+ setCachedLoaded(true);
}
if (responseJson.cursor !== undefined && responseJson.cursor !== null && responseJson.cursor !== "") {
@@ -232,6 +237,34 @@ const CacheView = (props) => {
}
}
+ const handleReactJsonClipboard = (copy) => {
+ const elementName = "copy_element_shuffle";
+ let copyText = document.getElementById(elementName);
+
+ if (copyText) {
+ if (copy.namespace && copy.name && copy.src) {
+ copy = copy.src;
+ }
+
+ const clipboard = navigator.clipboard;
+ if (!clipboard) {
+ toast("Can only copy over HTTPS (port 3443)");
+ return;
+ }
+
+ let stringified = JSON.stringify(copy);
+ if (stringified.startsWith('"') && stringified.endsWith('"')) {
+ stringified = stringified.slice(1, -1);
+ }
+
+ navigator.clipboard.writeText(stringified);
+ toast("Copied value to clipboard, NOT json path.");
+ } else {
+ console.log("Failed to copy from " + elementName + ": ", copyText);
+ }
+ };
+
+
const modalView = (
// console.log("key:", dataValue.key),
//console.log("value:",dataValue.value),
@@ -241,11 +274,23 @@ const CacheView = (props) => {
setModalOpen(false);
}}
PaperProps={{
- style: {
- backgroundColor: theme.palette.surfaceColor,
- color: "white",
+ sx: {
+ borderRadius: theme?.palette?.DialogStyle?.borderRadius,
+ border: theme?.palette?.DialogStyle?.border,
minWidth: "800px",
minHeight: "320px",
+ 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,
+ },
+ '& .MuiDialogActions-root': {
+ backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+ },
},
}}
>
@@ -254,7 +299,7 @@ const CacheView = (props) => {
{ editCache ? "Edit Cache" : "Add Cache" }
-
+
Key
{
onChange={(e) => setKey(e.target.value)}
/>
-
+
Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
@@ -320,7 +365,7 @@ const CacheView = (props) => {
+
)
}
diff --git a/frontend/src/components/CacheView.jsx b/frontend/src/components/CacheView.jsx
index 59d541ba..4e8c6c24 100644
--- a/frontend/src/components/CacheView.jsx
+++ b/frontend/src/components/CacheView.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useContext, memo } from "react";
import theme from "../theme.jsx";
import { toast } from 'react-toastify';
import ReactJson from "react-json-view-ssr";
@@ -19,6 +19,7 @@ import {
Dialog,
DialogTitle,
DialogActions,
+ Skeleton,
} from "@mui/material";
import {
@@ -47,6 +48,7 @@ import {
VisibilityOff as VisibilityOffIcon,
} from "@mui/icons-material";
import { validateJson, } from "../views/Workflows.jsx";
+import { Context } from "../context/ContextApi.jsx";
const scrollStyle1 = {
height: 100,
@@ -65,7 +67,7 @@ const scrollStyle2 = {
}
-const CacheView = (props) => {
+const CacheView = memo((props) => {
const { globalUrl, userdata, serverside, orgId, isSelectedDataStore } = props;
const [orgCache, setOrgCache] = React.useState("");
const [listCache, setListCache] = React.useState([]);
@@ -78,11 +80,13 @@ const CacheView = (props) => {
const [cacheCursor, setCacheCursor] = React.useState("");
const [dataValue, setDataValue] = React.useState({});
const [editCache, setEditCache] = React.useState(false);
+ const [cachedLoaded, setCachedLoaded] = React.useState(false);
const [show, setShow] = useState({});
-
useEffect(() => {
- listOrgCache(orgId);
- }, []);
+ if(orgId?.length >0){
+ listOrgCache(orgId);
+ }
+ }, [orgId]);
const listOrgCache = (orgId) => {
fetch(globalUrl + `/api/v1/orgs/${orgId}/list_cache`, {
@@ -104,6 +108,7 @@ const CacheView = (props) => {
.then((responseJson) => {
if (responseJson.success === true) {
setListCache(responseJson.keys);
+ setCachedLoaded(true);
}
if (responseJson.cursor !== undefined && responseJson.cursor !== null && responseJson.cursor !== "") {
@@ -232,6 +237,34 @@ const CacheView = (props) => {
}
}
+ const handleReactJsonClipboard = (copy) => {
+ const elementName = "copy_element_shuffle";
+ let copyText = document.getElementById(elementName);
+
+ if (copyText) {
+ if (copy.namespace && copy.name && copy.src) {
+ copy = copy.src;
+ }
+
+ const clipboard = navigator.clipboard;
+ if (!clipboard) {
+ toast("Can only copy over HTTPS (port 3443)");
+ return;
+ }
+
+ let stringified = JSON.stringify(copy);
+ if (stringified.startsWith('"') && stringified.endsWith('"')) {
+ stringified = stringified.slice(1, -1);
+ }
+
+ navigator.clipboard.writeText(stringified);
+ toast("Copied value to clipboard, NOT json path.");
+ } else {
+ console.log("Failed to copy from " + elementName + ": ", copyText);
+ }
+ };
+
+
const modalView = (
// console.log("key:", dataValue.key),
//console.log("value:",dataValue.value),
@@ -241,11 +274,23 @@ const CacheView = (props) => {
setModalOpen(false);
}}
PaperProps={{
- style: {
- backgroundColor: theme.palette.surfaceColor,
- color: "white",
+ sx: {
+ borderRadius: theme?.palette?.DialogStyle?.borderRadius,
+ border: theme?.palette?.DialogStyle?.border,
minWidth: "800px",
minHeight: "320px",
+ 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,
+ },
+ '& .MuiDialogActions-root': {
+ backgroundColor: theme?.palette?.DialogStyle?.backgroundColor,
+ },
},
}}
>
@@ -254,7 +299,7 @@ const CacheView = (props) => {
{ editCache ? "Edit Cache" : "Add Cache" }
-
+
Partner Status & Branding
-
-
+
+
You can customize your organization's branding by uploading a logo, changing the color scheme and a lot more.
-
+
{isPublished ?
-
+
{!isPartner ?
- {!isPartner? "Not Officially Partnered" : "Officially Partnered"}
+ {!isPartner? "Not Officially Partnered" : "Officially Partnered"}
-
-
-
+ {!isPublished ? (
+
+
+
+ ) : (
+
+ )}
+
-
+
Partner Program
-
-
+
+
+
+
-
+
By changing publishing settings, you agree to our Terms of Service, and acknowledge that your organization's non-sensitive data will be added as a creator account. None of your existing workflows, apps, or other stored data will be published. Any admin in your organization can manage the creator configuration. Becoming a creator organization IS reversible.Support: support@shuffler.io
{selectedOrganization.creator_id == "" ?
@@ -167,9 +194,8 @@ const Branding = (props) => {
null
}
-
+
Key
{
onChange={(e) => setKey(e.target.value)}
/>
-
+
Value - ({isValidJson.valid === true ? "Valid" : "Invalid"} JSON)
@@ -320,7 +365,7 @@ const CacheView = (props) => {