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

Add UI improvements to APPM UI

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

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/package.json

@@ -13,7 +13,7 @@
     "@ant-design/dark-theme": "^0.2.2",
     "@babel/polyfill": "^7.6.0",
     "acorn": "^6.2.0",
-    "antd": "^3.22.2",
+    "antd": "^3.23.6",
     "axios": "^0.19.0",
     "d3": "^5.9.7",
     "dagre": "^0.8.4",

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

@@ -35,6 +35,10 @@ class ReleaseView extends React.Component {
         }
     }
 
+    componentDidMount() {
+        console.log("mounted: Release view");
+    }
+
     render() {
         const {app, release} = this.props;
         const config = this.props.context;

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

@@ -61,6 +61,8 @@ class NewAppUploadForm extends React.Component {
             binaryFileHelperText: '',
             iconHelperText: '',
             screenshotHelperText: '',
+            osVersionsHelperText: '',
+            osVersionsValidateStatus: 'validating',
             metaData: []
         };
         this.lowerOsVersion = null;
@@ -95,10 +97,6 @@ class NewAppUploadForm extends React.Component {
                     releaseType: releaseType
                 };
 
-                if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
-                    release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
-                }
-
                 if (specificElements.hasOwnProperty("version")) {
                     release.version = values.version;
                 }
@@ -110,20 +108,51 @@ class NewAppUploadForm extends React.Component {
                 }
 
                 const data = new FormData();
+                let isFormValid = true; // flag to check if this form is valid
+
+                if (formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") {
+                    if(this.lowerOsVersion==null || this.upperOsVersion==null){
+                        isFormValid = false;
+                        this.setState({
+                            osVersionsHelperText: 'Please select supported OS versions',
+                            osVersionsValidateStatus: 'error',
+                        });
+                    }else if(this.lowerOsVersion>=this.upperOsVersion){
+                        isFormValid = false;
+                        this.setState({
+                            osVersionsHelperText: 'Please select valid range',
+                            osVersionsValidateStatus: 'error',
+                        });
+                    }else{
+                        release.supportedOsVersions = `${this.lowerOsVersion}-${this.upperOsVersion}`;
+                    }
+                }
 
                 if (specificElements.hasOwnProperty("binaryFile") && this.state.binaryFiles.length !== 1) {
+                    isFormValid = false;
                     this.setState({
                         binaryFileHelperText: 'Please select the application'
                     });
-                } else if (this.state.icons.length !== 1) {
+                }
+                if (this.state.icons.length !== 1) {
+                    isFormValid = false;
                     this.setState({
                         iconHelperText: 'Please select an icon'
                     });
-                } else if (this.state.screenshots.length !== 3) {
+                }
+                if (this.state.screenshots.length !== 3) {
+                    isFormValid = false;
                     this.setState({
                         screenshotHelperText: 'Please select 3 screenshots'
                     });
-                } else {
+                }
+                if (this.state.screenshots.length !== 3) {
+                    isFormValid = false;
+                    this.setState({
+                        screenshotHelperText: 'Please select 3 screenshots'
+                    });
+                }
+                if(isFormValid) {
                     data.append('icon', icon[0].originFileObj);
                     data.append('screenshot1', screenshots[0].originFileObj);
                     data.append('screenshot2', screenshots[1].originFileObj);
@@ -193,10 +222,18 @@ class NewAppUploadForm extends React.Component {
 
     handleLowerOsVersionChange = (lowerOsVersion) => {
         this.lowerOsVersion = lowerOsVersion;
+        this.setState({
+            osVersionsValidateStatus: 'validating',
+            osVersionsHelperText: ''
+        });
     };
 
     handleUpperOsVersionChange = (upperOsVersion) => {
         this.upperOsVersion = upperOsVersion;
+        this.setState({
+            osVersionsValidateStatus: 'validating',
+            osVersionsHelperText: ''
+        });
     };
 
     render() {
@@ -212,7 +249,9 @@ class NewAppUploadForm extends React.Component {
             binaryFileHelperText,
             iconHelperText,
             screenshotHelperText,
-            metaData
+            metaData,
+            osVersionsHelperText,
+            osVersionsValidateStatus
         } = this.state;
         const uploadButton = (
             <div>
@@ -361,7 +400,11 @@ class NewAppUploadForm extends React.Component {
                             </Form.Item>
 
                             {(formConfig.installationType !== "WEB_CLIP" && formConfig.installationType !== "CUSTOM") && (
-                                <Form.Item {...formItemLayout} label="Supported OS Versions">
+                                <Form.Item
+                                    {...formItemLayout}
+                                    label="Supported OS Versions"
+                                    validateStatus={osVersionsValidateStatus}
+                                    help={osVersionsHelperText}>
                                     {getFieldDecorator('supportedOS')(
                                         <div>
                                             <InputGroup>
@@ -436,7 +479,6 @@ class NewAppUploadForm extends React.Component {
                                         required: true,
                                         message: 'Please select'
                                     }],
-                                    initialValue: false
                                 })(
                                     <Switch checkedChildren={<Icon type="check"/>}
                                             unCheckedChildren={<Icon type="close"/>}
@@ -444,13 +486,7 @@ class NewAppUploadForm extends React.Component {
                                 )}
                             </Form.Item>
                             <Form.Item {...formItemLayout} label="Meta Data">
-                                {getFieldDecorator('meta', {
+                                {getFieldDecorator('meta', {})(
-                                    rules: [{
-                                        required: true,
-                                        message: 'Please fill empty fields'
-                                    }],
-                                    initialValue: false
-                                })(
                                     <div>
                                         {
                                             metaData.map((data, index) => {

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/ReleaseView.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Divider, Row, Col, Typography, Button, Rate, notification} from "antd";
+import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon} from "antd";
 import "../../../App.css";
 import ImgViewer from "../../apps/release/images/ImgViewer";
 import StarRatings from "react-star-ratings";
@@ -89,13 +89,6 @@ class ReleaseView extends React.Component {
         });
     };
 
-
-    showAppInstallModal = () => {
-        this.setState({
-            appInstallModalVisible: true
-        });
-    };
-
     closeAppOperationModal = () => {
         this.setState({
             appInstallModalVisible: false,
@@ -103,10 +96,16 @@ class ReleaseView extends React.Component {
         });
     };
 
-    showAppUninstallModal = () => {
+    handleSubscribeClick = (e) => {
+        if (e.key === "install") {
             this.setState({
-             appUninstallModalVisible: true
+                appInstallModalVisible: true // display app install modal
-        });
+            })
+        } else if (e.key === "uninstall") {
+            this.setState({
+                appUninstallModalVisible: true // display app uninstall modal
+            })
+        }
     };
 
     render() {
@@ -119,6 +118,13 @@ class ReleaseView extends React.Component {
         } catch (e) {
 
         }
+        const menu = (
+            <Menu onClick={this.handleSubscribeClick}>
+                <Menu.Item key="install">Install</Menu.Item>
+                <Menu.Item key="uninstall">Uninstall</Menu.Item>
+            </Menu>
+        );
+
 
         return (
             <div>
@@ -152,17 +158,14 @@ class ReleaseView extends React.Component {
                             />
                         </Col>
                         <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
-                            <div>
+                            <div style={{
-                                <Button.Group style={{float: "right"}}>
+                                textAlign: "right"
-                                    <Button onClick={this.showAppInstallModal} loading={this.state.loading}
+                            }}>
-                                            htmlType="button" type="primary" icon="download">Install</Button>
+                                <Dropdown overlay={menu}>
-                                </Button.Group>
+                                    <Button type="primary">
-                            </div>
+                                        Subscribe <Icon type="down"/>
-                            <div>
+                                    </Button>
-                                <Button.Group style={{float: "right",marginRight:'3%'}}>
+                                </Dropdown>
-                                    <Button onClick={this.showAppUninstallModal} loading={this.state.loading}
-                                            htmlType="button" type="primary" icon="delete">UnInstall</Button>
-                                </Button.Group>
                             </div>
                         </Col>
                     </Row>

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/components/apps/release/install/installModalFooter/InstallModalFooter.js

@@ -17,7 +17,7 @@
  */
 
 import React from "react";
-import {Button, DatePicker} from "antd";
+import {Button, DatePicker, Checkbox} from "antd";
 
 class InstallModalFooter extends React.Component {
     constructor(props) {
@@ -34,24 +34,19 @@ class InstallModalFooter extends React.Component{
         });
     };
 
-    showScheduledInstall = ()=>{
+    toggleScheduledInstall = () => {
         this.setState({
-            isScheduledInstallVisible: true
+            isScheduledInstallVisible: !this.state.isScheduledInstallVisible
-        })
-    };
-
-    hideScheduledInstall = ()=>{
-        this.setState({
-            isScheduledInstallVisible: false
         })
     };
 
     triggerInstallOperation = () => {
-        this.props.operation();
+        const {scheduledTime, isScheduledInstallVisible} = this.state;
-    };
+        if (isScheduledInstallVisible && scheduledTime != null) {
-    triggerScheduledInstallOperation = () =>{
-        const {scheduledTime} =this.state;
             this.props.operation(scheduledTime);
+        } else {
+            this.props.operation();
+        }
     };
 
     render() {
@@ -60,38 +55,30 @@ class InstallModalFooter extends React.Component{
         return (
             <div>
                 <div style={{
-                  textAlign: "right",
+                    textAlign: "right"
-                  display: (!isScheduledInstallVisible)?'block':'none'
                 }}>
-                  <Button style={{margin: 5}} disabled={disabled} htmlType="button" type="primary"
+                    <div style={{margin: 8}}>
-                          onClick={this.triggerInstallOperation}>
+                        <Checkbox checked={this.state.isScheduledInstallVisible} onChange={this.toggleScheduledInstall}>
-                      {type}
+                            Schedule {type}
-                  </Button>
+                        </Checkbox>
-                  <Button style={{margin: 5}} disabled={disabled} htmlType="button"
-                          onClick={this.showScheduledInstall}>
-                      Scheduled {type}
-                  </Button>
                     </div>
-              <div style={{
+                    <span style={{
-                  textAlign: "right",
+                        display: (isScheduledInstallVisible) ? 'inline' : 'none'
-                  display: (isScheduledInstallVisible)?'block':'none'
                     }}>
                         <DatePicker showTime
                                     placeholder="Select Time"
                                     format="YYYY-MM-DDTHH:mm"
                                     onChange={this.onDateTimeChange}/>
-                  <Button disabled={scheduledTime == null}
+                    </span>
-                          style={{margin: 5}}
+                    <Button style={{margin: 5}}
+                            disabled={disabled || (isScheduledInstallVisible && scheduledTime == null)}
                             htmlType="button"
                             type="primary"
-                          onClick={this.triggerScheduledInstallOperation}>
+                            onClick={this.triggerInstallOperation}>
-                      Schedule
+                        {type}
-                  </Button>
-                  <Button style={{margin: 5}} htmlType="button"
-                          onClick={this.hideScheduledInstall}>
-                      Cancel
                     </Button>
                 </div>
+
             </div>
         );
     }

components/application-mgt/org.wso2.carbon.device.application.mgt.store.ui/react-app/src/pages/Login.js

@@ -101,7 +101,12 @@ class NormalLoginForm extends React.Component {
                 axios.post(window.location.origin + config.serverConfig.loginUri, request
                 ).then(res => {
                     if (res.status === 200) {
-                        window.location = window.location.origin+ "/store";
+                        let redirectUrl = window.location.origin + "/store";
+                        const searchParams = new URLSearchParams(window.location.search);
+                        if (searchParams.has("redirect")) {
+                            redirectUrl = searchParams.get("redirect");
+                        }
+                        window.location = redirectUrl;
                     }
                 }).catch(function (error) {
                     handleApiError(error, "Error occurred while trying to load groups.");
@@ -158,7 +163,8 @@ class NormalLoginForm extends React.Component {
                     )}
                     <br/>
                     <a className="login-form-forgot" href="">Forgot password</a>
-                    <Button loading={this.state.loading} block type="primary" htmlType="submit" className="login-form-button">
+                    <Button loading={this.state.loading} block type="primary" htmlType="submit"
+                            className="login-form-button">
                         Log in
                     </Button>
                 </Form.Item>