Merge branch 'application-mgt-new' into 'application-mgt-new'

Fix installation error in APPM ui

See merge request entgra/carbon-device-mgt!191
feature/appm-store/pbac
Saad Sahibjan 5 years ago
commit a3e372556e

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

@ -53,7 +53,10 @@ const columns = [
<span> <span>
{categories.map(category => { {categories.map(category => {
return ( 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} {category}
</Tag> </Tag>
); );

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

@ -1,5 +1,5 @@
import React from "react"; 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 axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext"; import {withConfigContext} from "../../../../context/ConfigContext";
@ -83,6 +83,49 @@ class EditReleaseModal extends React.Component {
showModal = () => { 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({ this.setState({
visible: true, visible: true,
}); });
@ -115,7 +158,7 @@ class EditReleaseModal extends React.Component {
handleSubmit = e => { handleSubmit = e => {
e.preventDefault(); e.preventDefault();
const {uuid} = this.props; const {uuid} = this.props.release;
const config = this.props.context; const config = this.props.context;
const {formConfig} = this.state; const {formConfig} = this.state;
@ -199,9 +242,7 @@ class EditReleaseModal extends React.Component {
"Saved!", "Saved!",
}); });
const uuid = res.data.data.uuid; window.location.reload();
// this.props.history.push('/publisher/apps/releases/' + uuid);
} }
}).catch((error) => { }).catch((error) => {
@ -227,15 +268,21 @@ class EditReleaseModal extends React.Component {
render() { render() {
const {formConfig, icons, screenshots, loading, binaryFiles} = this.state; const {formConfig, icons, screenshots, loading, binaryFiles} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
const {isAppUpdatable} = this.props;
return ( return (
<div> <div>
<Button size="small" type="primary" onClick={this.showModal}> <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 <Icon type="edit"/> Edit
</Button> </Button>
</Tooltip>
<Modal <Modal
title="Edit release" title="Edit release"
visible={this.state.visible} visible={this.state.visible}
onOk={this.handleOk} footer={null}
onCancel={this.handleCancel} onCancel={this.handleCancel}
> >
<div> <div>
@ -340,14 +387,11 @@ class EditReleaseModal extends React.Component {
beforeUpload={() => false} beforeUpload={() => false}
multiple multiple
> >
{screenshots.length < 3 && ( {screenshots.length < 3 && (
<Button> <Button>
<Icon type="upload"/> Click to upload <Icon type="upload"/> Click to upload
</Button> </Button>
)} )}
</Upload>, </Upload>,
)} )}
</Form.Item> </Form.Item>
@ -399,11 +443,18 @@ class EditReleaseModal extends React.Component {
)} )}
</Form.Item> </Form.Item>
<Form.Item style={{float: "right"}}> <Divider/>
<Form.Item style={{float: "right", marginLeft: 8}}>
<Button type="primary" htmlType="submit"> <Button type="primary" htmlType="submit">
Submit Update
</Button>
</Form.Item>
<Form.Item style={{float: "right"}}>
<Button htmlType="button" onClick={this.handleCancel}>
Back
</Button> </Button>
</Form.Item> </Form.Item>
<br/>
</Form> </Form>
</Spin> </Spin>
</div> </div>

@ -34,17 +34,12 @@ class LifeCycle extends React.Component {
this.state = { this.state = {
currentStatus: props.currentStatus, currentStatus: props.currentStatus,
selectedStatus: null, selectedStatus: null,
lifecycle: [],
reasonText: '', reasonText: '',
isReasonModalVisible: false, isReasonModalVisible: false,
isConfirmButtonLoading: false isConfirmButtonLoading: false
} }
} }
componentDidMount() {
this.fetchData();
}
componentDidUpdate(prevProps, prevState, snapshot) { componentDidUpdate(prevProps, prevState, snapshot) {
if (prevProps.currentStatus !== this.props.currentStatus || prevProps.uuid !== this.props.uuid) { if (prevProps.currentStatus !== this.props.currentStatus || prevProps.uuid !== this.props.uuid) {
this.setState({ 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) => { handleChange = (value) => {
this.setState({reasonText: value}) this.setState({reasonText: value})
}; };
@ -153,12 +121,15 @@ class LifeCycle extends React.Component {
render() { render() {
const {currentStatus, lifecycle, selectedStatus} = this.state; const {currentStatus, selectedStatus} = this.state;
const {lifecycle} = this.props;
const selectedValue = selectedStatus == null ? [] : selectedStatus; const selectedValue = selectedStatus == null ? [] : selectedStatus;
let proceedingStates = []; let proceedingStates = [];
if((lifecycle.hasOwnProperty(currentStatus)) && lifecycle[currentStatus].hasOwnProperty("proceedingStates")){
if (lifecycle !== null && (lifecycle.hasOwnProperty(currentStatus)) && lifecycle[currentStatus].hasOwnProperty("proceedingStates")) {
proceedingStates = lifecycle[currentStatus].proceedingStates; proceedingStates = lifecycle[currentStatus].proceedingStates;
} }
return ( return (
<div> <div>
<Title level={4}>Manage Lifecycle</Title> <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 state to another. <br/>Note: Change State To displays only the next states allowed from the
current state current state
</Paragraph> </Paragraph>
<LifeCycleDetailsModal lifecycle={lifecycle}/> {lifecycle !== null && (<LifeCycleDetailsModal lifecycle={lifecycle}/>)}
<Divider dashed={true}/> <Divider dashed={true}/>
<Text strong={true}>Current State: </Text> <Tag color="blue">{currentStatus}</Tag><br/><br/> <Text strong={true}>Current State: </Text> <Tag color="blue">{currentStatus}</Tag><br/><br/>
<Text>Change State to: </Text> <Text>Change State to: </Text>

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

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

@ -22,7 +22,8 @@ class NewAppDetailsForm extends React.Component {
super(props); super(props);
this.state = { this.state = {
categories: [], categories: [],
tags: [] tags: [],
deviceTypes:[]
} }
} }
@ -62,6 +63,7 @@ class NewAppDetailsForm extends React.Component {
componentDidMount() { componentDidMount() {
this.getCategories(); this.getCategories();
this.getTags(); this.getTags();
this.getDeviceTypes();
} }
getCategories = () => { getCategories = () => {
@ -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() { render() {
const {formConfig} = this.props; const {formConfig} = this.props;
const {categories, tags} = this.state; const {categories, tags, deviceTypes} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
return ( return (
@ -153,9 +185,22 @@ class NewAppDetailsForm extends React.Component {
} }
)( )(
<Select placeholder="select device type"> <Select
<Option key="android">Android</Option> mode="multiple"
<Option key="ios">iOS</Option> style={{width: '100%'}}
placeholder="select device type"
onChange={this.handleCategoryChange}
>
{
deviceTypes.map(deviceType => {
return (
<Option
key={deviceType.name}>
{deviceType.name}
</Option>
)
})
}
</Select> </Select>
)} )}
</Form.Item> </Form.Item>

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

@ -13,7 +13,7 @@ import {
Upload, Upload,
Divider, Divider,
notification, notification,
Spin Spin, InputNumber
} from "antd"; } from "antd";
import axios from "axios"; import axios from "axios";
import {withRouter} from 'react-router-dom' import {withRouter} from 'react-router-dom'
@ -43,7 +43,8 @@ class AddNewReleaseFormComponent extends React.Component {
icons: [], icons: [],
screenshots: [], screenshots: [],
loading: false, loading: false,
binaryFiles: [] binaryFiles: [],
isFree: true
}; };
} }
@ -143,8 +144,14 @@ class AddNewReleaseFormComponent extends React.Component {
handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList}); handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
handlePriceTypeChange = (value) => {
this.setState({
isFree: (value === 'free')
});
};
render() { render() {
const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state; const {isFree, icons, screenshots, loading, binaryFiles} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
return ( return (
<div> <div>
@ -252,13 +259,35 @@ class AddNewReleaseFormComponent extends React.Component {
)} )}
</Form.Item> </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"> <Form.Item {...formItemLayout} label="Price">
{getFieldDecorator('price', { {getFieldDecorator('price', {
rules: [{ 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> </Form.Item>

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

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

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

@ -1,11 +1,14 @@
import React from "react"; import React from "react";
import { import {
Icon,
PageHeader, PageHeader,
Typography Typography,
Breadcrumb
} from "antd"; } from "antd";
import AddNewAppForm from "../../../components/new-app/AddNewAppForm"; import AddNewAppForm from "../../../components/new-app/AddNewAppForm";
import {Link} from "react-router-dom";
const Paragraph = Typography; const {Paragraph, Title}= Typography;
const formConfig = { const formConfig = {
installationType: "WEB_CLIP", installationType: "WEB_CLIP",
@ -32,21 +35,20 @@ class AddNewEnterpriseApp extends React.Component {
}; };
} }
componentDidMount() {
// this.getCategories();
}
render() { render() {
return ( return (
<div> <div>
<PageHeader <PageHeader style={{paddingTop:0}}>
title="Add New Web Clip" <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"> <div className="wrap">
<Paragraph> <h3>Add New Web Clip</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo. <Paragraph>Share a Web Clip to your corporate app store.</Paragraph>
</Paragraph>
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <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 React from "react";
import { import {
Icon,
PageHeader, PageHeader,
Typography Typography,
Breadcrumb
} from "antd"; } 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; const Paragraph = Typography;
@ -17,27 +20,24 @@ class AddNewRelease extends React.Component {
}; };
} }
componentDidMount() {
// this.getCategories();
}
render() { render() {
const {appId} = this.props.match.params; const {appId} = this.props.match.params;
return ( return (
<div> <div>
<PageHeader <PageHeader style={{paddingTop: 0}}>
title="Add New Release" <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="wrap">
<div className="content"> <h3>Add New Release</h3>
<Paragraph> <Paragraph>Maintain and manage categories and tags here..</Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
</Paragraph>
</div>
</div> </div>
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<AddNewAppForm appId={appId}/> <AddNewReleaseForm appId={appId}/>
</div> </div>
</div> </div>

@ -22,7 +22,8 @@ class Release extends React.Component {
uuid: null, uuid: null,
release: null, release: null,
currentLifecycleStatus: null, currentLifecycleStatus: null,
} lifecycle: null
};
} }
componentDidMount() { componentDidMount() {
@ -36,12 +37,19 @@ class Release extends React.Component {
this.fetchData(uuid); this.fetchData(uuid);
} }
} }
changeCurrentLifecycleStatus = (status) =>{ changeCurrentLifecycleStatus = (status) =>{
this.setState({ this.setState({
currentLifecycleStatus: status currentLifecycleStatus: status
}); });
}; };
updateRelease = (release) =>{
this.setState({
release
});
};
fetchData = (uuid) => { fetchData = (uuid) => {
const config = this.props.context; const config = this.props.context;
@ -77,10 +85,38 @@ class Release extends React.Component {
} }
this.setState({loading: false}); 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() { render() {
const {app, release, currentLifecycleStatus} = this.state; const {app, release, currentLifecycleStatus, lifecycle} = this.state;
if (release == null) { if (release == null) {
return ( return (
@ -97,12 +133,22 @@ class Release extends React.Component {
<Row style={{padding: 10}}> <Row style={{padding: 10}}>
<Col lg={16} md={24} style={{padding: 3}}> <Col lg={16} md={24} style={{padding: 3}}>
<Card> <Card>
<ReleaseView app={app} currentLifecycleStatus={currentLifecycleStatus}/> <ReleaseView
app={app}
currentLifecycleStatus={currentLifecycleStatus}
lifecycle ={lifecycle}
updateRelease={this.updateRelease}
/>
</Card> </Card>
</Col> </Col>
<Col lg={8} md={24} style={{padding: 3}}> <Col lg={8} md={24} style={{padding: 3}}>
<Card lg={8} md={24}> <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> </Card>
</Col> </Col>
</Row> </Row>

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

@ -19,16 +19,24 @@
}, },
"defaultPlatformIcons": { "defaultPlatformIcons": {
"default": { "default": {
"icon": "mobile", "icon": "global",
"color": "#535c68" "color": "#535c68",
"theme": "outlined"
}, },
"android": { "android": {
"icon": "android", "icon": "android",
"color": "#7db343" "color": "#7db343",
"theme": "filled"
}, },
"ios": { "ios": {
"icon": "apple", "icon": "apple",
"color": "#535c68" "color": "#535c68",
"theme": "filled"
},
"windows": {
"icon": "windows",
"color": "#008cc4",
"theme": "filled"
} }
} }
} }

@ -37,7 +37,7 @@ class ReleaseView extends React.Component {
headers: {'X-Platform': config.serverConfig.platform} headers: {'X-Platform': config.serverConfig.platform}
} }
).then(res => { ).then(res => {
if (res.status === 201) { if (res.status === 200) {
this.setState({ this.setState({
loading: false, loading: false,
appInstallModalVisible: false appInstallModalVisible: false
@ -45,7 +45,7 @@ class ReleaseView extends React.Component {
notification["success"]({ notification["success"]({
message: 'Done!', message: 'Done!',
description: description:
'App installed successfully.', 'App installed triggered.',
}); });
} else { } else {
this.setState({ this.setState({

@ -1,9 +1,11 @@
import React from "react"; import React from "react";
import {Layout, Menu, Icon} from 'antd'; import {Layout, Menu, Icon} from 'antd';
const {Header, Content, Footer} = Layout; const {Header, Content, Footer} = Layout;
import {Link} from "react-router-dom"; import {Link} from "react-router-dom";
import RouteWithSubRoutes from "../../components/RouteWithSubRoutes" import RouteWithSubRoutes from "../../components/RouteWithSubRoutes";
import {Switch} from 'react-router' import {Switch} from 'react-router';
import axios from "axios";
import "../../App.css"; import "../../App.css";
import {withConfigContext} from "../../context/ConfigContext"; import {withConfigContext} from "../../context/ConfigContext";
@ -12,11 +14,46 @@ class Dashboard extends React.Component {
super(props); super(props);
this.state = { this.state = {
routes: props.routes, routes: props.routes,
selectedKeys: [] selectedKeys: [],
deviceTypes: []
}; };
this.logo = this.props.context.theme.logo; this.logo = this.props.context.theme.logo;
} }
componentDidMount() {
this.getDeviceTypes();
}
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
});
});
};
changeSelectedMenuItem = (key) => { changeSelectedMenuItem = (key) => {
this.setState({ this.setState({
selectedKeys: [key] selectedKeys: [key]
@ -24,7 +61,9 @@ class Dashboard extends React.Component {
}; };
render() { render() {
const {selectedKeys} = this.state; const config = this.props.context;
const {selectedKeys, deviceTypes} = this.state;
return ( return (
<div> <div>
<Layout className="layout"> <Layout className="layout">
@ -38,9 +77,28 @@ class Dashboard extends React.Component {
defaultSelectedKeys={selectedKeys} defaultSelectedKeys={selectedKeys}
style={{lineHeight: '64px'}} style={{lineHeight: '64px'}}
> >
<Menu.Item key="android"><Link to="/store/android"><Icon type="android" theme="filled"/>Android</Link></Menu.Item> {
<Menu.Item key="ios"><Link to="/store/ios"><Icon type="apple" theme="filled"/>iOS</Link></Menu.Item> deviceTypes.map((deviceType)=>{
<Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web Clips</Link></Menu.Item> const platform = deviceType.name;
const defaultPlatformIcons = config.defaultPlatformIcons;
let icon = defaultPlatformIcons.default.icon;
let theme = defaultPlatformIcons.default.theme;
if (defaultPlatformIcons.hasOwnProperty(platform)) {
icon = defaultPlatformIcons[platform].icon;
theme = defaultPlatformIcons[platform].theme;
}
return (
<Menu.Item key={platform}>
<Link to={"/store/"+platform}>
<Icon type={icon} theme={theme}/>
{platform}
</Link>
</Menu.Item>
);
})
}
<Menu.Item key="web-clip"><Link to="/store/web-clip"><Icon type="upload"/>Web
Clips</Link></Menu.Item>
</Menu> </Menu>
</Header> </Header>
</Layout> </Layout>
@ -48,7 +106,8 @@ class Dashboard extends React.Component {
<Content style={{padding: '0 0'}}> <Content style={{padding: '0 0'}}>
<Switch> <Switch>
{this.state.routes.map((route) => ( {this.state.routes.map((route) => (
<RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem} key={route.path} {...route} /> <RouteWithSubRoutes changeSelectedMenuItem={this.changeSelectedMenuItem}
key={route.path} {...route} />
))} ))}
</Switch> </Switch>

@ -1,9 +1,10 @@
import React from "react"; import React from "react";
import '../../../../App.css'; 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 ReleaseView from "../../../../components/apps/release/ReleaseView";
import axios from "axios"; import axios from "axios";
import {withConfigContext} from "../../../../context/ConfigContext"; import {withConfigContext} from "../../../../context/ConfigContext";
import {Link} from "react-router-dom";
const {Title} = Typography; const {Title} = Typography;
@ -17,8 +18,7 @@ class Release extends React.Component {
loading: true, loading: true,
app: null, app: null,
uuid: null uuid: null
} };
} }
componentDidMount() { componentDidMount() {
@ -41,7 +41,6 @@ class Release extends React.Component {
//send request to the invoker //send request to the invoker
axios.get( 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 => { ).then(res => {
if (res.status === 200) { if (res.status === 200) {
let app = res.data.data; let app = res.data.data;
@ -53,7 +52,8 @@ class Release extends React.Component {
}) })
} }
}).catch((error) => { console.log(error); }).catch((error) => {
console.log(error);
if (error.hasOwnProperty("response") && error.response.status === 401) { if (error.hasOwnProperty("response") && error.response.status === 401) {
//todo display a popop with error //todo display a popop with error
message.error('You are not logged in'); message.error('You are not logged in');
@ -76,12 +76,13 @@ class Release extends React.Component {
const {deviceType} = this.props.match.params; const {deviceType} = this.props.match.params;
let content = <Title level={3}>No Releases Found</Title>; 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}/>; content = <ReleaseView app={app} deviceType={deviceType}/>;
appName = app.name;
} }
return ( return (
<div style={{background: '#f0f2f5', minHeight: 780}}> <div style={{background: '#f0f2f5', minHeight: 780}}>
<Row style={{padding: 10}}> <Row style={{padding: 10}}>
@ -89,6 +90,12 @@ class Release extends React.Component {
</Col> </Col>
<Col lg={16} md={24} style={{padding: 3}}> <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> <Card>
<Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 8}}> <Skeleton loading={loading} avatar={{size: 'large'}} active paragraph={{rows: 8}}>
{content} {content}

Loading…
Cancel
Save