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.Platform.Tags" : "No Platform Tags",
"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 {
width: 100%;
font-family: "Roboto-Regular" !important;
font-size: 14px !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;
}
.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 {
@ -849,6 +872,20 @@ div.tab button.active {
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,
uncomment the following and set the background color and font color as needed.

@ -57,4 +57,28 @@ export default class Helper {
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 AuthHandler from './authHandler';
import Constants from '../common/constants';
import Helper from './helpers/appMgtApiHelpers';
/**
* Api definitions for Platform management.
@ -27,17 +28,19 @@ import Constants from '../common/constants';
export default class PlatformMgtApi{
/**
* 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) {
const headers = AuthHandler.createAuthenticationHeaders("application/json");
Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers}).then(
function (response) {
console.log(response);
}
).catch(function (err) {
console.log(err);
});
static createPlatform(general, config, prop) {
const headers = AuthHandler.createAuthenticationHeaders("multipart/form-data");
let platform = Helper.buildPlatform(general, config, prop);
let platformData = new FormData();
platformData.append("platform", platform.platform);
platformData.append("icon", platform.icon);
return Axios.post(Constants.platformManagerEndpoints.CREATE_PLATFORM, platformData, {headers: headers});
}
/**

@ -95,6 +95,8 @@ class BaseLayout extends Component {
return "Applications";
} else if (href.indexOf("platforms") !== -1) {
return "Platforms";
} else {
return "";
}
}
@ -163,23 +165,19 @@ class BaseLayout extends Component {
<Button className="custom-flat grey" onClick={this.onClickPlatforms}>
<i className="fw fw-settings"></i>
<FormattedMessage id="Platforms" defaultMessage="Platforms"/>
</Button> :
<Button className="custom-flat grey" onClick={this.onClickApplications}>
<i className="fw fw-application"></i>
<FormattedMessage id="Applications" defaultMessage="Applications"/>
</Button>
</Button> : this.getCurrentPageTitle() === "" ? <div/> :
<Button className="custom-flat grey" onClick={this.onClickApplications}>
<i className="fw fw-application"></i>
<FormattedMessage id="Applications" defaultMessage="Applications"/>
</Button>
}
</div>
</Col>
</Row>
<Row>
<div id="application-content">
<Row>
<Col>
{this.props.children}
</Col>
</Row>
</div>
<Col>
{this.props.children}
</Col>
</Row>
</div>
</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.
*/
import React, {Component} from 'react';
import {Button, Col, Row} from "reactstrap";
import {Button, Row} from "reactstrap";
import Platform from "./Platform";
import PlatformMgtApi from "../../api/platformMgtApi";
import AuthHandler from "../../api/authHandler";
import PlatformCreate from "./PlatformCreate";
import PlatformCreate from "./Create/PlatformCreate";
/**
* 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 {
font-size: 16px !important;
align-content: center;
padding-left: 4px;
padding-top: 1px;

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

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

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

Loading…
Cancel
Save