Add UIs for Restriction and Passcode Policies

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/AddPolicy/components/ConfigureProfile/index.js

@@ -46,6 +46,7 @@ const { Option } = Select;
 const { TextArea } = Input;
 
 const subPanelpayloadAttributes = {};
+let formContainers = {};
 
 class ConfigureProfile extends React.Component {
   constructor(props) {
@@ -303,7 +304,7 @@ class ConfigureProfile extends React.Component {
   onHandleContinue = (e, formname) => {
     const allFields = this.props.form.getFieldsValue();
     let activeFields = [];
-    // get currently active field list
+    let subContentsList = {};
     for (let i = 0; i < this.state.activePanelKeys.length; i++) {
       Object.keys(allFields).map(key => {
         if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
@@ -312,14 +313,16 @@ class ConfigureProfile extends React.Component {
               `${this.state.activePanelKeys[i]}`,
             )
           ) {
-            Object.keys(
+            Object.entries(
               subPanelpayloadAttributes[this.state.activePanelKeys[i]],
-            ).map(subPanel => {
+            ).map(([subPanel, subContent]) => {
-              if (`${this.state.activePanelKeys[i]}-${subPanel}` === true) {
+              subContentsList[subContent] = {};
-                if (key.includes(`-${subPanel}-`)) {
+              if (
-                  activeFields.push(key);
+                allFields[`${this.state.activePanelKeys[i]}-${subPanel}`] ===
-                }
+                true
-              } else if (!key.includes(`-${subPanel}-`)) {
+              ) {
+                activeFields.push(key);
+              } else if (!key.includes(`-${subPanel}`)) {
                 activeFields.push(key);
               }
             });
@@ -337,17 +340,67 @@ class ConfigureProfile extends React.Component {
           let content = {};
           Object.entries(values).map(([key, value]) => {
             if (key.includes(`${this.state.activePanelKeys[i]}-`)) {
-              content[
+              if (
-                key.replace(`${this.state.activePanelKeys[i]}-`, '')
+                subPanelpayloadAttributes.hasOwnProperty(
-              ] = value;
+                  `${this.state.activePanelKeys[i]}`,
+                )
+              ) {
+                Object.entries(
+                  subPanelpayloadAttributes[this.state.activePanelKeys[i]],
+                ).map(([subPanel, contentKey]) => {
+                  if (key.includes(`-${subPanel}-`)) {
+                    subContentsList[contentKey][
+                      key.replace(
+                        `${this.state.activePanelKeys[i]}-${subPanel}-`,
+                        '',
+                      )
+                    ] = value;
+                    content = { ...content, ...subContentsList };
+                  } else {
+                    content[
+                      key.replace(`${this.state.activePanelKeys[i]}-`, '')
+                    ] = value;
+                  }
+                });
+              } else if (this.state.activePanelKeys[i] in formContainers) {
+                formContainers[this.state.activePanelKeys[i]].forEach(
+                  subFeature => {
+                    if (
+                      key.includes(
+                        `${this.state.activePanelKeys[i]}-${subFeature}-`,
+                      )
+                    ) {
+                      let subFormContent = {};
+                      subFormContent[
+                        key.replace(
+                          `${this.state.activePanelKeys[i]}-${subFeature}-`,
+                          '',
+                        )
+                      ] = value;
+                      let feature = {
+                        featureCode: subFeature,
+                        deviceType: 'android',
+                        content: subFormContent,
+                      };
+                      profileFeaturesList.push(feature);
+                    }
+                  },
+                );
+              } else {
+                content[
+                  key.replace(`${this.state.activePanelKeys[i]}-`, '')
+                ] = value;
+              }
             }
           });
-          let feature = {
+          if (!(this.state.activePanelKeys[i] in formContainers)) {
-            featureCode: this.state.activePanelKeys[i],
+            let feature = {
-            deviceType: 'android',
+              featureCode: this.state.activePanelKeys[i],
-            content: content,
+              deviceType: 'android',
-          };
+              content: content,
-          profileFeaturesList.push(feature);
+            };
+            profileFeaturesList.push(feature);
+          }
         }
         this.props.getPolicyPayloadData(formname, profileFeaturesList);
         this.props.getNextStep();
@@ -751,6 +804,7 @@ class ConfigureProfile extends React.Component {
               <TabPane tab={<span>{element.name}</span>} key={i}>
                 {Object.values(element.panels).map((panel, j) => {
                   panel = panel.panel;
+                  let subForms = [];
                   return (
                     <div key={j}>
                       <Collapse
@@ -803,6 +857,8 @@ class ConfigureProfile extends React.Component {
                             <div>
                               {Object.values(panel.subFormLists).map(
                                 (form, i) => {
+                                  subForms.push(form.id);
+                                  formContainers[`${panel.panelId}`] = subForms;
                                   return (
                                     <Form name={form.id} key={i}>
                                       <Form.Item style={{ display: 'none' }}>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/ConfigureProfile/index.js

@@ -46,6 +46,7 @@ const { Option } = Select;
 const { TextArea } = Input;
 
 const subPanelpayloadAttributes = {};
+let subFormContainer = {};
 
 class ConfigureProfile extends React.Component {
   constructor(props) {
@@ -65,22 +66,57 @@ class ConfigureProfile extends React.Component {
   setProfileInfo = e => {
     let activePolicies = [];
     let activePolicyFields = {};
+    let activeSubPanels = [];
     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');
+        if (element.featureCode in subPanelpayloadAttributes) {
-        Object.keys(allFields).map(fieldName => {
+          Object.entries(subPanelpayloadAttributes[element.featureCode]).map(
-          if (fieldName.match(regex) != null) {
+            ([panelKey, payloadAttr]) => {
-            activePolicyFields[fieldName] = featureData[key];
+              if (key === payloadAttr) {
-          }
+                activeSubPanels.push(`${element.featureCode}-${panelKey}`);
-        });
+              }
+            },
+          );
+
+          let regex = new RegExp(`${element.featureCode}.+${key}`, 'g');
+          Object.keys(allFields).map(fieldName => {
+            if (fieldName.match(regex) != null) {
+              activePolicyFields[fieldName] = featureData[key];
+            }
+          });
+        } else if (element.featureCode in subFormContainer) {
+          let regex = new RegExp(`.+${element.featureCode}-${key}`, 'g');
+          Object.keys(allFields).map(fieldName => {
+            if (fieldName.match(regex) != null) {
+              activePolicyFields[fieldName] = featureData[key];
+              if (
+                !activePolicies.includes(
+                  fieldName.replace(`-${element.featureCode}-${key}`, ''),
+                )
+              ) {
+                activePolicies.push(
+                  fieldName.replace(`-${element.featureCode}-${key}`, ''),
+                );
+              }
+            }
+          });
+        } else {
+          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,
+      activeSubPanelKeys: activeSubPanels,
     });
   };
 
@@ -795,6 +831,7 @@ class ConfigureProfile extends React.Component {
                                 </Col>
                                 <Col offset={8} span={1}>
                                   <Switch
+                                    id={`${panel.panelId}_SWITCH`}
                                     checkedChildren="ON"
                                     unCheckedChildren="OFF"
                                     onChange={e =>
@@ -829,6 +866,8 @@ class ConfigureProfile extends React.Component {
                             <div>
                               {Object.values(panel.subFormLists).map(
                                 (form, i) => {
+                                  subFormContainer[`${form.id}`] =
+                                    panel.panelId;
                                   return (
                                     <Form name={form.id} key={i}>
                                       <Form.Item style={{ display: 'none' }}>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PoliciesTable/component/PolicyBulkActionBar/index.js

@@ -65,7 +65,7 @@ class BulkActionBar extends React.Component {
 
     return (
       <div>
-        <div style={{ padding: '8px' }}>
+        <div style={{ padding: '5px' }}>
           <Tooltip placement="bottom" title={'Apply Changes to Device'}>
             <Popconfirm
               placement="topLeft"
@@ -80,7 +80,9 @@ class BulkActionBar extends React.Component {
                 icon="check-circle"
                 size={'default'}
                 style={{ margin: '2px' }}
-              />
+              >
+                APPLY CHANGES TO DEVICES
+              </Button>
             </Popconfirm>
           </Tooltip>
         </div>
@@ -110,7 +112,9 @@ class BulkActionBar extends React.Component {
                 size={'default'}
                 onClick={this.onCheckPolicyStatus}
                 style={{ margin: '2px' }}
-              />
+              >
+                Remove
+              </Button>
             </Popconfirm>
           </Tooltip>
           <Divider type="vertical" />
@@ -135,7 +139,9 @@ class BulkActionBar extends React.Component {
                 style={{
                   margin: '2px',
                 }}
-              />
+              >
+                Publish
+              </Button>
             </Popconfirm>
           </Tooltip>
           <Divider type="vertical" />
@@ -158,7 +164,9 @@ class BulkActionBar extends React.Component {
                 onClick={this.onCheckPolicyStatus}
                 size={'default'}
                 style={{ margin: '2px' }}
-              />
+              >
+                Unpublish
+              </Button>
             </Popconfirm>
           </Tooltip>
         </div>

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/PolicyInfo/index.js

@@ -46,6 +46,7 @@ const { TextArea } = Input;
 
 const subPanelpayloadAttributes = {};
 const fieldKeys = [];
+let subFormContainer = {};
 
 class PolicyInfo extends React.Component {
   constructor(props) {
@@ -55,6 +56,7 @@ class PolicyInfo extends React.Component {
       data: {},
       policyFeatureList: [],
       activePanelKeys: [],
+      activeSubPanelKeys: [],
       profilePreviewKey: '',
       customInputDataArray: [],
       inputTableDataSources: {},
@@ -65,22 +67,57 @@ class PolicyInfo extends React.Component {
   setProfileInfo = e => {
     let activePolicies = [];
     let activePolicyFields = {};
+    let activeSubPanels = [];
     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');
+        if (element.featureCode in subPanelpayloadAttributes) {
-        Object.keys(allFields).map(fieldName => {
+          Object.entries(subPanelpayloadAttributes[element.featureCode]).map(
-          if (fieldName.match(regex) != null) {
+            ([panelKey, payloadAttr]) => {
-            activePolicyFields[fieldName] = featureData[key];
+              if (key === payloadAttr) {
-          }
+                activeSubPanels.push(`${element.featureCode}-${panelKey}`);
-        });
+              }
+            },
+          );
+
+          let regex = new RegExp(`${element.featureCode}.+${key}`, 'g');
+          Object.keys(allFields).map(fieldName => {
+            if (fieldName.match(regex) != null) {
+              activePolicyFields[fieldName] = featureData[key];
+            }
+          });
+        } else if (element.featureCode in subFormContainer) {
+          let regex = new RegExp(`.+${element.featureCode}-${key}`, 'g');
+          Object.keys(allFields).map(fieldName => {
+            if (fieldName.match(regex) != null) {
+              activePolicyFields[fieldName] = featureData[key];
+              if (
+                !activePolicies.includes(
+                  fieldName.replace(`-${element.featureCode}-${key}`, ''),
+                )
+              ) {
+                activePolicies.push(
+                  fieldName.replace(`-${element.featureCode}-${key}`, ''),
+                );
+              }
+            }
+          });
+        } else {
+          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,
+      activeSubPanelKeys: activeSubPanels,
     });
   };
 
@@ -235,7 +272,7 @@ class PolicyInfo extends React.Component {
               {getFieldDecorator(`${columnData.key}${i}`, {
                 initialValue: columnData.others.initialDataIndex,
               })(
-                <Select>
+                <Select disabled>
                   {columnData.others.option.map((option, i) => {
                     return (
                       <Option key={i} value={option.key}>
@@ -285,6 +322,7 @@ class PolicyInfo extends React.Component {
                       onChange={e =>
                         this.handleSelectedPanel(e, item.optional.subPanel)
                       }
+                      disabled
                     >
                       {item.optional.option.map((option, i) => {
                         return (
@@ -332,7 +370,7 @@ class PolicyInfo extends React.Component {
               {getFieldDecorator(`${item.id}`, {
                 initialValue: `${item.optional.option[0].name}`,
               })(
-                <Select>
+                <Select disabled>
                   {item.optional.option.map((option, i) => {
                     return (
                       <Option key={i} value={option.value}>
@@ -413,7 +451,7 @@ class PolicyInfo extends React.Component {
                           valuePropName: 'checked',
                           initialValue: item.optional.ischecked,
                         })(
-                          <Checkbox>
+                          <Checkbox disabled>
                             <span>
                               {item.label}&nbsp;
                               <Tooltip title={item.tooltip} placement="right">
@@ -459,7 +497,7 @@ class PolicyInfo extends React.Component {
                 valuePropName: 'checked',
                 initialValue: item.optional.ischecked,
               })(
-                <Checkbox>
+                <Checkbox disabled>
                   <span>
                     {item.label}&nbsp;
                     <Tooltip title={item.tooltip} placement="right">
@@ -629,12 +667,20 @@ class PolicyInfo extends React.Component {
   };
 
   onPreview = e => {
+    this.setProfileInfo();
     this.setState({
       profilePreviewKey: 'profileInfo',
       isInfoPreview: true,
     });
   };
 
+  onCancelPreview = e => {
+    this.setState({
+      profilePreviewKey: 'profileInfo',
+      isInfoPreview: false,
+    });
+  };
+
   render() {
     const { policyUIConfigurationsList } = this.props;
     const { getFieldDecorator } = this.props.form;
@@ -645,16 +691,26 @@ class PolicyInfo extends React.Component {
             <Title level={4}>Profile Information</Title>
           </Col>
           <Col span={16}>
-            <Button type="link" icon="eye" onClick={this.onPreview}>
+            <Button
+              type="link"
+              icon="eye"
+              onClick={this.onPreview}
+              style={{ display: this.state.isInfoPreview ? 'none' : 'inline' }}
+            >
               <Text
                 style={{
                   fontSize: 'small',
-                  display: this.state.isInfoPreview ? 'none' : 'inline',
                 }}
               >
                 (Click to view policy information)
               </Text>
             </Button>
+            <Button
+              type="link"
+              icon="eye-invisible"
+              onClick={this.onCancelPreview}
+              style={{ display: this.state.isInfoPreview ? 'inline' : 'none' }}
+            />
           </Col>
         </Row>
         <Collapse
@@ -670,11 +726,7 @@ class PolicyInfo extends React.Component {
             }}
           >
             <div className="tab-container">
-              <Tabs
+              <Tabs tabPosition={'left'} size={'large'}>
-                tabPosition={'left'}
-                size={'large'}
-                onChange={this.setProfileInfo}
-              >
                 {policyUIConfigurationsList.map((element, i) => {
                   return (
                     <TabPane tab={<span>{element.name}</span>} key={i}>
@@ -720,6 +772,8 @@ class PolicyInfo extends React.Component {
                                   <div>
                                     {Object.values(panel.subFormLists).map(
                                       (form, i) => {
+                                        subFormContainer[`${form.id}`] =
+                                          panel.panelId;
                                         return (
                                           <Form name={form.id} key={i}>
                                             <Form.Item

components/device-mgt/org.wso2.carbon.device.mgt.extensions/src/main/java/org/wso2/carbon/device/mgt/extensions/device/type/template/config/SubPanelValuesList.java

@@ -1,3 +1,21 @@
+/*
+ * Copyright (c) 2020, Entgra (Pvt) Ltd. (http://www.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.
+ */
+
 package org.wso2.carbon.device.mgt.extensions.device.type.template.config;
 
 import javax.xml.bind.annotation.XmlElement;