Improve schedule install/ uninstall component's UI in APPM store

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.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>
         );
     }