Release and Edit application components.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent 828bb316f6
commit 5ba211191f

@ -42,7 +42,6 @@ class BaseLayout extends Component {
user: 'Admin', user: 'Admin',
openModal: false openModal: false
}; };
this.scriptId = "basic-layout";
this.logout = this.logout.bind(this); this.logout = this.logout.bind(this);
} }
@ -83,31 +82,30 @@ class BaseLayout extends Component {
</div> </div>
<div id="search-box"> <div id="search-box">
<InputGroup> <InputGroup>
<Input id="search" <Input
name="search" id="search"
placeholder={'Search for Applications'} name="search"
onChange={(event) => console.log(event.target.value)} placeholder={'Search for Applications'}
onChange={(event) => console.log(event.target.value)}
/> />
</InputGroup> </InputGroup>
</div> </div>
</div> <div id="add-btn-container">
<div id="add-btn-container"> <Button
<Button id="add-btn" id="add-btn"
onClick={this.handleApplicationCreateClick.bind(this)} onClick={this.handleApplicationCreateClick.bind(this)}
> >
<h3> <h3>
<strong>+</strong> <strong>+</strong>
</h3> </h3>
</Button> </Button>
</div>
</div> </div>
<div className="application-content"
style={this.state.style} <div id="application-content" style={this.state.style}>
>
{this.props.children} {this.props.children}
</div> </div>
<ApplicationCreate <ApplicationCreate open={this.state.openModal}/>
open={this.state.openModal}
/>
</div> </div>
); );
} }

@ -70,7 +70,6 @@ class ApplicationCreate extends Component {
this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex)); this.setState({stepIndex: nextStep}, console.log(this.state.stepIndex));
} }
/** /**
* Handles next button click event. * Handles next button click event.
* */ * */
@ -220,13 +219,12 @@ class ApplicationCreate extends Component {
{this.getStepContent(this.state.stepIndex)} {this.getStepContent(this.state.stepIndex)}
</ModalBody> </ModalBody>
<ModalFooter> <ModalFooter>
{this.state.stepIndex === 0? {this.state.stepIndex === 0? <div/> :
<div/> : <Button color="primary" onClick={this.handlePrev}>Back</Button>} <Button color="primary" onClick={this.handlePrev}>Back</Button>}
<Button color="secondary" onClick={this.close}>Cancel</Button> <Button color="secondary" onClick={this.close}>Cancel</Button>
{this.state.finished? {this.state.finished ?
<Button color="primary" onClick={this.handleSubmit}>Finish</Button> <Button color="primary" onClick={this.handleSubmit}>Finish</Button> :
: <Button color="primary" onClick={this.handleNext}>Continue</Button> } <Button color="primary" onClick={this.handleNext}>Continue</Button>}
</ModalFooter> </ModalFooter>
</Modal> </Modal>
</div>); </div>);

@ -125,18 +125,30 @@ class Step1 extends Component {
<FormGroup> <FormGroup>
<Label for="store">Store Type</Label> <Label for="store">Store Type</Label>
<Input type="select" name="store" id="store" className="input-custom" <Input
onChange={this.onChangeStore.bind(this)}> type="select"
name="store"
id="store"
className="input-custom"
onChange={this.onChangeStore.bind(this)}
>
<option>Enterprise</option> <option>Enterprise</option>
<option>Public</option> <option>Public</option>
</Input> </Input>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label for="store">Platform</Label> <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 => { {this.state.platforms.length > 0 ? this.state.platforms.map(platform => {
return ( return (
<option value={platform.identifier}>{platform.name}</option> <option value={platform.identifier}>
{platform.name}
</option>
) )
}) : <option>No Platforms</option>} }) : <option>No Platforms</option>}
</Input> </Input>

@ -259,7 +259,8 @@ class Step2 extends Component {
<FormGroup> <FormGroup>
<Label for="app-title">Title*</Label> <Label for="app-title">Title*</Label>
<Input <Input
required type="text" required
type="text"
name="appName" name="appName"
id="app-title" id="app-title"
/> />
@ -267,7 +268,8 @@ class Step2 extends Component {
<FormGroup> <FormGroup>
<Label for="app-description">Description*</Label> <Label for="app-description">Description*</Label>
<Input <Input
required type="textarea" required
type="textarea"
name="appDescription" name="appDescription"
id="app-description" id="app-description"
/> />

@ -18,7 +18,7 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; 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' import Switch from '../../../UIComponents/Switch/Switch'
/** /**
@ -88,32 +88,42 @@ class Step4 extends Component {
<FormGroup> <FormGroup>
<div id="app-release-switch-content"> <div id="app-release-switch-content">
<div id="app-release-switch-label"> <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>
<div id="app-release-switch-switch"> <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>
</div> </div>
</FormGroup> </FormGroup>
<br/> <br/>
<div> <div>
<span style={{color: '#BBBBBB', width: '100%', justify: 'left'}}> <FormText color="muted">
<i>Info: </i> <i>Info: </i>
Enabling this will create a release for the current Application. Enabling this will create a release for the current Application.
To upload the Application, please visit to the Release management section of To upload the Application, please visit to the Release management section of
Application Edit View. Application Edit View.
</span> </FormText>
</div> </div>
{/*If toggle is true, the release form will be shown.*/} {/*If toggle is true, the release form will be shown.*/}
<Collapse isOpen={this.state.showForm}> <Collapse isOpen={this.state.showForm}>
<FormGroup> <FormGroup>
<Label for="release-channel">Release Channel</Label> <Label for="release-channel">Release Channel</Label>
<Input id="input-custom" type="select" mid="release-channel" style={{ <Input
width: '200px', type="select"
border: 'none', id="release-channel"
borderRadius: '0', style={{
borderBottom: 'solid 1px #BDBDBD' width: '200px',
}}> border: 'none',
borderRadius: '0',
borderBottom: 'solid 1px #BDBDBD'
}}>
<option>GA</option> <option>GA</option>
<option>Alpha</option> <option>Alpha</option>
<option>Beta</option> <option>Beta</option>
@ -121,7 +131,12 @@ class Step4 extends Component {
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label for="version">Version*</Label> <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> </FormGroup>
</Collapse> </Collapse>
</div> </div>

@ -19,7 +19,8 @@
import React, {Component} from 'react'; import React, {Component} from 'react';
import './baseLayout.css'; import './baseLayout.css';
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager'; 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 { class ApplicationEdit extends Component {
@ -57,14 +58,12 @@ class ApplicationEdit extends Component {
return "No Content"; return "No Content";
} }
} }
} }
getTabContent(tab) { getTabContent(tab) {
switch (tab) { switch (tab) {
case 1: { case 1: {
return ("Step 1") return <GeneralInfo/>
} }
case 2: { case 2: {
return <ReleaseManager/> return <ReleaseManager/>
@ -73,14 +72,12 @@ class ApplicationEdit extends Component {
return ("Step3") return ("Step3")
} }
} }
} }
render() { render() {
console.log(this.state); console.log(this.state);
return ( return (
<div id="application-edit-base"> <div id="application-edit-base">
<Row id="application-edit-header"> <Row id="application-edit-header">
<Col>Application Name</Col> <Col>Application Name</Col>
</Row> </Row>
@ -101,66 +98,19 @@ class ApplicationEdit extends Component {
</Col> </Col>
<Col xs="9"> <Col xs="9">
<div id="app-edit-content"> <div id="app-edit-content">
<Row> <Row>
<Col xs="12"> <Col xs="12">
<div id="application-edit-outer-content"> <div id="application-edit-outer-content">
{/* Application edit content */} {/* Application edit content */}
<div id="application-edit-content"> <div id="application-edit-content">
{this.getTabContent(this.state.activeTab)} {this.getTabContent(this.state.activeTab)}
</div>
</div> </div>
</div> </Col>
</Col> </Row>
</Row>
<Row >
<Col xs="3 offset-9">
<Button>Save</Button>
</Col>
</Row>
</div> </div>
</Col> </Col>
</Row> </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> </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 { #application-edit-base {
width: 70%; width: 70%;

@ -18,26 +18,187 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, {Component} from 'react'; 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 { class GeneralInfo extends Component {
constructor() { constructor() {
super(); super();
this.state = {
defValue: "",
tags: [],
screenshots: [],
icon: [],
banner: []
}
} }
render() { render() {
return( 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> </div>
) )
} }
} }
export default GeneralInfo; export default GeneralInfo;

@ -16,14 +16,11 @@
* under the License. * under the License.
*/ */
import React, {Component} from 'react'; .app-edit-general-info {
margin-top: 20px;
class ReleaseContent extends Component {
} }
.save-info {
export default ReleaseContent; 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. * under the License.
*/ */
import PropTypes from 'prop-types';
import React, {Component} from 'react'; import React, {Component} from 'react';
import './release-mgt.css'; import './release-mgt.css';
import {Button, Col, Row} from "reactstrap"; import {Button, Col, Row} from "reactstrap";
import CreateRelease from "../Create/CreateRelease";
class ReleaseManager extends Component { class ReleaseManager extends Component {
constructor() { constructor() {
super(); super();
this.getNoReleaseContent = this.getNoReleaseContent.bind(this); 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>
<Row> <Row>
<Col sm="12" md={{size: 8, offset: 5}}> <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> </Col>
</Row> </Row>
</div> </div>
@ -49,45 +73,51 @@ class ReleaseManager extends Component {
render() { render() {
return ( return (
<div id="release-mgt-content"> <div>
<Row> {this.state.createRelease ?
<Col sm="12"> <CreateRelease
<div className="release" id="production"> channel={this.state.onGoing}
<span>Production Releases</span> handleBack={this.handleBackPress}
<div className="release-content"> /> :
<div className="release-inner"> <div id="release-mgt-content">
<Row>
{this.getNoReleaseContent("Production")} <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>
</div> </Row>
</Col> <Row>
</Row> <Col sm="12">
<Row> <div className="release" id="beta">
<Col sm="12"> <span>Beta Releases</span>
<div className="release" id="beta"> <div className="release-content">
<span>Beta Releases</span> <div className="release-inner">
<div className="release-content"> {this.getNoReleaseContent("Beta")}
<div className="release-inner"> </div>
{this.getNoReleaseContent("Beta")} </div>
</div> </div>
</div> </Col>
</div> </Row>
</Col> <Row>
</Row> <Col sm="12">
<Row> <div className="release" id="alpha">
<Col sm="12"> <span>Alpha Releases</span>
<div className="release" id="alpha"> <div className="release-content">
<span>Alpha Releases</span> <div className="release-inner">
<div className="release-content"> {this.getNoReleaseContent("Alpha")}
<div className="release-inner"> </div>
{this.getNoReleaseContent("Alpha")} </div>
</div> </div>
</div> </Col>
</div> </Row>
</Col> </div>
</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 { .release-content {
height: 180px; height: 180px;
width: 95%; 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 { body {
width: 100%; width: 100%;
font-family: sans-serif; font-family: sans-serif;
@ -32,6 +50,14 @@ body {
width: 100%; width: 100%;
background-color: #BDBDBD; background-color: #BDBDBD;
border-bottom: solid 2px; 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 { #add-btn {
@ -187,3 +213,5 @@ body {
color: #818181; color: #818181;
} }

Loading…
Cancel
Save