forked from community/device-mgt-core
Merge pull request #1029 from menakaj/application-mgt
Platform create steps and improvements.feature/appm-store/pbac
sinthuja
7 years ago
committed by
GitHub
commit
747fe5d8c2
@ -0,0 +1,198 @@
|
|||||||
|
/*
|
||||||
|
* 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 {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from "reactstrap";
|
||||||
|
import {FormattedMessage} from "react-intl";
|
||||||
|
import Switch from "../../../UIComponents/Switch/Switch";
|
||||||
|
import Chip from "../../../UIComponents/Chip/Chip";
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Enable : switch
|
||||||
|
* Share between tenants: switch
|
||||||
|
* Tags: input
|
||||||
|
* */
|
||||||
|
class Configure extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.onCancelClick = this.onCancelClick.bind(this);
|
||||||
|
this.onBackClick = this.onBackClick.bind(this);
|
||||||
|
this.setStepData = this.setStepData.bind(this);
|
||||||
|
this.state = {
|
||||||
|
defValue: "",
|
||||||
|
tags: [],
|
||||||
|
enabled: false,
|
||||||
|
shared: false,
|
||||||
|
defaultTenantMapping: true,
|
||||||
|
errors: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a tag on Enter key press and set it to the state.
|
||||||
|
* Clears the tags text field.
|
||||||
|
* Chip gets two parameters: Key and value.
|
||||||
|
* */
|
||||||
|
addTags(event) {
|
||||||
|
let tags = this.state.tags;
|
||||||
|
if (event.charCode === 13) {
|
||||||
|
event.preventDefault();
|
||||||
|
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||||
|
this.setState({tags, defValue: ""}, console.log(tags));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the value for tag.
|
||||||
|
* */
|
||||||
|
handleTagChange(event) {
|
||||||
|
let defaultValue = this.state.defValue;
|
||||||
|
defaultValue = event.target.value;
|
||||||
|
this.setState({defValue: defaultValue})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles Chip delete function.
|
||||||
|
* Removes the tag from state.tags
|
||||||
|
* */
|
||||||
|
handleRequestDelete(key) {
|
||||||
|
let chipData = this.state.tags;
|
||||||
|
const chipToDelete = chipData.map((chip) => chip.key).indexOf(key);
|
||||||
|
chipData.splice(chipToDelete, 1);
|
||||||
|
this.setState({tags: chipData});
|
||||||
|
};
|
||||||
|
|
||||||
|
onCancelClick() {
|
||||||
|
this.props.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
onBackClick() {
|
||||||
|
this.props.handlePrev();
|
||||||
|
}
|
||||||
|
|
||||||
|
setStepData() {
|
||||||
|
const {shared, enabled, tags, defaultTenantMapping} = this.state;
|
||||||
|
|
||||||
|
let config = {
|
||||||
|
shared: shared,
|
||||||
|
enabled: enabled,
|
||||||
|
defaultTenantMapping: defaultTenantMapping,
|
||||||
|
tags: tags
|
||||||
|
};
|
||||||
|
|
||||||
|
this.props.setStepData("configure", config);
|
||||||
|
}
|
||||||
|
|
||||||
|
onEnabledChanged() {
|
||||||
|
let enabled = this.state.enabled;
|
||||||
|
this.setState({enabled: !enabled});
|
||||||
|
}
|
||||||
|
|
||||||
|
onAllTenantsChanged() {
|
||||||
|
let allTenants = this.state.allTenants;
|
||||||
|
this.setState({allTenants: !allTenants});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ModalBody>
|
||||||
|
<FormGroup>
|
||||||
|
<div id="app-release-switch-content">
|
||||||
|
<div id="app-release-switch-label">
|
||||||
|
<Label for="app-release-switch">
|
||||||
|
<FormattedMessage id="Platform.Enable" defaultMessage="Platform.Enable"/>
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
<div id="app-release-switch">
|
||||||
|
<Switch
|
||||||
|
name="enabled"
|
||||||
|
id="app-release-switch"
|
||||||
|
onChange={this.onEnabledChanged.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
<br/>
|
||||||
|
<FormGroup>
|
||||||
|
<div id="app-release-switch-content">
|
||||||
|
<div id="app-release-switch-label">
|
||||||
|
<Label for="app-release-switch">
|
||||||
|
<FormattedMessage id="Share.with.Tenants" defaultMessage="Share.with.Tenants"/>
|
||||||
|
</Label>
|
||||||
|
</div>
|
||||||
|
<div id="app-release-switch">
|
||||||
|
<Switch
|
||||||
|
name="share"
|
||||||
|
id="app-release-switch"
|
||||||
|
onChange={this.onAllTenantsChanged.bind(this)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
<br/>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="app-tags"><FormattedMessage id='Tags' defaultMessage='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 (
|
||||||
|
<Chip
|
||||||
|
key={tag.key}
|
||||||
|
content={tag}
|
||||||
|
onDelete={this.handleRequestDelete.bind(this)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<FormFeedback id="form-error">{this.state.errors.tags}</FormFeedback>
|
||||||
|
</FormGroup>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter className="custom-footer row">
|
||||||
|
<div className="footer-back-btn col">
|
||||||
|
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||||
|
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="footer-main-btn col">
|
||||||
|
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||||
|
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||||
|
</Button>
|
||||||
|
<Button className="custom-flat primary-flat" onClick={this.setStepData}>
|
||||||
|
<FormattedMessage id="Next" defaultMessage="Next"/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Configure;
|
||||||
@ -0,0 +1,191 @@
|
|||||||
|
/*
|
||||||
|
* 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 {Button, FormFeedback, FormGroup, Input, Label, ModalBody, ModalFooter} from "reactstrap";
|
||||||
|
import {FormattedMessage} from "react-intl";
|
||||||
|
import * as validator from '../../../../common/validator';
|
||||||
|
import Dropzone from "react-dropzone";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Name
|
||||||
|
* Description
|
||||||
|
* Identifier
|
||||||
|
* Icon
|
||||||
|
* */
|
||||||
|
class General extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.onTextFieldChange = this.onTextFieldChange.bind(this);
|
||||||
|
this.onNextClick = this.onNextClick.bind(this);
|
||||||
|
this.onCancelClick = this.onCancelClick.bind(this);
|
||||||
|
this.state = {
|
||||||
|
name: "",
|
||||||
|
description: "",
|
||||||
|
identifier: "",
|
||||||
|
errors: {},
|
||||||
|
icon: []
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onNextClick() {
|
||||||
|
const {name, description, identifier, icon} = this.state;
|
||||||
|
|
||||||
|
console.log("Next")
|
||||||
|
|
||||||
|
let general = {
|
||||||
|
name: name,
|
||||||
|
description: description,
|
||||||
|
identifier: identifier,
|
||||||
|
icon: icon
|
||||||
|
};
|
||||||
|
|
||||||
|
let {errorCount, errors} = this.validate();
|
||||||
|
|
||||||
|
if (errorCount !== 0) {
|
||||||
|
this.setState({errors: errors});
|
||||||
|
} else {
|
||||||
|
this.props.setStepData("general", general);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onCancelClick() {
|
||||||
|
this.props.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
onTextFieldChange(event) {
|
||||||
|
let field = event.target.name;
|
||||||
|
let value = event.target.value;
|
||||||
|
|
||||||
|
console.log(field, value)
|
||||||
|
|
||||||
|
switch (field) {
|
||||||
|
case("platformName") : {
|
||||||
|
this.setState({name: value});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case("platformDescription") : {
|
||||||
|
this.setState({description: value});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case("platformId") : {
|
||||||
|
this.setState({identifier: value});
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
validate() {
|
||||||
|
|
||||||
|
const {name, identifier, description} = this.state;
|
||||||
|
let errorCount = 0;
|
||||||
|
let errors = {};
|
||||||
|
|
||||||
|
if (validator.validateNull(name)) {
|
||||||
|
errorCount++;
|
||||||
|
errors.name = "Platform Name is Required!"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validator.validateNull(identifier)) {
|
||||||
|
errorCount++;
|
||||||
|
errors.identifier = "Platform Identifier is Required!"
|
||||||
|
}
|
||||||
|
|
||||||
|
if (validator.validateNull(description)) {
|
||||||
|
errorCount++;
|
||||||
|
errors.description = "Platform Desciption is Required!"
|
||||||
|
}
|
||||||
|
|
||||||
|
return {errorCount, errors};
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ModalBody>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="platform-name">
|
||||||
|
<FormattedMessage id="Name" defaultMessage="Name"/>*
|
||||||
|
</Label>
|
||||||
|
<Input required type="text" name="platformName" id="platform-name"
|
||||||
|
onChange={this.onTextFieldChange}/>
|
||||||
|
<FormFeedback id="form-error">{this.state.errors.name}</FormFeedback>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="platform-description">
|
||||||
|
<FormattedMessage id="Description" defaultMessage="Description"/>*
|
||||||
|
</Label>
|
||||||
|
<Input required type="textarea" name="platformDescription" id="platform-description"
|
||||||
|
onChange={this.onTextFieldChange}/>
|
||||||
|
<FormFeedback id="form-error">{this.state.errors.description}</FormFeedback>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="platform-id">
|
||||||
|
<FormattedMessage id="Identifier" defaultMessage="Identifier"/>*
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
required
|
||||||
|
type="text"
|
||||||
|
name="platformId"
|
||||||
|
id="platform-id"
|
||||||
|
onChange={this.onTextFieldChange}/>
|
||||||
|
<FormFeedback id="form-error">{this.state.errors.identifier}</FormFeedback>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="app-icon">
|
||||||
|
<FormattedMessage id='Icon' defaultMessage='Icon'/>
|
||||||
|
</Label>
|
||||||
|
<span className="image-sub-title"> (512 X 512 32 bit PNG)</span>
|
||||||
|
<div id="app-icon-container">
|
||||||
|
{this.state.icon.map((tile) => (
|
||||||
|
<div id="app-image-icon">
|
||||||
|
<img src={tile.preview} height={200} width={200}/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{this.state.icon.length === 0 ?
|
||||||
|
<Dropzone
|
||||||
|
className="application-create-icon-dropzone"
|
||||||
|
accept="image/jpeg, image/png"
|
||||||
|
onDrop={(icon, rejected) => {
|
||||||
|
this.setState({icon, rejected});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="fw fw-add"></i>
|
||||||
|
</Dropzone> : <div/>}
|
||||||
|
</div>
|
||||||
|
<FormFeedback id="form-error">{this.state.errors.icon}</FormFeedback>
|
||||||
|
</FormGroup>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter>
|
||||||
|
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||||
|
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||||
|
</Button>
|
||||||
|
<Button className="custom-raised primary" onClick={this.onNextClick}>
|
||||||
|
<FormattedMessage id="Next" defaultMessage="Next"/>
|
||||||
|
</Button>
|
||||||
|
</ModalFooter>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default General;
|
||||||
@ -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 {Button, Col, FormGroup, Input, Label, ModalBody, ModalFooter, Row} from "reactstrap";
|
||||||
|
import {FormattedMessage} from "react-intl";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* key : value +
|
||||||
|
* */
|
||||||
|
class Properties extends Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.onCancelClick = this.onCancelClick.bind(this);
|
||||||
|
this.onBackClick = this.onBackClick.bind(this);
|
||||||
|
this.submitForm = this.submitForm.bind(this);
|
||||||
|
this.onAddPropertyClick = this.onAddPropertyClick.bind(this);
|
||||||
|
this.onKeyFieldChange = this.onKeyFieldChange.bind(this);
|
||||||
|
this.onValueFieldChange = this.onValueFieldChange.bind(this);
|
||||||
|
this.onPropertyDelete = this.onPropertyDelete.bind(this);
|
||||||
|
this.state = {
|
||||||
|
key: "",
|
||||||
|
value: "",
|
||||||
|
properties: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onCancelClick() {
|
||||||
|
this.props.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
onBackClick() {
|
||||||
|
this.props.handlePrev();
|
||||||
|
}
|
||||||
|
|
||||||
|
submitForm() {
|
||||||
|
let platformProps = {
|
||||||
|
"properties": this.state.properties
|
||||||
|
};
|
||||||
|
this.props.onSubmit(platformProps);
|
||||||
|
}
|
||||||
|
|
||||||
|
onAddPropertyClick() {
|
||||||
|
let {key, value, properties} = this.state;
|
||||||
|
let property = {
|
||||||
|
name: key,
|
||||||
|
defaultValue: value,
|
||||||
|
optional: false
|
||||||
|
};
|
||||||
|
|
||||||
|
properties.push(property);
|
||||||
|
|
||||||
|
this.setState({property: properties, key: "", value: ""})
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyFieldChange(event) {
|
||||||
|
this.setState({key: event.target.value});
|
||||||
|
}
|
||||||
|
|
||||||
|
onValueFieldChange(event) {
|
||||||
|
this.setState({value: event.target.value});
|
||||||
|
}
|
||||||
|
|
||||||
|
onPropertyDelete(key) {
|
||||||
|
let properties = this.state.properties;
|
||||||
|
const propertyToDelete = properties.map((property) => property.name).indexOf(key);
|
||||||
|
properties.splice(propertyToDelete, 1);
|
||||||
|
this.setState({properties: properties});
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<ModalBody>
|
||||||
|
<FormGroup>
|
||||||
|
<Label for="platform-properties">
|
||||||
|
<FormattedMessage id="Platform.Properties" defaultMessage="Platform.Properties"/></Label>
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<Input
|
||||||
|
placeholder="Key"
|
||||||
|
type="text"
|
||||||
|
name="app-tags"
|
||||||
|
id="app-tags"
|
||||||
|
value={this.state.key}
|
||||||
|
onChange={this.onKeyFieldChange}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Input
|
||||||
|
placeholder="value"
|
||||||
|
type="text"
|
||||||
|
name="app-tags"
|
||||||
|
id="app-tags"
|
||||||
|
value={this.state.value}
|
||||||
|
onChange={this.onValueFieldChange}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button className="custom-flat circle-btn-add" onClick={this.onAddPropertyClick}>
|
||||||
|
<i className="fw fw-add"></i>
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<div className="platform-property-container">
|
||||||
|
{this.state.properties.map(
|
||||||
|
property => {
|
||||||
|
return (
|
||||||
|
<Row key={property.name} className="platform-property-row">
|
||||||
|
<Col key={property.name}>
|
||||||
|
{property.name}
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
{property.defaultValue}
|
||||||
|
</Col>
|
||||||
|
<Col>
|
||||||
|
<Button
|
||||||
|
className="custom-flat circle-btn-clear"
|
||||||
|
onClick={() => {
|
||||||
|
this.onPropertyDelete(property.name)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<i className="fw fw-error"></i>
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</FormGroup>
|
||||||
|
</ModalBody>
|
||||||
|
<ModalFooter className="custom-footer row">
|
||||||
|
<div className="footer-back-btn col">
|
||||||
|
<Button className="custom-flat primary-flat" onClick={this.onBackClick}>
|
||||||
|
<FormattedMessage id="Back" defaultMessage="Back"/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<div className="footer-main-btn col">
|
||||||
|
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
||||||
|
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
||||||
|
</Button>
|
||||||
|
<Button className="custom-flat primary-flat" onClick={this.submitForm}>
|
||||||
|
<FormattedMessage id="Create" defaultMessage="Create"/>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</ModalFooter>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Properties;
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
/*
|
||||||
|
* 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 Configure from './Configure';
|
||||||
|
import General from './General';
|
||||||
|
import Properties from './Properties';
|
||||||
|
|
||||||
|
export {Configure, General, Properties}
|
||||||
@ -0,0 +1,221 @@
|
|||||||
|
/*
|
||||||
|
* 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 {Modal, ModalHeader} from "reactstrap";
|
||||||
|
import {FormattedMessage} from "react-intl";
|
||||||
|
import Stepper from "../../UIComponents/StepprHeader/Stepper";
|
||||||
|
import PlatformMgtApi from "../../../api/platformMgtApi";
|
||||||
|
import AuthHandler from "../../../api/authHandler";
|
||||||
|
import {General, Configure, Properties} from "./CreateSteps";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Platform view component.
|
||||||
|
* */
|
||||||
|
class PlatformCreate extends Component {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.onClose = this.onClose.bind(this);
|
||||||
|
this.setStepData = this.setStepData.bind(this);
|
||||||
|
this.onSubmit = this.onSubmit.bind(this);
|
||||||
|
this.onPrevClick = this.onPrevClick.bind(this);
|
||||||
|
this.onNextClick = this.onNextClick.bind(this);
|
||||||
|
this.state = {
|
||||||
|
finished: false,
|
||||||
|
stepIndex: 0,
|
||||||
|
stepData: [],
|
||||||
|
general: {},
|
||||||
|
configure: {},
|
||||||
|
platformProps: {},
|
||||||
|
open: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
componentWillReceiveProps(props, nextprops) {
|
||||||
|
this.setState({open: props.open})
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
this.setState({open: this.props.open});
|
||||||
|
}
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
this.setState({open: false, stepIndex: 0, general: {}, configure: {}, platformProps: {}})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles next button click event.
|
||||||
|
* */
|
||||||
|
onNextClick() {
|
||||||
|
// console.log(this.state); //TODO: Remove this
|
||||||
|
const {stepIndex} = this.state;
|
||||||
|
|
||||||
|
if (stepIndex + 1 > 2) {
|
||||||
|
console.log(this.state);
|
||||||
|
this.onSubmit();
|
||||||
|
} else {
|
||||||
|
this.setState({
|
||||||
|
stepIndex: stepIndex + 1,
|
||||||
|
finished: stepIndex + 1 > 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles form submit.
|
||||||
|
* platform.identifier = this.state.identifier;
|
||||||
|
platform.name = this.state.name;
|
||||||
|
platform.description = this.state.description;
|
||||||
|
platform.tags = this.state.tags;
|
||||||
|
platform.properties = this.state.platformProperties;
|
||||||
|
platform.icon = this.state.icon;
|
||||||
|
platform.enabled = this.state.enabled;
|
||||||
|
platform.allTenants = this.state.allTenants;
|
||||||
|
platform.defaultTenantMapping = true;
|
||||||
|
|
||||||
|
*
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
onSubmit(platformProps) {
|
||||||
|
let {general, configure} = this.state;
|
||||||
|
|
||||||
|
console.log(general);
|
||||||
|
|
||||||
|
let platformCreatePromise = PlatformMgtApi.createPlatform(general, configure, platformProps);
|
||||||
|
platformCreatePromise.then(response => {
|
||||||
|
console.log(response.data)
|
||||||
|
}
|
||||||
|
).catch(
|
||||||
|
function (err) {
|
||||||
|
AuthHandler.unauthorizedErrorHandler(err);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Saves form data in each step in to the state.
|
||||||
|
* @param step: The step number of the step data.
|
||||||
|
* @param data: The form data of the step.
|
||||||
|
* */
|
||||||
|
setStepData(step, data) {
|
||||||
|
console.log(data); //TODO: Remove this
|
||||||
|
switch (step) {
|
||||||
|
case "general": {
|
||||||
|
this.setState({general: data}, this.onNextClick());
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "configure": {
|
||||||
|
this.setState({configure: data}, this.onNextClick());
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "platformProps": {
|
||||||
|
this.setState({platformProps: data}, this.onNextClick());
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handled [ < Prev ] button click.
|
||||||
|
* This clears the data in the current step and returns to the previous step.
|
||||||
|
* */
|
||||||
|
onPrevClick() {
|
||||||
|
console.log(this.state.stepIndex);
|
||||||
|
const {stepIndex} = this.state;
|
||||||
|
if (stepIndex > 0) {
|
||||||
|
this.setState({stepIndex: stepIndex - 1, finished: false});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Defines all the Steps in the stepper. (Wizard)
|
||||||
|
*
|
||||||
|
* Extension Point: If any extra steps needed, follow the instructions below.
|
||||||
|
* 1. Create the required form ./Forms directory.
|
||||||
|
* 2. Add defined case statements.
|
||||||
|
* 3. Define the Step in render function.
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
getStepContent(stepIndex) {
|
||||||
|
switch (stepIndex) {
|
||||||
|
case 0:
|
||||||
|
return (
|
||||||
|
<General
|
||||||
|
defaultData={this.state.general}
|
||||||
|
setStepData={this.setStepData}
|
||||||
|
close={this.onClose}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case 1:
|
||||||
|
return (
|
||||||
|
<Configure
|
||||||
|
defaultData={this.state.configure}
|
||||||
|
handlePrev={this.onPrevClick}
|
||||||
|
setStepData={this.setStepData}
|
||||||
|
close={this.onClose}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case 2:
|
||||||
|
return (
|
||||||
|
<Properties
|
||||||
|
defaultData={this.state.properties}
|
||||||
|
handlePrev={this.onPrevClick}
|
||||||
|
onSubmit={this.onSubmit}
|
||||||
|
close={this.onClose}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return <div/>;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
getStepperHeaders() {
|
||||||
|
return (
|
||||||
|
[{index: 1, text: "General"},
|
||||||
|
{index: 2, text: "Configure"},
|
||||||
|
{index: 3, text: "Properties"},
|
||||||
|
]
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {stepIndex} = this.state;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Modal isOpen={this.state.open} toggle={this.toggle} id="app-create-modal" backdrop={'static'}>
|
||||||
|
<ModalHeader className="app-create-modal-header">
|
||||||
|
<FormattedMessage id="Create.Platform" defaultMessage="Create.Platform"/>
|
||||||
|
</ModalHeader>
|
||||||
|
<Stepper
|
||||||
|
activeStep={stepIndex + 1}
|
||||||
|
previousStep={stepIndex}
|
||||||
|
stepContent={this.getStepperHeaders()}
|
||||||
|
/>
|
||||||
|
{this.getStepContent(stepIndex)}
|
||||||
|
</Modal>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PlatformCreate;
|
||||||
@ -1,83 +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 React, {Component} from 'react';
|
|
||||||
import {Button, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader} from "reactstrap";
|
|
||||||
import {FormattedMessage} from "react-intl";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Platform view component.
|
|
||||||
* */
|
|
||||||
class PlatformCreate extends Component {
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.onCancelClick = this.onCancelClick.bind(this);
|
|
||||||
this.state = {
|
|
||||||
open: false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
componentWillReceiveProps(props, nextprops) {
|
|
||||||
this.setState({open: props.open})
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillMount() {
|
|
||||||
this.setState({open: this.props.open});
|
|
||||||
}
|
|
||||||
|
|
||||||
onCancelClick() {
|
|
||||||
this.setState({open: false})
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Modal isOpen={this.state.open} toggle={this.toggle} id="platform-create-modal" backdrop={'static'}>
|
|
||||||
<ModalHeader>
|
|
||||||
<FormattedMessage id="Create.Platform" defaultMessage="Create.Platform"/>
|
|
||||||
</ModalHeader>
|
|
||||||
<ModalBody>
|
|
||||||
<FormGroup>
|
|
||||||
<Label for="platform-name">
|
|
||||||
<FormattedMessage id="Name" defaultMessage="Name"/>*
|
|
||||||
</Label>
|
|
||||||
<Input required type="text" name="appName" id="platform-name"/>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Label for="platform-description">
|
|
||||||
<FormattedMessage id="Description" defaultMessage="Description"/>*
|
|
||||||
</Label>
|
|
||||||
<Input required type="textarea" name="appName" id="platform-description"/>
|
|
||||||
</FormGroup>
|
|
||||||
</ModalBody>
|
|
||||||
<ModalFooter>
|
|
||||||
<Button className="custom-flat danger-flat" onClick={this.onCancelClick}>
|
|
||||||
<FormattedMessage id="Cancel" defaultMessage="Cancel"/>
|
|
||||||
</Button>
|
|
||||||
<Button className="custom-raised primary">
|
|
||||||
<FormattedMessage id="Create" defaultMessage="Create"/>
|
|
||||||
</Button>
|
|
||||||
</ModalFooter>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default PlatformCreate;
|
|
||||||
@ -0,0 +1,23 @@
|
|||||||
|
/*
|
||||||
|
* 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 PlatformCreate from './Create/PlatformCreate';
|
||||||
|
import Platform from './Platform';
|
||||||
|
import PlatformListing from './PlatformListing';
|
||||||
|
|
||||||
|
export {PlatformListing, PlatformCreate, Platform};
|
||||||
Loading…
Reference in new issue