Merge pull request #90 from Agile-IoT/ui_testing

Improvements for UI testing

src/actions/index.js

@@ -589,8 +589,8 @@ export const groupDelete = (owner, name) => {
     dispatch(loading(true))
     agile.idm.group.delete(owner, name)
       .then(() => {
-        dispatch(action('GROUP_DELETE', name));
-        dispatch(message(`Group ${name} deleted.`));
+        dispatch(action('GROUP_DELETE', {group_name: name, owner: owner}));
+        dispatch(message(`Group ${name} | ${owner} deleted.`));
         dispatch(loading(false));
       })
       .catch(err => {
@@ -693,6 +693,41 @@ export const fetchLocks = () => {
   }
 }
 
+export const addLockField = (params) => {
+  return (dispatch) => {
+    dispatch(loading(true));
+    switch(params.type.toUpperCase()) {
+      case 'WRITE':
+        dispatch(action('ADD_WRITE_LOCK_FIELD', params))
+        break;
+      case 'READ':
+        dispatch(action('ADD_READ_LOCK_FIELD', params))
+        break;
+      default:
+        break;
+    }
+    dispatch(loading(false));
+  }
+}
+
+export const removeLockField = (params) => {
+  return (dispatch) => {
+    dispatch(loading(true));
+    switch(params.type.toUpperCase()) {
+      case 'WRITE':
+        dispatch(action('REMOVE_WRITE_LOCK_FIELD', params))
+        break;
+      case 'READ':
+        dispatch(action('REMOVE_READ_LOCK_FIELD', params))
+        break;
+      default:
+        break;
+    }
+    dispatch(loading(false));
+  }
+}
+
+
 export const fetchEntityLocks = (entity_id, entity_type, field) => {
   return (dispatch) => {
     dispatch(loading(true));
@@ -704,9 +739,33 @@ export const fetchEntityLocks = (entity_id, entity_type, field) => {
 }
 
 export const setLock = (params) => {
+  //Make sure no delete buttons are there and avoid errors with references
+  const policies = [].concat(params.policy.map(p => {
+    const pKeys = Object.keys(p)
+    let newPolicy = {}
+    pKeys.forEach(key => {
+      if(key !== 'deleteButton') {
+        newPolicy[key] = p[key]
+      }
+    })
+
+    newPolicy.locks = newPolicy.locks.map(l => {
+      const keys = Object.keys(l)
+      let newLock = {}
+      keys.forEach(key =>{
+        if(key !== 'deleteButton') {
+          newLock[key] = l[key]
+        }
+      })
+      return newLock
+    })
+
+    return newPolicy
+  }))
+  const par = Object.assign({}, params, {policy: policies})
   return (dispatch) => {
     dispatch(loading(true));
-    agile.policies.pap.set(params).then(result => {
+    agile.policies.pap.set(par).then(result => {
       dispatch(action('POLICY_SET', result.result));
       dispatch(message(`Successfully set policy of ${params.entityId} for '${params.field}'.`));
       dispatch(loading(false));
@@ -724,8 +783,8 @@ export const deleteLock = (params) => {
   }
 }
 
-export const formSelected = (formNames) => {
-  return (dispatch) => {dispatch(action('FORM_SELECTED', formNames))}
+export const formSelected = (type, policy, formNames) => {
+  return (dispatch) => {dispatch(action('FORM_SELECTED', {type: type, policy: policy, formNames: formNames}))}
 }
 
 // fetch all available protocols

src/components/DeviceItem.js

@@ -56,7 +56,10 @@ const DeviceItem = (props) => {
   const subtitle = (<span style={styles.subtitle}> {props.subtitle} </span>)
 
   return (
-    <Card style={styles.card}>
+    <Card
+      id={props.id.replace(/:/g, '-')}
+      style={styles.card}
+    >
       <CardHeader
         title={title}
         subtitle={subtitle}

src/components/EntityItem.js

@@ -36,9 +36,11 @@ const computeColor = (status) => {
 const EntityItem = (props) => {
   return (
     <Card
+      id={props.id}
       style={{marginBottom: '20px'}}>
       <CardHeader
         title={props.title}
+        subtitle={props.owner}
         avatar={
           <Avatar
             backgroundColor={computeColor(props.status)}

src/components/Form.js

@@ -11,24 +11,24 @@
  *    Resin.io, FBK, Jolocom - initial API and implementation
  ******************************************************************************/
 import React from 'react';
-import { FloatingActionButton } from 'material-ui';
 import ReactTooltip from 'react-tooltip'
-import ContentRemove from 'material-ui/svg-icons/content/remove';
+import RemoveIcon from 'material-ui/svg-icons/action/delete-forever'
 
 const renderDeleteInputField = (position, formName, formNames, deleteFormName) => {
   const id = `delete_${formName}_${position}`;
+  const removeButtonStyle = {
+    cursor: "pointer",
+    float: "right"
+  }
+
   return (
-    <FloatingActionButton
-      mini={true}
-      id
-      key={id}
-      label='Delete'
+    <RemoveIcon
+      id={id}
+      style={removeButtonStyle}
       onClick={() => {
         deleteFormName(formNames.filter((form, i) => position !== i));
       }}
-    >
-      <ContentRemove/>
-    </FloatingActionButton>
+    />
   )
 }
 
@@ -38,9 +38,10 @@ const renderInputFields = (formNames, forms, deleteFormName, onChange) => {
       if (forms[formName].args) {
         const title = forms[formName].name ? forms[formName].name : formName
         const value = forms[formName].args.map(arg => (
-          <label key={'label_' + arg}>
+          <label style={{width: '250px', display: 'block'}} key={'label_' + arg}>
             {arg}
             <input
+              style={{width: '150px', margin: '10px'}}
               name={i + '_' + formName + '_' + arg}
               key={'input_' + i + '_' + formName + '_' + arg}
               type="text" onChange={onChange}
@@ -49,20 +50,23 @@ const renderInputFields = (formNames, forms, deleteFormName, onChange) => {
         ))
 
         return (
-          <div key={`${formName}_${i}`} data-tip={forms[formName].descr} >
+          <div style={{border: "1px solid grey", margin: "1px 0 0 1px", padding: "15px"}} key={`${formName}_${i}`}
+               data-tip={forms[formName].descr}>
             <ReactTooltip globalEventOff='click'/>
-            {title}: {value}
             {renderDeleteInputField(i, formName, formNames, deleteFormName)}
+            {title}: {value}
           </div>
         )
       } else {
         return (
           <div
+            style={{border: "1px solid grey", margin: "1px 0 0 1px", padding: "15px"}}
             key={formName + '_' + i}
             data-tip={forms[formName].descr}
             data-multiline={true}
           >
-            <ReactTooltip />
+            <ReactTooltip/>
+            {renderDeleteInputField(i, formName, formNames, deleteFormName)}
             <label key={'label_' + formName}>
               <input
                 name={i + '_' + formName}
@@ -72,7 +76,6 @@ const renderInputFields = (formNames, forms, deleteFormName, onChange) => {
                 disabled
               />
             </label>
-            {renderDeleteInputField(i, formName, formNames, deleteFormName)}
           </div>
         )
       }
@@ -82,22 +85,44 @@ const renderInputFields = (formNames, forms, deleteFormName, onChange) => {
 }
 
 const renderForm = (props, inputs) => {
+  const id = `newLockForm_${props.id.replace(/!@!/, '-').replace(/\./, '-')}`
   return (
     <div>
-      <form onSubmit={event => {
+      <form
+        className={props.class}
+        id={id}
+        onSubmit={event => {
         event.preventDefault();
         props.onSubmit(event)
       }}>
         {props.options}
         {inputs}
-        <input type='submit' value={props.submitText}/>
+        <input style={{display: 'none'}} id={id + '_button'} type={'submit'} value={props.submitText}/>
       </form>
+      <span
+
+        style={{
+          float: 'right',
+          position: 'initial',
+          fontWeight: 'bold',
+          width: '10%',
+          color: '#008714',
+          padding: '8px',
+          margin: '0px 25px 0 0'
+        }}
+        onClick={event => {
+          event.preventDefault()
+          document.getElementById(id + '_button').click()
+        }}
+      >
+            SAVE POLICY
+            </span>
     </div>
   );
 }
 
 const Form = (props) => {
-  const inputs = renderInputFields(props.formNames, props.forms, props.deleteFormName, props.onChange);
+  const inputs = renderInputFields(props.selectedForms, props.forms, props.deleteFormName, props.onChange);
   return renderForm(props, inputs);
 }
 

src/components/GenericListItem.js

@@ -16,7 +16,9 @@ import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
 const GenericListItem = (props) => {
   const styles = props.style ? props.style : {
     bar: {
-      backgroundColor: 'white' 
+      backgroundColor: 'white',
+      height: 'auto',
+      margin: '10px'
     },
     rightEl: {
       margin: '0px',
@@ -28,7 +30,9 @@ const GenericListItem = (props) => {
       <ToolbarGroup key='first' firstChild={true} style={styles.leftEl}>
         {props.leftEl}
       </ToolbarGroup>
-
+      <ToolbarGroup key='middle' style={styles.middleEl}>
+        {props.middleEl}
+      </ToolbarGroup>
       <ToolbarGroup key='last' lastChild={true} style={styles.rightEl}>
         {props.rightEl}
       </ToolbarGroup>