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 {
+.ant-upload.ant-upload-drag {
-  text-align: center;
+  height: 170px;
 }
 
-.App-logo {
+.release .release-icon{
-  animation: App-logo-spin infinite 20s linear;
+  margin-right: 15px;
-  height: 40vmin;
-  pointer-events: none;
 }
 
-.App-header {
+.release .release-icon img{
-  background-color: #282c34;
+  width: 100%;
-  min-height: 100vh;
+  border-radius: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
+.release .release-title{
-  color: #61dafb;
+  margin-left: 15px;
 }
 
-@keyframes App-logo-spin {
+.release .release-screenshot img{
-  from {
+  width: 100%;
-    transform: rotate(0deg);
+  border-radius: 15px;
-  }
+  padding: 5px;
-  to {
-    transform: rotate(360deg);
-  }
 }
 
-.ant-upload.ant-upload-drag {
+.logo {
-  height: 170px;
+  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}>
+                    <Col xl={4} sm={6} xs={8} className="release-icon">
-                        <Avatar size={128} shape="square"
+                        <img src={release.iconPath} alt="icon"/>
-                                src={release.iconPath}/>
                     </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}>
+                    {release.screenshots.map((screenshotUrl)=>{
-                        <img style={{width:"100%"}} src={release.screenshotPath1}/>
+                        return (
-                    </Col>
+                            <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,20 +96,17 @@ 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.status === 201) {
-            if(res.data.data.hasOwnProperty("release")) {
+            let release = res.data.data;
-                let release = res.data.data;
+            dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
-                dispatch({type: ActionTypes.UPDATE_LIFECYCLE_STATE, payload: release});
+        }else {
-            }else{
+            alert("error");
-                alert("error");
+            dispatch({
-                dispatch({
+                type: ActionTypes.CLOSE_LIFECYCLE_MODAL
-                    type: ActionTypes.CLOSE_LIFECYCLE_MODAL
+            });
-                });
-            }
         }
 
     }).catch(function (error) {

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,36 +19,42 @@ class Dashboard extends React.Component {
 
     render() {
         return (
-            <Layout className="layout">
+            <div>
-                <Header>
+                <Layout className="layout">
-                    <div className={styles.logo}>
+                    <Header>
-                        <img src={Logo}/>
+                        <div className="logo">
-                    </div>
+                            <img src={Logo}/>
-                    <Menu
+                        </div>
-                        theme="light"
+                        <Menu
-                        mode="horizontal"
+                            theme="light"
-                        defaultSelectedKeys={['2']}
+                            mode="horizontal"
-                        style={{lineHeight: '64px'}}
+                            defaultSelectedKeys={['2']}
-                    >
+                            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="1"><Link to="/publisher/apps"><Icon type="appstore"/>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
-                    </Menu>
+                                type="line-chart"/>Apps</Link></Menu.Item>
-                </Header>
+                            <Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New
-                <Content style={{padding: '0 0'}}>
+                                App</Link></Menu.Item>
-                    <Switch>
+                        </Menu>
-                        <Redirect exact from="/publisher" to="/publisher/apps"/>
+                    </Header>
-                        {this.state.routes.map((route) => (
+                </Layout>
-                            <RouteWithSubRoutes key={route.path} {...route} />
+                <Layout>
-                        ))}
+                    <Content style={{padding: '0 0'}}>
-
+                        <Switch>
-                    </Switch>
+                            <Redirect exact from="/publisher" to="/publisher/apps"/>
-
+                            {this.state.routes.map((route) => (
-                </Content>
+                                <RouteWithSubRoutes key={route.path} {...route} />
-                <Footer style={{textAlign: 'center'}}>
+                            ))}
-                    ©2019 entgra.io
+
-                </Footer>
+                        </Switch>
-            </Layout>
+
+                    </Content>
+                    <Footer style={{textAlign: 'center'}}>
+                        ©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>
+                        <Col lg={8} md={24} style={{padding: 3}}>
-                    <Row style={{padding: 10}}>
+                            <Card lg={8} md={24}>
-                        <Col>
-                            <Card>
                                 <LifeCycle currentStatus={release.currentStatus.toUpperCase()}/>
                             </Card>
                         </Col>