From 13df0d8ddf45f0a9d3f343d100ee0f6885d61a27 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 26 Jun 2018 12:16:36 +0200
Subject: [PATCH 01/16] Add ids entity and policy cards

---
 src/components/LockItem.js        | 2 +-
 src/components/SecurityItem.js    | 2 +-
 src/containers/Locks.js           | 1 +
 src/containers/SecurityDetails.js | 7 +++++--
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/LockItem.js b/src/components/LockItem.js
index 8964fe2..83394ad 100644
--- a/src/components/LockItem.js
+++ b/src/components/LockItem.js
@@ -94,7 +94,7 @@ const getListItems = (locks, policyName) => {
 
 const LockItem = (props) => {
   return (
-    <Card
+    <Card id={props.id.replace('!@!', '-')}
       style={{marginBottom: '20px'}}>
       <CardHeader
         actAsExpander={props.actAsExpander}
diff --git a/src/components/SecurityItem.js b/src/components/SecurityItem.js
index f19b491..c8a7aa3 100644
--- a/src/components/SecurityItem.js
+++ b/src/components/SecurityItem.js
@@ -218,7 +218,7 @@ const SecurityItem = (props) => {
   }
 
   return (
-    <Card style={{ }}>
+    <Card id={id.replace('!@!', '-')} style={{ }}>
       <CardHeader
         actAsExpander
         showExpandableButton={props.showExpandableButton}
diff --git a/src/containers/Locks.js b/src/containers/Locks.js
index b4462a5..4be1109 100644
--- a/src/containers/Locks.js
+++ b/src/containers/Locks.js
@@ -219,6 +219,7 @@ class Locks extends Component {
         title={policy}
         policy={policies[policy]}
         key={`${policy}_locks`}
+        id={this.props.params.id}
       />))
     }
     return policyItems
diff --git a/src/containers/SecurityDetails.js b/src/containers/SecurityDetails.js
index fe6b656..daf8cde 100644
--- a/src/containers/SecurityDetails.js
+++ b/src/containers/SecurityDetails.js
@@ -103,6 +103,7 @@ class SecurityDetails extends Component {
         <TextField
           hintText={'New Password'}
           ref='new_password'
+          id={'new_password'}
           style={{
             width: '30%',
             marginRight:'15px',
@@ -113,7 +114,8 @@ class SecurityDetails extends Component {
           }}
         />
         <TextField
-          hintText={'Old Password'} 
+          hintText={'Old Password'}
+          id={'old_password'}
           ref='old_password'
           style={{
             width: '30%',
@@ -132,8 +134,9 @@ class SecurityDetails extends Component {
     return (
       <div style={styles.passwordFieldStyle}>
         <TextField
-          hintText={'Old Password'} 
+          hintText={'New Password'}
           ref='new_password'
+          id={'new_password'}
           style={{
             width: '30%',
             marginRight:'15px',

From 33ff3a24e44bc8d39a4e74caf2141c06e1e8ffff Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 26 Jun 2018 13:26:56 +0200
Subject: [PATCH 02/16] Add key properties + add max-width for tooltips

---
 src/components/LockItem.js | 25 +++++++++++++------------
 src/containers/AddLock.js  |  8 ++++----
 src/containers/Locks.js    | 19 ++++++++++---------
 src/styles/index.css       |  5 +++++
 4 files changed, 32 insertions(+), 25 deletions(-)

diff --git a/src/components/LockItem.js b/src/components/LockItem.js
index 83394ad..8010c8c 100644
--- a/src/components/LockItem.js
+++ b/src/components/LockItem.js
@@ -24,9 +24,9 @@ import {List, ListItem} from 'material-ui/List';
  * e.g. attrEq, where args = ['role', 'admin'] or similar
  * @param args the array of arguments of a lock
  */
-const getArrayArgsListItems = (args) => {
+const getArrayArgsListItems = (args, op) => {
   return args.map((arg, i) => {
-    return (<ListItem key={`arg_${i}`}>
+    return (<ListItem key={`arg_${i}_${op}`}>
         {i}:  {'' + arg}
       </ListItem>
     );
@@ -38,14 +38,14 @@ const getArrayArgsListItems = (args) => {
  * @param args the lock with all its properties
  * @param lock path of the lock (e.g. actions.write.hasType)
  */
-const getArgsListItems = (args) => {
+const getArgsListItems = (args, op) => {
   let itemList = [];
   for (var arg in args) {
     if(arg !== 'deleteButton' && arg !== 'not') {
-      itemList.push(<ListItem key={`${arg}`}>
+      itemList.push(<ListItem key={`${arg}_${op}`}>
           {arg}: {
           Array.isArray(args[arg]) ?
-            (<List>{getArrayArgsListItems(args[arg])}</List>) :
+            (<List key={`list_${arg}_${op}`}>{getArrayArgsListItems(args[arg], op)}</List>) :
             '' + args[arg]
         }
         </ListItem>
@@ -63,7 +63,7 @@ const getArgsListItems = (args) => {
 const getLocksListItems = (locks, op) => {
   return locks.map((lock, i) => {
     return (
-      <ListItem key={`${i}`}>
+      <ListItem key={`${op}_${i}`}>
         {getArgsListItems(lock, op + '.' + lock.lock)}
         {lock.deleteButton}
       </ListItem>
@@ -76,13 +76,13 @@ const getLocksListItems = (locks, op) => {
  * @param locks the locks for a policy
  * @param policyName the name of the policy
  */
-const getListItems = (locks, policyName) => {
+const getListItems = (id, locks, policyName) => {
   if(locks) {
     return locks.map((lock, i) => {
       return (
-        <ListItem key={`${i}_${lock.op}`}>
+        <ListItem key={`${id}_${i}_${lock.op}_${policyName}`}>
           {`${lock.op}`}
-          {(<List>
+          {(<List key={`list_${id}_${i}_${lock.op}_${policyName}`}>
             {getLocksListItems(lock.locks, policyName + '.' + lock.op)}
             {lock.deleteButton}
           </List>)}
@@ -94,8 +94,9 @@ const getListItems = (locks, policyName) => {
 
 const LockItem = (props) => {
   return (
-    <Card id={props.id.replace('!@!', '-')}
-      style={{marginBottom: '20px'}}>
+    <Card id={`${props.id.replace('!@!', '-')}`}
+          key={`${props.id.replace('!@!', '-')}`}
+          style={{marginBottom: '20px'}}>
       <CardHeader
         actAsExpander={props.actAsExpander}
         showExpandableButton={props.showExpandableButton}
@@ -103,7 +104,7 @@ const LockItem = (props) => {
         subtitle={props.subtitle}
       />
       <CardText expandable>
-        <List>{getListItems(props.policy.flows, props.title)}</List>
+        <List key={`${props.id.replace('!@!', '-')}_${props.title}`}>{getListItems(props.id.replace('!@!', '-'), props.policy.flows, props.title)}</List>
       </CardText>
       <CardActions>
         {props.policy.buttons}
diff --git a/src/containers/AddLock.js b/src/containers/AddLock.js
index 4ac2197..b2167cb 100644
--- a/src/containers/AddLock.js
+++ b/src/containers/AddLock.js
@@ -37,7 +37,7 @@ class AddLock extends Component {
   }
 
   renderOptions(options) {
-    const optionFields = [(<option value='empty' key='emptyOption'/>)]
+    const optionFields = [(<option value='' key=''/>)]
     for (let key in options) {
       if (options.hasOwnProperty(key)) {
         optionFields.push((
@@ -97,9 +97,9 @@ class AddLock extends Component {
     const options = this.renderOptions(this.props.lockFormats)
     if (options.length) {
       return (<select 
-        value={'empty'} 
+        value={''}
         onChange={e => {
-          if (e.target.value !== 'empty') {
+          if (e.target.value !== '') {
             this.props.formSelected(this.props.form.concat(e.target.value))
           }
       }}>
@@ -111,8 +111,8 @@ class AddLock extends Component {
   render() {
     return (
       <div>
-        {this.renderForm(this.props.form)}
         {this.renderSelectField()}
+        {this.renderForm(this.props.form)}
       </div>
     )
   }
diff --git a/src/containers/Locks.js b/src/containers/Locks.js
index 4be1109..239a5d8 100644
--- a/src/containers/Locks.js
+++ b/src/containers/Locks.js
@@ -77,10 +77,11 @@ class Locks extends Component {
           <div>
             <TextField
               ref={`addPolicy_${id}_${type}_${field}`}
-              hintText='Name of new policy'/>
+              hintText='Name of new policy'
+            />
             <span
               id={`add_${id}_${field}`}
-              key={`${id}_${field}`}
+              key={`add_${id}_${field}`}
               style={{
                 float: 'right',
                 position: 'initial',
@@ -125,7 +126,7 @@ class Locks extends Component {
       <FloatingActionButton
         mini={true}
         id={`delete_${id}_${field}_${i}`}
-        key={`${id}_${field}_${i}`}
+        key={`delete_${id}_${field}_${i}`}
         label='Delete'
         style={deleteButtonStyle}
         onClick={() => {
@@ -157,8 +158,8 @@ class Locks extends Component {
     return (
       <FloatingActionButton
         mini={true}
-        id={`delete_${id}_${field}_${i}_{j}`}
-        key={`${id}_${field}_${i}_${j}`}
+        id={`delete_${id}_${field}_${i}_${j}`}
+        key={`delete_${id}_${field}_${i}_${j}`}
         label='Delete'
         style={deleteButtonStyle}
         onClick={() => {
@@ -193,7 +194,7 @@ class Locks extends Component {
     })
   }
 
-  renderButtons() {
+  renderPolicyItemComponents() {
     const result= {}
     const {policies} = this.props
     for (let policy in policies) {
@@ -210,7 +211,7 @@ class Locks extends Component {
   }
 
   getPolicyItems() {
-    let policies = this.renderButtons()
+    let policies = this.renderPolicyItemComponents()
     let policyItems = []
     for (var policy in policies) {
       policyItems.push((<LockItem
@@ -218,8 +219,8 @@ class Locks extends Component {
         showExpandableButton
         title={policy}
         policy={policies[policy]}
-        key={`${policy}_locks`}
-        id={this.props.params.id}
+        key={`${this.props.params.id}_${policy}`}
+        id={`${this.props.params.id}_${policy}`}
       />))
     }
     return policyItems
diff --git a/src/styles/index.css b/src/styles/index.css
index fe56512..6ec0d79 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -182,3 +182,8 @@ i.glyphicon { display: none; }
 .array-item-move-up::after { content: 'Move Up'; }
 .array-item-move-down::after { content: 'Move Down'; }
 .array-item-remove::after { content: 'Remove'; }
+
+
+.__react_component_tooltip {
+  max-width: 300px;
+}
\ No newline at end of file

From 50de00b06f36bd31e6b12e6fa41ae915e5d9fdc3 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 26 Jun 2018 14:01:17 +0200
Subject: [PATCH 03/16] Add addLock info

---
 src/containers/AddLock.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/containers/AddLock.js b/src/containers/AddLock.js
index b2167cb..e0d85da 100644
--- a/src/containers/AddLock.js
+++ b/src/containers/AddLock.js
@@ -96,7 +96,9 @@ class AddLock extends Component {
   renderSelectField() {
     const options = this.renderOptions(this.props.lockFormats)
     if (options.length) {
-      return (<select 
+      return (<div>Add locks to build a policy. You can chose multiple locks through the dropdown. The policy only resolves to TRUE if all of the locks resolve to TRUE.
+        <div>
+        Add a lock:<select
         value={''}
         onChange={e => {
           if (e.target.value !== '') {
@@ -104,7 +106,7 @@ class AddLock extends Component {
           }
       }}>
         {options}
-      </select>)
+        </select></div></div>)
     }
   }
 

From 5d18927fea72ad45ef78831f1c281fd88e63c7c9 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 26 Jun 2018 15:06:33 +0200
Subject: [PATCH 04/16] Consistent rendering of user buttons

---
 src/containers/Entities.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/containers/Entities.js b/src/containers/Entities.js
index eb4be9b..30a493a 100644
--- a/src/containers/Entities.js
+++ b/src/containers/Entities.js
@@ -22,8 +22,8 @@ class Entities extends Component {
   renderNewEntityButton() {
     return (
       <div>
-        <Link to={`/add/${this.props.params.type.replace('/','')}`}>
-          <FlatButton label={`Add new ${this.props.params.type.replace('/','')}`}/>
+        <Link to={`/add/${this.props.params.type.replace('/', '')}`}>
+          <FlatButton label={`Add new ${this.props.params.type.replace('/', '')}`}/>
         </Link>
       </div>
     )
@@ -45,9 +45,11 @@ class Entities extends Component {
       default:
         return (
           <div>
-            <FlatButton label='Delete' onClick={() => {
-              this.props.entityDelete(entity, this.props.params.type);
-            }}/>
+            <Link>
+              <FlatButton label='Delete' onClick={() => {
+                this.props.entityDelete(entity, this.props.params.type);
+              }}/>
+            </Link>
             <Link to={`/entity/${entity.id}/${this.props.params.type}`}>
               <FlatButton label='View'/>
             </Link>
@@ -84,21 +86,21 @@ class Entities extends Component {
   }
 
   componentDidUpdate(prevProps) {
-    if(this.props.location.pathname !== prevProps.location.pathname) {
+    if (this.props.location.pathname !== prevProps.location.pathname) {
       this.props.entityFetch(this.props.params.type)
     }
   }
 
   render() {
     const addnewExists = this.props.ui &&
-      this.props.ui['/' + this.props.params.type] && 
+      this.props.ui['/' + this.props.params.type] &&
       Object.keys(this.props.ui['/' + this.props.params.type]).includes('addNew');
 
     return (
       <div>
         {this.renderItems()}
-        {(addnewExists && this.props.ui['/' + this.props.params.type].addNew) || !addnewExists 
-          ? this.renderNewEntityButton() 
+        {(addnewExists && this.props.ui['/' + this.props.params.type].addNew) || !addnewExists
+          ? this.renderNewEntityButton()
           : undefined
         }
       </div>

From 5d3dcc572a5e7bc1b683c0c0aa550b97e995904e Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 26 Jun 2018 17:42:49 +0200
Subject: [PATCH 05/16] Add ids to attributes

---
 src/components/SecurityItem.js    | 12 +++++++-----
 src/containers/Nav.js             |  2 +-
 src/containers/SecurityDetails.js |  3 +++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/components/SecurityItem.js b/src/components/SecurityItem.js
index c8a7aa3..d7b1698 100644
--- a/src/components/SecurityItem.js
+++ b/src/components/SecurityItem.js
@@ -64,11 +64,11 @@ const SecurityItem = (props) => {
         }
       }
       return (
-        <ListItem key={`${id}${name}`}
+        <ListItem id={`${parent}_value`} key={`${parent}_value`}
           style={{backgroundColor: '#eaeaea'}}
           primaryTogglesNestedList={true}
           nestedItems={[
-            <div>
+            <div key={`${parent}_${name}`}>
               {nestedElement}
               {editLock}
             </div>
@@ -113,7 +113,7 @@ const SecurityItem = (props) => {
       });
 
       return (
-        <div key={`${id}${name}`}>
+        <div key={`${name}`}>
           <span style={{float: 'left'}}>{name}</span>: {nestedElement}
         </div>
       );
@@ -139,7 +139,7 @@ const SecurityItem = (props) => {
         return <ListItem
           disabled
           id={`${attribute.name}`}
-          key={`${id}${attribute.name}`}>
+          key={`${attribute.name}`}>
             {handlerFunction({id, entityType, attribute, addAttributeField, parent})}
           </ListItem>
       })
@@ -175,6 +175,7 @@ const SecurityItem = (props) => {
   // TODO EDIT LOCK
   const getInlineEditField = ({ id, entityType, name, parent, value, editLock }) => {
     const field = <TextField
+      id={`${parent}_value`}
       defaultValue={value}
       style={{
         float: 'right',
@@ -198,6 +199,7 @@ const SecurityItem = (props) => {
     }
 
     const removeIcon = <RemoveIcon
+      id={`delete_${parent}`}
       style={removeButtonStyle}
       onClick={() => {
         handleDelete({
@@ -209,7 +211,7 @@ const SecurityItem = (props) => {
     />
 
     return (
-      <ListItem key={`${id}${name}`}>
+      <ListItem key={`attribute_${parent}`}>
         {removeIcon}
         {name}:{field}
         {editLock}
diff --git a/src/containers/Nav.js b/src/containers/Nav.js
index a69b927..226b421 100644
--- a/src/containers/Nav.js
+++ b/src/containers/Nav.js
@@ -54,7 +54,7 @@ class Nav extends Component {
     }
 
     return(
-      <Tabs value={tabMap[this.props.location.pathname]}>
+      <Tabs id={`navigation`} value={tabMap[this.props.location.pathname]}>
         <Tab label="Discover"
              value="/"
              onActive={this.handleActive.bind(this)}
diff --git a/src/containers/SecurityDetails.js b/src/containers/SecurityDetails.js
index daf8cde..de039d3 100644
--- a/src/containers/SecurityDetails.js
+++ b/src/containers/SecurityDetails.js
@@ -204,6 +204,7 @@ class SecurityDetails extends Component {
         primaryText = {
           <div>
             <TextField
+              id={parent ? `new-attribute-${parent}`: `new-attribute`}
               defaultValue={this.props.input.input_name}
               hintText='New Attribute'
               style={{marginRight: '10%'}}
@@ -212,6 +213,7 @@ class SecurityDetails extends Component {
               }}
             />
             <TextField
+              id={parent ? `new-attribute-${parent}-value` : `new-attribute-value`}
               style={{margin: 'auto'}}
               placeholder='Value'
               onBlur={event =>
@@ -221,6 +223,7 @@ class SecurityDetails extends Component {
           </div>
         }
         rightIcon={<span
+          id={parent ? `new-attribute-${parent}-submit` : `new-attribute-submit`}
           style={{
             float: 'right',
             position: 'initial',

From 6698169239c89792a3d7c1d8c790c425ea7114a2 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Thu, 28 Jun 2018 10:03:52 +0200
Subject: [PATCH 06/16] Add ids to entity items in list view

---
 src/components/EntityItem.js |  1 +
 src/containers/Entities.js   | 11 +++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/EntityItem.js b/src/components/EntityItem.js
index 13245e6..148f5b6 100644
--- a/src/components/EntityItem.js
+++ b/src/components/EntityItem.js
@@ -36,6 +36,7 @@ const computeColor = (status) => {
 const EntityItem = (props) => {
   return (
     <Card
+      id={props.id}
       style={{marginBottom: '20px'}}>
       <CardHeader
         title={props.title}
diff --git a/src/containers/Entities.js b/src/containers/Entities.js
index 30a493a..f2b9b20 100644
--- a/src/containers/Entities.js
+++ b/src/containers/Entities.js
@@ -34,9 +34,11 @@ class Entities extends Component {
       case 'group':
         return (
           <div>
-            <FlatButton label='Delete' onClick={() => {
-              this.props.entityDelete(entity, this.props.params.type);
-            }}/>
+            <Link>
+              <FlatButton label='Delete' onClick={() => {
+                this.props.entityDelete(entity, this.props.params.type);
+              }}/>
+            </Link>
             <Link to={`/group/${entity.group_name}`}>
               <FlatButton label='View members'/>
             </Link>
@@ -69,8 +71,9 @@ class Entities extends Component {
       return this.props.entityList.map((entity, i) => {
         return (
           <EntityItem
+            id={entity.id || entity.group_name}
             title={entity.id || entity.group_name}
-            key={i}
+            key={entity.id || entity.group_name}
             status={entity.status}
             actions={this.renderActions(entity)}
             meta={entity}

From 189b9c2cac697bb7912fa3584a3a7f1be1c632b1 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Thu, 28 Jun 2018 10:14:20 +0200
Subject: [PATCH 07/16] Add ids

---
 src/containers/Entities.js | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/containers/Entities.js b/src/containers/Entities.js
index f2b9b20..3a5923d 100644
--- a/src/containers/Entities.js
+++ b/src/containers/Entities.js
@@ -22,7 +22,7 @@ class Entities extends Component {
   renderNewEntityButton() {
     return (
       <div>
-        <Link to={`/add/${this.props.params.type.replace('/', '')}`}>
+        <Link id={`new_entity_button`} to={`/add/${this.props.params.type.replace('/', '')}`}>
           <FlatButton label={`Add new ${this.props.params.type.replace('/', '')}`}/>
         </Link>
       </div>
@@ -30,16 +30,17 @@ class Entities extends Component {
   }
 
   renderActions(entity) {
+    var id = entity.id.replace('!@!', '-')
     switch (this.props.params.type) {
       case 'group':
         return (
           <div>
-            <Link>
+            <Link id={`delete_${id}`}>
               <FlatButton label='Delete' onClick={() => {
                 this.props.entityDelete(entity, this.props.params.type);
               }}/>
             </Link>
-            <Link to={`/group/${entity.group_name}`}>
+            <Link id={`view_${id}`} to={`/group/${entity.group_name}`}>
               <FlatButton label='View members'/>
             </Link>
           </div>
@@ -47,18 +48,18 @@ class Entities extends Component {
       default:
         return (
           <div>
-            <Link>
+            <Link id={`delete_${id}`}>
               <FlatButton label='Delete' onClick={() => {
                 this.props.entityDelete(entity, this.props.params.type);
               }}/>
             </Link>
-            <Link to={`/entity/${entity.id}/${this.props.params.type}`}>
+            <Link id={`view_${id}`} to={`/entity/${entity.id}/${this.props.params.type}`}>
               <FlatButton label='View'/>
             </Link>
-            <Link to={`/group/${entity.id}/${this.props.params.type}`}>
+            <Link id={`group_${id}`} to={`/group/${entity.id}/${this.props.params.type}`}>
               <FlatButton label='Group'/>
             </Link>
-            <Link to={`/locks/${entity.id}/${this.props.params.type}`}>
+            <Link id={`policies_${id}`} to={`/locks/${entity.id}/${this.props.params.type}`}>
               <FlatButton label='Policies'/>
             </Link>
           </div>
@@ -71,7 +72,7 @@ class Entities extends Component {
       return this.props.entityList.map((entity, i) => {
         return (
           <EntityItem
-            id={entity.id || entity.group_name}
+            id={entity.id.replace('!@!', '-') || entity.group_name.replace('!@!', '-')}
             title={entity.id || entity.group_name}
             key={entity.id || entity.group_name}
             status={entity.status}

From 8edc9fbad57703a67867811e19efa53c262a1783 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Thu, 28 Jun 2018 12:44:40 +0200
Subject: [PATCH 08/16] Choose entity id or group name, depending on entity
 type for UI element id

---
 src/containers/Entities.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/containers/Entities.js b/src/containers/Entities.js
index 3a5923d..7f6915c 100644
--- a/src/containers/Entities.js
+++ b/src/containers/Entities.js
@@ -30,7 +30,7 @@ class Entities extends Component {
   }
 
   renderActions(entity) {
-    var id = entity.id.replace('!@!', '-')
+    let id = entity.id || entity.group_name
     switch (this.props.params.type) {
       case 'group':
         return (
@@ -70,9 +70,10 @@ class Entities extends Component {
   renderItems() {
     if (this.props.entityList) {
       return this.props.entityList.map((entity, i) => {
+        let id = entity.id || entity.group_name
         return (
           <EntityItem
-            id={entity.id.replace('!@!', '-') || entity.group_name.replace('!@!', '-')}
+            id={id.replace('!@!', '-')}
             title={entity.id || entity.group_name}
             key={entity.id || entity.group_name}
             status={entity.status}

From b46564fa7c09a67f68b7e7a78af9046042fdb608 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Mon, 2 Jul 2018 09:30:05 +0200
Subject: [PATCH 09/16] Use checkboxes to assign entities to groups

---
 src/containers/Entities.js |  1 +
 src/containers/Group.js    | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/containers/Entities.js b/src/containers/Entities.js
index 7f6915c..c5deb9b 100644
--- a/src/containers/Entities.js
+++ b/src/containers/Entities.js
@@ -31,6 +31,7 @@ class Entities extends Component {
 
   renderActions(entity) {
     let id = entity.id || entity.group_name
+    id = id.replace('!@!', '-')
     switch (this.props.params.type) {
       case 'group':
         return (
diff --git a/src/containers/Group.js b/src/containers/Group.js
index 0737860..00e3d3d 100644
--- a/src/containers/Group.js
+++ b/src/containers/Group.js
@@ -38,14 +38,21 @@ let changeGroupSchema = {
       items: {
         type: 'string',
         enum: []
-      }
+      },
+      uniqueItems: true
     }
   }
 }
 
 const uiSchema = {
   id: {'ui:readonly': true},
-  type: {'ui:readonly': true}
+  type: {'ui:readonly': true},
+  groups: {
+    'ui:widget': 'checkboxes',
+    'ui:options': {
+      inline: true
+    }
+  }
 }
 
 class Group extends Component {

From 5a652256f75551540345b9c915da5235f1c48cfc Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Mon, 2 Jul 2018 10:21:07 +0200
Subject: [PATCH 10/16] Fix to early drawing of groups list in user view

---
 src/containers/Group.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/containers/Group.js b/src/containers/Group.js
index 00e3d3d..4541270 100644
--- a/src/containers/Group.js
+++ b/src/containers/Group.js
@@ -149,10 +149,9 @@ class Group extends Component {
       entity.id === this.props.params.id && 
       entity.type.replace('/', '') === this.props.params.type)
 
-    if (entity && this.props.groups) {
+    if (entity && this.props.groups && this.props.groups.length > 0) {
       changeGroupSchema.properties.groups.items.enum = this.props.groups
         .map(group => group.group_name)
-
       const formData = this.getGroupFormData(entity)
 
       return (

From 18504ee07f2f8c314704c43a561c16bc98ae3eb2 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Mon, 9 Jul 2018 12:44:35 +0200
Subject: [PATCH 11/16] Add ids to device view

---
 src/components/DeviceItem.js |  5 ++++-
 src/containers/Devices.js    | 14 +++++++++-----
 src/containers/Discover.js   |  1 +
 src/containers/Graphs.js     |  5 +++--
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/DeviceItem.js b/src/components/DeviceItem.js
index 8f47d06..827b981 100644
--- a/src/components/DeviceItem.js
+++ b/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}
diff --git a/src/containers/Devices.js b/src/containers/Devices.js
index b763fe5..aea17ac 100644
--- a/src/containers/Devices.js
+++ b/src/containers/Devices.js
@@ -24,15 +24,18 @@ class Devices extends Component {
       label: {fontSize: '1rem'},
       container: {marginTop: '5px', marginBottom:'5px'}
     }
+    const id = device.deviceId
     return (
       <div className='devices' style={styles.container}>
-        <FlatButton labelStyle={styles.label} label='Disconnect' onClick={() => {
-          this.props.devicesDelete(device.deviceId)}
-        } />
-        <Link to={`/graphs/${device.deviceId}`}>
+        <Link id={`disconnect_${id}`}>
+          <FlatButton labelStyle={styles.label} label='Disconnect' onClick={() => {
+            this.props.devicesDelete(device.deviceId)}
+          } />
+          </Link>
+        <Link id={`view_${id}`} to={`/graphs/${device.deviceId}`}>
           <FlatButton labelStyle={styles.label} label='View Data' />
         </Link>
-        <Link to={`/devices/${device.deviceId}`}>
+        <Link id={`manage_${id}`} to={`/devices/${device.deviceId}`}>
           <FlatButton labelStyle={styles.label} label='Manage Device Data' />
         </Link>
       </div>
@@ -48,6 +51,7 @@ class Devices extends Component {
           <DeviceItem
             expandable
             showExpandableButton
+            id={deviceId}
             key={i}
             title={device.name}
             subtitle={device.deviceId}
diff --git a/src/containers/Discover.js b/src/containers/Discover.js
index e0f0e36..5a9f088 100644
--- a/src/containers/Discover.js
+++ b/src/containers/Discover.js
@@ -49,6 +49,7 @@ class Discover extends Component {
     return (
       <div style={{padding: '0px', margin:'0px', paddingLeft: '8px'}}>
         <SelectField
+          id={`register_${device.id.replace(/:/g, '-')}`}
           floatingLabelText="Register"
           value={null}
           onChange={this.handleChange}
diff --git a/src/containers/Graphs.js b/src/containers/Graphs.js
index 9023a39..bf227bb 100644
--- a/src/containers/Graphs.js
+++ b/src/containers/Graphs.js
@@ -44,6 +44,7 @@ class Graphs extends Component {
   renderGraphs(streams) {
     return streams.map(st => {
      return <Graph
+       id={st.id}
        key={st.id}
        deviceId={this.props.params.deviceId}
        componentId={st.id}
@@ -58,7 +59,7 @@ class Graphs extends Component {
         <IconButton iconStyle={{transform: 'scale(1.6)'}}onClick={() => {browserHistory.goBack()}}>
           <ArrowBack color={'black'}/>
         </IconButton>
-        <ToolbarSeparator / >
+        <ToolbarSeparator />
       </ToolbarGroup>
       <ToolbarGroup >
         <ToolbarTitle text='No incoming or local data available' />
@@ -76,7 +77,7 @@ class Graphs extends Component {
         <IconButton iconStyle={{transform: 'scale(1.6)'}}onClick={() => {browserHistory.goBack()}}>
           <ArrowBack color={'black'}/>
         </IconButton>
-        <ToolbarSeparator / >
+        <ToolbarSeparator />
       </ToolbarGroup>
       <ToolbarGroup>
         <ToolbarGroup>

From 17edee487f6197147f46a67186d9f6da667f07ae Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 10 Jul 2018 09:30:11 +0200
Subject: [PATCH 12/16] Add owner and ids to groups and improve group members
 view

---
 src/components/EntityItem.js   |   1 +
 src/components/GroupItem.js    | 173 +++++++++++++++++++++++++++++++++
 src/containers/Entities.js     |  17 +++-
 src/containers/Group.js        |  69 ++++++-------
 src/containers/GroupMembers.js |  12 ++-
 src/index.js                   |   2 +-
 6 files changed, 231 insertions(+), 43 deletions(-)
 create mode 100644 src/components/GroupItem.js

diff --git a/src/components/EntityItem.js b/src/components/EntityItem.js
index 148f5b6..d8b4b17 100644
--- a/src/components/EntityItem.js
+++ b/src/components/EntityItem.js
@@ -40,6 +40,7 @@ const EntityItem = (props) => {
       style={{marginBottom: '20px'}}>
       <CardHeader
         title={props.title}
+        subtitle={props.owner}
         avatar={
           <Avatar
             backgroundColor={computeColor(props.status)}
diff --git a/src/components/GroupItem.js b/src/components/GroupItem.js
new file mode 100644
index 0000000..dda4bab
--- /dev/null
+++ b/src/components/GroupItem.js
@@ -0,0 +1,173 @@
+/*******************************************************************************
+ *Copyright (C) 2017 Resin.io, FBK, Jolocom.
+ *All rights reserved. This program and the accompanying materials
+ *are made available under the terms of the Eclipse Public License 2.0
+ *which accompanies this distribution, and is available at
+ *https://www.eclipse.org/legal/epl-2.0/
+ *
+ *SPDX-License-Identifier: EPL-2.0
+ *
+ *Contributors:
+ *    Resin.io, FBK, Jolocom - initial API and implementation
+ ******************************************************************************/
+import React from 'react';
+import {
+  Card,
+  CardActions,
+  CardHeader,
+  CardText
+} from 'material-ui/Card';
+import {List, ListItem} from 'material-ui/List';
+import Avatar from 'material-ui/Avatar';
+
+const stringConstructor = "".constructor;
+const arrayConstructor = [].constructor;
+const objectConstructor = {}.constructor;
+const styles = {
+  borderStyle: {
+    borderWidth: '1px',
+    borderColor: '#bcbcbc',
+    borderStyle: 'solid'
+  }
+}
+
+function getType(object) {
+  if (object === null) {
+    return 'null';
+  } else if (object === undefined) {
+    return 'undefined';
+  } else if (!isNaN(parseFloat(object)) && !isNaN(object - 0) ) {
+    return 'Number'
+  } else if (object.constructor === stringConstructor) {
+    return 'String';
+  } else if (object.constructor === arrayConstructor) {
+    return 'Array';
+  } else if (object.constructor === objectConstructor) {
+    return 'Object';
+  } else {
+    return 'unknown';
+  }
+}
+
+function getOrder(object) {
+  switch(getType(object)) {
+    case 'null':
+      return 0
+    case 'undefined':
+      return 1
+    case 'Number':
+      return 2
+    case 'String':
+      return 3
+    case 'Array':
+      return 4
+    case 'Object':
+      return 5
+    default:
+      return 6
+  }
+}
+
+function compare (a, b) {
+  if (getOrder(a) < getOrder(b)) {
+    return -1
+  } else if (getOrder(a) > getOrder(b)) {
+    return 1
+  }
+  return 0
+}
+
+JSON.sort = function(object) {
+  const keys = Object.keys(object)
+  const sortedKeys = keys.sort((a, b) => {
+    return compare(object[a], object[b])
+  })
+  let sortedObject = {}
+  for(let index in sortedKeys){
+    let key = sortedKeys[index];
+    sortedObject[key] = object[key];
+  }
+  return sortedObject
+}
+
+const renderAttribute = (key, value, parent) => {
+  console.log(parent)
+  if (getType(value) === 'Array') {
+    return (
+      <List
+        id={`${parent + '.' + key}`}
+        key={`${parent + '.' + key}`}>
+        <span style={{float: 'left'}}>{key}</span>:
+        {renderAttributes(value, parent + '.' + key)}
+      </List>
+    )
+  } else if (getType(value) === 'Object') {
+    if (getType(key) === 'Number') {
+      return (<List
+        id={`${parent + '.' + key}`}
+        key={`${parent + '.' + key}`}>
+        {renderAttributes(value, parent + '.' + key)}
+      </List>)
+    } else {
+      return (<List
+        id={`${parent + '.' + key}`}
+        key={`${parent + '.' + key}`}>
+        <span style={{float: 'left'}}>{key}</span>:
+        {renderAttributes(value, parent + '.' + key)}
+      </List>)
+    }
+  } else {
+    return (
+      <div id={`${parent + '.' + key}`}
+           key={`${parent + '.' + key}`}>
+        <span style={{float: 'left'}}>{key}</span>: {value}
+      </div>
+    )
+  }
+}
+
+const renderAttributes = (group, parent) => {
+  group = JSON.sort(group)
+  if (!group) {
+    return
+  }
+
+  return (<List style={styles.borderStyle}>
+    {Object.entries(group).map(attribute => {
+      const key = attribute[0]
+      const value = attribute[1]
+      return (<ListItem
+        id={`${parent + '.' + key}`}
+        key={`${parent + '.' + key}`}>
+        {renderAttribute(key, value, parent)}
+      </ListItem>)
+    })}
+  </List>)
+}
+
+const GroupItem = (props) => {
+  return (
+    <Card
+      id={props.id}
+      style={{marginBottom: '20px'}}>
+      <CardHeader
+        actAsExpander
+        showExpandableButton={true}
+        title={props.title}
+        subtitle={props.owner}
+        avatar={
+          <Avatar>{props.title && props.title.charAt(0)}</Avatar>
+        }
+      />
+      <CardText expandable>
+        {renderAttributes(props.group, 'root')}
+      </CardText>
+      <CardActions>
+        {props.actions}
+      </CardActions>
+    </Card>
+  );
+}
+
+
+export default GroupItem
diff --git a/src/containers/Entities.js b/src/containers/Entities.js
index c5deb9b..2d619d8 100644
--- a/src/containers/Entities.js
+++ b/src/containers/Entities.js
@@ -31,9 +31,10 @@ class Entities extends Component {
 
   renderActions(entity) {
     let id = entity.id || entity.group_name
-    id = id.replace('!@!', '-')
+    id = id.replace(/!@!/g, '-')
     switch (this.props.params.type) {
       case 'group':
+        id = id + '-' + entity.owner.replace(/!@!/g, '-')
         return (
           <div>
             <Link id={`delete_${id}`}>
@@ -41,7 +42,7 @@ class Entities extends Component {
                 this.props.entityDelete(entity, this.props.params.type);
               }}/>
             </Link>
-            <Link id={`view_${id}`} to={`/group/${entity.group_name}`}>
+            <Link id={`view_${id}`} to={`/groupmembers/${entity.owner}/${entity.group_name}`}>
               <FlatButton label='View members'/>
             </Link>
           </div>
@@ -72,11 +73,17 @@ class Entities extends Component {
     if (this.props.entityList) {
       return this.props.entityList.map((entity, i) => {
         let id = entity.id || entity.group_name
+        let title = entity.id || entity.group_name
+        if(this.props.params.type === 'group') {
+          id = id + '-' + entity.owner
+        }
+        id = id.replace(/!@!/, '-')
         return (
           <EntityItem
-            id={id.replace('!@!', '-')}
-            title={entity.id || entity.group_name}
-            key={entity.id || entity.group_name}
+            id={id}
+            title={title}
+            owner={entity.owner}
+            key={id}
             status={entity.status}
             actions={this.renderActions(entity)}
             meta={entity}
diff --git a/src/containers/Group.js b/src/containers/Group.js
index 4541270..9b1c6ed 100644
--- a/src/containers/Group.js
+++ b/src/containers/Group.js
@@ -15,6 +15,8 @@ import {connect} from 'react-redux'
 import Form from 'react-jsonschema-form'
 import {entityFetch, groupsFetch, addToGroup, removeFromGroup} from '../actions'
 
+const groupDelimiter = ' | '
+
 let changeGroupSchema = {
   title: 'Change group of entity',
   type: 'object',
@@ -62,15 +64,13 @@ class Group extends Component {
   }
 
   addToGroups(groups, entity) {
-    if(groups.length) {
-      groups.forEach(group_name => {
-        const group = this.props.groups.find(group => 
-          group_name === group.group_name)
+    if (groups.length) {
+      groups.forEach(group => {
 
-        if(group) {
+        if (group) {
           this.props.addToGroup(
             group.owner,
-            group_name,
+            group.name,
             entity.type.replace('/', ''),
             entity.id
           )
@@ -80,15 +80,13 @@ class Group extends Component {
   }
 
   removeFromGroups(groups, entity) {
-    if(groups.length) {
-      groups.forEach(group_name => {
-        const group = this.props.groups.find(group => 
-          group_name === group.group_name)
+    if (groups.length) {
+      groups.forEach(group => {
 
-        if(group) {
+        if (group) {
           this.props.removeFromGroup(
             group.owner,
-            group_name,
+            group.group_name,
             entity.type.replace('/', ''),
             entity.id
           )
@@ -101,29 +99,30 @@ class Group extends Component {
     let addToGroups = []
     let removeFromGroups = []
 
-    if(entity.groups) {
-      entityGroups.forEach(group_name => {
+    entityGroups.forEach(group => {
+      const group_name = group.split(groupDelimiter)[0]
+      const owner = group.split(groupDelimiter)[1]
 
-        const notMember = !entity.groups.some(group =>
+      let member = false
+      if(entity.groups) {
+        member = entity.groups.some(group =>
+          group.owner === owner &&
           group.group_name === group_name)
+      }
 
-        const doesNotExist = !addToGroups.some(groupname =>
-          group_name === groupname)
-
-        if(notMember && doesNotExist) {
-          addToGroups.push(group_name)
-        }
-      })
+      const duplicate = addToGroups.some(group =>
+        owner === group.owner &&
+        group_name === group.group_name)
 
-      removeFromGroups = entity.groups.filter(group =>
-        entityGroups.indexOf(group.group_name) === -1
-      ).map(group =>
-        group.group_name
+      if (!member && !duplicate) {
+        addToGroups.push({name: group_name, owner: owner})
+      }
+    })
+    if(entity.groups) {
+      removeFromGroups = entity.groups.filter(existingGroup =>
+        entityGroups.indexOf(existingGroup.group_name + groupDelimiter + existingGroup.owner) === -1
       )
-    } else if(entityGroups.length) {
-      addToGroups = entityGroups
     }
-
     this.addToGroups(addToGroups, entity)
     this.removeFromGroups(removeFromGroups, entity)
   }
@@ -131,13 +130,15 @@ class Group extends Component {
 
   getGroupFormData(entity) {
     const formData = JSON.parse(JSON.stringify(entity))
-    if(entity.groups) {
+    if (entity.groups) {
       formData.groups = entity.groups.map(entityGroup => {
+        console.log(this.props.groups)
         const group = this.props.groups.find(group =>
+          group.owner === entityGroup.owner &&
           group.group_name === entityGroup.group_name
         )
 
-        return group ? group.group_name : undefined
+        return group ? group.group_name + groupDelimiter + group.owner : undefined
       })
     }
 
@@ -146,17 +147,17 @@ class Group extends Component {
 
   render() {
     const entity = this.props.entityList.find(entity =>
-      entity.id === this.props.params.id && 
+      entity.id === this.props.params.id &&
       entity.type.replace('/', '') === this.props.params.type)
 
     if (entity && this.props.groups && this.props.groups.length > 0) {
       changeGroupSchema.properties.groups.items.enum = this.props.groups
-        .map(group => group.group_name)
+        .map(group => group.group_name + groupDelimiter + group.owner)
       const formData = this.getGroupFormData(entity)
 
       return (
         <div>
-          <Form 
+          <Form
             schema={changeGroupSchema}
             uiSchema={uiSchema}
             onSubmit={e => {
diff --git a/src/containers/GroupMembers.js b/src/containers/GroupMembers.js
index 91c8c87..0d366d5 100644
--- a/src/containers/GroupMembers.js
+++ b/src/containers/GroupMembers.js
@@ -13,17 +13,23 @@
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
 import {groupsFetch} from '../actions'
-import EntityItem from '../components/EntityItem'
+import GroupItem from "../components/GroupItem";
 
 class GroupMembers extends Component {
   render() {
-    const group = this.props.groups.find(group => 
+    const group = this.props.groups.find(group =>
+      group.owner === this.props.params.owner &&
       group.group_name === this.props.params.group_name)
 
     if (group && group.entities) {
+      let id = group.group_name + '-' + group.owner
+      id = id.replace(/!@!/g, '-')
       return (
-        <EntityItem
+        <GroupItem
+          id={id}
           title={group.group_name}
+          owner={group.owner}
+          group={group}
           text={group.entities.map(entity => JSON.stringify(entity))}
         />
       )
diff --git a/src/index.js b/src/index.js
index c2ca71d..f9a84dd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -51,7 +51,7 @@ render(
           <Route path="graphs/:deviceId" component={Graphs} />
           <Route path="add/:type" component={AddEntity} />
           <Route path="group/:id/:type" component={Group} />
-          <Route path="group/:group_name" component={GroupMembers} />
+          <Route path="groupmembers/:owner/:group_name" component={GroupMembers} />
           <Route path="locks/:id/:type" component={Locks} />
           <Route path="lock/add/:id/:type/:field/:op" component={AddLock} />
           <Route path="recommender" component={Recommender} />

From 9acf9b51028f53bd5b6d349948c4e61c6ac8dd8e Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 10 Jul 2018 09:58:17 +0200
Subject: [PATCH 13/16] Fix UI bug, when deleting a group with same name as a
 group by another owner

---
 src/actions/index.js        | 4 ++--
 src/components/GroupItem.js | 1 -
 src/reducers/entities.js    | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index 53bb8c4..fcc27de 100644
--- a/src/actions/index.js
+++ b/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 => {
diff --git a/src/components/GroupItem.js b/src/components/GroupItem.js
index dda4bab..cd14bc9 100644
--- a/src/components/GroupItem.js
+++ b/src/components/GroupItem.js
@@ -91,7 +91,6 @@ JSON.sort = function(object) {
 }
 
 const renderAttribute = (key, value, parent) => {
-  console.log(parent)
   if (getType(value) === 'Array') {
     return (
       <List
diff --git a/src/reducers/entities.js b/src/reducers/entities.js
index 1a7d7a8..e657c9c 100644
--- a/src/reducers/entities.js
+++ b/src/reducers/entities.js
@@ -106,7 +106,7 @@ export function entityList(state = [], action) {
     case 'ENTITY_DELETE':
       return state.filter(element => element.user_name ? element.user_name !== action.data : element.name !== action.data);
     case 'GROUP_DELETE':
-      return state.filter(element => element.group_name !== action.data);
+      return state.filter(element => element.owner !== action.data.owner || element.group_name !== action.data.group_name);
     case 'ENTITY_ADDED_GROUP':
     case 'ENTITY_REMOVED_GROUP':
     case 'ENTITY_ATTRIBUTE_SET':

From 9deb9e9172ded15374dcd96ae8315952ec93321b Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Tue, 10 Jul 2018 10:22:22 +0200
Subject: [PATCH 14/16] Remove dots from ids

---
 src/components/GroupItem.js    | 26 +++++++++++++-------------
 src/components/SecurityItem.js | 12 ++++++------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/GroupItem.js b/src/components/GroupItem.js
index cd14bc9..a678c1b 100644
--- a/src/components/GroupItem.js
+++ b/src/components/GroupItem.js
@@ -94,31 +94,31 @@ const renderAttribute = (key, value, parent) => {
   if (getType(value) === 'Array') {
     return (
       <List
-        id={`${parent + '.' + key}`}
-        key={`${parent + '.' + key}`}>
+        id={`${parent + '-' + key}`}
+        key={`${parent + '-' + key}`}>
         <span style={{float: 'left'}}>{key}</span>:
-        {renderAttributes(value, parent + '.' + key)}
+        {renderAttributes(value, parent + '-' + key)}
       </List>
     )
   } else if (getType(value) === 'Object') {
     if (getType(key) === 'Number') {
       return (<List
-        id={`${parent + '.' + key}`}
-        key={`${parent + '.' + key}`}>
-        {renderAttributes(value, parent + '.' + key)}
+        id={`${parent + '-' + key}`}
+        key={`${parent + '-' + key}`}>
+        {renderAttributes(value, parent + '-' + key)}
       </List>)
     } else {
       return (<List
-        id={`${parent + '.' + key}`}
-        key={`${parent + '.' + key}`}>
+        id={`${parent + '-' + key}`}
+        key={`${parent + '-' + key}`}>
         <span style={{float: 'left'}}>{key}</span>:
-        {renderAttributes(value, parent + '.' + key)}
+        {renderAttributes(value, parent + '-' + key)}
       </List>)
     }
   } else {
     return (
-      <div id={`${parent + '.' + key}`}
-           key={`${parent + '.' + key}`}>
+      <div id={`${parent + '-' + key}`}
+           key={`${parent + '-' + key}`}>
         <span style={{float: 'left'}}>{key}</span>: {value}
       </div>
     )
@@ -136,8 +136,8 @@ const renderAttributes = (group, parent) => {
       const key = attribute[0]
       const value = attribute[1]
       return (<ListItem
-        id={`${parent + '.' + key}`}
-        key={`${parent + '.' + key}`}>
+        id={`${parent + '-' + key}`}
+        key={`${parent + '-' + key}`}>
         {renderAttribute(key, value, parent)}
       </ListItem>)
     })}
diff --git a/src/components/SecurityItem.js b/src/components/SecurityItem.js
index d7b1698..1e8bfb1 100644
--- a/src/components/SecurityItem.js
+++ b/src/components/SecurityItem.js
@@ -64,11 +64,11 @@ const SecurityItem = (props) => {
         }
       }
       return (
-        <ListItem id={`${parent}_value`} key={`${parent}_value`}
+        <ListItem id={`${parent.replace(/\./g, '_')}_value`} key={`${parent}_value`}
           style={{backgroundColor: '#eaeaea'}}
           primaryTogglesNestedList={true}
           nestedItems={[
-            <div key={`${parent}_${name}`}>
+            <div id={`${parent.replace(/\./g, '_')}_${name}`} key={`${parent}_${name}`}>
               {nestedElement}
               {editLock}
             </div>
@@ -113,7 +113,7 @@ const SecurityItem = (props) => {
       });
 
       return (
-        <div key={`${name}`}>
+        <div id={`${name.replace(/./g, /_/)}`} key={`${name}`}>
           <span style={{float: 'left'}}>{name}</span>: {nestedElement}
         </div>
       );
@@ -175,7 +175,7 @@ const SecurityItem = (props) => {
   // TODO EDIT LOCK
   const getInlineEditField = ({ id, entityType, name, parent, value, editLock }) => {
     const field = <TextField
-      id={`${parent}_value`}
+      id={`${parent.replace(/\./g, '_')}_value`}
       defaultValue={value}
       style={{
         float: 'right',
@@ -199,7 +199,7 @@ const SecurityItem = (props) => {
     }
 
     const removeIcon = <RemoveIcon
-      id={`delete_${parent}`}
+      id={`delete_${parent.replace(/\./g, '_')}`}
       style={removeButtonStyle}
       onClick={() => {
         handleDelete({
@@ -211,7 +211,7 @@ const SecurityItem = (props) => {
     />
 
     return (
-      <ListItem key={`attribute_${parent}`}>
+      <ListItem id={`attribute_${parent.replace(/\./g, '_')}`} key={`attribute_${parent}`}>
         {removeIcon}
         {name}:{field}
         {editLock}

From 87f74c52360d548808ffeed284deeeece131c5ed Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Thu, 12 Jul 2018 16:14:20 +0200
Subject: [PATCH 15/16] Improve adding locks by moving the view to locks
 overview and let edit it directly at the specific policy card instead of in
 an own view

---
 src/actions/index.js              |  65 +++++++++-
 src/components/Form.js            |  60 ++++++---
 src/components/GenericListItem.js |   8 +-
 src/containers/Group.js           |   1 -
 src/containers/Locks.js           | 204 ++++++++++++++++++++++++++----
 src/reducers/entities.js          |  35 ++++-
 src/reducers/index.js             |   2 +
 7 files changed, 327 insertions(+), 48 deletions(-)

diff --git a/src/actions/index.js b/src/actions/index.js
index fcc27de..5a28062 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -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
diff --git a/src/components/Form.js b/src/components/Form.js
index f215047..db55721 100644
--- a/src/components/Form.js
+++ b/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,43 @@ const renderInputFields = (formNames, forms, deleteFormName, onChange) => {
 }
 
 const renderForm = (props, inputs) => {
+  const id = `newLockForm_${props.id.replace(/!@!/, '-').replace(/\./, '-')}`
   return (
     <div>
-      <form onSubmit={event => {
+      <form
+        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: '5px 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);
 }
 
diff --git a/src/components/GenericListItem.js b/src/components/GenericListItem.js
index 893148e..bd6f950 100644
--- a/src/components/GenericListItem.js
+++ b/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>
diff --git a/src/containers/Group.js b/src/containers/Group.js
index 9b1c6ed..bb51e56 100644
--- a/src/containers/Group.js
+++ b/src/containers/Group.js
@@ -132,7 +132,6 @@ class Group extends Component {
     const formData = JSON.parse(JSON.stringify(entity))
     if (entity.groups) {
       formData.groups = entity.groups.map(entityGroup => {
-        console.log(this.props.groups)
         const group = this.props.groups.find(group =>
           group.owner === entityGroup.owner &&
           group.group_name === entityGroup.group_name
diff --git a/src/containers/Locks.js b/src/containers/Locks.js
index 239a5d8..ba3d5f9 100644
--- a/src/containers/Locks.js
+++ b/src/containers/Locks.js
@@ -13,11 +13,14 @@
 import React, {Component} from 'react'
 import {connect} from 'react-redux'
 import {Link} from 'react-router'
-import {FloatingActionButton, FlatButton} from 'material-ui'
+import {FloatingActionButton, FlatButton, SelectField, MenuItem} from 'material-ui'
 import TextField from 'material-ui/TextField'
 import ContentRemove from 'material-ui/svg-icons/content/remove'
-import {fetchEntityLocks, deleteLock, setLock} from '../actions'
-import {LockItem, GenericListItem} from '../components'
+import {fetchEntityLocks, fetchLocks, deleteLock, setLock, addLockField, removeLockField, formSelected} from '../actions'
+import {LockItem, GenericListItem, Form} from '../components'
+import ReactTooltip from 'react-tooltip'
+
+const formSelectToolTip = 'You can select multiple lock types to add them as one block to this policy. They will be evaluated with a logical AND.'
 
 const deleteButtonStyle = {
   margin: 0,
@@ -28,27 +31,35 @@ const deleteButtonStyle = {
 
 class Locks extends Component {
   renderAddWriteLockButton(field) {
-    const {id, type} =this.props.params
 
     return (
       <Link
+        id={`addwrite_${field.replace(/\./, '_')}`}
         key={`addwrite_${field}`}
-        to={`/lock/add/${id}/${type}/${field}/write`}
       >
-        <FlatButton label={`Add write lock`}/>
+        <FlatButton
+          label={`Add write lock`}
+          onClick={() => {
+            this.addLockField('write', field)
+          }}
+          />
       </Link>
     )
   }
 
   renderAddReadLockButton(field) {
-    const {id, type} = this.props.params
 
     return (
       <Link
+        id={`addread_${field.replace(/\./, '_')}`}
         key={`addread_${field}`}
-        to={`/lock/add/${id}/${type}/${field}/read`}
       >
-        <FlatButton label={`Add read lock`}/>
+        <FlatButton
+          label={`Add read lock`}
+          onClick={() => {
+            this.addLockField('read', field)
+          }}
+        />
       </Link>
     )
   }
@@ -71,16 +82,19 @@ class Locks extends Component {
 
     return (
       <GenericListItem
+        key={`addPolicyList_${id}_${type}_${field},`}
         style={{rightEl: {padding: '20px'}, leftEl: {padding: '20px'}}}
         leftEl='New sub policy'
         rightEl={
           <div>
             <TextField
               ref={`addPolicy_${id}_${type}_${field}`}
+              key={`addPolicy_${id}_${type}_${field}`}
+              id={`addPolicy_${id.replace(/!@!/g, '_')}_${type}_${field.replace(/\./g, '_')}`}
               hintText='Name of new policy'
             />
             <span
-              id={`add_${id}_${field}`}
+              id={`add_${id.replace(/!@!/g, '_')}_${field.replace(/\./g, '_')}`}
               key={`add_${id}_${field}`}
               style={{
                 float: 'right',
@@ -102,11 +116,128 @@ class Locks extends Component {
     )
   }
 
+  addLock(locks, field, op) {
+    const {id, type} = this.props.params
+    let newLocks = this.props.policies[field].flows.map(block => block)
+    newLocks.push({op, locks})
+    this.props.setLock({
+      entityId: id,
+      entityType: type,
+      field: field,
+      policy: newLocks
+    })
+  }
+
+  renderForm(policy, op) {
+    const {form, lockFormats} = this.props
+    if(form[policy] && form[policy][op]) {
+      return (
+        <Form
+          id={this.props.params.id + '_' + this.props.params.type + '_' + policy + '_' + op}
+          selectedForms={form[policy][op]}
+          deleteFormName={forms => {
+            this.props.formSelected(op, policy, forms)
+          }}
+          forms={lockFormats}
+          submitText={'Save policy'}
+          onSubmit={(e) => {
+            //Iterate over all new locks added in the UI and prepare it for the format in IDM
+            let i = 0
+            const locks = []
+            while (e.target[i]) {
+              const lockInfo = e.target[i].name.split('_')
+              const lockNumber = lockInfo[0]
+              const lockType = lockInfo[1]
+              const lockProperty = lockInfo[2]
+              if (lockNumber && lockNumber !== '') {
+                locks[lockNumber] = locks[lockNumber]
+                  ? locks[lockNumber]
+                  : {lock: lockType}
+
+                if (e.target[i].value && lockProperty) {
+                  if (locks[lockNumber].args) {
+                    locks[lockNumber].args.push(e.target[i].value)
+                  } else {
+                    locks[lockNumber].args = [e.target[i].value]
+                  }
+                }
+              }
+              ++i
+            }
+            if (locks.length > 0) {
+              this.addLock(locks, policy, op)
+              this.removeLockField(op, policy)
+            }
+            this.props.formSelected(op, policy, [])
+          }}
+        />)
+    }
+    return (<div></div>)
+  }
+
+  renderOptions(options) {
+    const optionFields = []
+    for (let key in options) {
+      if (options.hasOwnProperty(key)) {
+        optionFields.push((
+          <MenuItem
+            key={key}
+            value={key}
+            primaryText={key}
+          />
+        ))
+      }
+    }
+    return optionFields
+  }
+
+  renderLockField(type, policy) {
+    if(this.props.lockFields[type] && this.props.lockFields[type].includes(policy)) {
+
+      return (
+        <GenericListItem
+          key={`addLockList_${policy}_${type},`}
+          style={{bar: {height: 'auto', margin: '0 0 10px 0'}, middleEl: {width: '150px', padding: '20px'}, rightEl: {padding: '20px'}, leftEl: {padding: '20px'}}}
+          leftEl={`New ${type} lock`}
+          rightEl={this.renderForm(policy, type)}
+          middleEl={
+            <div data-tip={formSelectToolTip}>
+              <ReactTooltip/>
+              <SelectField
+                style={{width: '100%'}}
+                floatingLabelText="Add a lock"
+                value={null}
+                onChange={(event, index, value) => {
+                  if (value !== '') {
+                    let forms = Object.assign({}, this.props.form)
+                    if(!forms[policy]) {
+                      forms[policy] = {}
+                    }
+                    if(!forms[policy][type]) {
+                      forms[policy][type] = []
+                    }
+                    forms[policy][type].push(value)
+                    this.props.formSelected(type, policy, forms[policy][type])
+                  }
+                }}
+              >
+                <MenuItem value={null} label="Add a lock" primaryText="Select lock type" />
+                {
+                  this.renderOptions(this.props.lockFormats)
+                }
+              </SelectField>
+            </div>
+          }
+        />
+      )
+    }
+  }
+
   renderDeleteButton(field) {
     const {id, type} = this.props.params
     return (
       <FlatButton
-        id={`delete_${id}_${field}`}
+        id={`delete_${id.replace(/!@!/g, '_')}_${field.replace(/\./, '_')}`}
         key={`delete_${id}_${field}`}
         label='Delete'
         onClick={() => {
@@ -125,7 +256,7 @@ class Locks extends Component {
     return (
       <FloatingActionButton
         mini={true}
-        id={`delete_${id}_${field}_${i}`}
+        id={`delete_${id.replace(/!@!/g, '_')}_${field.replace(/\./, '_')}_${i}`}
         key={`delete_${id}_${field}_${i}`}
         label='Delete'
         style={deleteButtonStyle}
@@ -158,7 +289,7 @@ class Locks extends Component {
     return (
       <FloatingActionButton
         mini={true}
-        id={`delete_${id}_${field}_${i}_${j}`}
+        id={`delete_${id.replace(/!@!/g, '_')}_${field.replace(/\./, '_')}_${i}_${j}`}
         key={`delete_${id}_${field}_${i}_${j}`}
         label='Delete'
         style={deleteButtonStyle}
@@ -189,22 +320,43 @@ class Locks extends Component {
 
   deleteButtons(policy, block, i) {
     block.deleteButton = this.renderBlockDeleteButton(policy, i)
-    block.locks.forEach((lock, j) => {
-      lock.deleteButton = this.renderLockDeleteButton(policy, i, j)
-    })
+    if(block.locks) {
+      block.locks.forEach((lock, j) => {
+        lock.deleteButton = this.renderLockDeleteButton(policy, i, j)
+      })
+    }
   }
 
+  addLockField(type, field) {
+    if(!this.props.lockFields[type] || !this.props.lockFields[type].includes(field)) {
+      this.props.addLockField({type: type, policy: field})
+    }
+  }
+
+  removeLockField(type, field) {
+   if(this.props.lockFields[type] && this.props.lockFields[type].includes(field)) {
+      this.props.removeLockField({type: type, policy: field})
+    }
+  }
+
+
   renderPolicyItemComponents() {
     const result= {}
-    const {policies} = this.props
+    const {policies, lockFields} = this.props
     for (let policy in policies) {
       result[policy] = policies[policy]
       result[policy].buttons = [
         this.renderDeleteButton(policy),
         this.renderAddWriteLockButton(policy),
-        this.renderAddReadLockButton(policy),
-        this.renderAddPolicyButton(policy)
+        this.renderAddReadLockButton(policy)
       ]
+      if(lockFields.write && lockFields.write.includes(policy)) {
+        result[policy].buttons.push(this.renderLockField('write', policy))
+      }
+      if(lockFields.read && lockFields.read.includes(policy)) {
+        result[policy].buttons.push(this.renderLockField('read', policy))
+      }
+      result[policy].buttons.push(this.renderAddPolicyButton(policy))
       result[policy].flows.forEach(this.deleteButtons.bind(this, policy))
     }
     return result
@@ -220,7 +372,7 @@ class Locks extends Component {
         title={policy}
         policy={policies[policy]}
         key={`${this.props.params.id}_${policy}`}
-        id={`${this.props.params.id}_${policy}`}
+        id={`${this.props.params.id}_${policy.replace(/\./g, '_')}`}
       />))
     }
     return policyItems
@@ -228,6 +380,7 @@ class Locks extends Component {
 
   componentWillMount() {
     this.props.fetchEntityLocks(this.props.params.id, this.props.params.type)
+    this.props.fetchLocks()
   }
 
   render() {
@@ -244,7 +397,10 @@ class Locks extends Component {
 
 const mapStateToProps = (state) => {
   return {
-    policies: state.policies
+    policies: state.policies,
+    lockFormats: state.lockFormats,
+    lockFields: state.lockFields,
+    form: state.form
   }
 }
 
@@ -252,8 +408,12 @@ const
   mapDispatchToProps = (dispatch) => {
     return {
       fetchEntityLocks: (entity_id, entity_type) => dispatch(fetchEntityLocks(entity_id, entity_type)),
+      fetchLocks: () => dispatch(fetchLocks()),
+      formSelected: (type, policy, formNames) => dispatch(formSelected(type, policy, formNames)),
       deleteLock: (params) => dispatch(deleteLock(params)),
-      setLock: (params) => dispatch(setLock(params))
+      setLock: (params) => dispatch(setLock(params)),
+      addLockField: (params) => dispatch(addLockField(params)),
+      removeLockField: (params) => dispatch(removeLockField(params))
     }
   }
 
diff --git a/src/reducers/entities.js b/src/reducers/entities.js
index e657c9c..75fcab9 100644
--- a/src/reducers/entities.js
+++ b/src/reducers/entities.js
@@ -134,6 +134,32 @@ export function policies(state = {}, action) {
   }
 }
 
+export function lockFields(state = {}, action) {
+  switch(action.type) {
+    case 'ADD_WRITE_LOCK_FIELD':
+    case 'ADD_READ_LOCK_FIELD':
+      let newState = Object.assign({}, state)
+      if(!newState[action.data.type]) {
+        newState[action.data.type] = []
+      }
+      newState[action.data.type].push(action.data.policy)
+      return  newState
+    case 'REMOVE_WRITE_LOCK_FIELD':
+    case 'REMOVE_READ_LOCK_FIELD':
+      if(state[action.data.type]) {
+        let newState = Object.assign({}, state)
+        newState[action.data.type] = newState[action.data.type].map(policy => {
+          return policy !== action.data.policy
+        })
+        return newState
+      } else {
+        return state
+      }
+    default:
+      return state;
+  }
+}
+
 export function lockFormats(state = {}, action) {
   switch(action.type) {
     case 'LOCK_FORMATS':
@@ -143,10 +169,15 @@ export function lockFormats(state = {}, action) {
   }
 }
 
-export function form(state = [], action) {
+export function form(state = {}, action) {
   switch(action.type) {
     case 'FORM_SELECTED':
-      return action.data;
+      let newState = Object.assign({}, state)
+      if(!newState[action.data.policy]) {
+        newState[action.data.policy] = {}
+      }
+      newState[action.data.policy][action.data.type] = action.data.formNames
+      return newState;
     default:
       return state;
   }
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 23c0429..f0db5b6 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -21,6 +21,7 @@ import {
   form,
   lockFormats,
   policies,
+  lockFields,
   entityPolicies,
   devicesDiscover,
   messages,
@@ -47,6 +48,7 @@ export default combineReducers({
     form,
     lockFormats,
     policies,
+    lockFields,
     entityPolicies,
     currentUser,
     devicesDiscover,

From 0e0846292953fffdf2521936c232122bb9e584d0 Mon Sep 17 00:00:00 2001
From: firsti <brehmedu@fim.uni-passau.de>
Date: Thu, 12 Jul 2018 16:28:43 +0200
Subject: [PATCH 16/16] Adjust some style attributes

---
 src/components/Form.js  | 3 ++-
 src/containers/Locks.js | 3 ++-
 src/styles/index.css    | 4 ++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Form.js b/src/components/Form.js
index db55721..4b5b303 100644
--- a/src/components/Form.js
+++ b/src/components/Form.js
@@ -89,6 +89,7 @@ const renderForm = (props, inputs) => {
   return (
     <div>
       <form
+        className={props.class}
         id={id}
         onSubmit={event => {
         event.preventDefault();
@@ -107,7 +108,7 @@ const renderForm = (props, inputs) => {
           width: '10%',
           color: '#008714',
           padding: '8px',
-          margin: '5px 25px 0 0'
+          margin: '0px 25px 0 0'
         }}
         onClick={event => {
           event.preventDefault()
diff --git a/src/containers/Locks.js b/src/containers/Locks.js
index ba3d5f9..506b899 100644
--- a/src/containers/Locks.js
+++ b/src/containers/Locks.js
@@ -133,6 +133,7 @@ class Locks extends Component {
     if(form[policy] && form[policy][op]) {
       return (
         <Form
+          class={'policy_lock_form'}
           id={this.props.params.id + '_' + this.props.params.type + '_' + policy + '_' + op}
           selectedForms={form[policy][op]}
           deleteFormName={forms => {
@@ -197,7 +198,7 @@ class Locks extends Component {
       return (
         <GenericListItem
           key={`addLockList_${policy}_${type},`}
-          style={{bar: {height: 'auto', margin: '0 0 10px 0'}, middleEl: {width: '150px', padding: '20px'}, rightEl: {padding: '20px'}, leftEl: {padding: '20px'}}}
+          style={{bar: {height: 'auto', margin: '0 0 10px 0'}, middleEl: {display: 'inline-block', width: '150px', padding: '0px'}, rightEl: {padding: '20px'}, leftEl: {display: 'inline-block', padding: '40px 20px 20px 20px'}}}
           leftEl={`New ${type} lock`}
           rightEl={this.renderForm(policy, type)}
           middleEl={
diff --git a/src/styles/index.css b/src/styles/index.css
index 6ec0d79..04db49f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -186,4 +186,8 @@ i.glyphicon { display: none; }
 
 .__react_component_tooltip {
   max-width: 300px;
+}
+
+.policy_lock_form {
+  display: inline-block;
 }
\ No newline at end of file