Added user name to the header.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx

@@ -19,7 +19,6 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {withRouter} from 'react-router-dom';
-import Axios from 'axios';
 import AuthHandler from "../../api/authHandler";
 import {Button, Col, Container, Input, Row,} from 'reactstrap';
 import ApplicationCreate from '../Application/Create/ApplicationCreate';
@@ -50,7 +49,7 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-
+        this.setState({user: this.props.user});
     }
 
     handleApplicationClick() {
@@ -86,22 +85,34 @@ class BaseLayout extends Component {
     }
 
     render() {
+        const userName = this.state.user._userName[0];
         return (
             <div>
-                <div id="header-content">
+                <div className="header-content">
-
+                    <div className="header">
-                    <div id="header">
+                        <Row>
+                            <Col md="6">
                                 <span id="header-text">
                                     <Logo className="header-image" image_name="logo.png"/>
                                     IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
                                 </span>
-                        <div id="header-btn-container">
+                            </Col>
-                            <Button id="header-button"><i className="fw fw-notification btn-header"></i></Button>
+                            <Col>
-                            <Button id="header-button"><i className="fw fw-user btn-header"></i></Button>
+                                <div className="header-button-container">
+                                    <Button id="header-button">
+                                        <i className="fw fw-notification btn-header"></i></Button>
+                                    <span className="header-user-name">
+                                        {userName.charAt(0).toUpperCase() + userName.slice(1)}
+                                        </span>
+                                    <Button id="header-button">
+                                        <i className="fw fw-user btn-header"></i></Button>
                                 </div>
-                        <div id="search-box">
+                            </Col>
-                            <i className="fw fw-search search-icon">
+                        </Row>
-                            </i>
+                        <Row>
+                            <Col>
+                                <div className="search-box">
+                                    <i className="fw fw-search"></i>
                                     <Input
                                         id="search"
                                         name="search"
@@ -109,6 +120,8 @@ class BaseLayout extends Component {
                                         onChange={(event) => console.log(event.target.value)} //TODO: Remove this
                                     />
                                 </div>
+                            </Col>
+                        </Row>
                     </div>
                     <Container>
                         <div id="add-btn-container">