Bulk Editing: Add selection state to products list

WooCommerce/Classes/ViewRelated/Products/ProductsViewController.swift

@@ -264,7 +264,23 @@ private extension ProductsViewController {
     }
 
     @objc func startBulkEditing() {
-        // TODO-8517: implement selection state
+        tableView.setEditing(true, animated: true)
+
+        // Disable pull-to-refresh while editing
+        refreshControl.removeFromSuperview()
+
+        configureNavigationBarForEditing()
+        showOrHideToolbar()
+    }
+
+    @objc func finishBulkEditing() {
+        tableView.setEditing(false, animated: true)
+
+        // Enable pull-to-refresh
+        tableView.addSubview(refreshControl)
+
+        configureNavigationBar()
+        showOrHideToolbar()
     }
 }
 
@@ -330,12 +346,8 @@ private extension ProductsViewController {
                                              target: self,
                                              action: #selector(startBulkEditing))
                 button.accessibilityTraits = .button
-                button.accessibilityLabel = NSLocalizedString("Edit products",
-                                                              comment: "Action to start bulk editing of products")
-                button.accessibilityHint = NSLocalizedString(
-                    "Edit status or price for multiple products at once",
-                    comment: "VoiceOver accessibility hint, informing the user the button can be used to bulk edit products"
-                )
+                button.accessibilityLabel = Localization.bulkEditingNavBarButtonTitle
+                button.accessibilityHint = Localization.bulkEditingNavBarButtonHint
 
                 return button
             }()
@@ -345,6 +357,26 @@ private extension ProductsViewController {
         navigationItem.rightBarButtonItems = rightBarButtonItems
     }
 
+    func configureNavigationBarForEditing() {
+        configureNavigationBarTitleForEditing()
+        configureNavigationBarRightButtonItemsForEditing()
+    }
+
+    func configureNavigationBarTitleForEditing() {
+        let selectedProducts = tableView.indexPathsForSelectedRows?.count ?? 0
+        if selectedProducts == 0 {
+            navigationItem.title = Localization.bulkEditingTitle
+        } else {
+            navigationItem.title = String.localizedStringWithFormat(Localization.bulkEditingItemsTitle, String(selectedProducts))
+        }
+    }
+
+    func configureNavigationBarRightButtonItemsForEditing() {
+        navigationItem.rightBarButtonItems = [UIBarButtonItem(barButtonSystemItem: .cancel,
+                                                              target: self,
+                                                              action: #selector(finishBulkEditing))]
+    }
+
     /// Apply Woo styles.
     ///
     func configureMainView() {
@@ -371,6 +403,8 @@ private extension ProductsViewController {
         tableView.tableFooterView = footerSpinnerView
         tableView.separatorStyle = .none
 
+        tableView.allowsMultipleSelectionDuringEditing = true
+
         // Adds the refresh control to table view manually so that the refresh control always appears below the navigation bar title in
         // large or normal size to be consistent with Dashboard and Orders tab with large titles workaround.
         // If we do `tableView.refreshControl = refreshControl`, the refresh control appears in the navigation bar when large title is shown.
@@ -447,6 +481,11 @@ private extension ProductsViewController {
     /// if there is 1 or more products, toolbar will be visible
     ///
     func showOrHideToolbar() {
+        guard !tableView.isEditing else {
+            toolbar.isHidden = true
+            return
+        }
+
         toolbar.isHidden = filters.numberOfActiveFilters == 0 ? isEmpty : false
     }
 }
@@ -627,6 +666,11 @@ extension ProductsViewController: UITableViewDelegate {
     }
 
     func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
+        guard !tableView.isEditing else {
+            configureNavigationBarTitleForEditing()
+            return
+        }
+
         tableView.deselectRow(at: indexPath, animated: true)
 
         ServiceLocator.analytics.track(.productListProductTapped)
@@ -1046,4 +1090,22 @@ private extension ProductsViewController {
         static let headerContainerInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
         static let toolbarButtonInsets = UIEdgeInsets(top: 12, left: 16, bottom: 12, right: 16)
     }
+
+    enum Localization {
+
+        static let bulkEditingNavBarButtonTitle = NSLocalizedString("Edit products", comment: "Action to start bulk editing of products")
+        static let bulkEditingNavBarButtonHint = NSLocalizedString(
+            "Edit status or price for multiple products at once",
+            comment: "VoiceOver accessibility hint, informing the user the button can be used to bulk edit products"
+        )
+
+        static let bulkEditingTitle = NSLocalizedString(
+            "Select items",
+            comment: "Title that appears on top of the Product List screen when bulk editing starts."
+        )
+        static let bulkEditingItemsTitle = NSLocalizedString(
+            "%1$@ selected",
+            comment: "Title that appears on top of the Product List screen during bulk editing. Reads like: 2 selected"
+        )
+    }
 }