mirror of
https://repository.entgra.net/community/device-mgt-core.git
synced 2025-10-06 02:01:45 +00:00
Release and Edit application components.
This commit is contained in:
Menaka Jayawardena
parent
828bb316f6
commit
5ba211191f
@ -42,7 +42,6 @@ class BaseLayout extends Component {
|
||||
user: 'Admin',
|
||||
openModal: false
|
||||
};
|
||||
this.scriptId = "basic-layout";
|
||||
this.logout = this.logout.bind(this);
|
||||
}
|
||||
|
||||
@ -83,31 +82,30 @@ class BaseLayout extends Component {
|
||||
</div>
|
||||
<div id="search-box">
|
||||
<InputGroup>
|
||||
<Input id="search"
|
||||
name="search"
|
||||
placeholder={'Search for Applications'}
|
||||
onChange={(event) => console.log(event.target.value)}
|
||||
<Input
|
||||
id="search"
|
||||
name="search"
|
||||
placeholder={'Search for Applications'}
|
||||
onChange={(event) => console.log(event.target.value)}
|
||||
/>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div id="add-btn-container">
|
||||
<Button id="add-btn"
|
||||
<div id="add-btn-container">
|
||||
<Button
|
||||
id="add-btn"
|
||||
onClick={this.handleApplicationCreateClick.bind(this)}
|
||||
>
|
||||
<h3>
|
||||
<strong>+</strong>
|
||||
</h3>
|
||||
</Button>
|
||||
>
|
||||
<h3>
|
||||
<strong>+</strong>
|
||||
</h3>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="application-content"
|
||||
style={this.state.style}
|
||||
>
|
||||
|
||||
<div id="application-content" style={this.state.style}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
<ApplicationCreate
|
||||
open={this.state.openModal}
|
||||
/>
|
||||
<ApplicationCreate open={this.state.openModal}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -70,7 +70,6 @@ class ApplicationCreate extends Component {
|
||||
this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Handles next button click event.
|
||||
* */
|
||||
@ -220,13 +219,12 @@ class ApplicationCreate extends Component {
|
||||
{this.getStepContent(this.state.stepIndex)}
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
{this.state.stepIndex === 0?
|
||||
<div/> : <Button color="primary" onClick={this.handlePrev}>Back</Button>}
|
||||
{this.state.stepIndex === 0? <div/> :
|
||||
<Button color="primary" onClick={this.handlePrev}>Back</Button>}
|
||||
<Button color="secondary" onClick={this.close}>Cancel</Button>
|
||||
{this.state.finished?
|
||||
<Button color="primary" onClick={this.handleSubmit}>Finish</Button>
|
||||
: <Button color="primary" onClick={this.handleNext}>Continue</Button> }
|
||||
|
||||
{this.state.finished ?
|
||||
<Button color="primary" onClick={this.handleSubmit}>Finish</Button> :
|
||||
<Button color="primary" onClick={this.handleNext}>Continue</Button>}
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
</div>);
|
||||
|
||||
@ -125,18 +125,30 @@ class Step1 extends Component {
|
||||
|
||||
<FormGroup>
|
||||
<Label for="store">Store Type</Label>
|
||||
<Input type="select" name="store" id="store" className="input-custom"
|
||||
onChange={this.onChangeStore.bind(this)}>
|
||||
<Input
|
||||
type="select"
|
||||
name="store"
|
||||
id="store"
|
||||
className="input-custom"
|
||||
onChange={this.onChangeStore.bind(this)}
|
||||
>
|
||||
<option>Enterprise</option>
|
||||
<option>Public</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="store">Platform</Label>
|
||||
<Input type="select" name="store" id="store" onChange={this.onChangePlatform.bind(this)}>
|
||||
<Input
|
||||
type="select"
|
||||
name="store"
|
||||
id="store"
|
||||
onChange={this.onChangePlatform.bind(this)}
|
||||
>
|
||||
{this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
|
||||
return (
|
||||
<option value={platform.identifier}>{platform.name}</option>
|
||||
<option value={platform.identifier}>
|
||||
{platform.name}
|
||||
</option>
|
||||
)
|
||||
}) : <option>No Platforms</option>}
|
||||
</Input>
|
||||
|
||||
@ -259,7 +259,8 @@ class Step2 extends Component {
|
||||
<FormGroup>
|
||||
<Label for="app-title">Title*</Label>
|
||||
<Input
|
||||
required type="text"
|
||||
required
|
||||
type="text"
|
||||
name="appName"
|
||||
id="app-title"
|
||||
/>
|
||||
@ -267,7 +268,8 @@ class Step2 extends Component {
|
||||
<FormGroup>
|
||||
<Label for="app-description">Description*</Label>
|
||||
<Input
|
||||
required type="textarea"
|
||||
required
|
||||
type="textarea"
|
||||
name="appDescription"
|
||||
id="app-description"
|
||||
/>
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import {Collapse, FormGroup, Input, Label} from 'reactstrap';
|
||||
import {Collapse, FormGroup, Input, Label, FormText} from 'reactstrap';
|
||||
import Switch from '../../../UIComponents/Switch/Switch'
|
||||
|
||||
/**
|
||||
@ -88,32 +88,42 @@ class Step4 extends Component {
|
||||
<FormGroup>
|
||||
<div id="app-release-switch-content">
|
||||
<div id="app-release-switch-label">
|
||||
<Label for="app-release-switch"><strong>Add Release to Application</strong></Label>
|
||||
<Label for="app-release-switch">
|
||||
<strong>
|
||||
Add Release to Application
|
||||
</strong>
|
||||
</Label>
|
||||
</div>
|
||||
<div id="app-release-switch-switch">
|
||||
<Switch id="app-release-switch" onChange={this.handleToggle.bind(this)}/>
|
||||
<Switch
|
||||
id="app-release-switch"
|
||||
onChange={this.handleToggle.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<div>
|
||||
<span style={{color: '#BBBBBB', width: '100%', justify: 'left'}}>
|
||||
<FormText color="muted">
|
||||
<i>Info: </i>
|
||||
Enabling this will create a release for the current Application.
|
||||
To upload the Application, please visit to the Release management section of
|
||||
Application Edit View.
|
||||
</span>
|
||||
</FormText>
|
||||
</div>
|
||||
{/*If toggle is true, the release form will be shown.*/}
|
||||
<Collapse isOpen={this.state.showForm}>
|
||||
<FormGroup>
|
||||
<Label for="release-channel">Release Channel</Label>
|
||||
<Input id="input-custom" type="select" mid="release-channel" style={{
|
||||
width: '200px',
|
||||
border: 'none',
|
||||
borderRadius: '0',
|
||||
borderBottom: 'solid 1px #BDBDBD'
|
||||
}}>
|
||||
<Input
|
||||
type="select"
|
||||
id="release-channel"
|
||||
style={{
|
||||
width: '200px',
|
||||
border: 'none',
|
||||
borderRadius: '0',
|
||||
borderBottom: 'solid 1px #BDBDBD'
|
||||
}}>
|
||||
<option>GA</option>
|
||||
<option>Alpha</option>
|
||||
<option>Beta</option>
|
||||
@ -121,7 +131,12 @@ class Step4 extends Component {
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="version">Version*</Label>
|
||||
<Input type="text" id="version input-custom" placeholder="v1.0" required/>
|
||||
<Input
|
||||
type="text"
|
||||
id="version input-custom"
|
||||
placeholder="v1.0"
|
||||
required
|
||||
/>
|
||||
</FormGroup>
|
||||
</Collapse>
|
||||
</div>
|
||||
|
||||
@ -19,7 +19,8 @@
|
||||
import React, {Component} from 'react';
|
||||
import './baseLayout.css';
|
||||
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
import {Col, Row} from "reactstrap";
|
||||
import GeneralInfo from "../GeneralInfo";
|
||||
|
||||
class ApplicationEdit extends Component {
|
||||
|
||||
@ -57,14 +58,12 @@ class ApplicationEdit extends Component {
|
||||
return "No Content";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
getTabContent(tab) {
|
||||
|
||||
switch (tab) {
|
||||
case 1: {
|
||||
return ("Step 1")
|
||||
return <GeneralInfo/>
|
||||
}
|
||||
case 2: {
|
||||
return <ReleaseManager/>
|
||||
@ -73,14 +72,12 @@ class ApplicationEdit extends Component {
|
||||
return ("Step3")
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state);
|
||||
return (
|
||||
<div id="application-edit-base">
|
||||
|
||||
<Row id="application-edit-header">
|
||||
<Col>Application Name</Col>
|
||||
</Row>
|
||||
@ -101,66 +98,19 @@ class ApplicationEdit extends Component {
|
||||
</Col>
|
||||
<Col xs="9">
|
||||
<div id="app-edit-content">
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<div id="application-edit-outer-content">
|
||||
{/* Application edit content */}
|
||||
<div id="application-edit-content">
|
||||
{this.getTabContent(this.state.activeTab)}
|
||||
<Row>
|
||||
<Col xs="12">
|
||||
<div id="application-edit-outer-content">
|
||||
{/* Application edit content */}
|
||||
<div id="application-edit-content">
|
||||
{this.getTabContent(this.state.activeTab)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row >
|
||||
<Col xs="3 offset-9">
|
||||
<Button>Save</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
{/*<Row>*/}
|
||||
{/*/!* Contains the application Name and Save button*!/*/}
|
||||
{/*<div id="application-edit-header">*/}
|
||||
{/*<Col>*/}
|
||||
{/*<span className="application-header-text">*/}
|
||||
{/*Header*/}
|
||||
{/*</span>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col>*/}
|
||||
{/*<Button id="app-save-btn" className="save-btn">Save</Button>*/}
|
||||
{/*</Col>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Row>*/}
|
||||
{/*<div id="application-edit-main-container">*/}
|
||||
{/*<Row>*/}
|
||||
{/*<Col xs="6" sm="4">*/}
|
||||
|
||||
{/*/!* Contains side bar items, General, App Release, Package Manager *!/*/}
|
||||
{/*<div className="tab">*/}
|
||||
{/*<button className={this.state.general} value={1} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*General*/}
|
||||
{/*</button>*/}
|
||||
{/*<button className={this.state.release} value={2} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*App*/}
|
||||
{/*Releases*/}
|
||||
{/*</button>*/}
|
||||
{/*<button className={this.state.pkgmgt} value={3} onClick={this.handleClick.bind(this)}>*/}
|
||||
{/*Package Manager*/}
|
||||
{/*</button>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Col>*/}
|
||||
{/*<Col xs="6" sm="4">*/}
|
||||
{/*<div id="application-edit-outer-content">*/}
|
||||
{/*/!* Application edit content *!/*/}
|
||||
{/*<div id="application-edit-content">*/}
|
||||
{/*{this.getTabContent(this.state.activeTab)}*/}
|
||||
{/*</div>*/}
|
||||
{/*</div>*/}
|
||||
{/*</Col>*/}
|
||||
{/*</Row>*/}
|
||||
{/*</div>*/}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,3 +1,20 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
#application-edit-base {
|
||||
width: 70%;
|
||||
|
||||
@ -18,26 +18,187 @@
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
|
||||
import {FormGroup, Input, Label, Badge, Button} from 'reactstrap';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import './generalInfo.css';
|
||||
|
||||
class GeneralInfo extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
defValue: "",
|
||||
tags: [],
|
||||
screenshots: [],
|
||||
icon: [],
|
||||
banner: []
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
<div className="app-edit-general-info">
|
||||
<form>
|
||||
<FormGroup>
|
||||
<Label for="app-title">Title*</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
name="appName"
|
||||
id="app-title"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-title">Description*</Label>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
multiline
|
||||
name="appName"
|
||||
id="app-title"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-category">Category</Label>
|
||||
<Input
|
||||
type="select"
|
||||
name="category"
|
||||
id="app-category"
|
||||
>
|
||||
<option>Business</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-visibility">Visibility</Label>
|
||||
<Input
|
||||
type="select"
|
||||
name="visibility"
|
||||
id="app-visibility"
|
||||
>
|
||||
<option>Devices</option>
|
||||
<option>Roles</option>
|
||||
<option>Groups</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="app-tags">Tags*</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
value={this.state.defValue}
|
||||
name="app-tags"
|
||||
id="app-tags"
|
||||
// onChange={this.handleTagChange.bind(this)}
|
||||
// onKeyPress={this.addTags.bind(this)}
|
||||
/>
|
||||
<div id="batch-content">
|
||||
{this.state.tags.map(tag => {
|
||||
return (
|
||||
<Badge
|
||||
style={{margin: '0 2px 0 2px'}}
|
||||
value={tag.value}
|
||||
// onClick={this.handleRequestDelete.bind(this)}
|
||||
>
|
||||
{tag.value}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</FormGroup>
|
||||
<div>
|
||||
<FormGroup>
|
||||
<Label for="app-screenshots">Screenshots*</Label>
|
||||
<span className="image-sub-title"> (600 X 800 32 bit PNG)</span>
|
||||
<div id="screenshot-container">
|
||||
{this.state.screenshots.map((tile) => (
|
||||
<button id="img-btn-screenshot" style={{height: '210px', width: '410px'}}
|
||||
onMouseEnter={() => {
|
||||
console.log("Mouse Entered")
|
||||
}}>
|
||||
{console.log(tile[0].preview)}
|
||||
<img style={{height: '200px', width: '400px'}} src={tile[0].preview}/>
|
||||
</button>
|
||||
))}
|
||||
{this.state.screenshots.length < 3 ?
|
||||
<Dropzone
|
||||
className="applicationCreateScreenshotDropZone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(screenshots, rejected) => {
|
||||
let tmpScreenshots = this.state.screenshots;
|
||||
tmpScreenshots.push(screenshots);
|
||||
console.log(screenshots);
|
||||
this.setState({
|
||||
screenshots: tmpScreenshots
|
||||
});
|
||||
}}
|
||||
>
|
||||
<p className="applicationCreateScreenshotp">+</p>
|
||||
</Dropzone> : <div/>}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div style={{display: 'flex'}}>
|
||||
<div style={{float: 'left', marginRight: '15px'}}>
|
||||
<FormGroup>
|
||||
<Label for="app-icon">Icon*</Label>
|
||||
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||
<div id="app-icon-container">
|
||||
{this.state.icon.map((tile) => (
|
||||
<button onMouseEnter={() => {
|
||||
console.log("Mouse Entered")
|
||||
}}>
|
||||
<img style={{height: '200px', width: '200px'}} src={tile.preview}/>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone
|
||||
className="applicationCreateIconDropZone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {
|
||||
this.setState({icon, rejected});
|
||||
}}
|
||||
>
|
||||
<p className="applicationCreateIconp">+</p>
|
||||
</Dropzone> : <div/>}
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div style={{marginLeft: '15px'}}>
|
||||
<FormGroup>
|
||||
<Label for="app-banner">Banner*</Label>
|
||||
<span className="image-sub-title"> (1000 X 400 32 bit PNG)</span>
|
||||
<div id="app-banner-container">
|
||||
{this.state.banner.map((tile) => (
|
||||
<button onMouseEnter={() => {
|
||||
console.log("Mouse Entered")
|
||||
}}>
|
||||
<img style={{height: '200px', width: '400px'}} src={tile.preview}/>
|
||||
</button>
|
||||
))}
|
||||
{this.state.banner.length === 0 ?
|
||||
<Dropzone
|
||||
className="applicationCreateBannerDropZone"
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(banner, rejected) => {
|
||||
this.setState({banner, rejected});
|
||||
}}
|
||||
>
|
||||
<p className="applicationCreateBannerp">+</p>
|
||||
</Dropzone> : <div/>
|
||||
}
|
||||
</div>
|
||||
</FormGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div className="save-info">
|
||||
<Button>Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
export default GeneralInfo;
|
||||
|
||||
@ -16,14 +16,11 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class ReleaseContent extends Component {
|
||||
|
||||
|
||||
|
||||
|
||||
.app-edit-general-info {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
|
||||
export default ReleaseContent;
|
||||
.save-info {
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import './createRelease.css';
|
||||
import {Button, FormGroup, FormText, Input, Label, Row} from "reactstrap";
|
||||
import UploadPackage from "./UploadPackage";
|
||||
|
||||
class CreateRelease extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.onTestMethodChange = this.onTestMethodChange.bind(this);
|
||||
this.showUploadArtifacts = this.showUploadArtifacts.bind(this);
|
||||
this.handleBack = this.handleBack.bind(this);
|
||||
this.backToRelease = this.backToRelease.bind(this);
|
||||
this.state = {
|
||||
open: true,
|
||||
hiddenMain: false
|
||||
}
|
||||
}
|
||||
|
||||
onTestMethodChange(event) {
|
||||
let type = event.target.value;
|
||||
if (type !== 'open') {
|
||||
this.setState({open: false})
|
||||
} else {
|
||||
this.setState({open: true})
|
||||
}
|
||||
}
|
||||
|
||||
showUploadArtifacts() {
|
||||
this.setState({hiddenMain: true})
|
||||
}
|
||||
|
||||
handleBack() {
|
||||
this.props.handleBack();
|
||||
}
|
||||
|
||||
backToRelease() {
|
||||
this.setState({hiddenMain: false});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {channel} = this.props;
|
||||
console.log(channel);
|
||||
return (
|
||||
<div>
|
||||
|
||||
{this.state.hiddenMain ?
|
||||
<div>
|
||||
<UploadPackage
|
||||
backToRelease={this.backToRelease}
|
||||
selectedChannel={channel}
|
||||
/>
|
||||
</div> :
|
||||
|
||||
<div>
|
||||
<Row>
|
||||
<div className="release-header">
|
||||
<a onClick={this.handleBack}>{"<-"}</a>
|
||||
<span id="create-release-header">
|
||||
<strong>{channel} Release</strong>
|
||||
</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="release-create">
|
||||
<div>
|
||||
<span>
|
||||
<strong>Create Release</strong>
|
||||
</span>
|
||||
<p>
|
||||
{channel === 'Production' ? "" :
|
||||
"You could create " + channel + " release for your application and let " +
|
||||
"the test users to test the application for it's stability."}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button id="create-release-btn" onClick={this.showUploadArtifacts}>Create a {channel} Release</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Row>
|
||||
{channel !== 'Production' ?
|
||||
<Row>
|
||||
<div>
|
||||
<span>
|
||||
<strong>Manage Test Method</strong>
|
||||
</span>
|
||||
<p>
|
||||
This section allows you to change the test method and the users who would be
|
||||
able to test your application.
|
||||
</p>
|
||||
<div>
|
||||
<form>
|
||||
<FormGroup>
|
||||
<Label for="test-method">Test Method*</Label>
|
||||
<Input
|
||||
required
|
||||
type="select"
|
||||
name="testMethod"
|
||||
id="test-method"
|
||||
onChange={this.onTestMethodChange}
|
||||
>
|
||||
<option value="open">Open {channel}</option>
|
||||
<option value="closed">Closed {channel}</option>
|
||||
</Input>
|
||||
</FormGroup>
|
||||
{!this.state.open ? (
|
||||
<FormGroup>
|
||||
<Label for="user-list">Users List*</Label>
|
||||
<Input
|
||||
required
|
||||
name="userList"
|
||||
id="user-list"
|
||||
type="text"
|
||||
/>
|
||||
<FormText color="muted">
|
||||
Provide a comma separated list of email
|
||||
addresses.
|
||||
</FormText>
|
||||
</FormGroup>
|
||||
) : <div/>}
|
||||
<FormGroup>
|
||||
<Label for="app-title">Feedback Method*</Label>
|
||||
<Input
|
||||
required
|
||||
name="appName"
|
||||
id="app-title"
|
||||
/>
|
||||
<FormText color="muted">
|
||||
Provide an Email address or a URL for your users to provide
|
||||
feedback on the application.
|
||||
</FormText>
|
||||
</FormGroup>
|
||||
<div>
|
||||
<Button className="form-btn">Save</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Row> :
|
||||
<div/>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
CreateRelease.propTypes = {
|
||||
channel: PropTypes.string,
|
||||
handleBack: PropTypes.func
|
||||
};
|
||||
|
||||
export default CreateRelease;
|
||||
@ -0,0 +1,95 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import './createRelease.css';
|
||||
import {Button, Col, FormGroup, Input, Label, Row} from "reactstrap";
|
||||
|
||||
class UploadPackage extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.handleBack = this.handleBack.bind(this)
|
||||
}
|
||||
|
||||
handleBack() {
|
||||
this.props.backToRelease();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {selectedChannel} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<Row>
|
||||
<div className="release-header">
|
||||
<a onClick={this.handleBack}>{"<-"}</a>
|
||||
<span id="create-release-header">
|
||||
<strong>New Release for {selectedChannel}</strong>
|
||||
</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="release-header">
|
||||
<span id="create-release-header">
|
||||
<strong>Upload Package File</strong>
|
||||
</span>
|
||||
</div>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col xs="3">
|
||||
<Button>Upload</Button>
|
||||
</Col>
|
||||
<Col xs="3">
|
||||
<Button>Select from package library</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<div className="release-detail-content">
|
||||
<form>
|
||||
<FormGroup>
|
||||
<Label>Release Name *</Label>
|
||||
<Input
|
||||
required
|
||||
type="text"
|
||||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label>Release Notes *</Label>
|
||||
<Input
|
||||
required
|
||||
type="textarea"
|
||||
/>
|
||||
</FormGroup>
|
||||
<div className="form-btn">
|
||||
<Button>Send for Review</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
UploadPackage.protoTypes = {
|
||||
backToRelease: PropTypes.func,
|
||||
channel: PropTypes.string
|
||||
};
|
||||
|
||||
export default UploadPackage;
|
||||
@ -0,0 +1,38 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.release-header {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.release-create {
|
||||
height: 150px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.release-detail-content {
|
||||
width: 100%;
|
||||
margin-top: 20%;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.form-btn {
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -16,15 +16,32 @@
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {Component} from 'react';
|
||||
import './release-mgt.css';
|
||||
import {Button, Col, Row} from "reactstrap";
|
||||
import CreateRelease from "../Create/CreateRelease";
|
||||
|
||||
class ReleaseManager extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
|
||||
this.createRelease = this.createRelease.bind(this);
|
||||
this.handleBackPress = this.handleBackPress.bind(this);
|
||||
this.state = {
|
||||
createRelease: false,
|
||||
onGoing: ""
|
||||
}
|
||||
}
|
||||
|
||||
createRelease(event) {
|
||||
event.preventDefault();
|
||||
this.setState({createRelease: true, onGoing: event.target.value})
|
||||
}
|
||||
|
||||
handleBackPress() {
|
||||
this.setState({createRelease: false});
|
||||
}
|
||||
|
||||
/**
|
||||
@ -40,7 +57,14 @@ class ReleaseManager extends Component {
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12" md={{size: 8, offset: 5}}>
|
||||
<Button className="button-add" id={release.toLowerCase()}>Create a Release</Button>
|
||||
<Button
|
||||
className="button-add"
|
||||
id={release.toLowerCase()}
|
||||
value={release}
|
||||
onClick={this.createRelease}
|
||||
>
|
||||
Create a Release
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
@ -49,45 +73,51 @@ class ReleaseManager extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div id="release-mgt-content">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="production">
|
||||
<span>Production Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
|
||||
{this.getNoReleaseContent("Production")}
|
||||
|
||||
<div>
|
||||
{this.state.createRelease ?
|
||||
<CreateRelease
|
||||
channel={this.state.onGoing}
|
||||
handleBack={this.handleBackPress}
|
||||
/> :
|
||||
<div id="release-mgt-content">
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="production">
|
||||
<span>Production Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Production")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="beta">
|
||||
<span>Beta Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Beta")}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="beta">
|
||||
<span>Beta Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Beta")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="alpha">
|
||||
<span>Alpha Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Alpha")}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col sm="12">
|
||||
<div className="release" id="alpha">
|
||||
<span>Alpha Releases</span>
|
||||
<div className="release-content">
|
||||
<div className="release-inner">
|
||||
{this.getNoReleaseContent("Alpha")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,3 +1,21 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
.release-content {
|
||||
height: 180px;
|
||||
width: 95%;
|
||||
|
||||
@ -1,3 +1,21 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
font-family: sans-serif;
|
||||
@ -32,6 +50,14 @@ body {
|
||||
width: 100%;
|
||||
background-color: #BDBDBD;
|
||||
border-bottom: solid 2px;
|
||||
position: fixed; /* Set the navbar to fixed position */
|
||||
top: 0; /* Position the navbar at the top of the page */
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#application-content {
|
||||
max-height: 800px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
#add-btn {
|
||||
@ -187,3 +213,5 @@ body {
|
||||
color: #818181;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user