Complete add app functionality in APPM UI

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppDetailsDrawer.js

@@ -41,7 +41,7 @@ class AppDetailsDrawer extends React.Component {
                     <br/>
                     <br/>
                     <span>
-                    {app.appCategories.map(category => {
+                    {app.categories.map(category => {
                         return (
                             <Tag color="blue" key={category} style={{paddingBottom: 5}}>
                                 {category}

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/list-apps/AppsTable.js

@@ -28,10 +28,10 @@ const columns = [
     },
     {
         title: 'Categories',
-        dataIndex: 'appCategories',
+        dataIndex: 'categories',
-        render: appCategories => (
+        render: categories => (
             <span>
-                {appCategories.map(category => {
+                {categories.map(category => {
                     return (
                         <Tag color="blue" key={category}>
                             {category}
@@ -104,17 +104,13 @@ class AppsTable extends React.Component {
            params.page = 1;
         }
 
-        const extraParams = {
+        const data = {
             offset: 10 * (params.page - 1),
             limit: 10
         };
-        // note: encode with '%26' not '&'
-        const encodedExtraParams = Object.keys(extraParams).map(key => key + '=' + extraParams[key]).join('&');
-        const data = {
-        };
 
        axios.post(
-            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications?"+encodedExtraParams,
+            config.serverConfig.protocol + "://"+config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri +config.serverConfig.invoker.publisher+"/applications",
             data,
             {
                 headers: { 'X-Platform': config.serverConfig.platform }

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

@@ -121,30 +121,23 @@ class AddNewAppFormComponent extends React.Component {
                 this.setState({
                     loading: true
                 });
-                const {name, description, appCategories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription} = values;
+                const {name, description, categories, tags, price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription,releaseType} = values;
                 const application = {
                     name,
                     description,
-                    appCategories,
+                    categories,
-                    subType: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID",
+                    subMethod: (price === undefined || parseInt(price) === 0) ? "FREE" : "PAID",
                     tags,
                     unrestrictedRoles: [],
-                    // deviceType,
-                    // entAppReleaseWrappers: [{
-                    //     description,
-                    //     price: (price === undefined) ? 0 : parseInt(price),
-                    //     isSharedWithAllTenants,
-                    //     metaData: "string",
-                    //     supportedOsVersions: "4.0-10.0"
-                    // }]
                 };
 
                 const data = new FormData();
 
-                if (formConfig.deviceType === "WEB_CLIP") {
+                if (formConfig.installationType !== "WEB_CLIP") {
-                    application.deviceType = "ALL";
-                } else {
                     application.deviceType = values.deviceType;
+                }else{
+                    application.type = "WEB_CLIP";
+                    application.deviceType ="ALL";
                 }
 
                 if (specificElements.hasOwnProperty("binaryFile")) {
@@ -157,9 +150,13 @@ class AddNewAppFormComponent extends React.Component {
                     price: (price === undefined) ? 0 : parseInt(price),
                     isSharedWithAllTenants,
                     metaData: "string",
-                    supportedOsVersions: "4.0-10.0"
+                    releaseType: releaseType
                 };
 
+                if (formConfig.installationType !== "WEB_CLIP") {
+                    release.supportedOsVersions = "4.0-10.0";
+                }
+
                 if (specificElements.hasOwnProperty("version")) {
                     release.version = values.version;
                 }
@@ -182,12 +179,11 @@ class AddNewAppFormComponent extends React.Component {
                 const blob = new Blob([json], {
                     type: 'application/json'
                 });
-                data.append('application', blob);
+                data.append(formConfig.jsonPayloadName, blob);
 
                 console.log(application);
 
-                const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications"+formConfig.endpoint;
+                const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications" + formConfig.endpoint;
-
 
                 axios.post(
                     url,
@@ -319,7 +315,7 @@ class AddNewAppFormComponent extends React.Component {
                                                     )}
                                                 </Form.Item>
                                                 <Form.Item {...formItemLayout} label="Categories">
-                                                    {getFieldDecorator('appCategories', {
+                                                    {getFieldDecorator('categories', {
                                                         rules: [{
                                                             required: true,
                                                             message: 'Please select categories'
@@ -385,11 +381,6 @@ class AddNewAppFormComponent extends React.Component {
                                                         </Row>
                                                     </InputGroup>
                                                 </Form.Item>
-                                                <Form.Item wrapperCol={{span: 12, offset: 5}}>
-                                                    <Button type="primary" htmlType="submit">
-                                                        Submit
-                                                    </Button>
-                                                </Form.Item>
                                             </div>
                                         </Col>
                                         <Col span={12} style={{paddingLeft: 20}}>
@@ -405,7 +396,7 @@ class AddNewAppFormComponent extends React.Component {
                                                     })(
                                                         <Upload
                                                             name="binaryFile"
-                                                            onChange={this.handleIconChange}
+                                                            onChange={this.handleBinaryFileChange}
                                                             beforeUpload={() => false}
                                                         >
                                                             {binaryFiles.length !== 1 && (
@@ -509,6 +500,17 @@ class AddNewAppFormComponent extends React.Component {
                                                 </Form.Item>
                                             )}
 
+                                            <Form.Item {...formItemLayout} label="Release Type">
+                                                {getFieldDecorator('releaseType', {
+                                                    rules: [{
+                                                        required: true,
+                                                        message: 'Please input the Release Type'
+                                                    }],
+                                                })(
+                                                    <Input placeholder="Release Type"/>
+                                                )}
+                                            </Form.Item>
+
                                             <Form.Item {...formItemLayout} label="Description">
                                                 {getFieldDecorator('releaseDescription', {
                                                     rules: [{
@@ -547,7 +549,11 @@ class AddNewAppFormComponent extends React.Component {
                                         </Col>
 
                                     </Row>
-
+                                    <Form.Item style={{float: "right"}}>
+                                        <Button type="primary" htmlType="submit">
+                                            Submit
+                                        </Button>
+                                    </Form.Item>
                                 </Form>
                             </Card>
                         </Col>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewEnterpriseApp.js

@@ -11,6 +11,7 @@ const Paragraph = Typography;
 const formConfig = {
     installationType: "ENTERPRISE",
     endpoint: "/ent-app",
+    jsonPayloadName:"application",
     releaseWrapperName: "entAppReleaseWrappers",
     specificElements: {
         binaryFile: {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewPublicApp.js

@@ -11,10 +11,14 @@ const Paragraph = Typography;
 const formConfig = {
     installationType: "PUBLIC",
     endpoint: "/public-app",
+    jsonPayloadName:"public-app",
     releaseWrapperName: "publicAppReleaseWrappers",
     specificElements: {
         packageName : {
             required: true
+        },
+        version : {
+            required: true
         }
     }
 };

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/add-new-app/AddNewWebClip.js

@@ -11,10 +11,14 @@ const Paragraph = Typography;
 const formConfig = {
     installationType: "WEB_CLIP",
     endpoint: "/web-app",
-    releaseWrapperName: "webClipReleaseWrappers",
+    jsonPayloadName:"webapp",
+    releaseWrapperName: "webAppReleaseWrappers",
     specificElements: {
         url : {
             required: true
+        },
+        version : {
+            required: true
         }
     }
 };