From 85890e9036217f6f8c2c7ce44c1e9ee208f99398 Mon Sep 17 00:00:00 2001
From: Jayasanka Weerasinghe <jayasanka.sack@gmail.com>
Date: Mon, 4 Nov 2019 12:02:46 +0000
Subject: [PATCH] Add minor UI fixes to APPM UI

The following changes are with this commit
- Display wrong credentials error in Login form
- Display tags and categories in APPM store release view
---
 .../AppDetailsDrawer/AppDetailsDrawer.js      | 90 ++++++++++---------
 .../apps/list-apps/appsTable/AppsTable.js     | 14 ++-
 .../new-app/subForms/NewAppUploadForm.js      | 54 ++++++-----
 3 files changed, 85 insertions(+), 73 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 c6ce74dc6c..d9c8f9505d 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, Badge
+    Card, Badge, Tooltip, Popover
 } from 'antd';
 import DetailedRating from "../../detailed-rating/DetailedRating";
 import {Link} from "react-router-dom";
@@ -486,7 +486,6 @@ class AppDetailsDrawer extends React.Component {
                                 <Divider dashed={true}/>
                             </div>
                         )}
-
                         <Text strong={true}>Releases </Text>
                         <div className="releases-details">
                             <List
@@ -500,48 +499,55 @@ class AppDetailsDrawer extends React.Component {
                                 renderItem={release => (
                                     <div className="app-release-cards">
                                         <List.Item>
-                                            <Link to={"apps/releases/" + release.uuid}>
-                                                <Card className="release-card">
-                                                    <Meta
-                                                        avatar={
-                                                            <div>
-                                                                {(release.currentStatus === "PUBLISHED") ? (
-                                                                    <Badge
-                                                                        title="Published"
-                                                                        style={{
-                                                                            backgroundColor: '#52c41a',
-                                                                            borderRadius: "50%",
-                                                                            color: "white"
-                                                                        }}
-                                                                        count={
-                                                                            <Icon
-                                                                                type="check-circle"/>
-                                                                        }>
+                                            <Tooltip title="Click to view full details"
+                                                     placement="topRight">
+                                                <Link to={"apps/releases/" + release.uuid}>
+                                                    <Card className="release-card">
+                                                        <Meta
+                                                            avatar={
+                                                                <div>
+                                                                    {(release.currentStatus === "PUBLISHED") ? (
+                                                                        <Badge
+                                                                            title="Published"
+                                                                            count={
+                                                                                <Tooltip
+                                                                                    title="Published">
+                                                                                    <Icon
+                                                                                        style={{
+                                                                                            backgroundColor: '#52c41a',
+                                                                                            borderRadius: "50%",
+                                                                                            color: "white"
+                                                                                        }}
+                                                                                        type="check-circle"/>
+                                                                                </Tooltip>
+                                                                            }>
+                                                                            <Avatar size="large" shape="square"
+                                                                                    src={release.iconPath}/>
+                                                                        </Badge>
+                                                                    ) : (
                                                                         <Avatar size="large" shape="square"
                                                                                 src={release.iconPath}/>
-                                                                    </Badge>
-                                                                ) : (
-                                                                    <Avatar size="large" shape="square"
-                                                                            src={release.iconPath}/>
-                                                                )}
-                                                            </div>
-                                                        }
-                                                        title={release.version}
-                                                        description={
-                                                            <div style={{
-                                                                fontSize: "0.7em"
-                                                            }} className="description-view">
-                                                                <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>
-                                            </Link>
+                                                                    )}
+                                                                </div>
+                                                            }
+                                                            title={release.version}
+                                                            description={
+                                                                <div style={{
+                                                                    fontSize: "0.7em"
+                                                                }} className="description-view">
+                                                                    <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>
+                                                </Link>
+                                            </Tooltip>
                                         </List.Item>
                                     </div>
                                 )}
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 01d6c8c159..6158df2f2a 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, Badge, Alert} from "antd";
+import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert, Tooltip} from "antd";
 import axios from "axios";
 import pSBC from 'shade-blend-color';
 import "./AppsTable.css";
@@ -60,8 +60,16 @@ const columns = [
                         title="Published"
                         style={{backgroundColor: '#52c41a', borderRadius: "50%", color: "white"}}
                         count={
-                            <Icon
-                                type="check-circle"/>
+                            <Tooltip
+                                title="Published">
+                                <Icon
+                                    style={{
+                                        backgroundColor: '#52c41a',
+                                        borderRadius: "50%",
+                                        color: "white"
+                                    }}
+                                    type="check-circle"/>
+                            </Tooltip>
                         }>
                         <Avatar shape="square" size="large"
                                 style={{
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
index ebb761c322..2d781cb5e3 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js
@@ -17,10 +17,10 @@
  */
 
 import React from "react";
-import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal, Alert} from "antd";
+import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, Typography, Modal, Alert} from "antd";
 import "@babel/polyfill";
-import axios from "axios";
-import {handleApiError} from "../../../js/Utils";
+
+const {Text} = Typography;
 
 const formItemLayout = {
     labelCol: {
@@ -196,12 +196,6 @@ class NewAppUploadForm extends React.Component {
         });
     };
 
-    handlePriceTypeChange = (value) => {
-        this.setState({
-            isFree: (value === 'free')
-        });
-    };
-
     handlePreviewCancel = () => this.setState({previewVisible: false});
     handlePreview = async file => {
         if (!file.url && !file.preview) {
@@ -231,7 +225,7 @@ class NewAppUploadForm extends React.Component {
     handleUpperOsVersionChange = (upperOsVersion) => {
         if (upperOsVersion === "all") {
             this.upperOsVersion = this.props.supportedOsVersions[this.props.supportedOsVersions.length - 1]["versionName"];
-        }else{
+        } else {
             this.upperOsVersion = upperOsVersion;
         }
         this.setState({
@@ -247,7 +241,6 @@ class NewAppUploadForm extends React.Component {
             icons,
             screenshots,
             binaryFiles,
-            isFree,
             previewImage,
             previewVisible,
             binaryFileHelperText,
@@ -310,17 +303,19 @@ class NewAppUploadForm extends React.Component {
                                     required: true,
                                     message: 'Please select a icon'
                                 })(
-                                    <Upload
-                                        name="logo"
-                                        listType="picture-card"
-                                        onChange={this.handleIconChange}
-                                        beforeUpload={() => false}
-                                        onPreview={this.handlePreview}>
-                                        {icons.length === 1 ? null : uploadButton}
-                                    </Upload>,
+                                    <div>
+                                        <Upload
+                                            name="logo"
+                                            listType="picture-card"
+                                            onChange={this.handleIconChange}
+                                            beforeUpload={() => false}
+                                            onPreview={this.handlePreview}>
+                                            {icons.length === 1 ? null : uploadButton}
+                                        </Upload>
+                                        <Text>Recommended : 240px x 240px</Text>
+                                    </div>
                                 )}
                             </Form.Item>
-
                             <Form.Item {...formItemLayout}
                                        label="Screenshots"
                                        validateStatus="error"
@@ -331,14 +326,17 @@ class NewAppUploadForm extends React.Component {
                                     required: true,
                                     message: 'Please select a icon'
                                 })(
-                                    <Upload
-                                        name="screenshots"
-                                        listType="picture-card"
-                                        onChange={this.handleScreenshotChange}
-                                        beforeUpload={() => false}
-                                        onPreview={this.handlePreview}>
-                                        {screenshots.length >= 3 ? null : uploadButton}
-                                    </Upload>,
+                                    <div>
+                                        <Upload
+                                            name="screenshots"
+                                            listType="picture-card"
+                                            onChange={this.handleScreenshotChange}
+                                            beforeUpload={() => false}
+                                            onPreview={this.handlePreview}>
+                                            {screenshots.length >= 3 ? null : uploadButton}
+                                        </Upload>
+                                        <Text>Required 3 screenshots, Recommended min. 320px max. 3840px</Text>
+                                    </div>
                                 )}
                             </Form.Item>