merge conflicts

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

@@ -5,6 +5,7 @@ import Table from '../containers/Table';
 import {Pager, Icon} from 'coral-ui';
 import EmptyCard from '../../../components/EmptyCard';
 import t from 'coral-framework/services/i18n';
+import PropTypes from 'prop-types';
 
 const tableHeaders = [
   {
@@ -62,4 +63,12 @@ const People = ({commenters, searchValue, onSearchChange, ...props}) => {
   );
 };
 
+People.propTypes = {
+  commenters: PropTypes.array,
+  searchValue: PropTypes.string,
+  onSearchChange: PropTypes.func,
+  totalPages: PropTypes.number,
+  onNewPageHandler: PropTypes.func,
+};
+
 export default People;

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

@@ -19,6 +19,13 @@
   }
 }
 
+.username, .email {
+  max-width: 215px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .email {
   display: block;
 }

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

@@ -4,9 +4,10 @@ import t from 'coral-framework/services/i18n';
 import PropTypes from 'prop-types';
 import {Dropdown, Option} from 'coral-ui';
 import capitalize from 'lodash/capitalize';
+import cn from 'classnames';
 
 const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
-  <table className={`mdl-data-table ${styles.dataTable}`} tabIndex="-1">
+  <table className={`mdl-data-table ${styles.dataTable}`}>
     <thead>
       <tr>
         {headers.map((header, i) =>(
@@ -23,12 +24,12 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
     </thead>
     <tbody>
       {commenters.map((row, i)=> (
-        <tr key={i} tabIndex="0">
-          <td className="mdl-data-table__cell--non-numeric" tabIndex="1">
-            <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
+        <tr key={i}>
+          <td className="mdl-data-table__cell--non-numeric" tabIndex="0">
+            <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
-          <td className="mdl-data-table__cell--non-numeric" tabIndex="1">
+          <td className="mdl-data-table__cell--non-numeric" tabIndex="0">
             {row.created_at}
           </td>
           <td className="mdl-data-table__cell--non-numeric">

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

@@ -1,10 +1,10 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
-import {compose} from 'react-apollo';
 import {setRole, setCommenterStatus} from '../../../actions/community';
 import Table from '../components/Table';
 import {viewUserDetail} from '../../../actions/userDetail';
+import PropTypes from 'prop-types';
 
 class TableContainer extends Component {
 
@@ -22,6 +22,12 @@ class TableContainer extends Component {
   }
 }
 
+TableContainer.propTypes = {
+  setRole: PropTypes.func,
+  setCommenterStatus: PropTypes.func,
+  commenters: PropTypes.array,
+};
+
 const mapStateToProps = (state) => ({
   commenters: state.community.accounts,
 });
@@ -33,7 +39,5 @@ const mapDispatchToProps = (dispatch) =>
     viewUserDetail,
   }, dispatch);
 
-export default compose(
-  connect(mapStateToProps, mapDispatchToProps),
-)(TableContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(TableContainer);
 

client/coral-admin/src/routes/Configure/components/Configure.css

@@ -20,7 +20,7 @@
 
 .mainContent {
   width: calc(100% - 300px);
-  padding: 10px 14px;
+  padding: 10px 14px 80px 14px;
   box-sizing: border-box;
   max-width: 718px;
 }

client/coral-framework/components/ConfigureCard.css

@@ -3,6 +3,7 @@
   align-items: flex-start;
   min-height: 100px;
   max-width: 600px;
+  overflow: visible;
 }
 
 .header {