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

Add UI improvements to APPM UI

See merge request entgra/carbon-device-mgt!331

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -15,11 +15,15 @@
     "acorn": "^6.2.0",
     "antd": "^3.23.6",
     "axios": "^0.19.0",
+    "babel-eslint": "^9.0.0",
     "d3": "^5.9.7",
     "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",
-    "gapi": "0.0.3",
+    "imagemin": "^6.1.0",
-    "gapi-client": "0.0.3",
     "keymirror": "^0.1.1",
     "rc-tween-one": "^2.4.1",
     "react-d3-graph": "^2.1.0",
@@ -34,7 +38,8 @@
     "react-star-ratings": "^2.3.0",
     "redux-thunk": "^2.3.0",
     "shade-blend-color": "^1.0.0",
-    "storm-react-diagrams": "^5.2.1"
+    "storm-react-diagrams": "^5.2.1",
+    "typescript": "^3.6.4"
   },
   "devDependencies": {
     "@babel/core": "^7.5.0",

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.js

@@ -64,6 +64,7 @@ class App extends React.Component {
     }
 
     componentDidMount() {
+        this.updateFavicon();
         axios.get(
             window.location.origin + "/publisher/public/conf/config.json",
         ).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() {
         const {loading, error} = this.state;
 

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js

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

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js

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

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js

@@ -91,8 +91,8 @@ class NewAppUploadForm extends React.Component {
                 //add release data
                 const release = {
                     description: releaseDescription,
-                    price: (price === undefined) ? 0 : parseInt(price),
+                    price: 0,
-                    isSharedWithAllTenants,
+                    isSharedWithAllTenants: false,
                     metaData: JSON.stringify(this.state.metaData),
                     releaseType: releaseType
                 };
@@ -111,19 +111,19 @@ class NewAppUploadForm extends React.Component {
                 let isFormValid = true; // flag to check if this form is valid
 
                 if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
-                    if(this.lowerOsVersion==null || this.upperOsVersion==null){
+                    if (this.lowerOsVersion == null || this.upperOsVersion == null) {
                         isFormValid = false;
                         this.setState({
                             osVersionsHelperText: 'Please select supported OS versions',
                             osVersionsValidateStatus: 'error',
                         });
-                    }else if(this.lowerOsVersion>=this.upperOsVersion){
+                    } else if (this.lowerOsVersion >= this.upperOsVersion) {
                         isFormValid = false;
                         this.setState({
                             osVersionsHelperText: 'Please select valid range',
                             osVersionsValidateStatus: 'error',
                         });
-                    }else{
+                    } else {
                         release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
                     }
                 }
@@ -152,7 +152,7 @@ class NewAppUploadForm extends React.Component {
                         screenshotHelperText: 'Please select 3 screenshots'
                     });
                 }
-                if(isFormValid) {
+                if (isFormValid) {
                     data.append('icon', icon[0].originFileObj);
                     data.append('screenshot1', screenshots[0].originFileObj);
                     data.append('screenshot2', screenshots[1].originFileObj);
@@ -405,7 +405,12 @@ class NewAppUploadForm extends React.Component {
                                     label="Supported OS Versions"
                                     validateStatus={osVersionsValidateStatus}
                                     help={osVersionsHelperText}>
-                                    {getFieldDecorator('supportedOS')(
+                                    {getFieldDecorator('supportedOS', {
+                                        rules: [{
+                                            required: true
+                                        }],
+                                        initialValue: false
+                                    })(
                                         <div>
                                             <InputGroup>
                                                 <Row gutter={8}>
@@ -428,7 +433,14 @@ class NewAppUploadForm extends React.Component {
                                                     <Col span={11}>
                                                         <Select style={{width: "100%"}}
                                                                 placeholder="Upper version"
+                                                                defaultActiveFirstOption={true}
                                                                 onChange={this.handleUpperOsVersionChange}>
+                                                            {(supportedOsVersions.length > 0) &&(
+                                                                <Option key="all"
+                                                                        value={supportedOsVersions[supportedOsVersions.length-1]["versionName"]}>
+                                                                    All
+                                                                </Option>
+                                                            )}
                                                             {supportedOsVersions.map(version => (
                                                                 <Option key={version.versionName}
                                                                         value={version.versionName}>
@@ -443,49 +455,6 @@ class NewAppUploadForm extends React.Component {
                                     )}
                                 </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">
                                 {getFieldDecorator('meta', {})(
                                     <div>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/App.js

@@ -64,6 +64,7 @@ class App extends React.Component {
     }
 
     componentDidMount() {
+        this.updateFavicon();
         axios.get(
             window.location.origin + "/store/public/conf/config.json",
         ).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) => {
         axios.post(
             window.location.origin + "/store-ui-request-handler/user",

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/DetailedRating.js

@@ -29,46 +29,9 @@ const { Text } = Typography;
 
 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() {
-        const detailedRating = this.state.detailedRating;
+        const {detailedRating} = this.props;
 
         if(detailedRating ==null){
             return null;

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -29,6 +29,7 @@ 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";
 
 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>)}
                     </Row>
                     <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>
         );

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/AddReview.js

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

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/CurrentUsersReview.js

@@ -28,48 +28,9 @@ const {Text, Paragraph} = Typography;
 
 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() {
-        const {data} = this.state;
+        const {uuid, currentUserReviews} = this.props;
-        const {uuid} = this.props;
         return (
             <div>
                 <Text>MY REVIEW</Text>
@@ -78,13 +39,20 @@ class CurrentUsersReview extends React.Component {
                     paddingTop: 8,
                     paddingLeft: 24
                 }}>
-                    {data.length > 0 && (
+                    {currentUserReviews.length > 0 && (
                         <div>
                             <List
-                                dataSource={data}
+                                dataSource={currentUserReviews}
                                 renderItem={item => (
                                     <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>
                                 )}
                             >
@@ -92,7 +60,7 @@ class CurrentUsersReview extends React.Component {
                         </div>
                     )}
 
-                    {data.length === 0 && (
+                    {currentUserReviews.length === 0 && (
                         <div>
                             <Empty
                                 image={Empty.PRESENTED_IMAGE_DEFAULT}
@@ -104,7 +72,9 @@ class CurrentUsersReview extends React.Component {
                                 }
                             >
                                 {/*<Button type="primary">Add review</Button>*/}
-                                <AddReview uuid={uuid}/>
+                                <AddReview
+                                    uuid={uuid}
+                                    onUpdateReview={this.props.onUpdateReview}/>
                             </Empty>
                         </div>
                     )}

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/ReviewContainer.js

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

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/Reviews.js

@@ -107,6 +107,7 @@ class Reviews extends React.Component {
                 data: res,
             });
         });
+        this.props.deleteCallback();
     };
 
     render() {
@@ -119,16 +120,14 @@ class Reviews extends React.Component {
                     pageStart={0}
                     loadMore={this.handleInfiniteOnLoad}
                     hasMore={!loading && hasMore}
-                    useWindow={true}
+                    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/>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/review/singleReview/SingleReview.js

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