From db35d5e6a7f2ca7e5f59e70640575442fa33840e Mon Sep 17 00:00:00 2001
From: Kaveesha Mihirangi <mhkmihirangi@gmail.com>
Date: Fri, 27 Mar 2020 16:56:49 +0000
Subject: [PATCH] Implement  create, apply, edit, view policy features to
 device-mgt React App

---
 .../react-app/src/index.js                    |  12 +
 .../components/AssignGroups/index.js          |   5 +
 .../components/ConfigureProfile/index.js      |  97 +-
 .../components/PublishDevices/index.js        |   4 +-
 .../components/SelectPlatform/index.js        |   2 +-
 .../Policies/components/AddPolicy/index.js    |  58 +-
 .../components/AssignGroups/index.js          | 269 ++++++
 .../components/ConfigureProfile/index.js      | 873 ++++++++++++++++++
 .../components/PublishDevices/index.js        |  86 ++
 .../components/SelectPolicyType/index.js      | 182 ++++
 .../Policies/components/EditPolicy/index.js   | 273 ++++++
 .../component/PolicyAction/index.js           |  55 ++
 .../component/PolicyBulkActionBar/index.js    | 170 ++++
 .../components/PoliciesTable/index.js         | 227 ++++-
 .../component/PolicyInfo/index.js             | 756 +++++++++++++++
 .../component/ProfileOverview/index.js        | 131 +++
 .../components/PolicyProfile/index.js         | 147 +++
 .../scenes/EditSelectedPolicy/index.js        |  69 ++
 .../Policies/scenes/ViewPolicy/index.js       |  68 ++
 .../device/type/template/config/SubPanel.java |  11 +
 .../template/config/SubPanelValuesList.java   |  27 +
 21 files changed, 3468 insertions(+), 54 deletions(-)
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/AssignGroups/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/ConfigureProfile/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/PublishDevices/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/SelectPolicyType/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyAction/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyBulkActionBar/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/PolicyInfo/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/ProfileOverview/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/EditSelectedPolicy/index.js
 create mode 100644 components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/ViewPolicy/index.js
 create mode 100644 components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanelValuesList.java

diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js
index 8d3539854a..90fb75fcd3 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/index.js
@@ -42,6 +42,8 @@ import Roles from './scenes/Home/scenes/Roles';
 import DeviceTypes from './scenes/Home/scenes/DeviceTypes';
 import Certificates from './scenes/Home/scenes/Configurations/scenes/Certificates';
 import Devices from './scenes/Home/scenes/Devices';
+import ViewPolicy from './scenes/Home/scenes/Policies/scenes/ViewPolicy';
+import EditSelectedPolicy from './scenes/Home/scenes/Policies/scenes/EditSelectedPolicy';
 
 const routes = [
   {
@@ -94,6 +96,16 @@ const routes = [
         component: AddNewPolicy,
         exact: true,
       },
+      {
+        path: '/entgra/policy/view/:policyId',
+        component: ViewPolicy,
+        exact: true,
+      },
+      {
+        path: '/entgra/policy/edit/:policyId',
+        component: EditSelectedPolicy,
+        exact: true,
+      },
       {
         path: '/entgra/roles',
         component: Roles,
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js
index 533d23ab11..e90d0fa9dd 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/AssignGroups/index.js
@@ -52,12 +52,17 @@ class AssignGroups extends React.Component {
   onHandleContinue = (e, formName) => {
     this.props.form.validateFields((err, values) => {
       if (!err) {
+        if (typeof values.roles === 'string') {
+          values.roles = [values.roles];
+        }
         if (!values.users) {
           delete values.users;
         }
+
         if (values.deviceGroups === 'NONE') {
           delete values.deviceGroups;
         }
+
         this.props.getPolicyPayloadData(formName, values);
         this.props.getNextStep();
       }
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js
index 7d0d45c27c..9e6fedb7e9 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js
@@ -45,6 +45,8 @@ const { TabPane } = Tabs;
 const { Option } = Select;
 const { TextArea } = Input;
 
+const subPanelpayloadAttributes = {};
+
 class ConfigureProfile extends React.Component {
   constructor(props) {
     super(props);
@@ -54,6 +56,8 @@ class ConfigureProfile extends React.Component {
       isDisplayMain: 'none',
       activePanelKeys: [],
       activeSubPanelKeys: [],
+      subFormList: [],
+      subPanelpayloadAttributes: {},
       count: 0,
       dataArray: [],
       customInputDataArray: [],
@@ -297,17 +301,64 @@ class ConfigureProfile extends React.Component {
 
   // generate payload by adding policy configurations
   onHandleContinue = (e, formname) => {
-    this.props.form.validateFields((err, values) => {
+    const allFields = this.props.form.getFieldsValue();
+    let activeFields = [];
+    // get currently active field list
+    for (let i = 0; i < this.state.activePanelKeys.length; i++) {
+      Object.keys(allFields).map(key => {
+        if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
+          if (
+            subPanelpayloadAttributes.hasOwnProperty(
+              `${this.state.activePanelKeys[i]}`,
+            )
+          ) {
+            Object.keys(
+              subPanelpayloadAttributes[this.state.activePanelKeys[i]],
+            ).map(subPanel => {
+              if (`${this.state.activePanelKeys[i]}-${subPanel}` === true) {
+                if (key.includes(`-${subPanel}-`)) {
+                  activeFields.push(key);
+                }
+              } else if (!key.includes(`-${subPanel}-`)) {
+                activeFields.push(key);
+              }
+            });
+          } else {
+            activeFields.push(key);
+          }
+        }
+      });
+    }
+    // validate fields and get profile features list
+    this.props.form.validateFields(activeFields, (err, values) => {
       if (!err) {
-        this.props.getPolicyPayloadData(formname, values);
+        let profileFeaturesList = [];
+        for (let i = 0; i < this.state.activePanelKeys.length; i++) {
+          let content = {};
+          Object.entries(values).map(([key, value]) => {
+            if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
+              content[
+                key.replace(`${this.state.activePanelKeys[i]}-`, '')
+              ] = value;
+            }
+          });
+          let feature = {
+            featureCode: this.state.activePanelKeys[i],
+            deviceType: 'android',
+            content: content,
+          };
+          profileFeaturesList.push(feature);
+        }
+        this.props.getPolicyPayloadData(formname, profileFeaturesList);
         this.props.getNextStep();
       }
     });
   };
 
   // generate form items
-  getPanelItems = panel => {
+  getPanelItems = (panel, panelId) => {
     const { getFieldDecorator } = this.props.form;
+    const subPanelList = {};
     return panel.map((item, k) => {
       switch (item.type) {
         case 'select':
@@ -407,7 +458,6 @@ class ConfigureProfile extends React.Component {
               style={{ display: 'block' }}
             >
               {getFieldDecorator(`${item.id}`, {
-                // valuePropName: 'option',
                 initialValue: item.optional.initialDataIndex,
               })(
                 <Select>
@@ -477,9 +527,21 @@ class ConfigureProfile extends React.Component {
                     <div>
                       <div>
                         {item.optional.subPanel.map((panel, i) => {
+                          subPanelList[panel.others.itemSwitch] =
+                            panel.others.itemPayload;
+                          if (
+                            subPanelpayloadAttributes.hasOwnProperty(panelId)
+                          ) {
+                            Object.assign(
+                              subPanelpayloadAttributes[panelId],
+                              subPanelList,
+                            );
+                          } else {
+                            subPanelpayloadAttributes[panelId] = subPanelList;
+                          }
                           return (
                             <div key={i}>
-                              {this.getPanelItems(panel.panelItem)}
+                              {this.getPanelItems(panel.panelItem, panelId)}
                             </div>
                           );
                         })}
@@ -507,7 +569,6 @@ class ConfigureProfile extends React.Component {
               )}
             </Form.Item>
           );
-
         case 'textArea':
           return (
             <Form.Item
@@ -522,7 +583,9 @@ class ConfigureProfile extends React.Component {
               }
               style={{ display: 'block' }}
             >
-              {getFieldDecorator(`${item.id}`, {})(
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: null,
+              })(
                 <TextArea
                   placeholder={item.optional.placeholder}
                   rows={item.optional.row}
@@ -679,6 +742,7 @@ class ConfigureProfile extends React.Component {
 
   render() {
     const { policyUIConfigurationsList } = this.props;
+    const { getFieldDecorator } = this.props.form;
     return (
       <div className="tab-container">
         <Tabs tabPosition={'left'} size={'large'}>
@@ -722,7 +786,17 @@ class ConfigureProfile extends React.Component {
                         >
                           {panel.hasOwnProperty('panelItem') && (
                             <div>
-                              <Form>{this.getPanelItems(panel.panelItem)}</Form>
+                              <Form name={panel.panelId}>
+                                <Form.Item style={{ display: 'none' }}>
+                                  {getFieldDecorator(`${panel.panelId}`, {
+                                    initialValue: ' ',
+                                  })(<Input />)}
+                                </Form.Item>
+                                {this.getPanelItems(
+                                  panel.panelItem,
+                                  panel.panelId,
+                                )}
+                              </Form>
                             </div>
                           )}
                           {panel.hasOwnProperty('subFormLists') && (
@@ -730,7 +804,12 @@ class ConfigureProfile extends React.Component {
                               {Object.values(panel.subFormLists).map(
                                 (form, i) => {
                                   return (
-                                    <Form key={i}>
+                                    <Form name={form.id} key={i}>
+                                      <Form.Item style={{ display: 'none' }}>
+                                        {getFieldDecorator(`${form.id}`, {
+                                          initialValue: ' ',
+                                        })(<Input />)}
+                                      </Form.Item>
                                       {this.getPanelItems(form.panelItem)}
                                     </Form>
                                   );
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js
index 58bda03064..3fc1d758e7 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/PublishDevices/index.js
@@ -29,9 +29,7 @@ class PublishDevices extends React.Component {
   onClickSavePolicy = (event, isPublish, formName) => {
     this.props.form.validateFields((err, values) => {
       if (!err) {
-        if (isPublish) {
-          values = { ...values, ...{ active: isPublish } };
-        }
+        values.active = isPublish;
         this.props.getPolicyPayloadData(formName, values);
       }
     });
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js
index cb67f39898..3edb401306 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/SelectPlatform/index.js
@@ -96,7 +96,7 @@ class SelectPlatform extends React.Component {
             }
             cover={
               <Icon
-                type="android"
+                type={data.name === 'ios' ? 'apple' : data.name}
                 key="device-types"
                 style={{
                   color: '#ffffff',
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js
index c0e1169445..81cc3c573d 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/index.js
@@ -52,28 +52,30 @@ class AddPolicy extends React.Component {
   };
 
   createPayload = () => {
-    const { newPolicyPayload } = this.state;
     const {
       publishDevicesData,
       selectedPlatformData,
-      policyProfile,
+      configureProfileData,
       policyTypeData,
       groupData,
     } = this.state.payloadData;
-    let profile = {
-      policyName: publishDevicesData.policyName,
-      devicetype: selectedPlatformData.deviceType,
+    const profile = {
+      profileName: publishDevicesData.policyName,
+      deviceType: selectedPlatformData.deviceType,
+      profileFeaturesList: configureProfileData,
     };
 
-    let payload = {
-      ...newPolicyPayload,
-      ...publishDevicesData,
-      ...policyProfile,
+    const payload = {
+      policyName: publishDevicesData.policyName,
+      description: publishDevicesData.description,
+      compliance: 'enforce',
+      ownershipType: null,
+      active: publishDevicesData.active,
       ...policyTypeData,
+      profile: profile,
       ...groupData,
-      ...{ profile: profile },
     };
-    console.log(payload);
+    this.onAddNewPolicy(JSON.stringify(payload));
   };
 
   getPolicyConfigJson = type => {
@@ -114,6 +116,40 @@ class AddPolicy extends React.Component {
       });
   };
 
+  onAddNewPolicy = value => {
+    axios
+      .post(
+        window.location.origin +
+          this.config.serverConfig.invoker.uri +
+          this.config.serverConfig.invoker.deviceMgt +
+          '/policies/',
+        value,
+        { headers: { 'Content-Type': 'application-json' } },
+      )
+      .then(res => {
+        if (res.status === 201) {
+          notification.success({
+            message: 'Done',
+            duration: 4,
+            description: 'Successfully added new Policy.',
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to add New Policy.',
+          });
+        }
+      });
+  };
+
   getNextStep = () => {
     const currentStepIndex = this.state.currentStepIndex + 1;
     this.setState({ currentStepIndex });
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/AssignGroups/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/AssignGroups/index.js
new file mode 100644
index 0000000000..22f52ba3d4
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/AssignGroups/index.js
@@ -0,0 +1,269 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+import { Button, Col, Form, message, notification, Radio, Select } from 'antd';
+import axios from 'axios';
+const { Option } = Select;
+
+class AssignGroups extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.userSelector = React.createRef();
+    this.roleSelector = React.createRef();
+    this.state = {
+      roles: [],
+      users: [],
+      groups: [],
+    };
+  }
+  componentDidMount() {
+    this.getRolesList();
+    this.getGroupsList();
+  }
+
+  handleSetUserRoleFormItem = event => {
+    if (event.target.value === 'roleSelector') {
+      this.roleSelector.current.style.cssText = 'display: block;';
+      this.userSelector.current.style.cssText = 'display: none;';
+    } else {
+      this.roleSelector.current.style.cssText = 'display: none;';
+      this.userSelector.current.style.cssText = 'display: block;';
+    }
+  };
+
+  // generate payload by adding Assign Groups
+  onHandleContinue = (e, formName) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (typeof values.roles === 'string') {
+          values.roles = [values.roles];
+        }
+        if (!values.users) {
+          delete values.users;
+        }
+
+        if (values.deviceGroups === 'NONE') {
+          delete values.deviceGroups;
+        }
+
+        this.props.getPolicyPayloadData(formName, values);
+        this.props.getNextStep();
+      }
+    });
+  };
+
+  getRolesList = () => {
+    let apiURL =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/roles?user-store=PRIMARY&limit=100';
+
+    axios
+      .get(apiURL)
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({
+            roles: res.data.data.roles,
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load roles.',
+          });
+        }
+      });
+  };
+
+  getUsersList = value => {
+    let apiURL =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/users/search/usernames?filter=' +
+      value +
+      '&domain=Primary';
+    axios
+      .get(apiURL)
+      .then(res => {
+        if (res.status === 200) {
+          let users = JSON.parse(res.data.data);
+          this.setState({
+            users,
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load users.',
+          });
+        }
+      });
+  };
+
+  // fetch data from api
+  getGroupsList = () => {
+    let apiUrl =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/admin/groups';
+
+    // send request to the invokerss
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({
+            groups: res.data.data.deviceGroups,
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load device groups.',
+          });
+        }
+      });
+  };
+
+  render() {
+    const { policyData } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    let deviceGroups = null;
+    if (policyData.deviceGroups.length > 0) {
+      deviceGroups = policyData.deviceGroups;
+    } else {
+      deviceGroups = 'NONE';
+    }
+    return (
+      <div>
+        <div>
+          <Radio.Group
+            defaultValue={'roleSelector'}
+            onChange={this.handleSetUserRoleFormItem}
+          >
+            <Radio value="roleSelector">Set User role(s)</Radio>
+            <Radio value="userSelector">Set User(s)</Radio>
+          </Radio.Group>
+          <div
+            id={'roleSelector'}
+            ref={this.roleSelector}
+            style={{ display: 'block' }}
+          >
+            <Form.Item>
+              {getFieldDecorator('roles', {
+                initialValue: policyData.roles,
+              })(
+                <Select
+                  mode="multiple"
+                  style={{ width: '100%' }}
+                  defaultActiveFirstOption={true}
+                >
+                  <Option value={'ANY'}>Any</Option>
+                  {this.state.roles.map(role => (
+                    <Option key={role} value={role}>
+                      {role}
+                    </Option>
+                  ))}
+                </Select>,
+              )}
+            </Form.Item>
+          </div>
+          <div
+            id={'userSelector'}
+            ref={this.userSelector}
+            style={{ display: 'none' }}
+          >
+            <Form.Item>
+              {getFieldDecorator('users', {
+                initialValue: policyData.users,
+              })(
+                <Select
+                  mode="multiple"
+                  style={{ width: '100%' }}
+                  onSearch={this.getUsersList}
+                >
+                  {this.state.users.map(user => (
+                    <Option key={user.username} value={user.username}>
+                      {user.username}
+                    </Option>
+                  ))}
+                </Select>,
+              )}
+            </Form.Item>
+          </div>
+        </div>
+        <Form.Item label={'Select Groups'} style={{ display: 'block' }}>
+          {getFieldDecorator('deviceGroups', {
+            initialValue: deviceGroups,
+          })(
+            <Select mode="multiple" style={{ width: '100%' }}>
+              <Option value={'NONE'}>NONE</Option>
+              {this.state.groups.map(group => (
+                <Option key={group.name} value={group.name}>
+                  {group.name}
+                </Option>
+              ))}
+            </Select>,
+          )}
+        </Form.Item>
+        <Col span={16} offset={20}>
+          <div style={{ marginTop: 24 }}>
+            <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
+              Back
+            </Button>
+            <Button
+              type="primary"
+              onClick={e => this.onHandleContinue(e, 'groupData')}
+            >
+              Continue
+            </Button>
+          </div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(Form.create()(AssignGroups));
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/ConfigureProfile/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/ConfigureProfile/index.js
new file mode 100644
index 0000000000..7766b8ac23
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/ConfigureProfile/index.js
@@ -0,0 +1,873 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  Tabs,
+  Row,
+  Col,
+  Switch,
+  Input,
+  Typography,
+  Form,
+  Collapse,
+  Checkbox,
+  Select,
+  Tooltip,
+  Icon,
+  Table,
+  Alert,
+  Upload,
+  Popconfirm,
+  Button,
+  Radio,
+} from 'antd';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+import '../../../../styles.css';
+import moment from 'moment';
+const { Text, Title, Paragraph } = Typography;
+const { TabPane } = Tabs;
+const { Option } = Select;
+const { TextArea } = Input;
+
+const subPanelpayloadAttributes = {};
+
+class ConfigureProfile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.state = {
+      loading: false,
+      activePanelKeys: [],
+      activeSubPanelKeys: [],
+      subFormList: [],
+      subPanelpayloadAttributes: {},
+      customInputDataArray: [],
+      inputTableDataSources: {},
+    };
+  }
+
+  setProfileInfo = e => {
+    let activePolicies = [];
+    let activePolicyFields = {};
+    const allFields = this.props.form.getFieldsValue();
+    this.props.policyFeatureList.map(element => {
+      activePolicies.push(element.featureCode);
+      let featureData = JSON.parse(element.content);
+      Object.keys(featureData).map(key => {
+        let regex = new RegExp(`${element.featureCode}.+${key}`, 'g');
+        Object.keys(allFields).map(fieldName => {
+          if (fieldName.match(regex) != null) {
+            activePolicyFields[fieldName] = featureData[key];
+          }
+        });
+      });
+    });
+    this.props.form.setFieldsValue(activePolicyFields);
+    this.setState({
+      activePanelKeys: activePolicies,
+    });
+  };
+
+  // convert time from 24h format to 12h format
+  timeConverter = time => {
+    time = time
+      .toString()
+      .match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
+    if (time.length > 1) {
+      time = time.slice(1);
+      time[5] = +time[0] < 12 ? ' AM' : ' PM';
+      time[0] = +time[0] % 12 || 12;
+    }
+    return time.join('');
+  };
+
+  // get Option value from start Time, end Time and time difference between 2 values
+  getOptionForTimeSelectors = (startTimeValue, endTimeValue, timeIncrement) => {
+    let timeOptions = [];
+    let time = new Date(
+      moment()
+        .startOf('day')
+        .format('YYYY/MM/DD'),
+    );
+    let tempValue = startTimeValue;
+    time.setMinutes(time.getMinutes() + tempValue);
+    let startOption = (
+      <Option value={String(tempValue)}>
+        {this.timeConverter(
+          `${String(time)
+            .split(' ')[4]
+            .substring(0, 5)}`,
+        )}
+      </Option>
+    );
+    timeOptions.push(startOption);
+
+    while (tempValue !== endTimeValue) {
+      time = new Date(
+        moment()
+          .startOf('day')
+          .format('YYYY/MM/DD'),
+      );
+      tempValue += timeIncrement;
+      if (tempValue > 1440) {
+        tempValue = 0;
+        continue;
+      }
+      time.setMinutes(time.getMinutes() + tempValue);
+      let option = (
+        <Option value={String(tempValue)}>
+          {this.timeConverter(
+            `${String(time)
+              .split(' ')[4]
+              .substring(0, 5)}`,
+          )}
+        </Option>
+      );
+      timeOptions.push(option);
+    }
+    return timeOptions;
+  };
+
+  // handle items which handle from radio buttons
+  handleRadioPanel = (e, subPanel) => {
+    {
+      subPanel.map((panel, i) => {
+        if (panel.value === e.target.value) {
+          document.getElementById(panel.value).style.display = 'block';
+        } else {
+          document.getElementById(panel.value).style.display = 'none';
+        }
+      });
+    }
+  };
+
+  // handle items which handle from select options
+  handleSelectedPanel = (e, subPanel) => {
+    {
+      subPanel.map((panel, i) => {
+        if (panel.id === e) {
+          document.getElementById(panel.id).style.display = 'block';
+        } else {
+          document.getElementById(panel.id).style.display = 'none';
+        }
+      });
+    }
+  };
+
+  // handle items which handle from checkbox
+  handleSubPanel = e => {
+    if (e.target.checked) {
+      let joined = this.state.activeSubPanelKeys.concat(e.target.id);
+      this.setState({ activeSubPanelKeys: joined });
+    } else {
+      let index = this.state.activeSubPanelKeys.indexOf(e.target.id);
+      if (index !== -1) {
+        this.state.activeSubPanelKeys.splice(index, 1);
+        let removed = this.state.activeSubPanelKeys;
+        this.setState({ activeSubPanelKeys: removed });
+      }
+    }
+  };
+
+  // handle Switch on off button
+  handleMainPanel = (e, ref) => {
+    if (e) {
+      let joined = this.state.activePanelKeys.concat(ref);
+      this.setState({ activePanelKeys: joined });
+    } else {
+      let index = this.state.activePanelKeys.indexOf(ref);
+      if (index !== -1) {
+        this.state.activePanelKeys.splice(index, 1);
+        let removed = this.state.activePanelKeys;
+        this.setState({ activePanelKeys: removed });
+      }
+    }
+  };
+
+  handleCustomInputTable = event => {
+    const { count, customInputDataArray } = this.state;
+
+    const newData = [
+      {
+        key: count,
+        CERT_NAME: `${event.file.name}`,
+      },
+    ];
+    this.setState({
+      customInputDataArray: [...customInputDataArray, newData],
+      count: count + 1,
+    });
+  };
+
+  handleAdd = array => {
+    const { count, inputTableDataSources } = this.state;
+    const newData = [
+      {
+        key: count,
+      },
+    ];
+    inputTableDataSources[array].push(newData);
+    Object.defineProperty(inputTableDataSources, array, {
+      value: inputTableDataSources[array],
+    });
+    this.setState({
+      inputTableDataSources,
+      count: count + 1,
+    });
+  };
+
+  getColumns = ({ getFieldDecorator }, arr) => {
+    const columnArray = [];
+    const actionColumn = [
+      {
+        title: '',
+        dataIndex: 'operation',
+        render: (name, row) => (
+          <Form.Item>
+            <Popconfirm title="Sure to delete?">
+              <a>
+                <Text type="danger">
+                  <Icon type="delete" />
+                </Text>
+              </a>
+            </Popconfirm>
+          </Form.Item>
+        ),
+      },
+    ];
+    Object.values(arr).map((columnData, c) => {
+      if (columnData.type === 'input') {
+        const column = {
+          title: `${columnData.name}`,
+          dataIndex: `${columnData.key}`,
+          key: `${columnData.key}`,
+          render: (name, row, i) => (
+            <Form.Item>
+              {getFieldDecorator(`${columnData.key}${i}`, {})(
+                <Input
+                  type={columnData.others.inputType}
+                  placeholder={columnData.others.placeholder}
+                />,
+              )}
+            </Form.Item>
+          ),
+        };
+        columnArray.push(column);
+      } else if (columnData.type === 'upload') {
+        const column = {
+          title: `${columnData.name}`,
+          dataIndex: `${columnData.key}`,
+          key: `${columnData.key}`,
+          render: (name, row, i) => (
+            <Form.Item>
+              {getFieldDecorator(`${columnData.key}${i}`, {})(
+                <Upload>
+                  <Button>
+                    <Icon type="upload" /> Choose file
+                  </Button>
+                </Upload>,
+              )}
+            </Form.Item>
+          ),
+        };
+        columnArray.push(column);
+      } else if (columnData.type === 'select') {
+        const column = {
+          title: `${columnData.name}`,
+          dataIndex: `${columnData.key}`,
+          key: `${columnData.key}`,
+          render: (name, row, i) => (
+            <Form.Item>
+              {getFieldDecorator(`${columnData.key}${i}`, {
+                initialValue: columnData.others.initialDataIndex,
+              })(
+                <Select>
+                  {columnData.others.option.map((option, i) => {
+                    return (
+                      <Option key={i} value={option.key}>
+                        {option.value}
+                      </Option>
+                    );
+                  })}
+                </Select>,
+              )}
+            </Form.Item>
+          ),
+        };
+        columnArray.push(column);
+      }
+    });
+    const columns = columnArray.concat(actionColumn);
+    return columns;
+  };
+
+  // generate payload by adding policy configurations
+  onHandleContinue = (e, formname) => {
+    const allFields = this.props.form.getFieldsValue();
+    let activeFields = [];
+    // get currently active field list
+    for (let i = 0; i < this.state.activePanelKeys.length; i++) {
+      Object.keys(allFields).map(key => {
+        if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
+          if (
+            subPanelpayloadAttributes.hasOwnProperty(
+              `${this.state.activePanelKeys[i]}`,
+            )
+          ) {
+            Object.keys(
+              subPanelpayloadAttributes[this.state.activePanelKeys[i]],
+            ).map(subPanel => {
+              if (`${this.state.activePanelKeys[i]}-${subPanel}` === true) {
+                if (key.includes(`-${subPanel}-`)) {
+                  activeFields.push(key);
+                }
+              } else if (!key.includes(`-${subPanel}-`)) {
+                activeFields.push(key);
+              }
+            });
+          } else {
+            activeFields.push(key);
+          }
+        }
+      });
+    }
+    this.onFieldValidate(activeFields, formname);
+  };
+
+  onFieldValidate = (fields, formName) => {
+    // validate fields and get profile features list
+    this.props.form.validateFields(fields, (err, values) => {
+      if (!err) {
+        let profileFeaturesList = [];
+        for (let i = 0; i < this.state.activePanelKeys.length; i++) {
+          let content = {};
+          Object.entries(values).map(([key, value]) => {
+            if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
+              content[
+                key.replace(`${this.state.activePanelKeys[i]}-`, '')
+              ] = value;
+            }
+          });
+          let feature = {
+            featureCode: this.state.activePanelKeys[i],
+            deviceType: this.props.deviceType,
+            content: content,
+          };
+          profileFeaturesList.push(feature);
+        }
+        this.props.getPolicyPayloadData(formName, profileFeaturesList);
+        this.props.getNextStep();
+      }
+    });
+  };
+
+  // generate form items
+  getPanelItems = (panel, panelId) => {
+    const { getFieldDecorator } = this.props.form;
+    const subPanelList = {};
+    return panel.map((item, k) => {
+      switch (item.type) {
+        case 'select':
+          if (item.optional.hasOwnProperty('subPanel')) {
+            return (
+              <div>
+                <Form.Item
+                  key={k}
+                  label={
+                    <span>
+                      {item.label}&nbsp;
+                      <Tooltip title={item.tooltip} placement="right">
+                        <Icon type="question-circle-o" />
+                      </Tooltip>
+                    </span>
+                  }
+                  style={{ display: 'block' }}
+                >
+                  {getFieldDecorator(`${item.id}`, {
+                    initialValue: `${item.optional.option[0].name}`,
+                  })(
+                    <Select
+                      onChange={e =>
+                        this.handleSelectedPanel(e, item.optional.subPanel)
+                      }
+                    >
+                      {item.optional.option.map((option, i) => {
+                        return (
+                          <Option key={i} value={option.value}>
+                            {option.name}
+                          </Option>
+                        );
+                      })}
+                    </Select>,
+                  )}
+                </Form.Item>
+                <div className={'sub-panel-container'}>
+                  {item.optional.subPanel.map((panel, i) => {
+                    return (
+                      <div
+                        id={panel.id}
+                        key={i}
+                        style={
+                          panel.id === item.optional.initialDataIndex
+                            ? { display: 'block' }
+                            : { display: 'none' }
+                        }
+                      >
+                        {this.getPanelItems(panel.panelItem)}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: `${item.optional.option[0].name}`,
+              })(
+                <Select>
+                  {item.optional.option.map((option, i) => {
+                    return (
+                      <Option key={i} value={option.value}>
+                        {option.name}
+                      </Option>
+                    );
+                  })}
+                </Select>,
+              )}
+            </Form.Item>
+          );
+        case 'timeSelector':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: item.optional.initialDataIndex,
+              })(
+                <Select>
+                  {this.getOptionForTimeSelectors(
+                    item.optional.firstOptionValue,
+                    item.optional.lastOptionValue,
+                    item.optional.valueDifference,
+                  )}
+                </Select>,
+              )}
+            </Form.Item>
+          );
+        case 'input':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                rules: [
+                  {
+                    pattern: new RegExp(`${item.optional.rules.regex}`),
+                    message: `${item.optional.rules.validationMsg}`,
+                  },
+                ],
+              })(<Input placeholder={item.optional.placeholder} />)}
+            </Form.Item>
+          );
+        case 'checkbox':
+          if (item.optional.hasOwnProperty('subPanel')) {
+            return (
+              <div key={k}>
+                <Collapse
+                  bordered={false}
+                  activeKey={this.state.activeSubPanelKeys}
+                >
+                  <Collapse.Panel
+                    key={item.id}
+                    showArrow={false}
+                    style={{ border: 0 }}
+                    header={
+                      <Form.Item key={k}>
+                        {getFieldDecorator(`${item.id}`, {
+                          valuePropName: 'checked',
+                          initialValue: item.optional.ischecked,
+                        })(
+                          <Checkbox onChange={this.handleSubPanel}>
+                            <span>
+                              {item.label}&nbsp;
+                              <Tooltip title={item.tooltip} placement="right">
+                                <Icon type="question-circle-o" />
+                              </Tooltip>
+                            </span>
+                          </Checkbox>,
+                        )}
+                      </Form.Item>
+                    }
+                  >
+                    <div>
+                      <div>
+                        {item.optional.subPanel.map((panel, i) => {
+                          subPanelList[panel.others.itemSwitch] =
+                            panel.others.itemPayload;
+                          if (
+                            subPanelpayloadAttributes.hasOwnProperty(panelId)
+                          ) {
+                            Object.assign(
+                              subPanelpayloadAttributes[panelId],
+                              subPanelList,
+                            );
+                          } else {
+                            subPanelpayloadAttributes[panelId] = subPanelList;
+                          }
+                          return (
+                            <div key={i}>
+                              {this.getPanelItems(panel.panelItem, panelId)}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </Collapse.Panel>
+                </Collapse>
+              </div>
+            );
+          }
+          return (
+            <Form.Item key={k}>
+              {getFieldDecorator(`${item.id}`, {
+                valuePropName: 'checked',
+                initialValue: item.optional.ischecked,
+              })(
+                <Checkbox>
+                  <span>
+                    {item.label}&nbsp;
+                    <Tooltip title={item.tooltip} placement="right">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>
+                  </span>
+                </Checkbox>,
+              )}
+            </Form.Item>
+          );
+        case 'textArea':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: null,
+              })(
+                <TextArea
+                  placeholder={item.optional.placeholder}
+                  rows={item.optional.row}
+                />,
+              )}
+            </Form.Item>
+          );
+        case 'radioGroup':
+          return (
+            <div>
+              <Form.Item
+                key={k}
+                label={
+                  <span>
+                    {item.label}&nbsp;
+                    <Tooltip title={item.tooltip} placement="right">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>
+                  </span>
+                }
+                style={{ display: 'block' }}
+              >
+                {getFieldDecorator(`${item.id}`, {
+                  initialValue: `${item.optional.initialValue}`,
+                })(
+                  <Radio.Group
+                    onChange={e =>
+                      this.handleRadioPanel(e, item.optional.radio)
+                    }
+                  >
+                    {item.optional.radio.map((option, i) => {
+                      return (
+                        <Radio key={i} value={option.value}>
+                          {option.name}
+                        </Radio>
+                      );
+                    })}
+                  </Radio.Group>,
+                )}
+              </Form.Item>
+              <div className={'sub-panel-container'}>
+                {item.optional.subPanel.map((panel, i) => {
+                  return (
+                    <div
+                      key={i}
+                      id={panel.id}
+                      style={
+                        panel.id === item.optional.initialValue
+                          ? { display: 'block' }
+                          : { display: 'none' }
+                      }
+                    >
+                      {this.getPanelItems(panel.panelItem)}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        case 'title':
+          return (
+            <Title key={k} level={4}>
+              {item.label}{' '}
+            </Title>
+          );
+        case 'paragraph':
+          return (
+            <Paragraph key={k} style={{ marginTop: 20 }}>
+              {item.label}{' '}
+            </Paragraph>
+          );
+        case 'alert':
+          return (
+            <Alert key={k} description={item.label} type="warning" showIcon />
+          );
+        case 'upload':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('upload', {})(
+                <Upload>
+                  <Button>
+                    <Icon type="upload" /> Click to upload
+                  </Button>
+                </Upload>,
+              )}
+            </Form.Item>
+          );
+        case 'inputTable':
+          if (
+            !(`${item.optional.dataSource}` in this.state.inputTableDataSources)
+          ) {
+            Object.defineProperty(
+              this.state.inputTableDataSources,
+              `${item.optional.dataSource}`,
+              { value: [], writable: true },
+            );
+          }
+          return (
+            <div key={k}>
+              <Button
+                onClick={() => this.handleAdd(item.optional.dataSource)}
+                type="primary"
+                style={{ marginBottom: 16 }}
+              >
+                <Icon type="plus-circle" />
+                {item.optional.button.name}
+              </Button>
+              <Table
+                id={item.id}
+                dataSource={
+                  this.state.inputTableDataSources[item.optional.dataSource]
+                }
+                columns={this.getColumns(
+                  { getFieldDecorator },
+                  item.optional.columns,
+                )}
+              />
+            </div>
+          );
+        case 'customInputTable':
+          return (
+            <div key={k}>
+              <Upload onChange={this.handleCustomInputTable}>
+                <Button type="primary" style={{ marginBottom: 16 }}>
+                  <Icon type="plus-circle" />
+                  {item.optional.button.name}
+                </Button>
+              </Upload>
+              <Table
+                id={item.id}
+                dataSource={this.state.customInputDataArray}
+                columns={this.getColumns(
+                  { getFieldDecorator },
+                  item.optional.columns,
+                )}
+              />
+            </div>
+          );
+        default:
+          return null;
+      }
+    });
+  };
+
+  render() {
+    const { policyUIConfigurationsList } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div className="tab-container">
+        <Tabs
+          tabPosition={'left'}
+          size={'large'}
+          onTabClick={this.setProfileInfo}
+        >
+          {policyUIConfigurationsList.map((element, i) => {
+            return (
+              <TabPane tab={<span>{element.name}</span>} key={i}>
+                {Object.values(element.panels).map((panel, j) => {
+                  panel = panel.panel;
+                  return (
+                    <div key={j}>
+                      <Collapse
+                        bordered={false}
+                        activeKey={this.state.activePanelKeys}
+                      >
+                        <Collapse.Panel
+                          key={panel.panelId}
+                          showArrow={false}
+                          style={{ border: 0 }}
+                          header={
+                            <div>
+                              <Row>
+                                <Col offset={0} span={14}>
+                                  <Title level={4}> {panel.title} </Title>
+                                </Col>
+                                <Col offset={8} span={1}>
+                                  <Switch
+                                    checkedChildren="ON"
+                                    unCheckedChildren="OFF"
+                                    onChange={e =>
+                                      this.handleMainPanel(
+                                        e,
+                                        `${panel.panelId}`,
+                                      )
+                                    }
+                                  />
+                                </Col>
+                              </Row>
+                              <Row>{panel.description}</Row>
+                            </div>
+                          }
+                        >
+                          {panel.hasOwnProperty('panelItem') && (
+                            <div>
+                              <Form name={panel.panelId}>
+                                <Form.Item style={{ display: 'none' }}>
+                                  {getFieldDecorator(`${panel.panelId}`, {
+                                    initialValue: ' ',
+                                  })(<Input />)}
+                                </Form.Item>
+                                {this.getPanelItems(
+                                  panel.panelItem,
+                                  panel.panelId,
+                                )}
+                              </Form>
+                            </div>
+                          )}
+                          {panel.hasOwnProperty('subFormLists') && (
+                            <div>
+                              {Object.values(panel.subFormLists).map(
+                                (form, i) => {
+                                  return (
+                                    <Form name={form.id} key={i}>
+                                      <Form.Item style={{ display: 'none' }}>
+                                        {getFieldDecorator(`${form.id}`, {
+                                          initialValue: ' ',
+                                        })(<Input />)}
+                                      </Form.Item>
+                                      {this.getPanelItems(form.panelItem)}
+                                    </Form>
+                                  );
+                                },
+                              )}
+                            </div>
+                          )}
+                        </Collapse.Panel>
+                      </Collapse>
+                    </div>
+                  );
+                })}
+              </TabPane>
+            );
+          })}
+        </Tabs>
+        <Col span={16} offset={20}>
+          <div style={{ marginTop: 24 }}>
+            <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
+              Back
+            </Button>
+            <Button
+              type="primary"
+              onClick={e => this.onHandleContinue(e, 'configureProfileData')}
+            >
+              Continue
+            </Button>
+          </div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(Form.create()(ConfigureProfile));
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/PublishDevices/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/PublishDevices/index.js
new file mode 100644
index 0000000000..e24cfd55d4
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/PublishDevices/index.js
@@ -0,0 +1,86 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+import { Button, Col, Form, Input } from 'antd';
+const { TextArea } = Input;
+
+class PublishDevices extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+  }
+
+  onClickSavePolicy = (event, formName) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        this.props.getPolicyPayloadData(formName, values);
+      }
+    });
+  };
+
+  render() {
+    const { policyData } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div>
+        <Form.Item
+          label={'Set a name to your policy *'}
+          style={{ display: 'block' }}
+        >
+          {getFieldDecorator('policyName', {
+            initialValue: policyData.policyName,
+            rules: [
+              {
+                pattern: new RegExp('^.{1,30}$'),
+                message: 'Should be 1-to-30 characters long',
+              },
+            ],
+          })(<Input placeholder={'Should be 1 to 30 characters long'} />)}
+        </Form.Item>
+        <Form.Item label={'Add a Description'} style={{ display: 'block' }}>
+          {getFieldDecorator('description', {
+            initialValue: policyData.description,
+          })(<TextArea rows={8} />)}
+        </Form.Item>
+        <Col span={16} offset={18}>
+          <div style={{ marginTop: 24 }}>
+            <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
+              Back
+            </Button>
+            <Button
+              type="primary"
+              style={{ marginRight: 8 }}
+              onClick={e => this.onClickSavePolicy(e, 'publishDevicesData')}
+            >
+              Save & Publish
+            </Button>
+            <Button
+              type="primary"
+              onClick={e => this.onClickSavePolicy(e, 'publishDevicesData')}
+            >
+              Save
+            </Button>
+          </div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(Form.create()(PublishDevices));
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/SelectPolicyType/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/SelectPolicyType/index.js
new file mode 100644
index 0000000000..ae467b95e6
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/SelectPolicyType/index.js
@@ -0,0 +1,182 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import React from 'react';
+import {
+  Button,
+  Col,
+  Form,
+  Icon,
+  message,
+  notification,
+  Radio,
+  Select,
+  Tooltip,
+} from 'antd';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+import axios from 'axios';
+const { Option } = Select;
+
+class SelectPolicyType extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.state = {
+      correctivePoliciesList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.fetchPolicies();
+  }
+
+  // generate payload using Select policy type
+  onHandleContinue = (e, formName) => {
+    this.props.form.validateFields((err, values) => {
+      if (!err) {
+        if (
+          values.policyType === 'CORRECTIVE' ||
+          values.correctiveActions === 'NONE'
+        ) {
+          values.correctiveActions = [];
+        }
+        this.props.getPolicyPayloadData(formName, values);
+        this.props.getNextStep();
+      }
+    });
+  };
+
+  fetchPolicies = () => {
+    let apiUrl =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/policies';
+
+    // send request to the invokerss
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          let policies = res.data.data.policies;
+          let correctivePolicies = [];
+          for (let i = 0; i < policies.length; i++) {
+            if (policies[i].policyType === 'CORRECTIVE') {
+              correctivePolicies.push(
+                <Option key={policies[i].profileId}>
+                  {policies[i].policyName}
+                </Option>,
+              );
+            }
+          }
+          this.setState({
+            correctivePoliciesList: correctivePolicies,
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load policies.',
+          });
+        }
+
+        this.setState({ loading: false });
+      });
+  };
+
+  handlePolicyTypes = event => {
+    if (event.target.value === 'GENERAL') {
+      document.getElementById('generalPolicySubPanel').style.display = 'block';
+    } else {
+      document.getElementById('generalPolicySubPanel').style.display = 'none';
+    }
+  };
+
+  render() {
+    const { policyData } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    let correctiveActions = null;
+    if (policyData.correctiveActions.length > 0) {
+      correctiveActions = '';
+    } else {
+      correctiveActions = 'NONE';
+    }
+
+    return (
+      <div>
+        <Form.Item style={{ display: 'block' }}>
+          {getFieldDecorator('policyType', {
+            initialValue: policyData.policyType,
+          })(
+            <Radio.Group onChange={this.handlePolicyTypes}>
+              <Radio value="GENERAL">General Policy</Radio>
+              <Radio value="CORRECTIVE">Corrective Policy</Radio>
+            </Radio.Group>,
+          )}
+        </Form.Item>
+        <div id="generalPolicySubPanel" style={{ display: 'block' }}>
+          <Form.Item
+            label={
+              <span>
+                Select Corrective Policy&nbsp;
+                <Tooltip
+                  title={
+                    'Select the corrective policy to be applied when this general policy is violated'
+                  }
+                  placement="right"
+                >
+                  <Icon type="question-circle-o" />
+                </Tooltip>
+              </span>
+            }
+          >
+            {getFieldDecorator('correctiveActions', {
+              initialValue: correctiveActions,
+            })(
+              <Select style={{ width: '100%' }}>
+                <Option value="NONE">None</Option>
+                {this.state.correctivePoliciesList}
+              </Select>,
+            )}
+          </Form.Item>
+        </div>
+        <Col span={16} offset={20}>
+          <div style={{ marginTop: 24 }}>
+            <Button style={{ marginRight: 8 }} onClick={this.props.getPrevStep}>
+              Back
+            </Button>
+            <Button
+              type="primary"
+              onClick={e => this.onHandleContinue(e, 'policyTypeData')}
+            >
+              Continue
+            </Button>
+          </div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(Form.create()(SelectPolicyType));
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/index.js
new file mode 100644
index 0000000000..3c69618ae1
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/index.js
@@ -0,0 +1,273 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Form, Row, Col, Card, Steps, message, notification } from 'antd';
+import { withConfigContext } from '../../../../../../components/ConfigContext';
+import ConfigureProfile from './components/ConfigureProfile';
+import SelectPolicyType from './components/SelectPolicyType';
+import AssignGroups from './components/AssignGroups';
+import PublishDevices from './components/PublishDevices';
+import axios from 'axios';
+const { Step } = Steps;
+
+class EditPolicy extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.state = {
+      currentStepIndex: 0,
+      policyUIConfigurationsList: null,
+      newPolicyPayload: { compliance: 'enforce' },
+      policyProfile: {},
+      payloadData: {},
+      policyFeatureList: [],
+      policyData: {},
+      deviceType: null,
+    };
+  }
+
+  componentDidMount() {
+    this.getSelectedPolicy(this.props.policyId);
+  }
+
+  getPolicyPayloadData = (dataName, dataValue) => {
+    Object.defineProperty(this.state.payloadData, dataName, {
+      value: dataValue,
+      writable: true,
+    });
+    if (dataName === 'publishDevicesData') {
+      this.createPayload();
+    }
+  };
+
+  createPayload = () => {
+    const {
+      publishDevicesData,
+      configureProfileData,
+      policyTypeData,
+      groupData,
+    } = this.state.payloadData;
+    const profile = {
+      profileName: publishDevicesData.policyName,
+      deviceType: this.state.deviceType,
+      profileFeaturesList: configureProfileData,
+    };
+
+    const payload = {
+      ...publishDevicesData,
+      compliance: 'enforce',
+      ownershipType: null,
+      ...policyTypeData,
+      profile: profile,
+      ...groupData,
+    };
+    this.onEditPolicy(JSON.stringify(payload));
+  };
+
+  getSelectedPolicy = policyId => {
+    let apiUrl =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/policies/' +
+      policyId;
+
+    // send request to the invokers
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({
+            isLoading: true,
+            policyData: res.data.data,
+            deviceType: res.data.data.profile.deviceType,
+            policyFeatureList: res.data.data.profile.profileFeaturesList,
+          });
+          this.getPolicyConfigJson(res.data.data.profile.deviceType);
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load selected policy.',
+          });
+        }
+      });
+  };
+
+  getPolicyConfigJson = type => {
+    this.setState({ isLoading: true });
+
+    let apiUrl =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/device-types/' +
+      type +
+      '/ui-policy-configurations';
+    // send request to the invokers
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({
+            policyUIConfigurationsList: JSON.parse(res.data.data),
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load Policy details.',
+          });
+        }
+      });
+  };
+
+  onEditPolicy = value => {
+    axios
+      .put(
+        window.location.origin +
+          this.config.serverConfig.invoker.uri +
+          this.config.serverConfig.invoker.deviceMgt +
+          '/policies/' +
+          this.props.policyId,
+        value,
+        { headers: { 'Content-Type': 'application-json' } },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          notification.success({
+            message: 'Done',
+            duration: 4,
+            description: 'Successfully Updated the Policy.',
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to Updated the Policy.',
+          });
+        }
+      });
+  };
+
+  getNextStep = () => {
+    const currentStepIndex = this.state.currentStepIndex + 1;
+    this.setState({ currentStepIndex });
+  };
+
+  getPrevStep = () => {
+    const currentStepIndex = this.state.currentStepIndex - 1;
+    this.setState({ currentStepIndex });
+  };
+
+  render() {
+    const {
+      currentStepIndex,
+      policyUIConfigurationsList,
+      policyFeatureList,
+      policyData,
+      deviceType,
+    } = this.state;
+    return (
+      <div>
+        {policyUIConfigurationsList != null && (
+          <Row>
+            <Col span={20} offset={2}>
+              <Steps style={{ minHeight: 32 }} current={currentStepIndex}>
+                <Step key="ProfileConfigure" title="Configure profile" />
+                <Step key="PolicyType" title="Select policy type" />
+                <Step key="AssignGroups" title="Assign to groups" />
+                <Step key="Publish" title="Publish to devices" />
+              </Steps>
+            </Col>
+            <Col span={16} offset={4}>
+              <Card style={{ marginTop: 24 }}>
+                <div
+                  style={{ display: currentStepIndex === 0 ? 'unset' : 'none' }}
+                >
+                  <ConfigureProfile
+                    policyUIConfigurationsList={policyUIConfigurationsList}
+                    getPolicyPayloadData={this.getPolicyPayloadData}
+                    getNextStep={this.getNextStep}
+                    policyFeatureList={policyFeatureList}
+                    deviceType={deviceType}
+                  />
+                </div>
+                <div
+                  style={{ display: currentStepIndex === 1 ? 'unset' : 'none' }}
+                >
+                  <SelectPolicyType
+                    getPolicyPayloadData={this.getPolicyPayloadData}
+                    policyData={policyData}
+                    getPrevStep={this.getPrevStep}
+                    getNextStep={this.getNextStep}
+                  />
+                </div>
+                <div
+                  style={{ display: currentStepIndex === 2 ? 'unset' : 'none' }}
+                >
+                  <AssignGroups
+                    getPolicyPayloadData={this.getPolicyPayloadData}
+                    policyData={policyData}
+                    getPrevStep={this.getPrevStep}
+                    getNextStep={this.getNextStep}
+                  />
+                </div>
+                <div
+                  style={{ display: currentStepIndex === 3 ? 'unset' : 'none' }}
+                >
+                  <PublishDevices
+                    policyData={policyData}
+                    getPolicyPayloadData={this.getPolicyPayloadData}
+                    getPrevStep={this.getPrevStep}
+                  />
+                </div>
+              </Card>
+            </Col>
+          </Row>
+        )}
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(
+  Form.create({ name: 'edit-policy' })(EditPolicy),
+);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyAction/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyAction/index.js
new file mode 100644
index 0000000000..53b309e220
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyAction/index.js
@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Divider, Icon, Tooltip } from 'antd';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+import { Link } from 'react-router-dom';
+
+class PolicyAction extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+  }
+
+  render() {
+    return (
+      <div>
+        <div>
+          <Tooltip placement="top" title={'Edit Policy'}>
+            <Link
+              to={`/entgra/policy/edit/${this.props.selectedPolicyData.id}`}
+            >
+              <Icon type="edit" />
+            </Link>
+          </Tooltip>
+          <Divider type="vertical" />
+          <Tooltip placement="top" title={''}>
+            <Link
+              to={`/entgra/policy/view/${this.props.selectedPolicyData.id}`}
+            >
+              <Icon type="eye" />
+            </Link>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(PolicyAction);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyBulkActionBar/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyBulkActionBar/index.js
new file mode 100644
index 0000000000..2964380805
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyBulkActionBar/index.js
@@ -0,0 +1,170 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Button, Tooltip, Popconfirm, Divider } from 'antd';
+
+class BulkActionBar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedMultiple: false,
+      selectedSingle: false,
+      isPolicyActive: true,
+    };
+  }
+
+  // This method checks whether active devices are selected
+  onCheckPolicyStatus = () => {
+    let tempIsPolicyActive;
+    for (let i = 0; i < this.props.selectedRows.length; i++) {
+      if (this.props.selectedRows[i].active) {
+        tempIsPolicyActive = true;
+        break;
+      }
+      tempIsPolicyActive = false;
+    }
+    this.setState({ isPolicyActive: tempIsPolicyActive });
+  };
+
+  onConfirmRemove = () => {
+    if (!this.state.isPolicyActive) {
+      this.props.removePolicy();
+    }
+  };
+
+  onConfirmPublish = () => {
+    if (!this.state.isPolicyActive) {
+      this.props.publishPolicy();
+    }
+  };
+
+  onConfirmUnpublish = () => {
+    if (this.state.isPolicyActive) {
+      this.props.unpublishPolicy();
+    }
+  };
+
+  render() {
+    const isSelected = this.props.selectedRows.length > 0;
+
+    return (
+      <div>
+        <div style={{ padding: '8px' }}>
+          <Tooltip placement="bottom" title={'Apply Changes to Device'}>
+            <Popconfirm
+              placement="topLeft"
+              title={'Do you really want to apply changes to all policies?'}
+              onConfirm={this.props.applyChanges}
+              okText="Yes"
+              cancelText="No"
+            >
+              <Button
+                type="link"
+                shape="circle"
+                icon="check-circle"
+                size={'default'}
+                style={{ margin: '2px' }}
+              />
+            </Popconfirm>
+          </Tooltip>
+        </div>
+        <div
+          style={{ display: isSelected ? 'inline' : 'none', padding: '8px' }}
+        >
+          <Tooltip
+            placement="bottom"
+            title={'Remove'}
+            autoAdjustOverflow={true}
+          >
+            <Popconfirm
+              placement="topLeft"
+              title={
+                !this.state.isPolicyActive
+                  ? 'Do you really want to remove the selected policy(s)?'
+                  : 'You cannot select already active policies. Please deselect active policies and try again.'
+              }
+              onConfirm={this.onConfirmRemove}
+              okText="Yes"
+              cancelText="No"
+            >
+              <Button
+                type="link"
+                shape="circle"
+                icon="delete"
+                size={'default'}
+                onClick={this.onCheckPolicyStatus}
+                style={{ margin: '2px' }}
+              />
+            </Popconfirm>
+          </Tooltip>
+          <Divider type="vertical" />
+          <Tooltip placement="bottom" title={'Publish'}>
+            <Popconfirm
+              placement="topLeft"
+              title={
+                !this.state.isPolicyActive
+                  ? 'Do you really want to publish the selected policy(s)??'
+                  : 'You cannot select already active policies. Please deselect active policies and try again.'
+              }
+              okText="Yes"
+              onConfirm={this.onConfirmPublish}
+              cancelText="No"
+            >
+              <Button
+                type="link"
+                shape="circle"
+                icon="import"
+                onClick={this.onCheckPolicyStatus}
+                size={'default'}
+                style={{
+                  margin: '2px',
+                }}
+              />
+            </Popconfirm>
+          </Tooltip>
+          <Divider type="vertical" />
+          <Tooltip placement="bottom" title={'Unpublish'}>
+            <Popconfirm
+              placement="topLeft"
+              title={
+                this.state.isPolicyActive
+                  ? 'Do you really want to unpublish the selected policy(s)?'
+                  : 'You cannot select already inactive policies to be unpublished. Please deselect inactive policies and try again.'
+              }
+              okText="Yes"
+              onConfirm={this.onConfirmUnpublish}
+              cancelText="No"
+            >
+              <Button
+                type="link"
+                shape="circle"
+                icon="export"
+                onClick={this.onCheckPolicyStatus}
+                size={'default'}
+                style={{ margin: '2px' }}
+              />
+            </Popconfirm>
+          </Tooltip>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BulkActionBar;
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/index.js
index fa408ae416..62c89e4032 100644
--- a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/index.js
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/index.js
@@ -24,42 +24,16 @@ import TimeAgo from 'javascript-time-ago';
 // Load locale-specific relative date/time formatting rules.
 import en from 'javascript-time-ago/locale/en';
 import { withConfigContext } from '../../../../../../components/ConfigContext';
+import PolicyAction from './component/PolicyAction';
+import PolicyBulkActionBar from './component/PolicyBulkActionBar';
 
 let apiUrl;
 
-const columns = [
-  {
-    title: 'Policy Name',
-    dataIndex: 'policyName',
-    width: 100,
-  },
-  {
-    title: 'Description',
-    dataIndex: 'description',
-    key: 'description',
-    // render: enrolmentInfo => enrolmentInfo.owner
-    // todo add filtering options
-  },
-  {
-    title: 'Compilance',
-    dataIndex: 'compliance',
-    key: 'compliance',
-    //  render: enrolmentInfo => enrolmentInfo.ownership
-    // todo add filtering options
-  },
-  {
-    title: 'Policy Type',
-    dataIndex: 'policyType',
-    key: 'policyType',
-    //  render: enrolmentInfo => enrolmentInfo.ownership
-    // todo add filtering options
-  },
-];
-
 class PoliciesTable extends React.Component {
   constructor(props) {
     super(props);
     TimeAgo.addLocale(en);
+    this.config = this.props.context;
     this.state = {
       data: [],
       pagination: {},
@@ -149,10 +123,203 @@ class PoliciesTable extends React.Component {
     });
   };
 
+  unpublishPolicy = () => {
+    const policyIDs = this.state.selectedRows.map(obj => obj.id);
+    // send request to the invoker
+    axios
+      .post(
+        window.location.origin +
+          this.config.serverConfig.invoker.uri +
+          this.config.serverConfig.invoker.deviceMgt +
+          '/policies/deactivate-policy',
+        policyIDs,
+        { headers: { 'Content-Type': 'application/json' } },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          this.fetchGroups();
+          notification.success({
+            message: 'Done',
+            duration: 4,
+            description: 'Selected policy(s) was successfully unpublished',
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to unpublish policy(s).',
+          });
+        }
+      });
+  };
+
+  publishPolicy = () => {
+    const policyIDs = this.state.selectedRows.map(obj => obj.id);
+    // send request to the invoker
+    axios
+      .post(
+        window.location.origin +
+          this.config.serverConfig.invoker.uri +
+          this.config.serverConfig.invoker.deviceMgt +
+          '/policies/activate-policy',
+        policyIDs,
+        { headers: { 'Content-Type': 'application/json' } },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          this.fetchGroups();
+          notification.success({
+            message: 'Done',
+            duration: 4,
+            description: 'Selected policy(s) was successfully unpublished',
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to unpublish policy(s).',
+          });
+        }
+      });
+  };
+
+  removePolicy = () => {
+    const policyIDs = this.state.selectedRows.map(obj => obj.id);
+    // send request to the invoker
+    axios
+      .post(
+        window.location.origin +
+          this.config.serverConfig.invoker.uri +
+          this.config.serverConfig.invoker.deviceMgt +
+          '/policies/remove-policy',
+        policyIDs,
+        { headers: { 'Content-Type': 'application/json' } },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          this.fetchGroups();
+          notification.success({
+            message: 'Done',
+            duration: 4,
+            description: 'Selected policy(s) was successfully removed.',
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to remove policy(s).',
+          });
+        }
+      });
+  };
+
+  applyChanges = () => {
+    // send request to the invoker
+    axios
+      .put(
+        window.location.origin +
+          this.config.serverConfig.invoker.uri +
+          this.config.serverConfig.invoker.deviceMgt +
+          '/policies/apply-changes',
+        'null',
+        { headers: { 'Content-Type': 'application/json' } },
+      )
+      .then(res => {
+        if (res.status === 200) {
+          this.fetchGroups();
+          notification.success({
+            message: 'Done',
+            duration: 4,
+            description: 'Changes applied successfully.',
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description:
+              'Error occurred while trying to apply changes to device.',
+          });
+        }
+      });
+  };
+
   render() {
-    const { data, pagination, loading } = this.state;
+    const { data, pagination, loading, selectedRows } = this.state;
+    const columns = [
+      {
+        title: 'Policy Name',
+        dataIndex: 'policyName',
+        width: 100,
+      },
+      {
+        title: 'Description',
+        dataIndex: 'description',
+        key: 'description',
+        // render: enrolmentInfo => enrolmentInfo.owner
+        // todo add filtering options
+      },
+      {
+        title: 'Compilance',
+        dataIndex: 'compliance',
+        key: 'compliance',
+        //  render: enrolmentInfo => enrolmentInfo.ownership
+        // todo add filtering options
+      },
+      {
+        title: 'Policy Type',
+        dataIndex: 'policyType',
+        key: 'policyType',
+        //  render: enrolmentInfo => enrolmentInfo.ownership
+        // todo add filtering options
+      },
+      {
+        title: 'Action',
+        dataIndex: 'id',
+        key: 'action',
+        render: (id, row) => (
+          <span>
+            <PolicyAction selectedPolicyData={row} />
+          </span>
+        ),
+      },
+    ];
     return (
       <div>
+        <PolicyBulkActionBar
+          selectedRows={selectedRows}
+          unpublishPolicy={this.unpublishPolicy}
+          publishPolicy={this.publishPolicy}
+          removePolicy={this.removePolicy}
+          applyChanges={this.applyChanges}
+        />
         <Table
           columns={columns}
           rowKey={record => record.id}
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/PolicyInfo/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/PolicyInfo/index.js
new file mode 100644
index 0000000000..825897c830
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/PolicyInfo/index.js
@@ -0,0 +1,756 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import {
+  Alert,
+  Button,
+  Checkbox,
+  Col,
+  Collapse,
+  Form,
+  Icon,
+  Input,
+  Popconfirm,
+  Radio,
+  Row,
+  Select,
+  Table,
+  Tabs,
+  Tooltip,
+  Typography,
+  Upload,
+} from 'antd';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+import moment from 'moment';
+
+const { Text, Title, Paragraph } = Typography;
+const { TabPane } = Tabs;
+const { Option } = Select;
+const { TextArea } = Input;
+
+const subPanelpayloadAttributes = {};
+const fieldKeys = [];
+
+class PolicyInfo extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.state = {
+      data: {},
+      policyFeatureList: [],
+      activePanelKeys: [],
+      profilePreviewKey: '',
+      customInputDataArray: [],
+      inputTableDataSources: {},
+      isInfoPreview: false,
+    };
+  }
+
+  setProfileInfo = e => {
+    let activePolicies = [];
+    let activePolicyFields = {};
+    const allFields = this.props.form.getFieldsValue();
+    this.props.policyFeatureList.map(element => {
+      activePolicies.push(element.featureCode);
+      let featureData = JSON.parse(element.content);
+      Object.keys(featureData).map(key => {
+        let regex = new RegExp(`${element.featureCode}.+${key}`, 'g');
+        Object.keys(allFields).map(fieldName => {
+          if (fieldName.match(regex) != null) {
+            activePolicyFields[fieldName] = featureData[key];
+          }
+        });
+      });
+    });
+    this.props.form.setFieldsValue(activePolicyFields);
+    this.setState({
+      activePanelKeys: activePolicies,
+    });
+  };
+
+  // convert time from 24h format to 12h format
+  timeConverter = time => {
+    time = time
+      .toString()
+      .match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];
+    if (time.length > 1) {
+      time = time.slice(1);
+      time[5] = +time[0] < 12 ? ' AM' : ' PM';
+      time[0] = +time[0] % 12 || 12;
+    }
+    return time.join('');
+  };
+
+  // get Option value from start Time, end Time and time difference between 2 values
+  getOptionForTimeSelectors = (startTimeValue, endTimeValue, timeIncrement) => {
+    let timeOptions = [];
+    let time = new Date(
+      moment()
+        .startOf('day')
+        .format('YYYY/MM/DD'),
+    );
+    let tempValue = startTimeValue;
+    time.setMinutes(time.getMinutes() + tempValue);
+    let startOption = (
+      <Option value={String(tempValue)}>
+        {this.timeConverter(
+          `${String(time)
+            .split(' ')[4]
+            .substring(0, 5)}`,
+        )}
+      </Option>
+    );
+    timeOptions.push(startOption);
+
+    while (tempValue !== endTimeValue) {
+      time = new Date(
+        moment()
+          .startOf('day')
+          .format('YYYY/MM/DD'),
+      );
+      tempValue += timeIncrement;
+      if (tempValue > 1440) {
+        tempValue = 0;
+        continue;
+      }
+      time.setMinutes(time.getMinutes() + tempValue);
+      let option = (
+        <Option value={String(tempValue)}>
+          {this.timeConverter(
+            `${String(time)
+              .split(' ')[4]
+              .substring(0, 5)}`,
+          )}
+        </Option>
+      );
+      timeOptions.push(option);
+    }
+    return timeOptions;
+  };
+
+  // handle items which handle from radio buttons
+  handleRadioPanel = (e, subPanel) => {
+    {
+      subPanel.map((panel, i) => {
+        if (panel.value === e.target.value) {
+          document.getElementById(panel.value).style.display = 'block';
+        } else {
+          document.getElementById(panel.value).style.display = 'none';
+        }
+      });
+    }
+  };
+
+  // handle items which handle from select options
+  handleSelectedPanel = (e, subPanel) => {
+    {
+      subPanel.map((panel, i) => {
+        if (panel.id === e) {
+          document.getElementById(panel.id).style.display = 'block';
+        } else {
+          document.getElementById(panel.id).style.display = 'none';
+        }
+      });
+    }
+  };
+
+  getColumns = ({ getFieldDecorator }, arr) => {
+    const columnArray = [];
+    const actionColumn = [
+      {
+        title: '',
+        dataIndex: 'operation',
+        render: (name, row) => (
+          <Form.Item>
+            <Popconfirm title="Sure to delete?">
+              <a>
+                <Text type="danger">
+                  <Icon type="delete" />
+                </Text>
+              </a>
+            </Popconfirm>
+          </Form.Item>
+        ),
+      },
+    ];
+    Object.values(arr).map((columnData, c) => {
+      if (columnData.type === 'input') {
+        const column = {
+          title: `${columnData.name}`,
+          dataIndex: `${columnData.key}`,
+          key: `${columnData.key}`,
+          render: (name, row, i) => (
+            <Form.Item>
+              {getFieldDecorator(`${columnData.key}${i}`, {})(
+                <Input
+                  type={columnData.others.inputType}
+                  placeholder={columnData.others.placeholder}
+                />,
+              )}
+            </Form.Item>
+          ),
+        };
+        columnArray.push(column);
+      } else if (columnData.type === 'upload') {
+        const column = {
+          title: `${columnData.name}`,
+          dataIndex: `${columnData.key}`,
+          key: `${columnData.key}`,
+          render: (name, row, i) => (
+            <Form.Item>
+              {getFieldDecorator(`${columnData.key}${i}`, {})(
+                <Upload>
+                  <Button>
+                    <Icon type="upload" /> Choose file
+                  </Button>
+                </Upload>,
+              )}
+            </Form.Item>
+          ),
+        };
+        columnArray.push(column);
+      } else if (columnData.type === 'select') {
+        const column = {
+          title: `${columnData.name}`,
+          dataIndex: `${columnData.key}`,
+          key: `${columnData.key}`,
+          render: (name, row, i) => (
+            <Form.Item>
+              {getFieldDecorator(`${columnData.key}${i}`, {
+                initialValue: columnData.others.initialDataIndex,
+              })(
+                <Select>
+                  {columnData.others.option.map((option, i) => {
+                    return (
+                      <Option key={i} value={option.key}>
+                        {option.value}
+                      </Option>
+                    );
+                  })}
+                </Select>,
+              )}
+            </Form.Item>
+          ),
+        };
+        columnArray.push(column);
+      }
+    });
+    const columns = columnArray.concat(actionColumn);
+    return columns;
+  };
+
+  // generate form items
+  getPanelItems = (panel, panelId) => {
+    const { getFieldDecorator } = this.props.form;
+    const subPanelList = {};
+    return panel.map((item, k) => {
+      fieldKeys.push(item.id);
+      switch (item.type) {
+        case 'select':
+          if (item.optional.hasOwnProperty('subPanel')) {
+            return (
+              <div>
+                <Form.Item
+                  key={k}
+                  label={
+                    <span>
+                      {item.label}&nbsp;
+                      <Tooltip title={item.tooltip} placement="right">
+                        <Icon type="question-circle-o" />
+                      </Tooltip>
+                    </span>
+                  }
+                  style={{ display: 'block' }}
+                >
+                  {getFieldDecorator(`${item.id}`, {
+                    initialValue: `${item.optional.option[0].name}`,
+                  })(
+                    <Select
+                      onChange={e =>
+                        this.handleSelectedPanel(e, item.optional.subPanel)
+                      }
+                    >
+                      {item.optional.option.map((option, i) => {
+                        return (
+                          <Option key={i} value={option.value}>
+                            {option.name}
+                          </Option>
+                        );
+                      })}
+                    </Select>,
+                  )}
+                </Form.Item>
+                <div className={'sub-panel-container'}>
+                  {item.optional.subPanel.map((panel, i) => {
+                    return (
+                      <div
+                        id={panel.id}
+                        key={i}
+                        style={
+                          panel.id === item.optional.initialDataIndex
+                            ? { display: 'block' }
+                            : { display: 'none' }
+                        }
+                      >
+                        {this.getPanelItems(panel.panelItem)}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          }
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: `${item.optional.option[0].name}`,
+              })(
+                <Select>
+                  {item.optional.option.map((option, i) => {
+                    return (
+                      <Option key={i} value={option.value}>
+                        {option.name}
+                      </Option>
+                    );
+                  })}
+                </Select>,
+              )}
+            </Form.Item>
+          );
+        case 'timeSelector':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: item.optional.initialDataIndex,
+              })(
+                <Select>
+                  {this.getOptionForTimeSelectors(
+                    item.optional.firstOptionValue,
+                    item.optional.lastOptionValue,
+                    item.optional.valueDifference,
+                  )}
+                </Select>,
+              )}
+            </Form.Item>
+          );
+        case 'input':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                rules: [
+                  {
+                    pattern: new RegExp(`${item.optional.rules.regex}`),
+                    message: `${item.optional.rules.validationMsg}`,
+                  },
+                ],
+              })(<Input placeholder={item.optional.placeholder} disabled />)}
+            </Form.Item>
+          );
+        case 'checkbox':
+          if (item.optional.hasOwnProperty('subPanel')) {
+            return (
+              <div key={k}>
+                <Collapse
+                  bordered={false}
+                  activeKey={this.state.activeSubPanelKeys}
+                >
+                  <Collapse.Panel
+                    key={item.id}
+                    showArrow={false}
+                    style={{ border: 0 }}
+                    header={
+                      <Form.Item key={k}>
+                        {getFieldDecorator(`${item.id}`, {
+                          valuePropName: 'checked',
+                          initialValue: item.optional.ischecked,
+                        })(
+                          <Checkbox>
+                            <span>
+                              {item.label}&nbsp;
+                              <Tooltip title={item.tooltip} placement="right">
+                                <Icon type="question-circle-o" />
+                              </Tooltip>
+                            </span>
+                          </Checkbox>,
+                        )}
+                      </Form.Item>
+                    }
+                  >
+                    <div>
+                      <div>
+                        {item.optional.subPanel.map((panel, i) => {
+                          subPanelList[panel.others.itemSwitch] =
+                            panel.others.itemPayload;
+                          if (
+                            subPanelpayloadAttributes.hasOwnProperty(panelId)
+                          ) {
+                            Object.assign(
+                              subPanelpayloadAttributes[panelId],
+                              subPanelList,
+                            );
+                          } else {
+                            subPanelpayloadAttributes[panelId] = subPanelList;
+                          }
+                          return (
+                            <div key={i}>
+                              {this.getPanelItems(panel.panelItem, panelId)}
+                            </div>
+                          );
+                        })}
+                      </div>
+                    </div>
+                  </Collapse.Panel>
+                </Collapse>
+              </div>
+            );
+          }
+          return (
+            <Form.Item key={k}>
+              {getFieldDecorator(`${item.id}`, {
+                valuePropName: 'checked',
+                initialValue: item.optional.ischecked,
+              })(
+                <Checkbox>
+                  <span>
+                    {item.label}&nbsp;
+                    <Tooltip title={item.tooltip} placement="right">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>
+                  </span>
+                </Checkbox>,
+              )}
+            </Form.Item>
+          );
+        case 'textArea':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+              style={{ display: 'block' }}
+            >
+              {getFieldDecorator(`${item.id}`, {
+                initialValue: null,
+              })(
+                <TextArea
+                  placeholder={item.optional.placeholder}
+                  rows={item.optional.row}
+                  disabled
+                />,
+              )}
+            </Form.Item>
+          );
+        case 'radioGroup':
+          return (
+            <div>
+              <Form.Item
+                key={k}
+                label={
+                  <span>
+                    {item.label}&nbsp;
+                    <Tooltip title={item.tooltip} placement="right">
+                      <Icon type="question-circle-o" />
+                    </Tooltip>
+                  </span>
+                }
+                style={{ display: 'block' }}
+              >
+                {getFieldDecorator(`${item.id}`, {
+                  initialValue: `${item.optional.initialValue}`,
+                })(
+                  <Radio.Group
+                    onChange={e =>
+                      this.handleRadioPanel(e, item.optional.radio)
+                    }
+                  >
+                    {item.optional.radio.map((option, i) => {
+                      return (
+                        <Radio key={i} value={option.value}>
+                          {option.name}
+                        </Radio>
+                      );
+                    })}
+                  </Radio.Group>,
+                )}
+              </Form.Item>
+              <div className={'sub-panel-container'}>
+                {item.optional.subPanel.map((panel, i) => {
+                  return (
+                    <div
+                      key={i}
+                      id={panel.id}
+                      style={
+                        panel.id === item.optional.initialValue
+                          ? { display: 'block' }
+                          : { display: 'none' }
+                      }
+                    >
+                      {this.getPanelItems(panel.panelItem)}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        case 'title':
+          return (
+            <Title key={k} level={4}>
+              {item.label}{' '}
+            </Title>
+          );
+        case 'paragraph':
+          return (
+            <Paragraph key={k} style={{ marginTop: 20 }}>
+              {item.label}{' '}
+            </Paragraph>
+          );
+        case 'alert':
+          return (
+            <Alert key={k} description={item.label} type="warning" showIcon />
+          );
+        case 'upload':
+          return (
+            <Form.Item
+              key={k}
+              label={
+                <span>
+                  {item.label}&nbsp;
+                  <Tooltip title={item.tooltip} placement="right">
+                    <Icon type="question-circle-o" />
+                  </Tooltip>
+                </span>
+              }
+            >
+              {getFieldDecorator('upload', {})(
+                <Upload>
+                  <Button>
+                    <Icon type="upload" /> Click to upload
+                  </Button>
+                </Upload>,
+              )}
+            </Form.Item>
+          );
+        case 'inputTable':
+          if (
+            !(`${item.optional.dataSource}` in this.state.inputTableDataSources)
+          ) {
+            Object.defineProperty(
+              this.state.inputTableDataSources,
+              `${item.optional.dataSource}`,
+              { value: [], writable: true },
+            );
+          }
+          return (
+            <div key={k}>
+              <Table
+                id={item.id}
+                dataSource={
+                  this.state.inputTableDataSources[item.optional.dataSource]
+                }
+                columns={this.getColumns(
+                  { getFieldDecorator },
+                  item.optional.columns,
+                )}
+              />
+            </div>
+          );
+        case 'customInputTable':
+          return (
+            <div key={k}>
+              <Table
+                id={item.id}
+                dataSource={this.state.customInputDataArray}
+                columns={this.getColumns(
+                  { getFieldDecorator },
+                  item.optional.columns,
+                )}
+              />
+            </div>
+          );
+        default:
+          return null;
+      }
+    });
+  };
+
+  onPreview = e => {
+    this.setState({
+      profilePreviewKey: 'profileInfo',
+      isInfoPreview: true,
+    });
+  };
+
+  render() {
+    const { policyUIConfigurationsList } = this.props;
+    const { getFieldDecorator } = this.props.form;
+    return (
+      <div style={{ marginTop: 20 }}>
+        <Row>
+          <Col span={4}>
+            <Title level={4}>Profile Information</Title>
+          </Col>
+          <Col span={16}>
+            <Button type="link" icon="eye" onClick={this.onPreview}>
+              <Text
+                style={{
+                  fontSize: 'small',
+                  display: this.state.isInfoPreview ? 'none' : 'inline',
+                }}
+              >
+                (Click to view policy information)
+              </Text>
+            </Button>
+          </Col>
+        </Row>
+        <Collapse
+          bordered={false}
+          activeKey={this.state.profilePreviewKey}
+          style={{ display: this.state.isInfoPreview ? 'block' : 'none' }}
+        >
+          <Collapse.Panel
+            key={'profileInfo'}
+            showArrow={false}
+            style={{
+              border: 0,
+            }}
+          >
+            <div className="tab-container">
+              <Tabs
+                tabPosition={'left'}
+                size={'large'}
+                onChange={this.setProfileInfo}
+              >
+                {policyUIConfigurationsList.map((element, i) => {
+                  return (
+                    <TabPane tab={<span>{element.name}</span>} key={i}>
+                      {Object.values(element.panels).map((panel, j) => {
+                        panel = panel.panel;
+                        return (
+                          <div key={j}>
+                            <Collapse
+                              bordered={false}
+                              activeKey={this.state.activePanelKeys}
+                            >
+                              <Collapse.Panel
+                                key={panel.panelId}
+                                showArrow={false}
+                                style={{ border: 0 }}
+                                header={
+                                  <div>
+                                    <Row>
+                                      <Col offset={0} span={14}>
+                                        <Title level={4}> {panel.title} </Title>
+                                      </Col>
+                                    </Row>
+                                    <Row>{panel.description}</Row>
+                                  </div>
+                                }
+                              >
+                                {panel.hasOwnProperty('panelItem') && (
+                                  <div>
+                                    <Form name={panel.panelId}>
+                                      <Form.Item style={{ display: 'none' }}>
+                                        {getFieldDecorator(`${panel.panelId}`, {
+                                          initialValue: ' ',
+                                        })(<Input />)}
+                                      </Form.Item>
+                                      {this.getPanelItems(
+                                        panel.panelItem,
+                                        panel.panelId,
+                                      )}
+                                    </Form>
+                                  </div>
+                                )}
+                                {panel.hasOwnProperty('subFormLists') && (
+                                  <div>
+                                    {Object.values(panel.subFormLists).map(
+                                      (form, i) => {
+                                        return (
+                                          <Form name={form.id} key={i}>
+                                            <Form.Item
+                                              style={{ display: 'none' }}
+                                            >
+                                              {getFieldDecorator(`${form.id}`, {
+                                                initialValue: ' ',
+                                              })(<Input />)}
+                                            </Form.Item>
+                                            {this.getPanelItems(form.panelItem)}
+                                          </Form>
+                                        );
+                                      },
+                                    )}
+                                  </div>
+                                )}
+                              </Collapse.Panel>
+                            </Collapse>
+                          </div>
+                        );
+                      })}
+                    </TabPane>
+                  );
+                })}
+              </Tabs>
+            </div>
+          </Collapse.Panel>
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(Form.create()(PolicyInfo));
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/ProfileOverview/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/ProfileOverview/index.js
new file mode 100644
index 0000000000..798fc84c0f
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/ProfileOverview/index.js
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Card, Col, Icon, Row, Typography } from 'antd';
+import { withConfigContext } from '../../../../../../../../components/ConfigContext';
+const { Title, Text } = Typography;
+
+class ProfileOverview extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.state = {
+      data: {},
+    };
+  }
+
+  render() {
+    const { policyData } = this.props;
+    return (
+      <div>
+        <div style={{ marginTop: 20 }}>
+          <div>
+            <Title level={4}>Policy Overview</Title>
+          </div>
+          <Card>
+            <div style={{ paddingLeft: 4 }}>
+              <Row style={{ marginTop: 8 }}>
+                <Col span={8}>
+                  <Text>Platform</Text>
+                </Col>
+                <Col span={8}>
+                  <Text>{policyData.profile.deviceType.toUpperCase()}</Text>
+                </Col>
+              </Row>
+              <hr style={{ backgroundColor: 'grey' }} />
+              <Row style={{ marginTop: 15 }}>
+                <Col span={8}>
+                  <Text>Groups</Text>
+                </Col>
+                <Col span={8}>
+                  <Text>{policyData.deviceGroups}</Text>
+                </Col>
+              </Row>
+              <hr />
+              <Row style={{ marginTop: 15 }}>
+                <Col span={8}>
+                  <Text>Action upon non-compliance</Text>
+                </Col>
+                <Col span={8}>
+                  <Text>{policyData.compliance.toUpperCase()}</Text>
+                </Col>
+              </Row>
+              <hr />
+              <Row style={{ marginTop: 15 }}>
+                <Col span={8}>
+                  <Text>Status</Text>
+                </Col>
+                <Col span={8}>
+                  <Text>
+                    {policyData.active ? (
+                      <span>
+                        <Icon
+                          type="exclamation-circle"
+                          style={{ color: '#6ab04c' }}
+                        />
+                        Active
+                      </span>
+                    ) : (
+                      <span>
+                        <Icon
+                          type="exclamation-circle"
+                          style={{ color: '#f9ca24' }}
+                        />
+                        Inactive
+                      </span>
+                    )}
+                    {policyData.updated ? <span>/Updated</span> : <span></span>}
+                  </Text>
+                </Col>
+              </Row>
+              <hr />
+              <Row style={{ marginTop: 15 }}>
+                <Col span={8}>
+                  <Text>Assigned Roles</Text>
+                </Col>
+                <Col span={8}>{policyData.roles}</Col>
+              </Row>
+              <hr />
+              <Row style={{ marginTop: 15 }}>
+                <Col span={8}>
+                  <Text type={8}>Policy Type</Text>
+                </Col>
+                <Col span={8}>
+                  <Text>{policyData.policyType}</Text>
+                </Col>
+              </Row>
+            </div>
+          </Card>
+        </div>
+        <div style={{ marginTop: 20 }}>
+          <Title level={4}>Description</Title>
+          <Card>
+            <Row>
+              <Col span={4}>
+                <Text>{policyData.description}</Text>
+              </Col>
+            </Row>
+          </Card>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(ProfileOverview);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/index.js
new file mode 100644
index 0000000000..29666f67e2
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/index.js
@@ -0,0 +1,147 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { Col, message, notification } from 'antd';
+import { withConfigContext } from '../../../../../../components/ConfigContext';
+import PolicyInfo from './component/PolicyInfo';
+import ProfileOverview from './component/ProfileOverview';
+import axios from 'axios';
+
+class PolicyProfile extends React.Component {
+  constructor(props) {
+    super(props);
+    this.config = this.props.context;
+    this.state = {
+      policyId: this.props.policyId,
+      policyData: null,
+      policyUIConfigurationsList: [],
+      policyFeatureList: [],
+    };
+  }
+
+  componentDidMount() {
+    this.getSelectedPolicy(this.props.policyId);
+  }
+
+  getSelectedPolicy = policyId => {
+    let apiUrl =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/policies/' +
+      policyId;
+
+    // send request to the invokers
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({
+            policyData: res.data.data,
+            policyFeatureList: res.data.data.profile.profileFeaturesList,
+          });
+          this.getPolicyConfigJson(res.data.data.profile.deviceType);
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load selected policy.',
+          });
+        }
+      });
+  };
+
+  getPolicyConfigJson = type => {
+    this.setState({ isLoading: true });
+
+    let apiUrl =
+      window.location.origin +
+      this.config.serverConfig.invoker.uri +
+      this.config.serverConfig.invoker.deviceMgt +
+      '/device-types/' +
+      type +
+      '/ui-policy-configurations';
+    // send request to the invokers
+    axios
+      .get(apiUrl)
+      .then(res => {
+        if (res.status === 200) {
+          this.setState({
+            isLoading: false,
+            policyUIConfigurationsList: JSON.parse(res.data.data),
+          });
+        }
+      })
+      .catch(error => {
+        if (error.hasOwnProperty('response') && error.response.status === 401) {
+          // todo display a popop with error
+          message.error('You are not logged in');
+          window.location.href = window.location.origin + '/entgra/login';
+        } else {
+          notification.error({
+            message: 'There was a problem',
+            duration: 0,
+            description: 'Error occurred while trying to load Policy details.',
+          });
+        }
+        this.setState({ isLoading: false });
+      });
+  };
+
+  render() {
+    const {
+      policyData,
+      policyUIConfigurationsList,
+      policyFeatureList,
+    } = this.state;
+    return (
+      <div>
+        <Col span={16} offset={4}>
+          {/* <Card style={{ marginTop: 24 }}>*/}
+          <div>
+            {policyData != null && (
+              <ProfileOverview
+                policyId={this.props.policyId}
+                policyData={policyData}
+              />
+            )}
+          </div>
+          <div>
+            {policyData != null && (
+              <PolicyInfo
+                policyId={this.state.policyId}
+                policyFeatureList={policyFeatureList}
+                policyUIConfigurationsList={policyUIConfigurationsList}
+              />
+            )}
+          </div>
+        </Col>
+      </div>
+    );
+  }
+}
+
+export default withConfigContext(PolicyProfile);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/EditSelectedPolicy/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/EditSelectedPolicy/index.js
new file mode 100644
index 0000000000..ba2a94ed7a
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/EditSelectedPolicy/index.js
@@ -0,0 +1,69 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { Component } from 'react';
+import { Breadcrumb, Icon, PageHeader } from 'antd';
+import { Link } from 'react-router-dom';
+import EditPolicy from '../../components/EditPolicy';
+import { withConfigContext } from '../../../../../../components/ConfigContext';
+class EditSelectedPolicy extends Component {
+  routes;
+
+  constructor(props) {
+    super(props);
+    this.routes = props.routes;
+    this.config = this.props.context;
+    this.state = {
+      data: {},
+      policyOverview: {},
+      policyId: '',
+    };
+  }
+
+  render() {
+    const {
+      match: { params },
+    } = this.props;
+
+    return (
+      <div>
+        <PageHeader style={{ paddingTop: 0 }}>
+          <Breadcrumb style={{ paddingBottom: 16 }}>
+            <Breadcrumb.Item>
+              <Link to="/entgra">
+                <Icon type="home" /> Home
+              </Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>Policies</Breadcrumb.Item>
+          </Breadcrumb>
+          <div className="wrap">
+            {/* <h3>Policies</h3>*/}
+            {/* <Paragraph>Create new policy on IoT Server.</Paragraph>*/}
+          </div>
+          <div style={{ borderRadius: 5 }}>
+            <EditPolicy policyId={params.policyId} />
+          </div>
+        </PageHeader>
+        <div
+          style={{ background: '#f0f2f5', padding: 24, minHeight: 720 }}
+        ></div>
+      </div>
+    );
+  }
+}
+export default withConfigContext(EditSelectedPolicy);
diff --git a/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/ViewPolicy/index.js b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/ViewPolicy/index.js
new file mode 100644
index 0000000000..74b98521eb
--- /dev/null
+++ b/components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/scenes/ViewPolicy/index.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright (c) 2020, Entgra (pvt) Ltd. (http://entgra.io) All Rights Reserved.
+ *
+ * Entgra (pvt) Ltd. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React, { Component } from 'react';
+import { Breadcrumb, Icon, PageHeader } from 'antd';
+import { Link } from 'react-router-dom';
+import { withConfigContext } from '../../../../../../components/ConfigContext';
+import PolicyProfile from '../../components/PolicyProfile';
+class ViewPolicy extends Component {
+  routes;
+
+  constructor(props) {
+    super(props);
+    this.routes = props.routes;
+    this.config = this.props.context;
+    this.state = {
+      data: {},
+      policyOverview: {},
+      policyId: '',
+    };
+  }
+
+  render() {
+    const {
+      match: { params },
+    } = this.props;
+    return (
+      <div>
+        <PageHeader style={{ paddingTop: 0 }}>
+          <Breadcrumb style={{ paddingBottom: 16 }}>
+            <Breadcrumb.Item>
+              <Link to="/entgra">
+                <Icon type="home" /> Home
+              </Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Item>Policies</Breadcrumb.Item>
+          </Breadcrumb>
+          <div className="wrap">
+            {/* <h3>Policies</h3>*/}
+            {/* <Paragraph>Create new policy on IoT Server.</Paragraph>*/}
+          </div>
+          <div style={{ borderRadius: 5 }}>
+            <PolicyProfile policyId={params.policyId} />
+          </div>
+        </PageHeader>
+        <div
+          style={{ background: '#f0f2f5', padding: 24, minHeight: 720 }}
+        ></div>
+      </div>
+    );
+  }
+}
+export default withConfigContext(ViewPolicy);
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanel.java b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanel.java
index f816678280..28bd98759c 100644
--- a/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanel.java
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanel.java
@@ -25,6 +25,9 @@ public class SubPanel {
     @XmlElement(name = "PanelKey", required = true)
     protected String id;
 
+    @XmlElement(name = "SubPanelValues")
+    private SubPanelValuesList others;
+
     @XmlElementWrapper(name = "PanelItems")
     @XmlElement(name = "PanelItem")
     private List<PanelItem> panelItem;
@@ -37,6 +40,14 @@ public class SubPanel {
         this.id = id;
     }
 
+    public SubPanelValuesList getPayloadAttributes() {
+        return others;
+    }
+
+    public void setPayloadAttributes(SubPanelValuesList others) {
+        this.others = others;
+    }
+
     public List<PanelItem> getPanelItemList1() {
         return panelItem;
     }
diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanelValuesList.java b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanelValuesList.java
new file mode 100644
index 0000000000..7758be4f26
--- /dev/null
+++ b/components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanelValuesList.java
@@ -0,0 +1,27 @@
+package org.wso2.carbon.device.mgt.extensions.device.type.template.config;
+
+import javax.xml.bind.annotation.XmlElement;
+
+public class SubPanelValuesList {
+    @XmlElement(name = "PanelSwitch")
+    private String itemSwitch;
+
+    @XmlElement(name = "PayloadKey")
+    private String itemPayload;
+
+    public String getSwitchItem() {
+        return itemSwitch;
+    }
+
+    public void setSwitchItem(String itemSwitch) {
+        this.itemSwitch = itemSwitch;
+    }
+
+    public String getPayloadItem() {
+        return itemPayload;
+    }
+
+    public void setPayloadItem(String itemPayload) {
+        this.itemPayload = itemPayload;
+    }
+}