#216: Added frontend components for app download config
This commit is contained in:
frikky
@@ -3,9 +3,14 @@ import { makeStyles } from '@material-ui/styles';
|
||||
import { useTheme } from '@material-ui/core/styles';
|
||||
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import TextField from '@material-ui/core/TextField';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import { useAlert } from "react-alert";
|
||||
import IconButton from '@material-ui/core/IconButton';
|
||||
import ExpandLessIcon from '@material-ui/icons/ExpandLess';
|
||||
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
|
||||
|
||||
const useStyles = makeStyles({
|
||||
notchedOutline: {
|
||||
@@ -23,11 +28,17 @@ const OrgHeader = (props) => {
|
||||
const classes = useStyles()
|
||||
|
||||
var upload = ""
|
||||
const defaultBranch = "master"
|
||||
const [orgName, setOrgName] = React.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 [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 [file, setFile] = React.useState("")
|
||||
const [fileBase64, setFileBase64] = React.useState(selectedOrganization.image)
|
||||
const [expanded, setExpanded] = React.useState(false)
|
||||
|
||||
if (file !== "") {
|
||||
const img = document.getElementById('logo')
|
||||
@@ -55,12 +66,13 @@ const OrgHeader = (props) => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditOrg = (name, description, orgId, image) => {
|
||||
const handleEditOrg = (name, description, orgId, image, defaults) => {
|
||||
const data = {
|
||||
"name": name,
|
||||
"description": description,
|
||||
"org_id": orgId,
|
||||
"image": image,
|
||||
"defaults": defaults,
|
||||
}
|
||||
|
||||
const url = globalUrl + `/api/v1/orgs/${selectedOrganization.id}`;
|
||||
@@ -102,7 +114,12 @@ const OrgHeader = (props) => {
|
||||
style={{ width: 150, height: 55, flex: 1 }}
|
||||
variant="contained"
|
||||
color="primary"
|
||||
onClick={() => handleEditOrg(orgName, orgDescription, selectedOrganization.id, selectedOrganization.image)}
|
||||
onClick={() => handleEditOrg(orgName, orgDescription, selectedOrganization.id, selectedOrganization.image, {
|
||||
"app_download_repo": appDownloadUrl,
|
||||
"app_download_branch": appDownloadBranch,
|
||||
"workflow_download_repo": workflowDownloadUrl,
|
||||
"workflow_download_branch": workflowDownloadBranch,
|
||||
})}
|
||||
>
|
||||
Save Changes
|
||||
</Button>
|
||||
@@ -188,9 +205,151 @@ const OrgHeader = (props) => {
|
||||
<div style={{margin: "auto", textalign: "center",}}>
|
||||
{orgSaveButton}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{textAlign: "center",}}>
|
||||
<IconButton style={{color: "white", marginTop: 10, }} onClick={() => {
|
||||
setExpanded(!expanded)
|
||||
}}>
|
||||
{expanded ?
|
||||
<ExpandLessIcon />
|
||||
:
|
||||
<ExpandMoreIcon />
|
||||
}
|
||||
</IconButton>
|
||||
{expanded ?
|
||||
<Grid container spacing={3} style={{textAlign: "left"}}>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>
|
||||
App Download URL
|
||||
</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{flex: "1", marginTop: "5px", marginRight: "15px", 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: classes.notchedOutline,
|
||||
},
|
||||
style:{
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>
|
||||
App Download Branch
|
||||
</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{flex: "1", marginTop: "5px", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||
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: classes.notchedOutline,
|
||||
},
|
||||
style:{
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>
|
||||
Workflow Download URL
|
||||
</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{flex: "1", marginTop: "5px", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||
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: classes.notchedOutline,
|
||||
},
|
||||
style:{
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
<Grid item xs={6} style={{}}>
|
||||
<span>
|
||||
<Typography>
|
||||
Workflow Download Branch
|
||||
</Typography>
|
||||
<TextField
|
||||
required
|
||||
style={{flex: "1", marginTop: "5px", marginRight: "15px", backgroundColor: theme.palette.inputColor}}
|
||||
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: classes.notchedOutline,
|
||||
},
|
||||
style:{
|
||||
color: "white",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</Grid>
|
||||
{/*
|
||||
<span style={{textAlign: "center"}}>
|
||||
{expanded ?
|
||||
<ExpandLessIcon />
|
||||
:
|
||||
<ExpandMoreIcon />
|
||||
}
|
||||
</span>
|
||||
*/}
|
||||
</Grid>
|
||||
:
|
||||
null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -134,6 +134,7 @@ const Apps = (props) => {
|
||||
const [field2, setField2] = React.useState("")
|
||||
const [cursearch, setCursearch] = React.useState("")
|
||||
const [sharingConfiguration, setSharingConfiguration] = React.useState("you")
|
||||
const [downloadBranch, setDownloadBranch] = React.useState("master")
|
||||
|
||||
const [isDropzone, setIsDropzone] = React.useState(false);
|
||||
const upload = React.useRef(null);
|
||||
@@ -959,6 +960,7 @@ const Apps = (props) => {
|
||||
|
||||
const parsedData = {
|
||||
"url": url,
|
||||
"branch": downloadBranch || 'master'
|
||||
}
|
||||
|
||||
if (field1.length > 0) {
|
||||
@@ -988,18 +990,23 @@ const Apps = (props) => {
|
||||
}
|
||||
setIsLoading(false)
|
||||
stop()
|
||||
setValidation(false)
|
||||
|
||||
return response.json()
|
||||
})
|
||||
.then((responseJson) => {
|
||||
console.log("DATA: ", responseJson)
|
||||
if (responseJson.reason !== undefined) {
|
||||
alert.error("Failed loading: "+responseJson.reason)
|
||||
}
|
||||
console.log("DATA: ", responseJson)
|
||||
if (responseJson.reason !== undefined) {
|
||||
alert.error("Failed loading: "+responseJson.reason)
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log("ERROR: ", error.toString())
|
||||
alert.error(error.toString())
|
||||
|
||||
stop()
|
||||
setIsLoading(false)
|
||||
setValidation(false)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1321,6 +1328,25 @@ const Apps = (props) => {
|
||||
placeholder="https://github.com/frikky/shuffle-apps"
|
||||
fullWidth
|
||||
/>
|
||||
<span style={{marginTop: 10}}>Branch (default value is "master"):</span>
|
||||
<div style={{display: "flex"}}>
|
||||
<TextField
|
||||
style={{backgroundColor: inputColor}}
|
||||
variant="outlined"
|
||||
margin="normal"
|
||||
value={downloadBranch}
|
||||
InputProps={{
|
||||
style:{
|
||||
color: "white",
|
||||
height: "50px",
|
||||
fontSize: "1em",
|
||||
},
|
||||
}}
|
||||
onChange={e => setDownloadBranch(e.target.value)}
|
||||
placeholder="master"
|
||||
fullWidth
|
||||
/>
|
||||
</div>
|
||||
|
||||
<span style={{marginTop: 10}}>Authentication (optional - private repos etc):</span>
|
||||
<div style={{display: "flex"}}>
|
||||
|
||||
Reference in New Issue
Block a user