Merge pull request #666 from dadi/feature/refactor-bulk-actions

Allow for better bulk action configuration

config/config.test.json

@@ -1,7 +1,6 @@
 {
   "app": {
-    "name": "DADI Publish",
-    "publisher": "Publisher Name"
+    "name": "DADI Publish"
   },
   "server": {
     "host": "0.0.0.0",

frontend/actions/documentsActions.js

@@ -240,4 +240,4 @@ export function uploadMedia ({
     },
     method: 'POST'
   }).then(response => response.json())
-}
+}

frontend/components/BulkActionSelector/BulkActionSelector.jsx

@@ -6,6 +6,7 @@ import proptypes from 'proptypes'
 import Style from 'lib/Style'
 import styles from './BulkActionSelector.css'
 
+import Button from 'components/Button/Button'
 import ButtonWithPrompt from 'components/ButtonWithPrompt/ButtonWithPrompt'
 import DropdownNative from 'components/DropdownNative/DropdownNative'
 
@@ -72,32 +73,50 @@ export default class BulkActionSelector extends Component {
     const containerStyle = new Style(styles, 'container')
       .addIf('container-empty', selection.length === 0)
       .addResolved(className)
-    let placeholder = 'With selected'
+    const placeholder = 'Bulk actions'
 
-    if (selection.length > 0) {
-      placeholder += ` (${selection.length})`
-    }
+    // Generate new actions object for the dropdown options
+    let modifiedActions = {}
+    Object.keys(actions).forEach(key => {
+      modifiedActions[key] = actions[key].label
+    })
+
+    // If the option comes with a confirmation message, display
+    // ButtonWithPrompt, otherwise a standard Button is used.
+    const needsButtonWithPrompt = selected !== ACTION_PLACEHOLDER &&
+      actions[selected].ctaMessage
 
     return (
       <div class={containerStyle.getClasses()}>
         <DropdownNative
           className={styles.dropdown}
           onChange={this.onChange.bind(this)}
-          options={actions}
+          options={modifiedActions}
           placeholderLabel={placeholder}
           placeholderValue={ACTION_PLACEHOLDER}
           textSize="small"
           value={selected}
         />
 
-        <ButtonWithPrompt
-          accent="data"
-          disabled={(selected === ACTION_PLACEHOLDER) || !selection.length}
-          onClick={this.onApply.bind(this)}
-          promptCallToAction={`Yes, delete ${selection.length > 1 ? 'them' : 'it'}.`}
-          promptMessage={`Are you sure you want to delete the selected ${selection.length > 1 ? 'documents' : 'document'}?`}
-          size="small"
-        >Apply</ButtonWithPrompt>
+        {needsButtonWithPrompt && (
+          <ButtonWithPrompt
+            accent="data"
+            disabled={(selected === ACTION_PLACEHOLDER) || actions[selected].disabled}
+            onClick={this.onApply.bind(this)}
+            promptCallToAction={actions[selected].ctaMessage}
+            promptMessage={actions[selected].confirmationMessage}
+            size="small"
+          >Apply</ButtonWithPrompt>          
+        )}
+
+        {!needsButtonWithPrompt && (
+          <Button
+            accent="data"
+            disabled={selected === ACTION_PLACEHOLDER}
+            onClick={this.onApply.bind(this)}
+            size="small"
+          >Apply</Button>
+        )}
       </div>
     )
   }

frontend/views/DocumentListView/DocumentListView.jsx

@@ -63,10 +63,15 @@ class DocumentListView extends Component {
   }
 
   handleBulkActionApply(actionType) {
-    const {state} = this.props  
+    const {state} = this.props
 
-    if (actionType === BULK_ACTIONS.DELETE) {
-      this.handleDocumentDelete(state.documents.selected)
+    switch (actionType) {
+      case BULK_ACTIONS.DELETE:
+        this.handleDocumentDelete(state.documents.selected)
+        break
+
+      default:
+        return
     }
   }
 
@@ -152,6 +157,18 @@ class DocumentListView extends Component {
       })
     ).concat(Constants.DEFAULT_FIELDS)
 
+    const actions = {
+      [BULK_ACTIONS.DELETE]: {
+        confirmationMessage: 
+          `Are you sure you want to delete the selected ${selectedDocuments.length > 1 ?
+            'documents' :
+            'document'}?`,
+        ctaMessage: `Yes, delete ${selectedDocuments.length > 1 ? 'them' : 'it'}.`,
+        disabled: !selectedDocuments.length,
+        label: `Delete ${selectedDocuments.length ? ' (' + selectedDocuments.length + ')' : ''}`
+      }
+    }
+
     return (
       <Page>
         <Header currentCollection={currentCollection}>
@@ -197,9 +214,7 @@ class DocumentListView extends Component {
           })}
         >
           <BulkActionSelector
-            actions={{
-              [BULK_ACTIONS.DELETE]: 'Delete'
-            }}
+            actions={actions}
             onChange={this.handleBulkActionApply.bind(this)}
             selection={selectedDocuments}
           />

frontend/views/MediaListView/MediaListView.jsx

@@ -127,7 +127,19 @@ class MediaListView extends Component {
     const {
       list: documents,
       selected: selectedDocuments
-    } = state.documents    
+    } = state.documents
+
+    const actions = {
+      [BULK_ACTIONS.DELETE]: {
+        confirmationMessage:
+          `Are you sure you want to delete the selected ${selectedDocuments.length > 1 ?
+            'documents' :
+            'document'}?`,
+        ctaMessage: `Yes, delete ${selectedDocuments.length > 1 ? 'them' : 'it'}.`,
+        disabled: !selectedDocuments.length,
+        label: `Delete ${selectedDocuments.length ? ' (' + selectedDocuments.length + ')' : ''}`
+      }
+    }
 
     return (
       <Page>
@@ -160,9 +172,7 @@ class MediaListView extends Component {
           })}
         >
           <BulkActionSelector
-            actions={{
-              [BULK_ACTIONS.DELETE]: 'Delete'
-            }}
+            actions={actions}
             className={styles['bulk-action-select']}
             onChange={this.handleBulkActionApply.bind(this)}
             selection={selectedDocuments}

test/functional/pages/Article.js

@@ -255,7 +255,7 @@ module.exports = {
     let total = await I.grabTextFrom(this.locators.totalArticles)
     // console.log(total)
     I.click(this.locators.checkArticle)
-    I.selectOption(this.locators.selectDelete, 'Delete')
+    I.selectOption(this.locators.selectDelete, 'Delete (1)')
     I.click(this.locators.applyButton)
     I.waitForText('Are you sure you want to delete the selected document?')
     I.click(this.locators.deleteButton)

test/functional/pages/Media.js

@@ -103,7 +103,7 @@ module.exports = {
     // console.log(total)
     await I.see('Stone.jpeg')
     I.click(this.locators.checkImage)
-    I.selectOption(this.locators.selectDelete, 'Delete')
+    I.selectOption(this.locators.selectDelete, 'Delete (1)')
     I.click(this.locators.applyButton)
     I.waitForText('Are you sure you want to delete the selected document?')
     I.click(this.locators.deleteButton)