added steps to create app

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/index.css

@@ -7,3 +7,17 @@
   height: auto;
   box-shadow: 0 2px 8px #f0f1f2;
 }
+
+.steps-content {
+    margin-top: 16px;
+    border: 1px dashed #e9e9e9;
+    border-radius: 6px;
+    background-color: #fafafa;
+    min-height: 200px;
+    text-align: center;
+    padding-top: 80px;
+}
+
+.steps-action {
+    margin-top: 24px;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewApp.js

@@ -1,6 +1,6 @@
 import React from "react";
 import "antd/dist/antd.css";
-import {PageHeader, Breadcrumb, Typography} from "antd";
+import {PageHeader, Typography, Card, Steps, Button, message} from "antd";
 
 const Paragraph = Typography;
 
@@ -19,22 +19,47 @@ const routes = [
     },
 ];
 
+const Step = Steps.Step;
+
+const steps = [{
+    title: 'First',
+    content: 'First-content',
+}, {
+    title: 'Second',
+    content: 'Second-content',
+}, {
+    title: 'Last',
+    content: 'Last-content',
+}];
+
+
 class AddNewApp extends React.Component {
-    routes;
 
     constructor(props) {
         super(props);
-        this.routes = props.routes;
+        this.state = {
+            current: 0,
+        };
+    }
+
+    next() {
+        const current = this.state.current + 1;
+        this.setState({current});
     }
 
+    prev() {
+        const current = this.state.current - 1;
+        this.setState({current});
+    }
 
 
     render() {
+        const { current } = this.state;
         return (
             <div>
                 <PageHeader
                     title="Add New App"
-                    breadcrumb={{ routes }}
+                    breadcrumb={{routes}}
                 >
                     <div className="wrap">
                         <div className="content">
@@ -44,8 +69,34 @@ class AddNewApp extends React.Component {
                         </div>
                     </div>
                 </PageHeader>
-                <div style={{ background: '#f0f2f5', padding: 24, minHeight: 280 }}>
+                <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>
                 </div>
 
             </div>