Merge branch 'master' into 'master'

Add UIs for Restriction and Passcode Policies

See merge request entgra/carbon-device-mgt!491
feature/appm-store/pbac
Dharmakeerthi Lasantha 5 years ago
commit 6a2a2faffd

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

@ -46,6 +46,7 @@ const { Option } = Select;
const { TextArea } = Input; const { TextArea } = Input;
const subPanelpayloadAttributes = {}; const subPanelpayloadAttributes = {};
let subFormContainer = {};
class ConfigureProfile extends React.Component { class ConfigureProfile extends React.Component {
constructor(props) { constructor(props) {
@ -65,22 +66,57 @@ class ConfigureProfile extends React.Component {
setProfileInfo = e => { setProfileInfo = e => {
let activePolicies = []; let activePolicies = [];
let activePolicyFields = {}; let activePolicyFields = {};
let activeSubPanels = [];
const allFields = this.props.form.getFieldsValue(); const allFields = this.props.form.getFieldsValue();
this.props.policyFeatureList.map(element => { this.props.policyFeatureList.map(element => {
activePolicies.push(element.featureCode); activePolicies.push(element.featureCode);
let featureData = JSON.parse(element.content); let featureData = JSON.parse(element.content);
Object.keys(featureData).map(key => { 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.props.form.setFieldsValue(activePolicyFields);
this.setState({ this.setState({
activePanelKeys: activePolicies, activePanelKeys: activePolicies,
activeSubPanelKeys: activeSubPanels,
}); });
}; };
@ -795,6 +831,7 @@ class ConfigureProfile extends React.Component {
</Col> </Col>
<Col offset={8} span={1}> <Col offset={8} span={1}>
<Switch <Switch
id={`${panel.panelId}_SWITCH`}
checkedChildren="ON" checkedChildren="ON"
unCheckedChildren="OFF" unCheckedChildren="OFF"
onChange={e => onChange={e =>
@ -829,6 +866,8 @@ class ConfigureProfile extends React.Component {
<div> <div>
{Object.values(panel.subFormLists).map( {Object.values(panel.subFormLists).map(
(form, i) => { (form, i) => {
subFormContainer[`${form.id}`] =
panel.panelId;
return ( return (
<Form name={form.id} key={i}> <Form name={form.id} key={i}>
<Form.Item style={{ display: 'none' }}> <Form.Item style={{ display: 'none' }}>

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

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

Loading…
Cancel
Save