From 9807a360989102f43d3480bb10128f5bc93f7216 Mon Sep 17 00:00:00 2001
From: Jayasanka Weerasinghe <jayasanka.sack@gmail.com>
Date: Thu, 24 Oct 2019 15:37:29 +0000
Subject: [PATCH] Add ui improvements to APPM Publisher UI

The following changes are with this commit
- View subscription status of devices in release view
- Display server error response in add new app form
---
 .../AppDetailsDrawer/AppDetailsDrawer.js      | 55 +++++++++++++++----
 .../apps/list-apps/appsTable/AppsTable.js     | 32 +++++++++--
 .../apps/release/InstalledDevicesTable.js     | 20 +------
 .../components/apps/release/ReleaseView.js    |  5 +-
 4 files changed, 76 insertions(+), 36 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
index 335e1c46dd..fc54ab399b 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js
@@ -30,7 +30,7 @@ import {
     Spin,
     message,
     Icon,
-    Card
+    Card, Badge
 } from 'antd';
 import DetailedRating from "../../detailed-rating/DetailedRating";
 import {Link} from "react-router-dom";
@@ -487,18 +487,14 @@ class AppDetailsDrawer extends React.Component {
                         )}
 
                         <Text strong={true}>Releases </Text>
-                        {/*display add new release only if app type is enterprise*/}
-
                         <div className="releases-details">
-
-                            {(app.type === "ENTERPRISE") && (
-                                <Link to={`/publisher/apps/${app.deviceType}/${app.id}/add-release`}><Button
-                                    htmlType="button"
-                                    size="small">Add
-                                    new release</Button></Link>)}
                             <List
                                 style={{paddingTop: 16}}
                                 grid={{gutter: 16, column: 2}}
+                                pagination={{
+                                    pageSize: 4, // number of releases per page
+                                    size: "small",
+                                }}
                                 dataSource={app.applicationReleases}
                                 renderItem={release => (
                                     <div className="app-release-cards">
@@ -507,7 +503,27 @@ class AppDetailsDrawer extends React.Component {
                                                 <Card className="release-card">
                                                     <Meta
                                                         avatar={
-                                                            <Avatar size="large" shape="square" src={release.iconPath}/>
+                                                            <div>
+                                                                {(release.currentStatus === "PUBLISHED") ? (
+                                                                    <Badge
+                                                                        title="Published"
+                                                                        style={{
+                                                                            backgroundColor: '#52c41a',
+                                                                            borderRadius:"50%",
+                                                                            color:"white"
+                                                                        }}
+                                                                        count={
+                                                                            <Icon
+                                                                                type="check-circle"/>
+                                                                        }>
+                                                                        <Avatar size="large" shape="square"
+                                                                                src={release.iconPath}/>
+                                                                    </Badge>
+                                                                ) : (
+                                                                    <Avatar size="large" shape="square"
+                                                                            src={release.iconPath}/>
+                                                                )}
+                                                            </div>
                                                         }
                                                         title={release.version}
                                                         description={
@@ -529,10 +545,27 @@ class AppDetailsDrawer extends React.Component {
                                     </div>
                                 )}
                             />
-
                         </div>
 
                         <Divider dashed={true}/>
+                        {/*display add new release only if app type is enterprise*/}
+                        {(app.type === "ENTERPRISE") && (
+                            <div>
+                                <div style={{paddingBottom: 16}}>
+                                    <Text>
+                                        Add new release for the application
+                                    </Text>
+                                </div>
+                                <Link to={`/publisher/apps/${app.deviceType}/${app.id}/add-release`}>
+                                    <Button
+                                        htmlType="button"
+                                        type="primary"
+                                        size="small">
+                                        Add
+                                    </Button>
+                                </Link>
+                            </div>)}
+                        <Divider dashed={true}/>
 
                         <Text strong={true}>Description </Text>
                         {!isDescriptionEditEnabled && (
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
index 24e43a89c6..d008cf5609 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js
@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Avatar, Table, Tag, Icon, message, notification, Col} from "antd";
+import {Avatar, Table, Tag, Icon, message, notification, Col, Badge} from "antd";
 import axios from "axios";
 import pSBC from 'shade-blend-color';
 import "./AppsTable.css";
@@ -47,7 +47,31 @@ const columns = [
                     </Avatar>
                 );
             } else {
-                avatar = (
+                const {applicationReleases} = row;
+                let hasPublishedRelease = false;
+                for (let i = 0; i < applicationReleases.length; i++) {
+                    if (applicationReleases[i].currentStatus === "PUBLISHED") {
+                        hasPublishedRelease = true;
+                        break;
+                    }
+                }
+                avatar = (hasPublishedRelease) ? (
+                    <Badge
+                        title="Published"
+                        style={{ backgroundColor: '#52c41a', borderRadius:"50%", color:"white"}}
+                        count={
+                            <Icon
+                                type="check-circle"/>
+                        }>
+                        <Avatar shape="square" size="large"
+                                style={{
+                                    borderRadius: "28%",
+                                    border: "1px solid #ddd"
+                                }}
+                                src={row.applicationReleases[0].iconPath}
+                        />
+                    </Badge>
+                ) : (
                     <Avatar shape="square" size="large"
                             style={{
                                 marginRight: 20,
@@ -56,13 +80,13 @@ const columns = [
                             }}
                             src={row.applicationReleases[0].iconPath}
                     />
-                )
+                );
             }
 
             return (
                 <div>
                     {avatar}
-                    {name}
+                    <span style={{marginLeft: 20}}>{name}</span>
                 </div>);
         }
     },
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js
index 1b6642f3d4..39fd3ef27c 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/InstalledDevicesTable.js
@@ -24,6 +24,7 @@ import TimeAgo from 'javascript-time-ago'
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en'
 import {withConfigContext} from "../../../context/ConfigContext";
+import {handleApiError} from "../../../js/Utils";
 
 const {Text} = Typography;
 
@@ -180,19 +181,7 @@ class InstalledDevicesTable extends React.Component {
             }
 
         }).catch((error) => {
-            if (error.hasOwnProperty("response") && error.response.status === 401) {
-                //todo display a popop with error
-                message.error('You are not logged in');
-                window.location.href = window.location.origin + '/entgra/login';
-            } else {
-                notification["error"]({
-                    message: "There was a problem",
-                    duration: 0,
-                    description:
-                        "Error occurred while trying to load devices.",
-                });
-            }
-
+            handleApiError(error, "Something went wrong when trying to load subscription data.");
             this.setState({loading: false});
         });
     };
@@ -203,10 +192,7 @@ class InstalledDevicesTable extends React.Component {
             <div>
                 <div style={{paddingBottom: 24}}>
                     <Text>
-                        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
-                        laudantium,
-                        totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
-                        dicta sunt explicabo.
+                       The following are the subscription details of the application in each respective device.
                     </Text>
                 </div>
                 <Table
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
index 51ab619df2..83fce13416 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -21,12 +21,9 @@ import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Ico
 import "../../../App.css";
 import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
-import DetailedRating from "./DetailedRating";
-import Reviews from "./review/Reviews";
 import axios from "axios";
 import AppInstallModal from "./install/AppInstallModal";
 import AppUninstallModal from "./install/AppUninstallModal";
-import CurrentUsersReview from "./review/CurrentUsersReview";
 import {withConfigContext} from "../../../context/ConfigContext";
 import {handleApiError} from "../../../js/Utils";
 import ReviewContainer from "./review/ReviewContainer";
@@ -207,7 +204,7 @@ class ReleaseView extends React.Component {
                             <Divider/>
                             <ReviewContainer uuid={release.uuid}/>
                         </TabPane>
-                        <TabPane tab="Installed devices" key="2">
+                        <TabPane tab="Subscription Details" key="2">
                             <InstalledDevicesTable uuid={release.uuid}/>
                         </TabPane>
                     </Tabs>