Add custom forbidden alerts messages in APPM store UI

feature/appm-store/pbac
Jayasanka 5 years ago
parent 84ad27f299
commit 9303d37451

@ -18,12 +18,12 @@
import {notification} from "antd";
export const handleApiError = (error, message, isForbiddenMessageSilent) => {
export const handleApiError = (error, message, isForbiddenMessageSilent = false) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
const redirectUrl = encodeURI(window.location.href);
window.location.href = window.location.origin + `/publisher/login?redirect=${redirectUrl}`;
// silence 403 forbidden message
} else if(!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)){
} else if (!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)) {
notification["error"]({
message: "There was a problem",
duration: 10,

@ -18,7 +18,7 @@
import React from "react";
import AppCard from "./AppCard";
import {Col, message, notification, Row, Result, Skeleton} from "antd";
import {Col, message, notification, Row, Result, Skeleton, Alert} from "antd";
import axios from "axios";
import {withConfigContext} from "../../context/ConfigContext";
import {handleApiError} from "../../js/Utils";
@ -28,7 +28,10 @@ class AppList extends React.Component {
super(props);
this.state = {
apps: [],
loading: true
loading: true,
forbiddenErrors: {
apps: false
}
}
}
@ -60,7 +63,7 @@ class AppList extends React.Component {
});
//send request to the invoker
axios.post(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/",
payload,
).then(res => {
if (res.status === 200) {
@ -73,18 +76,37 @@ class AppList extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load apps.");
this.setState({loading: false});
handleApiError(error, "Error occurred while trying to load apps.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
const {forbiddenErrors} = this.state;
forbiddenErrors.apps = true;
this.setState({
forbiddenErrors,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
render() {
const {apps,loading} = this.state;
const {apps, loading, forbiddenErrors} = this.state;
return (
<Skeleton loading={loading} active>
<Row gutter={16}>
{apps.length === 0 && (
{(forbiddenErrors.apps) && (
<Result
status="403"
title="403"
subTitle="You don't have permission to view apps."
// extra={<Button type="primary">Back Home</Button>}
/>
)}
{!((forbiddenErrors.apps)) && apps.length === 0 && (
<Result
status="404"
title="No apps, yet."

@ -18,7 +18,20 @@
import React from "react";
import axios from "axios";
import {Tag, message, notification, Table, Typography, Tooltip, Icon, Divider, Button, Modal, Select} from "antd";
import {
Tag,
message,
notification,
Table,
Typography,
Tooltip,
Icon,
Divider,
Button,
Modal,
Select,
Alert
} from "antd";
import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules.
@ -149,7 +162,8 @@ class SubscriptionDetails extends React.Component {
selectedRows: [],
deviceGroups: [],
groupModalVisible: false,
selectedGroupId: []
selectedGroupId: [],
isForbidden: false
};
}
@ -188,8 +202,17 @@ class SubscriptionDetails extends React.Component {
}
}).catch((error) => {
handleApiError(error, "Something went wrong when trying to load subscription data.");
this.setState({loading: false});
handleApiError(error, "Something went wrong when trying to load subscription data.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -197,6 +220,13 @@ class SubscriptionDetails extends React.Component {
const {data, pagination, loading, selectedRows} = this.state;
return (
<div>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view subscription details."
type="warning"
banner
closable/>
)}
<div style={{paddingBottom: 24}}>
<Text>
The following are the subscription details of the application in each respective device.

@ -18,7 +18,7 @@
import React from "react";
import axios from "axios";
import {Button, message, DatePicker, Table, Typography} from "antd";
import {Button, message, DatePicker, Table, Typography, Alert} from "antd";
import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules.
@ -112,7 +112,8 @@ class DeviceInstall extends React.Component {
loading: false,
selectedRows: [],
scheduledTime: null,
isScheduledInstallVisible: false
isScheduledInstallVisible: false,
isForbidden: false
};
}
@ -169,8 +170,17 @@ class DeviceInstall extends React.Component {
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load devices.");
this.setState({loading: false});
handleApiError(error, "Error occurred while trying to load devices.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -209,6 +219,13 @@ class DeviceInstall extends React.Component {
Start installing the application for one or more users by entering the corresponding user name.
Select install to automatically start downloading the application for the respective user/users.
</Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view devices."
type="warning"
banner
closable/>
)}
<Table
style={{paddingTop: 20}}
columns={columns}

@ -18,7 +18,7 @@
import React from "react";
import axios from "axios";
import {Button, Select, Table, Typography} from "antd";
import {Alert, Button, Select, Table, Typography} from "antd";
import TimeAgo from 'javascript-time-ago'
// Load locale-specific relative date/time formatting rules.
@ -109,7 +109,8 @@ class DeviceUninstall extends React.Component {
data: [],
pagination: {},
loading: false,
selectedRows: []
selectedRows: [],
isForbidden: false
};
}
@ -164,8 +165,17 @@ class DeviceUninstall extends React.Component {
});
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load devices.");
this.setState({loading: false});
handleApiError(error, "Error occurred while trying to load devices.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -204,6 +214,13 @@ class DeviceUninstall extends React.Component {
Start uninstalling the application for devices by selecting the corresponding devices.
Select uninstall to automatically start uninstalling the application for the respective devices.
</Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view installed devices."
type="warning"
banner
closable/>
)}
<Table
style={{paddingTop: 20}}
columns={columns}

@ -17,7 +17,7 @@
*/
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -40,6 +40,7 @@ class GroupInstall extends React.Component {
data: [],
value: [],
fetching: false,
isForbidden: false
};
fetchUser = value => {
@ -67,8 +68,17 @@ class GroupInstall extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load groups.");
this.setState({fetching: false});
handleApiError(error,"Error occurred while trying to load groups.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -96,6 +106,13 @@ class GroupInstall extends React.Component {
return (
<div>
<Text>Start installing the application for one or more groups by entering the corresponding group name. Select install to automatically start downloading the application for the respective device group/ groups.</Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view groups."
type="warning"
banner
closable/>
)}
<br/>
<br/>
<Select

@ -17,7 +17,7 @@
*/
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -39,6 +39,7 @@ class GroupUninstall extends React.Component {
data: [],
value: [],
fetching: false,
isForbidden: false
};
fetchUser = value => {
@ -50,9 +51,8 @@ class GroupUninstall extends React.Component {
const uuid = this.props.uuid;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+ "/subscription/" + uuid + "/"+
"/GROUP?",
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
"/GROUP?",
).then(res => {
if (res.status === 200) {
if (fetchId !== this.lastFetchId) {
@ -69,8 +69,17 @@ class GroupUninstall extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load groups.");
this.setState({fetching: false});
handleApiError(error, "Error occurred while trying to load groups.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -82,13 +91,13 @@ class GroupUninstall extends React.Component {
});
};
uninstall = (timestamp=null) =>{
uninstall = (timestamp = null) => {
const {value} = this.state;
const data = [];
value.map(val=>{
value.map(val => {
data.push(val.key);
});
this.props.onUninstall("group", data, "uninstall",timestamp);
this.props.onUninstall("group", data, "uninstall", timestamp);
};
render() {
@ -96,26 +105,35 @@ class GroupUninstall extends React.Component {
const {fetching, data, value} = this.state;
return (
<div>
<Text>Start uninstalling the application for one or more groups by entering the corresponding group name. Select uninstall to automatically start uninstalling the application for the respective device group/ groups.</Text>
<br/>
<br/>
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Search groups"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{width: '100%'}}>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
</div>
<div>
<Text>Start uninstalling the application for one or more groups by entering the corresponding group
name. Select uninstall to automatically start uninstalling the application for the respective device
group/ groups.</Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view installed groups."
type="warning"
banner
closable/>
)}
<br/>
<br/>
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Search groups"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{width: '100%'}}>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
</div>
);
}
}

@ -17,7 +17,7 @@
*/
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -40,6 +40,7 @@ class RoleInstall extends React.Component {
data: [],
value: [],
fetching: false,
isForbidden: false
};
fetchUser = value => {
@ -67,8 +68,17 @@ class RoleInstall extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load roles.");
this.setState({fetching: false});
handleApiError(error,"Error occurred while trying to load roles.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -96,6 +106,13 @@ class RoleInstall extends React.Component {
return (
<div>
<Text>Start installing the application for one or more roles by entering the corresponding role name. Select install to automatically start downloading the application for the respective user role/roles.</Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view roles."
type="warning"
banner
closable/>
)}
<br/>
<br/>
<Select

@ -17,7 +17,7 @@
*/
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -39,6 +39,7 @@ class RoleUninstall extends React.Component {
data: [],
value: [],
fetching: false,
isForbidden: false
};
fetchUser = value => {
@ -50,8 +51,8 @@ class RoleUninstall extends React.Component {
const uuid = this.props.uuid;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+ "/subscription/" + uuid + "/"+
"/ROLE?",
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/subscription/" + uuid + "/" +
"/ROLE?",
).then(res => {
if (res.status === 200) {
if (fetchId !== this.lastFetchId) {
@ -68,53 +69,71 @@ class RoleUninstall extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load roles.");
this.setState({fetching: false});
handleApiError(error, "Error occurred while trying to load roles.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
handleChange = value => {
this.setState({
value,
data: [],
fetching: false,
});
value,
data: [],
fetching: false,
});
};
uninstall = (timestamp=null) =>{
uninstall = (timestamp = null) => {
const {value} = this.state;
const data = [];
value.map(val=>{
value.map(val => {
data.push(val.key);
});
this.props.onUninstall("role", data, "uninstall",timestamp);
this.props.onUninstall("role", data, "uninstall", timestamp);
};
render() {
const {fetching, data, value} = this.state;
return (
<div>
<Text>Start uninstalling the application for one or more roles by entering the corresponding role name. Select uninstall to automatically start uninstalling the application for the respective user role/roles.</Text>
<br/>
<br/>
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Search roles"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{width: '100%'}}
>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length===0}/>
</div>
<div>
<Text>Start uninstalling the application for one or more roles by entering the corresponding role name.
Select uninstall to automatically start uninstalling the application for the respective user
role/roles.</Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view uninstalled roles."
type="warning"
banner
closable/>
)}
<br/>
<br/>
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Search roles"
notFoundContent={fetching ? <Spin size="small"/> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{width: '100%'}}
>
{data.map(d => (
<Option key={d.value}>{d.text}</Option>
))}
</Select>
<InstallModalFooter type="Uninstall" operation={this.uninstall} disabled={value.length === 0}/>
</div>
);
}
}

@ -17,7 +17,7 @@
*/
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -69,8 +69,17 @@ class UserInstall extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load users.");
this.setState({fetching: false});
handleApiError(error,"Error occurred while trying to load users.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -79,6 +88,7 @@ class UserInstall extends React.Component {
value,
data: [],
fetching: false,
isForbidden: false
});
};
@ -97,6 +107,13 @@ class UserInstall extends React.Component {
return (
<div>
<Text>Start installing the application for one or more users by entering the corresponding user name. Select install to automatically start downloading the application for the respective user/users. </Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view users."
type="warning"
banner
closable/>
)}
<p>Select users</p>
<Select
mode="multiple"

@ -17,7 +17,7 @@
*/
import React from "react";
import {Typography, Select, Spin, message, notification, Button} from "antd";
import {Typography, Select, Spin, message, notification, Button, Alert} from "antd";
import debounce from 'lodash.debounce';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -39,6 +39,7 @@ class UserUninstall extends React.Component {
data: [],
value: [],
fetching: false,
isForbidden: false
};
fetchUser = (value) => {
@ -67,8 +68,17 @@ class UserUninstall extends React.Component {
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load users.");
this.setState({fetching: false});
handleApiError(error, "Error occurred while trying to load users.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
this.setState({
isForbidden: true,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -97,6 +107,13 @@ class UserUninstall extends React.Component {
<Text>Start uninstalling the application for one or more users by entering the corresponding user name.
Select uninstall to automatically start uninstalling the application for the respective
user/users. </Text>
{(this.state.isForbidden) && (
<Alert
message="You don't have permission to view uninstalled users."
type="warning"
banner
closable/>
)}
<p>Select users</p>
<Select
mode="multiple"

@ -17,7 +17,7 @@
*/
import React from "react";
import {List, message, Typography, Empty, Button, Row, Col, notification} from "antd";
import {List, message, Typography, Empty, Button, Row, Col, notification, Alert} from "antd";
import SingleReview from "./singleReview/SingleReview";
import axios from "axios";
import AddReview from "./AddReview";
@ -34,52 +34,59 @@ class CurrentUsersReview extends React.Component {
return (
<div>
<Text>MY REVIEW</Text>
<div style={{
overflow: "auto",
paddingTop: 8,
paddingLeft: 24
}}>
{currentUserReviews.length > 0 && (
<div>
<List
dataSource={currentUserReviews}
renderItem={item => (
<List.Item key={item.id}>
<SingleReview
uuid={uuid}
review={item}
isDeletable={true}
isEditable={true}
deleteCallback={this.props.deleteCallback}
onUpdateReview={this.props.onUpdateReview}
isPersonalReview={true}/>
</List.Item>
)}
>
</List>
</div>
)}
{(this.props.forbidden) && (
<Alert
message="You don't have permission to add reviews."
type="warning"
banner
closable/>
)}
{(!this.props.forbidden) && (
<div style={{
overflow: "auto",
paddingTop: 8,
paddingLeft: 24
}}>
{currentUserReviews.length > 0 && (
<div>
<List
dataSource={currentUserReviews}
renderItem={item => (
<List.Item key={item.id}>
<SingleReview
uuid={uuid}
review={item}
isDeletable={true}
isEditable={true}
deleteCallback={this.props.deleteCallback}
onUpdateReview={this.props.onUpdateReview}
isPersonalReview={true}/>
</List.Item>
)}
>
</List>
</div>
)}
{currentUserReviews.length === 0 && (
<div>
<Empty
image={Empty.PRESENTED_IMAGE_DEFAULT}
imagestyle={{
height: 60,
}}
description={
<span>Share your experience with your community by adding a review.</span>
}
>
{/*<Button type="primary">Add review</Button>*/}
<AddReview
uuid={uuid}
onUpdateReview={this.props.onUpdateReview}/>
</Empty>
</div>
)}
</div>
{currentUserReviews.length === 0 && (
<div>
<Empty
image={Empty.PRESENTED_IMAGE_DEFAULT}
imagestyle={{
height: 60,
}}
description={
<span>Share your experience with your community by adding a review.</span>
}>
{/*<Button type="primary">Add review</Button>*/}
<AddReview
uuid={uuid}
onUpdateReview={this.props.onUpdateReview}/>
</Empty>
</div>
)}
</div>
)}
</div>
);
}

@ -32,7 +32,12 @@ class ReviewContainer extends React.Component {
super(props);
this.state = {
currentUserReviews: [],
detailedRating: null
detailedRating: null,
forbiddenErrors: {
currentReview: false,
reviews: false,
rating: false
}
}
}
@ -54,7 +59,19 @@ class ReviewContainer extends React.Component {
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to get your review.");
handleApiError(error, "Error occurred while trying to get your review.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
const {forbiddenErrors} = this.state;
forbiddenErrors.currentReview = true;
this.setState({
forbiddenErrors,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -79,7 +96,7 @@ class ReviewContainer extends React.Component {
}
}).catch(function (error) {
handleApiError(error, "Error occurred while trying to load ratings.");
handleApiError(error, "Error occurred while trying to load ratings.", true);
});
};
@ -90,10 +107,11 @@ class ReviewContainer extends React.Component {
render() {
const {uuid} = this.props;
const {currentUserReviews,detailedRating} = this.state;
const {currentUserReviews,detailedRating, forbiddenErrors} = this.state;
return (
<div>
<CurrentUsersReview
forbidden={forbiddenErrors.currentReview}
uuid={uuid}
currentUserReviews={currentUserReviews}
onUpdateReview={this.onUpdateReview}

@ -17,7 +17,7 @@
*/
import React from "react";
import {List, message, Avatar, Spin, Button, notification} from 'antd';
import {List, message, Avatar, Spin, Button, notification, Alert} from 'antd';
import "./Reviews.css";
import InfiniteScroll from 'react-infinite-scroller';
@ -33,7 +33,10 @@ class Reviews extends React.Component {
data: [],
loading: false,
hasMore: false,
loadMore: false
loadMore: false,
forbiddenErrors: {
reviews: false
}
};
@ -51,7 +54,7 @@ class Reviews extends React.Component {
const config = this.props.context;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+type+"/"+uuid,
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + type + "/" + uuid,
{
headers: {'X-Platform': config.serverConfig.platform}
}).then(res => {
@ -60,8 +63,20 @@ class Reviews extends React.Component {
callback(reviews);
}
}).catch(function (error) {
handleApiError(error,"Error occurred while trying to load reviews.");
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load reviews.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
const {forbiddenErrors} = this.state;
forbiddenErrors.reviews = true;
this.setState({
forbiddenErrors,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -101,7 +116,7 @@ class Reviews extends React.Component {
});
};
deleteCallback = () =>{
deleteCallback = () => {
this.fetchData(0, limit, res => {
this.setState({
data: res,
@ -114,30 +129,40 @@ class Reviews extends React.Component {
const {loading, hasMore, data, loadMore} = this.state;
const {uuid} = this.props;
return (
<div className="infinite-container">
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
hasMore={!loading && hasMore}
useWindow={true}>
<List
dataSource={data}
renderItem={item => (
<List.Item key={item.id}>
<SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false} deleteCallback={this.deleteCallback}/>
</List.Item>
)}>
{loading && hasMore && (
<div className="loading-container">
<Spin/>
</div>
)}
</List>
</InfiniteScroll>
{!loadMore && (data.length >= limit) && (<div style={{textAlign: "center"}}>
<Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
</div>)}
<div>
{(this.state.forbiddenErrors.reviews) && (
<Alert
message="You don't have permission to view reviews."
type="warning"
banner
closable/>
)}
<div className="infinite-container">
<InfiniteScroll
initialLoad={false}
pageStart={0}
loadMore={this.handleInfiniteOnLoad}
hasMore={!loading && hasMore}
useWindow={true}>
<List
dataSource={data}
renderItem={item => (
<List.Item key={item.id}>
<SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false}
deleteCallback={this.deleteCallback}/>
</List.Item>
)}>
{loading && hasMore && (
<div className="loading-container">
<Spin/>
</div>
)}
</List>
</InfiniteScroll>
{!loadMore && (data.length >= limit) && (<div style={{textAlign: "center"}}>
<Button type="dashed" htmlType="button" onClick={this.enableLoading}>Read All Reviews</Button>
</div>)}
</div>
</div>
);
}

@ -18,14 +18,15 @@
import {notification} from "antd";
export const handleApiError = (error, message) => {
export const handleApiError = (error, message, isForbiddenMessageSilent = false) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
const redirectUrl = encodeURI(window.location.href);
window.location.href = window.location.origin + `/store/login?redirect=${redirectUrl}`;
} else {
// silence 403 forbidden message
} else if (!(isForbiddenMessageSilent && error.hasOwnProperty("response") && error.response.status === 403)) {
notification["error"]({
message: "There was a problem",
duration: 2,
duration: 10,
description: message,
});
}

@ -17,7 +17,8 @@
*/
import React from "react";
import {Layout, Menu, Icon, Drawer, Button} from 'antd';
import {Layout, Menu, Icon, Drawer, Button, Alert} from 'antd';
const {Header, Content, Footer} = Layout;
import {Link} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
@ -38,7 +39,10 @@ class Dashboard extends React.Component {
selectedKeys: [],
deviceTypes: [],
visible: false,
collapsed: false
collapsed: false,
forbiddenErrors: {
deviceTypes: false
}
};
this.logo = this.props.context.theme.logo;
this.config = this.props.context;
@ -62,10 +66,19 @@ class Dashboard extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load device types.");
this.setState({
loading: false
});
handleApiError(error, "Error occurred while trying to load device types.", true);
if (error.hasOwnProperty("response") && error.response.status === 403) {
const {forbiddenErrors} = this.state;
forbiddenErrors.deviceTypes = true;
this.setState({
forbiddenErrors,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};
@ -90,7 +103,7 @@ class Dashboard extends React.Component {
render() {
const config = this.props.context;
const {selectedKeys, deviceTypes} = this.state;
const {selectedKeys, deviceTypes, forbiddenErrors} = this.state;
const DeviceTypesData = deviceTypes.map((deviceType) => {
const platform = deviceType.name;
@ -116,7 +129,7 @@ class Dashboard extends React.Component {
<Layout>
<Header style={{paddingLeft: 0, paddingRight: 0, backgroundColor: "white"}}>
<div className="logo-image">
<Link to="/store/android"><img alt="logo" src={this.logo}/></Link>
<Link to="/store"><img alt="logo" src={this.logo}/></Link>
</div>
<div className="web-layout">
@ -131,7 +144,7 @@ class Dashboard extends React.Component {
<Menu.Item key="web-clip">
<Link to="/store/web-clip">
<Icon type="upload"/>
Web Clips
Web Clips
</Link>
</Menu.Item>
@ -140,7 +153,7 @@ class Dashboard extends React.Component {
<span className="submenu-title-wrapper">
<Icon type="user"/>
{this.config.user}
</span> }>
</span>}>
<Logout/>
</SubMenu>
</Menu>
@ -156,32 +169,32 @@ class Dashboard extends React.Component {
</Button>
</div>
</Layout>
<Drawer
title={<Link to="/store/android" onClick={this.onCloseMobileNavigationBar}>
<img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
</Link>}
placement="left"
closable={false}
onClose={this.onCloseMobileNavigationBar}
visible={this.state.visible}
getContainer={false}
style={{position: 'absolute'}}>
<Menu
theme="light"
mode="inline"
defaultSelectedKeys={selectedKeys}
style={{lineHeight: '64px', width: 231}}
onClick={this.onCloseMobileNavigationBar}>
{DeviceTypesData}
<Menu.Item key="web-clip">
<Link to="/store/web-clip">
<Drawer
title={<Link to="/store" onClick={this.onCloseMobileNavigationBar}>
<img alt="logo" src={this.logo} style={{marginLeft: 30}} width={"60%"}/>
</Link>}
placement="left"
closable={false}
onClose={this.onCloseMobileNavigationBar}
visible={this.state.visible}
getContainer={false}
style={{position: 'absolute'}}>
<Menu
theme="light"
mode="inline"
defaultSelectedKeys={selectedKeys}
style={{lineHeight: '64px', width: 231}}
onClick={this.onCloseMobileNavigationBar}>
{DeviceTypesData}
<Menu.Item key="web-clip">
<Link to="/store/web-clip">
<Icon type="upload"/>Web Clips
</Link>
</Menu.Item>
</Menu>
</Drawer>
</Link>
</Menu.Item>
</Menu>
</Drawer>
<Layout className="mobile-layout">
<Menu
mode="horizontal"
@ -198,6 +211,13 @@ class Dashboard extends React.Component {
</Layout>
<Layout className="dashboard-body">
{(forbiddenErrors.deviceTypes) && (
<Alert
message="You don't have permission to view device types."
type="warning"
banner
closable/>
)}
<Content style={{padding: '0 0'}}>
<Switch>
{this.state.routes.map((route) => (

@ -36,7 +36,10 @@ class Release extends React.Component {
this.state = {
loading: true,
app: null,
uuid: null
uuid: null,
forbiddenErrors: {
app: false
}
};
}
@ -72,8 +75,19 @@ class Release extends React.Component {
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to load releases.");
this.setState({loading: false});
handleApiError(error,"Error occurred while trying to load releases.", false);
if (error.hasOwnProperty("response") && error.response.status === 403) {
const {forbiddenErrors} = this.state;
forbiddenErrors.app = true;
this.setState({
forbiddenErrors,
loading: false
})
} else {
this.setState({
loading: false
});
}
});
};

Loading…
Cancel
Save