Package refactoring and adding release app component.

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent db5d71b9a7
commit 828bb316f6

@ -23,7 +23,7 @@ import AuthHandler from "../../api/authHandler";
import '../../css/font-wso2.css';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import ApplicationCreate from '../Application/ApplicationCreate';
import ApplicationCreate from '../Application/Create/ApplicationCreate';
import {Button, Input, InputGroup,} from 'reactstrap';

@ -22,7 +22,8 @@ import {withRouter} from 'react-router-dom';
import AuthHandler from "../../api/authHandler";
import ApplicationMgtApi from '../../api/applicationMgtApi';
import {Table} from 'reactstrap';
import Drawer from '../UIComponents/Drawer/Drawer'
import Drawer from '../UIComponents/Drawer/Drawer';
import ApplicationEdit from './Edit/Base/ApplicationEditBaseLayout';
/**
* The App Create Component.
@ -236,42 +237,46 @@ class ApplicationListing extends Component {
return (
<div id="application-list" style={this.state.appListStyle}>
<Table striped hover>
<thead>
<tr>
<th></th>
{/* TODO: Remove console.log and add sort method. */}
<th onClick={() => {console.log("sort")}}>Application Name</th>
<th>Category</th>
<th>Platform</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
{this.applications.map(
(application) => {
return (
<tr key={application.id} onClick={this.onRowClick}>
<td>
{/* TODO: Move this styles to css. */}
<img
src={application.icon}
height='50px'
width='50px'
style={{border: 'solid 1px black', borderRadius: "100%"}}
/></td>
<td>{application.applicationName}</td>
<td>{application.category}</td>
<td>{application.platform}</td>
<td>{application.status}</td>
<td><i>Edit</i></td>
</tr>
)
}
)}
</tbody>
</Table>
{/*<Table striped hover>*/}
{/*<thead>*/}
{/*<tr>*/}
{/*<th></th>*/}
{/*/!* TODO: Remove console.log and add sort method. *!/*/}
{/*<th onClick={() => {console.log("sort")}}>Application Name</th>*/}
{/*<th>Category</th>*/}
{/*<th>Platform</th>*/}
{/*<th>Status</th>*/}
{/*<th></th>*/}
{/*</tr>*/}
{/*</thead>*/}
{/*<tbody>*/}
{/*{this.applications.map(*/}
{/*(application) => {*/}
{/*return (*/}
{/*<tr key={application.id} onClick={this.onRowClick}>*/}
{/*<td>*/}
{/*/!* TODO: Move this styles to css. *!/*/}
{/*<img*/}
{/*src={application.icon}*/}
{/*height='50px'*/}
{/*width='50px'*/}
{/*style={{border: 'solid 1px black', borderRadius: "100%"}}*/}
{/*/></td>*/}
{/*<td>{application.applicationName}</td>*/}
{/*<td>{application.category}</td>*/}
{/*<td>{application.platform}</td>*/}
{/*<td>{application.status}</td>*/}
{/*<td><i>Edit</i></td>*/}
{/*</tr>*/}
{/*)*/}
{/*}*/}
{/*)}*/}
{/*</tbody>*/}
{/*</Table>*/}
<ApplicationEdit/>
<Drawer style={this.state.drawer}>
<div id="application-view">

@ -16,18 +16,12 @@
* under the License.
*/
import Theme from '../../theme';
import React, {Component} from 'react';
import Dialog from 'material-ui/Dialog';
import {withRouter} from 'react-router-dom';
import FlatButton from 'material-ui/FlatButton';
import AuthHandler from "../../api/authHandler";
import {Step1, Step2, Step3, Step4} from './CreateSteps';
import RaisedButton from 'material-ui/RaisedButton';
import ApplicationMgtApi from '../../api/applicationMgtApi';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {Step, StepLabel, Stepper,} from 'material-ui/Stepper';
import {Button, Modal, InputGroup, ModalHeader, ModalBody, ModalFooter, Input, Label, Form, FormGroup} from 'reactstrap';
import AuthHandler from "../../../api/authHandler";
import {Step1, Step2, Step3, Step4} from './CreateSteps/index';
import ApplicationMgtApi from '../../../api/applicationMgtApi';
import {Button, Modal, ModalBody, ModalFooter, ModalHeader} from 'reactstrap';
/**
* The App Create Component.
@ -221,13 +215,18 @@ class ApplicationCreate extends Component {
<div id="create-application-modal">
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal"
backdrop={'static'}>
<ModalHeader toggle={this.toggle}><i style={{cursor: 'pointer'}} onClick={this.handlePrev}><strong>{'< '}</strong></i>Create Application</ModalHeader>
<ModalHeader toggle={this.toggle}>Create Application</ModalHeader>
<ModalBody id="modal-body-content">
{this.getStepContent(this.state.stepIndex)}
</ModalBody>
<ModalFooter>
{this.state.stepIndex === 0?
<div/> : <Button color="primary" onClick={this.handlePrev}>Back</Button>}
<Button color="secondary" onClick={this.close}>Cancel</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>);

@ -16,11 +16,10 @@
* under the License.
*/
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import AuthHandler from "../../../api/authHandler";
import PlatformMgtApi from "../../../api/platformMgtApi";
import AuthHandler from "../../../../api/authHandler";
import PlatformMgtApi from "../../../../api/platformMgtApi";
import {FormGroup, Input, Label} from 'reactstrap';
/**
@ -57,17 +56,6 @@ class Step1 extends Component {
this.scriptId = "application-create-step1";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
componentDidMount() {
//Get the list of available platforms and set to the state.
PlatformMgtApi.getPlatforms().then(response => {

@ -17,7 +17,6 @@
*/
import PropTypes from 'prop-types';
import Theme from '../../../theme';
import React, {Component} from 'react';
import MenuItem from 'material-ui/MenuItem';
import SelectField from 'material-ui/SelectField';
@ -61,17 +60,6 @@ class Step2 extends Component {
this.scriptId = "application-create-step2";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Create a tag on Enter key press and set it to the state.
* Clears the tags text field.

@ -17,7 +17,6 @@
*/
import PropTypes from 'prop-types';
import Theme from '../../../theme';
import Chip from 'material-ui/Chip';
import Dropzone from 'react-dropzone';
import React, {Component} from 'react';
@ -60,16 +59,6 @@ class Step3 extends Component {
this.scriptId = "application-create-step2";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Create a tag on Enter key press and set it to the state.

@ -18,15 +18,8 @@
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import Toggle from 'material-ui/Toggle';
import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
import Theme from '../../../theme';
import {Button, Form, FormGroup, Label, Input, FormText, Badge, Collapse} from 'reactstrap';
import Switch from '../../UIComponents/Switch/Switch'
import {Collapse, FormGroup, Input, Label} from 'reactstrap';
import Switch from '../../../UIComponents/Switch/Switch'
/**
* The Third step of application create wizard. {Application Release Step}
@ -65,17 +58,6 @@ class Step4 extends Component {
this.scriptId = "application-create-step3";
}
componentWillMount() {
/**
*Loading the theme files based on the the user-preference.
*/
Theme.insertThemingScripts(this.scriptId);
}
componentWillUnmount() {
Theme.removeThemingScripts(this.scriptId);
}
/**
* Handles finish button click.
* This invokes handleNext function in parent component.

@ -1,37 +0,0 @@
/*
* 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';
class ApplicationEdit extends Component {
constructor() {
super();
}
render() {
return(
<div id="application-edit-base">
</div>
)
}
}
export default ApplicationEdit;

@ -0,0 +1,169 @@
/*
* 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 React, {Component} from 'react';
import './baseLayout.css';
import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
import {Button, Col, Row} from "reactstrap";
class ApplicationEdit extends Component {
constructor() {
super();
this.getTabContent = this.getTabContent.bind(this);
this.state = {
general: "active",
release: "",
pkgmgt: "",
activeTab: 1
}
}
handleClick(event) {
event.stopPropagation();
console.log(typeof event.target.value);
const key = event.target.value;
switch (key) {
case "1": {
console.log("Step1");
this.setState({activeTab: 1, general: "active", release: "", pkgmgt: ""});
break;
}
case "2": {
this.setState({activeTab: 2, general: "", release: "active", pkgmgt: ""});
break;
}
case "3": {
this.setState({activeTab: 3, general: "", release: "", pkgmgt: "active"});
break;
}
default: {
return "No Content";
}
}
}
getTabContent(tab) {
switch (tab) {
case 1: {
return ("Step 1")
}
case 2: {
return <ReleaseManager/>
}
case 3: {
return ("Step3")
}
}
}
render() {
console.log(this.state);
return (
<div id="application-edit-base">
<Row id="application-edit-header">
<Col>Application Name</Col>
</Row>
<Row id="application-edit-main-container">
<Col xs="3">
<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="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)}
</div>
</div>
</Col>
</Row>
<Row >
<Col xs="3 offset-9">
<Button>Save</Button>
</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>
)
}
}
export default ApplicationEdit;

@ -0,0 +1,94 @@
#application-edit-base {
width: 70%;
margin: 0 auto;
height: 100%;
background-color: #f6f6f6;
border: solid 1px #828282;
}
#application-edit-header {
height: 50px;
width: 100%;
margin: 0;
background-color: #9a9a9a;
border: solid 1px #a2a2a2;
font-size: 20px;
}
.application-header-text {
margin: 10px 0px 0px 10px;
}
#save-btn-content {
float: right;
}
#app-save-btn {
border-radius: 0%;
}
.save-btn {
margin: 5px 5px 5px 0px;
height: 70%;
width: 50%;
float: right;
}
.save-btn:hover {
cursor: pointer;
}
/*Tab styling*/
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
height: 100%;
}
/* Style the tab buttons */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 15px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
cursor: pointer;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
#application-edit-main-container {
display: flex;
}
#application-edit-outer-content {
height: auto;
width: 100%;
}
#application-edit-content {
margin: 5px 10px 5px 10px;
width: 90%;
}
#app-edit-content {
height: 100%;
position: relative;
}

@ -27,7 +27,7 @@ class PackageManager extends Component {
render() {
return(
<div>
<div id="package-mgt-content">
</div>
)

@ -16,22 +16,14 @@
* under the License.
*/
import PropTypes from 'prop-types';
import React, {Component} from 'react';
class ReleaseManager extends Component {
class ReleaseContent extends Component {
constructor() {
super();
}
render() {
return(
<div>
</div>
)
}
}
export default ReleaseManager;
export default ReleaseContent;

@ -0,0 +1,96 @@
/*
* 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 React, {Component} from 'react';
import './release-mgt.css';
import {Button, Col, Row} from "reactstrap";
class ReleaseManager extends Component {
constructor() {
super();
this.getNoReleaseContent = this.getNoReleaseContent.bind(this);
}
/**
* Holds a generic message saying there are no current release in the specified release channel.
* */
getNoReleaseContent(release) {
return (
<div>
<Row>
<Col sm="12" md={{size: 8, offset: 4}}>
<p>You have no on-going {release} Releases!</p>
</Col>
</Row>
<Row>
<Col sm="12" md={{size: 8, offset: 5}}>
<Button className="button-add" id={release.toLowerCase()}>Create a Release</Button>
</Col>
</Row>
</div>
);
}
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>
</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")}
</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")}
</div>
</div>
</div>
</Col>
</Row>
</div>
)
}
}
export default ReleaseManager;

@ -0,0 +1,32 @@
.release-content {
height: 180px;
width: 95%;
border: dashed 1px #626262;
border-radius: 2%;
position: relative;
background-color: #e8e8e8;
}
.release-content:after {
content: "";
letter-spacing: 4px;
}
.release {
margin: 30px 10px 20px 30px;
}
.no-release-content {
position: absolute;
margin-top: 10px;
left: 40%;
}
.button-add:hover {
cursor: pointer;
}
.release-inner {
margin-top: 5%;
}

@ -21,7 +21,7 @@ import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import TextField from 'material-ui/TextField';
import AuthHandler from "../../api/authHandler";
import DataTable from '../UIComponents/DataTable';
import DataTable from '../UIComponents/DataTable/DataTable';
import PlatformMgtApi from "../../api/platformMgtApi";
import {Card, CardActions, CardTitle} from 'material-ui/Card';

@ -16,7 +16,7 @@
* under the License.
*/
import Theme from '../../theme';
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import DataTableRow from './DataTableRow';

@ -16,7 +16,7 @@
* under the License.
*/
import Theme from '../../theme';
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import FlatButton from 'material-ui/FlatButton';

@ -16,7 +16,7 @@
* under the License.
*/
import Theme from '../../theme';
import Theme from '../../../theme';
import PropTypes from 'prop-types';
import React, {Component} from 'react';
import IconButton from 'material-ui/IconButton';

@ -0,0 +1,19 @@
import React, {Component} from 'react';
import './input.css';
class Input2 extends Component {
render() {
return (
<div className="custom-input">
<input type="text" required/>
<span className="highlight"></span>
<span className="under-line"></span>
<label>Name</label>
</div>
)
}
}
export default Input2;

@ -0,0 +1,118 @@
/** {*/
/*box-sizing: border-box;*/
/*}*/
/*.custom-input {*/
/*position: relative;*/
/*margin-bottom: 45px;*/
/*}*/
/*input {*/
/*font-size: 18px;*/
/*padding: 10px 10px 10px 5px;*/
/*display: block;*/
/*width: 300px;*/
/*border: none;*/
/*border-bottom: 1px solid #757575;*/
/*}*/
/*input:focus {*/
/*outline: none;*/
/*}*/
/*label {*/
/*color: #999;*/
/*font-size: 18px;*/
/*font-weight: normal;*/
/*position: absolute;*/
/*pointer-events: none;*/
/*left: 5px;*/
/*top: 10px;*/
/*transition: 0.2s ease all;*/
/*-moz-transition: 0.2s ease all;*/
/*-webkit-transition: 0.2s ease all;*/
/*}*/
/*!* active state *!*/
/*input:focus ~ label, input:valid ~ label {*/
/*top: -20px;*/
/*font-size: 14px;*/
/*color: #5264AE;*/
/*}*/
/*.under-line {*/
/*position: relative;*/
/*display: block;*/
/*width: 300px;*/
/*}*/
/*.under-line:before, .under-line:after {*/
/*content: '';*/
/*height: 2px;*/
/*width: 0;*/
/*bottom: 1px;*/
/*position: absolute;*/
/*background: #5264AE;*/
/*transition: 0.2s ease all;*/
/*-moz-transition: 0.2s ease all;*/
/*-webkit-transition: 0.2s ease all;*/
/*}*/
/*.under-line:before {*/
/*left: 50%;*/
/*}*/
/*.under-line:after {*/
/*right: 50%;*/
/*}*/
/*!* active state *!*/
/*input:focus ~ .under-line:before, input:focus ~ .under-line:after {*/
/*width: 50%;*/
/*}*/
/*.highlight {*/
/*position: absolute;*/
/*height: 60%;*/
/*width: 100px;*/
/*top: 25%;*/
/*left: 0;*/
/*pointer-events: none;*/
/*opacity: 0.5;*/
/*}*/
/*input:focus ~ .highlight {*/
/*-webkit-animation: inputHighlighter 0.3s ease;*/
/*-moz-animation: inputHighlighter 0.3s ease;*/
/*animation: inputHighlighter 0.3s ease;*/
/*}*/
/*@-webkit-keyframes inputHighlighter {*/
/*from {*/
/*background: #5264AE;*/
/*}*/
/*to {*/
/*width: 0;*/
/*background: transparent;*/
/*}*/
/*}*/
/*@-moz-keyframes inputHighlighter {*/
/*from {*/
/*background: #5264AE;*/
/*}*/
/*to {*/
/*width: 0;*/
/*background: transparent;*/
/*}*/
/*}*/
/*@keyframes inputHighlighter {*/
/*from {*/
/*background: #5264AE;*/
/*}*/
/*to {*/
/*width: 0;*/
/*background: transparent;*/
/*}*/
/*}*/

@ -18,12 +18,12 @@
import Login from './User/Login/Login';
import NotFound from './Error/NotFound';
import BaseLayout from './Base/BaseLayout';
import BaseLayout from './AppPublisherBase/BaseLayout';
import PlatformCreate from './Platform/PlatformCreate';
import PlatformListing from './Platform/PlatformListing';
import ApplicationCreate from './Application/ApplicationCreate';
import ApplicationCreate from './Application/Create/ApplicationCreate';
import ApplicationListing from './Application/ApplicationListing';
import ApplicationEdit from './Application/Edit/ApplicationEditBaseLayout';
import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';
/**
* Contains all UI components related to Application, Login and Platform

@ -80,7 +80,10 @@ body {
left: 110px;
top: 20px;
height: 25px;
border: hidden;
outline: none;
border: none;
border-bottom: solid 1px black;
border-radius: 0%;
}
#application-list {

Loading…
Cancel
Save