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

Add supported OS versions field to add new app & release forms in APPM Publisher UI

See merge request entgra/carbon-device-mgt!283
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
commit 0bbd34cfa7

@ -490,7 +490,7 @@ class AppDetailsDrawer extends React.Component {
<div className="releases-details"> <div className="releases-details">
{(app.type === "ENTERPRISE") && ( {(app.type === "ENTERPRISE") && (
<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" <Link to={`/publisher/apps/${app.deviceType}/${app.id}/add-release`}><Button htmlType="button"
size="small">Add size="small">Add
new release</Button></Link>)} new release</Button></Link>)}
<List <List

@ -52,11 +52,19 @@ class AddNewAppFormComponent extends React.Component {
binaryFiles: [], binaryFiles: [],
application: null, application: null,
release: null, release: null,
isError: false isError: false,
deviceType: null,
supportedOsVersions: []
}; };
} }
onSuccessApplicationData = (application) => { onSuccessApplicationData = (application) => {
const {formConfig} = this.props;
if (application.hasOwnProperty("deviceType") &&
formConfig.installationType !== "WEB_CLIP" &&
formConfig.installationType !== "CUSTOM") {
this.getSupportedOsVersions(application.deviceType);
}
this.setState({ this.setState({
application, application,
current: 1 current: 1
@ -119,10 +127,30 @@ class AddNewAppFormComponent extends React.Component {
this.setState({current}); this.setState({current});
}; };
getSupportedOsVersions = (deviceType) => {
const config = this.props.context;
axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt +
`/admin/device-types/${deviceType}/versions`
).then(res => {
if (res.status === 200) {
let supportedOsVersions = JSON.parse(res.data.data);
this.setState({
supportedOsVersions,
loading: false,
});
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load supported OS versions.");
this.setState({
loading: false
});
});
};
render() { render() {
const { loading, current, isError} = this.state; const {loading, current, isError, supportedOsVersions} = this.state;
const {formConfig} = this.props; const {formConfig} = this.props;
return ( return (
<div> <div>
<Spin tip="Uploading..." spinning={loading}> <Spin tip="Uploading..." spinning={loading}>
@ -142,6 +170,7 @@ class AddNewAppFormComponent extends React.Component {
<div style={{display: (current === 1 ? 'unset' : 'none')}}> <div style={{display: (current === 1 ? 'unset' : 'none')}}>
<NewAppUploadForm <NewAppUploadForm
formConfig={formConfig} formConfig={formConfig}
supportedOsVersions={supportedOsVersions}
onSuccessReleaseData={this.onSuccessReleaseData} onSuccessReleaseData={this.onSuccessReleaseData}
onClickBackButton={this.onClickBackButton}/> onClickBackButton={this.onClickBackButton}/>
</div> </div>

@ -160,8 +160,6 @@ class NewAppDetailsForm extends React.Component {
loading: false, loading: false,
}); });
} }
}).catch((error) => { }).catch((error) => {
handleApiError(error, "Error occurred while trying to load device types."); handleApiError(error, "Error occurred while trying to load device types.");
this.setState({ this.setState({
@ -175,7 +173,6 @@ class NewAppDetailsForm extends React.Component {
const {categories, tags, deviceTypes} = this.state; const {categories, tags, deviceTypes} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
return ( return (
<div> <div>
<Row> <Row>
@ -186,8 +183,7 @@ class NewAppDetailsForm extends React.Component {
<Form <Form
labelAlign="right" labelAlign="right"
layout="horizontal" layout="horizontal"
onSubmit={this.handleSubmit} onSubmit={this.handleSubmit}>
>
{formConfig.installationType !== "WEB_CLIP" && ( {formConfig.installationType !== "WEB_CLIP" && (
<Form.Item {...formItemLayout} label="Device Type"> <Form.Item {...formItemLayout} label="Device Type">
{getFieldDecorator('deviceType', { {getFieldDecorator('deviceType', {

@ -19,15 +19,17 @@
import React from "react"; import React from "react";
import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd"; import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd";
import "@babel/polyfill"; import "@babel/polyfill";
import axios from "axios";
import {handleApiError} from "../../../js/Utils";
const formItemLayout = { const formItemLayout = {
labelCol: { labelCol: {
xs: {span: 24}, xs: {span: 24},
sm: {span: 5}, sm: {span: 8},
}, },
wrapperCol: { wrapperCol: {
xs: {span: 24}, xs: {span: 24},
sm: {span: 19}, sm: {span: 16},
}, },
}; };
const {Option} = Select; const {Option} = Select;
@ -60,7 +62,9 @@ class NewAppUploadForm extends React.Component {
iconHelperText: '', iconHelperText: '',
screenshotHelperText: '', screenshotHelperText: '',
metaData: [] metaData: []
} };
this.lowerOsVersion = null;
this.upperOsVersion = null;
} }
normFile = e => { normFile = e => {
@ -95,7 +99,7 @@ class NewAppUploadForm extends React.Component {
}; };
if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") { if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
release.supportedOsVersions = "4-30"; release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
} }
if (specificElements.hasOwnProperty("version")) { if (specificElements.hasOwnProperty("version")) {
@ -190,8 +194,16 @@ class NewAppUploadForm extends React.Component {
}) })
}; };
handleLowerOsVersionChange = (lowerOsVersion) => {
this.lowerOsVersion = lowerOsVersion;
};
handleUpperOsVersionChange = (upperOsVersion) => {
this.upperOsVersion = upperOsVersion;
};
render() { render() {
const {formConfig} = this.props; const {formConfig, supportedOsVersions} = this.props;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
const { const {
icons, icons,
@ -354,6 +366,46 @@ class NewAppUploadForm extends React.Component {
)} )}
</Form.Item> </Form.Item>
{(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && (
<Form.Item {...formItemLayout} label="Supported OS Versions">
{getFieldDecorator('supportedOS')(
<div>
<InputGroup>
<Row gutter={8}>
<Col span={11}>
<Select
placeholder="Lower version"
style={{width: "100%"}}
onChange={this.handleLowerOsVersionChange}>
{supportedOsVersions.map(version => (
<Option key={version.versionName}
value={version.versionName}>
{version.versionName}
</Option>
))}
</Select>
</Col>
<Col span={2}>
<p> - </p>
</Col>
<Col span={11}>
<Select style={{width: "100%"}}
placeholder="Upper version"
onChange={this.handleUpperOsVersionChange}>
{supportedOsVersions.map(version => (
<Option key={version.versionName}
value={version.versionName}>
{version.versionName}
</Option>
))}
</Select>
</Col>
</Row>
</InputGroup>
</div>
)}
</Form.Item>
)}
<Form.Item {...formItemLayout} label="Price Type"> <Form.Item {...formItemLayout} label="Price Type">
{getFieldDecorator('select', { {getFieldDecorator('select', {
rules: [{required: true, message: 'Please select price Type'}], rules: [{required: true, message: 'Please select price Type'}],

@ -63,10 +63,38 @@ class AddNewReleaseFormComponent extends React.Component {
screenshots: [], screenshots: [],
loading: false, loading: false,
binaryFiles: [], binaryFiles: [],
isFree: true isFree: true,
supportedOsVersions: []
}; };
this.lowerOsVersion = null;
this.upperOsVersion = null;
} }
componentDidMount() {
this.getSupportedOsVersions(this.props.deviceType);
}
getSupportedOsVersions = (deviceType) => {
const config = this.props.context;
axios.get(
window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt +
`/admin/device-types/${deviceType}/versions`
).then(res => {
if (res.status === 200) {
let supportedOsVersions = JSON.parse(res.data.data);
this.setState({
supportedOsVersions,
loading: false,
});
}
}).catch((error) => {
handleApiError(error, "Error occurred while trying to load supported OS versions.");
this.setState({
loading: false
});
});
};
handleSubmit = e => { handleSubmit = e => {
const config = this.props.context; const config = this.props.context;
e.preventDefault(); e.preventDefault();
@ -89,9 +117,8 @@ class AddNewReleaseFormComponent extends React.Component {
isSharedWithAllTenants, isSharedWithAllTenants,
metaData: "string", metaData: "string",
releaseType: releaseType, releaseType: releaseType,
supportedOsVersions: "4-30" supportedOsVersions: `${this.lowerOsVersion}-${this.upperOsVersion}`
}; };
data.append('binaryFile', binaryFile[0].originFileObj); data.append('binaryFile', binaryFile[0].originFileObj);
data.append('icon', icon[0].originFileObj); data.append('icon', icon[0].originFileObj);
data.append('screenshot1', screenshots[0].originFileObj); data.append('screenshot1', screenshots[0].originFileObj);
@ -155,8 +182,16 @@ class AddNewReleaseFormComponent extends React.Component {
}); });
}; };
handleLowerOsVersionChange = (lowerOsVersion) => {
this.lowerOsVersion = lowerOsVersion;
};
handleUpperOsVersionChange = (upperOsVersion) => {
this.upperOsVersion = upperOsVersion;
};
render() { render() {
const {isFree, icons, screenshots, loading, binaryFiles} = this.state; const {isFree, icons, screenshots, loading, binaryFiles, supportedOsVersions} = this.state;
const {getFieldDecorator} = this.props.form; const {getFieldDecorator} = this.props.form;
return ( return (
<div> <div>
@ -264,6 +299,45 @@ class AddNewReleaseFormComponent extends React.Component {
)} )}
</Form.Item> </Form.Item>
<Form.Item {...formItemLayout} label="Supported OS Versions">
{getFieldDecorator('supportedOS')(
<div>
<InputGroup>
<Row gutter={8}>
<Col span={11}>
<Select
placeholder="Lower version"
style={{width: "100%"}}
onChange={this.handleLowerOsVersionChange}>
{supportedOsVersions.map(version => (
<Option key={version.versionName}
value={version.versionName}>
{version.versionName}
</Option>
))}
</Select>
</Col>
<Col span={2}>
<p> - </p>
</Col>
<Col span={11}>
<Select style={{width: "100%"}}
placeholder="Upper version"
onChange={this.handleUpperOsVersionChange}>
{supportedOsVersions.map(version => (
<Option key={version.versionName}
value={version.versionName}>
{version.versionName}
</Option>
))}
</Select>
</Col>
</Row>
</InputGroup>
</div>
)}
</Form.Item>
<Form.Item {...formItemLayout} label="Price Type"> <Form.Item {...formItemLayout} label="Price Type">
{getFieldDecorator('select', { {getFieldDecorator('select', {
rules: [{required: true, message: 'Please select price Type'}], rules: [{required: true, message: 'Please select price Type'}],

Loading…
Cancel
Save