Fix UI issues in APPM

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -10,40 +10,38 @@
   },
   "license": "Apache License 2.0",
   "dependencies": {
-    "acorn": "^6.1.1",
+    "acorn": "^6.2.0",
-    "antd": "^3.15.0",
+    "antd": "^3.20.1",
     "axios": "^0.19.0",
-    "d3": "^5.9.2",
+    "d3": "^5.9.7",
     "dagre": "^0.8.4",
     "fetch": "^1.1.0",
     "keymirror": "^0.1.1",
     "rc-tween-one": "^2.4.1",
-    "react": "^16.8.4",
+    "react-d3-graph": "^2.1.0",
-    "react-d3-graph": "^2.0.2",
-    "react-dom": "^16.8.4",
     "react-highlight-words": "^0.16.0",
     "react-html-parser": "^2.0.2",
     "react-infinite-scroller": "^1.2.4",
     "react-quill": "^1.3.3",
     "react-router": "latest",
-    "react-router-config": "^5.0.0",
+    "react-router-config": "^5.0.1",
-    "react-router-dom": "latest",
+    "react-router-dom": "^5.0.1",
     "react-scripts": "2.1.8",
     "react-star-ratings": "^2.3.0",
     "redux-thunk": "^2.3.0",
     "storm-react-diagrams": "^5.2.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.5.0",
-    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
-    "@babel/register": "^7.0.0",
+    "@babel/register": "^7.4.4",
-    "babel-loader": "^8.0.0",
+    "babel-loader": "^8.0.6",
-    "body-parser": "^1.18.3",
+    "body-parser": "^1.19.0",
     "chai": "^4.1.2",
     "css-loader": "^0.28.11",
-    "express": "^4.16.4",
+    "express": "^4.17.1",
     "express-pino-logger": "^4.0.0",
     "file-loader": "^2.0.0",
     "html-loader": "^0.5.5",
@@ -56,22 +54,22 @@
     "mocha": "^5.2.0",
     "mock-local-storage": "^1.0.5",
     "node-env-run": "^3.0.2",
-    "node-sass": "^4.11.0",
+    "node-sass": "^4.12.0",
-    "nodemon": "^1.18.9",
+    "nodemon": "^1.19.1",
     "npm-run-all": "^4.1.5",
-    "pino-colada": "^1.4.4",
+    "pino-colada": "^1.4.5",
     "postcss-loader": "^3.0.0",
-    "react": "^15.6.2",
+    "react": "^16.8.6",
-    "react-dom": "^15.6.2",
+    "react-dom": "^16.8.6",
-    "react-intl": "^2.4.0",
+    "react-intl": "^2.9.0",
-    "react-redux": "^7.0.2",
+    "react-redux": "^7.1.0",
     "redux": "^4.0.1",
     "sass-loader": "^6.0.7",
     "style-loader": "^0.18.2",
     "url-loader": "^1.1.2",
-    "webpack": "^4.27.1",
+    "webpack": "^4.35.2",
-    "webpack-cli": "^3.1.2",
+    "webpack-cli": "^3.3.5",
-    "webpack-dev-server": "^3.1.10"
+    "webpack-dev-server": "^3.7.2"
   },
   "scripts": {
     "start": "webpack-dev-server --mode development --open",

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

@@ -0,0 +1,7 @@
+.release-card{
+    margin-top: 16px;
+}
+
+.release-card:hover {
+    background-color: rgba(15, 188, 249,0.1);
+}

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

@@ -1,17 +1,40 @@
 import React from 'react';
-import {Drawer, Select, Col, Typography, Divider, Tag, notification, List, Button, Spin, message, Icon} from 'antd';
+import {
-import "../../../App.css";
+    Drawer,
-import DetailedRating from "../detailed-rating/DetailedRating";
+    Select,
+    Avatar,
+    Typography,
+    Divider,
+    Tag,
+    notification,
+    List,
+    Button,
+    Spin,
+    message,
+    Icon,
+    Card
+} from 'antd';
+
+const {Meta} = Card;
+import "../../../../App.css";
+import DetailedRating from "../../detailed-rating/DetailedRating";
 import {Link} from "react-router-dom";
 import axios from "axios";
-import config from "../../../../public/conf/config.json";
+import config from "../../../../../public/conf/config.json";
 import ReactQuill from "react-quill";
 import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser';
-
+import "./AppDetailsDrawer.css";
 
 const {Text, Title} = Typography;
 const {Option} = Select;
 
+const IconText = ({type, text}) => (
+    <span>
+    <Icon type={type} style={{marginRight: 8}}/>
+        {text}
+  </span>
+);
+
 const modules = {
     toolbar: [
         ['bold', 'italic', 'underline', 'strike', 'blockquote'],
@@ -389,7 +412,46 @@ class AppDetailsDrawer extends React.Component {
                             />
                             <Title editable={{onChange: this.handleNameSave}} level={2}>{name}</Title>
                         </div>
+
                         <Divider/>
+
+                        <Text strong={true}>Releases </Text>
+                        {/*display add new release only if app type is enterprise*/}
+                        {(app.type === "ENTERPRISE") && (
+                            <Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add
+                                new release</Button></Link>)}
+                        <br/>
+                        <List
+                            grid={{gutter: 16, column: 2}}
+                            dataSource={app.applicationReleases}
+                            renderItem={release => (
+                                <List.Item>
+                                    <a href={"apps/releases/" + release.uuid}>
+                                        <Card className="release-card">
+                                            <Meta
+                                                avatar={
+                                                    <Avatar size="large" shape="square" src={release.iconPath}/>
+                                                }
+                                                title={release.version}
+                                                description={
+                                                    <div style={{
+                                                        fontSize: "0.7em"
+                                                    }}>
+                                                        <IconText type="check" text={release.currentStatus}/>
+                                                        <Divider type="vertical"/>
+                                                        <IconText type="upload" text={release.releaseType}/>
+                                                        <Divider type="vertical"/>
+                                                        <IconText type="star-o" text={release.rating.toFixed(1)}/>
+                                                    </div>
+                                                }
+                                            />
+                                        </Card>
+                                    </a>
+                                </List.Item>
+                            )}
+                        />
+                        <Divider dashed={true}/>
+
                         <Text strong={true}>Description </Text>
                         {!isDescriptionEditEnabled && (
                             <Text
@@ -463,7 +525,7 @@ class AppDetailsDrawer extends React.Component {
                             <span>{
                                 categories.map(category => {
                                     return (
-                                        <Tag color="blue" key={category} style={{paddingBottom: 5}}>
+                                        <Tag color="#108ee9" key={category} style={{marginBottom: 5}}>
                                             {category}
                                         </Tag>
                                     );
@@ -508,7 +570,7 @@ class AppDetailsDrawer extends React.Component {
                             <span>{
                                 tags.map(tag => {
                                     return (
-                                        <Tag color="gold" key={tag} style={{paddingBottom: 5}}>
+                                        <Tag color="#34495e" key={tag} style={{marginBottom: 5}}>
                                             {tag}
                                         </Tag>
                                     );
@@ -516,30 +578,6 @@ class AppDetailsDrawer extends React.Component {
                             }</span>
                         )}
 
-                        <Divider dashed={true}/>
-                        <Text strong={true}>Releases </Text>
-                        {/*display add new release only if app type is enterprise*/}
-                        {(app.type === "ENTERPRISE") && (
-                            <Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add
-                                new release</Button></Link>)}
-                        <br/>
-                        <List
-                            itemLayout="horizontal"
-                            dataSource={app.applicationReleases}
-                            renderItem={release => (
-                                <List.Item>
-                                    <List.Item.Meta
-                                        title={<a href={"apps/releases/" + release.uuid}>{release.version}</a>}
-                                        description={
-                                            <div>
-                                                Status : <Tag>{release.currentStatus}</Tag> Release Type <Tag
-                                                color="green">{release.releaseType}</Tag>
-                                            </div>
-                                        }
-                                    />
-                                </List.Item>
-                            )}
-                        />
                         <Divider dashed={true}/>
 
                         <DetailedRating type="app" uuid={app.applicationReleases[0].uuid}/>

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

@@ -26,6 +26,10 @@ class FiltersForm extends React.Component {
                 }
             }
 
+            if(values.hasOwnProperty("deviceType") && values.deviceType==="all"){
+                delete values["deviceType"];
+            }
+
             this.props.setFilters(values);
         });
     };
@@ -176,8 +180,8 @@ class FiltersForm extends React.Component {
                     </Form.Item>
 
 
-                    <Form.Item label="Device Types">
+                    <Form.Item label="Device Type">
-                        {getFieldDecorator('deviceTypes', {
+                        {getFieldDecorator('deviceType', {
                             rules: [{
                                 required: false,
                                 message: 'Please select device types'
@@ -197,6 +201,10 @@ class FiltersForm extends React.Component {
                                         )
                                     })
                                 }
+                                <Option
+                                    key="all">
+                                    all
+                                </Option>
                             </Select>
                         )}
                     </Form.Item>

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

@@ -2,9 +2,9 @@ import React from "react";
 import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button} from "antd";
 import {connect} from "react-redux";
 import {getApps} from "../../../js/actions";
-import AppsTable from "./AppsTable";
+import AppsTable from "./appsTable/AppsTable";
 import Filters from "./Filters";
-import AppDetailsDrawer from "./AppDetailsDrawer";
+import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer";
 
 const {Option} = Select;
 const {Title, Text} = Typography;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css

@@ -0,0 +1,3 @@
+.app-row{
+    cursor: pointer;
+}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js

@@ -1,7 +1,8 @@
 import React from "react";
 import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
 import axios from "axios";
-import config from "../../../../public/conf/config.json";
+import config from "../../../../../public/conf/config.json";
+import "./AppsTable.css";
 
 const columns = [
     {
@@ -167,6 +168,7 @@ class AppsTable extends React.Component {
                 columns={columns}
                 pagination={this.state.pagination}
                 onChange={this.handleTableChange}
+                rowClassName="app-row"
                 onRow={(record, rowIndex) => {
                     return {
                         onClick: event => {

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

@@ -58,7 +58,6 @@ class Dashboard extends React.Component {
                             ))}
 
                         </Switch>
-
                     </Content>
                     <Footer style={{textAlign: 'center'}}>
                         ©2019 entgra.io