From a73531f86fccd9a6bfd1abbb6a600e8ff1f53c2f Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Wed, 1 Nov 2017 15:19:25 -0700
Subject: [PATCH] Ensure UsersTable sub-components return a single react
 element

Previously was returning an array in a couple instances. Unnoticed
mishap from refactor
---
 .../chronograf/UsersTableOrgCell.js           | 70 ++++++++++-------
 .../chronograf/UsersTableRoleCell.js          | 77 +++++++++++--------
 .../components/chronograf/UsersTableRow.js    | 28 +++----
 3 files changed, 98 insertions(+), 77 deletions(-)

diff --git a/ui/src/admin/components/chronograf/UsersTableOrgCell.js b/ui/src/admin/components/chronograf/UsersTableOrgCell.js
index a7486b383..24a63c65d 100644
--- a/ui/src/admin/components/chronograf/UsersTableOrgCell.js
+++ b/ui/src/admin/components/chronograf/UsersTableOrgCell.js
@@ -8,6 +8,7 @@ import {
   NO_ORG,
   NO_ROLE,
 } from 'src/admin/constants/dummyUsers'
+import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
 
 const UsersTableOrgCell = ({
   user,
@@ -15,48 +16,59 @@ const UsersTableOrgCell = ({
   onChangeUserRole,
   onChooseFilter,
 }) => {
+  const {colOrg} = USERS_TABLE
+
   // Expects Users to always have at least 1 role (as a member of the default org)
   if (user.roles.length === 1) {
     return (
-      <Dropdown
-        items={DUMMY_ORGS.filter(org => {
-          return !(org.name === DEFAULT_ORG || org.name === NO_ORG)
-        }).map(r => ({
-          ...r,
-          text: r.name,
-        }))}
-        selected={NO_ORG}
-        onChoose={onChangeUserRole(user, NO_ROLE)}
-        buttonColor="btn-primary"
-        buttonSize="btn-xs"
-        className="dropdown-190"
-      />
+      <td style={{width: colOrg}}>
+        <Dropdown
+          items={DUMMY_ORGS.filter(org => {
+            return !(org.name === DEFAULT_ORG || org.name === NO_ORG)
+          }).map(r => ({
+            ...r,
+            text: r.name,
+          }))}
+          selected={NO_ORG}
+          onChoose={onChangeUserRole(user, NO_ROLE)}
+          buttonColor="btn-primary"
+          buttonSize="btn-xs"
+          className="dropdown-190"
+        />
+      </td>
     )
   }
 
   if (organizationName === DEFAULT_ORG) {
-    return user.roles
-      .filter(role => {
-        return !(role.organizationName === DEFAULT_ORG)
-      })
-      .map((role, i) =>
-        <span key={i} className="chronograf-user--org">
-          <a href="#" onClick={onChooseFilter(role.organizationName)}>
-            {role.organizationName}
-          </a>
-        </span>
-      )
+    return (
+      <td style={{width: colOrg}}>
+        {user.roles
+          .filter(role => {
+            return !(role.organizationName === DEFAULT_ORG)
+          })
+          .map((role, i) =>
+            <span key={i} className="chronograf-user--org">
+              <a href="#" onClick={onChooseFilter(role.organizationName)}>
+                {role.organizationName}
+              </a>
+            </span>
+          )}
+      </td>
+    )
   }
 
   const currentOrg = user.roles.find(
     role => role.organizationName === organizationName
   )
+
   return (
-    <span className="chronograf-user--org">
-      <a href="#" onClick={onChooseFilter(currentOrg.organizationName)}>
-        {currentOrg.organizationName}
-      </a>
-    </span>
+    <td style={{width: colOrg}}>
+      <span className="chronograf-user--org">
+        <a href="#" onClick={onChooseFilter(currentOrg.organizationName)}>
+          {currentOrg.organizationName}
+        </a>
+      </span>
+    </td>
   )
 }
 
diff --git a/ui/src/admin/components/chronograf/UsersTableRoleCell.js b/ui/src/admin/components/chronograf/UsersTableRoleCell.js
index 420c0edc1..9c78d07e6 100644
--- a/ui/src/admin/components/chronograf/UsersTableRoleCell.js
+++ b/ui/src/admin/components/chronograf/UsersTableRoleCell.js
@@ -3,51 +3,64 @@ import React, {PropTypes} from 'react'
 import Dropdown from 'shared/components/Dropdown'
 
 import {DEFAULT_ORG, USER_ROLES} from 'src/admin/constants/dummyUsers'
+import {USERS_TABLE} from 'src/admin/constants/chronografTableSizing'
 
 const UsersTableRoleCell = ({user, organizationName, onChangeUserRole}) => {
+  const {colRole} = USERS_TABLE
+
   // User must be part of more than one organization to be able to be assigned a role
   if (user.roles.length === 1) {
-    return <span className="chronograf-user--role">N/A</span>
+    return (
+      <td style={{width: colRole}}>
+        <span className="chronograf-user--role">N/A</span>
+      </td>
+    )
   }
 
   if (organizationName === DEFAULT_ORG) {
-    return user.roles
-      .filter(role => {
-        return !(role.organizationName === DEFAULT_ORG)
-      })
-      .map((role, i) =>
-        <Dropdown
-          key={i}
-          items={USER_ROLES.map(r => ({
-            ...r,
-            text: r.name,
-          }))}
-          selected={role.name}
-          onChoose={onChangeUserRole(user, role)}
-          buttonColor="btn-primary"
-          buttonSize="btn-xs"
-          className="dropdown-80"
-        />
-      )
+    return (
+      <td style={{width: colRole}}>
+        {user.roles
+          .filter(role => {
+            return !(role.organizationName === DEFAULT_ORG)
+          })
+          .map((role, i) =>
+            <Dropdown
+              key={i}
+              items={USER_ROLES.map(r => ({
+                ...r,
+                text: r.name,
+              }))}
+              selected={role.name}
+              onChoose={onChangeUserRole(user, role)}
+              buttonColor="btn-primary"
+              buttonSize="btn-xs"
+              className="dropdown-80"
+            />
+          )}
+      </td>
+    )
   }
 
   const currentRole = user.roles.find(
     role => role.organizationName === organizationName
   )
   return (
-    <span className="chronograf-user--role">
-      <Dropdown
-        items={USER_ROLES.map(r => ({
-          ...r,
-          text: r.name,
-        }))}
-        selected={currentRole.name}
-        onChoose={onChangeUserRole(user, currentRole)}
-        buttonColor="btn-primary"
-        buttonSize="btn-xs"
-        className="dropdown-80"
-      />
-    </span>
+    <td style={{width: colRole}}>
+      <span className="chronograf-user--role">
+        <Dropdown
+          items={USER_ROLES.map(r => ({
+            ...r,
+            text: r.name,
+          }))}
+          selected={currentRole.name}
+          onChoose={onChangeUserRole(user, currentRole)}
+          buttonColor="btn-primary"
+          buttonSize="btn-xs"
+          className="dropdown-80"
+        />
+      </span>
+    </td>
   )
 }
 
diff --git a/ui/src/admin/components/chronograf/UsersTableRow.js b/ui/src/admin/components/chronograf/UsersTableRow.js
index 4ff0de6b3..79734ef2f 100644
--- a/ui/src/admin/components/chronograf/UsersTableRow.js
+++ b/ui/src/admin/components/chronograf/UsersTableRow.js
@@ -14,7 +14,7 @@ const UsersTableRow = ({
   onChangeUserRole,
   onChooseFilter,
 }) => {
-  const {colOrg, colRole, colSuperAdmin, colProvider, colScheme} = USERS_TABLE
+  const {colSuperAdmin, colProvider, colScheme} = USERS_TABLE
 
   const isSelected = selectedUsers.find(u => isSameUser(user, u))
 
@@ -34,21 +34,17 @@ const UsersTableRow = ({
           {user.name}
         </strong>
       </td>
-      <td style={{width: colOrg}}>
-        <UsersTableOrgCell
-          user={user}
-          organizationName={organizationName}
-          onChangeUserRole={onChangeUserRole}
-          onChooseFilter={onChooseFilter}
-        />
-      </td>
-      <td style={{width: colRole}}>
-        <UsersTableRoleCell
-          user={user}
-          organizationName={organizationName}
-          onChangeUserRole={onChangeUserRole}
-        />
-      </td>
+      <UsersTableOrgCell
+        user={user}
+        organizationName={organizationName}
+        onChangeUserRole={onChangeUserRole}
+        onChooseFilter={onChooseFilter}
+      />
+      <UsersTableRoleCell
+        user={user}
+        organizationName={organizationName}
+        onChangeUserRole={onChangeUserRole}
+      />
       <td style={{width: colSuperAdmin}}>
         {user.superadmin ? 'Yes' : '--'}
       </td>