Merge pull request #1026 from menakaj/application-mgt

Styling changes and error page.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css

@@ -316,10 +316,6 @@ body {
     background-color: #E64A19;
 }
 
-#app-main-content {
-    margin: 0 auto;
-}
-
 #sub-title-container {
     height: 100px;
     padding: 50px 0 20px 0;
@@ -332,10 +328,9 @@ body {
 }
 
 /* Holds the app publisher pages. */
-#application-content {
+.publisher-card {
     height: auto;
     background-color: white;
-    width: 100%;
     box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
     padding: 24px;
 }
@@ -368,7 +363,7 @@ body {
     margin-right: 4px;
 }
 
-#application-list {
+.application-list {
     transition: margin-right .5s;
 }
 
@@ -838,3 +833,23 @@ div.tab button.active {
 .data-table-row-cell {
     padding-top: 14px;
 }
+
+.error-code {
+    text-align: center;
+    font-family: Roboto-Medium;
+    font-weight: 800;
+    font-size: 15em;
+    color: #BaBaBa;
+}
+
+.error-code p {
+
+}
+
+.error-text {
+    text-align: center;
+    font-family: Roboto-Regular;
+    font-size: 14px;
+    font-weight: 500;
+    color: #9e9e9e;
+}

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

@@ -182,12 +182,11 @@ class ApplicationListing extends Component {
     onRowClick(uuid) {
         let selectedApp = this.getSelectedApplication(uuid);
         let style = {
-            width: '550px',
+            width: '35%'
-            marginLeft: '550px'
         };
 
         let appListStyle = {
-            marginRight: '550px',
+            marginRight: '35%',
         };
 
         this.setState({drawer: style, appListStyle: appListStyle, application: selectedApp[0]});
@@ -217,15 +216,18 @@ class ApplicationListing extends Component {
 
     render() {
         //TODO: Move this to a data table component.
+        console.log(this.state.appListStyle);
         return (
-            <div id="application-list" style={this.state.appListStyle}>
+            <div className="publisher-card application-list" style={this.state.appListStyle}>
                 <Row className="app-list-table-header">
                     {this.headers.map(header => {
                         if (header.data_id === "applicationName") {
                             return (
-                                <Col xs="5">{header.label}</Col>)
+                                <Col xs="4">{header.label}</Col>)
                         } else if (header.data_id === "image") {
                             return (<Col xs="1">{header.label}</Col>)
+                        } else if (header.data_id === "edit") {
+                            return <Col xs="1"></Col>
                         }
                         return (<Col>{header.label}</Col>)
                     })}
@@ -242,13 +244,13 @@ class ApplicationListing extends Component {
                                     src={application.icon}
                                 />
                             </Col>
-                            <Col xs="5" className="data-table-row-cell"><strong>{application.name}</strong></Col>
+                            <Col xs="4" className="data-table-row-cell"><strong>{application.name}</strong></Col>
                             <Col className="data-table-row-cell">{application.platform.name}</Col>
                             <Col className="data-table-row-cell">{application.category.name}</Col>
                             <Col
                                 className="data-table-row-cell">{application.currentLifecycle.lifecycleState.name}
                             </Col>
-                            <Col>
+                            <Col xs="1">
                                 <Button className="custom-flat grey rounded"
                                         onClick={() => this.onAppEditClick(application.uuid)}>
                                     <i className="fw fw-edit"></i>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Edit/Base/ApplicationEditBaseLayout.jsx

@@ -21,6 +21,7 @@ import React, {Component} from 'react';
 import GeneralInfo from "../GenenralInfo/GeneralInfo";
 import ReleaseManager from '../../Release/ReleaseMgtBase/ReleaseManager';
 import {FormattedMessage} from 'react-intl';
+import ApplicationMgtApi from "../../../../api/applicationMgtApi";
 
 class ApplicationEdit extends Component {
 
@@ -28,6 +29,7 @@ class ApplicationEdit extends Component {
         super();
         this.getTabContent = this.getTabContent.bind(this);
         this.state = {
+            application: {},
             general: "active",
             release: "",
             pkgmgt: "",
@@ -35,6 +37,22 @@ class ApplicationEdit extends Component {
         }
     }
 
+    componentWillMount() {
+
+        let appId = window.location.pathname.split("/")[4];
+        let response = ApplicationMgtApi.getApplication(appId);
+
+        response.then(res => {
+            let data = res.data.applications;
+            let application = data.filter(app => {
+                return app.uuid === appId;
+            });
+
+            this.setState({application: application[0]});
+        })
+    }
+
+
     handleTabClick(event) {
         event.stopPropagation();
         const key = event.target.value;
@@ -61,7 +79,10 @@ class ApplicationEdit extends Component {
     getTabContent(tab) {
         switch (tab) {
             case 1: {
-                return <GeneralInfo/>
+                {
+                    console.log(this.state.application)
+                }
+                return <GeneralInfo application={this.state.application}/>
             }
             case 2: {
                 return <ReleaseManager/>
@@ -78,7 +99,7 @@ class ApplicationEdit extends Component {
 
     render() {
         return (
-            <div id="application-edit-base">
+            <div className="publisher-card">
                 <Row id="application-edit-header">
                     <Col xs="3">
                         <a className="back-to-app" onClick={this.handleOnBackClick.bind(this)}>
@@ -86,7 +107,7 @@ class ApplicationEdit extends Component {
                         </a>
                     </Col>
                     <Col>
-                        <FormattedMessage id="Application.Name" defaultMessage="Application Name"/>
+                        {this.state.application.name}
                     </Col>
                 </Row>
                 <hr/>

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

@@ -16,6 +16,7 @@
  * under the License.
  */
 import React, {Component} from 'react';
+import {Col, Row} from "reactstrap";
 
 /**
  * Error page.
@@ -28,8 +29,22 @@ class Error extends Component {
 
     render() {
         return (
-            <div>
+            <div className="error-page">
-                404 not found
+                <Row>
+                    <Col>
+                        <div className="error-code">
+                            <p>404</p>
+                        </div>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <div className="error-text">
+                            <p>The page you are looking for doesn't exist or error occurred.</p>
+                            <p>Please click <a href="/publisher">here</a> to go to App publisher home page.</p>
+                        </div>
+                    </Col>
+                </Row>
             </div>
         );
     }

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

@@ -51,7 +51,7 @@ class PlatformListing extends Component {
 
     render() {
         return (
-            <div id="platform-listing">
+            <div className="publisher-card">
                 <Row>
                     <div className="create-platform">
                         <Button className="custom-flat grey" onClick={this.onPlatformCreateClick}>