From 407cbc6ef494c103b2a43eda987463a66305a5d6 Mon Sep 17 00:00:00 2001 From: Jayasanka Date: Mon, 7 Oct 2019 14:35:06 +0530 Subject: [PATCH 1/2] Add supported OS versions to add new app form in APPM UI --- .../src/components/new-app/AddNewAppForm.js | 37 ++++++++- .../new-app/subForms/NewAppDetailsForm.js | 6 +- .../new-app/subForms/NewAppUploadForm.js | 82 +++++++++++++++---- .../components/new-release/AddReleaseForm.js | 29 ++++++- 4 files changed, 129 insertions(+), 25 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js index 4e1c89b6f24..6e731679e13 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/AddNewAppForm.js @@ -52,11 +52,19 @@ class AddNewAppFormComponent extends React.Component { binaryFiles: [], application: null, release: null, - isError: false + isError: false, + deviceType: null, + supportedOsVersions: [] }; } onSuccessApplicationData = (application) => { + const {formConfig} = this.props; + if (application.hasOwnProperty("deviceType") && + formConfig.installationType !== "WEB_CLIP" && + formConfig.installationType !== "CUSTOM") { + this.getSupportedOsVersions(application.deviceType); + } this.setState({ application, current: 1 @@ -84,7 +92,7 @@ class AddNewAppFormComponent extends React.Component { }); data.append(formConfig.jsonPayloadName, blob); - const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint; + const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint; axios.post( url, @@ -119,10 +127,30 @@ class AddNewAppFormComponent extends React.Component { 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() { - const { loading, current, isError} = this.state; + const {loading, current, isError, supportedOsVersions} = this.state; const {formConfig} = this.props; - return (
@@ -142,6 +170,7 @@ class AddNewAppFormComponent extends React.Component {
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js index 1acac2779eb..1667f2bb4c5 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppDetailsForm.js @@ -160,8 +160,6 @@ class NewAppDetailsForm extends React.Component { loading: false, }); } - - }).catch((error) => { handleApiError(error, "Error occurred while trying to load device types."); this.setState({ @@ -175,7 +173,6 @@ class NewAppDetailsForm extends React.Component { const {categories, tags, deviceTypes} = this.state; const {getFieldDecorator} = this.props.form; - return (
@@ -186,8 +183,7 @@ class NewAppDetailsForm extends React.Component {
+ onSubmit={this.handleSubmit}> {formConfig.installationType !== "WEB_CLIP" && ( {getFieldDecorator('deviceType', { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js index 59425a9df1c..3dcf2f169e5 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-app/subForms/NewAppUploadForm.js @@ -19,15 +19,17 @@ import React from "react"; import {Button, Col, Form, Icon, Input, Row, Select, Switch, Upload, InputNumber, Modal} from "antd"; import "@babel/polyfill"; +import axios from "axios"; +import {handleApiError} from "../../../js/Utils"; const formItemLayout = { labelCol: { xs: {span: 24}, - sm: {span: 5}, + sm: {span: 8}, }, wrapperCol: { xs: {span: 24}, - sm: {span: 19}, + sm: {span: 16}, }, }; const {Option} = Select; @@ -60,7 +62,9 @@ class NewAppUploadForm extends React.Component { iconHelperText: '', screenshotHelperText: '', metaData: [] - } + }; + this.lowerOsVersion = null; + this.upperOsVersion = null; } normFile = e => { @@ -95,7 +99,7 @@ class NewAppUploadForm extends React.Component { }; if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") { - release.supportedOsVersions = "4-30"; + release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`; } if (specificElements.hasOwnProperty("version")) { @@ -190,8 +194,16 @@ class NewAppUploadForm extends React.Component { }) }; + handleLowerOsVersionChange = (lowerOsVersion) => { + this.lowerOsVersion = lowerOsVersion; + }; + + handleUpperOsVersionChange = (upperOsVersion) => { + this.upperOsVersion = upperOsVersion; + }; + render() { - const {formConfig} = this.props; + const {formConfig, supportedOsVersions} = this.props; const {getFieldDecorator} = this.props.form; const { icons, @@ -354,6 +366,46 @@ class NewAppUploadForm extends React.Component { )} + {(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && ( + + {getFieldDecorator('supportedOS')( +
+ + + + + + +

-

+ + + + + + +
+ )} + + )} {getFieldDecorator('select', { rules: [{required: true, message: 'Please select price Type'}], @@ -419,22 +471,22 @@ class NewAppUploadForm extends React.Component { placeholder="key" value={data.key} onChange={(e) => { - metaData[index]['key'] = e.currentTarget.value; - this.setState({ - metaData - }) - }}/> + metaData[index]['key'] = e.currentTarget.value; + this.setState({ + metaData + }) + }}/> { - metaData[index].value = e.currentTarget.value; - this.setState({ - metaData - }); - }}/> + metaData[index].value = e.currentTarget.value; + this.setState({ + metaData + }); + }}/> )} { + getSupportedOsVersions = (deviceType) => { const config = this.props.context; axios.get( - window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + - "/admin/device-types/{deviceTypeName}/versions" + window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.deviceMgt + + `/admin/device-types/${deviceType}/versions` ).then(res => { if (res.status === 200) { - - // let tags = JSON.parse(res.data.data); - // this.setState({ - // tags: tags, - // loading: false, - // }); + 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."); @@ -116,9 +117,8 @@ class AddNewReleaseFormComponent extends React.Component { isSharedWithAllTenants, metaData: "string", releaseType: releaseType, - supportedOsVersions: "4-30" + supportedOsVersions: `${this.lowerOsVersion}-${this.upperOsVersion}` }; - data.append('binaryFile', binaryFile[0].originFileObj); data.append('icon', icon[0].originFileObj); data.append('screenshot1', screenshots[0].originFileObj); @@ -132,7 +132,7 @@ class AddNewReleaseFormComponent extends React.Component { data.append("applicationRelease", blob); - const url = window.location.origin+ config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/"+deviceType+"/ent-app/" + appId; + const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/" + deviceType + "/ent-app/" + appId; axios.post( url, @@ -151,7 +151,7 @@ class AddNewReleaseFormComponent extends React.Component { const uuid = res.data.data.uuid; - this.props.history.push('/publisher/apps/releases/'+uuid); + this.props.history.push('/publisher/apps/releases/' + uuid); } }).catch((error) => { @@ -182,8 +182,16 @@ class AddNewReleaseFormComponent extends React.Component { }); }; + handleLowerOsVersionChange = (lowerOsVersion) => { + this.lowerOsVersion = lowerOsVersion; + }; + + handleUpperOsVersionChange = (upperOsVersion) => { + this.upperOsVersion = upperOsVersion; + }; + render() { - const {isFree, icons, screenshots, loading, binaryFiles} = this.state; + const {isFree, icons, screenshots, loading, binaryFiles, supportedOsVersions} = this.state; const {getFieldDecorator} = this.props.form; return (
@@ -291,6 +299,45 @@ class AddNewReleaseFormComponent extends React.Component { )} + + {getFieldDecorator('supportedOS')( +
+ + + + + + +

-

+ + + + + + +
+ )} + + {getFieldDecorator('select', { rules: [{required: true, message: 'Please select price Type'}],