From f710c5489a4015f602a0295a7b9f99fbdf4ec5fe Mon Sep 17 00:00:00 2001 From: Jayasanka Weerasinghe Date: Wed, 9 Oct 2019 07:35:06 +0000 Subject: [PATCH] Add UI improvements to edit release view in APPM UI The following changes are with this commit. - Add previews of selected images to upload - Add supported OS versions field --- .../components/apps/release/ReleaseView.js | 9 + .../apps/release/edit-release/EditRelease.js | 210 ++++++++++++++---- .../lifeCycleDetailsModal.js | 1 - .../AddNewPage/AddNewPage.js | 1 - .../android-enterprise/GooglePlayIframe.js | 2 - .../ManagedConfigurationsIframe.js | 4 - .../manage/android-enterprise/Pages/Pages.js | 1 - .../new-app/subForms/NewAppUploadForm.js | 17 +- .../pages/dashboard/apps/release/Release.js | 33 ++- .../components/apps/release/ReleaseView.js | 6 +- .../apps/release/install/DeviceUninstall.js | 2 +- .../apps/release/install/GroupUninstall.js | 2 +- .../apps/release/install/RoleUninstall.js | 2 +- .../apps/release/install/UserUninstall.js | 2 +- .../installModalFooter/InstallModalFooter.js | 14 +- .../singleReview/editReview/EditReview.js | 1 - .../react-app/src/js/Utils.js | 1 - .../react-app/src/pages/Login.js | 1 - 18 files changed, 222 insertions(+), 87 deletions(-) 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 efc71c8272..cd7a022158 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 @@ -28,6 +28,13 @@ import {withConfigContext} from "../../../context/ConfigContext"; const {Title, Text, Paragraph} = Typography; class ReleaseView extends React.Component { + constructor(props) { + super(props); + this.state = { + + } + } + render() { const {app, release} = this.props; const config = this.props.context; @@ -88,8 +95,10 @@ class ReleaseView extends React.Component { diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js index ecc6000ffe..4b1c5f97cf 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/edit-release/EditRelease.js @@ -17,12 +17,28 @@ */ import React from "react"; -import {Modal, Button, Icon, notification, Spin, Tooltip, Upload, Input, Switch, Form, Divider, Row, Col} from 'antd'; +import { + Modal, + Button, + Icon, + notification, + Spin, + Tooltip, + Upload, + Input, + Switch, + Form, + Divider, + Row, + Col, + Select +} from 'antd'; import axios from "axios"; import {withConfigContext} from "../../../../context/ConfigContext"; const {TextArea} = Input; const InputGroup = Input.Group; +const {Option} = Select; const formItemLayout = { labelCol: { @@ -33,6 +49,15 @@ const formItemLayout = { }, }; +function getBase64(file) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); +} + class EditReleaseModal extends React.Component { constructor(props) { @@ -51,6 +76,8 @@ class EditReleaseModal extends React.Component { specificElements: {} } }; + this.lowerOsVersion = null; + this.upperOsVersion = null; } componentDidMount = () => { @@ -117,15 +144,16 @@ class EditReleaseModal extends React.Component { showModal = () => { + const config = this.props.context; const {app, release} = this.props; const {formConfig} = this.state; const {specificElements} = formConfig; let metaData = []; - - try{ - metaData =JSON.parse(release.metaData); - }catch (e) { - + + try { + metaData = JSON.parse(release.metaData); + } catch (e) { + } this.props.form.setFields({ @@ -143,14 +171,19 @@ class EditReleaseModal extends React.Component { } }); - // if (specificElements.hasOwnProperty("packageName")) { - // this.props.form.setFields({ - // packageName: { - // value: app.packageName - // } - // }); - // } - + if ((config.deviceTypes.mobileTypes.includes(this.props.deviceType))) { + const osVersions = release.supportedOsVersions.split("-"); + this.lowerOsVersion = osVersions[0]; + this.upperOsVersion = osVersions[1]; + this.props.form.setFields({ + lowerOsVersion: { + value: osVersions[0] + }, + upperOsVersion: { + value: osVersions[1] + } + }); + } if (specificElements.hasOwnProperty("version")) { this.props.form.setFields({ version: { @@ -232,9 +265,12 @@ class EditReleaseModal extends React.Component { isSharedWithAllTenants, metaData: JSON.stringify(this.state.metaData), releaseType: releaseType, - supportedOsVersions: "4-30" }; + if ((config.deviceTypes.mobileTypes.includes(this.props.deviceType))) { + release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`; + } + if (specificElements.hasOwnProperty("binaryFile") && binaryFiles.length === 1) { data.append('binaryFile', binaryFiles[0].originFileObj); } @@ -322,10 +358,50 @@ class EditReleaseModal extends React.Component { }) }; + handlePreviewCancel = () => this.setState({previewVisible: false}); + + handlePreview = async file => { + if (!file.url && !file.preview) { + file.preview = await getBase64(file.originFileObj); + } + + this.setState({ + previewImage: file.url || file.preview, + previewVisible: true, + }); + }; + + handleLowerOsVersionChange = (lowerOsVersion) => { + this.lowerOsVersion = lowerOsVersion; + }; + + handleUpperOsVersionChange = (upperOsVersion) => { + this.upperOsVersion = upperOsVersion; + }; + render() { - const {formConfig, icons, screenshots, loading, binaryFiles, metaData} = this.state; + const { + formConfig, + icons, + screenshots, + loading, + binaryFiles, + metaData, + previewImage, + previewVisible, + binaryFileHelperText, + iconHelperText, + screenshotHelperText + } = this.state; const {getFieldDecorator} = this.props.form; - const {isAppUpdatable} = this.props; + const {isAppUpdatable, supportedOsVersions, deviceType} = this.props; + const config = this.props.context; + const uploadButton = ( +
+ +
Select
+
+ ); return (
@@ -340,8 +416,8 @@ class EditReleaseModal extends React.Component { title="Edit release" visible={this.state.visible} footer={null} - onCancel={this.handleCancel} - > + width={580} + onCancel={this.handleCancel}>
)} - {/*{formConfig.specificElements.hasOwnProperty("packageName") && (*/} - {/* */} - {/* {getFieldDecorator('packageName', {*/} - {/* rules: [{*/} - {/* required: true,*/} - {/* message: 'Please input the package name'*/} - {/* }],*/} - {/* })(*/} - {/* */} - {/* )}*/} - {/* */} - {/*)}*/} - {formConfig.specificElements.hasOwnProperty("url") && ( {getFieldDecorator('url', { @@ -418,19 +481,15 @@ class EditReleaseModal extends React.Component { })( false} - > - {icons.length !== 1 && ( - - )} + onPreview={this.handlePreview}> + {icons.length === 1 ? null : uploadButton} , )} - {getFieldDecorator('screenshots', { valuePropName: 'icon', @@ -440,15 +499,11 @@ class EditReleaseModal extends React.Component { })( false} - multiple - > - {screenshots.length < 3 && ( - - )} + onPreview={this.handlePreview}> + {screenshots.length >= 3 ? null : uploadButton} , )} @@ -475,7 +530,65 @@ class EditReleaseModal extends React.Component { rows={5}/> )} - + {(config.deviceTypes.mobileTypes.includes(deviceType)) && ( + + {getFieldDecorator('supportedOS')( +
+ + + + + {getFieldDecorator('lowerOsVersion', { + rules: [{ + required: true, + message: 'Please select Value' + }], + })( + + )} + + + +

-

+ + + + {getFieldDecorator('upperOsVersion', { + rules: [{ + required: true, + message: 'Please select Value' + }], + })( + + )} + + + + + +
+ )} + + )} {getFieldDecorator('price', { rules: [{ @@ -575,6 +688,9 @@ class EditReleaseModal extends React.Component {
+ + Preview Image +
); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js index 9d838883d8..89c47fa2a2 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/lifeCycle/lifeCycleDetailsModal/lifeCycleDetailsModal.js @@ -37,7 +37,6 @@ class LifeCycleDetailsModal extends React.Component { }; handleCancel = e => { - console.log(e); this.setState({ visible: false, }); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/AddNewPage/AddNewPage.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/AddNewPage/AddNewPage.js index 29a636d293..c100486ea4 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/AddNewPage/AddNewPage.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/AddNewPage/AddNewPage.js @@ -39,7 +39,6 @@ class AddNewPage extends React.Component { handleCancel = e => { - console.log(e); this.setState({ visible: false, }); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/GooglePlayIframe.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/GooglePlayIframe.js index 7460de2796..4d6ef4094e 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/GooglePlayIframe.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/GooglePlayIframe.js @@ -37,14 +37,12 @@ class GooglePlayIframe extends React.Component { }; handleOk = e => { - console.log(e); this.setState({ visible: false, }); }; handleCancel = e => { - console.log(e); this.setState({ visible: false, }); diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/ManagedConfigurationsIframe/ManagedConfigurationsIframe.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/ManagedConfigurationsIframe/ManagedConfigurationsIframe.js index 67b3804958..3cda03c629 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/ManagedConfigurationsIframe/ManagedConfigurationsIframe.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/ManagedConfigurationsIframe/ManagedConfigurationsIframe.js @@ -43,14 +43,12 @@ class ManagedConfigurationsIframe extends React.Component { }; handleOk = e => { - console.log(e); this.setState({ visible: false, }); }; handleCancel = e => { - console.log(e); this.setState({ visible: false, }); @@ -116,7 +114,6 @@ class ManagedConfigurationsIframe extends React.Component { updateConfig = (method, event) => { const {packageName} = this.props; this.setState({loading: true}); - console.log(event); const data = { mcmId: event.mcmId, @@ -151,7 +148,6 @@ class ManagedConfigurationsIframe extends React.Component { deleteConfig = (event) => { const {packageName} = this.props; this.setState({loading: true}); - console.log(event); //send request to the invoker axios.delete( diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/Pages/Pages.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/Pages/Pages.js index 1ee79513fd..0711ec10ab 100644 --- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/Pages/Pages.js +++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/manage/android-enterprise/Pages/Pages.js @@ -47,7 +47,6 @@ class Pages extends React.Component { rowSelection = { onChange: (selectedRowKeys, selectedRows) => { - // console.lohhhg(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows); this.setState({ selectedRows: selectedRows }) 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 3dcf2f169e..af7a9ec85e 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 @@ -84,9 +84,6 @@ class NewAppUploadForm extends React.Component { this.setState({ loading: true }); - - console.log(values); - const {price, isSharedWithAllTenants, binaryFile, icon, screenshots, releaseDescription, releaseType} = values; //add release data @@ -234,8 +231,7 @@ class NewAppUploadForm extends React.Component {
+ onSubmit={this.handleSubmit}> {formConfig.specificElements.hasOwnProperty("binaryFile") && ( false} - > + beforeUpload={() => false}> {binaryFiles.length !== 1 && ( )} -