From 88fed3e86e388bad94151bf26ff7030886e0b24f Mon Sep 17 00:00:00 2001 From: nipun Date: Fri, 11 Oct 2019 06:02:02 +0530 Subject: [PATCH 1/5] Modify the add release component of the APPM publisher --- .../react-app/src/App.css | 2 +- .../components/apps/release/ReleaseView.js | 4 +- .../components/new-release/AddReleaseForm.js | 376 +++--------------- .../add-new-release/AddNewRelease.js | 14 +- .../react-app/src/App.css | 2 +- .../apps/release/images/ImgViewer.js | 4 +- 6 files changed, 76 insertions(+), 326 deletions(-) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css index 532442bc094..d52de9d8dcd 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css @@ -35,7 +35,7 @@ .release .release-screenshot img{ height:450px; - border-radius: 15px; + border-radius: 25px; padding: 15px; } diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js index dcf97a2204b..0c208c776b6 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js @@ -127,9 +127,9 @@ class ReleaseView extends React.Component { - {release.screenshots.map((screenshotUrl) => { + {release.screenshots.map((screenshotUrl, index) => { return ( -
+
) diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js index 200cf9e7411..8d26338f9d5 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/new-release/AddReleaseForm.js @@ -17,57 +17,26 @@ */ import React from "react"; -import { - Card, - Button, - message, - Row, - Col, - Input, - Icon, - Select, - Switch, - Form, - Upload, - Divider, - notification, - Spin, InputNumber -} from "antd"; +import {Form, notification, Spin,} from "antd"; import axios from "axios"; import {withRouter} from 'react-router-dom' import {withConfigContext} from "../../context/ConfigContext"; import {handleApiError} from "../../js/Utils"; - -const {Option} = Select; -const {TextArea} = Input; -const InputGroup = Input.Group; - -const formItemLayout = { - labelCol: { - span: 8, - }, - wrapperCol: { - span: 16, - }, -}; +import NewAppUploadForm from "../new-app/subForms/NewAppUploadForm"; class AddNewReleaseFormComponent extends React.Component { constructor(props) { super(props); this.state = { - current: 0, - categories: [], - tags: [], - icons: [], - screenshots: [], loading: false, - binaryFiles: [], isFree: true, - supportedOsVersions: [] + supportedOsVersions: [], + application: null, + release: null, + isError: false, + deviceType: null }; - this.lowerOsVersion = null; - this.upperOsVersion = null; } componentDidMount() { @@ -95,309 +64,78 @@ class AddNewReleaseFormComponent extends React.Component { }); }; - handleSubmit = e => { + onSuccessReleaseData = (releaseData) => { const config = this.props.context; - e.preventDefault(); const {appId, deviceType} = this.props; + this.setState({ + loading: true, + isError: false + }); + const {data, release} = releaseData; + const {formConfig} = this.props; + const {price} = release; - 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(); + release.subMethod = (price === 0) ? "FREE" : "PAID"; - //add release data - const release = { - description: releaseDescription, - price: (price === undefined) ? 0 : parseInt(price), - isSharedWithAllTenants, - metaData: "[]", - releaseType: releaseType, - supportedOsVersions: `${this.lowerOsVersion}-${this.upperOsVersion}` - }; - 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(formConfig.jsonPayloadName, blob); - const json = JSON.stringify(release); - const blob = new Blob([json], { - type: 'application/json' + const url = window.location.origin + config.serverConfig.invoker.uri + config.serverConfig.invoker.publisher + + "/applications/" + deviceType + formConfig.endpoint + "/" + appId; + axios.post( + url, + data + ).then(res => { + if (res.status === 201) { + this.setState({ + loading: false, }); - data.append("applicationRelease", blob); - - const url = window.location.origin + config.serverConfig.invoker.uri + - config.serverConfig.invoker.publisher + "/applications/" + deviceType + "/ent-app/" + appId; - - axios.post( - url, - data - ).then(res => { - if (res.status === 201) { - this.setState({ - loading: false, - }); - - notification["success"]({ - message: "Done!", - description: - "New release was added successfully", - }); - - const uuid = res.data.data.uuid; - - this.props.history.push('/publisher/apps/releases/' + uuid); - } + notification["success"]({ + message: "Done!", + description: + "New release was added successfully", + }); + const uuid = res.data.data.uuid; + this.props.history.push('/publisher/apps/releases/' + uuid); - }).catch((error) => { - handleApiError(error, "Sorry, we were unable to complete your request."); - this.setState({ - loading: false - }); + } else { + this.setState({ + loading: false, + isError: true, }); } + }).catch((error) => { + handleApiError(error, "Sorry, we were unable to complete your request."); + this.setState({ + loading: false, + isError: true, + }); }); - }; - - normFile = 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}); - - handlePriceTypeChange = (value) => { - this.setState({ - isFree: (value === 'free') - }); - }; - handleLowerOsVersionChange = (lowerOsVersion) => { - this.lowerOsVersion = lowerOsVersion; }; - handleUpperOsVersionChange = (upperOsVersion) => { - this.upperOsVersion = upperOsVersion; + onClickBackButton = () => { + this.props.history.push('/publisher/apps/'); }; render() { - const {isFree, icons, screenshots, loading, binaryFiles, supportedOsVersions} = this.state; - const {getFieldDecorator} = this.props.form; + const {loading, supportedOsVersions} = this.state; + const {formConfig} = this.props; return (
- - - -
- - - - {getFieldDecorator('binaryFile', { - valuePropName: 'binaryFile', - getValueFromEvent: this.normFile, - required: true, - message: 'Please select application' - })( - false} - > - {binaryFiles.length !== 1 && ( - - )} - , - )} - - - - {getFieldDecorator('icon', { - valuePropName: 'icon', - getValueFromEvent: this.normFile, - required: true, - message: 'Please select a icon' - })( - false} - > - {icons.length !== 1 && ( - - )} - , - )} - - - - - - - - - - {getFieldDecorator('screenshots', { - valuePropName: 'icon', - getValueFromEvent: this.normFile, - required: true, - message: 'Please select a icon' - })( - false} - multiple - > - - {screenshots.length < 3 && ( - - )} - - - , - )} - - - - {getFieldDecorator('releaseType', { - rules: [{ - required: true, - message: 'Please input the Release Type' - }], - })( - - )} - - - - {getFieldDecorator('releaseDescription', { - rules: [{ - required: true, - message: 'Please enter a description for release' - }], - })( -