Add ui improvements to APPM

- Add breadcrumbs
- Fix tag spacing
- Add price type selection in New Release form
- Change edit button disable when release isn't in an editable state
- Add autofill functionality to edit release
- Add dynamic device types in add new app form
feature/appm-store/pbac
Jayasanka 5 years ago
parent 02e3bca9ed
commit 0f4eaa575c

@ -464,7 +464,7 @@ class AppDetailsDrawer extends React.Component {
dataSource={app.applicationReleases}
renderItem={release => (
<List.Item>
<a href={"apps/releases/" + release.uuid}>
<Link to={"apps/releases/" + release.uuid}>
<Card className="release-card">
<Meta
avatar={
@ -484,7 +484,7 @@ class AppDetailsDrawer extends React.Component {
}
/>
</Card>
</a>
</Link>
</List.Item>
)}
/>

@ -53,7 +53,9 @@ const columns = [
<span>
{categories.map(category => {
return (
<Tag color={pSBC(0.30, config.theme.primaryColor)} key={category}>
<Tag
style={{marginBottom: 8}}
color={pSBC(0.30, config.theme.primaryColor)} key={category}>
{category}
</Tag>
);

@ -1,5 +1,5 @@
import React from "react";
import {Divider, Row, Col, Typography, Button, Drawer, Icon} from "antd";
import {Divider, Row, Col, Typography, Button, Drawer, Icon, Tooltip} from "antd";
import StarRatings from "react-star-ratings";
import Reviews from "./review/Reviews";
import "../../../App.css";
@ -14,10 +14,15 @@ class ReleaseView extends React.Component {
const config = this.props.context;
const app = this.props.app;
const release = (app !== null) ? app.applicationReleases[0] : null;
if (release == null) {
const {lifecycle, currentLifecycleStatus} = this.props;
if (release == null || lifecycle == null) {
return null;
}
const {isAppUpdatable, isAppInstallable} = lifecycle[currentLifecycleStatus];
console.log(isAppInstallable, isAppUpdatable);
const platform = app.deviceType;
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default.icon;
@ -57,21 +62,30 @@ class ReleaseView extends React.Component {
<Divider type="vertical"/>
<Text>Version : {release.version}</Text><br/>
<EditRelease uuid={release.uuid} type={app.type}/>
<EditRelease
isAppUpdatable={isAppUpdatable}
type={app.type}
release={release}
updateRelease={this.props.updateRelease}
/>
</Col>
<Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
<div>
<Button
style={{float: "right"}}
htmlType="button"
type="primary"
icon="shop"
disabled={this.props.currentLifecycleStatus !== "PUBLISHED"}
onClick={() => {
window.open(window.location.origin+ "/store/" + app.deviceType + "/apps/" + release.uuid)
}}>
Open in store
</Button>
<Tooltip
title={isAppInstallable ? "Open this app in store" : "This release isn't in an installable state"}>
<Button
style={{float: "right"}}
htmlType="button"
type="primary"
icon="shop"
disabled={!isAppInstallable}
onClick={() => {
window.open(window.location.origin + "/store/" + app.deviceType + "/apps/" + release.uuid)
}}>
Open in store
</Button>
</Tooltip>
</div>
</Col>
</Row>

@ -1,5 +1,5 @@
import React from "react";
import {Modal, Button, Icon, notification, Spin, Row, Col, Card, Upload, Input, Switch, Form} from 'antd';
import {Modal, Button, Icon, notification, Spin, Tooltip, Upload, Input, Switch, Form, Divider} from 'antd';
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
@ -83,6 +83,49 @@ class EditReleaseModal extends React.Component {
showModal = () => {
const {release} = this.props;
const {formConfig} = this.state;
const {specificElements} = formConfig;
this.props.form.setFields({
releaseType: {
value: release.releaseType
},
releaseDescription: {
value: release.description
},
price:{
value: release.price
},
isSharedWithAllTenants:{
value: release.isSharedWithAllTenants
}
});
if (specificElements.hasOwnProperty("version")) {
this.props.form.setFields({
version: {
value: release.version
}
});
}
if (specificElements.hasOwnProperty("url")) {
this.props.form.setFields({
url: {
value: release.url
}
});
}
if (specificElements.hasOwnProperty("packageName")) {
this.props.form.setFields({
packageName: {
value: release.packageName
}
});
}
this.setState({
visible: true,
});
@ -115,7 +158,7 @@ class EditReleaseModal extends React.Component {
handleSubmit = e => {
e.preventDefault();
const {uuid} = this.props;
const {uuid} = this.props.release;
const config = this.props.context;
const {formConfig} = this.state;
@ -162,15 +205,15 @@ class EditReleaseModal extends React.Component {
data.append('icon', icons[0].originFileObj);
}
if(screenshots.length>0){
if (screenshots.length > 0) {
data.append('screenshot1', screenshots[0].originFileObj);
}
if(screenshots.length>1){
if (screenshots.length > 1) {
data.append('screenshot2', screenshots[1].originFileObj);
}
if(screenshots.length>2){
if (screenshots.length > 2) {
data.append('screenshot3', screenshots[2].originFileObj);
}
@ -181,7 +224,7 @@ class EditReleaseModal extends React.Component {
data.append("applicationRelease", blob);
const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint + "/" + uuid;
const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint + "/" + uuid;
axios.put(
url,
@ -199,14 +242,12 @@ class EditReleaseModal extends React.Component {
"Saved!",
});
const uuid = res.data.data.uuid;
// this.props.history.push('/publisher/apps/releases/' + uuid);
window.location.reload();
}
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin+ '/publisher/login';
window.location.href = window.location.origin + '/publisher/login';
} else {
notification["error"]({
message: "Something went wrong!",
@ -227,15 +268,21 @@ class EditReleaseModal extends React.Component {
render() {
const {formConfig, icons, screenshots, loading, binaryFiles} = this.state;
const {getFieldDecorator} = this.props.form;
const {isAppUpdatable} = this.props;
return (
<div>
<Button size="small" type="primary" onClick={this.showModal}>
<Icon type="edit"/> Edit
</Button>
<Tooltip title={isAppUpdatable ? "Edit this release" : "This release isn't in an editable state"}>
<Button
disabled={!isAppUpdatable}
size="small" type="primary" onClick={this.showModal}>
<Icon type="edit"/> Edit
</Button>
</Tooltip>
<Modal
title="Edit release"
visible={this.state.visible}
onOk={this.handleOk}
footer={null}
onCancel={this.handleCancel}
>
<div>
@ -340,14 +387,11 @@ class EditReleaseModal extends React.Component {
beforeUpload={() => false}
multiple
>
{screenshots.length < 3 && (
<Button>
<Icon type="upload"/> Click to upload
</Button>
)}
</Upload>,
)}
</Form.Item>
@ -399,11 +443,18 @@ class EditReleaseModal extends React.Component {
)}
</Form.Item>
<Form.Item style={{float: "right"}}>
<Divider/>
<Form.Item style={{float: "right", marginLeft: 8}}>
<Button type="primary" htmlType="submit">
Submit
Update
</Button>
</Form.Item>
<Form.Item style={{float: "right"}}>
<Button htmlType="button" onClick={this.handleCancel}>
Back
</Button>
</Form.Item>
<br/>
</Form>
</Spin>
</div>

@ -34,17 +34,12 @@ class LifeCycle extends React.Component {
this.state = {
currentStatus: props.currentStatus,
selectedStatus: null,
lifecycle: [],
reasonText: '',
isReasonModalVisible: false,
isConfirmButtonLoading: false
}
}
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.currentStatus !== this.props.currentStatus || prevProps.uuid !== this.props.uuid) {
this.setState({
@ -53,33 +48,6 @@ class LifeCycle extends React.Component {
}
}
fetchData = () => {
const config = this.props.context;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
).then(res => {
if (res.status === 200) {
const lifecycle = res.data.data;
this.setState({
lifecycle: lifecycle
})
}
}).catch(function (error) {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin+ '/publisher/login';
} else {
notification["error"]({
message: "There was a problem",
duration: 0,
description:
"Error occurred while trying to load lifecycle configuration.",
});
}
});
};
handleChange = (value) => {
this.setState({reasonText: value})
};
@ -114,7 +82,7 @@ class LifeCycle extends React.Component {
});
axios.post(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/life-cycle/" + uuid,
data
).then(res => {
if (res.status === 201) {
@ -135,7 +103,7 @@ class LifeCycle extends React.Component {
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin+ '/publisher/login';
window.location.href = window.location.origin + '/publisher/login';
} else {
notification["error"]({
message: "Error",
@ -153,12 +121,15 @@ class LifeCycle extends React.Component {
render() {
const {currentStatus, lifecycle, selectedStatus} = this.state;
const {currentStatus, selectedStatus} = this.state;
const {lifecycle} = this.props;
const selectedValue = selectedStatus == null ? [] : selectedStatus;
let proceedingStates = [];
if((lifecycle.hasOwnProperty(currentStatus)) && lifecycle[currentStatus].hasOwnProperty("proceedingStates")){
if (lifecycle !== null && (lifecycle.hasOwnProperty(currentStatus)) && lifecycle[currentStatus].hasOwnProperty("proceedingStates")) {
proceedingStates = lifecycle[currentStatus].proceedingStates;
}
return (
<div>
<Title level={4}>Manage Lifecycle</Title>
@ -169,7 +140,7 @@ class LifeCycle extends React.Component {
state to another. <br/>Note: Change State To displays only the next states allowed from the
current state
</Paragraph>
<LifeCycleDetailsModal lifecycle={lifecycle}/>
{lifecycle !== null && (<LifeCycleDetailsModal lifecycle={lifecycle}/>)}
<Divider dashed={true}/>
<Text strong={true}>Current State: </Text> <Tag color="blue">{currentStatus}</Tag><br/><br/>
<Text>Change State to: </Text>
@ -182,14 +153,14 @@ class LifeCycle extends React.Component {
showSearch={true}
>
{proceedingStates.map(lifecycleState => {
return (
<Option
key={lifecycleState}
value={lifecycleState}>
{lifecycleState}
</Option>
)
})
return (
<Option
key={lifecycleState}
value={lifecycleState}>
{lifecycleState}
</Option>
)
})
}
</Select>
<Button

@ -121,6 +121,7 @@ class ManageCategories extends React.Component {
const tagElem = (
<Tag
color={pSBC(0.30, config.theme.primaryColor)}
style={{marginTop:8}}
>
{categoryName}
<Divider type="vertical"/>
@ -160,9 +161,9 @@ class ManageCategories extends React.Component {
};
renderTempElement = (category) => {
const config = this.props.context;
const tagElem = (
<Tag
style={{marginTop:8}}
closable
onClose={e => {
e.preventDefault();
@ -428,7 +429,7 @@ class ManageCategories extends React.Component {
</div>
}
<Divider dashed="true"/>
<div style={{marginTop: 16}}>
<div style={{marginTop: 8}}>
<TweenOneGroup
enter={{
scale: 0.8,

@ -124,6 +124,7 @@ class ManageTags extends React.Component {
const tagElem = (
<Tag
color="#34495e"
style={{marginTop:8}}
>
{tagName}
<Divider type="vertical"/>
@ -166,6 +167,7 @@ class ManageTags extends React.Component {
const {tempElements} = this.state;
const tagElem = (
<Tag
style={{marginTop:8}}
closable
onClose={e => {
e.preventDefault();
@ -429,7 +431,7 @@ class ManageTags extends React.Component {
</div>
}
<Divider dashed="true"/>
<div style={{marginTop: 16}}>
<div style={{marginTop: 8}}>
<TweenOneGroup
enter={{
scale: 0.8,

@ -5,12 +5,12 @@ import {withConfigContext} from "../../../context/ConfigContext";
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
xs: {span: 24},
sm: {span: 5},
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 19 },
xs: {span: 24},
sm: {span: 19},
},
};
const {Option} = Select;
@ -22,7 +22,8 @@ class NewAppDetailsForm extends React.Component {
super(props);
this.state = {
categories: [],
tags: []
tags: [],
deviceTypes:[]
}
}
@ -62,12 +63,13 @@ class NewAppDetailsForm extends React.Component {
componentDidMount() {
this.getCategories();
this.getTags();
this.getDeviceTypes();
}
getCategories = () => {
const config = this.props.context;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/categories"
).then(res => {
if (res.status === 200) {
let categories = JSON.parse(res.data.data);
@ -79,7 +81,7 @@ class NewAppDetailsForm extends React.Component {
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin+ '/publisher/login';
window.location.href = window.location.origin + '/publisher/login';
} else {
notification["error"]({
message: "There was a problem",
@ -97,7 +99,7 @@ class NewAppDetailsForm extends React.Component {
getTags = () => {
const config = this.props.context;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/tags"
).then(res => {
if (res.status === 200) {
let tags = JSON.parse(res.data.data);
@ -109,7 +111,7 @@ class NewAppDetailsForm extends React.Component {
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin+ '/publisher/login';
window.location.href = window.location.origin + '/publisher/login';
} else {
notification["error"]({
message: "There was a problem",
@ -124,9 +126,39 @@ class NewAppDetailsForm extends React.Component {
});
};
getDeviceTypes = () => {
const config = this.props.context;
axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + "/device-types"
).then(res => {
if (res.status === 200) {
const deviceTypes = JSON.parse(res.data.data);
this.setState({
deviceTypes,
loading: false,
});
}
}).catch((error) => {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin + '/publisher/login';
} else {
notification["error"]({
message: "There was a problem",
duration: 0,
description:
"Error occurred while trying to load device types.",
});
}
this.setState({
loading: false
});
});
};
render() {
const {formConfig} = this.props;
const {categories, tags} = this.state;
const {categories, tags, deviceTypes} = this.state;
const {getFieldDecorator} = this.props.form;
return (
@ -153,9 +185,22 @@ class NewAppDetailsForm extends React.Component {
}
)(
<Select placeholder="select device type">
<Option key="android">Android</Option>
<Option key="ios">iOS</Option>
<Select
mode="multiple"
style={{width: '100%'}}
placeholder="select device type"
onChange={this.handleCategoryChange}
>
{
deviceTypes.map(deviceType => {
return (
<Option
key={deviceType.name}>
{deviceType.name}
</Option>
)
})
}
</Select>
)}
</Form.Item>
@ -237,19 +282,19 @@ class NewAppDetailsForm extends React.Component {
</Form.Item>
{/* //todo implement add meta data */}
{/*<Form.Item {...formItemLayout} label="Meta Data">*/}
{/*<InputGroup>*/}
{/*<Row gutter={8}>*/}
{/*<Col span={10}>*/}
{/*<Input placeholder="Key"/>*/}
{/*</Col>*/}
{/*<Col span={12}>*/}
{/*<Input placeholder="value"/>*/}
{/*</Col>*/}
{/*<Col span={2}>*/}
{/*<Button type="dashed" shape="circle" icon="plus"/>*/}
{/*</Col>*/}
{/*</Row>*/}
{/*</InputGroup>*/}
{/*<InputGroup>*/}
{/*<Row gutter={8}>*/}
{/*<Col span={10}>*/}
{/*<Input placeholder="Key"/>*/}
{/*</Col>*/}
{/*<Col span={12}>*/}
{/*<Input placeholder="value"/>*/}
{/*</Col>*/}
{/*<Col span={2}>*/}
{/*<Button type="dashed" shape="circle" icon="plus"/>*/}
{/*</Col>*/}
{/*</Row>*/}
{/*</InputGroup>*/}
{/*</Form.Item>*/}
<Form.Item style={{float: "right"}}>
<Button type="primary" htmlType="submit">

@ -97,8 +97,7 @@ class NewAppUploadForm extends React.Component {
handlePriceTypeChange = (value) => {
this.setState({
isFree: (value === 'free')
})
});
};
render() {

@ -13,7 +13,7 @@ import {
Upload,
Divider,
notification,
Spin
Spin, InputNumber
} from "antd";
import axios from "axios";
import {withRouter} from 'react-router-dom'
@ -43,7 +43,8 @@ class AddNewReleaseFormComponent extends React.Component {
icons: [],
screenshots: [],
loading: false,
binaryFiles: []
binaryFiles: [],
isFree: true
};
}
@ -143,8 +144,14 @@ class AddNewReleaseFormComponent extends React.Component {
handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
handlePriceTypeChange = (value) => {
this.setState({
isFree: (value === 'free')
});
};
render() {
const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state;
const {isFree, icons, screenshots, loading, binaryFiles} = this.state;
const {getFieldDecorator} = this.props.form;
return (
<div>
@ -252,13 +259,35 @@ class AddNewReleaseFormComponent extends React.Component {
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Price Type">
{getFieldDecorator('select', {
rules: [{required: true, message: 'Please select price Type'}],
})(
<Select
placeholder="Please select a price type"
onChange={this.handlePriceTypeChange}>
<Option value="free">Free</Option>
<Option value="paid">Paid</Option>
</Select>,
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Price">
{getFieldDecorator('price', {
rules: [{
required: false
required: !isFree
}],
})(
<Input prefix="$" placeholder="00.00"/>
<InputNumber
disabled={isFree}
options={{
initialValue: 1
}}
min={0}
max={10000}
formatter={value => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
parser={value => value.replace(/\$\s?|(,*)/g, '')}
/>
)}
</Form.Item>

@ -1,5 +1,5 @@
import React from "react";
import {Layout, Menu, Icon} from 'antd';
import {Layout, Menu, Icon, Breadcrumb} from 'antd';
import {Switch, Link} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
import {Redirect} from 'react-router'
@ -61,7 +61,6 @@ class Dashboard extends React.Component {
{this.state.routes.map((route) => (
<RouteWithSubRoutes key={route.path} {...route} />
))}
</Switch>
</Content>
<Footer style={{textAlign: 'center'}}>

@ -1,11 +1,14 @@
import React from "react";
import {
PageHeader,
Typography
Typography,
Breadcrumb,
Icon
} from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
import {Link} from "react-router-dom";
const Paragraph = Typography;
const {Paragraph} = Typography;
const formConfig = {
installationType: "ENTERPRISE",
@ -29,21 +32,19 @@ class AddNewEnterpriseApp extends React.Component {
};
}
componentDidMount() {
// this.getCategories();
}
render() {
return (
<div>
<PageHeader
title="Add New Enterprise App"
>
<PageHeader style={{paddingTop:0}}>
<Breadcrumb style={{paddingBottom:16}}>
<Breadcrumb.Item>
<Link to="/publisher/apps"><Icon type="home"/> Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Add New Enterprise App</Breadcrumb.Item>
</Breadcrumb>
<div className="wrap">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
</Paragraph>
<h3>Add New Enterprise App</h3>
<Paragraph>Submit and share your own application to the corporate app store.</Paragraph>
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

@ -1,11 +1,14 @@
import React from "react";
import {
Icon,
PageHeader,
Typography
Typography,
Breadcrumb
} from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
import {Link} from "react-router-dom";
const Paragraph = Typography;
const {Paragraph, Title} = Typography;
const formConfig = {
installationType: "PUBLIC",
@ -40,12 +43,16 @@ class AddNewEnterpriseApp extends React.Component {
render() {
return (
<div>
<PageHeader
title="Add New Public App"
>
<PageHeader style={{paddingTop:0}}>
<Breadcrumb style={{paddingBottom:16}}>
<Breadcrumb.Item>
<Link to="/publisher/apps"><Icon type="home"/> Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Add New Public App</Breadcrumb.Item>
</Breadcrumb>
<div className="wrap">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
<h3>Add New Public App</h3>
<Paragraph>Share a public application in google play or apple store to your corporate app store.
</Paragraph>
</div>
</PageHeader>

@ -1,11 +1,14 @@
import React from "react";
import {
Icon,
PageHeader,
Typography
Typography,
Breadcrumb
} from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
import {Link} from "react-router-dom";
const Paragraph = Typography;
const {Paragraph, Title}= Typography;
const formConfig = {
installationType: "WEB_CLIP",
@ -32,21 +35,20 @@ class AddNewEnterpriseApp extends React.Component {
};
}
componentDidMount() {
// this.getCategories();
}
render() {
return (
<div>
<PageHeader
title="Add New Web Clip"
>
<PageHeader style={{paddingTop:0}}>
<Breadcrumb style={{paddingBottom:16}}>
<Breadcrumb.Item>
<Link to="/publisher/apps"><Icon type="home"/> Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Add New Web Clip</Breadcrumb.Item>
</Breadcrumb>
<div className="wrap">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
</Paragraph>
<h3>Add New Web Clip</h3>
<Paragraph>Share a Web Clip to your corporate app store.</Paragraph>
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>

@ -1,150 +0,0 @@
import React from "react";
import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd";
import styles from './Style.less';
const { Option } = Select;
const { TextArea } = Input;
const InputGroup = Input.Group;
const formItemLayout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
class EditableTagGroup extends React.Component {
state = {
tags: [],
inputVisible: false,
inputValue: '',
};
handleClose = (removedTag) => {
const tags = this.state.tags.filter(tag => tag !== removedTag);
this.setState({ tags });
}
showInput = () => {
this.setState({ inputVisible: true }, () => this.input.focus());
}
handleInputChange = (e) => {
this.setState({ inputValue: e.target.value });
}
handleInputConfirm = () => {
const { inputValue } = this.state;
let { tags } = this.state;
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
this.setState({
tags,
inputVisible: false,
inputValue: '',
});
}
saveInputRef = input => this.input = input
render() {
const { tags, inputVisible, inputValue } = this.state;
return (
<div>
{tags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</Tag>
);
return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
})}
{inputVisible && (
<Input
ref={this.saveInputRef}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Icon type="plus" /> New Tag
</Tag>
)}
</div>
);
}
}
class Step1 extends React.Component {
render() {
return (
<div>
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
<Form.Item {...formItemLayout} label="Platform">
<Select placeholder="ex: android">
<Option value="Android">Android</Option>
<Option value="iOS">iOS</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Type">
<Select value="Enterprise">
<Option value="Enterprise" selected>Enterprise</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Name">
<Input placeholder="App Name" />
</Form.Item>
<Form.Item {...formItemLayout} label="Description">
<TextArea placeholder="Enter the description" rows={4} />
</Form.Item>
<Form.Item {...formItemLayout} label="Category">
<Select placeholder="Select a category">
<Option value="travel">Travel</Option>
<Option value="entertainment">Entertainment</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Tags">
<EditableTagGroup/>
</Form.Item>
<Form.Item {...formItemLayout} label="Price">
<Input prefix="$" placeholder="00.00" />
</Form.Item>
<Form.Item {...formItemLayout} label="Share with all tenents?">
<Checkbox > </Checkbox>
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Daa">
<InputGroup>
<Row gutter={8}>
<Col span={5}>
<Input placeholder="Key" />
</Col>
<Col span={10}>
<Input placeholder="value" />
</Col>
<Col span={4}>
<Button type="dashed" shape="circle" icon="plus" />
</Col>
</Row>
</InputGroup>
</Form.Item>
</Form>
</div>
);
}
}
export default Step1;

@ -1,11 +0,0 @@
import React from "react"
class Step2 extends React.Component {
render() {
return (
<p>tttoooeeee</p>
);
}
}
export default Step2;

@ -1,11 +0,0 @@
import React from "react"
class Step3 extends React.Component {
render() {
return (
<p>tttoooeeee</p>
);
}
}
export default Step3;

@ -1,9 +1,12 @@
import React from "react";
import {
Icon,
PageHeader,
Typography
Typography,
Breadcrumb
} from "antd";
import AddNewAppForm from "../../../components/new-release/AddReleaseForm";
import AddNewReleaseForm from "../../../components/new-release/AddReleaseForm";
import {Link} from "react-router-dom";
const Paragraph = Typography;
@ -17,27 +20,24 @@ class AddNewRelease extends React.Component {
};
}
componentDidMount() {
// this.getCategories();
}
render() {
const {appId} = this.props.match.params;
return (
<div>
<PageHeader
title="Add New Release"
>
<PageHeader style={{paddingTop: 0}}>
<Breadcrumb style={{paddingBottom: 16}}>
<Breadcrumb.Item>
<Link to="/publisher/apps"><Icon type="home"/> Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Add New Release</Breadcrumb.Item>
</Breadcrumb>
<div className="wrap">
<div className="content">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
</Paragraph>
</div>
<h3>Add New Release</h3>
<Paragraph>Maintain and manage categories and tags here..</Paragraph>
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<AddNewAppForm appId={appId}/>
<AddNewReleaseForm appId={appId}/>
</div>
</div>

@ -22,7 +22,8 @@ class Release extends React.Component {
uuid: null,
release: null,
currentLifecycleStatus: null,
}
lifecycle: null
};
}
componentDidMount() {
@ -36,12 +37,19 @@ class Release extends React.Component {
this.fetchData(uuid);
}
}
changeCurrentLifecycleStatus = (status) =>{
this.setState({
currentLifecycleStatus: status
});
};
updateRelease = (release) =>{
this.setState({
release
});
};
fetchData = (uuid) => {
const config = this.props.context;
@ -77,10 +85,38 @@ class Release extends React.Component {
}
this.setState({loading: false});
});
this.getLifecycle();
};
getLifecycle = () => {
const config = this.props.context;
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/lifecycle-config"
).then(res => {
if (res.status === 200) {
const lifecycle = res.data.data;
this.setState({
lifecycle: lifecycle
})
}
}).catch(function (error) {
if (error.hasOwnProperty("response") && error.response.status === 401) {
window.location.href = window.location.origin+ '/publisher/login';
} else {
notification["error"]({
message: "There was a problem",
duration: 0,
description:
"Error occurred while trying to load lifecycle configuration.",
});
}
});
};
render() {
const {app, release, currentLifecycleStatus} = this.state;
const {app, release, currentLifecycleStatus, lifecycle} = this.state;
if (release == null) {
return (
@ -97,12 +133,22 @@ class Release extends React.Component {
<Row style={{padding: 10}}>
<Col lg={16} md={24} style={{padding: 3}}>
<Card>
<ReleaseView app={app} currentLifecycleStatus={currentLifecycleStatus}/>
<ReleaseView
app={app}
currentLifecycleStatus={currentLifecycleStatus}
lifecycle ={lifecycle}
updateRelease={this.updateRelease}
/>
</Card>
</Col>
<Col lg={8} md={24} style={{padding: 3}}>
<Card lg={8} md={24}>
<LifeCycle uuid={release.uuid} currentStatus={release.currentStatus.toUpperCase()} changeCurrentLifecycleStatus={this.changeCurrentLifecycleStatus}/>
<LifeCycle
uuid={release.uuid}
currentStatus={release.currentStatus.toUpperCase()}
changeCurrentLifecycleStatus={this.changeCurrentLifecycleStatus}
lifecycle ={lifecycle}
/>
</Card>
</Col>
</Row>

@ -1,7 +1,8 @@
import React from "react";
import {PageHeader, Typography, Input, Button, Row, Col} from "antd";
import {PageHeader, Typography, Breadcrumb, Row, Col, Icon} from "antd";
import ManageCategories from "../../../components/manage/categories/ManageCategories";
import ManageTags from "../../../components/manage/categories/ManageTags";
import {Link} from "react-router-dom";
const {Paragraph} = Typography;
@ -33,14 +34,16 @@ class Manage extends React.Component {
render() {
return (
<div>
<PageHeader
// breadcrumb={{routes}}
title="Manage"
>
<PageHeader style={{paddingTop: 0}}>
<Breadcrumb style={{paddingBottom: 16}}>
<Breadcrumb.Item>
<Link to="/publisher/apps"><Icon type="home"/> Home</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>Manage</Breadcrumb.Item>
</Breadcrumb>
<div className="wrap">
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
</Paragraph>
<h3>Manage</h3>
<Paragraph>Maintain and manage categories and tags here..</Paragraph>
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 780}}>

@ -1,9 +1,10 @@
import React from "react";
import '../../../../App.css';
import {Skeleton, Typography, Row, Col, Card, message, notification} from "antd";
import {Skeleton, Typography, Row, Col, Card, message, notification, Breadcrumb, Icon} from "antd";
import ReleaseView from "../../../../components/apps/release/ReleaseView";
import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext";
import {Link} from "react-router-dom";
const {Title} = Typography;
@ -13,12 +14,11 @@ class Release extends React.Component {
constructor(props) {
super(props);
this.routes = props.routes;
this.state={
this.state = {
loading: true,
app: null,
uuid: null
}
};
}
componentDidMount() {
@ -29,19 +29,18 @@ class Release extends React.Component {
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevState.uuid !== this.state.uuid) {
const {uuid,deviceType} = this.props.match.params;
const {uuid, deviceType} = this.props.match.params;
this.fetchData(uuid);
this.props.changeSelectedMenuItem(deviceType);
}
}
fetchData = (uuid)=>{
fetchData = (uuid) => {
const config = this.props.context;
//send request to the invoker
axios.get(
window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.store+"/applications/"+uuid,
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.store + "/applications/" + uuid,
).then(res => {
if (res.status === 200) {
let app = res.data.data;
@ -53,11 +52,12 @@ class Release extends React.Component {
})
}
}).catch((error) => { console.log(error);
}).catch((error) => {
console.log(error);
if (error.hasOwnProperty("response") && error.response.status === 401) {
//todo display a popop with error
message.error('You are not logged in');
window.location.href = window.location.origin+ '/store/login';
window.location.href = window.location.origin + '/store/login';
} else {
notification["error"]({
message: "There was a problem",
@ -76,12 +76,13 @@ class Release extends React.Component {
const {deviceType} = this.props.match.params;
let content = <Title level={3}>No Releases Found</Title>;
let appName = "loading...";
if (app != null && app.applicationReleases.length!==0) {
if (app != null && app.applicationReleases.length !== 0) {
content = <ReleaseView app={app} deviceType={deviceType}/>;
appName = app.name;
}
return (
<div style={{background: '#f0f2f5', minHeight: 780}}>
<Row style={{padding: 10}}>
@ -89,6 +90,12 @@ class Release extends React.Component {
</Col>
<Col lg={16} md={24} style={{padding: 3}}>
<Breadcrumb style={{paddingBottom: 16}}>
<Breadcrumb.Item>
<Link to={"/store/"+deviceType}><Icon type="home"/> {deviceType + " apps"} </Link>
</Breadcrumb.Item>
<Breadcrumb.Item>{appName}</Breadcrumb.Item>
</Breadcrumb>
<Card>
<Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 8}}>
{content}

Loading…
Cancel
Save