Fix retired app loading issue in APPM UI

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: [],
@@ -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>

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>);
         }
@@ -132,7 +152,6 @@ class AppsTable extends React.Component {
         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;

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>

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}>*/}