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

New 1.4.0 page view looks and bugfixes

Browse Source
This commit is contained in:
Frikky
2024-04-29 14:37:26 +02:00
parent 455c4a46ab
commit 74e90a083e
8 changed files with 2302 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/AppGrid.jsx
+1969 -331
View File
File diff suppressed because it is too large Load Diff
frontend/src/components/Billing.jsx
+13 -5
View File
@@ -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&nbsp;
<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
frontend/src/components/Branding.jsx
+2 -2
View File
@@ -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 }}>
frontend/src/components/CacheView.jsx
+12 -48
View File
@@ -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
frontend/src/components/Files.jsx
+17 -13
View File
@@ -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>
frontend/src/components/Priorities.jsx
+2 -2
View File
@@ -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.&nbsp;
frontend/src/components/Priority.jsx
+2 -2
View File
@@ -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")
}}>
frontend/src/views/Search.jsx
+285 -175
View File
@@ -1,206 +1,316 @@
import React, { useState, useEffect } from "react";
import React, { useState, useEffect, useMemo } from "react";
import theme from '../theme.jsx';
import theme from "../theme.jsx";
import { isMobile } from "react-device-detect";
import AppGrid from "../components/AppGrid.jsx"
import WorkflowGrid from "../components/WorkflowGrid.jsx"
import CreatorGrid from "../components/CreatorGrid.jsx"
import DocsGrid from "../components/DocsGrid.jsx"
import DiscordChat from "../components/DiscordChat.jsx";
import AppGrid from "../components/AppGrid.jsx";
import WorkflowGrid from "../components/WorkflowGrid.jsx";
import CreatorGrid from "../components/CreatorGrid.jsx";
import DocsGrid from "../components/DocsGrid.jsx";
import { useNavigate } from "react-router-dom";
import Typography from "@material-ui/core/Typography";
import { Tabs, Tab, setRef } from "@mui/material";
import { styled } from "@mui/material/styles";
import { makeStyles } from '@mui/styles';
import DiscordChat from "../components/DiscordChat.jsx";
import {
Tabs,
Tab,
} from "@mui/material";
import {
Apps as AppsIcon,
Code as CodeIcon,
Chat as ChatIcon,
EmojiObjects as EmojiObjectsIcon,
Description as DescriptionIcon,
Apps as AppsIcon,
Code as CodeIcon,
EmojiObjects as EmojiObjectsIcon,
Chat as ChatIcon,
BorderBottom,
} from "@mui/icons-material";
import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
// Should be different if logged in :|
const Search = (props) => {
const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader } = props;
let navigate = useNavigate();
const { globalUrl, isLoaded, serverside, userdata, hidemargins, isHeader } =
props;
let navigate = useNavigate();
const [curTab, setCurTab] = useState(0);
const iconStyle = { marginRight: isHeader ? null : 10 };
const [curTab, setCurTab] = useState(0);
const iconStyle = { marginRight: isHeader ? null : 10 };
useEffect(() => {
if (serverside !== true && window.location.search !== undefined && window.location.search !== null) {
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundTab = params["tab"]
if (foundTab !== null && foundTab !== undefined) {
for (var key in Object.keys(views)) {
const value = views[key]
console.log(key, value)
if (value === foundTab) {
setConfig("", key)
break
}
}
}
}
}, [])
useEffect(() => {
if (
serverside !== true &&
window.location.search !== undefined &&
window.location.search !== null
) {
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const foundTab = params["tab"];
if (foundTab !== null && foundTab !== undefined) {
for (var key in Object.keys(views)) {
const value = views[key];
console.log(key, value);
if (value === foundTab) {
setConfig("", key);
break;
}
}
}
}
}, []);
if (serverside === true) {
return null
}
//Stop unnecessariry re-rendering of the component to improve performace
const MemoizedAppGrid = useMemo(() => <AppGrid
maxRows={4}
isHeader={true}
showSuggestion={true}
globalUrl={globalUrl}
isMobile={isMobile}
userdata={userdata}
/>, [curTab]);
const bodyDivStyle = {
margin: "auto",
maxWidth: 1024,
scrollX: "hidden",
overflowX: "hidden",
justifyContent: isHeader ? "center" : null,
}
const MemoizedWorkflowGrid = useMemo(() => <WorkflowGrid
maxRows={3}
showSuggestion={true}
globalUrl={globalUrl}
isMobile={isMobile}
userdata={userdata}
/>, [curTab]);
const boxStyle = {
color: "white",
flex: "1",
marginLeft: isHeader ? null : 10,
marginRight: isHeader ? null : 10,
paddingLeft: isHeader ? null : 30,
paddingRight: isHeader ? null : 30,
paddingBottom: isHeader ? null : 30,
paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
display: "flex",
flexDirection: "column",
overflowX: "hidden",
minHeight: 400,
}
const MemoizedDocsGrid = useMemo(() => <DocsGrid
maxRows={6}
parsedXs={12}
showSuggestion={true}
globalUrl={globalUrl}
isMobile={isMobile}
userdata={userdata}
/>, [curTab]);
const views = {
0: "apps",
1: "workflows",
2: "docs",
3: "creators",
4: "discord",
}
const MemoizedCreatorGrid = useMemo(() => <CreatorGrid
parsedXs={4}
isHeader={true}
showSuggestion={true}
globalUrl={globalUrl}
isMobile={isMobile}
userdata={userdata}
/>, [curTab]);
const setConfig = (event, inputValue) => {
const newValue = parseInt(inputValue)
const MemoizedDiscordChat = useMemo(() => <DiscordChat isMobile={isMobile} />)
setCurTab(newValue)
if (newValue === 0) {
document.title = "Shuffle - search - apps";
} else if (newValue === 1) {
document.title = "Shuffle - search - workflows";
} else if (newValue === 2) {
document.title = "Shuffle - search - documentation";
} else if (newValue === 3) {
document.title = "Shuffle - search - creators";
} else if (newValue === 4) {
document.title = "Shuffle - search - Discord Chat";
}else {
document.title = "Shuffle - search";
}
const useStyles = makeStyles({
hideIndicator: {
display: 'none',
},
customTab: {
justifyContent: 'center',
gap: '46px',
}
});
const classes = useStyles();
if (serverside === true) {
return null;
}
const urlSearchParams = new URLSearchParams(window.location.search)
const params = Object.fromEntries(urlSearchParams.entries())
const foundQuery = params["q"]
var extraQ = ""
if (foundQuery !== null && foundQuery !== undefined) {
extraQ = "&q=" + foundQuery
}
const bodyDivStyle = {
margin: "auto",
maxWidth: "100%",
scrollX: "hidden",
overflowX: "hidden",
justifyContent: isHeader ? "center" : null,
};
const boxStyle = {
color: "white",
flex: "1",
marginLeft: isHeader ? null : 10,
marginRight: isHeader ? null : 10,
paddingLeft: isHeader ? null : 30,
paddingRight: isHeader ? null : 30,
paddingBottom: isHeader ? null : 30,
paddingTop: hidemargins === true ? 0 : isHeader ? null : 30,
display: "flex",
flexDirection: "column",
overflowX: "hidden",
width: "100%",
minHeight: 400,
};
if ((serverside === false || serverside === undefined) && window.location.pathname.includes("/search")) {
navigate(`/search?tab=${views[newValue]}` + extraQ)
}
}
const views = {
0: "apps",
1: "workflows",
2: "docs",
3: "creators",
};
const setConfig = (event, inputValue) => {
const newValue = parseInt(inputValue);
if (isLoaded === false) {
return null
}
setCurTab(newValue);
if (newValue === 0) {
document.title = "Shuffle - search - apps";
} else if (newValue === 1) {
document.title = "Shuffle - search - workflows";
} else if (newValue === 2) {
document.title = "Shuffle - search - documentation";
} else if (newValue === 3) {
document.title = "Shuffle - search - creators";
} else {
document.title = "Shuffle - search";
}
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
const foundQuery = params["q"];
var extraQ = "";
if (foundQuery !== null && foundQuery !== undefined) {
extraQ = "&q=" + foundQuery;
}
// Random names for type & autoComplete. Didn't research :^)
const landingpageDataBrowser =
<div style={{ paddingBottom: hidemargins === true ? 0 : 100, color: "white", }}>
<div style={boxStyle}>
<Tabs
style={{ width: isHeader ? 765 : 610, margin: isHeader ? null : "auto", marginTop: hidemargins === true ? 0 : isHeader ? null : 25, }}
value={curTab}
indicatorColor="primary"
textColor="secondary"
onChange={setConfig}
aria-label="disabled tabs example"
variant="scrollable"
scrollButtons="auto"
>
<Tab
label=<span>
<AppsIcon style={iconStyle} /> Apps
</span>
/>
<Tab
label=<span>
<CodeIcon style={iconStyle} /> Workflows
</span>
/>
<Tab
label=<span>
<DescriptionIcon style={iconStyle} /> Docs
</span>
/>
<Tab
label=<span>
<EmojiObjectsIcon style={iconStyle} /> Creators
</span>
/>
<Tab
label=<span>
<ChatIcon style={iconStyle} /> Discord Chat
</span>
/>
if (
(serverside === false || serverside === undefined) &&
window.location.pathname.includes("/search")
) {
navigate(`/search?tab=${views[newValue]}` + extraQ);
}
};
</Tabs>
{curTab === 0 ?
<AppGrid maxRows={3} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
curTab === 1 ?
window.location.pathname === "/search" ?
<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
<WorkflowGrid maxRows={3} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
curTab === 2 ?
<DocsGrid maxRows={6} parsedXs={12} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
curTab === 3 ?
<CreatorGrid parsedXs={4} isHeader={true} showSuggestion={true} globalUrl={globalUrl} isMobile={isMobile} userdata={userdata} />
:
curTab === 4 ?
<DiscordChat isMobile={isMobile} />
:
if (isLoaded === false) {
return null;
}
null}
</div>
</div>
//{/*alternativeView={true} />*/}
const StyledTab = styled(Tab)(({ theme }) => ({
width: 151,
height: 51,
padding: "10px 20px",
borderRadius: 8,
fontWeight: 600,
textTransform: "none",
border: 'none',
"&.Mui-selected": {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
"& .MuiSvgIcon-root": {
color: theme.palette.common.white,
},
},
}));
const loadedCheck = isLoaded ?
<div>
<div style={bodyDivStyle}>{landingpageDataBrowser}</div>
</div>
:
<div>
</div>
const tabSpanStyling = {
display: 'flex',
flexDirection: 'row',
alignItems: 'center'
}
// #1f2023?
return (
<div style={{}}>
{loadedCheck}
</div>
)
}
const tabTextStyling = {
marginLeft: '5px',
color: 'white'
}
// Random names for type & autoComplete. Didn't research :^)
const landingpageDataBrowser = (
<div
style={{
paddingBottom: hidemargins === true ? 0 : 100,
color: "white",
width: "100%",
}}
>
<div style={boxStyle}>
<Tabs
style={{
width: 741,
margin: isHeader ? null : "auto",
marginTop: hidemargins === true ? 0 : isHeader ? null : 25,
backgroundColor: "rgba(33, 33, 33, 1)",
borderRadius:8
}}
value={curTab}
indicatorColor="primary"
textColor="secondary"
onChange={setConfig}
aria-label="disabled tabs example"
variant="scrollable"
scrollButtons="auto"
classes={{indicator: classes.hideIndicator, root: classes.customTab}}
>
<StyledTab
style={{
backgroundColor: curTab === 0 ? theme.palette.primary.main : 'inherit',
color: curTab === 0? theme.palette.common.white : 'inherit',
}}
label={
<span style={tabSpanStyling}>
<AppsIcon style={iconStyle} />
<Typography variant="body1" style={tabTextStyling}>App</Typography>
</span>
}
/>
<StyledTab
style={{
backgroundColor: curTab ===1 ? theme.palette.primary.main : 'inherit',
color: curTab === 1? theme.palette.common.white : 'inherit',
}}
label={
<span style={tabSpanStyling}>
<CodeIcon style={iconStyle} />
<Typography variant="body1" style={tabTextStyling}>Workflow</Typography>
</span>
}
/>
<StyledTab
style={{
backgroundColor: curTab === 2 ? theme.palette.primary.main : 'inherit',
color: curTab === 2? theme.palette.common.white : 'inherit',
}}
label={
<span style={tabSpanStyling}>
<DescriptionOutlinedIcon style={iconStyle} />
<Typography variant="body1" style={tabTextStyling}>Docs</Typography>
</span>
}
/>
<StyledTab
style={{
backgroundColor: curTab === 3 ? theme.palette.primary.main : 'inherit',
color: curTab === 3 ? theme.palette.common.white : 'inherit'
}}
label={
<span style={tabSpanStyling}>
<PeopleAltOutlinedIcon style={iconStyle} />
<Typography variant="body1" style={tabTextStyling}>Creators</Typography>
</span>
}
/>
<StyledTab
style={{
backgroundColor: curTab === 4 ? theme.palette.primary.main : 'inherit',
color: curTab === 4 ? theme.palette.common.white : 'inherit'
}}
label={
<span style={tabSpanStyling}>
<ChatIcon style={iconStyle} />
<Typography variant="body1" style={{tabTextStyling, whiteSpace: "nowrap", color: "white"}}>Discord Chat</Typography>
</span>
}
/>
</Tabs>
{curTab === 0 && MemoizedAppGrid}
{curTab === 1 && MemoizedWorkflowGrid}
{curTab === 2 && MemoizedDocsGrid}
{curTab === 3 && MemoizedCreatorGrid}
{curTab === 4 && MemoizedDiscordChat}
</div>
</div>
);
//{/*alternativeView={true} />*/}
const loadedCheck = isLoaded ? (
<div>
<div style={bodyDivStyle}>{landingpageDataBrowser}</div>
</div>
) : (
<div></div>
);
// #1f2023?
return <div style={{}}>{loadedCheck}</div>;
};
export default Search;