Frikky
1617 lines
66 KiB
React
1617 lines
66 KiB
React
import React, { memo, useContext, useEffect, useState } from 'react';
|
|
import theme from "../theme.jsx";
|
|
import {
|
|
FormControl,
|
|
Card,
|
|
Tooltip,
|
|
Typography,
|
|
Switch,
|
|
Divider,
|
|
TextField,
|
|
Button,
|
|
Grid,
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
ListItemAvatar,
|
|
Avatar,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogActions,
|
|
DialogContent,
|
|
Skeleton,
|
|
} from "@mui/material";
|
|
|
|
import {
|
|
Edit as EditIcon,
|
|
Polyline as PolylineIcon,
|
|
CheckCircle as CheckCircleIcon,
|
|
Close as CloseIcon,
|
|
Apps as AppsIcon,
|
|
Business as BusinessIcon,
|
|
Flag,
|
|
} from "@mui/icons-material";
|
|
|
|
import { toast } from 'react-toastify';
|
|
|
|
const TenantsTab = memo((props) => {
|
|
const {
|
|
globalUrl,
|
|
isCloud,
|
|
userdata,
|
|
selectedOrganization,
|
|
setSelectedOrganization,
|
|
checkLogin
|
|
} = props;
|
|
const imageStyle = { width: 50, height: 50 };
|
|
// const [selectedOrganization, setSelectedOrganization] = React.useState({});
|
|
const [subOrgs, setSubOrgs] = useState([]);
|
|
const [cloudSyncApikey, setCloudSyncApikey] = React.useState("");
|
|
const [orgName, setOrgName] = React.useState("");
|
|
const [orgSyncResponse, setOrgSyncResponse] = React.useState("");
|
|
const [loading, setLoading] = React.useState(false);
|
|
// const [loginInfo, setLoginInfo] = React.useState("");
|
|
const [cloudSyncModalOpen, setCloudSyncModalOpen] = React.useState(false);
|
|
const [modalOpen, setModalOpen] = React.useState(false);
|
|
const [parentOrg, setParentOrg] = React.useState(null);
|
|
const [parentOrgFlag, setParentOrgFlag] = React.useState(null);
|
|
const [loadOrgs, setLoadOrgs] = React.useState(true);
|
|
const [, forceUpdate] = React.useState();
|
|
const itemColor = "black";
|
|
|
|
useEffect(() => {
|
|
if(parentOrg !== null && parentOrgFlag === null) {
|
|
let regiontag = "UK";
|
|
let regionCode = "gb";
|
|
|
|
if (parentOrg?.region_url?.length > 0) {
|
|
const regionsplit = parentOrg?.region_url.split(".");
|
|
if (regionsplit.length > 2 && !regionsplit[0].includes("shuffler")) {
|
|
const namesplit = regionsplit[0].split("/");
|
|
regiontag = namesplit[namesplit.length - 1];
|
|
|
|
if (regiontag === "california") {
|
|
regiontag = "US";
|
|
regionCode = "us";
|
|
} else if (regiontag === "frankfurt") {
|
|
regiontag = "EU-2";
|
|
regionCode = "eu";
|
|
} else if (regiontag === "ca") {
|
|
regiontag = "CA";
|
|
regionCode = "ca";
|
|
}
|
|
}
|
|
setParentOrgFlag(regionCode);
|
|
}
|
|
}
|
|
}, [parentOrg]);
|
|
|
|
var syncList = [
|
|
{
|
|
primary: "Workflows",
|
|
secondary: "",
|
|
active: true,
|
|
icon: <PolylineIcon style={{ color: itemColor }} />,
|
|
},
|
|
{
|
|
primary: "Apps",
|
|
secondary: "",
|
|
active: true,
|
|
icon: <AppsIcon style={{ color: itemColor }} />,
|
|
},
|
|
{
|
|
primary: "Organization",
|
|
secondary: "",
|
|
active: true,
|
|
icon: <BusinessIcon style={{ color: itemColor }} />,
|
|
},
|
|
];
|
|
|
|
useEffect(() => {
|
|
if (userdata.orgs !== undefined && userdata.orgs !== null && userdata.orgs.length > 0) {
|
|
handleGetSubOrgs(userdata.active_org.id);
|
|
}
|
|
else console.log("error in user data")
|
|
}, [userdata]);
|
|
|
|
const handleGetSubOrgs = (orgId) => {
|
|
|
|
if (orgId.length === 0) {
|
|
toast("Organization ID not defined. Please contact us on https://shuffler.io if this persists logout.");
|
|
return;
|
|
}
|
|
|
|
fetch(`${globalUrl}/api/v1/orgs/${orgId}/suborgs`, {
|
|
method: "GET",
|
|
credentials: "include",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error('Failed to fetch sub organizations');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((responseJson) => {
|
|
if (responseJson.success === false) {
|
|
setLoadOrgs(false)
|
|
//toast("Failed getting your org. If this persists, please contact support.");
|
|
} else {
|
|
const { subOrgs, parentOrg } = responseJson;
|
|
setLoadOrgs(false)
|
|
setSubOrgs(subOrgs);
|
|
setParentOrg(parentOrg);
|
|
|
|
let regiontag = "UK";
|
|
let regionCode = "gb";
|
|
|
|
if (parentOrg?.region_url?.length > 0) {
|
|
const regionsplit = parentOrg?.region_url.split(".");
|
|
if (regionsplit.length > 2 && !regionsplit[0].includes("shuffler")) {
|
|
const namesplit = regionsplit[0].split("/");
|
|
regiontag = namesplit[namesplit.length - 1];
|
|
|
|
if (regiontag === "california") {
|
|
regiontag = "US";
|
|
regionCode = "us";
|
|
} else if (regiontag === "frankfurt") {
|
|
regiontag = "EU-2";
|
|
regionCode = "eu";
|
|
} else if (regiontag === "ca") {
|
|
regiontag = "CA";
|
|
regionCode = "ca";
|
|
}
|
|
}
|
|
setParentOrgFlag(regionCode);
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("Error getting sub orgs: ", error);
|
|
//toast("Error getting sub organizations");
|
|
setLoadOrgs(false)
|
|
});
|
|
};
|
|
|
|
const GridItem = (props) => {
|
|
const [expanded, setExpanded] = React.useState(false);
|
|
const [showEdit, setShowEdit] = React.useState(false);
|
|
const [newValue, setNewValue] = React.useState(-100);
|
|
|
|
const primary = props.data.primary;
|
|
const secondary = props.data.secondary;
|
|
const primaryIcon = props.data.icon;
|
|
const secondaryIcon = props.data.active ? (
|
|
<CheckCircleIcon style={{ color: "green" }} />
|
|
) : (
|
|
<CloseIcon style={{ color: "red" }} />
|
|
);
|
|
|
|
const submitFeatureEdit = (sync_features) => {
|
|
if (!userdata.support) {
|
|
console.log(
|
|
"User does not have support access and can't edit features",
|
|
);
|
|
return;
|
|
}
|
|
|
|
sync_features.editing = true;
|
|
const data = {
|
|
org_id: selectedOrganization.id,
|
|
sync_features: sync_features,
|
|
};
|
|
|
|
const url = globalUrl + `/api/v1/orgs/${selectedOrganization.id}`;
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then((response) =>
|
|
response.json().then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
toast("Failed updating org: ", responseJson.reason);
|
|
} else {
|
|
toast("Successfully edited org!");
|
|
}
|
|
}),
|
|
)
|
|
.catch((error) => {
|
|
toast("Err: " + error.toString());
|
|
});
|
|
};
|
|
|
|
const enableFeature = () => {
|
|
console.log("Enabling " + primary);
|
|
|
|
console.log(selectedOrganization.sync_features);
|
|
// Check if primary is in sync_features
|
|
var tmpprimary = primary.replaceAll(" ", "_");
|
|
if (!(tmpprimary in selectedOrganization.sync_features)) {
|
|
console.log("Primary not in sync_features: " + tmpprimary);
|
|
return;
|
|
}
|
|
|
|
if (props.data.active) {
|
|
selectedOrganization.sync_features[tmpprimary].active = false;
|
|
} else {
|
|
selectedOrganization.sync_features[tmpprimary].active = true;
|
|
}
|
|
|
|
// setSelectedOrganization(selectedOrganization);
|
|
forceUpdate(Math.random());
|
|
submitFeatureEdit(selectedOrganization.sync_features);
|
|
};
|
|
|
|
const submitEdit = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// Check if primary is in sync_features
|
|
var tmpprimary = primary.replaceAll(" ", "_");
|
|
if (!(tmpprimary in selectedOrganization.sync_features)) {
|
|
console.log("Primary not in sync_features: " + tmpprimary);
|
|
return;
|
|
}
|
|
|
|
// Make it into a number
|
|
var tmp = parseInt(newValue);
|
|
if (isNaN(tmp)) {
|
|
console.log("Not a number: " + newValue);
|
|
return;
|
|
}
|
|
|
|
selectedOrganization.sync_features[tmpprimary].limit = tmp;
|
|
|
|
// setSelectedOrganization(selectedOrganization);
|
|
forceUpdate(Math.random());
|
|
submitFeatureEdit(selectedOrganization.sync_features);
|
|
};
|
|
|
|
return (
|
|
<Grid item xs={4}>
|
|
<Card
|
|
style={{
|
|
margin: 4,
|
|
backgroundColor: theme.palette.platformColor,
|
|
borderRadius: theme.palette?.borderRadius,
|
|
border: "1px solid rgba(255,255,255,0.3)",
|
|
color: "white",
|
|
minHeight: expanded ? 250 : "inherit",
|
|
maxHeight: expanded ? 300 : "inherit",
|
|
}}
|
|
>
|
|
<ListItem
|
|
style={{ cursor: "pointer" }}
|
|
onClick={() => {
|
|
setExpanded(!expanded);
|
|
}}
|
|
>
|
|
<ListItemAvatar>
|
|
<Avatar>{primaryIcon}</Avatar>
|
|
</ListItemAvatar>
|
|
<ListItemText
|
|
style={{ textTransform: "capitalize" }}
|
|
primary={props.data.newname ? props.data.newname : primary}
|
|
/>
|
|
{isCloud && userdata.support === true ? (
|
|
<Tooltip title="Edit features (support users only)">
|
|
<EditIcon
|
|
color="secondary"
|
|
style={{ marginRight: 10, cursor: "pointer" }}
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
if (showEdit) {
|
|
setShowEdit(false);
|
|
return;
|
|
}
|
|
|
|
console.log("Edit");
|
|
|
|
setShowEdit(true);
|
|
}}
|
|
/>
|
|
</Tooltip>
|
|
) : null}
|
|
<Tooltip
|
|
title={props.data.active ? "Disable feature" : "Enable feature"}
|
|
>
|
|
<span
|
|
style={{ cursor: "pointer", marginTop: 5 }}
|
|
onClick={(e) => {
|
|
if (!isCloud || userdata.support !== true) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
enableFeature();
|
|
}}
|
|
>
|
|
{secondaryIcon}
|
|
</span>
|
|
</Tooltip>
|
|
</ListItem>
|
|
{expanded ? (
|
|
<div style={{ padding: 15 }}>
|
|
<Typography>
|
|
<b>Usage: </b>
|
|
{props.data.limit === 0 ? (
|
|
"Unlimited"
|
|
) : (
|
|
<span>
|
|
{props.data.usage} /{" "}
|
|
{props.data.limit === "" ? "Unlimited" : props.data.limit}
|
|
</span>
|
|
)}
|
|
</Typography>
|
|
{/*<Typography>
|
|
Data sharing: {props.data.data_collection}
|
|
</Typography>*/}
|
|
<Typography
|
|
style={{
|
|
maxHeight: 150,
|
|
overflowX: "hidden",
|
|
overflowY: "auto",
|
|
}}
|
|
>
|
|
<b>Description:</b> {secondary}
|
|
</Typography>
|
|
</div>
|
|
) : null}
|
|
|
|
{showEdit ? (
|
|
<FormControl
|
|
fullWidth
|
|
onSubmit={(e) => {
|
|
console.log("Submit");
|
|
submitEdit(e);
|
|
}}
|
|
>
|
|
<span style={{ display: "flex" }}>
|
|
<TextField
|
|
style={{ flex: 3 }}
|
|
color="primary"
|
|
label={"Edit value"}
|
|
defaultValue={props.data.limit}
|
|
style={{}}
|
|
onChange={(event) => {
|
|
setNewValue(event.target.value);
|
|
}}
|
|
/>
|
|
<Button
|
|
style={{ flex: 1 }}
|
|
variant="contained"
|
|
disabled={newValue < -1}
|
|
onClick={(e) => {
|
|
console.log("Submit 2");
|
|
submitEdit(e);
|
|
}}
|
|
>
|
|
Submit
|
|
</Button>
|
|
</span>
|
|
</FormControl>
|
|
) : null}
|
|
</Card>
|
|
</Grid>
|
|
);
|
|
};
|
|
|
|
const enableCloudSync = (apikey, organization, disableSync) => {
|
|
setOrgSyncResponse("");
|
|
|
|
const data = {
|
|
apikey: apikey,
|
|
organization: organization,
|
|
disable: disableSync,
|
|
};
|
|
|
|
const url = globalUrl + "/api/v1/cloud/setup";
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
setLoading(false);
|
|
if (response.status === 200) {
|
|
console.log("Cloud sync success?");
|
|
} else {
|
|
console.log("Cloud sync fail?");
|
|
}
|
|
|
|
return response.json();
|
|
//setTimeout(() => {
|
|
//}, 1000)
|
|
})
|
|
.then((responseJson) => {
|
|
console.log("RESP: ", responseJson);
|
|
if (
|
|
responseJson.success === false &&
|
|
responseJson.reason !== undefined
|
|
) {
|
|
setOrgSyncResponse(responseJson.reason);
|
|
toast("Failed to handle sync: " + responseJson.reason);
|
|
} else if (!responseJson.success) {
|
|
toast("Failed to handle sync.");
|
|
} else {
|
|
// getOrgs();
|
|
if (disableSync) {
|
|
toast("Successfully disabled sync!");
|
|
setOrgSyncResponse("Successfully disabled syncronization");
|
|
} else {
|
|
toast("Cloud Syncronization successfully set up!");
|
|
setOrgSyncResponse(
|
|
"Successfully started syncronization. Cloud features you now have access to can be seen below.",
|
|
);
|
|
}
|
|
|
|
selectedOrganization.cloud_sync = !selectedOrganization.cloud_sync;
|
|
// setSelectedOrganization(selectedOrganization);
|
|
setCloudSyncApikey("");
|
|
|
|
// handleGetOrg(userdata.active_org.id);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
setLoading(false);
|
|
toast("Err: " + error.toString());
|
|
});
|
|
};
|
|
|
|
const createSubOrg = (currentOrgId, name) => {
|
|
const data = { name: name, org_id: currentOrgId };
|
|
console.log(data);
|
|
const url = globalUrl + `/api/v1/orgs/${currentOrgId}/create_sub_org`;
|
|
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then((response) =>
|
|
response.json().then((responseJson) => {
|
|
if (responseJson["success"] === false) {
|
|
if (responseJson.reason !== undefined) {
|
|
toast.error(responseJson.reason, {
|
|
autoClose: 5000,
|
|
})
|
|
} else {
|
|
toast("Failed creating suborg. Please try again");
|
|
}
|
|
} else {
|
|
toast("Successfully created suborg. Reloading in 3 seconds!");
|
|
// setSelectedUserModalOpen(false);
|
|
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 2500);
|
|
}
|
|
|
|
setOrgName("");
|
|
setModalOpen(false);
|
|
}),
|
|
)
|
|
.catch((error) => {
|
|
toast("Err: " + error.toString());
|
|
});
|
|
};
|
|
|
|
const handleClickChangeOrg = (orgId) => {
|
|
// Don't really care about the logout
|
|
//name: org.name,
|
|
//orgId = "asd"
|
|
const data = {
|
|
org_id: orgId,
|
|
};
|
|
|
|
localStorage.setItem("globalUrl", "");
|
|
localStorage.setItem("getting_started_sidebar", "open");
|
|
|
|
fetch(`${globalUrl}/api/v1/orgs/${orgId}/change`, {
|
|
mode: "cors",
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
method: "POST",
|
|
body: JSON.stringify(data),
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json; charset=utf-8",
|
|
},
|
|
})
|
|
.then(function (response) {
|
|
if (response.status !== 200) {
|
|
console.log("Error in response");
|
|
} else {
|
|
localStorage.setItem("apps", [])
|
|
}
|
|
|
|
return response.json();
|
|
})
|
|
.then(function (responseJson) {
|
|
if (responseJson.success === true) {
|
|
if (
|
|
responseJson.region_url !== undefined &&
|
|
responseJson.region_url !== null &&
|
|
responseJson.region_url.length > 0
|
|
) {
|
|
localStorage.setItem("globalUrl", responseJson.region_url);
|
|
//globalUrl = responseJson.region_url
|
|
}
|
|
|
|
checkLogin()
|
|
setTimeout(() => {
|
|
window.location.reload();
|
|
}, 3000);
|
|
toast("Successfully changed active organization - refreshing!");
|
|
} else {
|
|
toast("Failed changing org: " + responseJson.reason);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.log("error changing: ", error);
|
|
//removeCookie("session_token", {path: "/"})
|
|
});
|
|
};
|
|
|
|
const modalView = (
|
|
<Dialog
|
|
open={modalOpen}
|
|
onClose={() => {
|
|
setModalOpen(false);
|
|
}}
|
|
PaperProps={{
|
|
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,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle>
|
|
<span style={{ color: "white" }}>Add Sub-Organization</span>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<div>
|
|
Name
|
|
<TextField
|
|
color="primary"
|
|
style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
|
|
autoFocus
|
|
InputProps={{
|
|
style: {
|
|
height: "50px",
|
|
color: "white",
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
required
|
|
fullWidth={true}
|
|
placeholder={`${selectedOrganization.name} Copycat Inc.`}
|
|
id="orgname"
|
|
margin="normal"
|
|
variant="outlined"
|
|
onChange={(event) => {
|
|
setOrgName(event.target.value);
|
|
}}
|
|
/>
|
|
</div>
|
|
{/* {loginInfo} */}
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button
|
|
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", color: "#ff8544" }}
|
|
onClick={() => setModalOpen(false)}
|
|
color="primary"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none", backgroundColor: "#ff8544", color: "#1a1a1a"}}
|
|
onClick={() => {
|
|
createSubOrg(selectedOrganization.id, orgName);
|
|
}}
|
|
color="primary"
|
|
>
|
|
Submit
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
|
|
const cloudSyncModal = (
|
|
<Dialog
|
|
open={cloudSyncModalOpen}
|
|
onClose={() => {
|
|
setCloudSyncModalOpen(false);
|
|
}}
|
|
PaperProps={{
|
|
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,
|
|
},
|
|
},
|
|
}}
|
|
>
|
|
<DialogTitle>
|
|
<span style={{ color: "white" }}>Enable cloud features</span>
|
|
</DialogTitle>
|
|
<DialogContent color="textSecondary">
|
|
What does{" "}
|
|
<a
|
|
href="/docs/organizations#cloud_sync"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ textDecoration: "none", color: "#f85a3e" }}
|
|
>
|
|
cloud sync
|
|
</a>{" "}
|
|
do?
|
|
<div style={{ display: "flex", marginBottom: 20 }}>
|
|
<TextField
|
|
color="primary"
|
|
style={{
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
marginRight: 10,
|
|
}}
|
|
InputProps={{
|
|
style: {
|
|
height: "50px",
|
|
color: "white",
|
|
fontSize: "1em",
|
|
},
|
|
}}
|
|
required
|
|
fullWidth={true}
|
|
disabled={selectedOrganization.cloud_sync}
|
|
autoComplete="cloud apikey"
|
|
id="apikey_field"
|
|
margin="normal"
|
|
placeholder="Cloud Apikey"
|
|
variant="outlined"
|
|
onChange={(event) => {
|
|
setCloudSyncApikey(event.target.value);
|
|
}}
|
|
/>
|
|
<Button
|
|
disabled={
|
|
(!selectedOrganization.cloud_sync &&
|
|
cloudSyncApikey.length === 0) ||
|
|
loading
|
|
}
|
|
style={{ marginLeft: 15, height: 50, borderRadius: "2px", color: "#1a1a1a", backgroundColor: (!selectedOrganization.cloud_sync &&
|
|
cloudSyncApikey.length === 0) ||
|
|
loading ? "rgba(200, 200, 200, 0.5)" : "#ff8544", fontSize: 16, textTransform: "none" }}
|
|
onClick={() => {
|
|
setLoading(true);
|
|
enableCloudSync(
|
|
cloudSyncApikey,
|
|
selectedOrganization,
|
|
selectedOrganization.cloud_sync,
|
|
);
|
|
}}
|
|
color="primary"
|
|
variant={
|
|
selectedOrganization.cloud_sync === true
|
|
? "outlined"
|
|
: "contained"
|
|
}
|
|
>
|
|
{selectedOrganization.cloud_sync ? "Stop sync" : "Start sync"}
|
|
</Button>
|
|
</div>
|
|
{orgSyncResponse.length > 0 ? (
|
|
<Typography style={{ marginTop: 5, marginBottom: 10 }}>
|
|
Error: {orgSyncResponse}
|
|
</Typography>
|
|
) : null}
|
|
<Grid container style={{ width: "100%", marginBottom: 15 }}>
|
|
{syncList.map((data, index) => {
|
|
return <GridItem key={index} data={data} />;
|
|
})}
|
|
</Grid>
|
|
* New triggers (userinput, hotmail realtime)
|
|
<div />
|
|
* Execute in the cloud rather than onprem
|
|
<div />
|
|
* Apps can be built in the cloud
|
|
<div />
|
|
* Easily share apps and workflows
|
|
<div />* Access to powerful cloud search
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
|
|
|
|
const textColor = "#9E9E9E !important";
|
|
|
|
return (
|
|
<div style={{ width: "100%", minHeight: 1100, boxSizing: 'border-box', padding: "27px 10px 19px 27px", height:"100%", backgroundColor: '#212121',borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: "1px solid #494949",}}>
|
|
{modalView}
|
|
{cloudSyncModal}
|
|
<div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin'}}>
|
|
<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: '#494949 transparent', scrollbarWidth: 'thin' }}>
|
|
<div style={{ marginBottom: 20 }}>
|
|
<h2 style={{ marginBottom: 8, marginTop: 0, color: "#ffffff" }}>Tenants</h2>
|
|
<span style={{ color: textColor }}>
|
|
Create, manage and change to sub-organizations (tenants)! {" "}
|
|
{isCloud
|
|
? "You can only make a sub organization if you are a customer of shuffle or running a POC of the platform. Please contact support@shuffler.io to try it out."
|
|
: ''}
|
|
<a
|
|
href="/docs/organizations"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ color: "#FF8444" }}
|
|
>
|
|
Learn more
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
<Button
|
|
style={{ backgroundColor: '#ff8544', textTransform: 'none', fontSize: 16, color: "#1a1a1a", borderRadius: 4, width: 212, height: 40 }}
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={userdata.admin !== 'true'}
|
|
onClick={() => {
|
|
setModalOpen(true);
|
|
}}
|
|
>
|
|
Add suborganization
|
|
</Button>
|
|
|
|
<Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
textAlign: 'left',
|
|
width: '100%',
|
|
padding: '10px',
|
|
marginTop: 20,
|
|
}}
|
|
>
|
|
<h3
|
|
style={{
|
|
margin: 0,
|
|
fontSize: '1.2rem',
|
|
fontWeight: 'bold',
|
|
letterSpacing: '1px',
|
|
color: "#ffffff"
|
|
}}
|
|
>
|
|
Your Parent Organization
|
|
</h3>
|
|
</div>
|
|
<div>
|
|
|
|
|
|
{/* <Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.inputColor,
|
|
}}
|
|
/> */}
|
|
|
|
|
|
<div style={{ borderRadius: 4, marginTop: 24, border: "1px solid #494949", width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
|
<List
|
|
style={{
|
|
width: "100%",
|
|
tableLayout: "fixed",
|
|
display: "table",
|
|
minWidth: 800,
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}
|
|
>
|
|
<ListItem
|
|
style={{
|
|
width: "100%",
|
|
display: "table-row",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
verticalAlign: "middle",
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary="Logo"
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
paddingLeft: 20,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
textAlign: "center",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Name"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary="Region"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
borderBottom: "1px solid #494949",
|
|
padding: "0px 8px 8px 8px",
|
|
}}
|
|
/>
|
|
)}
|
|
<ListItemText
|
|
primary="id"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Action"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
|
|
{loadOrgs ? (
|
|
[...Array(3)].map((_, rowIndex) => (
|
|
<ListItem
|
|
key={rowIndex}
|
|
style={{
|
|
display: "flex",
|
|
backgroundColor: "#212121",
|
|
height: 30,
|
|
}}
|
|
>
|
|
{[
|
|
{ width: 100, minWidth: 100, maxWidth: 100 },
|
|
{ width: 250, minWidth: 50, maxWidth: 250 },
|
|
{ width: 400, minWidth: 400, maxWidth: 400 },
|
|
{ width: "28%", minWidth: "28%" },
|
|
{ width: 400, minWidth: 400, maxWidth: 400 },
|
|
].map((style, colIndex) => (
|
|
<ListItemText
|
|
key={colIndex}
|
|
style={{
|
|
padding: "8px",
|
|
...style,
|
|
}}
|
|
>
|
|
<Skeleton
|
|
variant="text"
|
|
animation="wave"
|
|
sx={{
|
|
backgroundColor: "#1a1a1a",
|
|
borderRadius: "4px",
|
|
}}
|
|
/>
|
|
</ListItemText>
|
|
))}
|
|
</ListItem>
|
|
))
|
|
) : parentOrg?.id?.length > 0 ? (
|
|
<ListItem
|
|
style={{
|
|
backgroundColor: "#1A1A1A",
|
|
display: "table-row",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary={
|
|
<img
|
|
alt={parentOrg?.name}
|
|
src={parentOrg?.image || theme?.palette?.defaultImage}
|
|
style={imageStyle}
|
|
/>
|
|
}
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
padding: "8px 8px 8px 20px",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={parentOrg?.name}
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
overflow: "hidden",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary={
|
|
<div style={{ display: "flex", alignItems: "center" }}>
|
|
<img
|
|
alt={parentOrgFlag}
|
|
src={`https://flagcdn.com/w20/${parentOrgFlag}.png`}
|
|
style={{ width: "30px", height: "20px", marginRight: "5px" }}
|
|
/>
|
|
<ListItemText primary={parentOrgFlag?.toUpperCase()} />
|
|
</div>
|
|
}
|
|
style={{ display: "table-cell", padding: 8, verticalAlign: "middle" }}
|
|
/>
|
|
)}
|
|
<ListItemText
|
|
primary={parentOrg?.id}
|
|
style={{
|
|
minWidth: 300,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={
|
|
<Tooltip
|
|
title={
|
|
parentOrg?.id === userdata?.active_org?.id
|
|
? "You are already in parent organization."
|
|
: ""
|
|
}
|
|
>
|
|
<span>
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
boxShadow: "none",
|
|
textTransform: "capitalize",
|
|
fontSize: 16,
|
|
transition: "width 0.3s ease",
|
|
"&.Mui-disabled": {
|
|
backgroundColor: "rgba(200, 200, 200, 0.5)",
|
|
color: "#A9A9A9",
|
|
},
|
|
}}
|
|
color="primary"
|
|
disabled={parentOrg?.id === userdata?.active_org?.id}
|
|
onClick={() => {
|
|
handleClickChangeOrg(parentOrg?.id);
|
|
}}
|
|
>
|
|
Switch to Parent
|
|
</Button>
|
|
</span>
|
|
</Tooltip>
|
|
}
|
|
style={{ display: "table-cell", verticalAlign: "middle" }}
|
|
/>
|
|
</ListItem>
|
|
): (
|
|
<ListItem style={{ display: "table-row" }}>
|
|
{Array(5).fill().map((_, index) => (
|
|
<ListItemText
|
|
key={index}
|
|
style={{
|
|
display: "table-cell",
|
|
padding: "10px",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
primary={index === 1 ? "Parent Organization not found or May be you are not part of parent org. Please contact support@shuffler.io." : null}
|
|
colSpan={index === 0 ? 5 : undefined}
|
|
/>
|
|
))}
|
|
</ListItem>
|
|
)}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
|
|
{subOrgs.length > 0 && (
|
|
<div>
|
|
<Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}}
|
|
/>
|
|
|
|
<div
|
|
style={{
|
|
textAlign: 'left',
|
|
width: '100%',
|
|
padding: '10px',
|
|
marginTop: 20,
|
|
}}
|
|
>
|
|
<h3
|
|
style={{
|
|
margin: 0,
|
|
fontSize: '1.2rem',
|
|
fontWeight: 'bold',
|
|
letterSpacing: '1px',
|
|
color: "#ffffff"
|
|
}}
|
|
>
|
|
Sub Organizations of the Current Organization ({subOrgs.length})
|
|
</h3>
|
|
</div>
|
|
|
|
{/* <Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.inputColor,
|
|
}}
|
|
/> */}
|
|
|
|
<div style={{borderRadius: 4, marginTop: 24, border: "1px solid #494949", width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
|
<List
|
|
style={{
|
|
width: '100%',
|
|
tableLayout: "fixed",
|
|
display: "table",
|
|
minWidth: 800,
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}>
|
|
<ListItem
|
|
style={{
|
|
width: "100%",
|
|
display: "table-row",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
verticalAlign: "middle",
|
|
}}>
|
|
<ListItemText
|
|
primary="Logo"
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
paddingLeft: 20,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
textAlign: "center",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}} />
|
|
<ListItemText
|
|
primary="Name"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}} />
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary="Region"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
borderBottom: "1px solid #494949",
|
|
padding: "0px 8px 8px 8px",
|
|
}}
|
|
/>
|
|
)}
|
|
<ListItemText
|
|
primary="id"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Action"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
{subOrgs.map((data, index) => {
|
|
let regiontag = "UK";
|
|
let regionCode = "gb";
|
|
|
|
if (data.region_url?.length > 0) {
|
|
const regionsplit = data.region_url.split(".");
|
|
if (regionsplit.length > 2 && !regionsplit[0].includes("shuffler")) {
|
|
const namesplit = regionsplit[0].split("/");
|
|
regiontag = namesplit[namesplit.length - 1];
|
|
if (regiontag === "california") {
|
|
regiontag = "US";
|
|
regionCode = "us";
|
|
} else if (regiontag === "frankfurt") {
|
|
regiontag = "EU-2";
|
|
regionCode = "eu";
|
|
} else if (regiontag === "ca") {
|
|
regiontag = "CA";
|
|
regionCode = "ca";
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ListItem key={index} style={{ backgroundColor: index % 2 === 0 ? '#1A1A1A' : '#212121', width: "100%", borderBottomLeftRadius: 8, display:'table-row', borderBottomRightRadius: 8 }}>
|
|
<ListItemText primary={<img alt={data?.name} src={data.image || theme.palette.defaultImage} style={imageStyle} />} style={{ width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
padding: "8px 8px 8px 20px",
|
|
textAlign: "center", }} />
|
|
<ListItemText primary={data.name} style={{ minWidth: 100,
|
|
maxWidth: 300,
|
|
overflow: "hidden",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
textAlign: "center", }} />
|
|
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary={
|
|
<div style={{ display: "flex", alignItems: "center" }}>
|
|
<img
|
|
alt={regiontag}
|
|
src={`https://flagcdn.com/w20/${regionCode}.png`}
|
|
style={{ width: "30px", height: "20px", marginRight: "5px" }}
|
|
/>
|
|
<ListItemText primary={regiontag?.toUpperCase()} />
|
|
</div>
|
|
}
|
|
style={{ display: "table-cell", padding: 8, verticalAlign: "middle" }}
|
|
/>
|
|
)}
|
|
<ListItemText primary={data.id} style={{ minWidth: 300,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle", }} />
|
|
|
|
<ListItemText
|
|
primary={
|
|
<Tooltip title={data.id === userdata?.active_org?.id ? "You are already in this organization." : ""} disableInteractive>
|
|
<Button
|
|
color="primary"
|
|
variant='outlined'
|
|
disabled={data.id === userdata?.active_org?.id}
|
|
onClick={() => {
|
|
handleClickChangeOrg(data.id);
|
|
}}
|
|
sx={{
|
|
boxShadow:"none", textTransform:"capitalize",
|
|
fontSize:16,
|
|
'&.Mui-disabled': {
|
|
backgroundColor: 'rgba(200, 200, 200, 0.5)',
|
|
color: '#A9A9A9',
|
|
},
|
|
}}
|
|
>
|
|
Change Active Org
|
|
</Button>
|
|
</Tooltip>
|
|
}
|
|
style={{ display: "table-cell", verticalAlign: "middle" }}
|
|
/>
|
|
</ListItem>
|
|
)})}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}}
|
|
/>
|
|
|
|
<div style={{ textAlign: 'left', width: '100%', padding: '10px', marginTop: 20 }}>
|
|
<h3
|
|
style={{
|
|
margin: 0,
|
|
fontSize: '1.2rem',
|
|
fontWeight: 'bold',
|
|
letterSpacing: '1px',
|
|
color: "#ffffff"
|
|
}}
|
|
>
|
|
All Tenants
|
|
</h3>
|
|
</div>
|
|
|
|
{/* <Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.inputColor,
|
|
}}
|
|
/> */}
|
|
<div
|
|
style={{
|
|
borderRadius: 4,
|
|
marginTop: 24,
|
|
border: "1px solid #494949",
|
|
width: "100%",
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}
|
|
>
|
|
<List
|
|
style={{
|
|
width: "100%",
|
|
tableLayout: "fixed",
|
|
display: "table",
|
|
minWidth: 800,
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}
|
|
>
|
|
<ListItem
|
|
style={{
|
|
width: "100%",
|
|
display: "table-row",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
verticalAlign: "middle",
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary="Logo"
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
paddingLeft: 20,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
textAlign: "center",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Name"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary="Region"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
borderBottom: "1px solid #494949",
|
|
padding: "0px 8px 8px 8px",
|
|
}}
|
|
/>
|
|
)}
|
|
<ListItemText
|
|
primary="id"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Action"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: "1px solid #494949",
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
|
|
{userdata?.orgs?.length <= 0 ? (
|
|
[...Array(6)].map((_, rowIndex) => (
|
|
<ListItem
|
|
key={rowIndex}
|
|
style={{
|
|
display: "table-row",
|
|
backgroundColor: "#212121",
|
|
}}
|
|
>
|
|
{Array(7)
|
|
.fill()
|
|
.map((_, colIndex) => (
|
|
<ListItemText
|
|
key={colIndex}
|
|
style={{
|
|
display: "table-cell",
|
|
padding: "8px",
|
|
}}
|
|
>
|
|
<Skeleton
|
|
variant="text"
|
|
animation="wave"
|
|
sx={{
|
|
backgroundColor: "#1a1a1a",
|
|
height: "20px",
|
|
borderRadius: "4px",
|
|
}}
|
|
/>
|
|
</ListItemText>
|
|
))}
|
|
</ListItem>
|
|
))
|
|
) : (
|
|
userdata?.orgs?.length > 0 &&
|
|
userdata.orgs.map((data, index) => {
|
|
let regiontag = "UK";
|
|
let regionCode = "gb";
|
|
|
|
if (data.region_url?.length > 0) {
|
|
const regionsplit = data.region_url.split(".");
|
|
if (regionsplit.length > 2 && !regionsplit[0].includes("shuffler")) {
|
|
const namesplit = regionsplit[0].split("/");
|
|
regiontag = namesplit[namesplit.length - 1];
|
|
|
|
if (regiontag === "california") {
|
|
regiontag = "US";
|
|
regionCode = "us";
|
|
} else if (regiontag === "frankfurt") {
|
|
regiontag = "EU-2";
|
|
regionCode = "eu";
|
|
} else if (regiontag === "ca") {
|
|
regiontag = "CA";
|
|
regionCode = "ca";
|
|
}
|
|
}
|
|
}
|
|
|
|
return (
|
|
<ListItem
|
|
key={index}
|
|
style={{
|
|
display: "table-row",
|
|
verticalAlign: "middle",
|
|
padding: 8,
|
|
backgroundColor: index % 2 === 0 ? "#1A1A1A" : "#212121",
|
|
borderBottomLeftRadius:
|
|
userdata?.orgs?.length - 1 === index ? 8 : 0,
|
|
borderBottomRightRadius:
|
|
userdata?.orgs?.length - 1 === index ? 8 : 0,
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary={
|
|
<img
|
|
alt={data.name}
|
|
src={data.image || theme.palette.defaultImage}
|
|
style={imageStyle}
|
|
/>
|
|
}
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
padding: "8px 8px 8px 20px",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={data?.name}
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
overflow: "hidden",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}}
|
|
></ListItemText>
|
|
{isCloud ? (
|
|
<ListItemText
|
|
primary={
|
|
<div style={{ display: "flex", alignItems: "center" }}>
|
|
<img
|
|
alt={regiontag}
|
|
src={`https://flagcdn.com/w20/${regionCode}.png`}
|
|
style={{
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
|
|
<ListItemText primary={regiontag} />
|
|
</div>
|
|
}
|
|
style={{
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
}}
|
|
></ListItemText>
|
|
) : null}
|
|
<ListItemText
|
|
primary={data.id}
|
|
style={{
|
|
minWidth: 300,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary={
|
|
<Button
|
|
variant="outlined"
|
|
style={{
|
|
whiteSpace: "nowrap",
|
|
textTransform: "none",
|
|
fontSize: 16,
|
|
}}
|
|
disabled={data?.id === userdata?.active_org?.id}
|
|
onClick={() => {
|
|
handleClickChangeOrg(data?.id);
|
|
}}
|
|
>
|
|
Change Active Org
|
|
</Button>
|
|
}
|
|
style={{
|
|
display: "table-cell",
|
|
padding: 8,
|
|
verticalAlign: "middle",
|
|
}}
|
|
></ListItemText>
|
|
</ListItem>
|
|
);
|
|
})
|
|
)}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default TenantsTab;
|