Mui update done :3
This commit is contained in:
Frikky
@@ -29,7 +29,7 @@ import LoginPage from "./views/LoginPage";
|
||||
import SettingsPage from "./views/SettingsPage";
|
||||
import KeepAlive from "./views/KeepAlive.jsx";
|
||||
|
||||
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
|
||||
import { ThemeProvider } from "@mui/material/styles";
|
||||
|
||||
import UpdateAuthentication from "./views/UpdateAuthentication.jsx";
|
||||
import FrameworkWrapper from "./views/FrameworkWrapper.jsx";
|
||||
@@ -666,11 +666,8 @@ const App = (message, props) => {
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
// <div style={{backgroundColor: "rgba(21, 32, 43, 1)", color: "#fffff", minHeight: "100vh"}}>
|
||||
// backgroundColor: "#213243",
|
||||
// This is a mess hahahah
|
||||
return (
|
||||
<MuiThemeProvider theme={theme}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<CookiesProvider>
|
||||
<BrowserRouter>
|
||||
<Provider template={AlertTemplate} {...options}>
|
||||
@@ -678,7 +675,7 @@ const App = (message, props) => {
|
||||
</Provider>
|
||||
</BrowserRouter>
|
||||
</CookiesProvider>
|
||||
</MuiThemeProvider>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,377 +0,0 @@
|
||||
import React, {useEffect, useState} from 'react';
|
||||
|
||||
import ReactGA from 'react-ga4';
|
||||
import { useTheme } from '@material-ui/core/styles';
|
||||
import {Link} from 'react-router-dom';
|
||||
|
||||
import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
|
||||
|
||||
import algoliasearch from 'algoliasearch/lite';
|
||||
import { InstantSearch, Configure, connectSearchBox, connectHits, connectHitInsights } from 'react-instantsearch-dom';
|
||||
|
||||
import aa from 'search-insights'
|
||||
|
||||
import {
|
||||
Zoom,
|
||||
Grid,
|
||||
Paper,
|
||||
TextField,
|
||||
ButtonBase,
|
||||
InputAdornment,
|
||||
Typography,
|
||||
Button,
|
||||
Tooltip
|
||||
} from '@material-ui/core';
|
||||
|
||||
const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
|
||||
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
|
||||
const AppGrid1 = props => {
|
||||
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs, userdata, searchValue } = props
|
||||
|
||||
const isCloud =
|
||||
window.location.host === "localhost:3000" ||
|
||||
window.location.host === "shuffler.io";
|
||||
|
||||
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 2 : parsedXs
|
||||
const theme = useTheme();
|
||||
//const [apps, setApps] = React.useState([]);
|
||||
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||
const [formMail, setFormMail] = React.useState("");
|
||||
const [message, setMessage] = React.useState("");
|
||||
const [formMessage, setFormMessage] = React.useState("");
|
||||
|
||||
const buttonStyle = {borderRadius: 30, height: 50, width: 220, margin: isMobile ? "15px auto 15px auto" : 20, fontSize: 18,}
|
||||
|
||||
const innerColor = "rgba(255,255,255,0.65)"
|
||||
const borderRadius = 3
|
||||
window.title = "Shuffle | Apps | Find and integrate any app"
|
||||
|
||||
const submitContact = (email, message) => {
|
||||
const data = {
|
||||
"firstname": "",
|
||||
"lastname": "",
|
||||
"title": "",
|
||||
"companyname": "",
|
||||
"email": email,
|
||||
"phone": "",
|
||||
"message": message,
|
||||
}
|
||||
|
||||
const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
|
||||
|
||||
fetch(globalUrl+"/api/v1/contact", {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(response => {
|
||||
if (response.success === true) {
|
||||
setFormMessage(response.reason)
|
||||
//alert.info("Thanks for submitting!")
|
||||
} else {
|
||||
setFormMessage(errorMessage)
|
||||
}
|
||||
|
||||
setFormMail("")
|
||||
setMessage("")
|
||||
})
|
||||
.catch(error => {
|
||||
setFormMessage(errorMessage)
|
||||
console.log(error)
|
||||
});
|
||||
}
|
||||
|
||||
const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {
|
||||
|
||||
useEffect(() => {
|
||||
if (window !== undefined && window.location !== undefined && window.location.search !== undefined && window.location.search !== null) {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
const params = Object.fromEntries(urlSearchParams.entries())
|
||||
const foundQuery = {searchValue}
|
||||
if (foundQuery !== null && foundQuery !== undefined) {
|
||||
console.log("Got query: ", foundQuery)
|
||||
refine(foundQuery)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<form noValidate action="" role="search">
|
||||
<input
|
||||
fullWidth
|
||||
style={{backgroundColor: theme.palette.inputColor, borderRadius: borderRadius, margin: 10, width: "100%",}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
fontSize: "1em",
|
||||
height: 50,
|
||||
},
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon style={{marginLeft: 5}}/>
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
autoComplete='off'
|
||||
type="hidden"
|
||||
color="primary"
|
||||
defaultValue={currentRefinement}
|
||||
placeholder="Find Apps..."
|
||||
id="shuffle_search_field"
|
||||
onChange={(event) => {
|
||||
refine(event.currentTarget.value)
|
||||
}}
|
||||
limit={5}
|
||||
/>
|
||||
{/*isSearchStalled ? 'My search is stalled' : ''*/}
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
||||
var workflowDelay = -50
|
||||
const Hits = ({ hits, insights }) => {
|
||||
const [mouseHoverIndex, setMouseHoverIndex] = useState(-1)
|
||||
var counted = 0
|
||||
|
||||
//console.log(hits)
|
||||
//var curhits = hits
|
||||
//if (hits.length > 0 && defaultApps.length === 0) {
|
||||
// setDefaultApps(hits)
|
||||
//}
|
||||
|
||||
//const [defaultApps, setDefaultApps] = React.useState([])
|
||||
//console.log(hits)
|
||||
//if (hits.length > 0 && hits.length !== innerHits.length) {
|
||||
// setInnerHits(hits)
|
||||
//}
|
||||
|
||||
return (
|
||||
<Grid container spacing={2}>
|
||||
{hits.map((data, index) => {
|
||||
|
||||
workflowDelay += 50
|
||||
|
||||
const paperStyle = {
|
||||
backgroundColor: index === mouseHoverIndex ? "rgba(255,255,255,0.8)" : theme.palette.inputColor,
|
||||
color: index === mouseHoverIndex ? theme.palette.inputColor : "rgba(255,255,255,0.8)",
|
||||
border: `1px solid ${innerColor}`,
|
||||
padding: 15,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
minHeight: 116,
|
||||
}
|
||||
|
||||
if (counted === 12/xs*rowHandler) {
|
||||
return null
|
||||
}
|
||||
|
||||
counted += 1
|
||||
var parsedname = ""
|
||||
for (var key = 0; key < data.name.length; key++) {
|
||||
var character = data.name.charAt(key)
|
||||
if (character === character.toUpperCase()) {
|
||||
//console.log(data.name[key], data.name[key+1])
|
||||
if (data.name.charAt(key+1) !== undefined && data.name.charAt(key+1) === data.name.charAt(key+1).toUpperCase()) {
|
||||
} else {
|
||||
parsedname += " "
|
||||
}
|
||||
}
|
||||
|
||||
parsedname += character
|
||||
}
|
||||
|
||||
parsedname = (parsedname.charAt(0).toUpperCase()+parsedname.substring(1)).replaceAll("_", " ")
|
||||
|
||||
return (
|
||||
<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
|
||||
<Grid item xs={xs} key={index}>
|
||||
<Link to={`/apps/${data.objectID}?queryID=${data.__queryID}`} style={{textDecoration: "none", color: "#f85a3e"}}>
|
||||
<Paper elevation={0} style={paperStyle} onMouseOver={() => {
|
||||
setMouseHoverIndex(index)
|
||||
/*
|
||||
ReactGA.event({
|
||||
category: "app_grid_view",
|
||||
action: `search_bar_click`,
|
||||
label: "",
|
||||
})
|
||||
*/
|
||||
}} onMouseOut={() => {
|
||||
setMouseHoverIndex(-1)
|
||||
}} onClick={() => {
|
||||
if (isCloud) {
|
||||
ReactGA.event({
|
||||
category: "app_grid_view",
|
||||
action: `app_${parsedname}_${data.id}_click`,
|
||||
label: "",
|
||||
})
|
||||
}
|
||||
|
||||
//const searchClient = algoliasearch("L55H18ZINA", "a19be455e7e75ee8f20a93d26b9fc6d6")
|
||||
console.log(searchClient)
|
||||
aa('init', {
|
||||
appId: searchClient.appId,
|
||||
apiKey: searchClient.transporter.queryParameters["x-algolia-api-key"]
|
||||
})
|
||||
|
||||
const timestamp = new Date().getTime()
|
||||
aa('sendEvents', [
|
||||
{
|
||||
eventType: 'click',
|
||||
eventName: 'Product Clicked',
|
||||
index: 'appsearch',
|
||||
objectIDs: [data.objectID],
|
||||
timestamp: timestamp,
|
||||
queryID: data.__queryID,
|
||||
positions: [data.__position],
|
||||
userToken: userdata === undefined || userdata === null || userdata.id === undefined ? "unauthenticated" : userdata.id,
|
||||
}
|
||||
])
|
||||
|
||||
}}>
|
||||
<ButtonBase style={{padding: 5, borderRadius: 3, minHeight: 100, minWidth: 100,}}>
|
||||
<img alt={data.name} src={data.image_url} style={{width: "100%", maxWidth: 100, minWidth: 100, minHeight: 100, maxHeight: 100, display: "block", margin: "0 auto"}} />
|
||||
</ButtonBase>
|
||||
<div/>
|
||||
{index === mouseHoverIndex || showName === true ?
|
||||
parsedname
|
||||
:
|
||||
null
|
||||
}
|
||||
{data.generated ?
|
||||
<Tooltip title={"Created with App editor"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
|
||||
{data.invalid ?
|
||||
<CloudQueueIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: theme.palette.primary.main }}/>
|
||||
:
|
||||
<CloudQueueIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: "rgba(255,255,255,0.95)",}}/>
|
||||
}
|
||||
</Tooltip>
|
||||
:
|
||||
<Tooltip title={"Created with python (custom app)"} style={{marginTop: "28px", width: "100%"}} aria-label={data.name}>
|
||||
<CodeIcon style={{position: "absolute", top: 1, left: 3, height: 16, width: 16, color: "rgba(255,255,255,0.95)",}}/>
|
||||
</Tooltip>
|
||||
}
|
||||
</Paper>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Zoom>
|
||||
)
|
||||
})}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
||||
const CustomSearchBox = connectSearchBox(SearchBox)
|
||||
const CustomHits = connectHits(Hits)
|
||||
//const CustomHits = connectHitInsights(aa)(Hits)
|
||||
const selectButtonStyle = {
|
||||
minWidth: 150,
|
||||
maxWidth: 150,
|
||||
minHeight: 50,
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{width: "100%", textAlign: "center", position: "relative", height: "100%", display: "flex"}}>
|
||||
{/*
|
||||
<div style={{padding: 10, }}>
|
||||
<Button
|
||||
style={selectButtonStyle}
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
const searchField = document.createElement("shuffle_search_field")
|
||||
console.log("Field: ", searchField)
|
||||
if (searchField !== null & searchField !== undefined) {
|
||||
console.log("Set field.")
|
||||
searchField.value = "WHAT WABALABA"
|
||||
searchField.setAttribute("value", "WHAT WABALABA")
|
||||
}
|
||||
}}
|
||||
>
|
||||
Cases
|
||||
</Button>
|
||||
</div>
|
||||
*/}
|
||||
<div style={{width: "100%", position: "relative", height: "100%",}}>
|
||||
<InstantSearch searchClient={searchClient} indexName="appsearch">
|
||||
<div style={{maxWidth: 450, margin: "auto", marginTop: 15, marginBottom: 15, }}>
|
||||
<CustomSearchBox />
|
||||
</div>
|
||||
<CustomHits hitsPerPage={5}/>
|
||||
<Configure clickAnalytics />
|
||||
</InstantSearch>
|
||||
{showSuggestion === true ?
|
||||
<div style={{paddingTop: 0, maxWidth: isMobile ? "100%" : "60%", margin: "auto"}}>
|
||||
<Typography variant="h6" style={{color: "white", marginTop: 50,}}>
|
||||
Can't find what you're looking for?
|
||||
</Typography>
|
||||
<div style={{flex: "1", display: "flex", flexDirection: "row", textAlign: "center",}}>
|
||||
<TextField
|
||||
required
|
||||
style={{flex: "1", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "#ffffff",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
fullWidth={true}
|
||||
placeholder="Email (optional)"
|
||||
type="email"
|
||||
id="email-handler"
|
||||
autoComplete="email"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
onChange={e => setFormMail(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
required
|
||||
style={{flex: "1", backgroundColor: theme.palette.inputColor}}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "#ffffff",
|
||||
},
|
||||
}}
|
||||
color="primary"
|
||||
fullWidth={true}
|
||||
placeholder="What apps do you want to see?"
|
||||
type=""
|
||||
id="standard-required"
|
||||
margin="normal"
|
||||
variant="outlined"
|
||||
autoComplete="off"
|
||||
onChange={e => setMessage(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
style={buttonStyle}
|
||||
disabled={message.length === 0}
|
||||
onClick={() => {
|
||||
submitContact(formMail, message)
|
||||
}}
|
||||
>
|
||||
Submit
|
||||
</Button>
|
||||
<Typography style={{color: "white"}} variant="body2">{formMessage}</Typography>
|
||||
</div>
|
||||
: null
|
||||
}
|
||||
|
||||
<span style={{position: "absolute", display: "flex", textAlign: "right", float: "right", right: 0, bottom: 120, }}>
|
||||
<Typography variant="body2" color="textSecondary" style={{}}>
|
||||
Search by
|
||||
</Typography>
|
||||
<a rel="noopener noreferrer" href="https://www.algolia.com/" target="_blank" style={{textDecoration: "none", color: "white"}}>
|
||||
<img src={"/images/logo-algolia-nebula-blue-full.svg"} alt="Algolia logo" style={{height: 17, marginLeft: 5, marginTop: 3,}} />
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AppGrid1;
|
||||
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
|
||||
|
||||
import ReactGA from 'react-ga4';
|
||||
import {Link} from 'react-router-dom';
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import {
|
||||
SkipNext as SkipNextIcon,
|
||||
@@ -40,7 +41,6 @@ const CreatorGrid = props => {
|
||||
const { maxRows, showName, showSuggestion, isMobile, globalUrl, parsedXs } = props
|
||||
const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
|
||||
const xs = parsedXs === undefined || parsedXs === null ? isMobile ? 6 : 4 : parsedXs
|
||||
const theme = useTheme();
|
||||
//const [apps, setApps] = React.useState([]);
|
||||
//const [filteredApps, setFilteredApps] = React.useState([]);
|
||||
const [formMail, setFormMail] = React.useState("");
|
||||
|
||||
@@ -1,883 +0,0 @@
|
||||
import React, { useState } from "react";
|
||||
import { BrowserView, MobileView } from "react-device-detect";
|
||||
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { useTheme } from "@material-ui/core/styles";
|
||||
|
||||
import {
|
||||
Chip,
|
||||
Badge,
|
||||
Typography,
|
||||
Paper,
|
||||
Tooltip,
|
||||
List,
|
||||
Avatar,
|
||||
Menu,
|
||||
ListItem,
|
||||
MenuItem,
|
||||
Select,
|
||||
Button,
|
||||
IconButton,
|
||||
Grid,
|
||||
} from "@material-ui/core";
|
||||
|
||||
import {
|
||||
MeetingRoom as MeetingRoomIcon,
|
||||
Settings as SettingsIcon,
|
||||
Notifications as NotificationsIcon,
|
||||
Home as HomeIcon,
|
||||
Polymer as PolymerIcon,
|
||||
Apps as AppsIcon,
|
||||
Description as DescriptionIcon,
|
||||
HelpOutline as HelpOutlineIcon,
|
||||
} from "@material-ui/icons";
|
||||
|
||||
import {
|
||||
Analytics as AnalyticsIcon,
|
||||
Lightbulb as LightbulbIcon,
|
||||
} from "@mui/icons-material";
|
||||
//import LogoutIcon from '@mui/icons-material/Logout';
|
||||
import { useAlert } from "react-alert";
|
||||
import SearchField from '../components/Searchfield'
|
||||
|
||||
const hoverColor = "#f85a3e";
|
||||
const hoverOutColor = "#e8eaf6";
|
||||
|
||||
const Header = (props) => {
|
||||
const {
|
||||
globalUrl,
|
||||
setNotifications,
|
||||
notifications,
|
||||
isLoggedIn,
|
||||
removeCookie,
|
||||
homePage,
|
||||
isLoaded,
|
||||
userdata,
|
||||
cookies,
|
||||
} = props;
|
||||
const theme = useTheme();
|
||||
|
||||
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
|
||||
const [SoarHoverColor, setSoarHoverColor] = useState(hoverOutColor);
|
||||
const [LoginHoverColor, setLoginHoverColor] = useState(hoverOutColor);
|
||||
const [DocsHoverColor, setDocsHoverColor] = useState(hoverOutColor);
|
||||
const [HelpHoverColor, setHelpHoverColor] = useState(hoverOutColor);
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
|
||||
const alert = useAlert();
|
||||
|
||||
const hrefStyle = {
|
||||
color: hoverOutColor,
|
||||
textDecoration: "none",
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
setAnchorElAvatar(null);
|
||||
};
|
||||
|
||||
const clearNotifications = () => {
|
||||
// Don't really care about the logout
|
||||
fetch(`${globalUrl}/api/v1/notifications/clear`, {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.status !== 200) {
|
||||
console.log("Error in response");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then(function (responseJson) {
|
||||
if (responseJson.success === true) {
|
||||
setNotifications([]);
|
||||
handleClose();
|
||||
} else {
|
||||
alert.error(
|
||||
"Failed dismissing notifications. Please try again later."
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error in notification dismissal: ", error);
|
||||
//removeCookie("session_token", {path: "/"})
|
||||
});
|
||||
};
|
||||
|
||||
const dismissNotification = (alert_id) => {
|
||||
// Don't really care about the logout
|
||||
fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, {
|
||||
credentials: "include",
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.status !== 200) {
|
||||
console.log("Error in response");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then(function (responseJson) {
|
||||
if (responseJson.success === true) {
|
||||
const newNotifications = notifications.filter(
|
||||
(data) => data.id !== alert_id
|
||||
);
|
||||
console.log("NEW NOTIFICATIONS: ", newNotifications);
|
||||
setNotifications(newNotifications);
|
||||
} else {
|
||||
alert.error(
|
||||
"Failed dismissing notification. Please try again later."
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error in notification dismissal: ", error);
|
||||
//removeCookie("session_token", {path: "/"})
|
||||
});
|
||||
};
|
||||
|
||||
// DEBUG HERE
|
||||
const handleClickLogout = () => {
|
||||
console.log("COOKIES: ", cookies, "Remover: ", removeCookie);
|
||||
// Don't really care about the logout
|
||||
fetch(globalUrl + "/api/v1/logout", {
|
||||
credentials: "include",
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
// Log out anyway
|
||||
//cookies.remove("session_token")
|
||||
//window.location.pathname = "/"
|
||||
console.log("Should've logged out");
|
||||
removeCookie("session_token", { path: "/" });
|
||||
removeCookie("session_token", { path: "/workflows" });
|
||||
window.location.reload();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Error in logout: ", error);
|
||||
removeCookie("session_token", { path: "/" });
|
||||
window.location.reload();
|
||||
//removeCookie("session_token", {path: "/"})
|
||||
});
|
||||
};
|
||||
|
||||
const handleClickChangeOrg = (orgId) => {
|
||||
// Don't really care about the logout
|
||||
//name: org.name,
|
||||
//orgId = "asd"
|
||||
const data = {
|
||||
org_id: orgId,
|
||||
};
|
||||
|
||||
localStorage.setItem("getting_started_sidebar", "open");
|
||||
|
||||
fetch(`${globalUrl}/api/v1/orgs/${orgId}/change`, {
|
||||
mode: "cors",
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
credentials: "include",
|
||||
crossDomain: true,
|
||||
withCredentials: true,
|
||||
headers: {
|
||||
"Content-Type": "application/json; charset=utf-8",
|
||||
},
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.status !== 200) {
|
||||
console.log("Error in response");
|
||||
}
|
||||
|
||||
return response.json();
|
||||
})
|
||||
.then(function (responseJson) {
|
||||
if (responseJson.success !== undefined && responseJson.success) {
|
||||
setTimeout(() => {
|
||||
window.location.reload();
|
||||
}, 2000);
|
||||
alert.success(
|
||||
"Successfully changed active organization - refreshing!"
|
||||
);
|
||||
} else {
|
||||
alert.error("Failed changing org: ", responseJson.reason);
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("error changing: ", error);
|
||||
//removeCookie("session_token", {path: "/"})
|
||||
});
|
||||
};
|
||||
|
||||
// Rofl this is weird
|
||||
const handleDocsHover = () => {
|
||||
setDocsHoverColor(hoverColor);
|
||||
};
|
||||
|
||||
const handleDocsHoverOut = () => {
|
||||
setDocsHoverColor(hoverOutColor);
|
||||
};
|
||||
|
||||
const handleHomeHover = () => {
|
||||
setHomeHoverColor(hoverColor);
|
||||
};
|
||||
|
||||
const handleHelpHover = () => {
|
||||
setHelpHoverColor(hoverColor);
|
||||
};
|
||||
|
||||
const handleHelpHoverOut = () => {
|
||||
setHelpHoverColor(hoverOutColor);
|
||||
};
|
||||
|
||||
const handleSoarHover = () => {
|
||||
setSoarHoverColor(hoverColor);
|
||||
};
|
||||
|
||||
const handleSoarHoverOut = () => {
|
||||
setSoarHoverColor(hoverOutColor);
|
||||
};
|
||||
|
||||
const handleHomeHoverOut = () => {
|
||||
setHomeHoverColor(hoverOutColor);
|
||||
};
|
||||
|
||||
const handleLoginHover = () => {
|
||||
setLoginHoverColor(hoverColor);
|
||||
};
|
||||
|
||||
const handleLoginHoverOut = () => {
|
||||
setLoginHoverColor(hoverOutColor);
|
||||
};
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const chipStyle = {
|
||||
backgroundColor: "#3d3f43",
|
||||
height: 30,
|
||||
marginRight: 5,
|
||||
paddingLeft: 5,
|
||||
paddingRight: 5,
|
||||
height: 28,
|
||||
cursor: "pointer",
|
||||
borderColor: "#3d3f43",
|
||||
color: "white",
|
||||
};
|
||||
|
||||
const notificationWidth = 350;
|
||||
const NotificationItem = (props) => {
|
||||
const { data } = props;
|
||||
|
||||
return (
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
width: notificationWidth,
|
||||
padding: 25,
|
||||
borderBottom: "1px solid rgba(255,255,255,0.4)",
|
||||
}}
|
||||
>
|
||||
{/*<Typography variant="h6">
|
||||
{new Date(data.updated_at).toISOString()}
|
||||
</Typography >*/}
|
||||
{data.reference_url !== undefined &&
|
||||
data.reference_url !== null &&
|
||||
data.reference_url.length > 0 ? (
|
||||
<Link
|
||||
to={data.reference_url}
|
||||
style={{ color: "#f86a3e", textDecoration: "none" }}
|
||||
>
|
||||
<Typography variant="h6">{data.title}</Typography>
|
||||
</Link>
|
||||
) : (
|
||||
<Typography variant="h6">{data.title}</Typography>
|
||||
)}
|
||||
|
||||
{data.image !== undefined &&
|
||||
data.image !== null &&
|
||||
data.image.length > 0 ? (
|
||||
<img
|
||||
alt={data.title}
|
||||
src={data.image}
|
||||
style={{ height: 100, width: 100 }}
|
||||
/>
|
||||
) : null}
|
||||
<Typography variant="body1">{data.description}</Typography>
|
||||
{/*data.tags !== undefined && data.tags !== null && data.tags.length > 0 ?
|
||||
data.tags.map((tag, index) => {
|
||||
return (
|
||||
<Chip
|
||||
key={index}
|
||||
style={chipStyle}
|
||||
label={tag}
|
||||
onClick={() => {
|
||||
}}
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
/>
|
||||
)
|
||||
})
|
||||
: null */}
|
||||
{data.read === false ? (
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
style={{ marginTop: 15 }}
|
||||
onClick={() => {
|
||||
dismissNotification(data.id);
|
||||
}}
|
||||
>
|
||||
Dismiss
|
||||
</Button>
|
||||
) : null}
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
const notificationMenu = (
|
||||
<span style={{ zIndex: 10001 }}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
style={{ zIndex: 10001, marginRight: 15 }}
|
||||
aria-controls="simple-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={(event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
}}
|
||||
>
|
||||
<Badge badgeContent={notifications.length} color="primary">
|
||||
<NotificationsIcon
|
||||
color="secondary"
|
||||
style={{ height: 30, width: 30 }}
|
||||
alt="Your username here"
|
||||
src=""
|
||||
/>
|
||||
</Badge>
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="simple-menu"
|
||||
anchorEl={anchorEl}
|
||||
keepMounted
|
||||
open={Boolean(anchorEl)}
|
||||
style={{
|
||||
zIndex: 10002,
|
||||
maxHeight: "90vh",
|
||||
overflowX: "hidden",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
PaperProps={{
|
||||
style: {
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
},
|
||||
}}
|
||||
onClose={() => {
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<Paper
|
||||
style={{
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
width: notificationWidth,
|
||||
padding: 25,
|
||||
borderBottom: "3px solid rgba(255,255,255,0.4)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", marginBottom: 5 }}>
|
||||
<Typography variant="h6">
|
||||
Your Notifications ({notifications.length})
|
||||
</Typography>
|
||||
{notifications.length > 1 ? (
|
||||
<Button
|
||||
color="primary"
|
||||
variant="contained"
|
||||
style={{ marginLeft: 30 }}
|
||||
onClick={() => {
|
||||
clearNotifications();
|
||||
}}
|
||||
>
|
||||
Flush
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
<Typography variant="body2">
|
||||
Notifications are made by Shuffle to help you discover issues or
|
||||
improvements.
|
||||
</Typography>
|
||||
</Paper>
|
||||
{notifications.map((data, index) => {
|
||||
return <NotificationItem data={data} key={index} />;
|
||||
})}
|
||||
</Menu>
|
||||
</span>
|
||||
);
|
||||
|
||||
// Should be based on some path
|
||||
const avatarMenu = (
|
||||
<span style={{ zIndex: 10001 }}>
|
||||
<IconButton
|
||||
color="primary"
|
||||
style={{ zIndex: 10001, marginRight: 15 }}
|
||||
aria-controls="simple-menu"
|
||||
aria-haspopup="true"
|
||||
onClick={(event) => {
|
||||
setAnchorElAvatar(event.currentTarget);
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
style={{ height: 30, width: 30 }}
|
||||
alt="Your username here"
|
||||
src=""
|
||||
/>
|
||||
</IconButton>
|
||||
<Menu
|
||||
id="simple-menu"
|
||||
anchorEl={anchorElAvatar}
|
||||
keepMounted
|
||||
open={Boolean(anchorElAvatar)}
|
||||
style={{ zIndex: 10012 }}
|
||||
onClose={() => {
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<MenuItem
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<Link to="/docs" style={hrefStyle}>
|
||||
<HelpOutlineIcon style={{marginRight: 5 }}/> About
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<Link to="/getting-started" style={hrefStyle}>
|
||||
<AnalyticsIcon style={{marginRight: 5 }}/> Get Started
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<Link to="/usecases" style={hrefStyle}>
|
||||
<LightbulbIcon style={{marginRight: 5 }}/> Use Cases
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleClose();
|
||||
}}
|
||||
>
|
||||
<Link to="/settings" style={hrefStyle}>
|
||||
<SettingsIcon style={{marginRight: 5 }}/> Settings
|
||||
</Link>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
style={{ color: "white" }}
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
handleClose();
|
||||
handleClickLogout();
|
||||
}}
|
||||
>
|
||||
<MeetingRoomIcon style={{marginRight: 5 }}/> Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</span>
|
||||
);
|
||||
|
||||
// Handle top bar or something
|
||||
const logoCheck = !homePage ? null : null;
|
||||
//<div style={{position: "fixed", top: 0, left: 0, display: "flex"}}>
|
||||
const loginTextBrowser = !isLoggedIn ? (
|
||||
<div style={{ display: "flex" }}>
|
||||
<List style={{ flex: 1, display: "flex", flexDirect: "row" }} component="nav">
|
||||
<ListItem style={{ textAlign: "center", marginLeft: "0px" }}>
|
||||
<Link to="/docs" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleSoarHover}
|
||||
onMouseOut={handleSoarHoverOut}
|
||||
style={{ color: SoarHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
About
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
{!isLoaded ? null :
|
||||
userdata.chat_disabled === true ? null :
|
||||
<div style={{flex: 1, }}>
|
||||
<SearchField serverside={false} userdata={userdata} />
|
||||
</div>
|
||||
}
|
||||
<div style={{ flex: 1, display: "flex", flexDirection: "row-reverse" }}>
|
||||
<List
|
||||
style={{ display: "flex", flexDirection: "row-reverse" }}
|
||||
component="nav"
|
||||
>
|
||||
<ListItem style={{ flex: "1", textAlign: "center" }}>
|
||||
<Link to="/login" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleLoginHover}
|
||||
onMouseOut={handleLoginHoverOut}
|
||||
style={{ color: LoginHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
Login
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ flex: 1, flexDirection: "row" }}>
|
||||
<List
|
||||
style={{ display: "flex", flexDirect: "row", flex: "1" }}
|
||||
component="nav"
|
||||
>
|
||||
<ListItem style={{ textAlign: "center", maxWidth: 140, }}>
|
||||
<Link to="/workflows" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleSoarHover}
|
||||
onMouseOut={handleSoarHoverOut}
|
||||
style={{
|
||||
color: SoarHoverColor,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<PolymerIcon style={{ marginRight: "5px" }} />
|
||||
<span style={{ marginTop: 2 }}>Workflows</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{ textAlign: "center", maxWidth: 100, }}>
|
||||
<Link to="/apps" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleHelpHover}
|
||||
onMouseOut={handleHelpHoverOut}
|
||||
style={{
|
||||
color: HelpHoverColor,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<AppsIcon style={{ marginRight: "5px" }} />
|
||||
<span style={{ marginTop: 2 }}>Apps</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/dashboard" style={hrefStyle}>
|
||||
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
*/}
|
||||
<ListItem style={{ textAlign: "center", maxWidth: 120, }}>
|
||||
<Link to="/docs" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleDocsHover}
|
||||
onMouseOut={handleDocsHoverOut}
|
||||
style={{
|
||||
color: DocsHoverColor,
|
||||
cursor: "pointer",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<DescriptionIcon style={{ marginRight: "5px" }} />
|
||||
<span style={{ marginTop: 2 }}>Docs</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/pricing" style={hrefStyle}>
|
||||
<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
|
||||
<DescriptionIcon style={{marginRight: "5px"}} />
|
||||
<span style={{marginTop: 2}}>Pricing</span>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
*/}
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/configurations" style={hrefStyle}>
|
||||
<div onMouseOver={handleCredentialHover} onMouseOut={handleCredentialHoverOut} style={{color: CredentialHoverColor, cursor: "pointer"}}>Configure</div>
|
||||
</a>
|
||||
</ListItem>
|
||||
*/}
|
||||
</List>
|
||||
</div>
|
||||
{!isLoaded ? null :
|
||||
userdata.chat_disabled === true ? null :
|
||||
<div style={{flex: 1, }}>
|
||||
<SearchField serverside={false} userdata={userdata} />
|
||||
</div>
|
||||
}
|
||||
<div
|
||||
style={{ flex: 1, display: "flex", flexDirection: "row-reverse" }}
|
||||
>
|
||||
{avatarMenu}
|
||||
{notificationMenu}
|
||||
{userdata === undefined ||
|
||||
userdata.admin === undefined ||
|
||||
userdata.admin === null ||
|
||||
!userdata.admin ? null : (
|
||||
<Link to="/admin" style={hrefStyle}>
|
||||
<Button
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
style={{ marginRight: 15, marginTop: 12 }}
|
||||
>
|
||||
Admin
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
{userdata === undefined ||
|
||||
userdata.orgs === undefined ||
|
||||
userdata.orgs === null ||
|
||||
userdata.orgs.length <= 1 ? null : (
|
||||
<Select
|
||||
SelectDisplayProps={{
|
||||
style: {
|
||||
marginLeft: 10,
|
||||
maxWidth: 200,
|
||||
overflow: "hidden",
|
||||
},
|
||||
}}
|
||||
value={userdata.active_org.id}
|
||||
fullWidth
|
||||
style={{
|
||||
zIndex: 10012,
|
||||
marginTop: 5,
|
||||
backgroundColor: theme.palette.surfaceColor,
|
||||
marginRight: 15,
|
||||
color: "white",
|
||||
height: 50,
|
||||
width: 200,
|
||||
}}
|
||||
MenuProps={{
|
||||
style: { zIndex: 10012 },
|
||||
}}
|
||||
onChange={(e) => {
|
||||
handleClickChangeOrg(e.target.value);
|
||||
}}
|
||||
>
|
||||
{userdata.orgs.map((data, index) => {
|
||||
if (
|
||||
data.name === undefined ||
|
||||
data.name === null ||
|
||||
data.name.length === 0
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const imagesize = 22
|
||||
|
||||
//if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0 && data.fixed !== true) {
|
||||
var skipOrg = false
|
||||
if (data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0) {
|
||||
// Finds the parent org
|
||||
for (var key in userdata.child_orgs) {
|
||||
if (data.child_orgs[key].id === data.creator_org) {
|
||||
skipOrg = true
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (skipOrg) {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
// Reordering to have suborgs with access under original org
|
||||
if (data.child_orgs !== undefined && data.child_orgs !== null) {
|
||||
var cnt = 0
|
||||
for (var key in data.child_orgs) {
|
||||
const childorg = data.child_orgs[key]
|
||||
const foundIndex = userdata.orgs.findIndex(item => item.id === childorg.id)
|
||||
if (foundIndex !== -1) {
|
||||
const newindex = parseInt(index)+parseInt(cnt)
|
||||
|
||||
var newitem = userdata.orgs[foundIndex]
|
||||
newitem.fixed = true
|
||||
userdata.orgs.splice(newindex+1, 0, newitem)
|
||||
userdata.orgs.splice(foundIndex+1, 1)
|
||||
} else {
|
||||
console.log("ORG NOT FOUND IN LIST: ", childorg)
|
||||
}
|
||||
|
||||
// This is stupid :)
|
||||
cnt += 1
|
||||
}
|
||||
}
|
||||
|
||||
//console.log("ORG: ", data)
|
||||
const imageStyle = {
|
||||
width: imagesize,
|
||||
height: imagesize,
|
||||
pointerEvents: "none",
|
||||
marginRight: 10,
|
||||
marginLeft: data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0 ? 20 : 0,
|
||||
}
|
||||
|
||||
const parsedTitle = data.creator_org !== undefined && data.creator_org !== null && data.creator_org.length > 0 ? `Suborg of ${data.creator_org}` : ""
|
||||
|
||||
const image = data.image === "" ?
|
||||
<img alt={data.name} src={theme.palette.defaultImage} style={imageStyle} />
|
||||
:
|
||||
<img alt={data.name} src={data.image} style={imageStyle} />
|
||||
|
||||
return (
|
||||
<MenuItem key={index} disabled={data.id === userdata.active_org.id} style={{backgroundColor: theme.palette.inputColor, color: "white", height: 40,}} value={data.id}>
|
||||
|
||||
<Tooltip color="primary" title={parsedTitle} placement="left">
|
||||
<div style={{display: "flex"}}>
|
||||
{image} {data.name}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</MenuItem>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
//console.log("USR: ", userdata.orgs)
|
||||
|
||||
const loginTextMobile = !isLoggedIn ? (
|
||||
<div style={{ display: "flex" }}>
|
||||
<List style={{ display: "flex", flexDirection: "row" }} component="nav">
|
||||
<ListItem style={{ textAlign: "center" }}>
|
||||
<Link to="/" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleHomeHover}
|
||||
onMouseOut={handleHomeHoverOut}
|
||||
style={{ color: HomeHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
<Grid container direction="row" alignItems="center">
|
||||
<Grid item>
|
||||
<HomeIcon style={{ marginTop: "3px", marginRight: "5px" }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{ textAlign: "center" }}>
|
||||
<Link to="/docs" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleSoarHover}
|
||||
onMouseOut={handleSoarHoverOut}
|
||||
style={{ color: SoarHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
About
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
</List>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: "flex" }}>
|
||||
<div style={{ flex: "1", flexDirection: "row" }}>
|
||||
<List
|
||||
style={{ display: "flex", flexDirect: "row", flex: "1" }}
|
||||
component="nav"
|
||||
>
|
||||
<ListItem style={{ textAlign: "center" }}>
|
||||
<Link to="/" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleHomeHover}
|
||||
onMouseOut={handleHomeHoverOut}
|
||||
style={{ color: HomeHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
Shuffle
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{ textAlign: "center" }}>
|
||||
<Link to="/workflows" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleSoarHover}
|
||||
onMouseOut={handleSoarHoverOut}
|
||||
style={{ color: SoarHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
Workflows
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
<ListItem style={{ textAlign: "center" }}>
|
||||
<Link to="/apps" style={hrefStyle}>
|
||||
<div
|
||||
onMouseOver={handleHelpHover}
|
||||
onMouseOut={handleHelpHoverOut}
|
||||
style={{ color: HelpHoverColor, cursor: "pointer" }}
|
||||
>
|
||||
Apps
|
||||
</div>
|
||||
</Link>
|
||||
</ListItem>
|
||||
{/*
|
||||
<ListItem style={{textAlign: "center"}}>
|
||||
<Link to="/configurations" style={hrefStyle}>
|
||||
<div onMouseOver={handleCredentialHover} onMouseOut={handleCredentialHoverOut} style={{color: CredentialHoverColor, cursor: "pointer"}}>Configure</div>
|
||||
</a>
|
||||
</ListItem>
|
||||
*/}
|
||||
</List>
|
||||
</div>
|
||||
<div
|
||||
style={{ flex: "10", display: "flex", flexDirection: "row-reverse" }}
|
||||
>
|
||||
{avatarMenu}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// <Divider style={{height: "1px", width: "100%", backgroundColor: "rgb(91, 96, 100)"}}/>
|
||||
const loadedCheck = (
|
||||
<div style={{ minHeight: 60 }}>
|
||||
<BrowserView>{loginTextBrowser}</BrowserView>
|
||||
<MobileView>{loginTextMobile}</MobileView>
|
||||
</div>
|
||||
);
|
||||
// <div style={{backgroundImage: "linear-gradient(-90deg,#342f78 0,#29255e 50%,#1b1947 100%"}}>
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
width: "100%",
|
||||
position: "fixed",
|
||||
minHeight: 60,
|
||||
maxHeight: 60,
|
||||
top: 0,
|
||||
zIndex: 10000,
|
||||
backgroundColor: "inherit",
|
||||
}}
|
||||
>
|
||||
{loadedCheck}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, {useState} from 'react';
|
||||
import {BrowserView, MobileView} from "react-device-detect";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import {Link} from 'react-router-dom';
|
||||
import ReactGA from 'react-ga4';
|
||||
@@ -45,7 +46,6 @@ const hoverOutColor = "#e8eaf6"
|
||||
|
||||
const Header = props => {
|
||||
const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
|
||||
const theme = useTheme();
|
||||
const alert = useAlert()
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1,5 +1,6 @@
|
||||
import React, { useState, useEffect, useLayoutEffect } from "react";
|
||||
import { makeStyles, createStyles } from "@mui/styles";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
|
||||
import { validateJson, GetIconInfo } from "../views/Workflows.jsx";
|
||||
@@ -8,7 +9,6 @@ import { sortByKey } from "../views/AngularWorkflow.jsx";
|
||||
//import NestedMenuItem from "material-ui-nested-menu-item-v5";
|
||||
import { NestedMenuItem } from "mui-nested-menu";
|
||||
import { useAlert } from "react-alert";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import {
|
||||
ButtonGroup,
|
||||
@@ -170,7 +170,6 @@ const ParsedAction = (props) => {
|
||||
//setExpansionModalOpen,
|
||||
} = props;
|
||||
|
||||
//const theme = useTheme();
|
||||
const classes = useStyles();
|
||||
const alert = useAlert()
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* eslint-disable react/no-multi-comp */
|
||||
import React, { useState } from "react";
|
||||
import { makeStyles } from "@mui/material/styles";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
|
||||
import {
|
||||
CircularProgress,
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useEffect } from "react";
|
||||
|
||||
import { useInterval } from "react-powerhooks";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import {
|
||||
IconButton,
|
||||
@@ -270,7 +271,6 @@ const Apps = (props) => {
|
||||
const { globalUrl, isLoggedIn, isLoaded, userdata } = props;
|
||||
|
||||
//const [workflows, setWorkflows] = React.useState([]);
|
||||
const theme = useTheme();
|
||||
const baseRepository = "https://github.com/frikky/shuffle-apps";
|
||||
const alert = useAlert();
|
||||
let navigate = useNavigate();
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import { BrowserView, MobileView } from "react-device-detect";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import Paper from '@material-ui/core/Paper';
|
||||
import Button from '@material-ui/core/Button';
|
||||
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
|
||||
import { useTheme } from '@material-ui/core/styles';
|
||||
|
||||
const bodyDivStyle = {
|
||||
margin: "auto",
|
||||
@@ -19,8 +19,6 @@ const bodyDivStyle = {
|
||||
const Contact = (props) => {
|
||||
const { globalUrl, isLoaded } = props;
|
||||
|
||||
const theme = useTheme();
|
||||
|
||||
const boxStyle = {
|
||||
flex: "1",
|
||||
marginLeft: "10px",
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useInterval } from "react-powerhooks";
|
||||
import AppFramework from "../components/AppFramework.jsx";
|
||||
import { makeStyles, useTheme } from "@mui/material/styles";
|
||||
import { makeStyles, useTheme } from "@mui/styles";
|
||||
// nodejs library that concatenates classes
|
||||
import classNames from "classnames";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
@@ -4,6 +4,7 @@ import ReactMarkdown from "react-markdown";
|
||||
import { BrowserView, MobileView } from "react-device-detect";
|
||||
import { useParams, useNavigate, Link } from "react-router-dom";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import {
|
||||
Grid,
|
||||
@@ -56,7 +57,6 @@ const Docs = (defaultprops) => {
|
||||
const { globalUrl, selectedDoc, serverside, serverMobile } = defaultprops;
|
||||
|
||||
let navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
|
||||
// Quickfix for react router 5 -> 6
|
||||
const params = useParams();
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React, { useEffect, useContext } from "react";
|
||||
import { makeStyles } from "@mui/material/styles";
|
||||
import { makeStyles } from "@mui/styles";
|
||||
|
||||
import ReactGA from 'react-ga4';
|
||||
import SecurityFramework from '../components/SecurityFramework.jsx';
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import theme from '../theme.jsx';
|
||||
|
||||
import Grid from "@material-ui/core/Grid";
|
||||
import Card from "@material-ui/core/Card";
|
||||
@@ -12,7 +13,6 @@ import Button from "@material-ui/core/Button";
|
||||
const Workflows = (defaultprops) => {
|
||||
const { globalUrl, isLoggedIn, isLoaded } = defaultprops;
|
||||
|
||||
const theme = useTheme();
|
||||
const params = useParams();
|
||||
var props = JSON.parse(JSON.stringify(defaultprops))
|
||||
props.match = {}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import theme from '../theme.jsx';
|
||||
import {
|
||||
Grid,
|
||||
Typography,
|
||||
@@ -15,7 +16,6 @@ import detectEthereumProvider from "@metamask/detect-provider";
|
||||
|
||||
const Settings = (props) => {
|
||||
const { globalUrl, isLoaded, userdata, setUserData } = props;
|
||||
const theme = useTheme();
|
||||
const alert = useAlert();
|
||||
let navigate = useNavigate();
|
||||
|
||||
|
||||
Reference in New Issue
Block a user