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
feature/appm-store/pbac
Jayasanka Weerasinghe 5 years ago committed by Dharmakeerthi Lasantha
parent b6a2c3fb64
commit 9807a36098

@ -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 && (

@ -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>);
}
},

@ -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

@ -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>

Loading…
Cancel
Save