Merge branch 'application-mgt-new' into 'application-mgt-new'

Publisher: Add responsive layout for release view

See merge request entgra/carbon-device-mgt!101

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

@@ -1,37 +1,44 @@
-.App {
-  text-align: center;
+.ant-upload.ant-upload-drag {
+  height: 170px;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.release .release-icon{
+  margin-right: 15px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.release .release-icon img{
+  width: 100%;
+  border-radius: 100%;
 }
 
-.App-link {
-  color: #61dafb;
+.release .release-title{
+  margin-left: 15px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.release .release-screenshot img{
+  width: 100%;
+  border-radius: 15px;
+  padding: 5px;
 }
 
-.ant-upload.ant-upload-drag {
-  height: 170px;
+.logo {
+  width: 120px;
+  height: 31px;
+  margin: 0 0 16px 20px;
+  float: left;
+}
+
+.logo img{
+  height: 35px;
+}
+
+.main-container{
+  background: #f0f2f5;
+  min-height: 780px
+}
+
+@media only screen and (min-width: 768px) {
+  .main-container{
+    padding: 24px;
+  }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/LifecycleModal.js

@@ -33,7 +33,8 @@ class ConnectedLifecycleModal extends React.Component {
     componentWillReceiveProps(nextProps) {
         if (nextProps !== this.props) {
             this.setState({
-                visible: nextProps.visible
+                visible: nextProps.visible,
+                loading: false
             })
         }
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -1,29 +1,43 @@
 import React from "react";
-import {Avatar, Row, Col, Typography} from "antd";
+import {Avatar, Row, Col, Typography, Button} from "antd";
+import "../../../App.css";
 
 const {Title, Text} = Typography;
 
 class ReleaseView extends React.Component {
     render() {
         const release = this.props.release;
+        console.log(release);
         return (
-            <div>
+            <div className="release">
                 <Row>
-                    <Col span={4}>
-                        <Avatar size={128} shape="square"
-                                src={release.iconPath}/>
+                    <Col xl={4} sm={6} xs={8} className="release-icon">
+                        <img src={release.iconPath} alt="icon"/>
                     </Col>
-                    <Col span={18}>
+                    <Col xl={10} sm={11} className="release-title">
                         <Title level={2}>App Name</Title>
                         <Text>{release.version}</Text><br/>
-                        <Text type="secondary">{release.description}</Text>
+                        <Text type="secondary">{release.description}</Text><br/>
+                    </Col>
+                    <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
+                        <div>
+                            <Button.Group style={{float: "right"}}>
+                                <Button htmlType="button" icon="shop">Open in store</Button>
+                                <Button htmlType="button" type="primary" icon="edit">edit</Button>
+                            </Button.Group>
+                        </div>
+
                     </Col>
                 </Row>
                 <br/>
                 <Row>
-                    <Col span={6}>
-                        <img style={{width:"100%"}} src={release.screenshotPath1}/>
+                    {release.screenshots.map((screenshotUrl)=>{
+                        return (
+                            <Col key={"col-"+screenshotUrl} lg={6} md={8} xs={8} className="release-screenshot">
+                                <img key={screenshotUrl} src={screenshotUrl}/>
                             </Col>
+                        )
+                    })}
                 </Row>
             </div>
         );

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

@@ -1 +1,8 @@
+<!doctype html>
+<html>
+    <head>
+        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"/>
+        <title>Entgra App Publisher</title>
+    </head>
 <div id="root"></div>
+</html>

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

@@ -96,21 +96,18 @@ export const updateLifecycleState = (uuid, nextState, reason) => dispatch => {
 
     const request = "method=post&content-type=application/json&payload=" + JSON.stringify(payload) + "&api-endpoint=/application-mgt-publisher/v1.0/applications/life-cycle/" + uuid;
 
-    console.log(request);
 
     return axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
     ).then(res => {
-        if (res.status === 200) {
-            if(res.data.data.hasOwnProperty("release")) {
+        if (res.status === 201) {
             let release = res.data.data;
             dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
-            }else{
+        }else {
             alert("error");
             dispatch({
                 type: ActionTypes.CLOSE_LIFECYCLE_MODAL
             });
         }
-        }
 
     }).catch(function (error) {
         if (error.response.status === 401) {

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

@@ -3,12 +3,11 @@ import {Layout, Menu, Icon} from 'antd';
 
 const {Header, Content, Footer} = Layout;
 
-import styles from './Dashboard.less';
 import Logo from "../../../public/images/logo.svg";
 import {Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
-import { Switch, Redirect } from 'react-router'
-
+import {Switch, Redirect} from 'react-router'
+import "../../App.css";
 
 class Dashboard extends React.Component {
     constructor(props) {
@@ -20,9 +19,10 @@ class Dashboard extends React.Component {
 
     render() {
         return (
+            <div>
                 <Layout className="layout">
                     <Header>
-                    <div className={styles.logo}>
+                        <div className="logo">
                             <img src={Logo}/>
                         </div>
                         <Menu
@@ -32,10 +32,14 @@ class Dashboard extends React.Component {
                             style={{lineHeight: '64px'}}
                         >
                             <Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
-                        <Menu.Item key="2"><Link to="/publisher/apps"><Icon type="line-chart"/>Apps</Link></Menu.Item>
-                        <Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New App</Link></Menu.Item>
+                            <Menu.Item key="2"><Link to="/publisher/apps"><Icon
+                                type="line-chart"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New
+                                App</Link></Menu.Item>
                         </Menu>
                     </Header>
+                </Layout>
+                <Layout>
                     <Content style={{padding: '0 0'}}>
                         <Switch>
                             <Redirect exact from="/publisher" to="/publisher/apps"/>
@@ -50,6 +54,7 @@ class Dashboard extends React.Component {
                         ©2019 entgra.io
                     </Footer>
                 </Layout>
+            </div>
         );
     }
 }

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js

@@ -1,4 +1,5 @@
 import React from "react";
+import '../../../../App.css';
 import {PageHeader, Typography, Input, Button, Row, Col, Avatar, Card} from "antd";
 import {connect} from "react-redux";
 import ReleaseView from "../../../../components/apps/release/ReleaseView";
@@ -62,17 +63,15 @@ class ConnectedRelease extends React.Component {
                 <PageHeader
                     breadcrumb={{routes}}
                 />
-                <div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>
+                <div className="main-container">
                     <Row style={{padding: 10}}>
-                        <Col span={16}>
+                        <Col lg={16} md={24} style={{padding: 3}}>
                             <Card>
                                 <ReleaseView release={release}/>
                             </Card>
                         </Col>
-                    </Row>
-                    <Row style={{padding: 10}}>
-                        <Col>
-                            <Card>
+                        <Col lg={8} md={24} style={{padding: 3}}>
+                            <Card lg={8} md={24}>
                                 <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
                             </Card>
                         </Col>