Add UIs for Restriction and Passcode Policies

2025-10-06 02:01:45 +00:00 · 2020-03-30 18:33:51 +00:00 · 2020-03-30 18:33:51 +00:00 · 514d38d0b5
commit 514d38d0b5
parent c7025f07cf
5 changed files with 220 additions and 45 deletions
--- 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
@ -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 => {
-              if (`${this.state.activePanelKeys[i]}-${subPanel}` === true) {
-                if (key.includes(`-${subPanel}-`)) {
-                  activeFields.push(key);
-                }
-              } else if (!key.includes(`-${subPanel}-`)) {
+            ).map(([subPanel, subContent]) => {
+              subContentsList[subContent] = {};
+              if (
+                allFields[`${this.state.activePanelKeys[i]}-${subPanel}`] ===
+                true
+              ) {
+                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[
-                key.replace(`${this.state.activePanelKeys[i]}-`, '')
-              ] = value;
+              if (
+                subPanelpayloadAttributes.hasOwnProperty(
+                  `${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 = {
-            featureCode: this.state.activePanelKeys[i],
-            deviceType: 'android',
-            content: content,
-          };
-          profileFeaturesList.push(feature);
+          if (!(this.state.activePanelKeys[i] in formContainers)) {
+            let feature = {
+              featureCode: this.state.activePanelKeys[i],
+              deviceType: 'android',
+              content: content,
+            };
+            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' }}>
--- 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
@ -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');
-        Object.keys(allFields).map(fieldName => {
-          if (fieldName.match(regex) != null) {
-            activePolicyFields[fieldName] = featureData[key];
-          }
-        });
+        if (element.featureCode in subPanelpayloadAttributes) {
+          Object.entries(subPanelpayloadAttributes[element.featureCode]).map(
+            ([panelKey, payloadAttr]) => {
+              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' }}>
--- 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
@ -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>
--- 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
@ -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');
-        Object.keys(allFields).map(fieldName => {
-          if (fieldName.match(regex) != null) {
-            activePolicyFields[fieldName] = featureData[key];
-          }
-        });
+        if (element.featureCode in subPanelpayloadAttributes) {
+          Object.entries(subPanelpayloadAttributes[element.featureCode]).map(
+            ([panelKey, payloadAttr]) => {
+              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
-                tabPosition={'left'}
-                size={'large'}
-                onChange={this.setProfileInfo}
-              >
+              <Tabs tabPosition={'left'} size={'large'}>
                {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
--- 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
@ -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;