From 81eea194000ffbfdee9320199bf97abc9b670d8a Mon Sep 17 00:00:00 2001
From: Jared Scheib <jared.scheib@gmail.com>
Date: Wed, 17 Jan 2018 14:03:01 -0800
Subject: [PATCH] Wire up user organizations as Tags in AllUsersTable

---
 .../components/chronograf/AllUsersTable.js    | 19 ++++++---
 .../components/chronograf/AllUsersTableRow.js | 14 +++++--
 ui/src/shared/components/Tags.js              | 40 +++++++++++++------
 3 files changed, 52 insertions(+), 21 deletions(-)

diff --git a/ui/src/admin/components/chronograf/AllUsersTable.js b/ui/src/admin/components/chronograf/AllUsersTable.js
index 3f5f7b7f70..d034d3fb4c 100644
--- a/ui/src/admin/components/chronograf/AllUsersTable.js
+++ b/ui/src/admin/components/chronograf/AllUsersTable.js
@@ -38,10 +38,16 @@ class AllUsersTable extends Component {
     updateAuthConfigAsync(links.config.auth, authConfig, updatedAuthConfig)
   }
 
-  handleAddUserToOrganization = user => newOrganization => {
-    console.log('handleAddUserToOrganization', user.name, newOrganization.id)
-    // const newOrganizationRole = newOrganization + newOrganizationDefaultRole -- need to get this fresh from server or have server determine it, which requires a change to ValidUpdate
-    // this.props.onUpdateUserRole(user, newOrganizationRole)
+  handleAddToOrganization = user => organization => {
+    console.log('handleAddToOrganization', user.name, organization)
+    // const organizationRole = organization + organizationDefaultRole -- need to get this fresh from server or have server determine it, which requires a change to ValidUpdate
+    // this.props.onUpdateUserRole({...user, roles: [...user.roles, organizationRole]})
+  }
+
+  handleRemoveFromOrganization = user => organization => {
+    console.log('handleRemoveFromOrganization', user.name, organization)
+    // const roles = newOrganizationRole.filter(o => o.id === organization.id)
+    // this.props.onUpdateUserRole({...user, roles})
   }
 
   handleChangeSuperAdmin = user => newStatus => {
@@ -117,7 +123,10 @@ class AllUsersTable extends Component {
                       user={user}
                       key={uuid.v4()}
                       organizations={organizations}
-                      onAddUserToOrganization={this.handleAddUserToOrganization}
+                      onAddToOrganization={this.handleAddToOrganization}
+                      onRemoveFromOrganization={
+                        this.handleRemoveFromOrganization
+                      }
                       onChangeSuperAdmin={this.handleChangeSuperAdmin}
                       onDelete={this.handleDeleteUser}
                       meID={meID}
diff --git a/ui/src/admin/components/chronograf/AllUsersTableRow.js b/ui/src/admin/components/chronograf/AllUsersTableRow.js
index 8321289979..ea1530733c 100644
--- a/ui/src/admin/components/chronograf/AllUsersTableRow.js
+++ b/ui/src/admin/components/chronograf/AllUsersTableRow.js
@@ -1,5 +1,6 @@
 import React, {PropTypes} from 'react'
 
+import Tags from 'shared/components/Tags'
 import Dropdown from 'shared/components/Dropdown'
 import SlideToggle from 'shared/components/SlideToggle'
 import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell'
@@ -16,7 +17,8 @@ const {
 const AllUsersTableRow = ({
   organizations,
   user,
-  onAddUserToOrganization,
+  onAddToOrganization,
+  onRemoveFromOrganization,
   onChangeSuperAdmin,
   onDelete,
   meID,
@@ -46,7 +48,10 @@ const AllUsersTableRow = ({
             </strong>}
       </td>
       <td style={{width: colOrganizations}}>
-        {userOrganizations.map(o => o.name).join(', ')}
+        <Tags
+          tags={userOrganizations}
+          onDeleteTag={onRemoveFromOrganization(user)}
+        />
       </td>
       <td style={{width: colProvider}}>
         {user.provider}
@@ -67,7 +72,7 @@ const AllUsersTableRow = ({
           <Dropdown
             items={dropdownOrganizationsItems}
             selected={'Add to Organization'}
-            onChoose={onAddUserToOrganization(user)}
+            onChoose={onAddToOrganization(user)}
             buttonColor="btn-primary"
             buttonSize="btn-xs"
             className="dropdown-stretch"
@@ -93,7 +98,8 @@ AllUsersTableRow.propTypes = {
     name: string.isRequired,
     id: string.isRequired,
   }),
-  onAddUserToOrganization: func.isRequired,
+  onAddToOrganization: func.isRequired,
+  onRemoveFromOrganization: func.isRequired,
   onChangeSuperAdmin: func.isRequired,
   onDelete: func.isRequired,
   meID: string.isRequired,
diff --git a/ui/src/shared/components/Tags.js b/ui/src/shared/components/Tags.js
index fa74b1ef3c..4b8d9c3323 100644
--- a/ui/src/shared/components/Tags.js
+++ b/ui/src/shared/components/Tags.js
@@ -1,29 +1,45 @@
-import React, {PropTypes} from 'react'
+import React, {Component, PropTypes} from 'react'
 
 const Tags = ({tags, onDeleteTag}) =>
   <div className="input-tag-list">
     {tags.map(item => {
-      return <Tag key={item} item={item} onDelete={onDeleteTag} />
+      return (
+        <Tag
+          key={item.text || item.name || item}
+          item={item}
+          onDelete={onDeleteTag}
+        />
+      )
     })}
   </div>
 
-const Tag = ({item, onDelete}) =>
-  <span key={item} className="input-tag-item">
-    <span>
-      {item}
-    </span>
-    <span className="icon remove" onClick={onDelete(item)} />
-  </span>
+class Tag extends Component {
+  handleClickDelete = item => () => {
+    this.props.onDelete(item)
+  }
 
-const {arrayOf, func, string} = PropTypes
+  render() {
+    const {item} = this.props
+    return (
+      <span key={item} className="input-tag-item">
+        <span>
+          {item.text || item.name || item}
+        </span>
+        <span className="icon remove" onClick={this.handleClickDelete(item)} />
+      </span>
+    )
+  }
+}
+
+const {arrayOf, func, oneOfType, shape, string} = PropTypes
 
 Tags.propTypes = {
-  tags: arrayOf(string),
+  tags: arrayOf(oneOfType([shape(), string])),
   onDeleteTag: func,
 }
 
 Tag.propTypes = {
-  item: string,
+  item: oneOfType([shape(), string]),
   onDelete: func,
 }