feat(admin-users): fix bugs and improve

packages/component-faraday-ui/src/IconButton.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Icon } from '@pubsweet/ui'
 import styled from 'styled-components'
 
-import { positionHelper, marginHelper } from './styledHelpers'
+import { positionHelper, marginHelper, paddingHelper } from './styledHelpers'
 
 const IconButton = styled.div`
   align-items: center;
@@ -20,6 +20,7 @@ const IconButton = styled.div`
   }
 
   ${marginHelper};
+  ${paddingHelper};
   ${positionHelper};
 `
 

packages/component-faraday-ui/src/WizardAuthors.js

@@ -106,17 +106,24 @@ export default compose(
   withFetching,
   withState('authors', 'setAuthors', ({ authors }) => authors),
   withHandlers({
-    setFormAuthors: ({ changeForm, setAuthors, setFetching }) => authors => {
+    setFormAuthors: ({
+      changeForm,
+      setAuthors,
+      setFetching,
+      onAuthorEdit,
+    }) => authors => {
       setAuthors(authors)
       setFetching(false)
+      onAuthorEdit(null)
       changeForm('submission', 'authors', authors)
     },
   }),
   withHandlers({
-    addNewAuthor: ({ authors = [], setAuthors }) => () => {
+    addNewAuthor: ({ authors = [], setAuthors, onAuthorEdit }) => () => {
       if (authors.some(a => a.id === 'newAuthor')) {
         return
       }
+      onAuthorEdit(0)
       setAuthors([
         ...authors,
         { id: 'newAuthor', isCorresponding: false, isSubmitting: false },

packages/component-faraday-ui/src/modals/FormModal.js

@@ -26,7 +26,7 @@ import {
 
 const AddUserForm = ({ roles, countries, titles }) => (
   <Fragment>
-    <Row alignItems="center" mb={2}>
+    <Row alignItems="baseline" mb={1} mt={1}>
       <Item mr={1} vertical>
         <Label required>Email</Label>
         <ValidatedField
@@ -133,18 +133,18 @@ const EditForm = ({ titles, countries }) => (
         <Label>Roles</Label>
       </Item>
     </Row>
-    <RowOverrideAlert mb={2} mt={1}>
+    <RowOverrideAlert mb={3} mt={1}>
       <Item>
         <ValidatedField
           component={({ value, onChange }) => (
             <Checkbox
               checked={value}
-              label="Author"
+              label="Editor in Chief"
               onChange={onChange}
               value={value}
             />
           )}
-          name="author"
+          name="editorInChief"
         />
       </Item>
       <Item>
@@ -174,21 +174,6 @@ const EditForm = ({ titles, countries }) => (
         />
       </Item>
     </RowOverrideAlert>
-    <RowOverrideAlert mb={3}>
-      <Item>
-        <ValidatedField
-          component={({ value, onChange }) => (
-            <Checkbox
-              checked={value}
-              label="Editor in Chief"
-              onChange={onChange}
-              value={value}
-            />
-          )}
-          name="editorInChief"
-        />
-      </Item>
-    </RowOverrideAlert>
   </Fragment>
 )
 

packages/components-faraday/src/components/Admin/AddUser.js

@@ -22,7 +22,7 @@ const AddUser = ({ edit, journal, handleSubmit, ...rest }) => (
   >
     {showModal =>
       edit ? (
-        <IconButton icon="edit-2" iconSize={2} onClick={showModal} />
+        <IconButton icon="edit-2" iconSize={2} onClick={showModal} pt={1 / 2} />
       ) : (
         <ActionLink icon="plus" onClick={showModal}>
           ADD USER

packages/components-faraday/src/components/Admin/AdminUsers.js

@@ -41,7 +41,7 @@ const Users = ({
   ...rest
 }) => (
   <Fragment>
-    <Row alignItems="center" justify="space-between" mb={3}>
+    <Row alignItems="center" justify="space-between" mb={1}>
       <Item alignItems="center">
         <ActionLink icon="arrow-left" mr={2} onClick={history.goBack}>
           Admin Dashboard
@@ -57,74 +57,85 @@ const Users = ({
       <Pagination {...rest} itemsPerPage={itemsPerPage} page={page} />
     </Row>
 
-    <Row alignItems="center" mb={1} pl={2}>
-      <Item flex={2}>
-        <Label>Full name</Label>
-      </Item>
-      <Item flex={4}>
-        <Label>Email</Label>
-      </Item>
-      <Item flex={2}>
-        <Label>Affiliation</Label>
-      </Item>
-      <Item flex={2}>
-        <Label>Roles</Label>
-      </Item>
-      <Item flex={1}>
-        <Label>Status</Label>
-      </Item>
-      <Item />
-      <Item />
-    </Row>
-    {paginatedItems.map(user => (
-      <UserRow alignItems="center" key={user.id} pb={1 / 2} pl={2} pt={1 / 2}>
-        <Item flex={2}>
-          <Text>{`${get(user, 'firstName', '')} ${get(
-            user,
-            'lastName',
-            '',
-          )}`}</Text>
-        </Item>
-        <Item flex={4}>
-          <Text>{user.email}</Text>
-        </Item>
-        <Item flex={2}>
-          <Text>{user.affiliation}</Text>
-        </Item>
-        <Item flex={2}>
-          <Text customId>{getUserRoles(user)}</Text>
-        </Item>
-        <Item flex={1} secondary>
-          <Text>{getStatusLabel(user)}</Text>
-        </Item>
-        <HiddenItem justify="center">
-          <AddUser
-            edit
-            getUsers={getUsers}
-            modalKey={`edit-${user.id}`}
-            onSubmit={onSubmit}
-            user={user}
-          />
-        </HiddenItem>
-        <HiddenItem justify="justify" pl={1} pr={1}>
-          {!user.admin && (
-            <OpenModal
-              isFetching={isFetching}
-              modalKey={`deactivate-${user.id}`}
-              onConfirm={deactivateUser(user)}
-              subtitle={`${user.firstName} ${user.lastName}`}
-              title="Are you sure to deactivate user?"
-            >
-              {showModal => (
-                <Button onClick={showModal} size="small">
-                  {user.isActive ? 'DEACTIVATE' : 'ACTIVATE'}
-                </Button>
-              )}
-            </OpenModal>
-          )}
-        </HiddenItem>
-      </UserRow>
-    ))}
+    <Table>
+      <thead>
+        <tr>
+          <th>
+            <Label>Full Name</Label>
+          </th>
+          <th colSpan={2}>
+            <Label>Email</Label>
+          </th>
+          <th>
+            <Label>Affiliation</Label>
+          </th>
+          <th>
+            <Label>Roles</Label>
+          </th>
+          <th>
+            <Label>Status</Label>
+          </th>
+          <th>&nbsp;</th>
+        </tr>
+      </thead>
+      <tbody>
+        {paginatedItems.map(user => (
+          <UserRow key={user.id}>
+            <td>
+              <Text pl={1}>{`${get(user, 'firstName', '')} ${get(
+                user,
+                'lastName',
+                '',
+              )}`}</Text>
+            </td>
+            <td colSpan={2}>
+              <Text>{user.email}</Text>
+            </td>
+            <td>
+              <Text>{user.affiliation}</Text>
+            </td>
+            <td>
+              <Text customId>{getUserRoles(user)}</Text>
+            </td>
+            <td>
+              <Text secondary>{getStatusLabel(user)}</Text>
+            </td>
+
+            <HiddenCell>
+              <Item alignItems="center" justify="flex-end">
+                <AddUser
+                  edit
+                  getUsers={getUsers}
+                  modalKey={`edit-${user.id}`}
+                  onSubmit={onSubmit}
+                  user={user}
+                />
+                <OpenModal
+                  isFetching={isFetching}
+                  modalKey={`deactivate-${user.id}`}
+                  onConfirm={deactivateUser(user)}
+                  subtitle={`${user.firstName} ${user.lastName}`}
+                  title={`Are you sure to ${
+                    !user.isActive ? 'activate' : 'deactivate'
+                  } user?`}
+                >
+                  {showModal => (
+                    <ActivateButton
+                      ml={1}
+                      mr={1}
+                      onClick={showModal}
+                      size="small"
+                    >
+                      {!user.isActive ? 'ACTIVATE' : 'DEACTIVATE'}
+                    </ActivateButton>
+                  )}
+                </OpenModal>
+              </Item>
+            </HiddenCell>
+          </UserRow>
+        ))}
+      </tbody>
+    </Table>
   </Fragment>
 )
 
@@ -162,27 +173,46 @@ export default compose(
           setModalError('Something went wrong...')
         })
     },
-    getUserRoles: ({ journal: { roles = {} } }) => user =>
-      Object.entries(roles)
+    getUserRoles: ({ journal: { roles = {} } }) => user => {
+      const parsedRoles = Object.entries(roles)
         .reduce((acc, role) => (user[role[0]] ? [...acc, role[1]] : acc), [])
-        .join(', '),
+        .join(', ')
+
+      return parsedRoles || 'Author'
+    },
   }),
 )(Users)
 
 // #region styled-components
-const HiddenItem = styled(Item)`
+const Table = styled.table`
+  border-collapse: collapse;
+
+  & th,
+  & td {
+    border: none;
+    text-align: start;
+    vertical-align: middle;
+    height: calc(${th('gridUnit')} * 5);
+  }
+`
+
+const HiddenCell = styled.td`
   opacity: 0;
 `
 
-const UserRow = styled(Row)`
+const UserRow = styled.tr`
   background-color: ${th('colorBackgroundHue2')};
+  border-bottom: 1px solid ${th('colorBorder')};
 
   &:hover {
     background-color: #eeeeee;
 
-    ${HiddenItem} {
+    ${HiddenCell} {
       opacity: 1;
     }
   }
 `
+const ActivateButton = styled(Button)`
+  width: 90px;
+`
 // #endregion

packages/xpub-faraday/config/validations.js

@@ -140,7 +140,6 @@ module.exports = {
     country: Joi.string().allow(''),
     title: Joi.string().allow(''),
     teams: Joi.array(),
-    author: Joi.boolean(),
     editorInChief: Joi.boolean(),
     handlingEditor: Joi.boolean(),
     invitationToken: Joi.string().allow(''),