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

Add loading animation when installing/uninstall app in APPM store

See merge request entgra/carbon-device-mgt!336
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
commit 502c8662f2

@ -17,7 +17,7 @@
*/
import React from "react";
import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon} from "antd";
import {Divider, Row, Col, Typography, Button, Dropdown, notification, Menu, Icon, Spin} from "antd";
import "../../../App.css";
import ImgViewer from "../../apps/release/images/ImgViewer";
import StarRatings from "react-star-ratings";
@ -126,17 +126,18 @@ class ReleaseView extends React.Component {
</Menu>
);
return (
<div>
<AppInstallModal
uuid={release.uuid}
loading={this.state.loading}
visible={this.state.appInstallModalVisible}
deviceType={deviceType}
onClose={this.closeAppOperationModal}
onInstall={this.appOperation}/>
<AppUninstallModal
uuid={release.uuid}
loading={this.state.loading}
visible={this.state.appUninstallModalVisible}
deviceType={deviceType}
onClose={this.closeAppOperationModal}

@ -17,18 +17,19 @@
*/
import React from "react";
import {Modal, Tabs} from "antd";
import {Modal, Spin, Tabs} from "antd";
import UserInstall from "./UserInstall";
import GroupInstall from "./GroupInstall";
import RoleInstall from "./RoleInstall";
import DeviceInstall from "./DeviceInstall";
const { TabPane } = Tabs;
const {TabPane} = Tabs;
class AppInstallModal extends React.Component{
state={
data:[]
class AppInstallModal extends React.Component {
state = {
data: []
};
render() {
const {deviceType} = this.props;
return (
@ -37,22 +38,23 @@ class AppInstallModal extends React.Component{
title="Install App"
visible={this.props.visible}
onCancel={this.props.onClose}
footer={null}
>
<Tabs defaultActiveKey="device">
<TabPane tab="Device" key="device">
<DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="User" key="user">
<UserInstall onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="Role" key="role">
<RoleInstall onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="Group" key="group">
<GroupInstall onInstall={this.props.onInstall}/>
</TabPane>
</Tabs>
footer={null}>
<Spin spinning={this.props.loading}>
<Tabs defaultActiveKey="device">
<TabPane tab="Device" key="device">
<DeviceInstall deviceType={deviceType} onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="User" key="user">
<UserInstall onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="Role" key="role">
<RoleInstall onInstall={this.props.onInstall}/>
</TabPane>
<TabPane tab="Group" key="group">
<GroupInstall onInstall={this.props.onInstall}/>
</TabPane>
</Tabs>
</Spin>
</Modal>
</div>
);

@ -16,31 +16,33 @@
* under the License.
*/
import React from "react";
import {Modal, Tabs} from "antd";
import {Modal, Spin, Tabs} from "antd";
import DeviceUninstall from "./DeviceUninstall";
import UserUninstall from "./UserUninstall";
import RoleUninstall from "./RoleUninstall";
import GroupUninstall from "./GroupUninstall";
const { TabPane } = Tabs;
const {TabPane} = Tabs;
class AppUninstallModal extends React.Component{
state={
data:[]
class AppUninstallModal extends React.Component {
state = {
data: []
};
render() {
const {deviceType} = this.props;
return (
<div>
<Modal
title="Uninstall App"
visible={this.props.visible}
onCancel={this.props.onClose}
footer={null}
>
<div>
<Modal
title="Uninstall App"
visible={this.props.visible}
onCancel={this.props.onClose}
footer={null}>
<Spin spinning={this.props.loading}>
<Tabs defaultActiveKey="device">
<TabPane tab="Device" key="device">
<DeviceUninstall deviceType={deviceType} onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
<DeviceUninstall deviceType={deviceType} onUninstall={this.props.onUninstall}
uuid={this.props.uuid}/>
</TabPane>
<TabPane tab="User" key="user">
<UserUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
@ -52,8 +54,9 @@ class AppUninstallModal extends React.Component{
<GroupUninstall onUninstall={this.props.onUninstall} uuid={this.props.uuid}/>
</TabPane>
</Tabs>
</Modal>
</div>
</Spin>
</Modal>
</div>
);
}
}

Loading…
Cancel
Save