New: Bulk remove from Blacklist

Closes #3500

frontend/src/Activity/Blacklist/Blacklist.js

@@ -1,7 +1,14 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { align, icons } from 'Helpers/Props';
+import getRemovedItems from 'Utilities/Object/getRemovedItems';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import { align, icons, kinds } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
@@ -15,6 +22,72 @@ import BlacklistRowConnector from './BlacklistRowConnector';
 
 class Blacklist extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this.state = {
+      allSelected: false,
+      allUnselected: false,
+      lastToggled: null,
+      selectedState: {},
+      isConfirmRemoveModalOpen: false,
+      items: props.items
+    };
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      items
+    } = this.props;
+
+    if (hasDifferentItems(prevProps.items, items)) {
+      this.setState((state) => {
+        return {
+          ...removeOldSelectedState(state, getRemovedItems(prevProps.items, items)),
+          items
+        };
+      });
+
+      return;
+    }
+  }
+
+  //
+  // Control
+
+  getSelectedIds = () => {
+    return getSelectedIds(this.state.selectedState);
+  }
+
+  //
+  // Listeners
+
+  onSelectAllChange = ({ value }) => {
+    this.setState(selectAll(this.state.selectedState, value));
+  }
+
+  onSelectedChange = ({ id, value, shiftKey = false }) => {
+    this.setState((state) => {
+      return toggleSelected(state, this.props.items, id, value, shiftKey);
+    });
+  }
+
+  onRemoveSelectedPress = () => {
+    this.setState({ isConfirmRemoveModalOpen: true });
+  }
+
+  onRemoveSelectedConfirmed = () => {
+    this.props.onRemoveSelected(this.getSelectedIds());
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
+  onConfirmRemoveModalClose = () => {
+    this.setState({ isConfirmRemoveModalOpen: false });
+  }
+
   //
   // Render
 
@@ -26,15 +99,33 @@ class Blacklist extends Component {
       items,
       columns,
       totalRecords,
+      isRemoving,
       isClearingBlacklistExecuting,
       onClearBlacklistPress,
       ...otherProps
     } = this.props;
 
+    const {
+      allSelected,
+      allUnselected,
+      selectedState,
+      isConfirmRemoveModalOpen
+    } = this.state;
+
+    const selectedIds = this.getSelectedIds();
+
     return (
       <PageContent title="Blacklist">
         <PageToolbar>
           <PageToolbarSection>
+            <PageToolbarButton
+              label="Remove Selected"
+              iconName={icons.REMOVE}
+              isDisabled={!selectedIds.length}
+              isSpinning={isRemoving}
+              onPress={this.onRemoveSelectedPress}
+            />
+
             <PageToolbarButton
               label="Clear"
               iconName={icons.CLEAR}
@@ -59,51 +150,67 @@ class Blacklist extends Component {
         <PageContentBody>
           {
             isFetching && !isPopulated &&
-              <LoadingIndicator />
+            <LoadingIndicator />
           }
 
           {
             !isFetching && !!error &&
-              <div>Unable to load blacklist</div>
+            <div>Unable to load blacklist</div>
           }
 
           {
             isPopulated && !error && !items.length &&
-              <div>
-                No history blacklist
-              </div>
+            <div>
+              No history blacklist
+            </div>
           }
 
           {
             isPopulated && !error && !!items.length &&
-              <div>
-                <Table
-                  columns={columns}
-                  {...otherProps}
-                >
-                  <TableBody>
-                    {
-                      items.map((item) => {
-                        return (
-                          <BlacklistRowConnector
-                            key={item.id}
-                            columns={columns}
-                            {...item}
-                          />
-                        );
-                      })
-                    }
-                  </TableBody>
-                </Table>
-
-                <TablePager
-                  totalRecords={totalRecords}
-                  isFetching={isFetching}
-                  {...otherProps}
-                />
-              </div>
+            <div>
+              <Table
+                selectAll={true}
+                allSelected={allSelected}
+                allUnselected={allUnselected}
+                columns={columns}
+                {...otherProps}
+                onSelectAllChange={this.onSelectAllChange}
+              >
+                <TableBody>
+                  {
+                    items.map((item) => {
+                      return (
+                        <BlacklistRowConnector
+                          key={item.id}
+                          isSelected={selectedState[item.id] || false}
+                          columns={columns}
+                          {...item}
+                          onSelectedChange={this.onSelectedChange}
+                        />
+                      );
+                    })
+                  }
+                </TableBody>
+              </Table>
+
+              <TablePager
+                totalRecords={totalRecords}
+                isFetching={isFetching}
+                {...otherProps}
+              />
+            </div>
           }
         </PageContentBody>
+
+        <ConfirmModal
+          isOpen={isConfirmRemoveModalOpen}
+          kind={kinds.DANGER}
+          title="Remove Selected"
+          message={'Are you sure you want to remove the selected items from the blacklist?'}
+          confirmLabel="Remove Selected"
+          onConfirm={this.onRemoveSelectedConfirmed}
+          onCancel={this.onConfirmRemoveModalClose}
+        />
       </PageContent>
     );
   }
@@ -116,7 +223,9 @@ Blacklist.propTypes = {
   items: PropTypes.arrayOf(PropTypes.object).isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
   totalRecords: PropTypes.number,
+  isRemoving: PropTypes.bool.isRequired,
   isClearingBlacklistExecuting: PropTypes.bool.isRequired,
+  onRemoveSelected: PropTypes.func.isRequired,
   onClearBlacklistPress: PropTypes.func.isRequired
 };
 

frontend/src/Activity/Blacklist/BlacklistConnector.js

@@ -89,6 +89,10 @@ class BlacklistConnector extends Component {
     this.props.gotoBlacklistPage({ page });
   }
 
+  onRemoveSelected = (ids) => {
+    this.props.removeBlacklistItems({ ids });
+  }
+
   onSortPress = (sortKey) => {
     this.props.setBlacklistSort({ sortKey });
   }
@@ -124,6 +128,7 @@ class BlacklistConnector extends Component {
         onNextPagePress={this.onNextPagePress}
         onLastPagePress={this.onLastPagePress}
         onPageSelect={this.onPageSelect}
+        onRemoveSelected={this.onRemoveSelected}
         onSortPress={this.onSortPress}
         onTableOptionChange={this.onTableOptionChange}
         onClearBlacklistPress={this.onClearBlacklistPress}
@@ -143,6 +148,7 @@ BlacklistConnector.propTypes = {
   gotoBlacklistNextPage: PropTypes.func.isRequired,
   gotoBlacklistLastPage: PropTypes.func.isRequired,
   gotoBlacklistPage: PropTypes.func.isRequired,
+  removeBlacklistItems: PropTypes.func.isRequired,
   setBlacklistSort: PropTypes.func.isRequired,
   setBlacklistTableOption: PropTypes.func.isRequired,
   clearBlacklist: PropTypes.func.isRequired,

frontend/src/Activity/Blacklist/BlacklistRow.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { icons, kinds } from 'Helpers/Props';
 import IconButton from 'Components/Link/IconButton';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
 import TableRow from 'Components/Table/TableRow';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
@@ -40,6 +41,7 @@ class BlacklistRow extends Component {
 
   render() {
     const {
+      id,
       series,
       sourceTitle,
       language,
@@ -48,12 +50,20 @@ class BlacklistRow extends Component {
       protocol,
       indexer,
       message,
+      isSelected,
       columns,
+      onSelectedChange,
       onRemovePress
     } = this.props;
 
     return (
       <TableRow>
+        <TableSelectCell
+          id={id}
+          isSelected={isSelected}
+          onSelectedChange={onSelectedChange}
+        />
+
         {
           columns.map((column) => {
             const {
@@ -179,7 +189,9 @@ BlacklistRow.propTypes = {
   protocol: PropTypes.string.isRequired,
   indexer: PropTypes.string,
   message: PropTypes.string,
+  isSelected: PropTypes.bool.isRequired,
   columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+  onSelectedChange: PropTypes.func.isRequired,
   onRemovePress: PropTypes.func.isRequired
 };
 

frontend/src/Activity/Blacklist/BlacklistRowConnector.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
-import { removeFromBlacklist } from 'Store/Actions/blacklistActions';
+import { removeBlacklistItem } from 'Store/Actions/blacklistActions';
 import createSeriesSelector from 'Store/Selectors/createSeriesSelector';
 import BlacklistRow from './BlacklistRow';
 
@@ -18,7 +18,7 @@ function createMapStateToProps() {
 function createMapDispatchToProps(dispatch, props) {
   return {
     onRemovePress() {
-      dispatch(removeFromBlacklist({ id: props.id }));
+      dispatch(removeBlacklistItem({ id: props.id }));
     }
   };
 }

frontend/src/Store/Actions/blacklistActions.js

@@ -1,4 +1,6 @@
 import { createAction } from 'redux-actions';
+import { batchActions } from 'redux-batched-actions';
+import createAjaxRequest from 'Utilities/createAjaxRequest';
 import serverSideCollectionHandlers from 'Utilities/serverSideCollectionHandlers';
 import { createThunk, handleThunks } from 'Store/thunks';
 import { sortDirections } from 'Helpers/Props';
@@ -7,6 +9,7 @@ import createSetTableOptionReducer from './Creators/Reducers/createSetTableOptio
 import createHandleActions from './Creators/createHandleActions';
 import createRemoveItemHandler from './Creators/createRemoveItemHandler';
 import createServerSideCollectionHandlers from './Creators/createServerSideCollectionHandlers';
+import { set, updateItem } from './baseActions';
 
 //
 // Variables
@@ -24,6 +27,7 @@ export const defaultState = {
   sortDirection: sortDirections.DESCENDING,
   error: null,
   items: [],
+  isRemoving: false,
 
   columns: [
     {
@@ -87,7 +91,8 @@ export const GOTO_LAST_BLACKLIST_PAGE = 'blacklist/gotoBlacklistLastPage';
 export const GOTO_BLACKLIST_PAGE = 'blacklist/gotoBlacklistPage';
 export const SET_BLACKLIST_SORT = 'blacklist/setBlacklistSort';
 export const SET_BLACKLIST_TABLE_OPTION = 'blacklist/setBlacklistTableOption';
-export const REMOVE_FROM_BLACKLIST = 'blacklist/removeFromBlacklist';
+export const REMOVE_BLACKLIST_ITEM = 'blacklist/removeBlacklistItem';
+export const REMOVE_BLACKLIST_ITEMS = 'blacklist/removeBlacklistItems';
 export const CLEAR_BLACKLIST = 'blacklist/clearBlacklist';
 
 //
@@ -101,7 +106,8 @@ export const gotoBlacklistLastPage = createThunk(GOTO_LAST_BLACKLIST_PAGE);
 export const gotoBlacklistPage = createThunk(GOTO_BLACKLIST_PAGE);
 export const setBlacklistSort = createThunk(SET_BLACKLIST_SORT);
 export const setBlacklistTableOption = createAction(SET_BLACKLIST_TABLE_OPTION);
-export const removeFromBlacklist = createThunk(REMOVE_FROM_BLACKLIST);
+export const removeBlacklistItem = createThunk(REMOVE_BLACKLIST_ITEM);
+export const removeBlacklistItems = createThunk(REMOVE_BLACKLIST_ITEMS);
 export const clearBlacklist = createAction(CLEAR_BLACKLIST);
 
 //
@@ -122,7 +128,53 @@ export const actionHandlers = handleThunks({
       [serverSideCollectionHandlers.SORT]: SET_BLACKLIST_SORT
     }),
 
-  [REMOVE_FROM_BLACKLIST]: createRemoveItemHandler(section, '/blacklist')
+  [REMOVE_BLACKLIST_ITEM]: createRemoveItemHandler(section, '/blacklist'),
+
+  [REMOVE_BLACKLIST_ITEMS]: function(getState, payload, dispatch) {
+    const {
+      ids
+    } = payload;
+
+    dispatch(batchActions([
+      ...ids.map((id) => {
+        return updateItem({
+          section,
+          id,
+          isRemoving: true
+        });
+      }),
+
+      set({ section, isRemoving: true })
+    ]));
+
+    const promise = createAjaxRequest({
+      url: '/blacklist/bulk',
+      method: 'DELETE',
+      dataType: 'json',
+      data: JSON.stringify({ ids })
+    }).request;
+
+    promise.done((data) => {
+      // Don't use batchActions with thunks
+      dispatch(fetchBlacklist());
+
+      dispatch(set({ section, isRemoving: false }));
+    });
+
+    promise.fail((xhr) => {
+      dispatch(batchActions([
+        ...ids.map((id) => {
+          return updateItem({
+            section,
+            id,
+            isRemoving: false
+          });
+        }),
+
+        set({ section, isRemoving: false })
+      ]));
+    });
+  }
 });
 
 //

frontend/src/Store/Actions/queueActions.js

@@ -318,9 +318,9 @@ export const actionHandlers = handleThunks({
     }).request;
 
     promise.done((data) => {
-      dispatch(batchActions([
-        fetchQueue(),
+      dispatch(fetchQueue());
 
+      dispatch(batchActions([
         ...ids.map((id) => {
           return updateItem({
             section: paged,
@@ -404,10 +404,10 @@ export const actionHandlers = handleThunks({
     }).request;
 
     promise.done((data) => {
-      dispatch(batchActions([
-        set({ section: paged, isRemoving: false }),
-        fetchQueue()
-      ]));
+      // Don't use batchActions with thunks
+      dispatch(fetchQueue());
+
+      dispatch(set({ section: paged, isRemoving: false }));
     });
 
     promise.fail((xhr) => {

src/NzbDrone.Core/Blacklisting/BlacklistService.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Collections.Generic;
 using System.Linq;
 using NzbDrone.Common.Extensions;
 using NzbDrone.Core.Datastore;
@@ -16,6 +17,7 @@ namespace NzbDrone.Core.Blacklisting
         bool Blacklisted(int seriesId, ReleaseInfo release);
         PagingSpec<Blacklist> Paged(PagingSpec<Blacklist> pagingSpec);
         void Delete(int id);
+        void Delete(List<int> ids);
     }
     public class BlacklistService : IBlacklistService,
 
@@ -65,6 +67,11 @@ namespace NzbDrone.Core.Blacklisting
             _blacklistRepository.Delete(id);
         }
 
+        public void Delete(List<int> ids)
+        {
+            _blacklistRepository.DeleteMany(ids);
+        }
+
         private bool SameNzb(Blacklist item, ReleaseInfo release)
         {
             if (item.PublishedDate == release.PublishDate)

src/Sonarr.Api.V3/Blacklist/BlacklistBulkResource.cs

@@ -0,0 +1,9 @@
+using System.Collections.Generic;
+
+namespace NzbDrone.Api.V3.Blacklist
+{
+    public class BlacklistBulkResource
+    {
+        public List<int> Ids { get; set; }
+    }
+}

src/Sonarr.Api.V3/Blacklist/BlacklistModule.cs

@@ -1,6 +1,8 @@
-using NzbDrone.Core.Blacklisting;
+using NzbDrone.Api.V3.Blacklist;
+using NzbDrone.Core.Blacklisting;
 using NzbDrone.Core.Datastore;
 using Sonarr.Http;
+using Sonarr.Http.Extensions;
 
 namespace Sonarr.Api.V3.Blacklist
 {
@@ -13,6 +15,8 @@ namespace Sonarr.Api.V3.Blacklist
             _blacklistService = blacklistService;
             GetResourcePaged = GetBlacklist;
             DeleteResource = DeleteBlacklist;
+
+            Delete("/bulk", x => Remove());
         }
 
         private PagingResource<BlacklistResource> GetBlacklist(PagingResource<BlacklistResource> pagingResource)
@@ -26,5 +30,14 @@ namespace Sonarr.Api.V3.Blacklist
         {
             _blacklistService.Delete(id);
         }
+
+        private object Remove()
+        {
+            var resource = Request.Body.FromJson<BlacklistBulkResource>();
+
+            _blacklistService.Delete(resource.Ids);
+
+            return new object();
+        }
     }
 }