Merge pull request #1418 from creative-commoners/pulls/2/select-all

NEW Select all and clear all functionality

client/lang/src/en.json

@@ -11,6 +11,7 @@
     "AssetAdmin.BULK_ACTIONS_ARCHIVE_ITEMS_CONFIRM": "You're about to archive %s file(s) which may be used in your site's content. Carefully check the file usage on the files before archiving the file(s).",
     "AssetAdmin.BULK_ACTIONS_ARCHIVE_SUCCESS_02": "%s folders/files were successfully archived.",
     "AssetAdmin.BULK_ACTIONS_ARCHIVE_WARNING": "Ensure files are removed from content areas prior to archiving them, otherwise they will appear as broken links.",
+    "AssetAdmin.BULK_ACTIONS_CLEAR_SELECTION": "Clear selection",
     "AssetAdmin.BULK_ACTIONS_CONFIRM": "Are you sure you want to %s these files?",
     "AssetAdmin.BULK_ACTIONS_DELETE": "Delete",
     "AssetAdmin.BULK_ACTIONS_DELETE_CONFIRM": "Are you sure you want to delete these files?",
@@ -26,6 +27,8 @@
     "AssetAdmin.BULK_ACTIONS_DELETE_SUCCESS_02": "%s folders/files were successfully deleted.",
     "AssetAdmin.BULK_ACTIONS_DELETE_WARNING": "Ensure files are removed from content areas prior to deleting them, otherwise they will appear as broken links.",
     "AssetAdmin.BULK_ACTIONS_PLACEHOLDER": "Select an action...",
+    "AssetAdmin.BULK_ACTIONS_SELECTED": "%s selected",
+    "AssetAdmin.BULK_ACTIONS_SELECT_ALL": "Select all",
     "AssetAdmin.CANCEL": "Cancel",
     "AssetAdmin.CONFIRMDELETE": "Are you sure you want to delete this record?",
     "AssetAdmin.CONFIRM_FILE_ARCHIVE": "Confirm archive",

client/src/components/BulkActions/BulkActions.js

@@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
 class BulkActions extends Component {
   constructor(props) {
     super(props);
-
     this.handleChangeValue = this.handleChangeValue.bind(this);
     this.renderChild = this.renderChild.bind(this);
   }
@@ -106,13 +105,30 @@ class BulkActions extends Component {
     }
 
     const { ActionMenu, showCount } = this.props;
-
-    const count = this.props.items.length;
+    const selectAll = i18n._t('AssetAdmin.BULK_ACTIONS_SELECT_ALL', 'Select all');
+    const selected = i18n.sprintf(
+      i18n._t('AssetAdmin.BULK_ACTIONS_SELECTED', '%s selected'),
+      this.props.items.length
+    );
+    const title = i18n._t('AssetAdmin.BULK_ACTIONS_CLEAR_SELECTION', 'Clear selection');
 
     return (
       <div className="bulk-actions fieldholder-small">
         {showCount &&
-          <div className="bulk-actions-counter">{count}</div>
+          <>
+            <Button
+              className="bulk-actions-counter font-icon-cross-mark"
+              onClick={this.props.onClearSelection}
+              title={title}
+            >
+              {selected}
+            </Button>
+            <div className="bulk-actions-select-all">
+              <Button onClick={this.props.onSelectAll}>
+                {selectAll}
+              </Button>
+            </div>
+          </>
         }
         {children.slice(0, 2)}
         {children.length > 2 && ActionMenu
@@ -144,6 +160,8 @@ BulkActions.propTypes = {
   })),
   ActionMenu: PropTypes.elementType,
   showCount: PropTypes.bool,
+  onClearSelection: PropTypes.func.isRequired,
+  onSelectAll: PropTypes.func.isRequired,
 };
 
 BulkActions.defaultProps = {

client/src/components/BulkActions/BulkActions.scss

@@ -39,15 +39,27 @@ $bulk-actions-width: 300px;
 
   .bulk-actions-counter {
     vertical-align: middle;
-    min-width: 28px;
-    padding: 6px;
+    padding: 5px 12px 5px 8px;
     margin-right: 8px;
     line-height: $line-height-base;
     color: $white;
     text-align: center;
     background-color: $component-active-bg;
     border-radius: $btn-border-radius;
     font-weight: bold;
+
+    &.btn-secondary:hover,
+    &.btn-secondary:focus,
+    &.btn-secondary:focus-visible {
+      background-color: $brand-secondary;
+      border-color: $brand-secondary;
+      color: $white;
+    }
+  }
+
+  .bulk-actions-select-all button {
+    color: $component-active-bg;
+    font-weight: bold;
   }
 
   .bulk-actions__action.ss-ui-button {

client/src/containers/Gallery/Gallery.js

@@ -36,7 +36,7 @@ const ACTION_TYPES = {
   UNPUBLISH: 'unpublish',
   INSERT: 'insert',
   ADMIN: 'admin',
-  SELECT: 'select'
+  SELECT: 'select',
 };
 
 class Gallery extends Component {
@@ -68,6 +68,7 @@ class Gallery extends Component {
     this.handleBeginSelection = this.handleBeginSelection.bind(this);
     this.handleGroupSelect = this.handleGroupSelect.bind(this);
     this.handleClearSelection = this.handleClearSelection.bind(this);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
     this.toggleSelectConcat = this.toggleSelectConcat.bind(this);
     this.getSelectableFiles = this.getSelectableFiles.bind(this);
   }
@@ -539,6 +540,14 @@ class Gallery extends Component {
     this.props.actions.gallery.deselectFiles();
   }
 
+  /**
+   * Selects all visible files
+   */
+  handleSelectAll() {
+    const ids = this.props.files.map(file => file.id);
+    this.handleGroupSelect(ids, new Event('na'));
+  }
+
   /**
    * Pick if the selection started from inside the pagination. If it started from inside the
    * pagination, cancel it to prevent inteference with the normal pagination.
@@ -756,6 +765,8 @@ class Gallery extends Component {
           key={selected.length > 0}
           container={this.gallery}
           showCount={maxFilesSelect !== 1}
+          onClearSelection={this.handleClearSelection}
+          onSelectAll={this.handleSelectAll}
         />
       );
     }

tests/behat/features/manage-files.feature

@@ -69,7 +69,7 @@ Feature: Manage files
   Scenario: I can edit a folder
     When I check the folder named "folder1" in the gallery
     Then I should see an ".bulk-actions__action[value='edit']" element
-      And the ".bulk-actions-counter" element should contain "1"
+      And the ".bulk-actions-counter" element should contain "1 selected"
     When I press the "Edit" button
       And I wait for 1 second
     Then I should see the "Form_fileEditForm" form
@@ -106,14 +106,14 @@ Feature: Manage files
     When I click on the file named "folder1" in the gallery
       And I check the file named "file1" in the gallery
     Then I should see an ".bulk-actions__action[value='edit']" element
-      And the ".bulk-actions-counter" element should contain "1"
+      And the ".bulk-actions-counter" element should contain "1 selected"
     When I check the file named "file2" in the gallery
     Then the ".bulk-actions__action[value='delete']" element should contain "Delete"
-      And the ".bulk-actions-counter" element should contain "2"
+      And the ".bulk-actions-counter" element should contain "2 selected"
       And I should not see an ".bulk-actions__action[value='edit']" element
     When I attach the file "testfile.jpg" to dropzone "gallery-container"
       And I check the file named "testfile" in the gallery
-    Then the ".bulk-actions-counter" element should contain "3"
+    Then the ".bulk-actions-counter" element should contain "3 selected"
       And I press the "Delete" button
     Then I should see a modal titled "Confirm deletion"
       And I press the Delete button inside the modal
@@ -129,11 +129,11 @@ Feature: Manage files
       And I check the file named "file1" in the gallery
       And I check the file named "file2" in the gallery
     Then I should see an ".bulk-actions__action[value='move']" element
-      And the ".bulk-actions-counter" element should contain "2"
+      And the ".bulk-actions-counter" element should contain "2 selected"
       And the ".bulk-actions__action[value='move']" element should contain "Move"
     When I attach the file "testfile.jpg" to dropzone "gallery-container"
       And I check the file named "testfile" in the gallery
-    Then the ".bulk-actions-counter" element should contain "3"
+    Then the ".bulk-actions-counter" element should contain "3 selected"
       And I press the "Move" button
     Then I should see a modal titled "Move 3 item(s) to..."
       And I should see the "Form_moveForm" form
@@ -148,6 +148,24 @@ Feature: Manage files
       And I should see the file named "file2" in the gallery
       And I should see the file named "testfile" in the gallery
 
+  Scenario: I can select all and deselect all files with bulk action buttons
+    Given a "image" "assets/folder1/file2.jpg" was created "2012-01-02 12:00:00"
+    When I click on the file named "folder1" in the gallery
+    Then I should not see a ".bulk-actions" element
+      And I should not see a "bulk-actions-counter" element
+      And I should not see a "bulk-actions-select-all" element
+    When I check the file named "file1" in the gallery
+    Then I should see a ".bulk-actions" element
+      And I should see a ".bulk-actions-counter" element
+      And the ".bulk-actions-counter" element should contain "1 selected"
+      And I should see a ".bulk-actions-select-all" element
+    When I click on the ".bulk-actions-select-all" element
+      Then the ".bulk-actions-counter" element should contain "3 selected"
+    When I click on the ".bulk-actions-counter" element
+      Then I should not see a ".bulk-actions" element
+      And I should not see a "bulk-actions-counter" element
+      And I should not see a "bulk-actions-select-all" element
+
   Scenario: I can publish and unpublish multiple files
     Given a "image" "assets/folder1/file2.jpg" was created "2012-01-02 12:00:00"
       And a "image" "assets/folder1/testfile.jpg"