create component to install app by users

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

@@ -16,6 +16,7 @@
     "d3": "^5.9.2",
     "dagre": "^0.8.4",
     "keymirror": "^0.1.1",
+    "lodash.debounce": "^4.0.8",
     "rc-viewer": "0.0.9",
     "react": "^16.8.4",
     "react-d3-graph": "^2.0.2",

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

@@ -8,6 +8,7 @@ import Reviews from "./review/Reviews";
 import AddReview from "./review/AddReview";
 import axios from "axios";
 import config from "../../../../public/conf/config.json";
+import AppInstallModal from "./install/AppInstallModal";
 
 const {Title, Text, Paragraph} = Typography;
 
@@ -15,15 +16,22 @@ class ReleaseView extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            loading: false
+            loading: false,
+            appInstallModalVisible: false
         }
     }
 
-    installApp = () =>{
+    installApp = (type,payload) => {
         const {uuid} = this.props.release;
-        const payload = ["admin"];
-        const request = "method=post&content-type=application/json&payload="+JSON.stringify(payload)+"&api-endpoint=/application-mgt-store/v1.0/subscription/install/"+uuid+"/user/install";
 
+        const parameters = {
+            method: "post",
+            'content-type': "application/json",
+            payload: JSON.stringify(payload),
+            'api-endpoint': "/application-mgt-store/v1.0/subscription/install/" + uuid + "/"+type+"/install"
+        };
+
+        const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
         this.setState({
             loading: true,
         });
@@ -32,7 +40,8 @@ class ReleaseView extends React.Component {
         ).then(res => {
             if (res.status === 201) {
                 this.setState({
-                    loading: false
+                    loading: false,
+                    appInstallModalVisible: false
                 });
                 notification["success"]({
                     message: 'Done!',
@@ -67,10 +76,24 @@ class ReleaseView extends React.Component {
         });
     };
 
+    showAppInstallModal = () => {
+        this.setState({
+            appInstallModalVisible: true
+        });
+    };
+
+    closeAppInstallModal = () => {
+        this.setState({
+            appInstallModalVisible: false
+        });
+    };
+
     render() {
         const release = this.props.release;
         return (
             <div>
+                <AppInstallModal uuid={release.uuid} visible={this.state.appInstallModalVisible}
+                                 onClose={this.closeAppInstallModal} onInstall={this.installApp}/>
                 <div className="release">
                     <Row>
                         <Col xl={4} sm={6} xs={8} className="release-icon">
@@ -91,7 +114,8 @@ class ReleaseView extends React.Component {
                         <Col xl={8} md={10} sm={24} xs={24} style={{float: "right"}}>
                             <div>
                                 <Button.Group style={{float: "right"}}>
-                                    <Button onClick={this.installApp} loading={this.state.loading}  htmlType="button" type="primary" icon="download">Install</Button>
+                                    <Button onClick={this.showAppInstallModal} loading={this.state.loading}
+                                            htmlType="button" type="primary" icon="download">Install</Button>
                                 </Button.Group>
                             </div>
                         </Col>

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

@@ -0,0 +1,37 @@
+import React from "react";
+import {Button, Modal, Tabs} from "antd";
+import UserInstall from "./UserInstall";
+
+const { TabPane } = Tabs;
+
+class AppInstallModal extends React.Component{
+    render() {
+        return (
+            <div>
+                <Modal
+                    title="Install App"
+                    visible={this.props.visible}
+                    // onOk={this.handleOk}
+                    onCancel={this.props.onClose}
+                >
+                    <Tabs defaultActiveKey="1">
+                        <TabPane tab="User" key="1">
+                            <UserInstall onInstall={this.props.onInstall}/>
+                        </TabPane>
+                        <TabPane tab="Device" key="2">
+                            Tab 2
+                        </TabPane>
+                        <TabPane tab="Role" key="3">
+                            Tab 3
+                        </TabPane>
+                        <TabPane tab="Group" key="4">
+                            Tab 3
+                        </TabPane>
+                    </Tabs>
+                </Modal>
+            </div>
+        );
+    }
+}
+
+export default AppInstallModal;

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

@@ -0,0 +1,115 @@
+import React from "react";
+import {Typography, Select, Spin, message, notification, Button} from "antd";
+import debounce from 'lodash.debounce';
+import axios from "axios";
+import config from "../../../../../public/conf/config.json";
+
+const {Text} = Typography;
+const {Option} = Select;
+
+
+class UserInstall extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.lastFetchId = 0;
+        this.fetchUser = debounce(this.fetchUser, 800);
+    }
+
+    state = {
+        data: [],
+        value: [],
+        fetching: false,
+    };
+
+    fetchUser = value => {
+        console.log('fetching user', value);
+        this.lastFetchId += 1;
+        const fetchId = this.lastFetchId;
+        this.setState({data: [], fetching: true});
+
+
+        const parameters = {
+            method: "get",
+            'content-type': "application/json",
+            payload: "{}",
+            'api-endpoint': "/device-mgt/v1.0/users/search?username=" + value
+        };
+
+        const request = Object.keys(parameters).map(key => key + '=' + parameters[key]).join('&');
+        console.log(request);
+        axios.post('https://' + config.serverConfig.hostname + ':' + config.serverConfig.httpsPort + config.serverConfig.invokerUri, request
+        ).then(res => {
+            if (res.status === 200) {
+                if (fetchId !== this.lastFetchId) {
+                    // for fetch callback order
+                    return;
+                }
+
+                console.log(res.data.data);
+
+                const data = res.data.data.users.map(user => ({
+                    text: user.username,
+                    value: user.username,
+                }));
+
+                this.setState({data, fetching: false});
+            }
+
+        }).catch((error) => {
+            if (error.response.hasOwnProperty(status) && error.response.status === 401) {
+                message.error('You are not logged in');
+                window.location.href = 'https://localhost:9443/publisher/login';
+            } else {
+                message.error('Something went wrong... :(');
+            }
+
+            this.setState({fetching: false});
+        });
+    };
+
+    handleChange = value => {
+        this.setState({
+            value,
+            data: [],
+            fetching: false,
+        });
+    };
+
+    install = () =>{
+        this.props.onInstall("user",this.state.data);
+    };
+
+    render() {
+
+        const {fetching, data, value} = this.state;
+
+        return (
+            <div>
+                <Text>Lorem ipsum dolor sit amet, ne tation labores quo, errem facilisis expetendis vel in. Ut choro
+                    decore ubique sed,</Text>
+                <p>Select users</p>
+                <Select
+                    mode="multiple"
+                    labelInValue
+                    value={value}
+                    placeholder="Enter the username"
+                    notFoundContent={fetching ? <Spin size="small"/> : null}
+                    filterOption={false}
+                    onSearch={this.fetchUser}
+                    onChange={this.handleChange}
+                    style={{width: '100%'}}
+                >
+                    {data.map(d => (
+                        <Option key={d.value}>{d.text}</Option>
+                    ))}
+                </Select>
+                <div style={{paddingTop:10}}>
+                    <Button htmlType="button" type="primary" onClick={this.install}>Install</Button>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default UserInstall;