Lalit Deore
1970 lines
79 KiB
React
1970 lines
79 KiB
React
import React, { memo, useContext, useEffect, useState } from 'react';
|
|
import {getTheme} from "../theme.jsx";
|
|
import { Context } from '../context/ContextApi.jsx';
|
|
import {
|
|
FormControl,
|
|
Card,
|
|
Tooltip,
|
|
Typography,
|
|
Switch,
|
|
Divider,
|
|
TextField,
|
|
Button,
|
|
Grid,
|
|
List,
|
|
ListItem,
|
|
ListItemText,
|
|
ListItemAvatar,
|
|
Avatar,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogActions,
|
|
DialogContent,
|
|
Skeleton,
|
|
IconButton,
|
|
Modal,
|
|
Checkbox,
|
|
} from "@mui/material";
|
|
|
|
import {
|
|
Edit as EditIcon,
|
|
Polyline as PolylineIcon,
|
|
CheckCircle as CheckCircleIcon,
|
|
Close as CloseIcon,
|
|
Apps as AppsIcon,
|
|
Business as BusinessIcon,
|
|
Flag,
|
|
ArrowDropDown as ArrowDropDownIcon,
|
|
VisibilityOff,
|
|
Visibility,
|
|
|
|
} 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("gb");
|
|
const [parentOrgRegionName, setParentOrgRegionName] = React.useState("UK");
|
|
const [loadOrgs, setLoadOrgs] = React.useState(true);
|
|
const [, forceUpdate] = React.useState();
|
|
const [suborglistOpen, setSuborglistOpen] = React.useState(false);
|
|
const [allTenantsOpen, setAllTenantsOpen] = React.useState(false);
|
|
const itemColor = "black";
|
|
const { themeMode, supportEmail, brandColor } = useContext(Context);
|
|
const theme = getTheme(themeMode, brandColor);
|
|
const [accountDeleteButtonClicked, setAccountDeleteButtonClicked] = useState(false);
|
|
const [selectedSuborg, setSelectedSuborg] = useState(null);
|
|
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";
|
|
}else if (regiontag === "au") {
|
|
regiontag = "AUS";
|
|
regionCode = "au"
|
|
}
|
|
}
|
|
setParentOrgFlag(regionCode);
|
|
setParentOrgRegionName(regiontag);
|
|
}
|
|
}
|
|
}, [parentOrg, parentOrgFlag]);
|
|
|
|
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";
|
|
}else if (regiontag === "au") {
|
|
regiontag = "AUS";
|
|
regionCode = "au"
|
|
}
|
|
}
|
|
setParentOrgFlag(regionCode);
|
|
setParentOrgRegionName(regiontag);
|
|
}
|
|
}
|
|
})
|
|
.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 };
|
|
const url = globalUrl + `/api/v1/orgs/${currentOrgId}/create_sub_org`;
|
|
setSuborglistOpen(true)
|
|
|
|
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 DeleteAccountPopUp = () => {
|
|
const [userDeleteAccepted, setUserDeleteAccepted] = useState(false);
|
|
const [password, setPassword] = useState("");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
const [disabled, setDisabled] = useState(true);
|
|
const [open, setOpen] = useState(true);
|
|
const boxStyling = {
|
|
position: "relative",
|
|
top: "50%",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
zIndex: "9999",
|
|
backgroundColor: theme.palette.backgroundColor,
|
|
color: theme.palette.text.primary,
|
|
padding: 20,
|
|
borderRadius: 5,
|
|
boxShadow: "0 0 10px rgba(0, 0, 0, 0.3)",
|
|
width: 430,
|
|
height: 430,
|
|
};
|
|
|
|
const closeIconButtonStyling = {
|
|
color: theme.palette.text.primary,
|
|
border: "none",
|
|
backgroundColor: "transparent",
|
|
position: 'relative',
|
|
width: 20,
|
|
height: 20,
|
|
cursor: "pointer",
|
|
left: "calc(100% - 30px)",
|
|
};
|
|
|
|
const handlePasswordVisibility = () => {
|
|
setShowPassword(!showPassword);
|
|
};
|
|
|
|
const buttonStyle = {
|
|
marginTop: 20,
|
|
height: 50,
|
|
border: "none",
|
|
width: "100%",
|
|
fontSize: 16,
|
|
backgroundColor: disabled ? "gray" : "red",
|
|
color: theme.palette.text.primary,
|
|
cursor: disabled === false && "pointer",
|
|
};
|
|
|
|
const handlePasswordChange = (e) => {
|
|
setPassword(e.target.value);
|
|
};
|
|
|
|
const handleCheckBoxEvent = () => {
|
|
setUserDeleteAccepted((prev) => !prev);
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (password.length > 8 && userDeleteAccepted) {
|
|
setDisabled(false);
|
|
} else {
|
|
setDisabled(true);
|
|
}
|
|
}, [password, userDeleteAccepted]);
|
|
|
|
|
|
const handleDeleteAccount = () => {
|
|
const baseURL = globalUrl;
|
|
|
|
const url = `${baseURL}/api/v1/orgs/${selectedSuborg?.id}`;
|
|
|
|
const data = {
|
|
password: password,
|
|
};
|
|
|
|
fetch(url, {
|
|
mode: "cors",
|
|
method: "DELETE",
|
|
body: JSON.stringify(data),
|
|
credentials: "include",
|
|
crossDomain: true,
|
|
withCredentials: true,
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.success) {
|
|
toast.success(
|
|
"Suborg deleted"
|
|
);
|
|
handleGetSubOrgs(userdata.active_org.id);
|
|
setAccountDeleteButtonClicked(false);
|
|
|
|
} else {
|
|
if (data.reason) {
|
|
toast.error(data.reason);
|
|
}else {
|
|
toast.error("Failed to delete suborg. Please try again or contact support@shuffler.io for help.");
|
|
}
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error(
|
|
"There was a problem with your fetch operation:",
|
|
error
|
|
);
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Modal open= {open} >
|
|
<div style={boxStyling}>
|
|
<IconButton
|
|
style={closeIconButtonStyling}
|
|
onClick={() => {
|
|
setAccountDeleteButtonClicked(false);
|
|
setSelectedSuborg(null);
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<h1 style={{textAlign:"center", margin : "0 0 20px 0"}}>Sub-Organization</h1>
|
|
{/* <div style={{paddingLeft: 15}} > */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
textAlign: "left",
|
|
// paddingLeft: 15
|
|
// marginLeft: 20
|
|
}}
|
|
>
|
|
<label>If you delete your suborg then:</label>
|
|
<ul style={{ textAlign: "left" }}>
|
|
<li>
|
|
<label>
|
|
Your suborg information will be removed from our Database
|
|
permanently.
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>This action cannot be reversed.</label>
|
|
</li>
|
|
</ul>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: 10,
|
|
}}
|
|
>
|
|
<Checkbox
|
|
checked={userDeleteAccepted}
|
|
onChange={handleCheckBoxEvent}
|
|
size="medium"
|
|
/>
|
|
<label style={{ fontSize: "16px", color: theme.palette.text.primary }}>
|
|
I have read the above information and I agree to it completely
|
|
</label>
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginTop: 20,
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 8,
|
|
}}
|
|
>
|
|
<label>Enter password to delete suborg {" " + selectedSuborg?.name}</label>
|
|
<TextField
|
|
style={{
|
|
backgroundColor: theme.palette.inputColor,
|
|
flex: "1",
|
|
}}
|
|
type={showPassword ? "text" : "password"}
|
|
value={password}
|
|
onChange={handlePasswordChange}
|
|
required
|
|
placeholder="Password"
|
|
id="standard-required"
|
|
autoComplete="off"
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
height: "45px",
|
|
fontSize: "1em",
|
|
borderRadius: theme.palette.textFieldStyle.borderRadius,
|
|
},
|
|
endAdornment: (
|
|
<IconButton
|
|
onClick={handlePasswordVisibility}
|
|
style={{color:theme.palette.text.primary}}
|
|
>
|
|
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
</IconButton>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
<button
|
|
style={buttonStyle}
|
|
disabled={disabled}
|
|
onClick={handleDeleteAccount}
|
|
>
|
|
Delete Suborg
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
);
|
|
};
|
|
|
|
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>
|
|
<Typography variant='h5' color="textPrimary">Add Sub-Organization</Typography>
|
|
</DialogTitle>
|
|
<DialogContent>
|
|
<div>
|
|
Name
|
|
<TextField
|
|
color="primary"
|
|
style={{ backgroundColor: theme.palette.textFieldStyle.backgroundColor }}
|
|
autoFocus
|
|
InputProps={{
|
|
style: {
|
|
height: "50px",
|
|
color: theme.palette.textFieldStyle.color,
|
|
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: theme.palette.primary.main }}
|
|
onClick={() => setModalOpen(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
variant="contained"
|
|
style={{ borderRadius: "2px", fontSize: 16, textTransform: "none",}}
|
|
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)" : theme.palette.primary.main, 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: theme.palette.platformColor, borderTopRightRadius: '8px', borderBottomRightRadius: 8, borderLeft: theme.palette.defaultBorder,}}>
|
|
{modalView}
|
|
{cloudSyncModal}
|
|
{accountDeleteButtonClicked && <DeleteAccountPopUp/>}
|
|
<div style={{height: "100%", maxHeight: 1700, overflowY: "auto",overflowX: 'hidden', scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin'}}>
|
|
<div style={{ height: "100%", width: "calc(100% - 20px)", scrollbarColor: theme.palette.scrollbarColorTransparent, scrollbarWidth: 'thin' }}>
|
|
<div style={{ marginBottom: 20 }}>
|
|
<Typography variant='h5' color="textPrimary" style={{ marginBottom: 8, marginTop: 0 }}>Tenants</Typography>
|
|
<Typography variant='body2' color="textSecondary">
|
|
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 ${supportEmail} to try it out.`
|
|
: ''}
|
|
<a
|
|
href="/docs/organizations"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
style={{ color: theme.palette.linkColor }}
|
|
>
|
|
Learn more
|
|
</a>
|
|
</Typography>
|
|
</div>
|
|
|
|
<Button
|
|
style={{ textTransform: 'none', fontSize: 16, 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,
|
|
}}
|
|
>
|
|
<Typography
|
|
variant='h6'
|
|
color="textPrimary"
|
|
style={{
|
|
margin: 0,
|
|
}}
|
|
>
|
|
Your Parent Organization
|
|
</Typography>
|
|
</div>
|
|
<div>
|
|
|
|
|
|
{/* <Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.inputColor,
|
|
}}
|
|
/> */}
|
|
|
|
|
|
<div style={{ borderRadius: 4, marginTop: 24, border: theme.palette.defaultBorder, 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: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Name"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary="Region"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
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: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Action"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
|
|
{loadOrgs ? (
|
|
[...Array(3)].map((_, rowIndex) => (
|
|
<ListItem
|
|
key={rowIndex}
|
|
style={{
|
|
display: "flex",
|
|
backgroundColor: theme.palette.platformColor,
|
|
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: theme.palette.loaderColor,
|
|
borderRadius: "4px",
|
|
}}
|
|
/>
|
|
</ListItemText>
|
|
))}
|
|
</ListItem>
|
|
))
|
|
) : parentOrg?.id?.length > 0 ? (
|
|
<ListItem
|
|
style={{
|
|
backgroundColor: theme.palette.platformColor,
|
|
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={parentOrgRegionName?.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 ${supportEmail}` : 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,
|
|
}}
|
|
>
|
|
<Typography
|
|
variant='h6'
|
|
color="textPrimary"
|
|
style={{
|
|
margin: 0,
|
|
}}
|
|
>
|
|
Sub Organizations of the Current Organization ({subOrgs.length})
|
|
</Typography>
|
|
</div>
|
|
|
|
{/* <Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.inputColor,
|
|
}}
|
|
/> */}
|
|
|
|
<div style={{borderRadius: 4, marginTop: 24, border: theme.palette.defaultBorder, width: "100%", overflowX: "auto", paddingBottom: 0 }}>
|
|
<List
|
|
style={{
|
|
width: '100%',
|
|
tableLayout: "fixed",
|
|
display: "table",
|
|
minWidth: 800,
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}>
|
|
{!suborglistOpen ?
|
|
<ListItem
|
|
style={{
|
|
width: "100%",
|
|
display: "table-row",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
verticalAlign: "middle",
|
|
itemAlign: "center",
|
|
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary={
|
|
<Button
|
|
fullWidth
|
|
variant="secondary"
|
|
style={{
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => setSuborglistOpen(true)}
|
|
>
|
|
Show Sub-Organizations <ArrowDropDownIcon />
|
|
</Button>
|
|
}
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
paddingLeft: 20,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
textAlign: "center",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
:
|
|
<span>
|
|
<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: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}} />
|
|
<ListItemText
|
|
primary="Name"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}} />
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary="Region"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
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: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Action"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
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";
|
|
}
|
|
}
|
|
}
|
|
var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
|
|
if (index % 2 === 0) {
|
|
bgColor = themeMode === "dark" ? "#1A1A1A" : "#EAEAEA";
|
|
}
|
|
|
|
return (
|
|
<ListItem key={index} style={{ backgroundColor: bgColor, 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>
|
|
{selectedOrganization?.creator_org?.length > 0 ? null :
|
|
<Button
|
|
variant="outlined"
|
|
sx={{
|
|
whiteSpace: "nowrap",
|
|
textTransform: "none",
|
|
fontSize: "16px",
|
|
color: "red",
|
|
marginLeft: "5px",
|
|
borderColor: "red",
|
|
"&:hover": {
|
|
color: theme.palette.text.primary,
|
|
backgroundColor: "red",
|
|
},
|
|
|
|
}}
|
|
disabled={data?.id === userdata?.active_org?.id}
|
|
onClick={() => {
|
|
setAccountDeleteButtonClicked(true);
|
|
setSelectedSuborg(data);
|
|
}}
|
|
>
|
|
Delete Org
|
|
</Button>}
|
|
|
|
</>
|
|
}
|
|
style={{ display: "table-cell", verticalAlign: "middle" }}
|
|
/>
|
|
</ListItem>
|
|
)})}
|
|
|
|
</span>}
|
|
|
|
</List>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
}}
|
|
/>
|
|
|
|
<div style={{ textAlign: 'left', width: '100%', padding: '10px', marginTop: 20 }}>
|
|
<Typography
|
|
variant='h6'
|
|
color="textPrimary"
|
|
style={{
|
|
margin: 0,
|
|
}}
|
|
>
|
|
All Tenants
|
|
</Typography>
|
|
</div>
|
|
|
|
{/* <Divider
|
|
style={{
|
|
marginTop: 20,
|
|
marginBottom: 20,
|
|
backgroundColor: theme.palette.inputColor,
|
|
}}
|
|
/> */}
|
|
<div
|
|
style={{
|
|
borderRadius: 4,
|
|
marginTop: 24,
|
|
border: theme.palette.defaultBorder,
|
|
width: "100%",
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}
|
|
>
|
|
<List
|
|
style={{
|
|
width: "100%",
|
|
tableLayout: "fixed",
|
|
display: "table",
|
|
minWidth: 800,
|
|
overflowX: "auto",
|
|
paddingBottom: 0,
|
|
}}
|
|
>
|
|
{!allTenantsOpen ?
|
|
<ListItem
|
|
style={{
|
|
width: "100%",
|
|
display: "table-row",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
verticalAlign: "middle",
|
|
itemAlign: "center",
|
|
|
|
}}
|
|
>
|
|
<ListItemText
|
|
primary={
|
|
<Button
|
|
fullWidth
|
|
variant="secondary"
|
|
style={{
|
|
textTransform: 'none',
|
|
}}
|
|
onClick={() => setAllTenantsOpen(true)}
|
|
>
|
|
Show ALL your tenants <ArrowDropDownIcon />
|
|
</Button>
|
|
}
|
|
style={{
|
|
width: 100,
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
paddingLeft: 20,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
textAlign: "center",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
:
|
|
<span>
|
|
<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: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Name"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 300,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
textAlign: "center",
|
|
}}
|
|
/>
|
|
{isCloud && (
|
|
<ListItemText
|
|
primary="Region"
|
|
style={{
|
|
minWidth: 100,
|
|
maxWidth: 100,
|
|
display: "table-cell",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
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: theme.palette.defaultBorder,
|
|
verticalAlign: "middle",
|
|
}}
|
|
/>
|
|
<ListItemText
|
|
primary="Action"
|
|
style={{
|
|
minWidth: 400,
|
|
maxWidth: 400,
|
|
display: "table-cell",
|
|
padding: "0px 8px 8px 8px",
|
|
whiteSpace: "nowrap",
|
|
textOverflow: "ellipsis",
|
|
borderBottom: theme.palette.defaultBorder,
|
|
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";
|
|
}
|
|
}
|
|
}
|
|
|
|
var bgColor = themeMode === "dark" ? "#212121" : "#FFFFFF";
|
|
if (index % 2 === 0) {
|
|
bgColor = themeMode === "dark" ? "#1A1A1A" : "#EAEAEA";
|
|
}
|
|
|
|
return (
|
|
<ListItem
|
|
key={index}
|
|
style={{
|
|
display: "table-row",
|
|
verticalAlign: "middle",
|
|
padding: 8,
|
|
backgroundColor: bgColor,
|
|
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>
|
|
);
|
|
})
|
|
)}
|
|
</span>}
|
|
</List>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default TenantsTab;
|