Add customizable drag handler to sortable list

packages/component-wizard/src/components/AuthorList.js

 import React from 'react'
 import { get } from 'lodash'
 import classnames from 'classnames'
-import { TextField, Menu } from '@pubsweet/ui'
+import { TextField, Menu, Icon } from '@pubsweet/ui'
 import { compose, withState, withHandlers } from 'recompose'
 
 import classes from './AuthorList.local.scss'
@@ -67,6 +67,14 @@ const Label = ({ label, value }) => (
   </div>
 )
 
+const DragHandle = () => (
+  <div className={classnames(classes['drag-handle'])}>
+    <Icon>chevron_up</Icon>
+    <Icon size={16}>menu</Icon>
+    <Icon>chevron_down</Icon>
+  </div>
+)
+
 const Author = ({
   firstName,
   middleName,
@@ -74,24 +82,23 @@ const Author = ({
   email,
   affiliation,
   isDragging,
-  children,
+  dragHandle,
 }) => (
   <div className={classnames(classes.author)}>
-    <span className={classnames(classes.title)}>Author</span>
-    {!isDragging && (
+    {dragHandle}
+    <div className={classnames(classes.container)}>
+      <span className={classnames(classes.title)}>Author</span>
       <div className={classnames(classes.row)}>
         <Label label="First name" value={firstName} />
         <Label label="Middle name" value={middleName} />
         <Label label="Last name" value={lastName} />
       </div>
-    )}
-    {!isDragging && (
       <div className={classnames(classes.row)}>
         <Label label="Email" value={email} />
         <Label label="Affiliation" value={affiliation} />
         <Label label="Affiliation" value={affiliation} />
       </div>
-    )}
+    </div>
   </div>
 )
 
@@ -102,7 +109,12 @@ const Authors = ({ author, authors, moveAuthor, addAuthor, editAuthor }) => (
       author={author}
       editAuthor={editAuthor}
     />
-    <SortableList items={authors} listItem={Author} moveItem={moveAuthor} />
+    <SortableList
+      dragHandle={DragHandle}
+      items={authors}
+      listItem={Author}
+      moveItem={moveAuthor}
+    />
   </div>
 )
 

packages/component-wizard/src/components/AuthorList.local.scss

@@ -5,6 +5,13 @@
 
 .author {
   border: 1px solid #444;
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 10px;
+
+  .container {
+    flex: 1;
+  }
 
   .title {
     font-size: 16px;
@@ -43,3 +50,12 @@
     font-weight: 500;
   }
 }
+
+.drag-handle {
+  align-items: center;
+  border-right: 1px solid #444;
+  cursor: move;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

packages/component-wizard/src/components/SortableList.js

@@ -2,9 +2,6 @@ import React from 'react'
 import { compose } from 'recompose'
 import { findDOMNode } from 'react-dom'
 import { DragSource, DropTarget } from 'react-dnd'
-import classnames from 'classnames'
-import { Icon } from '@pubsweet/ui'
-import classes from './SortableList.local.scss'
 
 const itemSource = {
   beginDrag(props) {
@@ -41,33 +38,34 @@ const itemTarget = {
   },
 }
 
-const DragHandle = () => (
-  <div className={classnames(classes['drag-handle'])}>
-    <Icon>chevron_up</Icon>
-    <Icon>chevron_down</Icon>
-  </div>
-)
-
 const Item = ({
   connectDragPreview,
   connectDragSource,
   connectDropTarget,
   listItem,
+  dragHandle,
   ...rest
 }) =>
-  connectDragPreview(
-    <div style={{ display: 'flex' }}>
-      {connectDragSource(
-        <div className={classnames(classes['drag-handle'])}>
-          <Icon>chevron_up</Icon>
-          <Icon>chevron_down</Icon>
-        </div>,
-      )}
-      {connectDropTarget(
-        <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>,
-      )}
-    </div>,
-  )
+  dragHandle
+    ? connectDragPreview(
+        connectDropTarget(
+          <div style={{ flex: 1 }}>
+            {React.createElement(listItem, {
+              ...rest,
+              dragHandle: connectDragSource(
+                <div style={{ display: 'flex' }}>
+                  {React.createElement(dragHandle)}
+                </div>,
+              ),
+            })}
+          </div>,
+        ),
+      )
+    : connectDropTarget(
+        connectDragSource(
+          <div style={{ flex: 1 }}>{React.createElement(listItem, rest)}</div>,
+        ),
+      )
 
 const DecoratedItem = compose(
   DropTarget('item', itemTarget, (connect, monitor) => ({
@@ -81,10 +79,11 @@ const DecoratedItem = compose(
   })),
 )(Item)
 
-const SortableList = ({ items, moveItem, listItem }) => (
+const SortableList = ({ items, moveItem, listItem, dragHandle }) => (
   <div>
     {items.map((item, i) => (
       <DecoratedItem
+        dragHandle={dragHandle}
         index={i}
         key={item.name || Math.random()}
         listItem={listItem}

packages/component-wizard/src/components/SortableList.local.scss

-.drag-handle {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}

packages/xpub-faraday/app/config/journal/submit-wizard.js

@@ -113,7 +113,6 @@ export default {
           label: 'Conflict of interest details',
           validate: [required, min3Chars],
         },
-        {},
       ],
     },
     {

packages/xpub-faraday/config/default.js

@@ -24,7 +24,7 @@ module.exports = {
   'pubsweet-client': {
     API_ENDPOINT: '/api',
     'login-redirect': '/',
-    'redux-log': true,
+    'redux-log': false,
     theme: process.env.PUBSWEET_THEME,
   },
   'mail-transport': {