Fix UI issues in APPM

4.x.x
Jayasanka 5 years ago
parent 4f1796e241
commit 9059bc3aa4

@ -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",

@ -0,0 +1,7 @@
.release-card{
margin-top: 16px;
}
.release-card:hover {
background-color: rgba(15, 188, 249,0.1);
}

@ -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}) => (
<span>
<Icon type={type} style={{marginRight: 8}}/>
{text}
</span>
);
const modules = {
toolbar: [
['bold', 'italic', 'underline', 'strike', 'blockquote'],
@ -389,7 +412,46 @@ class AppDetailsDrawer extends React.Component {
/>
<Title editable={{onChange: this.handleNameSave}} level={2}>{name}</Title>
</div>
<Divider/>
<Text strong={true}>Releases </Text>
{/*display add new release only if app type is enterprise*/}
{(app.type === "ENTERPRISE") && (
<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add
new release</Button></Link>)}
<br/>
<List
grid={{gutter: 16, column: 2}}
dataSource={app.applicationReleases}
renderItem={release => (
<List.Item>
<a href={"apps/releases/" + release.uuid}>
<Card className="release-card">
<Meta
avatar={
<Avatar size="large" shape="square" src={release.iconPath}/>
}
title={release.version}
description={
<div style={{
fontSize: "0.7em"
}}>
<IconText type="check" text={release.currentStatus}/>
<Divider type="vertical"/>
<IconText type="upload" text={release.releaseType}/>
<Divider type="vertical"/>
<IconText type="star-o" text={release.rating.toFixed(1)}/>
</div>
}
/>
</Card>
</a>
</List.Item>
)}
/>
<Divider dashed={true}/>
<Text strong={true}>Description </Text>
{!isDescriptionEditEnabled && (
<Text
@ -463,7 +525,7 @@ class AppDetailsDrawer extends React.Component {
<span>{
categories.map(category => {
return (
<Tag color="blue" key={category} style={{paddingBottom: 5}}>
<Tag color="#108ee9" key={category} style={{marginBottom: 5}}>
{category}
</Tag>
);
@ -508,7 +570,7 @@ class AppDetailsDrawer extends React.Component {
<span>{
tags.map(tag => {
return (
<Tag color="gold" key={tag} style={{paddingBottom: 5}}>
<Tag color="#34495e" key={tag} style={{marginBottom: 5}}>
{tag}
</Tag>
);
@ -516,30 +578,6 @@ class AppDetailsDrawer extends React.Component {
}</span>
)}
<Divider dashed={true}/>
<Text strong={true}>Releases </Text>
{/*display add new release only if app type is enterprise*/}
{(app.type === "ENTERPRISE") && (
<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add
new release</Button></Link>)}
<br/>
<List
itemLayout="horizontal"
dataSource={app.applicationReleases}
renderItem={release => (
<List.Item>
<List.Item.Meta
title={<a href={"apps/releases/" + release.uuid}>{release.version}</a>}
description={
<div>
Status : <Tag>{release.currentStatus}</Tag> Release Type <Tag
color="green">{release.releaseType}</Tag>
</div>
}
/>
</List.Item>
)}
/>
<Divider dashed={true}/>
<DetailedRating type="app" uuid={app.applicationReleases[0].uuid}/>

@ -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 {
</Form.Item>
<Form.Item label="Device Types">
{getFieldDecorator('deviceTypes', {
<Form.Item label="Device Type">
{getFieldDecorator('deviceType', {
rules: [{
required: false,
message: 'Please select device types'
@ -197,6 +201,10 @@ class FiltersForm extends React.Component {
)
})
}
<Option
key="all">
all
</Option>
</Select>
)}
</Form.Item>

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

@ -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 => {

@ -58,7 +58,6 @@ class Dashboard extends React.Component {
))}
</Switch>
</Content>
<Footer style={{textAlign: 'center'}}>
©2019 entgra.io

Loading…
Cancel
Save