Merge branch 'application-mgt-new' into 'application-mgt-new'

Add UI improvements to APPM UI

See merge request entgra/carbon-device-mgt!331
feature/appm-store/pbac
Inosh Perara 5 years ago
commit 7477c4052b

@ -15,11 +15,15 @@
"acorn": "^6.2.0", "acorn": "^6.2.0",
"antd": "^3.23.6", "antd": "^3.23.6",
"axios": "^0.19.0", "axios": "^0.19.0",
"babel-eslint": "^9.0.0",
"d3": "^5.9.7", "d3": "^5.9.7",
"dagre": "^0.8.4", "dagre": "^0.8.4",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.16.0",
"fetch": "^1.1.0", "fetch": "^1.1.0",
"gapi": "0.0.3", "imagemin": "^6.1.0",
"gapi-client": "0.0.3",
"keymirror": "^0.1.1", "keymirror": "^0.1.1",
"rc-tween-one": "^2.4.1", "rc-tween-one": "^2.4.1",
"react-d3-graph": "^2.1.0", "react-d3-graph": "^2.1.0",
@ -34,7 +38,8 @@
"react-star-ratings": "^2.3.0", "react-star-ratings": "^2.3.0",
"redux-thunk": "^2.3.0", "redux-thunk": "^2.3.0",
"shade-blend-color": "^1.0.0", "shade-blend-color": "^1.0.0",
"storm-react-diagrams": "^5.2.1" "storm-react-diagrams": "^5.2.1",
"typescript": "^3.6.4"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.5.0", "@babel/core": "^7.5.0",

@ -64,6 +64,7 @@ class App extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.updateFavicon();
axios.get( axios.get(
window.location.origin + "/publisher/public/conf/config.json", window.location.origin + "/publisher/public/conf/config.json",
).then(res => { ).then(res => {
@ -130,6 +131,14 @@ class App extends React.Component {
}); });
}; };
updateFavicon = () =>{
const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = window.location.origin+'/devicemgt/public/uuf.unit.favicon/img/favicon.png';
document.getElementsByTagName('head')[0].appendChild(link);
};
render() { render() {
const {loading, error} = this.state; const {loading, error} = this.state;

@ -57,10 +57,10 @@ class ListApps extends React.Component {
return ( return (
<Card> <Card>
<Row gutter={28}> <Row gutter={28}>
<Col md={7}> <Col md={6}>
<Filters setFilters={this.setFilters}/> <Filters setFilters={this.setFilters}/>
</Col> </Col>
<Col md={17}> <Col md={18}>
<Row> <Row>
<Col span={6}> <Col span={6}>
<Title level={4}>Apps</Title> <Title level={4}>Apps</Title>

@ -34,6 +34,7 @@ import {
Select Select
} from 'antd'; } from 'antd';
import axios from "axios"; import axios from "axios";
import "@babel/polyfill";
import {withConfigContext} from "../../../../context/ConfigContext"; import {withConfigContext} from "../../../../context/ConfigContext";
const {TextArea} = Input; const {TextArea} = Input;
@ -59,7 +60,7 @@ function getBase64(file) {
} }
class EditReleaseModal extends React.Component { class EditReleaseModal extends React.Component {
// To add subscription type & tenancy sharing, refer https://gitlab.com/entgra/carbon-device-mgt/merge_requests/331
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -162,12 +163,6 @@ class EditReleaseModal extends React.Component {
}, },
releaseDescription: { releaseDescription: {
value: release.description value: release.description
},
price: {
value: release.price
},
isSharedWithAllTenants: {
value: release.isSharedWithAllTenants
} }
}); });
@ -252,7 +247,7 @@ class EditReleaseModal extends React.Component {
this.setState({ this.setState({
loading: true loading: true
}); });
const {price, isSharedWithAllTenants, releaseDescription, releaseType} = values; const {releaseDescription, releaseType} = values;
const {icons, screenshots, binaryFiles} = this.state; const {icons, screenshots, binaryFiles} = this.state;
@ -261,8 +256,8 @@ class EditReleaseModal extends React.Component {
//add release data //add release data
const release = { const release = {
description: releaseDescription, description: releaseDescription,
price: (price === undefined) ? 0 : parseInt(price), price: 0,
isSharedWithAllTenants, isSharedWithAllTenants: false,
metaData: JSON.stringify(this.state.metaData), metaData: JSON.stringify(this.state.metaData),
releaseType: releaseType, releaseType: releaseType,
}; };
@ -282,10 +277,6 @@ class EditReleaseModal extends React.Component {
if (specificElements.hasOwnProperty("url")) { if (specificElements.hasOwnProperty("url")) {
release.url = values.url; release.url = values.url;
} }
//
// if (specificElements.hasOwnProperty("packageName")) {
// release.packageName = values.packageName;
// }
if (icons.length === 1) { if (icons.length === 1) {
data.append('icon', icons[0].originFileObj); data.append('icon', icons[0].originFileObj);
@ -589,30 +580,6 @@ class EditReleaseModal extends React.Component {
)} )}
</Form.Item> </Form.Item>
)} )}
<Form.Item {...formItemLayout} label="Price">
{getFieldDecorator('price', {
rules: [{
required: false
}],
})(
<Input prefix="$" placeholder="00.00"/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Is Shared?">
{getFieldDecorator('isSharedWithAllTenants', {
rules: [{
required: true,
message: 'Please select'
}],
initialValue: false
})(
<Switch checkedChildren={<Icon type="check"/>}
unCheckedChildren={<Icon type="close"/>}
/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Data"> <Form.Item {...formItemLayout} label="Meta Data">
{getFieldDecorator('meta', { {getFieldDecorator('meta', {
rules: [{ rules: [{

@ -91,8 +91,8 @@ class NewAppUploadForm extends React.Component {
//add release data //add release data
const release = { const release = {
description: releaseDescription, description: releaseDescription,
price: (price === undefined) ? 0 : parseInt(price), price: 0,
isSharedWithAllTenants, isSharedWithAllTenants: false,
metaData: JSON.stringify(this.state.metaData), metaData: JSON.stringify(this.state.metaData),
releaseType: releaseType releaseType: releaseType
}; };
@ -111,19 +111,19 @@ class NewAppUploadForm extends React.Component {
let isFormValid = true; // flag to check if this form is valid let isFormValid = true; // flag to check if this form is valid
if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") { if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
if(this.lowerOsVersion==null || this.upperOsVersion==null){ if (this.lowerOsVersion == null || this.upperOsVersion == null) {
isFormValid = false; isFormValid = false;
this.setState({ this.setState({
osVersionsHelperText: 'Please select supported OS versions', osVersionsHelperText: 'Please select supported OS versions',
osVersionsValidateStatus: 'error', osVersionsValidateStatus: 'error',
}); });
}else if(this.lowerOsVersion>=this.upperOsVersion){ } else if (this.lowerOsVersion >= this.upperOsVersion) {
isFormValid = false; isFormValid = false;
this.setState({ this.setState({
osVersionsHelperText: 'Please select valid range', osVersionsHelperText: 'Please select valid range',
osVersionsValidateStatus: 'error', osVersionsValidateStatus: 'error',
}); });
}else{ } else {
release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`; release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
} }
} }
@ -152,7 +152,7 @@ class NewAppUploadForm extends React.Component {
screenshotHelperText: 'Please select 3 screenshots' screenshotHelperText: 'Please select 3 screenshots'
}); });
} }
if(isFormValid) { if (isFormValid) {
data.append('icon', icon[0].originFileObj); data.append('icon', icon[0].originFileObj);
data.append('screenshot1', screenshots[0].originFileObj); data.append('screenshot1', screenshots[0].originFileObj);
data.append('screenshot2', screenshots[1].originFileObj); data.append('screenshot2', screenshots[1].originFileObj);
@ -405,7 +405,12 @@ class NewAppUploadForm extends React.Component {
label="Supported OS Versions" label="Supported OS Versions"
validateStatus={osVersionsValidateStatus} validateStatus={osVersionsValidateStatus}
help={osVersionsHelperText}> help={osVersionsHelperText}>
{getFieldDecorator('supportedOS')( {getFieldDecorator('supportedOS', {
rules: [{
required: true
}],
initialValue: false
})(
<div> <div>
<InputGroup> <InputGroup>
<Row gutter={8}> <Row gutter={8}>
@ -428,7 +433,14 @@ class NewAppUploadForm extends React.Component {
<Col span={11}> <Col span={11}>
<Select style={{width: "100%"}} <Select style={{width: "100%"}}
placeholder="Upper version" placeholder="Upper version"
defaultActiveFirstOption={true}
onChange={this.handleUpperOsVersionChange}> onChange={this.handleUpperOsVersionChange}>
{(supportedOsVersions.length > 0) &&(
<Option key="all"
value={supportedOsVersions[supportedOsVersions.length-1]["versionName"]}>
All
</Option>
)}
{supportedOsVersions.map(version => ( {supportedOsVersions.map(version => (
<Option key={version.versionName} <Option key={version.versionName}
value={version.versionName}> value={version.versionName}>
@ -443,49 +455,6 @@ class NewAppUploadForm extends React.Component {
)} )}
</Form.Item> </Form.Item>
)} )}
<Form.Item {...formItemLayout} label="Price Type">
{getFieldDecorator('select', {
rules: [{required: true, message: 'Please select price Type'}],
})(
<Select
placeholder="Please select a price type"
onChange={this.handlePriceTypeChange}>
<Option value="free">Free</Option>
<Option value="paid">Paid</Option>
</Select>,
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Price">
{getFieldDecorator('price', {
rules: [{
required: !isFree
}],
})(
<InputNumber
disabled={isFree}
options={{
initialValue: 1
}}
min={0}
max={10000}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Is Shared?">
{getFieldDecorator('isSharedWithAllTenants', {
rules: [{
required: true,
message: 'Please select'
}],
initialValue: false
})(
<Switch checkedChildren={<Icon type="check"/>}
unCheckedChildren={<Icon type="close"/>}
/>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Data"> <Form.Item {...formItemLayout} label="Meta Data">
{getFieldDecorator('meta', {})( {getFieldDecorator('meta', {})(
<div> <div>

@ -64,6 +64,7 @@ class App extends React.Component {
} }
componentDidMount() { componentDidMount() {
this.updateFavicon();
axios.get( axios.get(
window.location.origin + "/store/public/conf/config.json", window.location.origin + "/store/public/conf/config.json",
).then(res => { ).then(res => {
@ -77,6 +78,14 @@ class App extends React.Component {
}); });
} }
updateFavicon = () =>{
const link = document.querySelector("link[rel*='icon']") || document.createElement('link');
link.type = 'image/x-icon';
link.rel = 'shortcut icon';
link.href = window.location.origin+'/devicemgt/public/uuf.unit.favicon/img/favicon.png';
document.getElementsByTagName('head')[0].appendChild(link);
};
checkUserLoggedIn = (config) => { checkUserLoggedIn = (config) => {
axios.post( axios.post(
window.location.origin + "/store-ui-request-handler/user", window.location.origin + "/store-ui-request-handler/user",

@ -29,46 +29,9 @@ const { Text } = Typography;
class DetailedRating extends React.Component{ class DetailedRating extends React.Component{
constructor(props){
super(props);
this.state={
detailedRating: null
}
}
componentDidMount() {
const {type,uuid} = this.props;
this.getData(type,uuid);
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.uuid !== this.props.uuid) {
const {type,uuid} = this.props;
this.getData(type,uuid);
}
}
getData = (type, uuid)=>{
const config = this.props.context;
return axios.get(
window.location.origin+ config.serverConfig.invoker.uri +config.serverConfig.invoker.store+"/reviews/"+uuid+"/"+type+"-rating",
).then(res => {
if (res.status === 200) {
let detailedRating = res.data.data;
this.setState({
detailedRating
})
}
}).catch(function (error) {
handleApiError(error,"Error occurred while trying to load ratings.");
});
};
render() { render() {
const detailedRating = this.state.detailedRating; const {detailedRating} = this.props;
if(detailedRating ==null){ if(detailedRating ==null){
return null; return null;

@ -29,6 +29,7 @@ import AppUninstallModal from "./install/AppUninstallModal";
import CurrentUsersReview from "./review/CurrentUsersReview"; import CurrentUsersReview from "./review/CurrentUsersReview";
import {withConfigContext} from "../../../context/ConfigContext"; import {withConfigContext} from "../../../context/ConfigContext";
import {handleApiError} from "../../../js/Utils"; import {handleApiError} from "../../../js/Utils";
import ReviewContainer from "./review/ReviewContainer";
const {Title, Text, Paragraph} = Typography; const {Title, Text, Paragraph} = Typography;
@ -193,15 +194,7 @@ class ReleaseView extends React.Component {
{(metaData.length === 0) && (<Text type="secondary">No meta data available.</Text>)} {(metaData.length === 0) && (<Text type="secondary">No meta data available.</Text>)}
</Row> </Row>
<Divider/> <Divider/>
<CurrentUsersReview uuid={release.uuid}/> <ReviewContainer uuid={release.uuid}/>
<Divider dashed={true}/>
<Text>REVIEWS</Text>
<Row>
<Col lg={18} md={24}>
<DetailedRating type="app" uuid={release.uuid}/>
</Col>
</Row>
<Reviews type="app" uuid={release.uuid}/>
</div> </div>
</div> </div>
); );

@ -86,10 +86,7 @@ class AddReview extends React.Component {
description: description:
'Your review has been posted successfully.', 'Your review has been posted successfully.',
}); });
this.props.onUpdateReview();
setTimeout(() => {
window.location.href = uuid;
}, 2000)
} else { } else {
this.setState({ this.setState({
loading: false, loading: false,

@ -28,48 +28,9 @@ const {Text, Paragraph} = Typography;
class CurrentUsersReview extends React.Component { class CurrentUsersReview extends React.Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentDidMount() {
this.fetchData();
}
fetchData = () => {
const {uuid} = this.props;
const config = this.props.context;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
).then(res => {
if (res.status === 200) {
const data = res.data.data.data;
this.setState({data});
}
}).catch((error) => {
handleApiError(error,"Error occurred while trying to get your review.");
});
};
deleteCallback = () =>{
this.setState({
data: []
});
};
addCallBack =(review) =>{
};
render() { render() {
const {data} = this.state; const {uuid, currentUserReviews} = this.props;
const {uuid} = this.props;
return ( return (
<div> <div>
<Text>MY REVIEW</Text> <Text>MY REVIEW</Text>
@ -78,13 +39,20 @@ class CurrentUsersReview extends React.Component {
paddingTop: 8, paddingTop: 8,
paddingLeft: 24 paddingLeft: 24
}}> }}>
{data.length > 0 && ( {currentUserReviews.length > 0 && (
<div> <div>
<List <List
dataSource={data} dataSource={currentUserReviews}
renderItem={item => ( renderItem={item => (
<List.Item key={item.id}> <List.Item key={item.id}>
<SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={true} deleteCallback={this.deleteCallback} isPersonalReview={true}/> <SingleReview
uuid={uuid}
review={item}
isDeletable={true}
isEditable={true}
deleteCallback={this.props.deleteCallback}
onUpdateReview={this.props.onUpdateReview}
isPersonalReview={true}/>
</List.Item> </List.Item>
)} )}
> >
@ -92,7 +60,7 @@ class CurrentUsersReview extends React.Component {
</div> </div>
)} )}
{data.length === 0 && ( {currentUserReviews.length === 0 && (
<div> <div>
<Empty <Empty
image={Empty.PRESENTED_IMAGE_DEFAULT} image={Empty.PRESENTED_IMAGE_DEFAULT}
@ -104,7 +72,9 @@ class CurrentUsersReview extends React.Component {
} }
> >
{/*<Button type="primary">Add review</Button>*/} {/*<Button type="primary">Add review</Button>*/}
<AddReview uuid={uuid}/> <AddReview
uuid={uuid}
onUpdateReview={this.props.onUpdateReview}/>
</Empty> </Empty>
</div> </div>
)} )}

@ -0,0 +1,119 @@
/*
* Copyright (c) 2019, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
*
* Entgra (pvt) Ltd. licenses this file to you under the Apache License,
* Version 2.0 (the "License"); you may not use this file except
* in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from "react";
import CurrentUsersReview from "./CurrentUsersReview";
import {Col, Divider, Row, Typography} from "antd";
import DetailedRating from "../DetailedRating";
import Reviews from "./Reviews";
import axios from "axios";
import {handleApiError} from "../../../../js/Utils";
import {withConfigContext} from "../../../../context/ConfigContext";
const {Text} = Typography;
class ReviewContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
currentUserReviews: [],
detailedRating: null
}
}
componentDidMount() {
this.fetchCurrentUserReviews();
this.fetchDetailedRating("app", this.props.uuid);
}
fetchCurrentUserReviews = () => {
const {uuid} = this.props;
const config = this.props.context;
axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/app/user/" + uuid,
).then(res => {
if (res.status === 200) {
const currentUserReviews = res.data.data.data;
this.setState({currentUserReviews});
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to get your review.");
});
};
deleteCurrentUserReviewCallback = () => {
this.setState({
currentUserReviews: []
});
this.fetchDetailedRating("app", this.props.uuid);
};
fetchDetailedRating = (type, uuid) => {
const config = this.props.context;
axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/reviews/" + uuid + "/" + type + "-rating",
).then(res => {
if (res.status === 200) {
let detailedRating = res.data.data;
this.setState({
detailedRating
})
}
}).catch(function (error) {
handleApiError(error, "Error occurred while trying to load ratings.");
});
};
onUpdateReview = () => {
this.fetchCurrentUserReviews();
this.fetchDetailedRating("app", this.props.uuid);
};
render() {
const {uuid} = this.props;
const {currentUserReviews,detailedRating} = this.state;
return (
<div>
<CurrentUsersReview
uuid={uuid}
currentUserReviews={currentUserReviews}
onUpdateReview={this.onUpdateReview}
deleteCallback={this.deleteCurrentUserReviewCallback}/>
<Divider dashed={true}/>
<Text>REVIEWS</Text>
<Row>
<Col lg={18} md={24}>
<DetailedRating
type="app"
detailedRating={detailedRating}/>
</Col>
</Row>
<Reviews
type="app"
uuid={uuid}
deleteCallback={this.onUpdateReview}/>
</div>
)
}
}
export default withConfigContext(ReviewContainer);

@ -107,6 +107,7 @@ class Reviews extends React.Component {
data: res, data: res,
}); });
}); });
this.props.deleteCallback();
}; };
render() { render() {
@ -119,16 +120,14 @@ class Reviews extends React.Component {
pageStart={0} pageStart={0}
loadMore={this.handleInfiniteOnLoad} loadMore={this.handleInfiniteOnLoad}
hasMore={!loading && hasMore} hasMore={!loading && hasMore}
useWindow={true} useWindow={true}>
>
<List <List
dataSource={data} dataSource={data}
renderItem={item => ( renderItem={item => (
<List.Item key={item.id}> <List.Item key={item.id}>
<SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false} deleteCallback={this.deleteCallback}/> <SingleReview uuid={uuid} review={item} isDeletable={true} isEditable={false} deleteCallback={this.deleteCallback}/>
</List.Item> </List.Item>
)} )}>
>
{loading && hasMore && ( {loading && hasMore && (
<div className="loading-container"> <div className="loading-container">
<Spin/> <Spin/>

@ -52,6 +52,7 @@ class SingleReview extends React.Component {
this.setState({ this.setState({
review review
}); });
this.props.onUpdateReview();
}; };
deleteReview = () => { deleteReview = () => {

Loading…
Cancel
Save