Add UIs for Restriction and Passcode Policies

feature/appm-store/pbac
Kaveesha Mihirangi 5 years ago committed by Dharmakeerthi Lasantha
parent c7025f07cf
commit 514d38d0b5

@ -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' }}>

@ -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' }}>

@ -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>

@ -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

@ -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;

Loading…
Cancel
Save