Add UI for System Update COSU) and Global Proxy policies

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 {
                     <div>
                       <div>
                         {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],
+                              subPanelpayloadAttributesforCheckboxes[panelId],
-                              subPanelList,
+                              subPanelListforCheckbox,
                             );
                           } else {
-                            subPanelpayloadAttributes[panelId] = subPanelList;
+                            subPanelpayloadAttributesforCheckboxes[
+                              panelId
+                            ] = subPanelListforCheckbox;
                           }
                           return (
                             <div key={i}>
@@ -647,6 +706,8 @@ class ConfigureProfile extends React.Component {
             </Form.Item>
           );
         case 'radioGroup':
+          // eslint-disable-next-line no-case-declarations
+          let subPanelkeys = [];
           return (
             <div>
               <Form.Item
@@ -681,6 +742,13 @@ class ConfigureProfile extends React.Component {
               </Form.Item>
               <div className={'sub-panel-container'}>
                 {item.optional.subPanel.map((panel, i) => {
+                  if (panel.hasOwnProperty('others')) {
+                    subPanelkeys.push(panel.id);
+                    subPanelListforSelect[`${item.id}`] = subPanelkeys;
+                    subPanelpayloadAttributesforSelect[
+                      panelId
+                    ] = subPanelListforSelect;
+                  }
                   return (
                     <div
                       key={i}

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/EditPolicy/components/ConfigureProfile/index.js

@@ -47,6 +47,9 @@ const { TextArea } = Input;
 
 const subPanelpayloadAttributes = {};
 let subFormContainer = {};
+let radioSubPanelSwitches = [];
+let initialRadioPanels = {};
+let radioPanelStatusList = {};
 
 class ConfigureProfile extends React.Component {
   constructor(props) {
@@ -60,13 +63,20 @@ class ConfigureProfile extends React.Component {
       subPanelpayloadAttributes: {},
       customInputDataArray: [],
       inputTableDataSources: {},
+      subPanelRadio: {},
     };
   }
 
+  componentDidMount() {}
+
   setProfileInfo = e => {
     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 {
             </Form.Item>
           );
         case 'radioGroup':
+          initialRadioOptions.push(item.optional.initialValue);
+          initialRadioPanels[panelId] = initialRadioOptions;
           return (
             <div>
               <Form.Item
@@ -686,12 +720,15 @@ class ConfigureProfile extends React.Component {
               </Form.Item>
               <div className={'sub-panel-container'}>
                 {item.optional.subPanel.map((panel, i) => {
+                  radioSubPanelSwitches.push(`${panelId}-${panel.id}`);
+                  radioPanelStatusList[panel.id] = false;
                   return (
                     <div
                       key={i}
                       id={panel.id}
+                      ref={panel.id}
                       style={
-                        panel.id === item.optional.initialValue
+                        this.state.subPanelRadio[panel.id]
                           ? { display: 'block' }
                           : { display: 'none' }
                       }

components/device-mgt/io.entgra.device.mgt.ui/react-app/src/scenes/Home/scenes/Policies/components/PolicyProfile/component/PolicyInfo/index.js

@@ -47,6 +47,8 @@ const { TextArea } = Input;
 const subPanelpayloadAttributes = {};
 const fieldKeys = [];
 let subFormContainer = {};
+let radioSubPanelSwitches = [];
+let radioPanelStatusList = {};
 
 class PolicyInfo extends React.Component {
   constructor(props) {
@@ -61,6 +63,7 @@ class PolicyInfo extends React.Component {
       customInputDataArray: [],
       inputTableDataSources: {},
       isInfoPreview: false,
+      subPanelRadio: {},
     };
   }
 
@@ -68,6 +71,10 @@ class PolicyInfo extends React.Component {
     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);
@@ -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,
               })(
-                <Select>
+                <Select disabled>
                   {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 {
               </Form.Item>
               <div className={'sub-panel-container'}>
                 {item.optional.subPanel.map((panel, i) => {
+                  radioSubPanelSwitches.push(`${panelId}-${panel.id}`);
+                  radioPanelStatusList[panel.id] = false;
                   return (
                     <div
                       key={i}
                       id={panel.id}
                       style={
-                        panel.id === item.optional.initialValue
+                        this.state.subPanelRadio[panel.id]
                           ? { display: 'block' }
                           : { display: 'none' }
                       }