Refactor Indexer index to use react-window

(cherry picked from commit d022679b7dcbce3cec98e6a1fd0879e3c0d92523)

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModal.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import DeleteIndexerModalContent from './DeleteIndexerModalContent';
+
+interface DeleteIndexerModalProps {
+  isOpen: boolean;
+  indexerIds: number[];
+  onModalClose(): void;
+}
+
+function DeleteIndexerModal(props: DeleteIndexerModalProps) {
+  const { isOpen, indexerIds, onModalClose } = props;
+
+  return (
+    <Modal isOpen={isOpen} onModalClose={onModalClose}>
+      <DeleteIndexerModalContent
+        indexerIds={indexerIds}
+        onModalClose={onModalClose}
+      />
+    </Modal>
+  );
+}
+
+export default DeleteIndexerModal;

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModalContent.css

@@ -0,0 +1,13 @@
+.message {
+  margin-top: 20px;
+  margin-bottom: 10px;
+}
+
+.pathContainer {
+  margin-left: 5px;
+}
+
+.path {
+  margin-left: 5px;
+  color: var(--dangerColor);
+}

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModalContent.css.d.ts

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

frontend/src/Indexer/Index/Select/Delete/DeleteIndexerModalContent.tsx

@@ -0,0 +1,74 @@
+import { orderBy } from 'lodash';
+import React, { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+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 { kinds } from 'Helpers/Props';
+import { bulkDeleteIndexers } from 'Store/Actions/indexerIndexActions';
+import createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
+import styles from './DeleteIndexerModalContent.css';
+
+interface DeleteIndexerModalContentProps {
+  indexerIds: number[];
+  onModalClose(): void;
+}
+
+function DeleteIndexerModalContent(props: DeleteIndexerModalContentProps) {
+  const { indexerIds, onModalClose } = props;
+
+  const allIndexer = useSelector(createAllIndexersSelector());
+  const dispatch = useDispatch();
+
+  const indexers = useMemo(() => {
+    const indexers = indexerIds.map((id) => {
+      return allIndexer.find((s) => s.id === id);
+    });
+
+    return orderBy(indexers, ['sortTitle']);
+  }, [indexerIds, allIndexer]);
+
+  const onDeleteIndexerConfirmed = useCallback(() => {
+    dispatch(
+      bulkDeleteIndexers({
+        indexerIds,
+      })
+    );
+
+    onModalClose();
+  }, [indexerIds, dispatch, onModalClose]);
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Delete Selected Indexer</ModalHeader>
+
+      <ModalBody>
+        <div className={styles.message}>
+          {`Are you sure you want to delete ${indexers.length} selected indexers?`}
+        </div>
+
+        <ul>
+          {indexers.map((s) => {
+            return (
+              <li key={s.name}>
+                <span>{s.name}</span>
+              </li>
+            );
+          })}
+        </ul>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Cancel</Button>
+
+        <Button kind={kinds.DANGER} onPress={onDeleteIndexerConfirmed}>
+          Delete
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default DeleteIndexerModalContent;

frontend/src/Indexer/Index/Select/Edit/EditIndexerModal.tsx

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

frontend/src/Indexer/Index/Select/Edit/EditIndexerModalContent.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/Indexer/Index/Select/Edit/EditIndexerModalContent.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/Indexer/Index/Select/Edit/EditIndexerModalContent.tsx

@@ -0,0 +1,130 @@
+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 './EditIndexerModalContent.css';
+
+interface SavePayload {
+  enable?: boolean;
+  appProfileId?: number;
+}
+
+interface EditIndexerModalContentProps {
+  indexerIds: number[];
+  onSavePress(payload: object): void;
+  onModalClose(): void;
+}
+
+const NO_CHANGE = 'noChange';
+
+const enableOptions = [
+  { key: NO_CHANGE, value: translate('NoChange'), disabled: true },
+  { key: 'true', value: translate('Enabled') },
+  { key: 'false', value: translate('Disabled') },
+];
+
+function EditIndexerModalContent(props: EditIndexerModalContentProps) {
+  const { indexerIds, onSavePress, onModalClose } = props;
+
+  const [enable, setEnable] = useState(NO_CHANGE);
+  const [appProfileId, setAppProfileId] = useState<string | number>(NO_CHANGE);
+
+  const save = useCallback(() => {
+    let hasChanges = false;
+    const payload: SavePayload = {};
+
+    if (enable !== NO_CHANGE) {
+      hasChanges = true;
+      payload.enable = enable === 'true';
+    }
+
+    if (appProfileId !== NO_CHANGE) {
+      hasChanges = true;
+      payload.appProfileId = appProfileId as number;
+    }
+
+    if (hasChanges) {
+      onSavePress(payload);
+    }
+
+    onModalClose();
+  }, [enable, appProfileId, onSavePress, onModalClose]);
+
+  const onInputChange = useCallback(
+    ({ name, value }) => {
+      switch (name) {
+        case 'enable':
+          setEnable(value);
+          break;
+        case 'appProfileId':
+          setAppProfileId(value);
+          break;
+        default:
+          console.warn('EditIndexerModalContent Unknown Input');
+      }
+    },
+    [setEnable]
+  );
+
+  const onSavePressWrapper = useCallback(() => {
+    save();
+  }, [save]);
+
+  const selectedCount = indexerIds.length;
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>{translate('Edit Selected Indexer')}</ModalHeader>
+
+      <ModalBody>
+        <FormGroup>
+          <FormLabel>{translate('Enable')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.SELECT}
+            name="enable"
+            value={enable}
+            values={enableOptions}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+
+        <FormGroup>
+          <FormLabel>{translate('SyncProfile')}</FormLabel>
+
+          <FormInputGroup
+            type={inputTypes.APP_PROFILE_SELECT}
+            name="appProfileId"
+            value={appProfileId}
+            includeNoChange={true}
+            includeNoChangeDisabled={false}
+            onChange={onInputChange}
+          />
+        </FormGroup>
+      </ModalBody>
+
+      <ModalFooter className={styles.modalFooter}>
+        <div className={styles.selected}>
+          {translate('{0} indexers selected', selectedCount.toString())}
+        </div>
+
+        <div>
+          <Button onPress={onModalClose}>{translate('Cancel')}</Button>
+
+          <Button onPress={onSavePressWrapper}>
+            {translate('Apply Changes')}
+          </Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default EditIndexerModalContent;

frontend/src/Indexer/Index/Select/IndexerIndexSelectAllButton.tsx

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import { icons } from 'Helpers/Props';
+
+interface IndexerIndexSelectAllButtonProps {
+  label: string;
+  isSelectMode: boolean;
+  overflowComponent: React.FunctionComponent;
+}
+
+function IndexerIndexSelectAllButton(props: IndexerIndexSelectAllButtonProps) {
+  const { isSelectMode } = props;
+  const [selectState, selectDispatch] = useSelect();
+  const { allSelected, allUnselected } = selectState;
+
+  let icon = icons.SQUARE_MINUS;
+
+  if (allSelected) {
+    icon = icons.CHECK_SQUARE;
+  } else if (allUnselected) {
+    icon = icons.SQUARE;
+  }
+
+  const onPress = useCallback(() => {
+    selectDispatch({
+      type: allSelected
+        ? SelectActionType.UnselectAll
+        : SelectActionType.SelectAll,
+    });
+  }, [allSelected, selectDispatch]);
+
+  return isSelectMode ? (
+    <PageToolbarButton
+      label={allSelected ? 'Unselect All' : 'Select All'}
+      iconName={icon}
+      onPress={onPress}
+    />
+  ) : null;
+}
+
+export default IndexerIndexSelectAllButton;

frontend/src/Indexer/Index/Select/IndexerIndexSelectAllMenuItem.tsx

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import PageToolbarOverflowMenuItem from 'Components/Page/Toolbar/PageToolbarOverflowMenuItem';
+import { icons } from 'Helpers/Props';
+
+interface IndexerIndexSelectAllMenuItemProps {
+  label: string;
+  isSelectMode: boolean;
+}
+
+function IndexerIndexSelectAllMenuItem(
+  props: IndexerIndexSelectAllMenuItemProps
+) {
+  const { isSelectMode } = props;
+  const [selectState, selectDispatch] = useSelect();
+  const { allSelected, allUnselected } = selectState;
+
+  let iconName = icons.SQUARE_MINUS;
+
+  if (allSelected) {
+    iconName = icons.CHECK_SQUARE;
+  } else if (allUnselected) {
+    iconName = icons.SQUARE;
+  }
+
+  const onPressWrapper = useCallback(() => {
+    selectDispatch({
+      type: allSelected
+        ? SelectActionType.UnselectAll
+        : SelectActionType.SelectAll,
+    });
+  }, [allSelected, selectDispatch]);
+
+  return isSelectMode ? (
+    <PageToolbarOverflowMenuItem
+      label={allSelected ? 'Unselect All' : 'Select All'}
+      iconName={iconName}
+      onPress={onPressWrapper}
+    />
+  ) : null;
+}
+
+export default IndexerIndexSelectAllMenuItem;

frontend/src/Indexer/Index/Select/IndexerIndexSelectFooter.css

@@ -0,0 +1,72 @@
+.footer {
+  composes: contentFooter from '~Components/Page/PageContentFooter.css';
+
+  align-items: center;
+}
+
+.buttons {
+  display: flex;
+}
+
+.actionButtons,
+.deleteButtons {
+  display: flex;
+  gap: 10px;
+}
+
+.deleteButtons {
+  margin-left: 50px;
+}
+
+.selected {
+  display: flex;
+  justify-content: flex-end;
+  flex-grow: 1;
+  font-weight: bold;
+}
+
+@media only screen and (max-width: $breakpointMedium) {
+  .buttons {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .selected {
+    justify-content: center;
+    margin-bottom: 20px;
+    width: 100%;
+    order: -1;
+  }
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .footer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .buttons {
+    flex-direction: column;
+    margin-top: 20px;
+    gap: 20px;
+  }
+
+  .actionButtons {
+    flex-wrap: wrap;
+  }
+
+  .actionButtons,
+  .deleteButtons {
+    display: flex;
+    justify-content: center;
+  }
+
+  .deleteButtons {
+    margin-left: 0;
+  }
+
+  .selected {
+    justify-content: center;
+    order: -1;
+  }
+}

frontend/src/Indexer/Index/Select/IndexerIndexSelectFooter.css.d.ts

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

frontend/src/Indexer/Index/Select/IndexerIndexSelectFooter.tsx

@@ -0,0 +1,180 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { createSelector } from 'reselect';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+import PageContentFooter from 'Components/Page/PageContentFooter';
+import { kinds } from 'Helpers/Props';
+import { saveIndexerEditor } from 'Store/Actions/indexerIndexActions';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import DeleteIndexerModal from './Delete/DeleteIndexerModal';
+import EditIndexerModal from './Edit/EditIndexerModal';
+import TagsModal from './Tags/TagsModal';
+import styles from './IndexerIndexSelectFooter.css';
+
+const seriesEditorSelector = createSelector(
+  (state) => state.indexers,
+  (indexers) => {
+    const { isSaving, isDeleting, deleteError } = indexers;
+
+    return {
+      isSaving,
+      isDeleting,
+      deleteError,
+    };
+  }
+);
+
+function IndexerIndexSelectFooter() {
+  const { isSaving, isDeleting, deleteError } =
+    useSelector(seriesEditorSelector);
+
+  const dispatch = useDispatch();
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isTagsModalOpen, setIsTagsModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+  const [isSavingIndexer, setIsSavingIndexer] = useState(false);
+  const [isSavingTags, setIsSavingTags] = useState(false);
+
+  const [selectState, selectDispatch] = useSelect();
+  const { selectedState } = selectState;
+
+  const indexerIds = useMemo(() => {
+    return getSelectedIds(selectedState);
+  }, [selectedState]);
+
+  const selectedCount = indexerIds.length;
+
+  const onEditPress = useCallback(() => {
+    setIsEditModalOpen(true);
+  }, [setIsEditModalOpen]);
+
+  const onEditModalClose = useCallback(() => {
+    setIsEditModalOpen(false);
+  }, [setIsEditModalOpen]);
+
+  const onSavePress = useCallback(
+    (payload) => {
+      setIsSavingIndexer(true);
+      setIsEditModalOpen(false);
+
+      dispatch(
+        saveIndexerEditor({
+          ...payload,
+          indexerIds,
+        })
+      );
+    },
+    [indexerIds, dispatch]
+  );
+
+  const onTagsPress = useCallback(() => {
+    setIsTagsModalOpen(true);
+  }, [setIsTagsModalOpen]);
+
+  const onTagsModalClose = useCallback(() => {
+    setIsTagsModalOpen(false);
+  }, [setIsTagsModalOpen]);
+
+  const onApplyTagsPress = useCallback(
+    (tags, applyTags) => {
+      setIsSavingTags(true);
+      setIsTagsModalOpen(false);
+
+      dispatch(
+        saveIndexerEditor({
+          indexerIds,
+          tags,
+          applyTags,
+        })
+      );
+    },
+    [indexerIds, dispatch]
+  );
+
+  const onDeletePress = useCallback(() => {
+    setIsDeleteModalOpen(true);
+  }, [setIsDeleteModalOpen]);
+
+  const onDeleteModalClose = useCallback(() => {
+    setIsDeleteModalOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (!isSaving) {
+      setIsSavingIndexer(false);
+      setIsSavingTags(false);
+    }
+  }, [isSaving]);
+
+  useEffect(() => {
+    if (!isDeleting && !deleteError) {
+      selectDispatch({ type: SelectActionType.UnselectAll });
+    }
+  }, [isDeleting, deleteError, selectDispatch]);
+
+  const anySelected = selectedCount > 0;
+
+  return (
+    <PageContentFooter className={styles.footer}>
+      <div className={styles.buttons}>
+        <div className={styles.actionButtons}>
+          <SpinnerButton
+            isSpinning={isSaving && isSavingIndexer}
+            isDisabled={!anySelected}
+            onPress={onEditPress}
+          >
+            {translate('Edit')}
+          </SpinnerButton>
+
+          <SpinnerButton
+            isSpinning={isSaving && isSavingTags}
+            isDisabled={!anySelected}
+            onPress={onTagsPress}
+          >
+            {translate('Set Tags')}
+          </SpinnerButton>
+        </div>
+
+        <div className={styles.deleteButtons}>
+          <SpinnerButton
+            kind={kinds.DANGER}
+            isSpinning={isDeleting}
+            isDisabled={!anySelected || isDeleting}
+            onPress={onDeletePress}
+          >
+            {translate('Delete')}
+          </SpinnerButton>
+        </div>
+      </div>
+
+      <div className={styles.selected}>
+        {translate('{0} indexers selected', selectedCount.toString())}
+      </div>
+
+      <EditIndexerModal
+        isOpen={isEditModalOpen}
+        indexerIds={indexerIds}
+        onSavePress={onSavePress}
+        onModalClose={onEditModalClose}
+      />
+
+      <TagsModal
+        isOpen={isTagsModalOpen}
+        indexerIds={indexerIds}
+        onApplyTagsPress={onApplyTagsPress}
+        onModalClose={onTagsModalClose}
+      />
+
+      <DeleteIndexerModal
+        isOpen={isDeleteModalOpen}
+        indexerIds={indexerIds}
+        onModalClose={onDeleteModalClose}
+      />
+    </PageContentFooter>
+  );
+}
+
+export default IndexerIndexSelectFooter;

frontend/src/Indexer/Index/Select/IndexerIndexSelectModeButton.tsx

@@ -0,0 +1,39 @@
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import React, { useCallback } from 'react';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+
+interface IndexerIndexSelectModeButtonProps {
+  label: string;
+  iconName: IconDefinition;
+  isSelectMode: boolean;
+  overflowComponent: React.FunctionComponent;
+  onPress: () => void;
+}
+
+function IndexerIndexSelectModeButton(
+  props: IndexerIndexSelectModeButtonProps
+) {
+  const { label, iconName, isSelectMode, onPress } = props;
+  const [, selectDispatch] = useSelect();
+
+  const onPressWrapper = useCallback(() => {
+    if (isSelectMode) {
+      selectDispatch({
+        type: SelectActionType.Reset,
+      });
+    }
+
+    onPress();
+  }, [isSelectMode, onPress, selectDispatch]);
+
+  return (
+    <PageToolbarButton
+      label={label}
+      iconName={iconName}
+      onPress={onPressWrapper}
+    />
+  );
+}
+
+export default IndexerIndexSelectModeButton;

frontend/src/Indexer/Index/Select/IndexerIndexSelectModeMenuItem.tsx

@@ -0,0 +1,38 @@
+import { IconDefinition } from '@fortawesome/fontawesome-common-types';
+import React, { useCallback } from 'react';
+import { SelectActionType, useSelect } from 'App/SelectContext';
+import PageToolbarOverflowMenuItem from 'Components/Page/Toolbar/PageToolbarOverflowMenuItem';
+
+interface IndexerIndexSelectModeMenuItemProps {
+  label: string;
+  iconName: IconDefinition;
+  isSelectMode: boolean;
+  onPress: () => void;
+}
+
+function IndexerIndexSelectModeMenuItem(
+  props: IndexerIndexSelectModeMenuItemProps
+) {
+  const { label, iconName, isSelectMode, onPress } = props;
+  const [, selectDispatch] = useSelect();
+
+  const onPressWrapper = useCallback(() => {
+    if (isSelectMode) {
+      selectDispatch({
+        type: SelectActionType.Reset,
+      });
+    }
+
+    onPress();
+  }, [isSelectMode, onPress, selectDispatch]);
+
+  return (
+    <PageToolbarOverflowMenuItem
+      label={label}
+      iconName={iconName}
+      onPress={onPressWrapper}
+    />
+  );
+}
+
+export default IndexerIndexSelectModeMenuItem;

frontend/src/Indexer/Index/Select/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;
+  indexerIds: 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/Indexer/Index/Select/Tags/TagsModalContent.css

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

frontend/src/Indexer/Index/Select/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/Indexer/Index/Select/Tags/TagsModalContent.tsx

@@ -0,0 +1,167 @@
+import { concat, uniq } from 'lodash';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useSelector } from 'react-redux';
+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 createAllIndexersSelector from 'Store/Selectors/createAllIndexersSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import styles from './TagsModalContent.css';
+
+interface TagsModalContentProps {
+  indexerIds: number[];
+  onApplyTagsPress: (tags: number[], applyTags: string) => void;
+  onModalClose: () => void;
+}
+
+function TagsModalContent(props: TagsModalContentProps) {
+  const { indexerIds, onModalClose, onApplyTagsPress } = props;
+
+  const allIndexers = useSelector(createAllIndexersSelector());
+  const tagList = useSelector(createTagsSelector());
+
+  const [tags, setTags] = useState<number[]>([]);
+  const [applyTags, setApplyTags] = useState('add');
+
+  const indexerTags = useMemo(() => {
+    const indexers = indexerIds.map((id) => {
+      return allIndexers.find((s) => s.id === id);
+    });
+
+    return uniq(concat(...indexers.map((s) => s.tags)));
+  }, [indexerIds, allIndexers]);
+
+  const onTagsChange = useCallback(
+    ({ value }) => {
+      setTags(value);
+    },
+    [setTags]
+  );
+
+  const onApplyTagsChange = useCallback(
+    ({ value }) => {
+      setApplyTags(value);
+    },
+    [setApplyTags]
+  );
+
+  const onApplyPress = useCallback(() => {
+    onApplyTagsPress(tags, applyTags);
+  }, [tags, applyTags, onApplyTagsPress]);
+
+  const applyTagsOptions = [
+    { key: 'add', value: 'Add' },
+    { key: 'remove', value: 'Remove' },
+    { key: 'replace', value: 'Replace' },
+  ];
+
+  return (
+    <ModalContent onModalClose={onModalClose}>
+      <ModalHeader>Tags</ModalHeader>
+
+      <ModalBody>
+        <Form>
+          <FormGroup>
+            <FormLabel>Tags</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.TAG}
+              name="tags"
+              value={tags}
+              onChange={onTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Apply Tags</FormLabel>
+
+            <FormInputGroup
+              type={inputTypes.SELECT}
+              name="applyTags"
+              value={applyTags}
+              values={applyTagsOptions}
+              helpTexts={[
+                'How to apply tags to the selected series',
+                'Add: Add the tags the existing list of tags',
+                'Remove: Remove the entered tags',
+                'Replace: Replace the tags with the entered tags (enter no tags to clear all tags)',
+              ]}
+              onChange={onApplyTagsChange}
+            />
+          </FormGroup>
+
+          <FormGroup>
+            <FormLabel>Result</FormLabel>
+
+            <div className={styles.result}>
+              {indexerTags.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 ? 'Removing tag' : 'Existing tag'}
+                    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 (indexerTags.indexOf(id) > -1) {
+                    return null;
+                  }
+
+                  return (
+                    <Label
+                      key={tag.id}
+                      title={'Adding tag'}
+                      kind={kinds.SUCCESS}
+                      size={sizes.LARGE}
+                    >
+                      {tag.label}
+                    </Label>
+                  );
+                })}
+            </div>
+          </FormGroup>
+        </Form>
+      </ModalBody>
+
+      <ModalFooter>
+        <Button onPress={onModalClose}>Cancel</Button>
+
+        <Button kind={kinds.PRIMARY} onPress={onApplyPress}>
+          Apply
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+}
+
+export default TagsModalContent;