Edgecloud 2031 Web UI - Privacy Policy should not show port fields fo…

…r ICMP (#139)

* Fixed EDGECLOUD-2031

* Fixed EDGECLOUD-2017

src/container/MexListView.js

@@ -98,11 +98,6 @@ class DeveloperListView extends React.Component {
 
     getCellClick = (field, item) => {
         this.selectedRow = item
-        // return (
-        //         field === 'Actions' ?
-        //             null :
-        //             this.detailView(item)
-        // )
     }
 
     onActionClose = (action) => {
@@ -130,8 +125,7 @@ class DeveloperListView extends React.Component {
                     {
                         field === 'Actions' ? this.getAction(item)
                         :
-                        <div ref={ref => this.tooltipref = ref}
-                            data-tip='tooltip' data-for='happyFace'>
+                        <div>
                             {String(item[field])}
                         </div>
                     }</Table.Cell>
@@ -182,7 +176,7 @@ class DeveloperListView extends React.Component {
                             {({ TransitionProps, placement }) => (
                                 <Grow
                                     {...TransitionProps}
-                                    style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom' }}
+                                    style={{ transformOrigin: placement === 'bottom' ? 'center top' : 'center right' }}
                                 >
                                     <Paper style={{ backgroundColor: '#212121', color: 'white' }}>
                                         <ClickAwayListener onClickAway={this.onActionClose}>

src/hoc/forms/MexCheckbox.js

@@ -1,16 +1,20 @@
 import React from 'react'
 import { Form, Segment } from 'semantic-ui-react';
+import { set } from 'd3';
 const MexCheckbox = (props) => {
     let form = props.form
 
+    const [value, setValue] = React.useState(props.form.value ? props.form.value : '')
+
     const onChange = (checked)=>
     {
+      setValue(checked)
       props.onChange(form, checked, props.parentForm)
     }
     return (
         form ?
         <Segment compact style={{backgroundColor: 'transparent'}}>
-        <Form.Checkbox toggle onChange={(e, { checked })=>onChange(checked)}/>
+        <Form.Checkbox toggle onChange={(e, { checked })=>onChange(checked)} checked={value}/>
         </Segment>
         : null
     )

src/hoc/forms/MexForms.js

@@ -6,40 +6,26 @@ import MexCheckbox  from './MexCheckbox';
 import { Form, Grid, Divider } from 'semantic-ui-react';
 import { IconButton } from '@material-ui/core';
 import AddIcon from '@material-ui/icons/Add';
-import RemoveIcon from '@material-ui/icons/Remove';
+import DeleteOutlinedIcon from '@material-ui/icons/DeleteOutlineOutlined';
 
 export const HEADER = 'Header'
 export const SELECT = 'Select'
 export const DUALLIST = 'DualList'
 export const INPUT = 'Input'
 export const CHECKBOX = 'Checkbox'
 
-let data = {}
-
-
 const MexForms = (props) => {
 
     const onValueSelect = (form, value, parentForm) => {
-
-        if(parentForm)
-        {
-            let parentData = data[parentForm.uuid] ? data[parentForm.uuid] : {}
-            parentData[form.field] = value;
-            data[parentForm.uuid] = parentData;
-        }
-        else
-        {
-            data[form.field] = value;
-        }
+        form.value = value;
         if(props.onValueChange)
         {
-            props.onValueChange(form, data, parentForm)
+            props.onValueChange(form, parentForm)
         }
 
     }
     const onRemoveMultiForm = (index, form)=>
     {
-        data[form.uuid] = undefined;
         form.onClick(index)
     }
 
@@ -58,7 +44,6 @@ const MexForms = (props) => {
                         null
                     }
                 </h2>
-
                 <Divider />
             </div>
         )
@@ -67,13 +52,8 @@ const MexForms = (props) => {
     const loadHorizontalForms = (parentId, forms)=>
     {
         let parentForm = props.forms[parentId];
-        let parentData = {};
-        if (data && data[parentForm.uuid]) {
-            parentData = data[parentForm.uuid];
-        }
         return forms.map((form, i) => {
 
-            form.value = parentData[form.field] ? parentData[form.field] : form.value
             let required = false;
             let disabled = false;
             if (form.rules) {
@@ -82,7 +62,7 @@ const MexForms = (props) => {
                 disabled = rules.disabled ? rules.disabled : false;
             }
             return (
-                form.field ?
+                form.field && form.visible ?
                     <Grid.Column width={3} key={i}>
                         {form.label}{required ? ' *' : ''}
                         {
@@ -95,8 +75,6 @@ const MexForms = (props) => {
                     </Grid.Column> : null
             )
         })
-
-
     }
 
     const loadForms = (index, form)=>
@@ -136,13 +114,20 @@ const MexForms = (props) => {
         return (
             <Grid.Row columns={2} key={index}>
                 {loadHorizontalForms(index, form.forms) }
-                {/* <IconButton style={{color:'white'}} onClick={()=>{onRemoveMultiForm(index, form)}} ><RemoveIcon/></IconButton> */}
+                {
+                    index === props.forms.length-1 && form.showDelete? 
+                        <div>
+                            <p></p>
+                            <IconButton style={{color:'white'}} onClick={()=>{onRemoveMultiForm(index, form)}} ><DeleteOutlinedIcon/></IconButton>
+                        </div> : 
+                        null
+                }
+
             </Grid.Row>
         )
     }
 
     let forms = props.forms
-    data = props.formData ? props.formData : data
     return (
         forms ?
             <Form>
@@ -169,7 +154,7 @@ const MexForms = (props) => {
                                     key={i}
                                     positive
                                     content={form.label}
-                                    onClick={(e) => { form.onClick(data) }}
+                                    onClick={(e) => { form.onClick() }}
                                 /> : null)
                         })}
 

src/hoc/forms/MexInput.js

@@ -2,22 +2,23 @@ import React from 'react'
 import { Form, Icon, Popup } from 'semantic-ui-react';
 const MexInput = (props) => {
 
+    let form = props.form
+
     const [value, setValue] = React.useState(props.form.value ? props.form.value : '')
 
-    const onValueChange = (form, value) =>
+    const onValueChange = (value) =>
     {
         setValue(value)
         props.onChange(form, value, props.parentForm)
     }
-    let form = props.form
 
     const getForm = () => (
         <div>
             <Form.Input
                 icon={form.error ? <Icon color='red' name='times circle outline'/> : null}
                 label={props.label ? props.label : null}
                 placeholder={form.placeholder ? form.placeholder : null}
-                onChange={(e, { value }) => onValueChange(form, value)}
+                onChange={(e, { value }) => onValueChange(value)}
                 type={form.rules ? form.rules.type : 'text'}
                 required={form.required ? form.rules.required : false}
                 disabled={props.disabled}

src/hoc/forms/MexSelect.js

@@ -30,6 +30,7 @@ const MexSelect = (props) => {
     )
 
     let form = props.form;
+
     return (
         form ?
             form.error ?