New 1.4.0 page view looks and bugfixes
This commit is contained in:
+1969
-331
File diff suppressed because it is too large
Load Diff
@@ -43,7 +43,7 @@ import BillingStats from "../components/BillingStats.jsx";
|
||||
import { handlePayasyougo } from "../views/HandlePaymentNew.jsx"
|
||||
|
||||
const Billing = (props) => {
|
||||
const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, } = props;
|
||||
const { globalUrl, userdata, serverside, billingInfo, stripeKey, selectedOrganization, handleGetOrg, clickedFromOrgTab } = props;
|
||||
//const alert = useAlert();
|
||||
let navigate = useNavigate();
|
||||
|
||||
@@ -970,21 +970,29 @@ const Billing = (props) => {
|
||||
|
||||
const isChildOrg = userdata.active_org.creator_org !== "" && userdata.active_org.creator_org !== undefined && userdata.active_org.creator_org !== null
|
||||
return (
|
||||
<div style={{ width: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
|
||||
<div style={{ width: clickedFromOrgTab? 1030 : "auto", padding: 27, backgroundColor: '#212121', borderRadius: '16px', }}>
|
||||
{addDealModal}
|
||||
{clickedFromOrgTab?
|
||||
<h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Billing & Licensing</h2>:
|
||||
<Typography variant="h4" style={{ marginTop: 20, marginBottom: 10 }}>
|
||||
Billing & Licensing
|
||||
</Typography>
|
||||
</Typography>}
|
||||
{clickedFromOrgTab?
|
||||
<span style={{ color: "#9E9E9E" }}>{isCloud ?
|
||||
"Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
|
||||
:
|
||||
"Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
|
||||
}</span>:
|
||||
<Typography variant="body1" color="textSecondary" style={{ marginTop: 0, marginBottom: 10}}>
|
||||
{isCloud ?
|
||||
"Get more out of Shuffle by adding your credit card, such as no App Run limitations, and priority support from our team. We use Stripe to manage subscriptions and do not store any of your billing information. You can manage your subscription and billing information below."
|
||||
:
|
||||
"Shuffle is an Open Source automation platform, and no license is required. We do however offer a Scale license with HA guarantees, along with support hours. By buying a license on https://shuffler.io, you can get access to the license immediately, and if Cloud Syncronisation is enabled, the UI in your local instance will also update."
|
||||
}
|
||||
</Typography>
|
||||
</Typography>}
|
||||
|
||||
{userdata.support === true ?
|
||||
<div style={{marginBottom: 10, }}>
|
||||
<div style={{marginBottom: 10, marginTop:clickedFromOrgTab?16:null, color:clickedFromOrgTab?"#F1F1F1":null }}>
|
||||
For sales: Create
|
||||
<a href={"https://docs.google.com/document/d/1OeJSi42812EMg7fUAw1HAj1ymOG8rfp8Ma_DGJKvwgI/copy?usp=sharing&organization=" + selectedOrganization.id} target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none", color: "#f85a3e" }}>
|
||||
New Cloud Contract
|
||||
|
||||
@@ -103,8 +103,8 @@ const Branding = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ width: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
|
||||
<h2>
|
||||
<div style={{ width: clickedFromOrgTab? 1030: "auto", padding: 27, height: "auto", backgroundColor: '#212121', borderRadius: '16px', }}>
|
||||
<h2 style={{marginTop: clickedFromOrgTab ?0:null,}}>
|
||||
Branding
|
||||
</h2>
|
||||
<Typography variant="body1" color="textSecondary" style={{ marginTop: 20, marginBottom: 10 }}>
|
||||
|
||||
@@ -115,43 +115,6 @@ const CacheView = (props) => {
|
||||
});
|
||||
};
|
||||
|
||||
// const getCacheList = (orgId) => {
|
||||
// fetch(`${globalUrl}/api/v1/orgs/${orgId}/get_cache`, {
|
||||
// method: "GET",
|
||||
// headers: {
|
||||
// "Content-Type": "application/json",
|
||||
// Accept: "application/json",
|
||||
// },
|
||||
// credentials: "include",
|
||||
// })
|
||||
// .then((response) => {
|
||||
// if (response.status !== 200) {
|
||||
// console.log("Status not 200 for WORKFLOW EXECUTION :O!");
|
||||
// }
|
||||
|
||||
|
||||
// return response.json();
|
||||
// })
|
||||
// .then((responseJson) => {
|
||||
// if (responseJson.success !== false) {
|
||||
// console.log("Found cache: ", responseJson)
|
||||
// setListCache(responseJson)
|
||||
// } else {
|
||||
// console.log("Couldn't find the creator profile (rerun?): ", responseJson)
|
||||
// // If the current user is any of the Shuffle Creators
|
||||
// // AND the workflow doesn't have an owner: allow editing.
|
||||
// // else: Allow suggestions?
|
||||
// //console.log("User: ", userdata)
|
||||
// //if (rerun !== true) {
|
||||
// // getUserProfile(userdata.id, true)
|
||||
// //}
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.log("Get userprofile error: ", error);
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
const deleteCache = (orgId, key) => {
|
||||
toast("Attempting to delete Cache");
|
||||
@@ -403,7 +366,7 @@ const CacheView = (props) => {
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
style={{backgroundColor: isSelectedDataStore?'rgba(255, 132, 68, 0.2)':null, color:isSelectedDataStore?"#FF8444":null, borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
|
||||
style={{backgroundColor: isSelectedDataStore?'rgba(255, 132, 68, 0.2)':null, boxShadow: isSelectedDataStore ? "none":null,textTransform: isSelectedDataStore ? 'capitalize':null, color:isSelectedDataStore?"#FF8444":null, borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?162:null, height:isSelectedDataStore?40:null}}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() =>{
|
||||
@@ -416,7 +379,7 @@ const CacheView = (props) => {
|
||||
Add Cache
|
||||
</Button>
|
||||
<Button
|
||||
style={{ marginLeft: 5, marginRight: 15, backgroundColor: isSelectedDataStore?"#2F2F2F":null,borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null, }}
|
||||
style={{ marginLeft: 5, marginRight: 15, backgroundColor: isSelectedDataStore?"#2F2F2F":null, boxShadow: isSelectedDataStore ? "none":null,textTransform: isSelectedDataStore ? 'capitalize':null,borderRadius:isSelectedDataStore?200:null, width:isSelectedDataStore?81:null, height:isSelectedDataStore?40:null, }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => listOrgCache(orgId)}
|
||||
@@ -433,26 +396,27 @@ const CacheView = (props) => {
|
||||
<ListItem style={{width: isSelectedDataStore?"100%":null, borderBottom:isSelectedDataStore?"1px solid #494949":null}}>
|
||||
<ListItemText
|
||||
primary="Key"
|
||||
style={{ minWidth: 250, maxWidth: 250, }}
|
||||
style={{ minWidth: isSelectedDataStore?200:250, maxWidth: isSelectedDataStore?200:250, }}
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Value"
|
||||
style={{ minWidth: 400, maxWidth: 400, overflowX: "auto", overflowY: "hidden", }}
|
||||
style={{ minWidth: isSelectedDataStore?300:400, maxWidth: isSelectedDataStore?300:400, overflowX: "auto", overflowY: "hidden", }}
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Actions"
|
||||
style={{ minWidth: 150, maxWidth: 150, marginLeft: 50, }}
|
||||
style={{ minWidth: 150, maxWidth: 150, marginLeft: isSelectedDataStore?80:null,}}
|
||||
/>
|
||||
<ListItemText
|
||||
style={{textAlign:isSelectedDataStore?"center":null}}
|
||||
primary="Updated"
|
||||
/>
|
||||
</ListItem>
|
||||
{listCache === undefined || listCache === null
|
||||
? null
|
||||
: listCache.map((data, index) => {
|
||||
var bgColor = "#27292d";
|
||||
var bgColor = isSelectedDataStore? "#212121":"#27292d";
|
||||
if (index % 2 === 0) {
|
||||
bgColor = "#1f2023";
|
||||
bgColor = isSelectedDataStore? "#1A1A1A":"#1f2023";
|
||||
}
|
||||
|
||||
const validate = validateJson(data.value);
|
||||
@@ -460,16 +424,16 @@ const CacheView = (props) => {
|
||||
<ListItem key={index} style={{ backgroundColor: bgColor, maxHeight: 300, overflow: "auto", }}>
|
||||
<ListItemText
|
||||
style={{
|
||||
maxWidth: 250,
|
||||
minWidth: 250,
|
||||
maxWidth: 200,
|
||||
minWidth: 200,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
primary={data.key}
|
||||
/>
|
||||
<ListItemText
|
||||
style={{
|
||||
minWidth: 400,
|
||||
maxWidth: 400,
|
||||
minWidth: 300,
|
||||
maxWidth: 300,
|
||||
}}
|
||||
primary={validate.valid ?
|
||||
<ReactJson
|
||||
|
||||
@@ -659,7 +659,7 @@ const Files = (props) => {
|
||||
onClick={() => {
|
||||
upload.click();
|
||||
}}
|
||||
style={{backgroundColor: isSelectedFiles?'rgba(255, 132, 68, 0.2)':null, color:isSelectedFiles?"#FF8444":null, borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?162:null, height:isSelectedFiles?40:null}}
|
||||
style={{backgroundColor: isSelectedFiles?'rgba(255, 132, 68, 0.2)':null, color:isSelectedFiles?"#FF8444":null, borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?162:null, height:isSelectedFiles?40:null, boxShadow: isSelectedFiles?'none':null,}}
|
||||
>
|
||||
<PublishIcon /> Upload files
|
||||
</Button>
|
||||
@@ -679,7 +679,7 @@ const Files = (props) => {
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
style={{ marginLeft: 5, marginRight: 15, backgroundColor:isSelectedFiles?"#2F2F2F":null,borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?81:null, height:isSelectedFiles?40:null, }}
|
||||
style={{ marginLeft: 5, marginRight: 15, backgroundColor:isSelectedFiles?"#2F2F2F":null,borderRadius:isSelectedFiles?200:null, width:isSelectedFiles?81:null, height:isSelectedFiles?40:null, boxShadow: isSelectedFiles?'none':null, }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => getFiles()}
|
||||
@@ -814,7 +814,7 @@ const Files = (props) => {
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Md5"
|
||||
style={{ minWidth: 250, maxWidth: 250, overflow: "hidden" }}
|
||||
style={{ minWidth: isSelectedFiles?210:250, maxWidth: isSelectedFiles?210:250, overflow: "hidden" }}
|
||||
/>
|
||||
<ListItemText
|
||||
primary="Status"
|
||||
@@ -836,9 +836,9 @@ const Files = (props) => {
|
||||
return null;
|
||||
}
|
||||
|
||||
var bgColor = "#27292d";
|
||||
var bgColor = isSelectedFiles ? "#212121":"#27292d";
|
||||
if (index % 2 === 0) {
|
||||
bgColor = "#1f2023";
|
||||
bgColor = isSelectedFiles ? "#1A1A1A":"#1f2023";
|
||||
}
|
||||
|
||||
const filenamesplit = file.filename.split(".")
|
||||
@@ -855,8 +855,8 @@ const Files = (props) => {
|
||||
>
|
||||
<ListItemText
|
||||
style={{
|
||||
maxWidth: 225,
|
||||
minWidth: 225,
|
||||
maxWidth: isSelectedFiles ? 170:225,
|
||||
minWidth: isSelectedFiles ? 170:225,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
primary={new Date(file.updated_at * 1000).toISOString()}
|
||||
@@ -922,14 +922,16 @@ const Files = (props) => {
|
||||
minWidth: 100,
|
||||
maxWidth: 100,
|
||||
overflow: "hidden",
|
||||
textAlign: isSelectedFiles?"center":null
|
||||
}}
|
||||
/>
|
||||
<ListItemText
|
||||
primary={file.md5_sum}
|
||||
style={{
|
||||
minWidth: 300,
|
||||
maxWidth: 300,
|
||||
overflow: "hidden",
|
||||
minWidth: isSelectedFiles?200:300,
|
||||
maxWidth: isSelectedFiles?200:300,
|
||||
marginLeft:isSelectedFiles? 15:null,
|
||||
overflow: isSelectedFiles?"auto":"hidden",
|
||||
}}
|
||||
/>
|
||||
<ListItemText
|
||||
@@ -938,14 +940,16 @@ const Files = (props) => {
|
||||
minWidth: 75,
|
||||
maxWidth: 75,
|
||||
overflow: "hidden",
|
||||
textAlign:isSelectedFiles?"center":null,
|
||||
marginLeft: 10,
|
||||
}}
|
||||
/>
|
||||
<ListItemText
|
||||
primary={file.filesize}
|
||||
style={{
|
||||
minWidth: 125,
|
||||
maxWidth: 125,
|
||||
minWidth: isSelectedFiles?80:125,
|
||||
maxWidth: isSelectedFiles?80:125,
|
||||
marginLeft: isSelectedFiles?15:null,
|
||||
overflow: "hidden",
|
||||
}}
|
||||
/>
|
||||
@@ -1064,7 +1068,7 @@ const Files = (props) => {
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
title={"Delete file"}
|
||||
style={{marginLeft: 15, }}
|
||||
style={{marginLeft: isSelectedFiles?5:15, }}
|
||||
aria-label={"Delete"}
|
||||
>
|
||||
<span>
|
||||
|
||||
@@ -203,7 +203,7 @@ const Priorities = (props) => {
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: theme.palette.platformColor,
|
||||
width: notificationWidth,
|
||||
width: clickedFromOrgTab ? null :notificationWidth,
|
||||
padding: 30,
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
marginBottom: 20,
|
||||
@@ -312,7 +312,7 @@ const Priorities = (props) => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{maxWidth: clickedFromOrgTab ? 1030:1000, padding: clickedFromOrgTab ? 27:null, height: clickedFromOrgTab ? "auto":null, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null, }}>
|
||||
<div style={{width: clickedFromOrgTab ? 1030:1000, padding: clickedFromOrgTab ? 27:null, height: clickedFromOrgTab ? "auto":null, backgroundColor: clickedFromOrgTab ? '#212121':null, borderRadius: clickedFromOrgTab ? '16px':null, }}>
|
||||
<h2 style={{ display: clickedFromOrgTab ?null:"inline", marginBottom: clickedFromOrgTab ? 8:null, marginTop: clickedFromOrgTab ?0:null, color: clickedFromOrgTab ?"#ffffff":null }}>Suggestions</h2>
|
||||
<span style={{ color: clickedFromOrgTab ?"#9E9E9E":null,marginLeft: clickedFromOrgTab ?null:25 }}>
|
||||
Suggestions are tasks identified by Shuffle to help you discover ways to protect your and customers' company. <br/>These range from simple configurations in Shuffle to Usecases you may have missed.
|
||||
|
||||
@@ -147,7 +147,7 @@ const Priority = (props) => {
|
||||
}
|
||||
</div>
|
||||
<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
|
||||
<Button style={{height: 50, borderRadius: 25, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" :clickedFromOrgTab ?"#FF8444": "black", backgroundColor: priority.active === false ? theme.palette.inputColor :clickedFromOrgTab?"rgba(255, 132, 68, 0.2)":"rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
|
||||
<Button style={{height: 50, borderRadius: 25, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" :clickedFromOrgTab ?"#FF8444": "black", backgroundColor: priority.active === false ? theme.palette.inputColor :clickedFromOrgTab?"rgba(255, 132, 68, 0.2)":"rgba(255,255,255,0.8)", }} variant="contained" color="secondary" onClick={() => {
|
||||
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
@@ -173,7 +173,7 @@ const Priority = (props) => {
|
||||
Explore
|
||||
</Button>
|
||||
{priority.active === true ?
|
||||
<Button style={{borderRadius: 25, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
|
||||
<Button style={{borderRadius: 25, fontSize:16, boxShadow: clickedFromOrgTab ? "none":null,textTransform: clickedFromOrgTab ? 'capitalize':null, width: 100, height: 50, marginTop: 8, }} variant="text" color="secondary" onClick={() => {
|
||||
// dismiss -> get envs
|
||||
changeRecommendation(priority, "dismiss")
|
||||
}}>
|
||||
|
||||
Reference in New Issue
Block a user