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,48 +499,55 @@ class AppDetailsDrawer extends React.Component {
renderItem={release => ( renderItem={release => (
<div className="app-release-cards"> <div className="app-release-cards">
<List.Item> <List.Item>
<Link to={"apps/releases/" + release.uuid}> <Tooltip title="Click to view full details"
<Card className="release-card"> placement="topRight">
<Meta <Link to={"apps/releases/" + release.uuid}>
avatar={ <Card className="release-card">
<div> <Meta
{(release.currentStatus === "PUBLISHED") ? ( avatar={
<Badge <div>
title="Published" {(release.currentStatus === "PUBLISHED") ? (
style={{ <Badge
backgroundColor: '#52c41a', title="Published"
borderRadius: "50%", count={
color: "white" <Tooltip
}} title="Published">
count={ <Icon
<Icon style={{
type="check-circle"/> backgroundColor: '#52c41a',
}> borderRadius: "50%",
color: "white"
}}
type="check-circle"/>
</Tooltip>
}>
<Avatar size="large" shape="square"
src={release.iconPath}/>
</Badge>
) : (
<Avatar size="large" shape="square" <Avatar size="large" shape="square"
src={release.iconPath}/> src={release.iconPath}/>
</Badge> )}
) : ( </div>
<Avatar size="large" shape="square" }
src={release.iconPath}/> title={release.version}
)} description={
</div> <div style={{
} fontSize: "0.7em"
title={release.version} }} className="description-view">
description={ <IconText type="check"
<div style={{ text={release.currentStatus}/>
fontSize: "0.7em" <Divider type="vertical"/>
}} className="description-view"> <IconText type="upload" text={release.releaseType}/>
<IconText type="check" text={release.currentStatus}/> <Divider type="vertical"/>
<Divider type="vertical"/> <IconText type="star-o"
<IconText type="upload" text={release.releaseType}/> text={release.rating.toFixed(1)}/>
<Divider type="vertical"/> </div>
<IconText type="star-o" }
text={release.rating.toFixed(1)}/> />
</div> </Card>
} </Link>
/> </Tooltip>
</Card>
</Link>
</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={
<Icon <Tooltip
type="check-circle"/> title="Published">
<Icon
style={{
backgroundColor: '#52c41a',
borderRadius: "50%",
color: "white"
}}
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) {
@ -231,7 +225,7 @@ class NewAppUploadForm extends React.Component {
handleUpperOsVersionChange = (upperOsVersion) => { handleUpperOsVersionChange = (upperOsVersion) => {
if (upperOsVersion === "all") { if (upperOsVersion === "all") {
this.upperOsVersion = this.props.supportedOsVersions[this.props.supportedOsVersions.length - 1]["versionName"]; this.upperOsVersion = this.props.supportedOsVersions[this.props.supportedOsVersions.length - 1]["versionName"];
}else{ } else {
this.upperOsVersion = upperOsVersion; this.upperOsVersion = upperOsVersion;
} }
this.setState({ this.setState({
@ -247,7 +241,6 @@ class NewAppUploadForm extends React.Component {
icons, icons,
screenshots, screenshots,
binaryFiles, binaryFiles,
isFree,
previewImage, previewImage,
previewVisible, previewVisible,
binaryFileHelperText, binaryFileHelperText,
@ -310,17 +303,19 @@ class NewAppUploadForm extends React.Component {
required: true, required: true,
message: 'Please select a icon' message: 'Please select a icon'
})( })(
<Upload <div>
name="logo" <Upload
listType="picture-card" name="logo"
onChange={this.handleIconChange} listType="picture-card"
beforeUpload={() => false} onChange={this.handleIconChange}
onPreview={this.handlePreview}> beforeUpload={() => false}
{icons.length === 1 ? null : uploadButton} onPreview={this.handlePreview}>
</Upload>, {icons.length === 1 ? null : uploadButton}
</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,14 +326,17 @@ class NewAppUploadForm extends React.Component {
required: true, required: true,
message: 'Please select a icon' message: 'Please select a icon'
})( })(
<Upload <div>
name="screenshots" <Upload
listType="picture-card" name="screenshots"
onChange={this.handleScreenshotChange} listType="picture-card"
beforeUpload={() => false} onChange={this.handleScreenshotChange}
onPreview={this.handlePreview}> beforeUpload={() => false}
{screenshots.length >= 3 ? null : uploadButton} onPreview={this.handlePreview}>
</Upload>, {screenshots.length >= 3 ? null : uploadButton}
</Upload>
<Text>Required 3 screenshots, Recommended min. 320px max. 3840px</Text>
</div>
)} )}
</Form.Item> </Form.Item>

Loading…
Cancel
Save