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

@ -58,5 +58,10 @@
"No" : "No", "No" : "No",
"No.Platform.Tags" : "No Platform Tags", "No.Platform.Tags" : "No Platform Tags",
"Create.Platform" : "Create Platform", "Create.Platform" : "Create Platform",
"Optional": "Optional" "Optional": "Optional",
"Identifier": "Identifier",
"Next": "Next",
"Platform.Enable": "Enable Platform",
"Share.with.Tenants": "Share between all tenants",
"Platform.Properties": "Platform Properties"
} }

@ -121,6 +121,7 @@
body { body {
width: 100%; width: 100%;
font-family: "Roboto-Regular" !important; font-family: "Roboto-Regular" !important;
font-size: 14px !important;
background-color: #e8e8e8 !important; background-color: #e8e8e8 !important;
} }
@ -822,7 +823,29 @@ div.tab button.active {
-webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
} }
.platform-content:hover { .platform-property-container {
padding-top: 20px;
font-family: Roboto-Regular;
font-size: 14px;
}
.platform-property-row {
align-items: center;
}
.circle-btn-clear {
background-color: white !important;
color: rgba(0, 0, 0, 0.50) !important;
}
.circle-btn-clear:hover {
background-color: white !important;
color: rgba(0, 0, 0, 0.38) !important;
}
.circle-btn-clear:focus {
background-color: white !important;
color: rgba(0, 0, 0, 0.60) !important;
} }
.data-table-row-cell { .data-table-row-cell {
@ -849,6 +872,20 @@ div.tab button.active {
color: #9e9e9e; color: #9e9e9e;
} }
.circle-btn-add {
background-color: #bababa !important;
border-radius: 50% !important;
height: 30px !important;
width: 30px;
text-align: -webkit-center;
font-size: 18px;
padding: 6px !important;
}
.circle-btn-add:hover {
background-color: #828282 !important;
}
/** /**
If you need to change the color of active steps in stepper, If you need to change the color of active steps in stepper,
uncomment the following and set the background color and font color as needed. uncomment the following and set the background color and font color as needed.

@ -57,4 +57,28 @@ export default class Helper {
return tmpTags; return tmpTags;
} }
/**
* Generates Platform data object.
* @param general: Platform general information.
* @param config: Platform configurations.
* @param properties: Platform properties.
*
* @return {{platform: *, icon}} data object and the icon image.
* */
static buildPlatform(general, config, properties) {
let platform = Object.assign({}, general, config, properties);
let icon = platform.icon[0];
delete platform.icon;
platform.tags = Helper.stringifyTags(platform.tags);
let tempData = {
"platform": platform,
"icon": icon
};
return tempData;
}
} }

@ -20,6 +20,7 @@
import Axios from 'axios'; import Axios from 'axios';
import AuthHandler from './authHandler'; import AuthHandler from './authHandler';
import Constants from '../common/constants'; import Constants from '../common/constants';
import Helper from './helpers/appMgtApiHelpers';
/** /**
* Api definitions for Platform management. * Api definitions for Platform management.
@ -27,17 +28,19 @@ import Constants from '../common/constants';
export default class PlatformMgtApi{ export default class PlatformMgtApi{
/** /**
* Create a new Platform * Create a new Platform
* @param platformData: The platform data object. * @param general: Platform general information.
* @param config: Platform configurations.
* @param prop: Platform properties.
* */ * */
static createPlatform(platformData) { static createPlatform(general, config, prop) {
const headers = AuthHandler.createAuthenticationHeaders("application/json"); const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then( let platform = Helper.buildPlatform(general, config, prop);
function (response) {
console.log(response); let platformData = new FormData();
} platformData.append("platform", platform.platform);
).catch(function (err) { platformData.append("icon", platform.icon);
console.log(err);
}); return Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers});
} }
/** /**

@ -95,6 +95,8 @@ class BaseLayout extends Component {
return "Applications"; return "Applications";
} else if (href.indexOf("platforms") !== -1) { } else if (href.indexOf("platforms") !== -1) {
return "Platforms"; return "Platforms";
} else {
return "";
} }
} }
@ -163,23 +165,19 @@ class BaseLayout extends Component {
<Button className="custom-flat grey" onClick={this.onClickPlatforms}> <Button className="custom-flat grey" onClick={this.onClickPlatforms}>
<i className="fw fw-settings"></i> <i className="fw fw-settings"></i>
<FormattedMessage id="Platforms" defaultMessage="Platforms"/> <FormattedMessage id="Platforms" defaultMessage="Platforms"/>
</Button> : </Button> : this.getCurrentPageTitle() === "" ? <div/> :
<Button className="custom-flat grey" onClick={this.onClickApplications}> <Button className="custom-flat grey" onClick={this.onClickApplications}>
<i className="fw fw-application"></i> <i className="fw fw-application"></i>
<FormattedMessage id="Applications" defaultMessage="Applications"/> <FormattedMessage id="Applications" defaultMessage="Applications"/>
</Button> </Button>
} }
</div> </div>
</Col> </Col>
</Row> </Row>
<Row> <Row>
<div id="application-content"> <Col>
<Row> {this.props.children}
<Col> </Col>
{this.props.children}
</Col>
</Row>
</div>
</Row> </Row>
</div> </div>
</Container> </Container>

@ -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;

@ -16,11 +16,11 @@
* under the License. * under the License.
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import {Button, Col, Row} from "reactstrap"; import {Button, Row} from "reactstrap";
import Platform from "./Platform"; import Platform from "./Platform";
import PlatformMgtApi from "../../api/platformMgtApi"; import PlatformMgtApi from "../../api/platformMgtApi";
import AuthHandler from "../../api/authHandler"; import AuthHandler from "../../api/authHandler";
import PlatformCreate from "./PlatformCreate"; import PlatformCreate from "./Create/PlatformCreate";
/** /**
* Platform view component. * Platform view component.

@ -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};

@ -48,6 +48,7 @@
} }
.chip-close-btn { .chip-close-btn {
font-size: 16px !important;
align-content: center; align-content: center;
padding-left: 4px; padding-left: 4px;
padding-top: 1px; padding-top: 1px;

@ -37,7 +37,7 @@ class Step extends Component {
let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index; let stepIndexContent = index === passed || index < passed ? <i className="fw fw-check"></i> : index;
return ( return (
<div className="step col-3"> <div className="step col">
<div className="step-content"> <div className="step-content">
<div className={indexClassNames}> <div className={indexClassNames}>
<span> <span>

@ -20,8 +20,9 @@
.switch { .switch {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: 40px; width: 36px;
height: 24px; height: 14px;
margin: 0 0 0 10px !important;
} }
/* Hide default HTML checkbox */ /* Hide default HTML checkbox */
@ -35,7 +36,7 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background-color: #ccc; background-color: #a0a0a0;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
} }
@ -43,17 +44,17 @@
.slider:before { .slider:before {
position: absolute; position: absolute;
content: ""; content: "";
height: 16px; top: -3px;
width: 16px; height: 20px;
left: 4px; width: 20px;
bottom: 4px;
background-color: white; background-color: white;
-webkit-transition: .4s; -webkit-transition: .4s;
transition: .4s; transition: .4s;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.117647) 0px 1px 4px;
} }
input:checked + .slider { input:checked + .slider {
background-color: #2196F3; background-color: rgba(33, 150, 243, 0.51);
} }
input:focus + .slider { input:focus + .slider {
@ -61,9 +62,10 @@ input:focus + .slider {
} }
input:checked + .slider:before { input:checked + .slider:before {
-webkit-transform: translateX(16px); -webkit-transform: translateX(20px);
-ms-transform: translateX(16px); -ms-transform: translateX(20px);
transform: translateX(16px); transform: translateX(20px);
background-color: #2196F3;
} }
/* Rounded sliders */ /* Rounded sliders */

@ -19,8 +19,7 @@
import Login from './User/Login/Login'; import Login from './User/Login/Login';
import NotFound from './Error/NotFound'; import NotFound from './Error/NotFound';
import BaseLayout from './AppPublisherBase/BaseLayout'; import BaseLayout from './AppPublisherBase/BaseLayout';
import PlatformCreate from './Platform/PlatformCreate'; import {PlatformCreate, PlatformListing} from './Platform';
import PlatformListing from './Platform/PlatformListing';
import ApplicationCreate from './Application/Create/ApplicationCreate'; import ApplicationCreate from './Application/Create/ApplicationCreate';
import ApplicationListing from './Application/ApplicationListing'; import ApplicationListing from './Application/ApplicationListing';
import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout'; import ApplicationEdit from './Application/Edit/Base/ApplicationEditBaseLayout';

Loading…
Cancel
Save