diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
index f91b642adc..49283784f9 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js
@@ -1,6 +1,9 @@
import React from "react";
import "antd/dist/antd.css";
-import {PageHeader, Typography, Card, Steps, Button, message} from "antd";
+import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd";
+import Step1 from "./Step1"
+import Step2 from "./Step2"
+import Step3 from "./Step3"
const Paragraph = Typography;
@@ -23,13 +26,13 @@ const Step = Steps.Step;
const steps = [{
title: 'First',
- content: 'First-content',
+ content: Step1
}, {
title: 'Second',
- content: 'Second-content',
+ content: Step2,
}, {
title: 'Last',
- content: 'Last-content',
+ content: Step3,
}];
@@ -54,7 +57,8 @@ class AddNewApp extends React.Component {
render() {
- const { current } = this.state;
+ const {current} = this.state;
+ const Content = steps[current].content;
return (
-
-
-
- {steps.map(item => )}
-
-
{steps[current].content}
-
- {
- current < steps.length - 1
- &&
- }
- {
- current === steps.length - 1
- &&
- }
- {
- current > 0
- && (
-
- )
- }
-
-
-
+
+
+
+
+
+ {steps.map(item => )}
+
+
+
+ {
+ current < steps.length - 1
+ &&
+ }
+ {
+ current === steps.length - 1
+ &&
+ }
+ {
+ current > 0
+ && (
+
+ )
+ }
+
+
+
+
+
+
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js
new file mode 100644
index 0000000000..24d7194431
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step1.js
@@ -0,0 +1,153 @@
+import React from "react";
+import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd";
+import styles from './Style.less';
+
+const { Option } = Select;
+const { TextArea } = Input;
+const InputGroup = Input.Group;
+
+const formItemLayout = {
+ labelCol: {
+ span: 8,
+ },
+ wrapperCol: {
+ span: 16,
+ },
+};
+
+class EditableTagGroup extends React.Component {
+ state = {
+ tags: [],
+ inputVisible: false,
+ inputValue: '',
+ };
+
+ handleClose = (removedTag) => {
+ const tags = this.state.tags.filter(tag => tag !== removedTag);
+ console.log(tags);
+ this.setState({ tags });
+ }
+
+ showInput = () => {
+ this.setState({ inputVisible: true }, () => this.input.focus());
+ }
+
+ handleInputChange = (e) => {
+ this.setState({ inputValue: e.target.value });
+ }
+
+ handleInputConfirm = () => {
+ const { inputValue } = this.state;
+ let { tags } = this.state;
+ if (inputValue && tags.indexOf(inputValue) === -1) {
+ tags = [...tags, inputValue];
+ }
+ console.log(tags);
+ this.setState({
+ tags,
+ inputVisible: false,
+ inputValue: '',
+ });
+ }
+
+ saveInputRef = input => this.input = input
+
+ render() {
+ const { tags, inputVisible, inputValue } = this.state;
+ return (
+
+ {tags.map((tag, index) => {
+ const isLongTag = tag.length > 20;
+ const tagElem = (
+ this.handleClose(tag)}>
+ {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+
+ );
+ return isLongTag ? {tagElem} : tagElem;
+ })}
+ {inputVisible && (
+
+ )}
+ {!inputVisible && (
+
+ New Tag
+
+ )}
+
+ );
+ }
+}
+
+class Step1 extends React.Component {
+ render() {
+ console.log("hhhoohh");
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Step1;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js
new file mode 100644
index 0000000000..103da1a9c2
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step2.js
@@ -0,0 +1,12 @@
+import React from "react"
+
+class Step2 extends React.Component {
+ render() {
+ console.log("hhhoohh");
+ return (
+ tttoooeeee
+ );
+ }
+}
+
+export default Step2;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js
new file mode 100644
index 0000000000..6ddba9f8e2
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Step3.js
@@ -0,0 +1,12 @@
+import React from "react"
+
+class Step3 extends React.Component {
+ render() {
+ console.log("hhhoohh");
+ return (
+ tttoooeeee
+ );
+ }
+}
+
+export default Step3;
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Style.less b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Style.less
new file mode 100644
index 0000000000..6deac5739b
--- /dev/null
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/Style.less
@@ -0,0 +1,4 @@
+.stepForm {
+ max-width: 500px;
+ margin: 40px auto 0;
+}