From 7a90825ea070730d437d0a2969570b45abec1da2 Mon Sep 17 00:00:00 2001 From: Kaveesha Mihirangi Date: Wed, 1 Apr 2020 16:50:27 +0000 Subject: [PATCH] Add UI for System Update COSU) and Global Proxy policies --- .../components/ConfigureProfile/index.js | 92 ++++++++++++++++--- .../components/ConfigureProfile/index.js | 39 +++++++- .../component/PolicyInfo/index.js | 25 ++++- 3 files changed, 141 insertions(+), 15 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 b8af15f553e..87e42ee0ca9 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,7 +45,8 @@ const { TabPane } = Tabs; const { Option } = Select; const { TextArea } = Input; -const subPanelpayloadAttributes = {}; +const subPanelpayloadAttributesforCheckboxes = {}; +const subPanelpayloadAttributesforSelect = {}; let formContainers = {}; class ConfigureProfile extends React.Component { @@ -309,12 +310,14 @@ class ConfigureProfile extends React.Component { Object.keys(allFields).map(key => { if (key.includes(`${this.state.activePanelKeys[i]}-`)) { if ( - subPanelpayloadAttributes.hasOwnProperty( + subPanelpayloadAttributesforCheckboxes.hasOwnProperty( `${this.state.activePanelKeys[i]}`, ) ) { Object.entries( - subPanelpayloadAttributes[this.state.activePanelKeys[i]], + subPanelpayloadAttributesforCheckboxes[ + this.state.activePanelKeys[i] + ], ).map(([subPanel, subContent]) => { subContentsList[subContent] = {}; if ( @@ -326,6 +329,27 @@ class ConfigureProfile extends React.Component { activeFields.push(key); } }); + } else if ( + subPanelpayloadAttributesforSelect.hasOwnProperty( + `${this.state.activePanelKeys[i]}`, + ) + ) { + Object.entries( + subPanelpayloadAttributesforSelect[this.state.activePanelKeys[i]], + ).map(([subPanelSwitch, subPanels]) => { + if ( + subPanels.includes(allFields[subPanelSwitch]) && + key.includes(`${subPanelSwitch}-${allFields[subPanelSwitch]}-`) + ) { + activeFields.push(key); + } else { + for (let panel of subPanels) { + if (!key.includes(`${subPanelSwitch}-${panel}-`)) { + activeFields.push(key); + } + } + } + }); } else { activeFields.push(key); } @@ -341,12 +365,14 @@ class ConfigureProfile extends React.Component { Object.entries(values).map(([key, value]) => { if (key.includes(`${this.state.activePanelKeys[i]}-`)) { if ( - subPanelpayloadAttributes.hasOwnProperty( + subPanelpayloadAttributesforCheckboxes.hasOwnProperty( `${this.state.activePanelKeys[i]}`, ) ) { Object.entries( - subPanelpayloadAttributes[this.state.activePanelKeys[i]], + subPanelpayloadAttributesforCheckboxes[ + this.state.activePanelKeys[i] + ], ).map(([subPanel, contentKey]) => { if (key.includes(`-${subPanel}-`)) { subContentsList[contentKey][ @@ -362,7 +388,8 @@ class ConfigureProfile extends React.Component { ] = value; } }); - } else if (this.state.activePanelKeys[i] in formContainers) { + } + if (this.state.activePanelKeys[i] in formContainers) { formContainers[this.state.activePanelKeys[i]].forEach( subFeature => { if ( @@ -386,6 +413,32 @@ class ConfigureProfile extends React.Component { } }, ); + } + if ( + subPanelpayloadAttributesforSelect.hasOwnProperty( + `${this.state.activePanelKeys[i]}`, + ) + ) { + Object.keys( + subPanelpayloadAttributesforSelect[ + this.state.activePanelKeys[i] + ], + ).map(subPanelSwitch => { + if ( + key.includes(`${subPanelSwitch}-${values[subPanelSwitch]}-`) + ) { + content[ + key.replace( + `${subPanelSwitch}-${values[subPanelSwitch]}-`, + '', + ) + ] = value; + } else { + content[ + key.replace(`${this.state.activePanelKeys[i]}-`, '') + ] = value; + } + }); } else { content[ key.replace(`${this.state.activePanelKeys[i]}-`, '') @@ -411,7 +464,8 @@ class ConfigureProfile extends React.Component { // generate form items getPanelItems = (panel, panelId) => { const { getFieldDecorator } = this.props.form; - const subPanelList = {}; + const subPanelListforCheckbox = {}; + const subPanelListforSelect = {}; return panel.map((item, k) => { switch (item.type) { case 'select': @@ -538,6 +592,7 @@ class ConfigureProfile extends React.Component { style={{ display: 'block' }} > {getFieldDecorator(`${item.id}`, { + initialValue: null, rules: [ { pattern: new RegExp(`${item.optional.rules.regex}`), @@ -580,17 +635,21 @@ class ConfigureProfile extends React.Component {
{item.optional.subPanel.map((panel, i) => { - subPanelList[panel.others.itemSwitch] = + subPanelListforCheckbox[panel.others.itemSwitch] = panel.others.itemPayload; if ( - subPanelpayloadAttributes.hasOwnProperty(panelId) + subPanelpayloadAttributesforCheckboxes.hasOwnProperty( + panelId, + ) ) { Object.assign( - subPanelpayloadAttributes[panelId], - subPanelList, + subPanelpayloadAttributesforCheckboxes[panelId], + subPanelListforCheckbox, ); } else { - subPanelpayloadAttributes[panelId] = subPanelList; + subPanelpayloadAttributesforCheckboxes[ + panelId + ] = subPanelListforCheckbox; } return (
@@ -647,6 +706,8 @@ class ConfigureProfile extends React.Component { ); case 'radioGroup': + // eslint-disable-next-line no-case-declarations + let subPanelkeys = []; return (
{item.optional.subPanel.map((panel, i) => { + if (panel.hasOwnProperty('others')) { + subPanelkeys.push(panel.id); + subPanelListforSelect[`${item.id}`] = subPanelkeys; + subPanelpayloadAttributesforSelect[ + panelId + ] = subPanelListforSelect; + } return (
{ let activePolicies = []; let activePolicyFields = {}; let activeSubPanels = []; + let subPanelRadio = this.state.subPanelRadio; + this.setState({ + subPanelRadio: radioPanelStatusList, + }); const allFields = this.props.form.getFieldsValue(); this.props.policyFeatureList.map(element => { activePolicies.push(element.featureCode); @@ -109,14 +119,35 @@ class ConfigureProfile extends React.Component { if (fieldName.match(regex) != null) { activePolicyFields[fieldName] = featureData[key]; } + if ( + radioSubPanelSwitches.includes( + `${element.featureCode}-${featureData[key]}`, + ) + ) { + let subPanelViewStatus = { + [featureData[key]]: true, + }; + Object.assign(subPanelRadio, subPanelViewStatus); + } }); } }); }); this.props.form.setFieldsValue(activePolicyFields); + Object.keys(initialRadioPanels).map(policy => { + if (!activePolicies.includes(policy)) { + for (let subPanelKey of initialRadioPanels[policy]) { + let subPanelViewStatus = { + [subPanelKey]: true, + }; + Object.assign(subPanelRadio, subPanelViewStatus); + } + } + }); this.setState({ activePanelKeys: activePolicies, activeSubPanelKeys: activeSubPanels, + subPanelRadio, }); }; @@ -417,6 +448,7 @@ class ConfigureProfile extends React.Component { getPanelItems = (panel, panelId) => { const { getFieldDecorator } = this.props.form; const subPanelList = {}; + let initialRadioOptions = []; return panel.map((item, k) => { switch (item.type) { case 'select': @@ -652,6 +684,8 @@ class ConfigureProfile extends React.Component { ); case 'radioGroup': + initialRadioOptions.push(item.optional.initialValue); + initialRadioPanels[panelId] = initialRadioOptions; return (
{item.optional.subPanel.map((panel, i) => { + radioSubPanelSwitches.push(`${panelId}-${panel.id}`); + radioPanelStatusList[panel.id] = false; return (
{ activePolicies.push(element.featureCode); @@ -110,6 +117,16 @@ class PolicyInfo extends React.Component { if (fieldName.match(regex) != null) { activePolicyFields[fieldName] = featureData[key]; } + if ( + radioSubPanelSwitches.includes( + `${element.featureCode}-${featureData[key]}`, + ) + ) { + let subPanelViewStatus = { + [featureData[key]]: true, + }; + Object.assign(subPanelRadio, subPanelViewStatus); + } }); } }); @@ -118,6 +135,7 @@ class PolicyInfo extends React.Component { this.setState({ activePanelKeys: activePolicies, activeSubPanelKeys: activeSubPanels, + subPanelRadio, }); }; @@ -399,7 +417,7 @@ class PolicyInfo extends React.Component { {getFieldDecorator(`${item.id}`, { initialValue: item.optional.initialDataIndex, })( - {this.getOptionForTimeSelectors( item.optional.firstOptionValue, item.optional.lastOptionValue, @@ -555,6 +573,7 @@ class PolicyInfo extends React.Component { onChange={e => this.handleRadioPanel(e, item.optional.radio) } + disabled > {item.optional.radio.map((option, i) => { return ( @@ -568,12 +587,14 @@ class PolicyInfo extends React.Component {
{item.optional.subPanel.map((panel, i) => { + radioSubPanelSwitches.push(`${panelId}-${panel.id}`); + radioPanelStatusList[panel.id] = false; return (