Enhance peformance of the Roles table (#257)

Author: helfi92

src/components/RolesTable/index.jsx

@@ -7,10 +7,8 @@ import { camelCase } from 'change-case/change-case';
 import { withStyles } from '@material-ui/core/styles';
 import TableRow from '@material-ui/core/TableRow';
 import TableCell from '@material-ui/core/TableCell';
-import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import LinkIcon from 'mdi-react/LinkIcon';
-import TableCellListItem from '../TableCellListItem';
 import { role } from '../../utils/prop-types';
 import sort from '../../utils/sort';
 import DataTable from '../DataTable';
@@ -20,11 +18,18 @@ const sorted = pipe(
   map(({ roleId }) => roleId)
 );
 
-@withStyles({
+@withStyles(theme => ({
+  tableCell: {
+    textDecoration: 'none',
+  },
   listItemCell: {
+    display: 'flex',
+    justifyContent: 'space-between',
     width: '100%',
+    padding: theme.spacing.unit,
+    ...theme.mixins.hover,
   },
-})
+}))
 export default class RolesTable extends Component {
   static defaultProps = {
     searchTerm: null,
@@ -99,20 +104,16 @@ export default class RolesTable extends Component {
           onHeaderClick={this.handleHeaderClick}
           renderRow={({ roleId }) => (
             <TableRow key={roleId}>
-              <TableCell>
-                <TableCellListItem
-                  className={classes.listItemCell}
-                  dense
-                  button
-                  component={Link}
+              <TableCell padding="dense">
+                <Link
+                  className={classes.tableCell}
                   to={`/auth/roles/${encodeURIComponent(roleId)}`}
                 >
-                  <ListItemText
-                    disableTypography
-                    primary={<Typography>{roleId}</Typography>}
-                  />
-                  <LinkIcon size={iconSize} />
-                </TableCellListItem>
+                  <div className={classes.listItemCell}>
+                    <Typography>{roleId}</Typography>
+                    <LinkIcon size={iconSize} />
+                  </div>
+                </Link>
               </TableCell>
             </TableRow>
           )}

src/views/Roles/ViewRoles/index.jsx

@@ -3,6 +3,7 @@ import React, { PureComponent, Fragment } from 'react';
 import { graphql } from 'react-apollo';
 import Spinner from '@mozilla-frontend-infra/components/Spinner';
 import { withStyles } from '@material-ui/core/styles';
+import Tooltip from '@material-ui/core/Tooltip';
 import PlusIcon from 'mdi-react/PlusIcon';
 import Dashboard from '../../../components/Dashboard';
 import Search from '../../../components/Search';
@@ -56,14 +57,16 @@ export default class ViewRoles extends PureComponent {
           {!roles && loading && <Spinner loading />}
           <ErrorPanel error={error} />
           {roles && <RolesTable searchTerm={roleSearch} roles={roles} />}
-          <Button
-            onClick={this.handleCreate}
-            variant="fab"
-            color="secondary"
-            className={classes.plusIcon}
-          >
-            <PlusIcon />
-          </Button>
+          <Tooltip title="Create Role">
+            <Button
+              onClick={this.handleCreate}
+              variant="fab"
+              color="secondary"
+              className={classes.plusIcon}
+            >
+              <PlusIcon />
+            </Button>
+          </Tooltip>
         </Fragment>
       </Dashboard>
     );