From bfe154e7c9e00a272376a791cf73e8a54e4a02e0 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Mon, 29 Jul 2019 17:02:26 +0530
Subject: [PATCH] Fix retired app loading issue in APPM UI

---
 .../AppDetailsDrawer/AppDetailsDrawer.js      | 72 ++++++++++++-------
 .../apps/list-apps/appsTable/AppsTable.js     | 47 ++++++++----
 .../components/apps/release/ReleaseView.js    |  2 +-
 .../new-app/subForms/NewAppDetailsForm.js     |  2 +-
 4 files changed, 82 insertions(+), 41 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 4a8cefada97..5b106f67610 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
@@ -55,7 +55,7 @@ class AppDetailsDrawer extends React.Component {
         super(props);
         this.state = {
             loading: false,
-            name: null,
+            name: "",
             description: null,
             globalCategories: [],
             globalTags: [],
@@ -93,7 +93,7 @@ class AppDetailsDrawer extends React.Component {
     getCategories = () => {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
         ).then(res => {
             if (res.status === 200) {
                 const categories = JSON.parse(res.data.data);
@@ -115,7 +115,7 @@ class AppDetailsDrawer extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/publisher/login';
+                window.location.href = window.location.origin + '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -133,7 +133,7 @@ class AppDetailsDrawer extends React.Component {
     getTags = () => {
         const config = this.props.context;
         axios.get(
-            window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
         ).then(res => {
             if (res.status === 200) {
                 const tags = JSON.parse(res.data.data);
@@ -155,7 +155,7 @@ class AppDetailsDrawer extends React.Component {
 
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
-                window.location.href = window.location.origin+ '/publisher/login';
+                window.location.href = window.location.origin + '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
@@ -178,7 +178,7 @@ class AppDetailsDrawer extends React.Component {
         if (name !== this.state.name && name !== "") {
             const data = {name: name};
             axios.put(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -195,7 +195,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = window.location.origin+ '/publisher/login';
+                    window.location.href = window.location.origin + '/publisher/login';
                 } else {
                     notification["error"]({
                         message: "There was a problem",
@@ -259,7 +259,7 @@ class AppDetailsDrawer extends React.Component {
         if (difference.length !== 0 && temporaryCategories.length !== 0) {
             const data = {categories: temporaryCategories};
             axios.put(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -277,7 +277,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = window.location.origin+ '/publisher/login';
+                    window.location.href = window.location.origin + '/publisher/login';
                 } else {
                     notification["error"]({
                         message: "There was a problem",
@@ -324,7 +324,7 @@ class AppDetailsDrawer extends React.Component {
         if (difference.length !== 0 && temporaryTags.length !== 0) {
             const data = {tags: temporaryTags};
             axios.put(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -341,7 +341,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = window.location.origin+ '/publisher/login';
+                    window.location.href = window.location.origin + '/publisher/login';
                 } else {
                     notification["error"]({
                         message: "There was a problem",
@@ -365,7 +365,7 @@ class AppDetailsDrawer extends React.Component {
         if (temporaryDescription !== description && temporaryDescription !== "<p><br></p>") {
             const data = {description: temporaryDescription};
             axios.put(
-                window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
+                window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id,
                 data
             ).then(res => {
                 if (res.status === 200) {
@@ -382,7 +382,7 @@ class AppDetailsDrawer extends React.Component {
             }).catch((error) => {
                 if (error.hasOwnProperty("response") && error.response.status === 401) {
                     message.error('You are not logged in');
-                    window.location.href = window.location.origin+ '/publisher/login';
+                    window.location.href = window.location.origin + '/publisher/login';
                 } else {
                     message.error('Something went wrong... :(');
                 }
@@ -406,6 +406,36 @@ class AppDetailsDrawer extends React.Component {
         if (app == null) {
             return null;
         }
+
+        let avatar = null;
+
+        if (app.applicationReleases.length === 0) {
+            const avatarLetter = name.charAt(0).toUpperCase();
+            avatar = (
+                <Avatar shape="square"
+                        size={100}
+                        style={{
+                            marginBottom: 10,
+                            borderRadius: "28%",
+                            backgroundColor: pSBC(0.50, config.theme.primaryColor)
+                        }}>
+                    {avatarLetter}
+                </Avatar>
+            );
+        } else {
+            avatar = (
+                <img
+                    style={{
+                        marginBottom: 10,
+                        width: 100,
+                        borderRadius: "28%",
+                        border: "1px solid #ddd"
+                    }}
+                    src={app.applicationReleases[0].iconPath}
+                />
+            )
+        }
+
         return (
             <div>
                 <Drawer
@@ -417,15 +447,7 @@ class AppDetailsDrawer extends React.Component {
                 >
                     <Spin spinning={loading} delay={500}>
                         <div style={{textAlign: "center"}}>
-                            <img
-                                style={{
-                                    marginBottom: 10,
-                                    width: 100,
-                                    borderRadius: "28%",
-                                    border: "1px solid #ddd"
-                                }}
-                                src={app.applicationReleases[0].iconPath}
-                            />
+                            {avatar}
                             <Title editable={{onChange: this.handleNameSave}} level={2}>{name}</Title>
                         </div>
 
@@ -436,8 +458,8 @@ class AppDetailsDrawer extends React.Component {
                         {(app.type === "ENTERPRISE") && (
                             <Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add
                                 new release</Button></Link>)}
-                        <br/>
                         <List
+                            style={{paddingTop: 16}}
                             grid={{gutter: 16, column: 2}}
                             dataSource={app.applicationReleases}
                             renderItem={release => (
@@ -596,8 +618,8 @@ class AppDetailsDrawer extends React.Component {
                         )}
 
                         <Divider dashed={true}/>
-
-                        <DetailedRating type="app" uuid={app.applicationReleases[0].uuid}/>
+                        {app.applicationReleases.length > 0 && (
+                            <DetailedRating type="app" uuid={app.applicationReleases[0].uuid}/>)}
                     </Spin>
                 </Drawer>
             </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 de407a4da6d..1beeca3f3b6 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
@@ -12,8 +12,22 @@ const columns = [
         title: '',
         dataIndex: 'name',
         render: (name, row) => {
-            return (
-                <div>
+            let avatar = null;
+            if (row.applicationReleases.length === 0) {
+                const avatarLetter = name.charAt(0).toUpperCase();
+                avatar = (
+                    <Avatar shape="square" size="large"
+                            style={{
+                                marginRight: 20,
+                                borderRadius: "28%",
+                                border: "1px solid #ddd",
+                                backgroundColor: pSBC(0.50, config.theme.primaryColor)
+                            }}>
+                        {avatarLetter}
+                    </Avatar>
+                );
+            } else {
+                avatar = (
                     <Avatar shape="square" size="large"
                             style={{
                                 marginRight: 20,
@@ -22,6 +36,12 @@ const columns = [
                             }}
                             src={row.applicationReleases[0].iconPath}
                     />
+                )
+            }
+
+            return (
+                <div>
+                    {avatar}
                     {name}
                 </div>);
         }
@@ -33,7 +53,7 @@ const columns = [
             <span>
                 {categories.map(category => {
                     return (
-                        <Tag color={pSBC ( 0.30, config.theme.primaryColor )} key={category}>
+                        <Tag color={pSBC(0.30, config.theme.primaryColor)} key={category}>
                             {category}
                         </Tag>
                     );
@@ -80,7 +100,7 @@ class AppsTable extends React.Component {
     }
 
     componentDidMount() {
-        const {filters} =this.props;
+        const {filters} = this.props;
         this.setState({
             filters
         });
@@ -89,9 +109,9 @@ class AppsTable extends React.Component {
     }
 
     componentDidUpdate(prevProps, prevState, snapshot) {
-        const {filters} =this.props;
+        const {filters} = this.props;
         if (prevProps.filters !== this.props.filters) {
-            console.log("d",this.props.filters);
+            console.log("d", this.props.filters);
             this.setState({
                 filters
             });
@@ -106,7 +126,7 @@ class AppsTable extends React.Component {
         this.setState({
             pagination: pager,
         });
-        this.fetch(this.state.filters,{
+        this.fetch(this.state.filters, {
             results: pagination.pageSize,
             page: pagination.current,
             sortField: sorter.field,
@@ -115,12 +135,12 @@ class AppsTable extends React.Component {
         });
     };
 
-    fetch = (filters,params = {}) => {
+    fetch = (filters, params = {}) => {
         this.setState({loading: true});
         const config = this.props.context;
 
-        if(!params.hasOwnProperty("page")){
-           params.page = 1;
+        if (!params.hasOwnProperty("page")) {
+            params.page = 1;
         }
 
         const data = {
@@ -129,10 +149,9 @@ class AppsTable extends React.Component {
             ...filters
         };
 
-       axios.post(
-            window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications",
+        axios.post(
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications",
             data,
-
         ).then(res => {
             if (res.status === 200) {
                 const data = res.data.data;
@@ -156,7 +175,7 @@ class AppsTable extends React.Component {
         }).catch((error) => {
             if (error.hasOwnProperty("response") && error.response.status === 401) {
                 message.error('You are not logged in');
-                window.location.href = window.location.origin+'/publisher/login';
+                window.location.href = window.location.origin + '/publisher/login';
             } else {
                 notification["error"]({
                     message: "There was a problem",
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index 62795984f03..51d9ed9d56e 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -68,7 +68,7 @@ class ReleaseView extends React.Component {
                                     icon="shop"
                                     disabled={this.props.currentLifecycleStatus !== "PUBLISHED"}
                                     onClick={() => {
-                                        window.open("https://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + "/store/" + app.deviceType + "/apps/" + release.uuid)
+                                        window.open(window.location.origin+ "/store/" + app.deviceType + "/apps/" + release.uuid)
                                     }}>
                                     Open in store
                                 </Button>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
index 634683273db..84e69a9515f 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js
@@ -235,7 +235,7 @@ class NewAppDetailsForm extends React.Component {
                                     </Select>
                                 )}
                             </Form.Item>
-                            //todo implement add meta data
+                            {/* //todo implement add meta data */}
                             {/*<Form.Item {...formItemLayout} label="Meta Data">*/}
                                 {/*<InputGroup>*/}
                                     {/*<Row gutter={8}>*/}