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

Completed add release functionality in APPM UI

See merge request entgra/carbon-device-mgt!153

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

@@ -1,7 +1,8 @@
 import React from 'react';
-import {Drawer, Row, Col, Typography, Divider, Tag, Avatar, List} from 'antd';
+import {Drawer, Row, Col, Typography, Divider, Tag, Avatar, List, Button, Icon} from 'antd';
 import "../../../App.css";
 import DetailedRating from "../detailed-rating/DetailedRating";
+import {Link} from "react-router-dom";
 
 const {Text, Title, Paragraph} = Typography;
 
@@ -64,7 +65,9 @@ class AppDetailsDrawer extends React.Component {
                     })}
                     </span>
                     <Divider dashed={true}/>
-                    <Text strong={true}>Releases</Text>
+                    <Text strong={true}>Releases </Text>
+                    {/*display add new release only if app type is enterprise*/}
+                    {(app.type ==="ENTERPRISE") && (<Link to={`/publisher/apps/${app.id}/add-release`}><Button htmlType="button" size="small">Add new release</Button></Link>)}
                     <br/>
                     <List
                         itemLayout="horizontal"

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

@@ -1,12 +1,8 @@
 import React from "react";
 import {Avatar, Card, Col, Row, Table, Typography, Tag, Icon, message} from "antd";
-import {connect} from "react-redux";
-import {getApps} from "../../../js/actions";
 import axios from "axios";
 import config from "../../../../public/conf/config.json";
 
-const {Title} = Typography;
-
 const columns = [
     {
         title: '',
@@ -62,7 +58,7 @@ const columns = [
     },
     {
         title: 'Subscription',
-        dataIndex: 'subType'
+        dataIndex: 'subMethod'
     },
 ];
 

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

@@ -239,7 +239,7 @@ class AddNewAppFormComponent extends React.Component {
     };
 
     handleIconChange = ({fileList}) => this.setState({icons: fileList});
-    handleBinaryFileChange = ({fileList}) => this.setState({icons: fileList});
+    handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList});
 
     handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
 

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

@@ -0,0 +1,309 @@
+import React from "react";
+import "antd/dist/antd.css";
+import {
+    Card,
+    Button,
+    message,
+    Row,
+    Col,
+    Input,
+    Icon,
+    Select,
+    Switch,
+    Form,
+    Upload,
+    Divider,
+    notification,
+    Spin
+} from "antd";
+import axios from "axios";
+import {withRouter} from 'react-router-dom'
+import config from "../../../public/conf/config.json";
+
+const {Option} = Select;
+const {TextArea} = Input;
+const InputGroup = Input.Group;
+
+const formItemLayout = {
+    labelCol: {
+        span: 8,
+    },
+    wrapperCol: {
+        span: 16,
+    },
+};
+
+class AddNewReleaseFormComponent extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            current: 0,
+            categories: [],
+            tags: [],
+            icons: [],
+            screenshots: [],
+            loading: false,
+            binaryFiles: []
+        };
+    }
+
+    componentDidMount() {
+
+    }
+
+    handleSubmit = e => {
+        e.preventDefault();
+        const {appId} = this.props;
+
+        this.props.form.validateFields((err, values) => {
+            if (!err) {
+                this.setState({
+                    loading: true
+                });
+                const {price, isSharedWithAllTenants, icon, screenshots, releaseDescription, releaseType, binaryFile} = values;
+
+
+                const data = new FormData();
+
+                //add release data
+                const release = {
+                    description: releaseDescription,
+                    price: (price === undefined) ? 0 : parseInt(price),
+                    isSharedWithAllTenants,
+                    metaData: "string",
+                    releaseType: releaseType,
+                    supportedOsVersions: "4.0-10.0"
+                };
+
+                data.append('binaryFile', binaryFile[0].originFileObj);
+                data.append('icon', icon[0].originFileObj);
+                data.append('screenshot1', screenshots[0].originFileObj);
+                data.append('screenshot2', screenshots[1].originFileObj);
+                data.append('screenshot3', screenshots[2].originFileObj);
+
+                const json = JSON.stringify(release);
+                const blob = new Blob([json], {
+                    type: 'application/json'
+                });
+
+                data.append("applicationRelease", blob);
+
+                const url = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + "/applications/ent-app/" + appId;
+
+                axios.post(
+                    url,
+                    data,
+                    {
+                        headers: {
+                            'X-Platform': config.serverConfig.platform
+                        },
+                    }
+                ).then(res => {
+                    if (res.status === 201) {
+                        this.setState({
+                            loading: false,
+                        });
+
+                        notification["success"]({
+                            message: "Done!",
+                            description:
+                                "New release was added successfully",
+                        });
+
+                        console.log(res);
+
+                        const uuid = res.data.data.uuid;
+
+                        this.props.history.push('/publisher/apps/releases/'+uuid);
+                    }
+
+                }).catch((error) => {
+                    console.log(error);
+                    if (error.hasOwnProperty("response") && error.response.status === 401) {
+                        window.location.href = config.serverConfig.protocol + "://" + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + '/publisher/login';
+                    } else {
+                        notification["error"]({
+                            message: "Something went wrong!",
+                            description:
+                                "Sorry, we were unable to complete your request.",
+                        });
+
+                    }
+                    this.setState({
+                        loading: false
+                    });
+                    console.log(error);
+                });
+            }
+        });
+    };
+
+    normFile = e => {
+        console.log('Upload event:', e);
+        if (Array.isArray(e)) {
+            return e;
+        }
+        return e && e.fileList;
+    };
+
+    handleIconChange = ({fileList}) => this.setState({icons: fileList});
+    handleBinaryFileChange = ({fileList}) => this.setState({binaryFiles: fileList});
+
+    handleScreenshotChange = ({fileList}) => this.setState({screenshots: fileList});
+
+    render() {
+        const {categories, tags, icons, screenshots, loading, binaryFiles} = this.state;
+        const {getFieldDecorator} = this.props.form;
+        const {formConfig} = this.props;
+        return (
+            <div>
+                <Spin tip="Uploading..." spinning={loading}>
+                    <Row>
+                        <Col span={12} offset={6}>
+                            <Card>
+                                <Form labelAlign="left" layout="horizontal"
+                                      hideRequiredMark
+                                      onSubmit={this.handleSubmit}>
+                                    <Row>
+                                        <Col span={12} style={{paddingLeft: 20}}>
+                                            <Form.Item {...formItemLayout} label="Application">
+                                                {getFieldDecorator('binaryFile', {
+                                                    valuePropName: 'binaryFile',
+                                                    getValueFromEvent: this.normFile,
+                                                    required: true,
+                                                    message: 'Please select application'
+                                                })(
+                                                    <Upload
+                                                        name="binaryFile"
+                                                        onChange={this.handleBinaryFileChange}
+                                                        beforeUpload={() => false}
+                                                    >
+                                                        {binaryFiles.length !== 1 && (
+                                                            <Button>
+                                                                <Icon type="upload"/> Click to upload
+                                                            </Button>
+                                                        )}
+                                                    </Upload>,
+                                                )}
+                                            </Form.Item>
+
+                                            <Form.Item {...formItemLayout} label="Icon">
+                                                {getFieldDecorator('icon', {
+                                                    valuePropName: 'icon',
+                                                    getValueFromEvent: this.normFile,
+                                                    required: true,
+                                                    message: 'Please select a icon'
+                                                })(
+                                                    <Upload
+                                                        name="logo"
+                                                        onChange={this.handleIconChange}
+                                                        beforeUpload={() => false}
+                                                    >
+                                                        {icons.length !== 1 && (
+                                                            <Button>
+                                                                <Icon type="upload"/> Click to upload
+                                                            </Button>
+                                                        )}
+                                                    </Upload>,
+                                                )}
+                                            </Form.Item>
+
+                                            <Row style={{marginTop: 40}}>
+                                                <Col span={24}>
+
+                                                </Col>
+                                            </Row>
+
+                                            <Form.Item {...formItemLayout} label="Screenshots">
+                                                {getFieldDecorator('screenshots', {
+                                                    valuePropName: 'icon',
+                                                    getValueFromEvent: this.normFile,
+                                                    required: true,
+                                                    message: 'Please select a icon'
+                                                })(
+                                                    <Upload
+                                                        name="screenshots"
+                                                        onChange={this.handleScreenshotChange}
+                                                        beforeUpload={() => false}
+                                                        multiple
+                                                    >
+
+                                                        {screenshots.length < 3 && (
+                                                            <Button>
+                                                                <Icon type="upload"/> Click to upload
+                                                            </Button>
+                                                        )}
+
+
+                                                    </Upload>,
+                                                )}
+                                            </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: [{
+                                                        required: true,
+                                                        message: 'Please enter a description for release'
+                                                    }],
+                                                })(
+                                                    <TextArea placeholder="Enter a description for release" rows={5}/>
+                                                )}
+                                            </Form.Item>
+
+                                            <Form.Item {...formItemLayout} label="Price">
+                                                {getFieldDecorator('price', {
+                                                    rules: [{
+                                                        required: false
+                                                    }],
+                                                })(
+                                                    <Input prefix="$" placeholder="00.00"/>
+                                                )}
+                                            </Form.Item>
+
+                                            <Form.Item {...formItemLayout} label="Is Shared?">
+                                                {getFieldDecorator('isSharedWithAllTenants', {
+                                                    rules: [{
+                                                        required: true,
+                                                        message: 'Please select'
+                                                    }],
+                                                    initialValue: false
+                                                })(
+                                                    <Switch checkedChildren={<Icon type="check"/>}
+                                                            unCheckedChildren={<Icon type="close"/>}
+                                                    />
+                                                )}
+
+                                            </Form.Item>
+                                        </Col>
+
+                                    </Row>
+                                    <Form.Item style={{float: "right"}}>
+                                        <Button type="primary" htmlType="submit">
+                                            Submit
+                                        </Button>
+                                    </Form.Item>
+                                </Form>
+                            </Card>
+                        </Col>
+                    </Row>
+                </Spin>
+            </div>
+
+        );
+    }
+}
+
+const AddReleaseForm = withRouter(Form.create({name: 'add-new-app'})(AddNewReleaseFormComponent));
+export default AddReleaseForm;

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

@@ -11,6 +11,7 @@ import Mange from "./pages/dashboard/manage/Manage";
 import './index.css';
 import AddNewPublicApp from "./pages/dashboard/add-new-app/AddNewPublicApp";
 import AddNewWebClip from "./pages/dashboard/add-new-app/AddNewWebClip";
+import AddNewRelease from "./pages/dashboard/add-new-release/AddNewRelease";
 
 
 const routes = [
@@ -34,6 +35,11 @@ const routes = [
                 exact: true,
                 component: Release
             },
+            {
+                path: '/publisher/apps/:appId/add-release',
+                component: AddNewRelease,
+                exact: true
+            },
             {
                 path: '/publisher/add-new-app/enterprise',
                 component: AddNewEnterpriseApp,

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

@@ -0,0 +1,50 @@
+import React from "react";
+import "antd/dist/antd.css";
+import {
+    PageHeader,
+    Typography
+} from "antd";
+import AddNewAppForm from "../../../components/new-release/AddReleaseForm";
+
+const Paragraph = Typography;
+
+class AddNewRelease extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            current: 0,
+            categories: []
+        };
+    }
+
+    componentDidMount() {
+        // this.getCategories();
+    }
+
+    render() {
+        const {appId} = this.props.match.params;
+        return (
+            <div>
+                <PageHeader
+                    title="Add New Release"
+                >
+                    <div className="wrap">
+                        <div className="content">
+                            <Paragraph>
+                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempo.
+                            </Paragraph>
+                        </div>
+                    </div>
+                </PageHeader>
+                <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
+                    <AddNewAppForm appId={appId}/>
+                </div>
+
+            </div>
+
+        );
+    }
+}
+
+export default AddNewRelease;