Lalit Deore
1160 lines
39 KiB
React
1160 lines
39 KiB
React
import React, { memo, useEffect, useState, useContext } from "react";
|
|
|
|
import { makeStyles } from "@mui/styles";
|
|
import { toast } from "react-toastify"
|
|
import { getTheme } from '../theme.jsx';
|
|
import { Context } from "../context/ContextApi.jsx";
|
|
//import { useAlert
|
|
|
|
import {
|
|
FormControl,
|
|
InputLabel,
|
|
Paper,
|
|
OutlinedInput,
|
|
Checkbox,
|
|
Card,
|
|
Tooltip,
|
|
FormControlLabel,
|
|
Chip,
|
|
Link,
|
|
Typography,
|
|
Switch,
|
|
Select,
|
|
MenuItem,
|
|
Divider,
|
|
ListItemText,
|
|
TextField,
|
|
Button,
|
|
Tabs,
|
|
Tab,
|
|
Grid,
|
|
Autocomplete,
|
|
} from "@mui/material";
|
|
|
|
import {
|
|
ExpandLess as ExpandLessIcon,
|
|
ExpandMore as ExpandMoreIcon,
|
|
Save as SaveIcon,
|
|
CookieSharp,
|
|
} from "@mui/icons-material";
|
|
import CloudSyncTab from "./CloudSyncTab.jsx";
|
|
|
|
const useStyles = makeStyles({
|
|
notchedOutline: {
|
|
borderColor: "#f85a3e !important",
|
|
},
|
|
});
|
|
|
|
const OrgHeaderexpandedNew = (props) => {
|
|
const {
|
|
userdata,
|
|
selectedOrganization,
|
|
setSelectedOrganization,
|
|
globalUrl,
|
|
isCloud,
|
|
adminTab,
|
|
selectedStatus,
|
|
setSelectedStatus,
|
|
isEditOrgTab,
|
|
handleStatusChange
|
|
} = props;
|
|
|
|
const classes = useStyles();
|
|
const defaultBranch = "main";
|
|
const ITEM_HEIGHT = 48;
|
|
const ITEM_PADDING_TOP = 8;
|
|
const MenuProps = {
|
|
PaperProps: {
|
|
style: {
|
|
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
|
width: 300,
|
|
borderRadius: 4,
|
|
overflowY: "scroll",
|
|
},
|
|
},
|
|
getContentAnchorEl: () => null,
|
|
};
|
|
|
|
const [orgName, setOrgName] = useState(selectedOrganization?.name);
|
|
const [orgDescription, setOrgDescription] = React.useState(
|
|
selectedOrganization.description
|
|
);
|
|
|
|
const [appDownloadUrl, setAppDownloadUrl] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? "https://github.com/frikky/shuffle-apps"
|
|
: selectedOrganization.defaults.app_download_repo === undefined ||
|
|
selectedOrganization.defaults.app_download_repo.length === 0
|
|
? "https://github.com/frikky/shuffle-apps"
|
|
: selectedOrganization.defaults.app_download_repo
|
|
);
|
|
|
|
const [openNotification, setOpenNotification] = React.useState(false);
|
|
const { themeMode, supportEmail, brandColor } = useContext(Context);
|
|
const theme = getTheme(themeMode, brandColor);
|
|
|
|
const [appDownloadBranch, setAppDownloadBranch] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? defaultBranch
|
|
: selectedOrganization.defaults.app_download_branch === undefined ||
|
|
selectedOrganization.defaults.app_download_branch.length === 0
|
|
? defaultBranch
|
|
: selectedOrganization.defaults.app_download_branch
|
|
);
|
|
const [workflowDownloadUrl, setWorkflowDownloadUrl] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? "https://github.com/frikky/shuffle-apps"
|
|
: selectedOrganization.defaults.workflow_download_repo === undefined ||
|
|
selectedOrganization.defaults.workflow_download_repo.length === 0
|
|
? "https://github.com/frikky/shuffle-workflows"
|
|
: selectedOrganization.defaults.workflow_download_repo
|
|
);
|
|
const [workflowDownloadBranch, setWorkflowDownloadBranch] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? defaultBranch
|
|
: selectedOrganization.defaults.workflow_download_branch === undefined ||
|
|
selectedOrganization.defaults.workflow_download_branch.length === 0
|
|
? defaultBranch
|
|
: selectedOrganization.defaults.workflow_download_branch
|
|
);
|
|
|
|
const [documentationReference, setDocumentationReference] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? ""
|
|
: selectedOrganization.defaults.documentation_reference === undefined ||
|
|
selectedOrganization.defaults.documentation_reference.length === 0
|
|
? ""
|
|
: selectedOrganization.defaults.documentation_reference
|
|
);
|
|
const [newsletter, setNewsletter] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? true
|
|
: selectedOrganization.defaults.newsletter === undefined ||
|
|
selectedOrganization.defaults.newsletter.length === 0
|
|
? true
|
|
: !selectedOrganization.defaults.newsletter
|
|
)
|
|
|
|
const [weeklyRecommendations, setWeeklyRecommendations] = React.useState(
|
|
selectedOrganization.defaults === undefined
|
|
? true
|
|
: selectedOrganization.defaults.weekly_recommendations === undefined ||
|
|
selectedOrganization.defaults.weekly_recommendations.length === 0
|
|
? true
|
|
: !selectedOrganization.defaults.weekly_recommendations
|
|
)
|
|
|
|
const [uploadRepo, setUploadRepo] = React.useState(selectedOrganization.defaults === undefined ? "" : selectedOrganization.defaults.workflow_upload_repo === undefined || selectedOrganization.defaults.workflow_upload_repo.length === 0 ? "" : selectedOrganization.defaults.workflow_upload_repo)
|
|
const [uploadBranch, setUploadBranch] = React.useState(selectedOrganization.defaults === undefined ? defaultBranch : selectedOrganization.defaults.workflow_upload_branch === undefined || selectedOrganization.defaults.workflow_upload_branch.length === 0 ? defaultBranch : selectedOrganization.defaults.workflow_upload_branch)
|
|
const [uploadUsername, setUploadUsername] = React.useState(selectedOrganization.defaults === undefined ? "" : selectedOrganization.defaults.workflow_upload_username === undefined || selectedOrganization.defaults.workflow_upload_username.length === 0 ? "" : selectedOrganization.defaults.workflow_upload_username)
|
|
const [uploadToken, setUploadToken] = React.useState("")
|
|
const [regionStatus, setRegionStatus] = useState();
|
|
|
|
useEffect(() => {
|
|
|
|
if (documentationReference !== selectedOrganization?.defaults?.documentation_reference) {
|
|
setDocumentationReference(selectedOrganization?.defaults?.documentation_reference)
|
|
}
|
|
|
|
if (uploadRepo !== selectedOrganization?.defaults?.workflow_upload_repo) {
|
|
setUploadRepo(selectedOrganization?.defaults?.workflow_upload_repo)
|
|
}
|
|
|
|
if (uploadBranch !== selectedOrganization?.defaults?.workflow_upload_branch) {
|
|
setUploadBranch(selectedOrganization?.defaults?.workflow_upload_branch)
|
|
}
|
|
|
|
if (uploadUsername !== selectedOrganization?.defaults?.workflow_upload_username) {
|
|
setUploadUsername(selectedOrganization?.defaults?.workflow_upload_username)
|
|
}
|
|
|
|
// Not showing the token in the UI (cause it's in plain text)
|
|
// if (uploadToken !== selectedOrganization?.defaults?.workflow_upload_token) {
|
|
// setUploadToken(selectedOrganization?.defaults?.workflow_upload_token)
|
|
// }
|
|
}, [selectedOrganization])
|
|
|
|
useEffect(() => {
|
|
if (selectedOrganization !== undefined && selectedOrganization !== null) {
|
|
if ((orgName === undefined || orgName === null || orgName.length === 0) && selectedOrganization?.name !== orgName) {
|
|
setOrgName(selectedOrganization?.name)
|
|
}
|
|
if ((orgDescription === undefined || orgDescription === null || orgDescription.length === 0) && selectedOrganization?.description !== orgDescription) {
|
|
setOrgDescription(selectedOrganization?.description)
|
|
}
|
|
}
|
|
}, [selectedOrganization])
|
|
|
|
const handleEditOrg = (
|
|
name,
|
|
description,
|
|
orgId,
|
|
image,
|
|
defaults,
|
|
sso_config,
|
|
lead_info,
|
|
) => {
|
|
const data = {
|
|
name: name,
|
|
description: description,
|
|
org_id: orgId,
|
|
image: image,
|
|
defaults: defaults,
|
|
sso_config: sso_config,
|
|
lead_info: lead_info,
|
|
mfa_required: selectedOrganization?.mfa_required,
|
|
Billing: selectedOrganization?.Billing,
|
|
};
|
|
|
|
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 handleSendChangeRegionMail = (region) => {
|
|
if (selectedOrganization === undefined || selectedOrganization === null) {
|
|
toast.error(`Failed to send request for changing region. Please contact ${supportEmail}`)
|
|
return
|
|
}
|
|
|
|
const regionToCloudRegion = {
|
|
'US': 'us-west2',
|
|
'EU': 'europe-west3',
|
|
'CA': 'northamerica-northeast1',
|
|
'UK': 'europe-west2',
|
|
'EU-2': 'europe-west3'
|
|
};
|
|
|
|
const destinationRegion = regionToCloudRegion[region] || region;
|
|
|
|
var data = {
|
|
dst_region: destinationRegion
|
|
}
|
|
|
|
toast.info("Sending request for changing region to " + region)
|
|
|
|
fetch(`${globalUrl}/api/v1/orgs/${selectedOrganization?.id}/change/region/request`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
body: JSON.stringify(data),
|
|
}).then((response) => {
|
|
if (response.status !== 200) {
|
|
toast.error(`Failed to send request for changing region. Please contact ${supportEmail}`)
|
|
} else {
|
|
toast.success("Successfully sent request for region change. We will process the move and contact you shortly.")
|
|
}
|
|
}).catch((err) => {
|
|
console.log(err)
|
|
toast.error(`Failed to send request for changing region. Please contact ${supportEmail}`)
|
|
})
|
|
}
|
|
|
|
const setSelectedRegion = (region) => {
|
|
|
|
// send a POST request to /api/v1/orgs/{org_id}/region with the region as the body
|
|
const regionMap = {
|
|
"US": "us-west2",
|
|
"EU": "europe-west2",
|
|
"CA": "northamerica-northeast1",
|
|
"UK": "europe-west2",
|
|
"EU-2": "europe-west3",
|
|
"AUS": "australia-southeast1"
|
|
};
|
|
|
|
region = regionMap[region] || region;
|
|
|
|
var data = {
|
|
dst_region: region
|
|
}
|
|
|
|
toast.info("Changing region to " + region + "...This may take a few minutes.")
|
|
|
|
fetch(`${globalUrl}/api/v1/orgs/${selectedOrganization.id}/change/region`, {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
Accept: "application/json",
|
|
},
|
|
credentials: "include",
|
|
body: JSON.stringify(data),
|
|
timeOut: 1000
|
|
}).then((response) => {
|
|
if (response.status !== 200) {
|
|
response.json().then((reason) => {
|
|
toast.error("Failed to change region: " + reason.reason)
|
|
}).catch((err) => {
|
|
toast.error("Failed to change region")
|
|
});
|
|
}
|
|
else {
|
|
toast("Region changed successfully! Reloading in 5 seconds..")
|
|
// Reload the page in 2 seconds
|
|
setTimeout(() => {
|
|
window.location.reload()
|
|
}, 5000)
|
|
|
|
}
|
|
|
|
// return responseJson
|
|
})
|
|
}
|
|
|
|
|
|
const orgSaveButton = (
|
|
<Tooltip title="Save any unsaved data" placement="bottom">
|
|
<Button
|
|
style={{ width: 244, height: 51, display: 'flex', justifyContent: 'center', textTransform: 'capitalize', padding: "16px, 24px, 16px, 24px", borderRadius: 4, fontSize: 16, }}
|
|
variant="contained"
|
|
color="primary"
|
|
disabled={
|
|
userdata === undefined ||
|
|
userdata === null ||
|
|
userdata.admin !== "true"
|
|
}
|
|
onClick={() =>
|
|
handleEditOrg(
|
|
orgName,
|
|
orgDescription,
|
|
selectedOrganization.id,
|
|
selectedOrganization.image,
|
|
{
|
|
app_download_repo: appDownloadUrl,
|
|
app_download_branch: appDownloadBranch,
|
|
workflow_download_repo: workflowDownloadUrl,
|
|
workflow_download_branch: workflowDownloadBranch,
|
|
notification_workflow: selectedOrganization?.defaults?.notification_workflow,
|
|
documentation_reference: documentationReference,
|
|
workflow_upload_repo: uploadRepo,
|
|
workflow_upload_branch: uploadBranch,
|
|
workflow_upload_username: uploadUsername,
|
|
workflow_upload_token: uploadToken,
|
|
|
|
newsletter: !newsletter,
|
|
weekly_recommendations: !weeklyRecommendations,
|
|
},
|
|
{
|
|
sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
|
|
sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
|
|
client_id: selectedOrganization?.sso_config?.client_id,
|
|
client_secret: selectedOrganization?.sso_config?.client_secret,
|
|
openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
|
|
openid_token: selectedOrganization?.sso_config?.openid_token,
|
|
SSORequired: selectedOrganization?.sso_config?.SSORequired,
|
|
auto_provision: selectedOrganization?.sso_config?.auto_provision,
|
|
}
|
|
)
|
|
}
|
|
>
|
|
Save Changes
|
|
{/* <SaveIcon /> */}
|
|
</Button>
|
|
</Tooltip>
|
|
);
|
|
|
|
return (
|
|
<div style={{ textAlign: "left", maxWidth: "95%" }}>
|
|
|
|
{/*
|
|
<Grid container spacing={3} style={{ textAlign: "left" }}>
|
|
<Grid item xs={12} style={{}}>
|
|
<Typography variant="body1">
|
|
Email settings
|
|
</Typography>
|
|
<Typography variant="body2" color="textSecondary" style={{marginBottom: 5, }}>
|
|
Enable or disable email notifications for your organization.
|
|
</Typography>
|
|
|
|
<div style={{display: "flex", }}>
|
|
<ListItemText primary={"Newsletter: "} style={{maxWidth: 90, marginTop: 10, }}/>
|
|
<Checkbox checked={newsletter} style={{marginTop: 3, }}
|
|
onChange={(e) => {
|
|
setNewsletter(e.target.checked)
|
|
}}
|
|
disabled={!isCloud}
|
|
/>
|
|
|
|
<ListItemText primary={"Weekly Recommendations: "} style={{marginLeft: 50, marginTop: 10, maxWidth: 225, }}/>
|
|
<Checkbox checked={weeklyRecommendations} style={{marginTop: 3, }}
|
|
onChange={(e) => {
|
|
setWeeklyRecommendations(e.target.checked)
|
|
}}
|
|
disabled={!isCloud}
|
|
/>
|
|
</div>
|
|
</Grid>
|
|
</Grid>
|
|
*/}
|
|
|
|
<Grid container spacing={3} style={{ textAlign: "left", marginTop: 5, }}>
|
|
<Grid item xs={12} style={{}}>
|
|
<span>
|
|
<div style={{}}>
|
|
<div style={{ flex: "3", color: theme.palette.text.primary }}>
|
|
<div style={{ marginTop: 8, display: "flex" }} />
|
|
<div style={{ display: "flex" }}>
|
|
<div style={{ width: "100%", maxWidth: 434, marginRight: 10 }}>
|
|
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme?.typography?.fontFamily}}>Name</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
display: "flex",
|
|
height: 35,
|
|
width: "100%",
|
|
maxWidth: 434,
|
|
marginTop: "5px",
|
|
marginRight: "15px",
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
placeholder="Name"
|
|
type="name"
|
|
id="standard-required"
|
|
margin="normal"
|
|
variant="outlined"
|
|
value={orgName}
|
|
onBlur={() => {
|
|
if ((orgName !== selectedOrganization?.name) && (orgName !== "")) {
|
|
handleEditOrg(
|
|
orgName,
|
|
orgDescription,
|
|
selectedOrganization.id,
|
|
selectedOrganization.image,
|
|
{
|
|
app_download_repo: selectedOrganization?.defaults?.app_download_repo,
|
|
app_download_branch: selectedOrganization?.defaults?.app_download_branch,
|
|
workflow_download_repo: selectedOrganization?.defaults?.workflow_download_repo,
|
|
workflow_download_branch: selectedOrganization?.defaults?.workflow_download_branch,
|
|
notification_workflow: selectedOrganization?.defaults?.notification_workflow,
|
|
documentation_reference: selectedOrganization?.defaults?.documentation_reference,
|
|
workflow_upload_repo: selectedOrganization?.defaults?.workflow_upload_repo,
|
|
workflow_upload_branch: selectedOrganization?.defaults?.workflow_upload_branch,
|
|
workflow_upload_username: selectedOrganization?.defaults?.workflow_upload_username,
|
|
workflow_upload_token: selectedOrganization?.defaults?.workflow_upload_token,
|
|
newsletter: !newsletter,
|
|
weekly_recommendations: !weeklyRecommendations,
|
|
},
|
|
{
|
|
sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
|
|
sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
|
|
client_id: selectedOrganization?.sso_config?.client_id,
|
|
client_secret: selectedOrganization?.sso_config?.client_secret,
|
|
openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
|
|
openid_token: selectedOrganization?.sso_config?.openid_token,
|
|
SSORequired: selectedOrganization?.sso_config?.SSORequired,
|
|
auto_provision: selectedOrganization?.sso_config?.auto_provision,
|
|
}
|
|
)
|
|
}
|
|
}}
|
|
onChange={(e) => {
|
|
if (e.target.value.length > 100) {
|
|
toast("Choose a shorter name.");
|
|
return;
|
|
}
|
|
|
|
setOrgName(e.target.value);
|
|
}}
|
|
color="primary"
|
|
InputProps={{
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
height: "35px",
|
|
fontSize: "1em",
|
|
borderRadius: 4,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
},
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
{userdata?.support ? (
|
|
<div style={{ alignItems: 'center' }}>
|
|
<div style={{ marginRight: '12px', color: theme.palette.text.primary, fontFamily: theme?.typography?.fontFamily, marginTop: 2.5 }}>Status</div>
|
|
<FormControl style={{ width: 220, height: 35 }}>
|
|
<Select
|
|
style={{ minWidth: 220, marginTop: 5, maxWidth: 220, height: 35, borderRadius: 4, color: theme.palette.textFieldStyle.color}}
|
|
id="multiselect-status"
|
|
multiple
|
|
value={selectedStatus}
|
|
onChange={(event) => { handleStatusChange(event); setSelectedStatus(event.target.value) }}
|
|
input={<OutlinedInput />}
|
|
renderValue={(selected) => selected.join(', ')}
|
|
MenuProps={MenuProps}
|
|
>
|
|
{["contacted", "lead", "demo done", "pov", "customer", "open source", "student", "internal", "creator", "tech partner", "integration partner", "distribution partner", "channel partner", "service partner", "old customer", "old lead"].map((name) => (
|
|
<MenuItem key={name} value={name}>
|
|
<Checkbox checked={selectedStatus.indexOf(name) > -1} />
|
|
<ListItemText primary={name} />
|
|
</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
</div>
|
|
) : null}
|
|
|
|
|
|
{isCloud ? (
|
|
<div style={{ marginLeft: 13, fontSize: 16, color: "#9E9E9E" }} >
|
|
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme?.typography?.fontFamily}}>Change Region</Typography>
|
|
<RegionChangeModal selectedOrganization={selectedOrganization} setSelectedRegion={setSelectedRegion} userdata={userdata} handleSendChangeRegionMail={handleSendChangeRegionMail} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
<div style={{ marginTop: "10px" }} />
|
|
<Typography variant="text" style={{color: theme.palette.text.primary, fontFamily: theme?.typography?.fontFamily}}>Description</Typography>
|
|
<div style={{ display: "flex" }}>
|
|
<TextField
|
|
required
|
|
multiline
|
|
rows={3}
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "5px",
|
|
marginRight: "15px",
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
height: 89,
|
|
borderRadius: 4,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="A description for the organization"
|
|
value={orgDescription}
|
|
onBlur={() => {
|
|
if ((orgDescription !== selectedOrganization?.description) && (orgDescription !== "")) {
|
|
handleEditOrg(
|
|
orgName,
|
|
orgDescription,
|
|
selectedOrganization.id,
|
|
selectedOrganization.image,
|
|
{
|
|
app_download_repo: selectedOrganization?.defaults?.app_download_repo,
|
|
app_download_branch: selectedOrganization?.defaults?.app_download_branch,
|
|
workflow_download_repo: selectedOrganization?.defaults?.workflow_download_repo,
|
|
workflow_download_branch: selectedOrganization?.defaults?.workflow_download_branch,
|
|
notification_workflow: selectedOrganization?.defaults?.notification_workflow,
|
|
documentation_reference: selectedOrganization?.defaults?.documentation_reference,
|
|
workflow_upload_repo: selectedOrganization?.defaults?.workflow_upload_repo,
|
|
workflow_upload_branch: selectedOrganization?.defaults?.workflow_upload_branch,
|
|
workflow_upload_username: selectedOrganization?.defaults?.workflow_upload_username,
|
|
workflow_upload_token: selectedOrganization?.defaults?.workflow_upload_token,
|
|
newsletter: !newsletter,
|
|
weekly_recommendations: !weeklyRecommendations,
|
|
},
|
|
{
|
|
sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
|
|
sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
|
|
client_id: selectedOrganization?.sso_config?.client_id,
|
|
client_secret: selectedOrganization?.sso_config?.client_secret,
|
|
openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
|
|
openid_token: selectedOrganization?.sso_config?.openid_token,
|
|
SSORequired: selectedOrganization?.sso_config?.SSORequired,
|
|
auto_provision: selectedOrganization?.sso_config?.auto_provision,
|
|
}
|
|
)
|
|
}
|
|
}}
|
|
onChange={(e) => {
|
|
setOrgDescription(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
height: 89,
|
|
borderRadius: 4,
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
|
|
</div>
|
|
</div>
|
|
<Typography variant="h5" style={{ fontSize: 24, fontWeight: 500, marginTop: 40, textAlign: "left" }}>
|
|
Preferences
|
|
</Typography>
|
|
|
|
{/*isCloud ?
|
|
<Chip
|
|
label="Disabled on shuffler.io for now. Contact us for more info"
|
|
color="secondary"
|
|
style={{ marginLeft: 30, height: 30, }}
|
|
/>
|
|
: null*/}
|
|
</div>
|
|
{/*
|
|
<Typography variant="body2" color="textSecondary">
|
|
Add a Workflow that receives notifications from Shuffle when an error occurs in one of your workflows
|
|
</Typography>
|
|
*/}
|
|
</span>
|
|
</Grid>
|
|
<Grid item xs={12}>
|
|
<span>
|
|
<Typography style={{ fontWeight: 400, fontSize: 18, color: theme.palette.text.primary }}>Org Documentation reference</Typography>
|
|
|
|
<Typography variant="body2" color="textSecondary" style={{ fontWeight: 400, fontSize: 16, marginTop: 8 }}>
|
|
Add a URL that is added as a link, pointing to any external documentation page you want.
|
|
</Typography>
|
|
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "16px",
|
|
marginRight: "15px",
|
|
height: 35,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="Paste a URL to an external reference for this implementation"
|
|
value={documentationReference}
|
|
onBlur={() => {
|
|
if (documentationReference !== selectedOrganization?.defaults?.documentation_reference) {
|
|
handleEditOrg(
|
|
orgName,
|
|
orgDescription,
|
|
selectedOrganization.id,
|
|
selectedOrganization.image,
|
|
{
|
|
app_download_repo: selectedOrganization?.defaults?.app_download_repo,
|
|
app_download_branch: selectedOrganization?.defaults?.app_download_branch,
|
|
workflow_download_repo: selectedOrganization?.defaults?.workflow_download_repo,
|
|
workflow_download_branch: selectedOrganization?.defaults?.workflow_download_branch,
|
|
notification_workflow: selectedOrganization?.defaults?.notification_workflow,
|
|
documentation_reference: documentationReference,
|
|
workflow_upload_repo: selectedOrganization?.defaults?.workflow_upload_repo,
|
|
workflow_upload_branch: selectedOrganization?.defaults?.workflow_upload_branch,
|
|
workflow_upload_username: selectedOrganization?.defaults?.workflow_upload_username,
|
|
workflow_upload_token: selectedOrganization?.defaults?.workflow_upload_token,
|
|
newsletter: !newsletter,
|
|
weekly_recommendations: !weeklyRecommendations,
|
|
},
|
|
{
|
|
sso_entrypoint: selectedOrganization?.sso_config?.sso_entrypoint,
|
|
sso_certificate: selectedOrganization?.sso_config?.sso_certificate,
|
|
client_id: selectedOrganization?.sso_config?.client_id,
|
|
client_secret: selectedOrganization?.sso_config?.client_secret,
|
|
openid_authorization: selectedOrganization?.sso_config?.openid_authorization,
|
|
openid_token: selectedOrganization?.sso_config?.openid_token,
|
|
SSORequired: selectedOrganization?.sso_config?.SSORequired,
|
|
auto_provision: selectedOrganization?.sso_config?.auto_provision,
|
|
}
|
|
)
|
|
|
|
if (userdata.org_status.includes("integration_partner")) {
|
|
toast.info("Reloading page to update the changes everywhere")
|
|
setTimeout(() => {
|
|
window.location.reload()
|
|
}, 5000)
|
|
}
|
|
}
|
|
}}
|
|
onChange={(e) => {
|
|
setDocumentationReference(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
|
|
{!userdata?.support === true && (!selectedOrganization || selectedOrganization?.creator_org === undefined || selectedOrganization?.creator_org === null || selectedOrganization?.creator_org?.length > 0) ? null :
|
|
<CloudSyncTab
|
|
globalUrl={globalUrl}
|
|
userdata={userdata}
|
|
serverside={false}
|
|
/>}
|
|
<Grid item xs={12} style={{ marginTop: 20, }}>
|
|
<Typography variant="h5" style={{ textAlign: "left", fontWeight: 500, }}>Workflow Backup Repository</Typography>
|
|
<Typography variant="body2" style={{ textAlign: "left", marginTop: 8, color: theme.palette.text.secondary, fontSize: 16, fontWeight: 400 }}>
|
|
Decide where workflows are backed up in a Git repository. Will create logs and notifications if upload fails. The repository and branch must already have been initialized. Files will show up in the repo root in the /orgId/workflow-status/workflowId.json format. <b>MSSP:</b> If suborg exists, this will automatically be applied for them as well (not retroactive). <a href="/docs/configuration#environment-variables" style={{ textDecoration: "none", color: theme.palette.linkColor }} target="_blank">Credentials are encrypted.</a>
|
|
</Typography>
|
|
<Grid container style={{ marginTop: 10, }} spacing={2}>
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography style={{ fontWeight: 400, fontSize: 16 }}>Repository for workflow backup</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "8px",
|
|
marginRight: "16px",
|
|
height: 35,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
multiline={true}
|
|
rows={1}
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="Ex: github/com/shuffle/workflowbackup "
|
|
value={uploadRepo}
|
|
onChange={(e) => {
|
|
setUploadRepo(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography style={{ fontWeight: 400, fontSize: 16 }}>Branch</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "8px",
|
|
marginRight: "16px",
|
|
height: 35,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
multiline={true}
|
|
rows={1}
|
|
placeholder="The branch to use for backup of workflows"
|
|
value={uploadBranch}
|
|
onChange={(e) => {
|
|
setUploadBranch(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
</Grid>
|
|
<Grid container style={{ marginTop: 10, }} spacing={2}>
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography style={{ fontWeight: 400, fontSize: 16 }}>Username for backup of workflows</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "8px",
|
|
marginRight: "16px",
|
|
height: 35,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
multiline={true}
|
|
rows={1}
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="Enter Username"
|
|
value={uploadUsername}
|
|
onChange={(e) => {
|
|
setUploadUsername(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography style={{ fontWeight: 400, fontSize: 16 }}>New Git token/password</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "8px",
|
|
marginRight: "16px",
|
|
height: 35,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
multiline={true}
|
|
rows={1}
|
|
placeholder="The token to use for backup of workflows."
|
|
value={uploadToken}
|
|
onChange={(e) => {
|
|
setUploadToken(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
type="password"
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
{/*isCloud ? null : */}
|
|
|
|
{isCloud ? null : (
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography>App Download URL</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "8px",
|
|
marginRight: "16px",
|
|
height: 35,
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="A description for the organization"
|
|
value={appDownloadUrl}
|
|
onChange={(e) => {
|
|
setAppDownloadUrl(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
backgroundColor: theme.palette.textFieldStyle.backgroundColor,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
)}
|
|
{isCloud ? null : (
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography>App Download Branch</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "8px",
|
|
marginRight: "15px",
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
height: 35,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="A description for the organization"
|
|
value={appDownloadBranch}
|
|
onChange={(e) => {
|
|
setAppDownloadBranch(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
)}
|
|
{isCloud ? null : (
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography>Workflow Download URL</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "5px",
|
|
marginRight: "15px",
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
height: 35,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="A description for the organization"
|
|
value={workflowDownloadUrl}
|
|
onChange={(e) => {
|
|
setWorkflowDownloadUrl(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
)}
|
|
{isCloud ? null : (
|
|
<Grid item xs={6} style={{}}>
|
|
<span>
|
|
<Typography>Workflow Download Branch</Typography>
|
|
<TextField
|
|
required
|
|
style={{
|
|
flex: "1",
|
|
marginTop: "5px",
|
|
marginRight: "15px",
|
|
backgroundColor: isEditOrgTab ? theme.palette.textFieldStyle.backgroundColor : theme.palette.inputColor,
|
|
height: 35,
|
|
}}
|
|
fullWidth={true}
|
|
type="name"
|
|
id="outlined-with-placeholder"
|
|
margin="normal"
|
|
variant="outlined"
|
|
placeholder="A description for the organization"
|
|
value={workflowDownloadBranch}
|
|
onChange={(e) => {
|
|
setWorkflowDownloadBranch(e.target.value);
|
|
}}
|
|
InputProps={{
|
|
classes: {
|
|
notchedOutline: isEditOrgTab ? null : classes.notchedOutline,
|
|
},
|
|
style: {
|
|
color: theme.palette.textFieldStyle.color,
|
|
|
|
fontWeight: 400,
|
|
fontSize: 16,
|
|
borderRadius: 4,
|
|
height: 35,
|
|
},
|
|
}}
|
|
/>
|
|
</span>
|
|
</Grid>
|
|
)}
|
|
{/*
|
|
<span style={{textAlign: "center"}}>
|
|
{expanded ?
|
|
<ExpandLessIcon />
|
|
:
|
|
<ExpandMoreIcon />
|
|
}
|
|
</span>
|
|
*/}
|
|
</Grid>
|
|
<div style={{ textalign: "center", marginTop: "20px", display: 'flex', width: '100%', justifyContent: 'center' }}>
|
|
{orgSaveButton}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default OrgHeaderexpandedNew;
|
|
|
|
const RegionChangeModal = memo(({ selectedOrganization, setSelectedRegion, userdata, handleSendChangeRegionMail }) => {
|
|
// Show from options: "us-west2", "europe-west2", "europe-west3", "northamerica-northeast1"
|
|
// var regions = ["us-west2", "europe-west2", "europe-west3", "northamerica-northeast1"]
|
|
const regionMapping = {
|
|
"US": "us",
|
|
"EU-2": "eu",
|
|
"CA": "ca",
|
|
"UK": "gb",
|
|
"AUS": "au",
|
|
};
|
|
|
|
//let regiontag = "UK";
|
|
let regiontag = "UK";
|
|
let regionCode = "gb";
|
|
|
|
const regionsplit = selectedOrganization?.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"
|
|
} else if (regiontag === "uk") {
|
|
regiontag = "UK";
|
|
regionCode = "gb"
|
|
}
|
|
}
|
|
|
|
return (
|
|
<FormControl style={{ display: "flex", flexDirection: "column", marginTop: 5, alignItems: "center" }} >
|
|
{/* <InputLabel id="demo-simple-select-label">Region</InputLabel> */}
|
|
<Select
|
|
labelId="demo-simple-select-label"
|
|
id="demo-simple-select"
|
|
value={regiontag}
|
|
style={{ minWidth: 120, height: 35, borderRadius: 4 }}
|
|
onChange={(e) => {
|
|
// if (userdata?.support) {
|
|
// setSelectedRegion(e.target.value)
|
|
// } else {
|
|
// handleSendChangeRegionMail(e.target.value)
|
|
// }
|
|
setSelectedRegion(e.target.value)
|
|
}}
|
|
>
|
|
{Object.keys(regionMapping).map((region, index) => {
|
|
const regionImageCode = regionMapping[region];
|
|
// Set the default region if selectedOrganization.region is not set
|
|
if (selectedOrganization.region === undefined) {
|
|
selectedOrganization.region = "europe-west2";
|
|
}
|
|
|
|
|
|
// Check if the current region matches the selected region
|
|
if (region === selectedOrganization.region) {
|
|
// If the region matches, set the MenuItem as selected
|
|
return (
|
|
<MenuItem value={region} key={index} disabled>
|
|
{/* show region image through cdn */}
|
|
<img src={`https://flagcdn.com/48x36/${regionImageCode}.png`} alt={region} style={{ marginRight: 10 }} />
|
|
{region === "AUS" ? "AUS (test)" : region}
|
|
</MenuItem>
|
|
);
|
|
} else {
|
|
return <MenuItem sx={{ display: 'flex' }} key={index} value={region}>
|
|
<img
|
|
src={`https://flagcdn.com/48x36/${regionImageCode}.png`}
|
|
alt={region}
|
|
style={{ marginRight: 10, width: 20, height: 18, }}
|
|
/>
|
|
{region === "AUS" ? "AUS (test)" : region}
|
|
</MenuItem>;
|
|
}
|
|
})}
|
|
</Select>
|
|
</FormControl>
|
|
);
|
|
})
|