New: Bulk Manage Applications, Download Clients

Co-authored-by: Qstick <qstick@gmail.com>

frontend/src/Settings/DownloadClients/DownloadClientSettings.js

@@ -8,6 +8,7 @@ import { icons } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import DownloadClientsConnector from './DownloadClients/DownloadClientsConnector';
+import ManageDownloadClientsModal from './DownloadClients/Manage/ManageDownloadClientsModal';
 import DownloadClientOptionsConnector from './Options/DownloadClientOptionsConnector';
 import RemotePathMappingsConnector from './RemotePathMappings/RemotePathMappingsConnector';
 
@@ -23,7 +24,8 @@ class DownloadClientSettings extends Component {
 
     this.state = {
       isSaving: false,
-      hasPendingChanges: false
+      hasPendingChanges: false,
+      isManageDownloadClientsOpen: false
     };
   }
 
@@ -38,6 +40,14 @@ class DownloadClientSettings extends Component {
     this.setState(payload);
   };
 
+  onManageDownloadClientsPress = () => {
+    this.setState({ isManageDownloadClientsOpen: true });
+  };
+
+  onManageDownloadClientsModalClose = () => {
+    this.setState({ isManageDownloadClientsOpen: false });
+  };
+
   onSavePress = () => {
     if (this._saveCallback) {
       this._saveCallback();
@@ -55,7 +65,8 @@ class DownloadClientSettings extends Component {
 
     const {
       isSaving,
-      hasPendingChanges
+      hasPendingChanges,
+      isManageDownloadClientsOpen
     } = this.state;
 
     return (
@@ -73,6 +84,12 @@ class DownloadClientSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={dispatchTestAllDownloadClients}
               />
+
+              <PageToolbarButton
+                label={translate('ManageClients')}
+                iconName={icons.MANAGE}
+                onPress={this.onManageDownloadClientsPress}
+              />
             </Fragment>
           }
           onSavePress={this.onSavePress}
@@ -87,6 +104,11 @@ class DownloadClientSettings extends Component {
           />
 
           <RemotePathMappingsConnector />
+
+          <ManageDownloadClientsModal
+            isOpen={isManageDownloadClientsOpen}
+            onModalClose={this.onManageDownloadClientsModalClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModal.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageDownloadClientsEditModalContent from './ManageDownloadClientsEditModalContent';
+
+interface ManageDownloadClientsEditModalProps {
+  isOpen: boolean;
+  downloadClientIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageDownloadClientsEditModal(
+  props: ManageDownloadClientsEditModalProps
+) {
+  const { isOpen, downloadClientIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageDownloadClientsEditModalContent
+        downloadClientIds={downloadClientIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageDownloadClientsEditModal;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModalContent.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'modalFooter': string;
+  'selected': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Edit/ManageDownloadClientsEditModalContent.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageDownloadClientsEditModalContent.css';
+
+interface SavePayload {
+  enable?: boolean;
+  removeCompletedDownloads?: boolean;
+  removeFailedDownloads?: boolean;
+  priority?: number;
+}
+
+interface ManageDownloadClientsEditModalContentProps {
+  downloadClientIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const enableOptions = [
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'enabled', value: translate('Enabled') },
+  { key: 'disabled', value: translate('Disabled') },
+];
+
+function ManageDownloadClientsEditModalContent(
+  props: ManageDownloadClientsEditModalContentProps
+) {
+  const { downloadClientIds, onSavePress, onModalClose } = props;
+
+  const [enable, setEnable] = useState(NO_CHANGE);
+  const [removeCompletedDownloads, setRemoveCompletedDownloads] =
+    useState(NO_CHANGE);
+  const [removeFailedDownloads, setRemoveFailedDownloads] = useState(NO_CHANGE);
+  const [priority, setPriority] = useState<null | string | number>(null);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enable !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enable = enable === 'enabled';
+    }
+
+    if (removeCompletedDownloads !== NO_CHANGE) {
+      hasChanges = true;
+      payload.removeCompletedDownloads = removeCompletedDownloads === 'enabled';
+    }
+
+    if (removeFailedDownloads !== NO_CHANGE) {
+      hasChanges = true;
+      payload.removeFailedDownloads = removeFailedDownloads === 'enabled';
+    }
+
+    if (priority !== null) {
+      hasChanges = true;
+      payload.priority = priority as number;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [
+    enable,
+    priority,
+    removeCompletedDownloads,
+    removeFailedDownloads,
+    onSavePress,
+    onModalClose,
+  ]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'enable':
+          setEnable(value);
+          break;
+        case 'priority':
+          setPriority(value);
+          break;
+        case 'removeCompletedDownloads':
+          setRemoveCompletedDownloads(value);
+          break;
+        case 'removeFailedDownloads':
+          setRemoveFailedDownloads(value);
+          break;
+        default:
+          console.warn(
+            `EditDownloadClientsModalContent Unknown Input: '${name}'`
+          );
+      }
+    },
+    []
+  );
+
+  const selectedCount = downloadClientIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedDownloadClients')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('Enabled')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enable"
+            value={enable}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('Priority')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="priority"
+            value={priority}
+            min={1}
+            max={50}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('RemoveCompletedDownloads')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="removeCompletedDownloads"
+            value={removeCompletedDownloads}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('RemoveFailedDownloads')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="removeFailedDownloads"
+            value={removeFailedDownloads}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('CountDownloadClientsSelected', [selectedCount])}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageDownloadClientsEditModalContent;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageDownloadClientsModalContent from './ManageDownloadClientsModalContent';
+
+interface ManageDownloadClientsModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageDownloadClientsModal(props: ManageDownloadClientsModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageDownloadClientsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageDownloadClientsModal;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteButton': string;
+  'leftButtons': string;
+  'rightButtons': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalContent.tsx

@@ -0,0 +1,300 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { DownloadClientAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteDownloadClients,
+  bulkEditDownloadClients,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageDownloadClientsEditModal from './Edit/ManageDownloadClientsEditModal';
+import ManageDownloadClientsModalRow from './ManageDownloadClientsModalRow';
+import TagsModal from './Tags/TagsModal';
+import styles from './ManageDownloadClientsModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageDownloadClientsModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: translate('Implementation'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enable',
+    label: translate('Enabled'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'priority',
+    label: translate('Priority'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'removeCompletedDownloads',
+    label: translate('RemoveCompleted'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'removeFailedDownloads',
+    label: translate('RemoveFailed'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: 'Tags',
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageDownloadClientsModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageDownloadClientsModalContent(
+  props: ManageDownloadClientsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: DownloadClientAppState = useSelector(
+    createClientSideCollectionSelector('settings.downloadClients')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteDownloadClients({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditDownloadClients({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditDownloadClients({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(
+    error,
+    'Unable to load download clients.'
+  );
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('ManageDownloadClients')}</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoDownloadClientsFound')}</Alert>
+        )}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageDownloadClientsModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            {translate('Delete')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            {translate('Edit')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            Set Tags
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+
+      <ManageDownloadClientsEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        downloadClientIds={selectedIds}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title={translate('DeleteSelectedDownloadClients')}
+        message={translate('DeleteSelectedDownloadClientsMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageDownloadClientsModalContent;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.css

@@ -0,0 +1,11 @@
+.name,
+.enable,
+.tags,
+.priority,
+.removeCompletedDownloads,
+.removeFailedDownloads,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'enable': string;
+  'implementation': string;
+  'name': string;
+  'priority': string;
+  'removeCompletedDownloads': string;
+  'removeFailedDownloads': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback } from 'react';
+import Label from 'Components/Label';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import Column from 'Components/Table/Column';
+import TableRow from 'Components/Table/TableRow';
+import TagListConnector from 'Components/TagListConnector';
+import { kinds } from 'Helpers/Props';
+import { SelectStateInputProps } from 'typings/props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageDownloadClientsModalRow.css';
+
+interface ManageDownloadClientsModalRowProps {
+  id: number;
+  name: string;
+  enable: boolean;
+  priority: number;
+  removeCompletedDownloads: boolean;
+  removeFailedDownloads: boolean;
+  implementation: string;
+  tags: number[];
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageDownloadClientsModalRow(
+  props: ManageDownloadClientsModalRowProps
+) {
+  const {
+    id,
+    isSelected,
+    name,
+    enable,
+    priority,
+    removeCompletedDownloads,
+    removeFailedDownloads,
+    implementation,
+    tags,
+    onSelectedChange,
+  } = props;
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.implementation}>
+        {implementation}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enable}>
+        <Label kind={enable ? kinds.SUCCESS : kinds.DISABLED} outline={!enable}>
+          {enable ? translate('Yes') : translate('No')}
+        </Label>
+      </TableRowCell>
+
+      <TableRowCell className={styles.priority}>{priority}</TableRowCell>
+
+      <TableRowCell className={styles.removeCompletedDownloads}>
+        {removeCompletedDownloads ? translate('Yes') : translate('No')}
+      </TableRowCell>
+
+      <TableRowCell className={styles.removeFailedDownloads}>
+        {removeFailedDownloads ? translate('Yes') : translate('No')}
+      </TableRowCell>
+
+      <TableRowCell className={styles.tags}>
+        <TagListConnector tags={tags} />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageDownloadClientsModalRow;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TagsModalContent from './TagsModalContent';
+
+interface TagsModalProps {
+  isOpen: boolean;
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModal(props: TagsModalProps) {
+  const { isOpen, onModalClose, ...otherProps } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <TagsModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default TagsModal;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.css

@@ -0,0 +1,12 @@
+.renameIcon {
+  margin-left: 5px;
+}
+
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.result {
+  padding-top: 4px;
+}

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'renameIcon': string;
+  'result': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/DownloadClients/DownloadClients/Manage/Tags/TagsModalContent.tsx

@@ -0,0 +1,185 @@
+import { uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { DownloadClientAppState } from 'App/State/SettingsAppState';
+import { Tag } from 'App/State/TagsAppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Label from 'Components/Label';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import DownloadClient from 'typings/DownloadClient';
+import translate from 'Utilities/String/translate';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { ids, onModalClose, onApplyTagsPress } = props;
+
+  const allDownloadClients: DownloadClientAppState = useSelector(
+    (state: AppState) => state.settings.downloadClients
+  );
+  const tagList: Tag[] = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const downloadClientsTags = useMemo(() => {
+    const tags = ids.reduce((acc: number[], id) => {
+      const s = allDownloadClients.items.find(
+        (s: DownloadClient) => s.id === id
+      );
+
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
+  }, [ids, allDownloadClients]);
+
+  const onTagsChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }: { value: string }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>{translate('Tags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('ApplyTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                translate('ApplyTagsHelpTextHowToApplyDownloadClients'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('Result')}</FormLabel>
+
+            <div className={styles.result}>
+              {downloadClientsTags.map((id) => {
+                const tag = tagList.find((t) => t.id === id);
+
+                if (!tag) {
+                  return null;
+                }
+
+                const removeTag =
+                  (applyTags === 'remove' && tags.indexOf(id) > -1) ||
+                  (applyTags === 'replace' && tags.indexOf(id) === -1);
+
+                return (
+                  <Label
+                    key={tag.id}
+                    title={
+                      removeTag
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
+                    }
+                    kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag.label}
+                  </Label>
+                );
+              })}
+
+              {(applyTags === 'add' || applyTags === 'replace') &&
+                tags.map((id) => {
+                  const tag = tagList.find((t) => t.id === id);
+
+                  if (!tag) {
+                    return null;
+                  }
+
+                  if (downloadClientsTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={translate('AddingTag')}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          {translate('Apply')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;

frontend/src/Settings/ImportLists/ImportListSettings.js

@@ -9,6 +9,7 @@ import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import ImportListsExclusionsConnector from './ImportListExclusions/ImportListExclusionsConnector';
 import ImportListsConnector from './ImportLists/ImportListsConnector';
+import ManageImportListsModal from './ImportLists/Manage/ManageImportListsModal';
 
 class ImportListSettings extends Component {
 
@@ -19,7 +20,8 @@ class ImportListSettings extends Component {
     super(props, context);
 
     this.state = {
-      hasPendingChanges: false
+      hasPendingChanges: false,
+      isManageImportListsOpen: false
     };
   }
 
@@ -30,6 +32,14 @@ class ImportListSettings extends Component {
     this._listOptions = ref;
   };
 
+  onManageImportListsPress = () => {
+    this.setState({ isManageImportListsOpen: true });
+  };
+
+  onManageImportListsModalClose = () => {
+    this.setState({ isManageImportListsOpen: false });
+  };
+
   onHasPendingChange = (hasPendingChanges) => {
     this.setState({
       hasPendingChanges
@@ -51,7 +61,8 @@ class ImportListSettings extends Component {
 
     const {
       isSaving,
-      hasPendingChanges
+      hasPendingChanges,
+      isManageImportListsOpen
     } = this.state;
 
     return (
@@ -69,6 +80,12 @@ class ImportListSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={dispatchTestAllImportLists}
               />
+
+              <PageToolbarButton
+                label={translate('ManageLists')}
+                iconName={icons.MANAGE}
+                onPress={this.onManageImportListsPress}
+              />
             </Fragment>
           }
           onSavePress={this.onSavePress}
@@ -77,6 +94,10 @@ class ImportListSettings extends Component {
         <PageContentBody>
           <ImportListsConnector />
           <ImportListsExclusionsConnector />
+          <ManageImportListsModal
+            isOpen={isManageImportListsOpen}
+            onModalClose={this.onManageImportListsModalClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModal.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageImportListsEditModalContent from './ManageImportListsEditModalContent';
+
+interface ManageImportListsEditModalProps {
+  isOpen: boolean;
+  importListIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageImportListsEditModal(props: ManageImportListsEditModalProps) {
+  const { isOpen, importListIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageImportListsEditModalContent
+        importListIds={importListIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageImportListsEditModal;

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'modalFooter': string;
+  'selected': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/Manage/Edit/ManageImportListsEditModalContent.tsx

@@ -0,0 +1,184 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageImportListsEditModalContent.css';
+
+interface SavePayload {
+  enableAutomaticAdd?: boolean;
+  qualityProfileId?: number;
+  metadataProfileId?: number;
+  rootFolderPath?: string;
+}
+
+interface ManageImportListsEditModalContentProps {
+  importListIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const autoAddOptions = [
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'enabled', value: translate('Enabled') },
+  { key: 'disabled', value: translate('Disabled') },
+];
+
+function ManageImportListsEditModalContent(
+  props: ManageImportListsEditModalContentProps
+) {
+  const { importListIds, onSavePress, onModalClose } = props;
+
+  const [enableAutomaticAdd, setEnableAutomaticAdd] = useState(NO_CHANGE);
+  const [qualityProfileId, setQualityProfileId] = useState<string | number>(
+    NO_CHANGE
+  );
+  const [metadataProfileId, setMetadataProfileId] = useState<string | number>(
+    NO_CHANGE
+  );
+  const [rootFolderPath, setRootFolderPath] = useState(NO_CHANGE);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enableAutomaticAdd !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableAutomaticAdd = enableAutomaticAdd === 'enabled';
+    }
+
+    if (qualityProfileId !== NO_CHANGE) {
+      hasChanges = true;
+      payload.qualityProfileId = qualityProfileId as number;
+    }
+
+    if (metadataProfileId !== NO_CHANGE) {
+      hasChanges = true;
+      payload.metadataProfileId = metadataProfileId as number;
+    }
+
+    if (rootFolderPath !== NO_CHANGE) {
+      hasChanges = true;
+      payload.rootFolderPath = rootFolderPath;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [
+    enableAutomaticAdd,
+    qualityProfileId,
+    metadataProfileId,
+    rootFolderPath,
+    onSavePress,
+    onModalClose,
+  ]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'enableAutomaticAdd':
+          setEnableAutomaticAdd(value);
+          break;
+        case 'qualityProfileId':
+          setQualityProfileId(value);
+          break;
+        case 'metadataProfileId':
+          setMetadataProfileId(value);
+          break;
+        case 'rootFolderPath':
+          setRootFolderPath(value);
+          break;
+        default:
+          console.warn(`EditImportListModalContent Unknown Input: '${name}'`);
+      }
+    },
+    []
+  );
+
+  const selectedCount = importListIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedImportLists')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('AutomaticAdd')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableAutomaticAdd"
+            value={enableAutomaticAdd}
+            values={autoAddOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('QualityProfile')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.QUALITY_PROFILE_SELECT}
+            name="qualityProfileId"
+            value={qualityProfileId}
+            includeNoChange={true}
+            includeNoChangeDisabled={false}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('MetadataProfile')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.METADATA_PROFILE_SELECT}
+            name="metadataProfileId"
+            value={metadataProfileId}
+            includeNoChange={true}
+            includeNoChangeDisabled={false}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('RootFolder')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.ROOT_FOLDER_SELECT}
+            name="rootFolderPath"
+            value={rootFolderPath}
+            includeNoChange={true}
+            includeNoChangeDisabled={false}
+            selectedValueOptions={{ includeFreeSpace: false }}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('CountImportListsSelected', [selectedCount])}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageImportListsEditModalContent;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModal.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import ManageImportListsModalContent from './ManageImportListsModalContent';
+
+interface ManageImportListsModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageImportListsModal(props: ManageImportListsModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal size={sizes.EXTRA_LARGE} isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageImportListsModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageImportListsModal;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteButton': string;
+  'leftButtons': string;
+  'rightButtons': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalContent.tsx

@@ -0,0 +1,297 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { ImportListAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteImportLists,
+  bulkEditImportLists,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageImportListsEditModal from './Edit/ManageImportListsEditModal';
+import ManageImportListsModalRow from './ManageImportListsModalRow';
+import TagsModal from './Tags/TagsModal';
+import styles from './ManageImportListsModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageImportListsModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: translate('Implementation'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'qualityProfileId',
+    label: translate('QualityProfile'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'metadataProfileId',
+    label: translate('MetadataProfile'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'rootFolderPath',
+    label: translate('RootFolder'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableAutomaticAdd',
+    label: translate('AutoAdd'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: translate('Tags'),
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageImportListsModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageImportListsModalContent(
+  props: ManageImportListsModalContentProps
+) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: ImportListAppState = useSelector(
+    createClientSideCollectionSelector('settings.importLists')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteImportLists({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditImportLists({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditImportLists({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(error, 'Unable to load import lists.');
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('ManageImportLists')}</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoImportListsFound')}</Alert>
+        )}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageImportListsModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            {translate('Delete')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            {translate('Edit')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            {translate('SetTags')}
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+
+      <ManageImportListsEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        importListIds={selectedIds}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title={translate('DeleteSelectedImportLists')}
+        message={translate('DeleteSelectedImportListsMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageImportListsModalContent;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.css

@@ -0,0 +1,11 @@
+.name,
+.tags,
+.enableAutomaticAdd,
+.qualityProfileId,
+.metadataProfileId,
+.rootFolderPath,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'enableAutomaticAdd': string;
+  'implementation': string;
+  'metadataProfileId': string;
+  'name': string;
+  'qualityProfileId': string;
+  'rootFolderPath': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx

@@ -0,0 +1,95 @@
+import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import Column from 'Components/Table/Column';
+import TableRow from 'Components/Table/TableRow';
+import TagListConnector from 'Components/TagListConnector';
+import { createMetadataProfileSelectorForHook } from 'Store/Selectors/createMetadataProfileSelector';
+import { createQualityProfileSelectorForHook } from 'Store/Selectors/createQualityProfileSelector';
+import { SelectStateInputProps } from 'typings/props';
+import styles from './ManageImportListsModalRow.css';
+
+interface ManageImportListsModalRowProps {
+  id: number;
+  name: string;
+  rootFolderPath: string;
+  qualityProfileId: number;
+  metadataProfileId: number;
+  implementation: string;
+  tags: number[];
+  enableAutomaticAdd: boolean;
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageImportListsModalRow(props: ManageImportListsModalRowProps) {
+  const {
+    id,
+    isSelected,
+    name,
+    rootFolderPath,
+    qualityProfileId,
+    metadataProfileId,
+    implementation,
+    enableAutomaticAdd,
+    tags,
+    onSelectedChange,
+  } = props;
+
+  const qualityProfile = useSelector(
+    createQualityProfileSelectorForHook(qualityProfileId)
+  );
+
+  const metadataProfile = useSelector(
+    createMetadataProfileSelectorForHook(metadataProfileId)
+  );
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.implementation}>
+        {implementation}
+      </TableRowCell>
+
+      <TableRowCell className={styles.qualityProfileId}>
+        {qualityProfile?.name ?? 'None'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.metadataProfileId}>
+        {metadataProfile?.name ?? 'None'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.rootFolderPath}>
+        {rootFolderPath}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableAutomaticAdd}>
+        {enableAutomaticAdd ? 'Yes' : 'No'}
+      </TableRowCell>
+
+      <TableRowCell className={styles.tags}>
+        <TagListConnector tags={tags} />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageImportListsModalRow;

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TagsModalContent from './TagsModalContent';
+
+interface TagsModalProps {
+  isOpen: boolean;
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModal(props: TagsModalProps) {
+  const { isOpen, onModalClose, ...otherProps } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <TagsModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default TagsModal;

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.css

@@ -0,0 +1,12 @@
+.renameIcon {
+  margin-left: 5px;
+}
+
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.result {
+  padding-top: 4px;
+}

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'renameIcon': string;
+  'result': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/ImportLists/ImportLists/Manage/Tags/TagsModalContent.tsx

@@ -0,0 +1,183 @@
+import { uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { ImportListAppState } from 'App/State/SettingsAppState';
+import { Tag } from 'App/State/TagsAppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Label from 'Components/Label';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import ImportList from 'typings/ImportList';
+import translate from 'Utilities/String/translate';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { ids, onModalClose, onApplyTagsPress } = props;
+
+  const allImportLists: ImportListAppState = useSelector(
+    (state: AppState) => state.settings.importLists
+  );
+  const tagList: Tag[] = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const importListsTags = useMemo(() => {
+    const tags = ids.reduce((acc: number[], id) => {
+      const s = allImportLists.items.find((s: ImportList) => s.id === id);
+
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
+  }, [ids, allImportLists]);
+
+  const onTagsChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }: { value: string }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>{translate('Tags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('ApplyTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                translate('ApplyTagsHelpTextHowToApplyImportLists'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('Result')}</FormLabel>
+
+            <div className={styles.result}>
+              {importListsTags.map((id) => {
+                const tag = tagList.find((t) => t.id === id);
+
+                if (!tag) {
+                  return null;
+                }
+
+                const removeTag =
+                  (applyTags === 'remove' && tags.indexOf(id) > -1) ||
+                  (applyTags === 'replace' && tags.indexOf(id) === -1);
+
+                return (
+                  <Label
+                    key={tag.id}
+                    title={
+                      removeTag
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
+                    }
+                    kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag.label}
+                  </Label>
+                );
+              })}
+
+              {(applyTags === 'add' || applyTags === 'replace') &&
+                tags.map((id) => {
+                  const tag = tagList.find((t) => t.id === id);
+
+                  if (!tag) {
+                    return null;
+                  }
+
+                  if (importListsTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={translate('AddingTag')}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          {translate('Apply')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;

frontend/src/Settings/Indexers/IndexerSettings.js

@@ -8,6 +8,7 @@ import { icons } from 'Helpers/Props';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import translate from 'Utilities/String/translate';
 import IndexersConnector from './Indexers/IndexersConnector';
+import ManageIndexersModal from './Indexers/Manage/ManageIndexersModal';
 import IndexerOptionsConnector from './Options/IndexerOptionsConnector';
 
 class IndexerSettings extends Component {
@@ -22,7 +23,8 @@ class IndexerSettings extends Component {
 
     this.state = {
       isSaving: false,
-      hasPendingChanges: false
+      hasPendingChanges: false,
+      isManageIndexersOpen: false
     };
   }
 
@@ -37,6 +39,14 @@ class IndexerSettings extends Component {
     this.setState(payload);
   };
 
+  onManageIndexersPress = () => {
+    this.setState({ isManageIndexersOpen: true });
+  };
+
+  onManageIndexersModalClose = () => {
+    this.setState({ isManageIndexersOpen: false });
+  };
+
   onSavePress = () => {
     if (this._saveCallback) {
       this._saveCallback();
@@ -54,7 +64,8 @@ class IndexerSettings extends Component {
 
     const {
       isSaving,
-      hasPendingChanges
+      hasPendingChanges,
+      isManageIndexersOpen
     } = this.state;
 
     return (
@@ -72,6 +83,12 @@ class IndexerSettings extends Component {
                 isSpinning={isTestingAll}
                 onPress={dispatchTestAllIndexers}
               />
+
+              <PageToolbarButton
+                label={translate('ManageIndexers')}
+                iconName={icons.MANAGE}
+                onPress={this.onManageIndexersPress}
+              />
             </Fragment>
           }
           onSavePress={this.onSavePress}
@@ -84,6 +101,11 @@ class IndexerSettings extends Component {
             onChildMounted={this.onChildMounted}
             onChildStateChange={this.onChildStateChange}
           />
+
+          <ManageIndexersModal
+            isOpen={isManageIndexersOpen}
+            onModalClose={this.onManageIndexersModalClose}
+          />
         </PageContentBody>
       </PageContent>
     );

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModal.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageIndexersEditModalContent from './ManageIndexersEditModalContent';
+
+interface ManageIndexersEditModalProps {
+  isOpen: boolean;
+  indexerIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+function ManageIndexersEditModal(props: ManageIndexersEditModalProps) {
+  const { isOpen, indexerIds, onSavePress, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageIndexersEditModalContent
+        indexerIds={indexerIds}
+        onSavePress={onSavePress}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default ManageIndexersEditModal;

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.css

@@ -0,0 +1,16 @@
+.modalFooter {
+  composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+  justify-content: space-between;
+}
+
+.selected {
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+  .modalFooter {
+    flex-direction: column;
+    gap: 10px;
+  }
+}

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.css.d.ts

@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'modalFooter': string;
+  'selected': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/Indexers/Indexers/Manage/Edit/ManageIndexersEditModalContent.tsx

@@ -0,0 +1,178 @@
+import React, { useCallback, useState } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageIndexersEditModalContent.css';
+
+interface SavePayload {
+  enableRss?: boolean;
+  enableAutomaticSearch?: boolean;
+  enableInteractiveSearch?: boolean;
+  priority?: number;
+}
+
+interface ManageIndexersEditModalContentProps {
+  indexerIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const enableOptions = [
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'enabled', value: translate('Enabled') },
+  { key: 'disabled', value: translate('Disabled') },
+];
+
+function ManageIndexersEditModalContent(
+  props: ManageIndexersEditModalContentProps
+) {
+  const { indexerIds, onSavePress, onModalClose } = props;
+
+  const [enableRss, setEnableRss] = useState(NO_CHANGE);
+  const [enableAutomaticSearch, setEnableAutomaticSearch] = useState(NO_CHANGE);
+  const [enableInteractiveSearch, setEnableInteractiveSearch] =
+    useState(NO_CHANGE);
+  const [priority, setPriority] = useState<null | string | number>(null);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enableRss !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableRss = enableRss === 'enabled';
+    }
+
+    if (enableAutomaticSearch !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableAutomaticSearch = enableAutomaticSearch === 'enabled';
+    }
+
+    if (enableInteractiveSearch !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enableInteractiveSearch = enableInteractiveSearch === 'enabled';
+    }
+
+    if (priority !== null) {
+      hasChanges = true;
+      payload.priority = priority as number;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [
+    enableRss,
+    enableAutomaticSearch,
+    enableInteractiveSearch,
+    priority,
+    onSavePress,
+    onModalClose,
+  ]);
+
+  const onInputChange = useCallback(
+    ({ name, value }: { name: string; value: string }) => {
+      switch (name) {
+        case 'enableRss':
+          setEnableRss(value);
+          break;
+        case 'enableAutomaticSearch':
+          setEnableAutomaticSearch(value);
+          break;
+        case 'enableInteractiveSearch':
+          setEnableInteractiveSearch(value);
+          break;
+        case 'priority':
+          setPriority(value);
+          break;
+        default:
+          console.warn(`EditIndexersModalContent Unknown Input: '${name}'`);
+      }
+    },
+    []
+  );
+
+  const selectedCount = indexerIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('EditSelectedIndexers')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('EnableRSS')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableRss"
+            value={enableRss}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('EnableAutomaticSearch')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableAutomaticSearch"
+            value={enableAutomaticSearch}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('EnableInteractiveSearch')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enableInteractiveSearch"
+            value={enableInteractiveSearch}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('Priority')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.NUMBER}
+            name="priority"
+            value={priority}
+            min={1}
+            max={50}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('CountIndexersSelected', [selectedCount])}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={save}>{translate('ApplyChanges')}</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default ManageIndexersEditModalContent;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModal.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import ManageIndexersModalContent from './ManageIndexersModalContent';
+
+interface ManageIndexersModalProps {
+  isOpen: boolean;
+  onModalClose(): void;
+}
+
+function ManageIndexersModal(props: ManageIndexersModalProps) {
+  const { isOpen, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <ManageIndexersModalContent onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default ManageIndexersModal;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.css

@@ -0,0 +1,16 @@
+.leftButtons,
+.rightButtons {
+  display: flex;
+  flex: 1 0 50%;
+  flex-wrap: wrap;
+}
+
+.rightButtons {
+  justify-content: flex-end;
+}
+
+.deleteButton {
+  composes: button from '~Components/Link/Button.css';
+
+  margin-right: 10px;
+}

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'deleteButton': string;
+  'leftButtons': string;
+  'rightButtons': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalContent.tsx

@@ -0,0 +1,295 @@
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { IndexerAppState } from 'App/State/SettingsAppState';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import useSelectState from 'Helpers/Hooks/useSelectState';
+import { kinds } from 'Helpers/Props';
+import {
+  bulkDeleteIndexers,
+  bulkEditIndexers,
+} from 'Store/Actions/settingsActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import { SelectStateInputProps } from 'typings/props';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import ManageIndexersEditModal from './Edit/ManageIndexersEditModal';
+import ManageIndexersModalRow from './ManageIndexersModalRow';
+import TagsModal from './Tags/TagsModal';
+import styles from './ManageIndexersModalContent.css';
+
+// TODO: This feels janky to do, but not sure of a better way currently
+type OnSelectedChangeCallback = React.ComponentProps<
+  typeof ManageIndexersModalRow
+>['onSelectedChange'];
+
+const COLUMNS = [
+  {
+    name: 'name',
+    label: translate('Name'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'implementation',
+    label: translate('Implementation'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableRss',
+    label: translate('EnableRSS'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableAutomaticSearch',
+    label: translate('EnableAutomaticSearch'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'enableInteractiveSearch',
+    label: translate('EnableInteractiveSearch'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'priority',
+    label: translate('Priority'),
+    isSortable: true,
+    isVisible: true,
+  },
+  {
+    name: 'tags',
+    label: translate('Tags'),
+    isSortable: true,
+    isVisible: true,
+  },
+];
+
+interface ManageIndexersModalContentProps {
+  onModalClose(): void;
+}
+
+function ManageIndexersModalContent(props: ManageIndexersModalContentProps) {
+  const { onModalClose } = props;
+
+  const {
+    isFetching,
+    isPopulated,
+    isDeleting,
+    isSaving,
+    error,
+    items,
+  }: IndexerAppState = useSelector(
+    createClientSideCollectionSelector('settings.indexers')
+  );
+  const dispatch = useDispatch();
+
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, setSelectState] = useSelectState();
+
+  const { allSelected, allUnselected, selectedState } = selectState;
+
+  const selectedIds: number[] = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = selectedIds.length;
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, [setIsDeleteModalOpen]);
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onConfirmDelete = useCallback(() => {
+    dispatch(bulkDeleteIndexers({ ids: selectedIds }));
+    setIsDeleteModalOpen(false);
+  }, [selectedIds, dispatch]);
+
+  const onSavePress = useCallback(
+    (payload: object) => {
+      setIsEditModalOpen(false);
+
+      dispatch(
+        bulkEditIndexers({
+          ids: selectedIds,
+          ...payload,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags: number[], applyTags: string) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        bulkEditIndexers({
+          ids: selectedIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [selectedIds, dispatch]
+  );
+
+  const onSelectAllChange = useCallback(
+    ({ value }: SelectStateInputProps) => {
+      setSelectState({ type: value ? 'selectAll' : 'unselectAll', items });
+    },
+    [items, setSelectState]
+  );
+
+  const onSelectedChange = useCallback<OnSelectedChangeCallback>(
+    ({ id, value, shiftKey = false }) => {
+      setSelectState({
+        type: 'toggleSelected',
+        items,
+        id,
+        isSelected: value,
+        shiftKey,
+      });
+    },
+    [items, setSelectState]
+  );
+
+  const errorMessage = getErrorMessage(error, 'Unable to load indexers.');
+  const anySelected = selectedCount > 0;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('ManageIndexers')}</ModalHeader>
+      <ModalBody>
+        {isFetching ? <LoadingIndicator /> : null}
+
+        {error ? <div>{errorMessage}</div> : null}
+
+        {isPopulated && !error && !items.length && (
+          <Alert kind={kinds.INFO}>{translate('NoIndexersFound')}</Alert>
+        )}
+
+        {isPopulated && !!items.length && !isFetching && !isFetching ? (
+          <Table
+            columns={COLUMNS}
+            horizontalScroll={true}
+            selectAll={true}
+            allSelected={allSelected}
+            allUnselected={allUnselected}
+            onSelectAllChange={onSelectAllChange}
+          >
+            <TableBody>
+              {items.map((item) => {
+                return (
+                  <ManageIndexersModalRow
+                    key={item.id}
+                    isSelected={selectedState[item.id]}
+                    {...item}
+                    columns={COLUMNS}
+                    onSelectedChange={onSelectedChange}
+                  />
+                );
+              })}
+            </TableBody>
+          </Table>
+        ) : null}
+      </ModalBody>
+
+      <ModalFooter>
+        <div className={styles.leftButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected}
+            onPress={onDeletePress}
+          >
+            {translate('Delete')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            {translate('Edit')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            {translate('SetTags')}
+          </SpinnerButton>
+        </div>
+
+        <Button onPress={onModalClose}>{translate('Close')}</Button>
+      </ModalFooter>
+
+      <ManageIndexersEditModal
+        isOpen={isEditModalOpen}
+        onModalClose={onEditModalClose}
+        onSavePress={onSavePress}
+        indexerIds={selectedIds}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        ids={selectedIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <ConfirmModal
+        isOpen={isDeleteModalOpen}
+        kind={kinds.DANGER}
+        title={translate('DeleteSelectedIndexers')}
+        message={translate('DeleteSelectedIndexersMessageText', [
+          selectedIds.length,
+        ])}
+        confirmLabel={translate('Delete')}
+        onConfirm={onConfirmDelete}
+        onCancel={onDeleteModalClose}
+      />
+    </ModalContent>
+  );
+}
+
+export default ManageIndexersModalContent;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.css

@@ -0,0 +1,11 @@
+.name,
+.tags,
+.enableRss,
+.enableAutomaticSearch,
+.enableInteractiveSearch,
+.priority,
+.implementation {
+  composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+  word-break: break-all;
+}

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.css.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'enableAutomaticSearch': string;
+  'enableInteractiveSearch': string;
+  'enableRss': string;
+  'implementation': string;
+  'name': string;
+  'priority': string;
+  'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx

@@ -0,0 +1,100 @@
+import React, { useCallback } from 'react';
+import Label from 'Components/Label';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
+import Column from 'Components/Table/Column';
+import TableRow from 'Components/Table/TableRow';
+import TagListConnector from 'Components/TagListConnector';
+import { kinds } from 'Helpers/Props';
+import { SelectStateInputProps } from 'typings/props';
+import translate from 'Utilities/String/translate';
+import styles from './ManageIndexersModalRow.css';
+
+interface ManageIndexersModalRowProps {
+  id: number;
+  name: string;
+  enableRss: boolean;
+  enableAutomaticSearch: boolean;
+  enableInteractiveSearch: boolean;
+  priority: number;
+  implementation: string;
+  tags: number[];
+  columns: Column[];
+  isSelected?: boolean;
+  onSelectedChange(result: SelectStateInputProps): void;
+}
+
+function ManageIndexersModalRow(props: ManageIndexersModalRowProps) {
+  const {
+    id,
+    isSelected,
+    name,
+    enableRss,
+    enableAutomaticSearch,
+    enableInteractiveSearch,
+    priority,
+    implementation,
+    tags,
+    onSelectedChange,
+  } = props;
+
+  const onSelectedChangeWrapper = useCallback(
+    (result: SelectStateInputProps) => {
+      onSelectedChange({
+        ...result,
+      });
+    },
+    [onSelectedChange]
+  );
+
+  return (
+    <TableRow>
+      <TableSelectCell
+        id={id}
+        isSelected={isSelected}
+        onSelectedChange={onSelectedChangeWrapper}
+      />
+
+      <TableRowCell className={styles.name}>{name}</TableRowCell>
+
+      <TableRowCell className={styles.implementation}>
+        {implementation}
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableRss}>
+        <Label
+          kind={enableRss ? kinds.SUCCESS : kinds.DISABLED}
+          outline={!enableRss}
+        >
+          {enableRss ? translate('Yes') : translate('No')}
+        </Label>
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableAutomaticSearch}>
+        <Label
+          kind={enableAutomaticSearch ? kinds.SUCCESS : kinds.DISABLED}
+          outline={!enableAutomaticSearch}
+        >
+          {enableAutomaticSearch ? translate('Yes') : translate('No')}
+        </Label>
+      </TableRowCell>
+
+      <TableRowCell className={styles.enableInteractiveSearch}>
+        <Label
+          kind={enableInteractiveSearch ? kinds.SUCCESS : kinds.DISABLED}
+          outline={!enableInteractiveSearch}
+        >
+          {enableInteractiveSearch ? translate('Yes') : translate('No')}
+        </Label>
+      </TableRowCell>
+
+      <TableRowCell className={styles.priority}>{priority}</TableRowCell>
+
+      <TableRowCell className={styles.tags}>
+        <TagListConnector tags={tags} />
+      </TableRowCell>
+    </TableRow>
+  );
+}
+
+export default ManageIndexersModalRow;

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModal.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TagsModalContent from './TagsModalContent';
+
+interface TagsModalProps {
+  isOpen: boolean;
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModal(props: TagsModalProps) {
+  const { isOpen, onModalClose, ...otherProps } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <TagsModalContent {...otherProps} onModalClose={onModalClose} />
+    </Modal>
+  );
+}
+
+export default TagsModal;

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.css

@@ -0,0 +1,12 @@
+.renameIcon {
+  margin-left: 5px;
+}
+
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.result {
+  padding-top: 4px;
+}

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.css.d.ts

@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'message': string;
+  'renameIcon': string;
+  'result': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

frontend/src/Settings/Indexers/Indexers/Manage/Tags/TagsModalContent.tsx

@@ -0,0 +1,183 @@
+import { uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import { IndexerAppState } from 'App/State/SettingsAppState';
+import { Tag } from 'App/State/TagsAppState';
+import Form from 'Components/Form/Form';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormLabel from 'Components/Form/FormLabel';
+import Label from 'Components/Label';
+import Button from 'Components/Link/Button';
+import ModalBody from 'Components/Modal/ModalBody';
+import ModalContent from 'Components/Modal/ModalContent';
+import ModalFooter from 'Components/Modal/ModalFooter';
+import ModalHeader from 'Components/Modal/ModalHeader';
+import { inputTypes, kinds, sizes } from 'Helpers/Props';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import Indexer from 'typings/Indexer';
+import translate from 'Utilities/String/translate';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  ids: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { ids, onModalClose, onApplyTagsPress } = props;
+
+  const allIndexers: IndexerAppState = useSelector(
+    (state: AppState) => state.settings.indexers
+  );
+  const tagList: Tag[] = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const indexersTags = useMemo(() => {
+    const tags = ids.reduce((acc: number[], id) => {
+      const s = allIndexers.items.find((s: Indexer) => s.id === id);
+
+      if (s) {
+        acc.push(...s.tags);
+      }
+
+      return acc;
+    }, []);
+
+    return uniq(tags);
+  }, [ids, allIndexers]);
+
+  const onTagsChange = useCallback(
+    ({ value }: { value: number[] }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }: { value: string }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: translate('Add') },
+    { key: 'remove', value: translate('Remove') },
+    { key: 'replace', value: translate('Replace') },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('Tags')}</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>{translate('Tags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('ApplyTags')}</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                translate('ApplyTagsHelpTextHowToApplyIndexers'),
+                translate('ApplyTagsHelpTextAdd'),
+                translate('ApplyTagsHelpTextRemove'),
+                translate('ApplyTagsHelpTextReplace'),
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>{translate('Result')}</FormLabel>
+
+            <div className={styles.result}>
+              {indexersTags.map((id) => {
+                const tag = tagList.find((t) => t.id === id);
+
+                if (!tag) {
+                  return null;
+                }
+
+                const removeTag =
+                  (applyTags === 'remove' && tags.indexOf(id) > -1) ||
+                  (applyTags === 'replace' && tags.indexOf(id) === -1);
+
+                return (
+                  <Label
+                    key={tag.id}
+                    title={
+                      removeTag
+                        ? translate('RemovingTag')
+                        : translate('ExistingTag')
+                    }
+                    kind={removeTag ? kinds.INVERSE : kinds.INFO}
+                    size={sizes.LARGE}
+                  >
+                    {tag.label}
+                  </Label>
+                );
+              })}
+
+              {(applyTags === 'add' || applyTags === 'replace') &&
+                tags.map((id) => {
+                  const tag = tagList.find((t) => t.id === id);
+
+                  if (!tag) {
+                    return null;
+                  }
+
+                  if (indexersTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={translate('AddingTag')}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          {translate('Apply')}
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;