Adding classes

client/coral-admin/src/routes/Community/components/People.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 import styles from './styles.css';
 import Table from './Table';
 import {Icon} from 'coral-ui';
@@ -24,7 +25,7 @@ const People = (props) => {
   const hasResults = !!users.length;
 
   return (
-    <div className={styles.container}>
+    <div className={cn(styles.container, 'talk-admin-community-people-container')}>
       <div className={styles.leftColumn}>
         <div className={styles.searchBox}>
           <Icon name='search' className={styles.searchIcon}/>

client/coral-admin/src/routes/Community/components/Table.js

@@ -42,7 +42,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
       </thead>
       <tbody>
         {users.map((row, i)=> (
-          <tr key={i}>
+          <tr key={i} className="talk-admin-community-people-row">
             <td className="mdl-data-table__cell--non-numeric">
               <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
               <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
@@ -52,6 +52,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
+                className="talk-admin-community-people-dd-status"
                 value={row.status}
                 placeholder={t('community.status')}
                 onChange={(status) => setCommenterStatus(row.id, status)}>
@@ -61,6 +62,7 @@ const Table = ({users, setRole, onHeaderClickHandler, setCommenterStatus, viewUs
             </td>
             <td className="mdl-data-table__cell--non-numeric">
               <Dropdown
+                className="talk-admin-community-people-dd-role"
                 value={row.roles[0] || ''}
                 placeholder={t('community.role')}
                 onChange={(role) => setRole(row.id, role)}>

client/coral-ui/components/Dropdown.js

@@ -131,7 +131,7 @@ class Dropdown extends React.Component {
     const {containerClassName, toggleClassName, toggleOpenClassName} = this.props;
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={cn(styles.dropdown, containerClassName)}>
+        <div className={cn(styles.dropdown, containerClassName, 'dd dd-container')}>
           <div
             className={cn(styles.toggle, toggleClassName, {[cn(this.state.isOpen, toggleOpenClassName)]: this.state.isOpen})}
             onClick={this.handleClick}
@@ -149,7 +149,7 @@ class Dropdown extends React.Component {
           {this.state.isOpen &&
             <div>
               <div tabIndex="0" onFocus={this.trapFocusBegin} />
-              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen})}>
+              <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen}, 'dd-list-active')}>
                 {React.Children.toArray(this.props.children)
                   .map((child, i) =>
                     React.cloneElement(child, {

client/coral-ui/components/Option.js

@@ -16,8 +16,9 @@ class Option extends React.Component {
 
   render() {
     const {className, label = '', onClick, onKeyDown} = this.props;
+    const id = this.props.id ? this.props.id : this.props.value;
     return (
-      <li className={cn(styles.option, className)} onClick={onClick} onKeyDown={onKeyDown} role="option" tabIndex="0" ref={this.handleRef}>
+      <li className={cn(styles.option, className, 'dd-option')} onClick={onClick} onKeyDown={onKeyDown} role="option" tabIndex="0" ref={this.handleRef} id={id}>
         {label}
       </li>
     );
@@ -26,6 +27,7 @@ class Option extends React.Component {
 
 Option.propTypes = {
   className: PropTypes.string,
+  id: PropTypes.string,
   label: PropTypes.string,
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,