From 514d38d0b58b913feb4a28c729e7f698c366995e Mon Sep 17 00:00:00 2001 From: Kaveesha Mihirangi Date: Mon, 30 Mar 2020 18:33:51 +0000 Subject: [PATCH] Add UIs for Restriction and Passcode Policies --- .../components/ConfigureProfile/index.js | 90 +++++++++++++++---- .../components/ConfigureProfile/index.js | 51 +++++++++-- .../component/PolicyBulkActionBar/index.js | 18 ++-- .../component/PolicyInfo/index.js | 88 ++++++++++++++---- .../template/config/SubPanelValuesList.java | 18 ++++ 5 files changed, 220 insertions(+), 45 deletions(-) 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 9e6fedb7e92..b8af15f553e 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 @@ -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 { {element.name}} key={i}> {Object.values(element.panels).map((panel, j) => { panel = panel.panel; + let subForms = []; return (
{Object.values(panel.subFormLists).map( (form, i) => { + subForms.push(form.id); + formContainers[`${panel.panelId}`] = subForms; return (
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 index 7766b8ac23e..bd2624e83df 100644 --- 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 { @@ -829,6 +866,8 @@ class ConfigureProfile extends React.Component {
{Object.values(panel.subFormLists).map( (form, i) => { + subFormContainer[`${form.id}`] = + panel.panelId; return ( 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 index 29643808051..c2751c20a0c 100644 --- 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 (
-
+
+ > + APPLY CHANGES TO DEVICES +
@@ -110,7 +112,9 @@ class BulkActionBar extends React.Component { size={'default'} onClick={this.onCheckPolicyStatus} style={{ margin: '2px' }} - /> + > + Remove + @@ -135,7 +139,9 @@ class BulkActionBar extends React.Component { style={{ margin: '2px', }} - /> + > + Publish + @@ -158,7 +164,9 @@ class BulkActionBar extends React.Component { onClick={this.onCheckPolicyStatus} size={'default'} style={{ margin: '2px' }} - /> + > + Unpublish +
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 index 825897c830a..a24e6f5de88 100644 --- 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, })( - {columnData.others.option.map((option, i) => { return (