From 6786ed0fab91ef72c0c725524d0c987afcfaa3c5 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Wed, 2 Oct 2019 12:52:03 +0530 Subject: [PATCH] Add UI Improvements to APPM UI The following changes are with this commit - Add metadata to Add new app & edit app forms in Publisher - Display metadata in both publisher and store views - Fix typo in lifecycle component - Update table when changing the name & categories in apps table in publisher --- .../AppDetailsDrawer/AppDetailsDrawer.js | 2 + .../src/components/apps/list-apps/ListApps.js | 22 +-- .../apps/list-apps/appsTable/AppsTable.js | 76 +++++++--- .../components/apps/release/ReleaseView.js | 23 ++- .../apps/release/edit-release/EditRelease.js | 81 +++++++++- .../apps/release/lifeCycle/LifeCycle.js | 2 +- .../src/components/new-app/AddNewAppForm.js | 2 +- .../new-app/subForms/NewAppDetailsForm.js | 16 -- .../new-app/subForms/NewAppUploadForm.js | 75 +++++++++- .../src/pages/dashboard/Dashboard.js | 141 ++++++++++-------- .../pages/dashboard/apps/release/Release.js | 40 +++-- .../components/apps/release/ReleaseView.js | 23 +++ 12 files changed, 360 insertions(+), 143 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js index eb047468f1..1a1b9a2611 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js @@ -200,6 +200,7 @@ class AppDetailsDrawer extends React.Component { window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + id, data ).then(res => { + this.props.onUpdateApp("name", name); if (res.status === 200) { notification["success"]({ message: 'Saved!', @@ -282,6 +283,7 @@ class AppDetailsDrawer extends React.Component { data ).then(res => { if (res.status === 200) { + this.props.onUpdateApp("categories", temporaryCategories); notification["success"]({ message: 'Saved!', description: 'App categories updated successfully!' diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js index 309863a976..803d4bbeb0 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/ListApps.js @@ -29,27 +29,10 @@ class ListApps extends React.Component { constructor(props) { super(props); this.state = { - isDrawerVisible: false, - selectedApp: null, filters: {} } } - //handler to show app drawer - showDrawer = (app) => { - this.setState({ - isDrawerVisible: true, - selectedApp: app - }); - }; - - // handler to close the app drawer - closeDrawer = () => { - this.setState({ - isDrawerVisible: false - }) - }; - setFilters = (filters) => { this.setState({ filters @@ -71,7 +54,6 @@ class ListApps extends React.Component { render() { const {isDrawerVisible, filters} = this.state; return ( - @@ -91,9 +73,7 @@ class ListApps extends React.Component { - - + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js index c589ab7de6..8fe5b00cce 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js @@ -17,11 +17,12 @@ */ import React from "react"; -import {Avatar, Table, Tag, Icon, message, notification} from "antd"; +import {Avatar, Table, Tag, Icon, message, notification, Col} from "antd"; import axios from "axios"; import pSBC from 'shade-blend-color'; import "./AppsTable.css"; import {withConfigContext} from "../../../../context/ConfigContext"; +import AppDetailsDrawer from "../AppDetailsDrawer/AppDetailsDrawer"; let config = null; @@ -95,8 +96,11 @@ const columns = [ color = defaultPlatformIcons[platform].color; theme = defaultPlatformIcons[platform].theme; } - return () + return ( + + + + ); } }, { @@ -115,7 +119,10 @@ class AppsTable extends React.Component { this.state = { pagination: {}, apps: [], - filters: {} + filters: {}, + isDrawerVisible: false, + selectedApp: null, + selectedAppIndex: -1 }; config = this.props.context; } @@ -139,6 +146,22 @@ class AppsTable extends React.Component { } } + //handler to show app drawer + showDrawer = (app, appIndex) => { + this.setState({ + isDrawerVisible: true, + selectedApp: app, + selectedAppIndex: appIndex + }); + }; + + // handler to close the app drawer + closeDrawer = () => { + this.setState({ + isDrawerVisible: false + }) + }; + handleTableChange = (pagination, filters, sorter) => { const pager = {...this.state.pagination}; pager.current = pagination.current; @@ -189,9 +212,7 @@ class AppsTable extends React.Component { apps: apps, pagination, }); - } - }).catch((error) => { if (error.hasOwnProperty("response") && error.response.status === 401) { message.error('You are not logged in'); @@ -209,24 +230,37 @@ class AppsTable extends React.Component { }); }; + onUpdateApp = (key, value) => { + const apps = [...this.state.apps]; + apps[this.state.selectedAppIndex][key]= value; + this.setState({ + apps + }); + }; + render() { + const {isDrawerVisible} = this.state; return (
- record.id} - dataSource={this.state.apps} - columns={columns} - pagination={this.state.pagination} - onChange={this.handleTableChange} - rowClassName="app-row" - onRow={(record, rowIndex) => { - return { - onClick: event => { - this.props.showDrawer(record); - }, - }; - }} - /> +
record.id} + dataSource={this.state.apps} + columns={columns} + pagination={this.state.pagination} + onChange={this.handleTableChange} + rowClassName="app-row" + onRow={(record, rowIndex) => { + return { + onClick: event => { + this.showDrawer(record, rowIndex); + }, + }; + }}/> + ); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js index e1bea7700c..efc71c8272 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js @@ -17,7 +17,7 @@ */ import React from "react"; -import {Divider, Row, Col, Typography, Button, Drawer, Icon, Tooltip} from "antd"; +import {Divider, Row, Col, Typography, Button, Drawer, Icon, Tooltip, Empty} from "antd"; import StarRatings from "react-star-ratings"; import Reviews from "./review/Reviews"; import "../../../App.css"; @@ -50,6 +50,12 @@ class ReleaseView extends React.Component { color = defaultPlatformIcons[platform].color; theme = defaultPlatformIcons[platform].theme; } + let metaData = []; + try{ + metaData = JSON.parse(release.metaData); + }catch (e) { + + } return (
@@ -121,6 +127,21 @@ class ReleaseView extends React.Component { {release.description} + META DATA + + { + metaData.map((data, index)=>{ + return ( +
+ {data.key}
+ {data.value} + + ) + }) + } + {(metaData.length===0) && (No meta data available.)} + + REVIEWS diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js index cd5708c845..d84ec2145e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js @@ -17,11 +17,12 @@ */ import React from "react"; -import {Modal, Button, Icon, notification, Spin, Tooltip, Upload, Input, Switch, Form, Divider} from 'antd'; +import {Modal, Button, Icon, notification, Spin, Tooltip, Upload, Input, Switch, Form, Divider, Row, Col} from 'antd'; import axios from "axios"; import {withConfigContext} from "../../../../context/ConfigContext"; const {TextArea} = Input; +const InputGroup = Input.Group; const formItemLayout = { labelCol: { @@ -45,6 +46,7 @@ class EditReleaseModal extends React.Component { screenshots: [], loading: false, binaryFiles: [], + metaData: [], formConfig: { specificElements: {} } @@ -118,6 +120,13 @@ class EditReleaseModal extends React.Component { const {release} = this.props; const {formConfig} = this.state; const {specificElements} = formConfig; + let metaData = []; + + try{ + metaData =JSON.parse(release.metaData); + }catch (e) { + + } this.props.form.setFields({ releaseType: { @@ -160,6 +169,7 @@ class EditReleaseModal extends React.Component { this.setState({ visible: true, + metaData }); }; @@ -212,7 +222,7 @@ class EditReleaseModal extends React.Component { description: releaseDescription, price: (price === undefined) ? 0 : parseInt(price), isSharedWithAllTenants, - metaData: "string", + metaData: JSON.stringify(this.state.metaData), releaseType: releaseType, supportedOsVersions: "4.0-10.0" }; @@ -298,9 +308,14 @@ class EditReleaseModal extends React.Component { }); }; + addNewMetaData = () => { + this.setState({ + metaData: this.state.metaData.concat({'key': '', 'value': ''}) + }) + }; render() { - const {formConfig, icons, screenshots, loading, binaryFiles} = this.state; + const {formConfig, icons, screenshots, loading, binaryFiles, metaData} = this.state; const {getFieldDecorator} = this.props.form; const {isAppUpdatable} = this.props; @@ -476,6 +491,66 @@ class EditReleaseModal extends React.Component { /> )} + + + {getFieldDecorator('meta', { + rules: [{ + required: true, + message: 'Please fill empty fields' + }], + initialValue: false + })( +
+ { + metaData.map((data, index) => { + return ( + + +
+ { + metaData[index]['key'] = e.currentTarget.value; + this.setState({ + metaData + }) + }}/> + + + { + metaData[index].value = e.currentTarget.value; + this.setState({ + metaData + }); + }}/> + + + + + )} + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js index 566696b624..eac2b0ff98 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/LifeCycle.js @@ -200,7 +200,7 @@ class LifeCycle extends React.Component { visible={this.state.isReasonModalVisible} onOk={this.addLifeCycle} onCancel={this.closeReasonModal} - okText="confirm" + okText="Confirm" > You are going to change the lifecycle state from,
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js index 24641f7839..659729c1e8 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js @@ -69,9 +69,9 @@ class AddNewAppFormComponent extends React.Component { isError: false }); const {application} = this.state; - const {price} = application; const {data, release} = releaseData; const {formConfig} = this.props; + const {price} = release; application.subMethod = (price === 0) ? "FREE" : "PAID"; //add release wrapper diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js index 6f9ac641ab..94c37634e6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js @@ -320,22 +320,6 @@ class NewAppDetailsForm extends React.Component { )} - {/* //todo implement add meta data */} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/**/} - {/*+ { + metaData[index]['key'] = e.currentTarget.value; + this.setState({ + metaData + }) + }}/> + + + { + metaData[index].value = e.currentTarget.value; + this.setState({ + metaData + }); + }}/> + + + + + )} + logo} + title={ + + logo + + } placement="left" closable={false} onClose={this.onClose} visible={this.state.visible} getContainer={false} - style={{position: 'absolute'}} - > + style={{position: 'absolute'}}> + style={{lineHeight: '64px', width: 231}}> Apps - - Add New App - - } - > - Public - APP - Enterprise - APP - Web - Clip - Custom - App + Add New App + + }> + + Public APP + + + Enterprise APP + + + Web Clip + + + Custom App + - Manage + + + Manage + + + style={{lineHeight: '63px', position: 'fixed', marginLeft: '80%'}}> - - - } - > + + + }> @@ -191,4 +212,4 @@ class Dashboard extends React.Component { } } -export default withConfigContext(Dashboard); +export default withConfigContext(Dashboard); \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js index ed0d2743d3..27439bd6da 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/apps/release/Release.js @@ -18,7 +18,7 @@ import React from "react"; import '../../../../App.css'; -import {Typography, Row, Col, message, Card, notification} from "antd"; +import {Typography, Row, Col, message, Card, notification, Skeleton} from "antd"; import axios from 'axios'; import ReleaseView from "../../../../components/apps/release/ReleaseView"; import LifeCycle from "../../../../components/apps/release/lifeCycle/LifeCycle"; @@ -132,9 +132,9 @@ class Release extends React.Component { }; render() { - const {app, release, currentLifecycleStatus, lifecycle} = this.state; + const {app, release, currentLifecycleStatus, lifecycle, loading} = this.state; - if (release == null) { + if (release == null && loading === false) { return (
No Apps Found @@ -149,23 +149,31 @@ class Release extends React.Component {
- + + {(release !== null) && ( + ) + } + - + + {(release !== null) && ( + ) + } + diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js index d2b45a191c..5409e3f853 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js @@ -98,6 +98,14 @@ class ReleaseView extends React.Component { render() { const {app,deviceType} = this.props; const release = app.applicationReleases[0]; + + let metaData = []; + try{ + metaData = JSON.parse(release.metaData); + }catch (e) { + + } + return (
+ META DATA + + { + metaData.map((data, index)=>{ + return ( +
+ {data.key}
+ {data.value} + + ) + }) + } + {(metaData.length===0) && (No meta data available.)} + + REVIEWS