+ )
+ }
+
+}
+
+export default Properties;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js
new file mode 100644
index 0000000000..b5c31cf4b3
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/CreateSteps/index.js
@@ -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}
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx
new file mode 100644
index 0000000000..62adc9c16c
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/Create/PlatformCreate.jsx
@@ -0,0 +1,223 @@
+/*
+ * 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 from "./CreateSteps/General";
+import Configure from "./CreateSteps/Configure";
+import Properties from "./CreateSteps/Properties";
+
+/**
+ * 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 (
+
+ );
+ case 1:
+ return (
+
+ );
+ case 2:
+ return (
+
+ );
+ default:
+ return ;
+ }
+ }
+
+
+ getStepperHeaders() {
+ return (
+ [{index: 1, text: "General"},
+ {index: 2, text: "Configure"},
+ {index: 3, text: "Properties"},
+ ]
+ )
+ }
+
+ render() {
+ const {stepIndex} = this.state;
+ return (
+
+
+
+
+
+
+ {this.getStepContent(stepIndex)}
+
+
+ );
+ }
+}
+
+export default PlatformCreate;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
deleted file mode 100644
index 984cb05d66..0000000000
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/PlatformCreate.jsx
+++ /dev/null
@@ -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 (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-export default PlatformCreate;
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js
new file mode 100644
index 0000000000..97ce9d7a4a
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Platform/index.js
@@ -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};
\ No newline at end of file
+