created the step one

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 (
             <div>
                 <PageHeader
@@ -70,33 +74,38 @@ class AddNewApp extends React.Component {
                     </div>
                 </PageHeader>
                 <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
-                    <Card>
-                        <div>
-                            <Steps current={current}>
-                                {steps.map(item => <Step key={item.title} title={item.title}/>)}
-                            </Steps>
-                            <div className="steps-content">{steps[current].content}</div>
-                            <div className="steps-action">
-                                {
-                                    current < steps.length - 1
-                                    && <Button type="primary" onClick={() => this.next()}>Next</Button>
-                                }
-                                {
-                                    current === steps.length - 1
-                                    && <Button type="primary"
-                                               onClick={() => message.success('Processing complete!')}>Done</Button>
-                                }
-                                {
-                                    current > 0
-                                    && (
-                                        <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
-                                            Previous
-                                        </Button>
-                                    )
-                                }
-                            </div>
-                        </div>
-                    </Card>
+                    <Row>
+                        <Col span={16} offset={4}>
+                            <Card>
+                                <div>
+                                    <Steps current={current}>
+                                        {steps.map(item => <Step key={item.title} title={item.title}/>)}
+                                    </Steps>
+                                    <Content/>
+                                    <div className="steps-action">
+                                        {
+                                            current < steps.length - 1
+                                            && <Button type="primary" onClick={() => this.next()}>Next</Button>
+                                        }
+                                        {
+                                            current === steps.length - 1
+                                            && <Button type="primary"
+                                                       onClick={() => message.success('Processing complete!')}>Done</Button>
+                                        }
+                                        {
+                                            current > 0
+                                            && (
+                                                <Button style={{marginLeft: 8}} onClick={() => this.prev()}>
+                                                    Previous
+                                                </Button>
+                                            )
+                                        }
+                                    </div>
+                                </div>
+                            </Card>
+                        </Col>
+                    </Row>
+
                 </div>
 
             </div>

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 (
+            <div>
+                {tags.map((tag, index) => {
+                    const isLongTag = tag.length > 20;
+                    const tagElem = (
+                        <Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
+                            {isLongTag ? `${tag.slice(0, 20)}...` : tag}
+                        </Tag>
+                    );
+                    return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
+                })}
+                {inputVisible && (
+                    <Input
+                        ref={this.saveInputRef}
+                        type="text"
+                        size="small"
+                        style={{ width: 78 }}
+                        value={inputValue}
+                        onChange={this.handleInputChange}
+                        onBlur={this.handleInputConfirm}
+                        onPressEnter={this.handleInputConfirm}
+                    />
+                )}
+                {!inputVisible && (
+                    <Tag
+                        onClick={this.showInput}
+                        style={{ background: '#fff', borderStyle: 'dashed' }}
+                    >
+                        <Icon type="plus" /> New Tag
+                    </Tag>
+                )}
+            </div>
+        );
+    }
+}
+
+class Step1 extends React.Component {
+    render() {
+        console.log("hhhoohh");
+        return (
+            <div>
+                <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
+
+                    <Form.Item {...formItemLayout} label="Platform">
+                            <Select placeholder="ex: android">
+                                <Option value="Android">Android</Option>
+                                <Option value="iOS">iOS</Option>
+                            </Select>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Type">
+                            <Select value="Enterprise">
+                                <Option value="Enterprise" selected>Enterprise</Option>
+                            </Select>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Name">
+                        <Input placeholder="App Name" />
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Description">
+                        <TextArea placeholder="Enter the description" rows={4} />
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Category">
+                        <Select placeholder="Select a category">
+                            <Option value="travel">Travel</Option>
+                            <Option value="entertainment">Entertainment</Option>
+                        </Select>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Tags">
+                        <EditableTagGroup/>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Price">
+                        <Input prefix="$" placeholder="00.00" />
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Share with all tenents?">
+                        <Checkbox > </Checkbox>
+                    </Form.Item>
+                    <Form.Item {...formItemLayout} label="Meta Daa">
+                        <InputGroup>
+                            <Row gutter={8}>
+                                <Col span={5}>
+                                    <Input placeholder="Key" />
+                                </Col>
+                                <Col span={10}>
+                                    <Input placeholder="value" />
+                                </Col>
+                                <Col span={4}>
+                                    <Button type="dashed" shape="circle" icon="plus" />
+                                </Col>
+                            </Row>
+                        </InputGroup>
+                    </Form.Item>
+                </Form>
+            </div>
+        );
+    }
+}
+
+export default Step1;

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 (
+            <p>tttoooeeee</p>
+        );
+    }
+}
+
+export default Step2;

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 (
+            <p>tttoooeeee</p>
+        );
+    }
+}
+
+export default Step3;

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