Add supported OS versions to add new app form in APPM UI

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 (
             <div>
                 <Spin tip="Uploading..." spinning={loading}>
@@ -142,6 +170,7 @@ class AddNewAppFormComponent extends React.Component {
                                 <div style={{display: (current === 1 ? 'unset' : 'none')}}>
                                     <NewAppUploadForm
                                         formConfig={formConfig}
+                                        supportedOsVersions={supportedOsVersions}
                                         onSuccessReleaseData={this.onSuccessReleaseData}
                                         onClickBackButton={this.onClickBackButton}/>
                                 </div>

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 (
             <div>
                 <Row>
@@ -186,8 +183,7 @@ class NewAppDetailsForm extends React.Component {
                         <Form
                             labelAlign="right"
                             layout="horizontal"
-                            onSubmit={this.handleSubmit}
-                        >
+                            onSubmit={this.handleSubmit}>
                             {formConfig.installationType !== "WEB_CLIP" && (
                                 <Form.Item {...formItemLayout} label="Device Type">
                                     {getFieldDecorator('deviceType', {

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 {
                                 )}
                             </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">
                                 {getFieldDecorator('select', {
                                     rules: [{required: true, message: 'Please select price Type'}],

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js

@@ -63,10 +63,37 @@ class AddNewReleaseFormComponent extends React.Component {
             screenshots: [],
             loading: false,
             binaryFiles: [],
-            isFree: true
+            isFree: true,
+            supportedOsVersions: []
         };
     }
 
+    componentDidMount() {
+        this.getSupportedOsVersions();
+    }
+
+    getSupportedOsVersions = () => {
+        const config = this.props.context;
+        axios.get(
+            window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher +
+            "/admin/device-types/{deviceTypeName}/versions"
+        ).then(res => {
+            if (res.status === 200) {
+
+                // let tags = JSON.parse(res.data.data);
+                // this.setState({
+                //     tags: tags,
+                //     loading: false,
+                // });
+            }
+        }).catch((error) => {
+            handleApiError(error, "Error occurred while trying to load supported OS versions.");
+            this.setState({
+                loading: false
+            });
+        });
+    };
+
     handleSubmit = e => {
         const config = this.props.context;
         e.preventDefault();