From 9059bc3aa4abfe7fee136aa6c208976a184b472b Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Tue, 9 Jul 2019 00:02:02 +0530 Subject: [PATCH] Fix UI issues in APPM --- .../react-app/package.json | 48 ++++----- .../AppDetailsDrawer/AppDetailsDrawer.css | 7 ++ .../AppDetailsDrawer.js | 100 ++++++++++++------ .../src/components/apps/list-apps/Filters.js | 12 ++- .../src/components/apps/list-apps/ListApps.js | 4 +- .../apps/list-apps/appsTable/AppsTable.css | 3 + .../list-apps/{ => appsTable}/AppsTable.js | 4 +- .../src/pages/dashboard/Dashboard.js | 1 - 8 files changed, 117 insertions(+), 62 deletions(-) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/{ => AppDetailsDrawer}/AppDetailsDrawer.js (90%) create mode 100644 components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css rename components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/{ => appsTable}/AppsTable.js (97%) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json index 2a32749daf..62810cf4b1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json @@ -10,40 +10,38 @@ }, "license": "Apache License 2.0", "dependencies": { - "acorn": "^6.1.1", - "antd": "^3.15.0", + "acorn": "^6.2.0", + "antd": "^3.20.1", "axios": "^0.19.0", - "d3": "^5.9.2", + "d3": "^5.9.7", "dagre": "^0.8.4", "fetch": "^1.1.0", "keymirror": "^0.1.1", "rc-tween-one": "^2.4.1", - "react": "^16.8.4", - "react-d3-graph": "^2.0.2", - "react-dom": "^16.8.4", + "react-d3-graph": "^2.1.0", "react-highlight-words": "^0.16.0", "react-html-parser": "^2.0.2", "react-infinite-scroller": "^1.2.4", "react-quill": "^1.3.3", "react-router": "latest", - "react-router-config": "^5.0.0", - "react-router-dom": "latest", + "react-router-config": "^5.0.1", + "react-router-dom": "^5.0.1", "react-scripts": "2.1.8", "react-star-ratings": "^2.3.0", "redux-thunk": "^2.3.0", "storm-react-diagrams": "^5.2.1" }, "devDependencies": { - "@babel/core": "^7.0.0", - "@babel/plugin-proposal-class-properties": "^7.0.0", - "@babel/preset-env": "^7.0.0", + "@babel/core": "^7.5.0", + "@babel/plugin-proposal-class-properties": "^7.5.0", + "@babel/preset-env": "^7.5.0", "@babel/preset-react": "^7.0.0", - "@babel/register": "^7.0.0", - "babel-loader": "^8.0.0", - "body-parser": "^1.18.3", + "@babel/register": "^7.4.4", + "babel-loader": "^8.0.6", + "body-parser": "^1.19.0", "chai": "^4.1.2", "css-loader": "^0.28.11", - "express": "^4.16.4", + "express": "^4.17.1", "express-pino-logger": "^4.0.0", "file-loader": "^2.0.0", "html-loader": "^0.5.5", @@ -56,22 +54,22 @@ "mocha": "^5.2.0", "mock-local-storage": "^1.0.5", "node-env-run": "^3.0.2", - "node-sass": "^4.11.0", - "nodemon": "^1.18.9", + "node-sass": "^4.12.0", + "nodemon": "^1.19.1", "npm-run-all": "^4.1.5", - "pino-colada": "^1.4.4", + "pino-colada": "^1.4.5", "postcss-loader": "^3.0.0", - "react": "^15.6.2", - "react-dom": "^15.6.2", - "react-intl": "^2.4.0", - "react-redux": "^7.0.2", + "react": "^16.8.6", + "react-dom": "^16.8.6", + "react-intl": "^2.9.0", + "react-redux": "^7.1.0", "redux": "^4.0.1", "sass-loader": "^6.0.7", "style-loader": "^0.18.2", "url-loader": "^1.1.2", - "webpack": "^4.27.1", - "webpack-cli": "^3.1.2", - "webpack-dev-server": "^3.1.10" + "webpack": "^4.35.2", + "webpack-cli": "^3.3.5", + "webpack-dev-server": "^3.7.2" }, "scripts": { "start": "webpack-dev-server --mode development --open", diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css new file mode 100644 index 0000000000..14a9e5d968 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.css @@ -0,0 +1,7 @@ +.release-card{ + margin-top: 16px; +} + +.release-card:hover { + background-color: rgba(15, 188, 249,0.1); +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js similarity index 90% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js index 9ecb5a8370..64bbaca6b1 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer/AppDetailsDrawer.js @@ -1,17 +1,40 @@ import React from 'react'; -import {Drawer, Select, Col, Typography, Divider, Tag, notification, List, Button, Spin, message, Icon} from 'antd'; -import "../../../App.css"; -import DetailedRating from "../detailed-rating/DetailedRating"; +import { + Drawer, + Select, + Avatar, + Typography, + Divider, + Tag, + notification, + List, + Button, + Spin, + message, + Icon, + Card +} from 'antd'; + +const {Meta} = Card; +import "../../../../App.css"; +import DetailedRating from "../../detailed-rating/DetailedRating"; import {Link} from "react-router-dom"; import axios from "axios"; -import config from "../../../../public/conf/config.json"; +import config from "../../../../../public/conf/config.json"; import ReactQuill from "react-quill"; import ReactHtmlParser, {processNodes, convertNodeToElement, htmlparser2} from 'react-html-parser'; - +import "./AppDetailsDrawer.css"; const {Text, Title} = Typography; const {Option} = Select; +const IconText = ({type, text}) => ( + + + {text} + +); + const modules = { toolbar: [ ['bold', 'italic', 'underline', 'strike', 'blockquote'], @@ -389,7 +412,46 @@ class AppDetailsDrawer extends React.Component { /> {name} + + + Releases + {/*display add new release only if app type is enterprise*/} + {(app.type === "ENTERPRISE") && ( + )} +
+ ( + + + + + } + title={release.version} + description={ +
+ + + + + +
+ } + /> + + + + )} + /> + + Description {!isDescriptionEditEnabled && ( { categories.map(category => { return ( - + {category} ); @@ -508,7 +570,7 @@ class AppDetailsDrawer extends React.Component { { tags.map(tag => { return ( - + {tag} ); @@ -516,30 +578,6 @@ class AppDetailsDrawer extends React.Component { } )} - - Releases - {/*display add new release only if app type is enterprise*/} - {(app.type === "ENTERPRISE") && ( - )} -
- ( - - {release.version}} - description={ -
- Status : {release.currentStatus} Release Type {release.releaseType} -
- } - /> - - )} - /> diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js index aaa760844a..43b1d36274 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/Filters.js @@ -26,6 +26,10 @@ class FiltersForm extends React.Component { } } + if(values.hasOwnProperty("deviceType") && values.deviceType==="all"){ + delete values["deviceType"]; + } + this.props.setFilters(values); }); }; @@ -176,8 +180,8 @@ class FiltersForm extends React.Component { - - {getFieldDecorator('deviceTypes', { + + {getFieldDecorator('deviceType', { rules: [{ required: false, message: 'Please select device types' @@ -197,6 +201,10 @@ class FiltersForm extends React.Component { ) }) } + )} 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 ea60b48481..23f6196157 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 @@ -2,9 +2,9 @@ import React from "react"; import {Avatar, Card, Col, Row, Table, Typography, Input, Divider, Checkbox, Select, Button} from "antd"; import {connect} from "react-redux"; import {getApps} from "../../../js/actions"; -import AppsTable from "./AppsTable"; +import AppsTable from "./appsTable/AppsTable"; import Filters from "./Filters"; -import AppDetailsDrawer from "./AppDetailsDrawer"; +import AppDetailsDrawer from "./AppDetailsDrawer/AppDetailsDrawer"; const {Option} = Select; const {Title, Text} = Typography; diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css new file mode 100644 index 0000000000..9836bf4fb5 --- /dev/null +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.css @@ -0,0 +1,3 @@ +.app-row{ + cursor: pointer; +} \ No newline at end of file diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js similarity index 97% rename from components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js rename to components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js index 9a8441802c..df1182da04 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/appsTable/AppsTable.js @@ -1,7 +1,8 @@ import React from "react"; import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd"; import axios from "axios"; -import config from "../../../../public/conf/config.json"; +import config from "../../../../../public/conf/config.json"; +import "./AppsTable.css"; const columns = [ { @@ -167,6 +168,7 @@ class AppsTable extends React.Component { columns={columns} pagination={this.state.pagination} onChange={this.handleTableChange} + rowClassName="app-row" onRow={(record, rowIndex) => { return { onClick: event => { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js index c0018e4fee..85a7fa6c08 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js @@ -58,7 +58,6 @@ class Dashboard extends React.Component { ))} -