Add minor UI fixes to APPM UI

The following changes are with this commit
- Display wrong credentials error in Login form
- Display tags and categories in APPM store release view
feature/appm-store/pbac
Jayasanka Weerasinghe 5 years ago committed by Dharmakeerthi Lasantha
parent a2ceef5e84
commit 85890e9036

@ -30,7 +30,7 @@ import {
Spin, Spin,
message, message,
Icon, Icon,
Card, Badge Card, Badge, Tooltip, Popover
} from 'antd'; } from 'antd';
import DetailedRating from "../../detailed-rating/DetailedRating"; import DetailedRating from "../../detailed-rating/DetailedRating";
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
@ -486,7 +486,6 @@ class AppDetailsDrawer extends React.Component {
<Divider dashed={true}/> <Divider dashed={true}/>
</div> </div>
)} )}
<Text strong={true}>Releases </Text> <Text strong={true}>Releases </Text>
<div className="releases-details"> <div className="releases-details">
<List <List
@ -500,6 +499,8 @@ class AppDetailsDrawer extends React.Component {
renderItem={release => ( renderItem={release => (
<div className="app-release-cards"> <div className="app-release-cards">
<List.Item> <List.Item>
<Tooltip title="Click to view full details"
placement="topRight">
<Link to={"apps/releases/" + release.uuid}> <Link to={"apps/releases/" + release.uuid}>
<Card className="release-card"> <Card className="release-card">
<Meta <Meta
@ -508,14 +509,17 @@ class AppDetailsDrawer extends React.Component {
{(release.currentStatus === "PUBLISHED") ? ( {(release.currentStatus === "PUBLISHED") ? (
<Badge <Badge
title="Published" title="Published"
count={
<Tooltip
title="Published">
<Icon
style={{ style={{
backgroundColor: '#52c41a', backgroundColor: '#52c41a',
borderRadius: "50%", borderRadius: "50%",
color: "white" color: "white"
}} }}
count={
<Icon
type="check-circle"/> type="check-circle"/>
</Tooltip>
}> }>
<Avatar size="large" shape="square" <Avatar size="large" shape="square"
src={release.iconPath}/> src={release.iconPath}/>
@ -531,7 +535,8 @@ class AppDetailsDrawer extends React.Component {
<div style={{ <div style={{
fontSize: "0.7em" fontSize: "0.7em"
}} className="description-view"> }} className="description-view">
<IconText type="check" text={release.currentStatus}/> <IconText type="check"
text={release.currentStatus}/>
<Divider type="vertical"/> <Divider type="vertical"/>
<IconText type="upload" text={release.releaseType}/> <IconText type="upload" text={release.releaseType}/>
<Divider type="vertical"/> <Divider type="vertical"/>
@ -542,6 +547,7 @@ class AppDetailsDrawer extends React.Component {
/> />
</Card> </Card>
</Link> </Link>
</Tooltip>
</List.Item> </List.Item>
</div> </div>
)} )}

@ -17,7 +17,7 @@
*/ */
import React from "react"; import React from "react";
import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert} from "antd"; import {Avatar, Table, Tag, Icon, message, notification, Col, Badge, Alert, Tooltip} from "antd";
import axios from "axios"; import axios from "axios";
import pSBC from 'shade-blend-color'; import pSBC from 'shade-blend-color';
import "./AppsTable.css"; import "./AppsTable.css";
@ -60,8 +60,16 @@ const columns = [
title="Published" title="Published"
style={{backgroundColor: '#52c41a', borderRadius: "50%", color: "white"}} style={{backgroundColor: '#52c41a', borderRadius: "50%", color: "white"}}
count={ count={
<Tooltip
title="Published">
<Icon <Icon
style={{
backgroundColor: '#52c41a',
borderRadius: "50%",
color: "white"
}}
type="check-circle"/> type="check-circle"/>
</Tooltip>
}> }>
<Avatar shape="square" size="large" <Avatar shape="square" size="large"
style={{ style={{

@ -17,10 +17,10 @@
*/ */
import React from "react"; import React from "react";
import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal, Alert} from "antd"; import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, Typography, Modal, Alert} from "antd";
import "@babel/polyfill"; import "@babel/polyfill";
import axios from "axios";
import {handleApiError} from "../../../js/Utils"; const {Text} = Typography;
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
@ -196,12 +196,6 @@ class NewAppUploadForm extends React.Component {
}); });
}; };
handlePriceTypeChange = (value) => {
this.setState({
isFree: (value === 'free')
});
};
handlePreviewCancel = () => this.setState({previewVisible: false}); handlePreviewCancel = () => this.setState({previewVisible: false});
handlePreview = async file => { handlePreview = async file => {
if (!file.url && !file.preview) { if (!file.url && !file.preview) {
@ -247,7 +241,6 @@ class NewAppUploadForm extends React.Component {
icons, icons,
screenshots, screenshots,
binaryFiles, binaryFiles,
isFree,
previewImage, previewImage,
previewVisible, previewVisible,
binaryFileHelperText, binaryFileHelperText,
@ -310,6 +303,7 @@ class NewAppUploadForm extends React.Component {
required: true, required: true,
message: 'Please select a icon' message: 'Please select a icon'
})( })(
<div>
<Upload <Upload
name="logo" name="logo"
listType="picture-card" listType="picture-card"
@ -317,10 +311,11 @@ class NewAppUploadForm extends React.Component {
beforeUpload={() => false} beforeUpload={() => false}
onPreview={this.handlePreview}> onPreview={this.handlePreview}>
{icons.length === 1 ? null : uploadButton} {icons.length === 1 ? null : uploadButton}
</Upload>, </Upload>
<Text>Recommended : 240px x 240px</Text>
</div>
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} <Form.Item {...formItemLayout}
label="Screenshots" label="Screenshots"
validateStatus="error" validateStatus="error"
@ -331,6 +326,7 @@ class NewAppUploadForm extends React.Component {
required: true, required: true,
message: 'Please select a icon' message: 'Please select a icon'
})( })(
<div>
<Upload <Upload
name="screenshots" name="screenshots"
listType="picture-card" listType="picture-card"
@ -338,7 +334,9 @@ class NewAppUploadForm extends React.Component {
beforeUpload={() => false} beforeUpload={() => false}
onPreview={this.handlePreview}> onPreview={this.handlePreview}>
{screenshots.length >= 3 ? null : uploadButton} {screenshots.length >= 3 ? null : uploadButton}
</Upload>, </Upload>
<Text>Required 3 screenshots, Recommended min. 320px max. 3840px</Text>
</div>
)} )}
</Form.Item> </Form.Item>

Loading…
Cancel
Save