([]);
+ 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',
+ get value() {
+ return translate('Add');
+ },
+ },
+ {
+ key: 'remove',
+ get value() {
+ return translate('Remove');
+ },
+ },
+ {
+ key: 'replace',
+ get value() {
+ return translate('Replace');
+ },
+ },
+ ];
+
+ return (
+
+ {translate('Tags')}
+
+
+
+
+
+
+ {translate('Cancel')}
+
+
+ {translate('Apply')}
+
+
+
+ );
+}
+
+export default TagsModalContent;
diff --git a/frontend/src/Settings/Indexers/Options/IndexerOptions.js b/frontend/src/Settings/Indexers/Options/IndexerOptions.js
new file mode 100644
index 000000000..018b8ce1d
--- /dev/null
+++ b/frontend/src/Settings/Indexers/Options/IndexerOptions.js
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+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 LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { inputTypes, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+
+function IndexerOptions(props) {
+ const {
+ advancedSettings,
+ isFetching,
+ error,
+ settings,
+ hasSettings,
+ onInputChange
+ } = props;
+
+ return (
+
+ {
+ isFetching &&
+
+ {translate('UnableToLoadIndexerOptions')}
+
+ }
+
+ {
+ hasSettings && !isFetching && !error &&
+
+ }
+
+ );
+}
+
+IndexerOptions.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ settings: PropTypes.object.isRequired,
+ hasSettings: PropTypes.bool.isRequired,
+ onInputChange: PropTypes.func.isRequired
+};
+
+export default IndexerOptions;
diff --git a/frontend/src/Settings/Indexers/Options/IndexerOptionsConnector.js b/frontend/src/Settings/Indexers/Options/IndexerOptionsConnector.js
new file mode 100644
index 000000000..4e8031a99
--- /dev/null
+++ b/frontend/src/Settings/Indexers/Options/IndexerOptionsConnector.js
@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { fetchIndexerOptions, saveIndexerOptions, setIndexerOptionsValue } from 'Store/Actions/settingsActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import IndexerOptions from './IndexerOptions';
+
+const SECTION = 'indexerOptions';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ createSettingsSectionSelector(SECTION),
+ (advancedSettings, sectionSettings) => {
+ return {
+ advancedSettings,
+ ...sectionSettings
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchIndexerOptions: fetchIndexerOptions,
+ dispatchSetIndexerOptionsValue: setIndexerOptionsValue,
+ dispatchSaveIndexerOptions: saveIndexerOptions,
+ dispatchClearPendingChanges: clearPendingChanges
+};
+
+class IndexerOptionsConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ dispatchFetchIndexerOptions,
+ dispatchSaveIndexerOptions,
+ onChildMounted
+ } = this.props;
+
+ dispatchFetchIndexerOptions();
+ onChildMounted(dispatchSaveIndexerOptions);
+ }
+
+ componentDidUpdate(prevProps) {
+ const {
+ hasPendingChanges,
+ isSaving,
+ onChildStateChange
+ } = this.props;
+
+ if (
+ prevProps.isSaving !== isSaving ||
+ prevProps.hasPendingChanges !== hasPendingChanges
+ ) {
+ onChildStateChange({
+ isSaving,
+ hasPendingChanges
+ });
+ }
+ }
+
+ componentWillUnmount() {
+ this.props.dispatchClearPendingChanges({ section: 'settings.indexerOptions' });
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.dispatchSetIndexerOptionsValue({ name, value });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+ }
+
+ {
+ !isFetching && error &&
+
+
+ {translate('UnableToLoadMediaManagementSettings')}
+
+
+ }
+
+ {
+ hasSettings && !isFetching && !error &&
+
+ }
+
+
+ );
+ }
+
+}
+
+MediaManagement.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ settings: PropTypes.object.isRequired,
+ hasSettings: PropTypes.bool.isRequired,
+ isWindows: PropTypes.bool.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onInputChange: PropTypes.func.isRequired
+};
+
+export default MediaManagement;
diff --git a/frontend/src/Settings/MediaManagement/MediaManagementConnector.js b/frontend/src/Settings/MediaManagement/MediaManagementConnector.js
new file mode 100644
index 000000000..9d6f959b8
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/MediaManagementConnector.js
@@ -0,0 +1,86 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { fetchMediaManagementSettings, saveMediaManagementSettings, saveNamingSettings, setMediaManagementSettingsValue } from 'Store/Actions/settingsActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import createSystemStatusSelector from 'Store/Selectors/createSystemStatusSelector';
+import MediaManagement from './MediaManagement';
+
+const SECTION = 'mediaManagement';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ (state) => state.settings.naming,
+ createSettingsSectionSelector(SECTION),
+ createSystemStatusSelector(),
+ (advancedSettings, namingSettings, sectionSettings, systemStatus) => {
+ return {
+ advancedSettings,
+ ...sectionSettings,
+ hasPendingChanges: !_.isEmpty(namingSettings.pendingChanges) || sectionSettings.hasPendingChanges,
+ isWindows: systemStatus.isWindows
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchMediaManagementSettings,
+ setMediaManagementSettingsValue,
+ saveMediaManagementSettings,
+ saveNamingSettings,
+ clearPendingChanges
+};
+
+class MediaManagementConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchMediaManagementSettings();
+ }
+
+ componentWillUnmount() {
+ this.props.clearPendingChanges({ section: `settings.${SECTION}` });
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setMediaManagementSettingsValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveMediaManagementSettings();
+ this.props.saveNamingSettings();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {
+ isFetching &&
+
+ {translate('UnableToLoadNamingSettings')}
+
+ }
+
+ {
+ hasSettings && !isFetching && !error &&
+
+ }
+
+ );
+ }
+
+}
+
+Naming.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ settings: PropTypes.object.isRequired,
+ hasSettings: PropTypes.bool.isRequired,
+ examples: PropTypes.object.isRequired,
+ examplesPopulated: PropTypes.bool.isRequired,
+ onInputChange: PropTypes.func.isRequired
+};
+
+export default Naming;
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingConnector.js b/frontend/src/Settings/MediaManagement/Naming/NamingConnector.js
new file mode 100644
index 000000000..8f96fabfb
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingConnector.js
@@ -0,0 +1,96 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { fetchNamingExamples, fetchNamingSettings, setNamingSettingsValue } from 'Store/Actions/settingsActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import Naming from './Naming';
+
+const SECTION = 'naming';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ (state) => state.settings.namingExamples,
+ createSettingsSectionSelector(SECTION),
+ (advancedSettings, namingExamples, sectionSettings) => {
+ return {
+ advancedSettings,
+ examples: namingExamples.item,
+ examplesPopulated: namingExamples.isPopulated,
+ ...sectionSettings
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchNamingSettings,
+ setNamingSettingsValue,
+ fetchNamingExamples,
+ clearPendingChanges
+};
+
+class NamingConnector extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this._namingExampleTimeout = null;
+ }
+
+ componentDidMount() {
+ this.props.fetchNamingSettings();
+ this.props.fetchNamingExamples();
+ }
+
+ componentWillUnmount() {
+ this.props.clearPendingChanges({ section: 'settings.naming' });
+ }
+
+ //
+ // Control
+
+ _fetchNamingExamples = () => {
+ this.props.fetchNamingExamples();
+ };
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setNamingSettingsValue({ name, value });
+
+ if (this._namingExampleTimeout) {
+ clearTimeout(this._namingExampleTimeout);
+ }
+
+ this._namingExampleTimeout = setTimeout(this._fetchNamingExamples, 1000);
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+ {translate('FileNameTokens')}
+
+
+
+
+
+
+ {
+ !advancedSettings &&
+
+
+ {
+ fileNameTokens.map(({ token, example }) => {
+ return (
+
+
+ }
+
+
+
+ {
+ artistTokens.map(({ token, example }) => {
+ return (
+
+
+
+ {
+ album &&
+
+
+
+ {
+ albumTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ releaseDateTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ mediumTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ mediumFormatTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ trackTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+
+ {
+ trackTitleTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ trackArtistTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ qualityTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ mediaInfoTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ otherTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+ {
+ originalTokens.map(({ token, example }) => {
+ return (
+
+
+
+
+
+
+ {translate('Close')}
+
+
+
+
+ );
+ }
+}
+
+NamingModal.propTypes = {
+ name: PropTypes.string.isRequired,
+ value: PropTypes.string.isRequired,
+ isOpen: PropTypes.bool.isRequired,
+ advancedSettings: PropTypes.bool.isRequired,
+ album: PropTypes.bool.isRequired,
+ track: PropTypes.bool.isRequired,
+ additional: PropTypes.bool.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+NamingModal.defaultProps = {
+ album: false,
+ track: false,
+ additional: false
+};
+
+export default NamingModal;
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css
new file mode 100644
index 000000000..204c93d0e
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css
@@ -0,0 +1,74 @@
+.option {
+ display: flex;
+ align-items: stretch;
+ flex-wrap: wrap;
+ margin: 3px;
+ border: 1px solid var(--borderColor);
+
+ &:hover {
+ .token {
+ background-color: #ddd;
+ }
+
+ .example {
+ background-color: #ccc;
+ }
+ }
+}
+
+.small {
+ width: 490px;
+}
+
+.large {
+ width: 100%;
+}
+
+.token {
+ flex: 0 0 50%;
+ padding: 6px;
+ background-color: var(--popoverTitleBackgroundColor);
+ font-family: $monoSpaceFontFamily;
+}
+
+.example {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex: 0 0 50%;
+ padding: 6px;
+ background-color: var(--popoverBodyBackgroundColor);
+
+ .footNote {
+ padding: 2px;
+ color: #aaa;
+ }
+}
+
+.lower {
+ text-transform: lowercase;
+}
+
+.upper {
+ text-transform: uppercase;
+}
+
+.isFullFilename {
+ .token,
+ .example {
+ flex: 1 0 auto;
+ }
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+ .option.small {
+ width: 100%;
+ }
+}
+
+@media only screen and (max-width: $breakpointExtraSmall) {
+ .token,
+ .example {
+ flex: 1 0 auto;
+ }
+}
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingOption.css.d.ts b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css.d.ts
new file mode 100644
index 000000000..a060f6218
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.css.d.ts
@@ -0,0 +1,15 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'example': string;
+ 'footNote': string;
+ 'isFullFilename': string;
+ 'large': string;
+ 'lower': string;
+ 'option': string;
+ 'small': string;
+ 'token': string;
+ 'upper': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/MediaManagement/Naming/NamingOption.js b/frontend/src/Settings/MediaManagement/Naming/NamingOption.js
new file mode 100644
index 000000000..29bf9d3bb
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/Naming/NamingOption.js
@@ -0,0 +1,84 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Link from 'Components/Link/Link';
+import { sizes } from 'Helpers/Props';
+import styles from './NamingOption.css';
+
+class NamingOption extends Component {
+
+ //
+ // Listeners
+
+ onPress = () => {
+ const {
+ token,
+ tokenSeparator,
+ tokenCase,
+ isFullFilename,
+ onPress
+ } = this.props;
+
+ let tokenValue = token;
+
+ tokenValue = tokenValue.replace(/ /g, tokenSeparator);
+
+ if (tokenCase === 'lower') {
+ tokenValue = token.toLowerCase();
+ } else if (tokenCase === 'upper') {
+ tokenValue = token.toUpperCase();
+ }
+
+ onPress({ isFullFilename, tokenValue });
+ };
+
+ //
+ // Render
+ render() {
+ const {
+ token,
+ tokenSeparator,
+ example,
+ tokenCase,
+ isFullFilename,
+ size
+ } = this.props;
+
+ return (
+
+ {token.replace(/ /g, tokenSeparator)}
+
+
+
+ {example.replace(/ /g, tokenSeparator)}
+
+
+ );
+ }
+}
+
+NamingOption.propTypes = {
+ token: PropTypes.string.isRequired,
+ example: PropTypes.string.isRequired,
+ tokenSeparator: PropTypes.string.isRequired,
+ tokenCase: PropTypes.string.isRequired,
+ isFullFilename: PropTypes.bool.isRequired,
+ size: PropTypes.oneOf([sizes.SMALL, sizes.LARGE]),
+ onPress: PropTypes.func.isRequired
+};
+
+NamingOption.defaultProps = {
+ size: sizes.SMALL,
+ isFullFilename: false
+};
+
+export default NamingOption;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModal.js b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModal.js
new file mode 100644
index 000000000..6adc8046c
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModal.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import EditRootFolderModalContentConnector from './EditRootFolderModalContentConnector';
+
+function EditRootFolderModal({ isOpen, onModalClose, ...otherProps }) {
+ return (
+
+
+ );
+}
+
+EditRootFolderModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditRootFolderModal;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalConnector.js b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalConnector.js
new file mode 100644
index 000000000..b3aaea069
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalConnector.js
@@ -0,0 +1,58 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { cancelSaveRootFolder } from 'Store/Actions/settingsActions';
+import EditRootFolderModal from './EditRootFolderModal';
+
+function createMapDispatchToProps(dispatch, props) {
+ const section = 'settings.rootFolders';
+
+ return {
+ dispatchClearPendingChanges() {
+ dispatch(clearPendingChanges({ section }));
+ },
+
+ dispatchCancelSaveRootFolder() {
+ dispatch(cancelSaveRootFolder({ section }));
+ }
+ };
+}
+
+class EditRootFolderModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.dispatchClearPendingChanges();
+ this.props.dispatchCancelSaveRootFolder();
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ dispatchClearPendingChanges,
+ dispatchCancelSaveRootFolder,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ {id ? translate('EditRootFolder') : translate('AddRootFolder')}
+
+
+
+ {
+ isFetching &&
+
+ {translate('UnableToAddANewRootFolderPleaseTryAgain')}
+
+ }
+
+ {
+ !isFetching && !error &&
+
+ }
+
+
+ {
+ id &&
+
+ {translate('Delete')}
+
+ }
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditRootFolderModalContent.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ isSaving: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ item: PropTypes.object.isRequired,
+ showMetadataProfile: PropTypes.bool.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onDeleteRootFolderPress: PropTypes.func
+};
+
+export default EditRootFolderModalContent;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContentConnector.js b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContentConnector.js
new file mode 100644
index 000000000..0562e269b
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/EditRootFolderModalContentConnector.js
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveRootFolder, setRootFolderValue } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditRootFolderModalContent from './EditRootFolderModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state, { id }) => id,
+ (state) => state.settings.advancedSettings,
+ (state) => state.settings.metadataProfiles,
+ (state) => state.settings.rootFolders,
+ createProviderSettingsSelector('rootFolders'),
+ (id, advancedSettings, metadataProfiles, rootFolders, rootFolderSettings) => {
+ return {
+ advancedSettings,
+ showMetadataProfile: metadataProfiles.items.length > 1,
+ ...rootFolderSettings,
+ isFetching: rootFolders.isFetching
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setRootFolderValue,
+ saveRootFolder
+};
+
+class EditRootFolderModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setRootFolderValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveRootFolder({ id: this.props.id });
+
+ if (this.props.onRootFolderAdded) {
+ this.props.onRootFolderAdded(this.props.item.path);
+ }
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {name}
+
+
+
+
+ {path}
+
+
+
+ {qualityProfile?.name || translate('None')}
+
+
+
+ {metadataProfile?.name || translate('None')}
+
+
+
+
+ );
+ }
+}
+
+RootFolder.propTypes = {
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ path: PropTypes.string.isRequired,
+ qualityProfile: PropTypes.object.isRequired,
+ metadataProfile: PropTypes.object.isRequired,
+ onConfirmDeleteRootFolder: PropTypes.func.isRequired
+};
+
+export default RootFolder;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css
new file mode 100644
index 000000000..3b3bcc17a
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css
@@ -0,0 +1,20 @@
+.rootFolders {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.addRootFolder {
+ composes: rootFolder from '~./RootFolder.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css.d.ts b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css.d.ts
new file mode 100644
index 000000000..124ece64f
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addRootFolder': string;
+ 'center': string;
+ 'rootFolders': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js
new file mode 100644
index 000000000..a945a805e
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFolders.js
@@ -0,0 +1,105 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import EditRootFolderModalConnector from './EditRootFolderModalConnector';
+import RootFolder from './RootFolder';
+import styles from './RootFolders.css';
+
+class RootFolders extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isAddRootFolderModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onAddRootFolderPress = () => {
+ this.setState({ isAddRootFolderModalOpen: true });
+ };
+
+ onAddRootFolderModalClose = () => {
+ this.setState({ isAddRootFolderModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ items,
+ qualityProfiles,
+ metadataProfiles,
+ onConfirmDeleteRootFolder,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+
+ {
+ items.map((item) => {
+ const qualityProfile = qualityProfiles.find((profile) => profile.id === item.defaultQualityProfileId);
+ const metadataProfile = metadataProfiles.find((profile) => profile.id === item.defaultMetadataProfileId);
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+ );
+ }
+}
+
+RootFolders.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ qualityProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+ metadataProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteRootFolder: PropTypes.func.isRequired
+};
+
+export default RootFolders;
diff --git a/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js b/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js
new file mode 100644
index 000000000..e1e8807bb
--- /dev/null
+++ b/frontend/src/Settings/MediaManagement/RootFolder/RootFoldersConnector.js
@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteRootFolder, fetchRootFolders } from 'Store/Actions/settingsActions';
+import createRootFoldersSelector from 'Store/Selectors/createRootFoldersSelector';
+import RootFolders from './RootFolders';
+
+function createMapStateToProps() {
+ return createSelector(
+ createRootFoldersSelector(),
+ (state) => state.settings.qualityProfiles,
+ (state) => state.settings.metadataProfiles,
+ (rootFolders, quality, metadata) => {
+ return {
+ qualityProfiles: quality.items,
+ metadataProfiles: metadata.items,
+ ...rootFolders
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchRootFolders: fetchRootFolders,
+ dispatchDeleteRootFolder: deleteRootFolder
+};
+
+class RootFoldersConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.dispatchFetchRootFolders();
+ }
+
+ //
+ // Listeners
+
+ onConfirmDeleteRootFolder = (id) => {
+ this.props.dispatchDeleteRootFolder({ id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+}
+
+EditMetadataModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditMetadataModal;
diff --git a/frontend/src/Settings/Metadata/Metadata/EditMetadataModalConnector.js b/frontend/src/Settings/Metadata/Metadata/EditMetadataModalConnector.js
new file mode 100644
index 000000000..6e415b80c
--- /dev/null
+++ b/frontend/src/Settings/Metadata/Metadata/EditMetadataModalConnector.js
@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditMetadataModal from './EditMetadataModal';
+
+function createMapDispatchToProps(dispatch, props) {
+ const section = 'settings.metadata';
+
+ return {
+ dispatchClearPendingChanges() {
+ dispatch(clearPendingChanges({ section }));
+ }
+ };
+}
+
+class EditMetadataModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.dispatchClearPendingChanges();
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {translate('EditMetadata')} - {name.value}
+
+
+
+
+
+
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditMetadataModalContent.propTypes = {
+ isSaving: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ item: PropTypes.object.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onFieldChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onDeleteMetadataPress: PropTypes.func
+};
+
+export default EditMetadataModalContent;
diff --git a/frontend/src/Settings/Metadata/Metadata/EditMetadataModalContentConnector.js b/frontend/src/Settings/Metadata/Metadata/EditMetadataModalContentConnector.js
new file mode 100644
index 000000000..f36ac6807
--- /dev/null
+++ b/frontend/src/Settings/Metadata/Metadata/EditMetadataModalContentConnector.js
@@ -0,0 +1,93 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveMetadata, setMetadataFieldValue, setMetadataValue } from 'Store/Actions/settingsActions';
+import selectSettings from 'Store/Selectors/selectSettings';
+import EditMetadataModalContent from './EditMetadataModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state, { id }) => id,
+ (state) => state.settings.metadata,
+ (id, metadata) => {
+ const {
+ isSaving,
+ saveError,
+ pendingChanges,
+ items
+ } = metadata;
+
+ const settings = selectSettings(_.find(items, { id }), pendingChanges, saveError);
+
+ return {
+ id,
+ isSaving,
+ saveError,
+ item: settings.settings,
+ ...settings
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setMetadataValue,
+ setMetadataFieldValue,
+ saveMetadata
+};
+
+class EditMetadataModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setMetadataValue({ name, value });
+ };
+
+ onFieldChange = ({ name, value }) => {
+ this.props.setMetadataFieldValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveMetadata({ id: this.props.id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {name}
+
+
+
+ {
+ enable ?
+
+ Enabled
+ :
+
+ Disabled
+
+ }
+
+
+ {
+ enable && !!metadataFields.length &&
+
+
+ Metadata
+
+
+ {
+ metadataFields.map((field) => {
+ if (!field.value) {
+ return null;
+ }
+
+ return (
+
+ {field.label}
+
+ );
+ })
+ }
+
+
+ Images
+
+
+ {
+ imageFields.map((field) => {
+ if (!field.value) {
+ return null;
+ }
+
+ return (
+
+ {field.label}
+
+ );
+ })
+ }
+
+ );
+ }
+}
+
+Metadata.propTypes = {
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ enable: PropTypes.bool.isRequired,
+ fields: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Metadata;
diff --git a/frontend/src/Settings/Metadata/Metadata/Metadatas.css b/frontend/src/Settings/Metadata/Metadata/Metadatas.css
new file mode 100644
index 000000000..fb1bd6080
--- /dev/null
+++ b/frontend/src/Settings/Metadata/Metadata/Metadatas.css
@@ -0,0 +1,4 @@
+.metadatas {
+ display: flex;
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/Settings/Metadata/Metadata/Metadatas.css.d.ts b/frontend/src/Settings/Metadata/Metadata/Metadatas.css.d.ts
new file mode 100644
index 000000000..4c9d41dba
--- /dev/null
+++ b/frontend/src/Settings/Metadata/Metadata/Metadatas.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'metadatas': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Metadata/Metadata/Metadatas.js b/frontend/src/Settings/Metadata/Metadata/Metadatas.js
new file mode 100644
index 000000000..d6842149a
--- /dev/null
+++ b/frontend/src/Settings/Metadata/Metadata/Metadatas.js
@@ -0,0 +1,44 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FieldSet from 'Components/FieldSet';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import translate from 'Utilities/String/translate';
+import Metadata from './Metadata';
+import styles from './Metadatas.css';
+
+function Metadatas(props) {
+ const {
+ items,
+ ...otherProps
+ } = props;
+
+ return (
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+ );
+}
+
+Metadatas.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Metadatas;
diff --git a/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js b/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js
new file mode 100644
index 000000000..8675f4742
--- /dev/null
+++ b/frontend/src/Settings/Metadata/Metadata/MetadatasConnector.js
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchMetadata } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
+import Metadatas from './Metadatas';
+
+function createMapStateToProps() {
+ return createSelector(
+ createSortedSectionSelector('settings.metadata', sortByProp('name')),
+ (metadata) => metadata
+ );
+}
+
+const mapDispatchToProps = {
+ fetchMetadata
+};
+
+class MetadatasConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchMetadata();
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {
+ isFetching &&
+
+ }
+
+ {
+ !isFetching && error &&
+
+ {translate('UnableToLoadMetadataProviderSettings')}
+
+ }
+
+ {
+ hasSettings && !isFetching && !error &&
+
+ }
+
+
+
+
+ );
+ }
+}
+
+export default MetadataSettings;
diff --git a/frontend/src/Settings/Notifications/NotificationSettings.js b/frontend/src/Settings/Notifications/NotificationSettings.js
new file mode 100644
index 000000000..991624463
--- /dev/null
+++ b/frontend/src/Settings/Notifications/NotificationSettings.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
+import NotificationsConnector from './Notifications/NotificationsConnector';
+
+function NotificationSettings() {
+ return (
+
+
+
+
+ );
+}
+
+export default NotificationSettings;
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css
new file mode 100644
index 000000000..a9e416098
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css
@@ -0,0 +1,44 @@
+.notification {
+ composes: card from '~Components/Card.css';
+
+ position: relative;
+ width: 300px;
+ height: 100px;
+}
+
+.underlay {
+ @add-mixin cover;
+}
+
+.overlay {
+ @add-mixin linkOverlay;
+
+ padding: 10px;
+}
+
+.name {
+ text-align: center;
+ font-weight: lighter;
+ font-size: 24px;
+}
+
+.actions {
+ margin-top: 20px;
+ text-align: right;
+}
+
+.presetsMenu {
+ composes: menu from '~Components/Menu/Menu.css';
+
+ display: inline-block;
+ margin: 0 5px;
+}
+
+.presetsMenuButton {
+ composes: button from '~Components/Link/Button.css';
+
+ &::after {
+ margin-left: 5px;
+ content: '\25BE';
+ }
+}
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css.d.ts b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css.d.ts
new file mode 100644
index 000000000..952689303
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'name': string;
+ 'notification': string;
+ 'overlay': string;
+ 'presetsMenu': string;
+ 'presetsMenuButton': string;
+ 'underlay': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.js b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.js
new file mode 100644
index 000000000..4cf8a6d57
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationItem.js
@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Menu from 'Components/Menu/Menu';
+import MenuContent from 'Components/Menu/MenuContent';
+import { sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import AddNotificationPresetMenuItem from './AddNotificationPresetMenuItem';
+import styles from './AddNotificationItem.css';
+
+class AddNotificationItem extends Component {
+
+ //
+ // Listeners
+
+ onNotificationSelect = () => {
+ const {
+ implementation
+ } = this.props;
+
+ this.props.onNotificationSelect({ implementation });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ implementation,
+ implementationName,
+ infoLink,
+ presets,
+ onNotificationSelect
+ } = this.props;
+
+ const hasPresets = !!presets && !!presets.length;
+
+ return (
+
+
+
+
+
+ {implementationName}
+
+
+
+ {
+ hasPresets &&
+
+
+ {translate('Custom')}
+
+
+
+
+ {translate('Presets')}
+
+
+
+ {
+ presets.map((preset) => {
+ return (
+
+
+
+ }
+
+
+ {translate('MoreInfo')}
+
+
+
+
+
+ );
+}
+
+AddNotificationModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default AddNotificationModal;
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.css b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.css
new file mode 100644
index 000000000..8744e516c
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.css
@@ -0,0 +1,5 @@
+.notifications {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.css.d.ts b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.css.d.ts
new file mode 100644
index 000000000..172f4fc5b
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'notifications': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js
new file mode 100644
index 000000000..705ae58e4
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContent.js
@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 translate from 'Utilities/String/translate';
+import AddNotificationItem from './AddNotificationItem';
+import styles from './AddNotificationModalContent.css';
+
+class AddNotificationModalContent extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ isSchemaFetching,
+ isSchemaPopulated,
+ schemaError,
+ schema,
+ onNotificationSelect,
+ onModalClose
+ } = this.props;
+
+ return (
+
+
+ {translate('AddConnection')}
+
+
+
+ {
+ isSchemaFetching &&
+
+ {translate('UnableToAddANewNotificationPleaseTryAgain')}
+
+ }
+
+ {
+ isSchemaPopulated && !schemaError &&
+
+
+ {
+ schema.map((notification) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+ Close
+
+
+
+ );
+ }
+}
+
+AddNotificationModalContent.propTypes = {
+ isSchemaFetching: PropTypes.bool.isRequired,
+ isSchemaPopulated: PropTypes.bool.isRequired,
+ schemaError: PropTypes.object,
+ schema: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onNotificationSelect: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default AddNotificationModalContent;
diff --git a/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContentConnector.js b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContentConnector.js
new file mode 100644
index 000000000..749038688
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/AddNotificationModalContentConnector.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchNotificationSchema, selectNotificationSchema } from 'Store/Actions/settingsActions';
+import AddNotificationModalContent from './AddNotificationModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.notifications,
+ (notifications) => {
+ const {
+ isSchemaFetching,
+ isSchemaPopulated,
+ schemaError,
+ schema
+ } = notifications;
+
+ return {
+ isSchemaFetching,
+ isSchemaPopulated,
+ schemaError,
+ schema
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchNotificationSchema,
+ selectNotificationSchema
+};
+
+class AddNotificationModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchNotificationSchema();
+ }
+
+ //
+ // Listeners
+
+ onNotificationSelect = ({ implementation, name }) => {
+ this.props.selectNotificationSchema({ implementation, presetName: name });
+ this.props.onModalClose({ notificationSelected: true });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {name}
+
+ );
+ }
+}
+
+AddNotificationPresetMenuItem.propTypes = {
+ name: PropTypes.string.isRequired,
+ implementation: PropTypes.string.isRequired,
+ onPress: PropTypes.func.isRequired
+};
+
+export default AddNotificationPresetMenuItem;
diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModal.js b/frontend/src/Settings/Notifications/Notifications/EditNotificationModal.js
new file mode 100644
index 000000000..bc7f4ab18
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModal.js
@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import EditNotificationModalContentConnector from './EditNotificationModalContentConnector';
+
+function EditNotificationModal({ isOpen, onModalClose, ...otherProps }) {
+ return (
+
+
+ );
+}
+
+EditNotificationModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditNotificationModal;
diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalConnector.js b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalConnector.js
new file mode 100644
index 000000000..91070a979
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalConnector.js
@@ -0,0 +1,65 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { cancelSaveNotification, cancelTestNotification } from 'Store/Actions/settingsActions';
+import EditNotificationModal from './EditNotificationModal';
+
+function createMapDispatchToProps(dispatch, props) {
+ const section = 'settings.notifications';
+
+ return {
+ dispatchClearPendingChanges() {
+ dispatch(clearPendingChanges({ section }));
+ },
+
+ dispatchCancelTestNotification() {
+ dispatch(cancelTestNotification({ section }));
+ },
+
+ dispatchCancelSaveNotification() {
+ dispatch(cancelSaveNotification({ section }));
+ }
+ };
+}
+
+class EditNotificationModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.dispatchClearPendingChanges();
+ this.props.dispatchCancelTestNotification();
+ this.props.dispatchCancelSaveNotification();
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ dispatchClearPendingChanges,
+ dispatchCancelTestNotification,
+ dispatchCancelSaveNotification,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ {id ? translate('EditConnectionImplementation', { implementationName }) : translate('AddConnectionImplementation', { implementationName })}
+
+
+
+ {
+ isFetching &&
+
+ {translate('UnableToAddANewNotificationPleaseTryAgain')}
+
+ }
+
+ {
+ !isFetching && !error &&
+
+ }
+
+
+ {
+ id &&
+
+ {translate('Delete')}
+
+ }
+
+
+ {translate('Test')}
+
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditNotificationModalContent.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ isSaving: PropTypes.bool.isRequired,
+ isTesting: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ item: PropTypes.object.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onFieldChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onTestPress: PropTypes.func.isRequired,
+ onAdvancedSettingsPress: PropTypes.func.isRequired,
+ onDeleteNotificationPress: PropTypes.func
+};
+
+export default EditNotificationModalContent;
diff --git a/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContentConnector.js b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContentConnector.js
new file mode 100644
index 000000000..658d72da8
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/EditNotificationModalContentConnector.js
@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import {
+ saveNotification,
+ setNotificationFieldValue,
+ setNotificationValue,
+ testNotification,
+ toggleAdvancedSettings
+} from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditNotificationModalContent from './EditNotificationModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ createProviderSettingsSelector('notifications'),
+ (advancedSettings, notification) => {
+ return {
+ advancedSettings,
+ ...notification
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setNotificationValue,
+ setNotificationFieldValue,
+ saveNotification,
+ testNotification,
+ toggleAdvancedSettings
+};
+
+class EditNotificationModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setNotificationValue({ name, value });
+ };
+
+ onFieldChange = ({ name, value }) => {
+ this.props.setNotificationFieldValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveNotification({ id: this.props.id });
+ };
+
+ onTestPress = () => {
+ this.props.testNotification({ id: this.props.id });
+ };
+
+ onAdvancedSettingsPress = () => {
+ this.props.toggleAdvancedSettings();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {name}
+
+
+ {
+ supportsOnGrab && onGrab ?
+
+ {translate('OnGrab')}
+ :
+ null
+ }
+
+ {
+ supportsOnReleaseImport && onReleaseImport ?
+
+ {translate('OnReleaseImport')}
+ :
+ null
+ }
+
+ {
+ supportsOnUpgrade && onReleaseImport && onUpgrade ?
+
+ {translate('OnUpgrade')}
+ :
+ null
+ }
+
+ {
+ supportsOnRename && onRename ?
+
+ {translate('OnRename')}
+ :
+ null
+ }
+
+ {
+ supportsOnTrackRetag && onTrackRetag ?
+
+ {translate('OnTrackRetag')}
+ :
+ null
+ }
+
+ {
+ supportsOnArtistAdd && onArtistAdd ?
+
+ {translate('OnArtistAdd')}
+ :
+ null
+ }
+
+ {
+ supportsOnArtistDelete && onArtistDelete ?
+
+ {translate('OnArtistDelete')}
+ :
+ null
+ }
+
+ {
+ supportsOnAlbumDelete && onAlbumDelete ?
+
+ {translate('OnAlbumDelete')}
+ :
+ null
+ }
+
+ {
+ supportsOnHealthIssue && onHealthIssue ?
+
+ {translate('OnHealthIssue')}
+ :
+ null
+ }
+
+ {
+ supportsOnHealthRestored && onHealthRestored ?
+
+ {translate('OnHealthRestored')}
+ :
+ null
+ }
+
+ {
+ supportsOnDownloadFailure && onDownloadFailure ?
+
+ {translate('OnDownloadFailure')}
+ :
+ null
+ }
+
+ {
+ supportsOnImportFailure && onImportFailure ?
+
+ {translate('OnImportFailure')}
+ :
+ null
+ }
+
+ {
+ supportsOnApplicationUpdate && onApplicationUpdate ?
+
+ {translate('OnApplicationUpdate')}
+ :
+ null
+ }
+
+ {
+ !onGrab && !onReleaseImport && !onRename && !onTrackRetag && !onArtistAdd && !onArtistDelete && !onAlbumDelete && !onHealthIssue && !onHealthRestored && !onDownloadFailure && !onImportFailure && !onApplicationUpdate ?
+
+ {translate('Disabled')}
+ :
+ null
+ }
+
+
+ );
+ }
+}
+
+Notification.propTypes = {
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ onGrab: PropTypes.bool.isRequired,
+ onReleaseImport: PropTypes.bool.isRequired,
+ onUpgrade: PropTypes.bool.isRequired,
+ onRename: PropTypes.bool.isRequired,
+ onArtistAdd: PropTypes.bool.isRequired,
+ onArtistDelete: PropTypes.bool.isRequired,
+ onAlbumDelete: PropTypes.bool.isRequired,
+ onHealthIssue: PropTypes.bool.isRequired,
+ onHealthRestored: PropTypes.bool.isRequired,
+ onDownloadFailure: PropTypes.bool.isRequired,
+ onImportFailure: PropTypes.bool.isRequired,
+ onTrackRetag: PropTypes.bool.isRequired,
+ onApplicationUpdate: PropTypes.bool.isRequired,
+ supportsOnGrab: PropTypes.bool.isRequired,
+ supportsOnReleaseImport: PropTypes.bool.isRequired,
+ supportsOnUpgrade: PropTypes.bool.isRequired,
+ supportsOnRename: PropTypes.bool.isRequired,
+ supportsOnArtistAdd: PropTypes.bool.isRequired,
+ supportsOnArtistDelete: PropTypes.bool.isRequired,
+ supportsOnAlbumDelete: PropTypes.bool.isRequired,
+ supportsOnHealthIssue: PropTypes.bool.isRequired,
+ supportsOnHealthRestored: PropTypes.bool.isRequired,
+ supportsOnDownloadFailure: PropTypes.bool.isRequired,
+ supportsOnImportFailure: PropTypes.bool.isRequired,
+ supportsOnTrackRetag: PropTypes.bool.isRequired,
+ supportsOnApplicationUpdate: PropTypes.bool.isRequired,
+ tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteNotification: PropTypes.func.isRequired
+};
+
+export default Notification;
diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css
new file mode 100644
index 000000000..b3f6aa717
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css
@@ -0,0 +1,4 @@
+.events {
+ margin-top: 10px;
+ user-select: none;
+}
diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css.d.ts b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css.d.ts
new file mode 100644
index 000000000..931fd2781
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'events': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js
new file mode 100644
index 000000000..bff7b5ef7
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/NotificationEventItems.js
@@ -0,0 +1,228 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputGroup from 'Components/Form/FormInputGroup';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import FormLabel from 'Components/Form/FormLabel';
+import { inputTypes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './NotificationEventItems.css';
+
+function NotificationEventItems(props) {
+ const {
+ item,
+ onInputChange
+ } = props;
+
+ const {
+ onGrab,
+ onReleaseImport,
+ onUpgrade,
+ onRename,
+ onArtistAdd,
+ onArtistDelete,
+ onAlbumDelete,
+ onHealthIssue,
+ onHealthRestored,
+ onDownloadFailure,
+ onImportFailure,
+ onTrackRetag,
+ onApplicationUpdate,
+ supportsOnGrab,
+ supportsOnReleaseImport,
+ supportsOnUpgrade,
+ supportsOnRename,
+ supportsOnArtistAdd,
+ supportsOnArtistDelete,
+ supportsOnAlbumDelete,
+ supportsOnHealthIssue,
+ supportsOnHealthRestored,
+ includeHealthWarnings,
+ supportsOnDownloadFailure,
+ supportsOnImportFailure,
+ supportsOnTrackRetag,
+ supportsOnApplicationUpdate
+ } = item;
+
+ return (
+
+
+ {translate('NotificationTriggers')}
+
+
+
+
+
+
+
+
+
+
+ {
+ onReleaseImport.value &&
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ (onHealthIssue.value || onHealthRestored.value) &&
+
+
+ }
+
+
+ );
+}
+
+NotificationEventItems.propTypes = {
+ item: PropTypes.object.isRequired,
+ onInputChange: PropTypes.func.isRequired
+};
+
+export default NotificationEventItems;
diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.css b/frontend/src/Settings/Notifications/Notifications/Notifications.css
new file mode 100644
index 000000000..986226ad8
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.css
@@ -0,0 +1,20 @@
+.notifications {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.addNotification {
+ composes: notification from '~./Notification.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.css.d.ts b/frontend/src/Settings/Notifications/Notifications/Notifications.css.d.ts
new file mode 100644
index 000000000..2607f835d
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addNotification': string;
+ 'center': string;
+ 'notifications': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Notifications/Notifications/Notifications.js b/frontend/src/Settings/Notifications/Notifications/Notifications.js
new file mode 100644
index 000000000..81b1b90b3
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/Notifications.js
@@ -0,0 +1,118 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import AddNotificationModal from './AddNotificationModal';
+import EditNotificationModalConnector from './EditNotificationModalConnector';
+import Notification from './Notification';
+import styles from './Notifications.css';
+
+class Notifications extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isAddNotificationModalOpen: false,
+ isEditNotificationModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onAddNotificationPress = () => {
+ this.setState({ isAddNotificationModalOpen: true });
+ };
+
+ onAddNotificationModalClose = ({ notificationSelected = false } = {}) => {
+ this.setState({
+ isAddNotificationModalOpen: false,
+ isEditNotificationModalOpen: notificationSelected
+ });
+ };
+
+ onEditNotificationModalClose = () => {
+ this.setState({ isEditNotificationModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ items,
+ tagList,
+ onConfirmDeleteNotification,
+ ...otherProps
+ } = this.props;
+
+ const {
+ isAddNotificationModalOpen,
+ isEditNotificationModalOpen
+ } = this.state;
+
+ return (
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Notifications.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteNotification: PropTypes.func.isRequired
+};
+
+export default Notifications;
diff --git a/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js b/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
new file mode 100644
index 000000000..6351c6f8a
--- /dev/null
+++ b/frontend/src/Settings/Notifications/Notifications/NotificationsConnector.js
@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteNotification, fetchNotifications } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
+import Notifications from './Notifications';
+
+function createMapStateToProps() {
+ return createSelector(
+ createSortedSectionSelector('settings.notifications', sortByProp('name')),
+ createTagsSelector(),
+ (notifications, tagList) => {
+ return {
+ ...notifications,
+ tagList
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchNotifications,
+ deleteNotification
+};
+
+class NotificationsConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchNotifications();
+ }
+
+ //
+ // Listeners
+
+ onConfirmDeleteNotification = (id) => {
+ this.props.deleteNotification({ id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ Unsaved Changes
+
+
+ You have unsaved changes, are you sure you want to leave this page?
+
+
+
+
+ Stay and review changes
+
+
+
+ Discard changes and leave
+
+
+
+
+ );
+}
+
+PendingChangesModal.propTypes = {
+ className: PropTypes.string,
+ isOpen: PropTypes.bool.isRequired,
+ kind: PropTypes.oneOf(kinds.all),
+ onConfirm: PropTypes.func.isRequired,
+ onCancel: PropTypes.func.isRequired,
+ bindShortcut: PropTypes.func.isRequired,
+ unbindShortcut: PropTypes.func.isRequired
+};
+
+PendingChangesModal.defaultProps = {
+ kind: kinds.PRIMARY
+};
+
+export default keyboardShortcuts(PendingChangesModal);
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfile.css b/frontend/src/Settings/Profiles/Delay/DelayProfile.css
new file mode 100644
index 000000000..e2d6cd199
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfile.css
@@ -0,0 +1,40 @@
+.delayProfile {
+ display: flex;
+ align-items: stretch;
+ margin-bottom: 10px;
+ height: 30px;
+ border-bottom: 1px solid var(--borderColor);
+ line-height: 30px;
+}
+
+.column {
+ flex: 0 0 200px;
+}
+
+.actions {
+ display: flex;
+}
+
+.dragHandle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ margin-left: auto;
+ width: $dragHandleWidth;
+ text-align: center;
+ cursor: grab;
+}
+
+.dragIcon {
+ top: 0;
+}
+
+.isDragging {
+ opacity: 0.25;
+}
+
+.editButton {
+ width: $dragHandleWidth;
+ text-align: center;
+}
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfile.css.d.ts b/frontend/src/Settings/Profiles/Delay/DelayProfile.css.d.ts
new file mode 100644
index 000000000..4ec05c2d6
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfile.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'column': string;
+ 'delayProfile': string;
+ 'dragHandle': string;
+ 'dragIcon': string;
+ 'editButton': string;
+ 'isDragging': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfile.js b/frontend/src/Settings/Profiles/Delay/DelayProfile.js
new file mode 100644
index 000000000..ab646dd91
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfile.js
@@ -0,0 +1,173 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import Link from 'Components/Link/Link';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TagList from 'Components/TagList';
+import { icons, kinds } from 'Helpers/Props';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import EditDelayProfileModalConnector from './EditDelayProfileModalConnector';
+import styles from './DelayProfile.css';
+
+function getDelay(enabled, delay) {
+ if (!enabled) {
+ return '-';
+ }
+
+ if (!delay) {
+ return 'No Delay';
+ }
+
+ if (delay === 1) {
+ return '1 Minute';
+ }
+
+ // TODO: use better units of time than just minutes
+ return `${delay} Minutes`;
+}
+
+class DelayProfile extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isEditDelayProfileModalOpen: false,
+ isDeleteDelayProfileModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onEditDelayProfilePress = () => {
+ this.setState({ isEditDelayProfileModalOpen: true });
+ };
+
+ onEditDelayProfileModalClose = () => {
+ this.setState({ isEditDelayProfileModalOpen: false });
+ };
+
+ onDeleteDelayProfilePress = () => {
+ this.setState({
+ isEditDelayProfileModalOpen: false,
+ isDeleteDelayProfileModalOpen: true
+ });
+ };
+
+ onDeleteDelayProfileModalClose = () => {
+ this.setState({ isDeleteDelayProfileModalOpen: false });
+ };
+
+ onConfirmDeleteDelayProfile = () => {
+ this.props.onConfirmDeleteDelayProfile(this.props.id);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ id,
+ enableUsenet,
+ enableTorrent,
+ preferredProtocol,
+ usenetDelay,
+ torrentDelay,
+ tags,
+ tagList,
+ isDragging,
+ connectDragSource
+ } = this.props;
+
+ let preferred = titleCase(translate('PreferProtocol', { preferredProtocol }));
+
+ if (!enableUsenet) {
+ preferred = translate('OnlyTorrent');
+ } else if (!enableTorrent) {
+ preferred = translate('OnlyUsenet');
+ }
+
+ return (
+
+
{preferred}
+
{getDelay(enableUsenet, usenetDelay)}
+
{getDelay(enableTorrent, torrentDelay)}
+
+
+
+
+
+
+
+
+ {
+ id !== 1 &&
+ connectDragSource(
+
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+DelayProfileDragPreview.propTypes = {
+ width: PropTypes.number.isRequired,
+ item: PropTypes.object,
+ itemType: PropTypes.string,
+ currentOffset: PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired
+ })
+};
+
+export default DragLayer(collectDragLayer)(DelayProfileDragPreview);
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.css b/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.css
new file mode 100644
index 000000000..835250678
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.css
@@ -0,0 +1,17 @@
+.delayProfileDragSource {
+ padding: 4px 0;
+}
+
+.delayProfilePlaceholder {
+ width: 100%;
+ height: 30px;
+ border-bottom: 1px dotted #aaa;
+}
+
+.delayProfilePlaceholderBefore {
+ margin-bottom: 8px;
+}
+
+.delayProfilePlaceholderAfter {
+ margin-top: 8px;
+}
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.css.d.ts b/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.css.d.ts
new file mode 100644
index 000000000..0554ea7e8
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'delayProfileDragSource': string;
+ 'delayProfilePlaceholder': string;
+ 'delayProfilePlaceholderAfter': string;
+ 'delayProfilePlaceholderBefore': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.js b/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.js
new file mode 100644
index 000000000..8bf739ceb
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfileDragSource.js
@@ -0,0 +1,148 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { DragSource, DropTarget } from 'react-dnd';
+import { findDOMNode } from 'react-dom';
+import { DELAY_PROFILE } from 'Helpers/dragTypes';
+import DelayProfile from './DelayProfile';
+import styles from './DelayProfileDragSource.css';
+
+const delayProfileDragSource = {
+ beginDrag(item) {
+ return item;
+ },
+
+ endDrag(props, monitor, component) {
+ props.onDelayProfileDragEnd(monitor.getItem(), monitor.didDrop());
+ }
+};
+
+const delayProfileDropTarget = {
+ hover(props, monitor, component) {
+ const dragIndex = monitor.getItem().order;
+ const hoverIndex = props.order;
+
+ const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
+ const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+ const clientOffset = monitor.getClientOffset();
+ const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+ if (dragIndex === hoverIndex) {
+ return;
+ }
+
+ // When moving up, only trigger if drag position is above 50% and
+ // when moving down, only trigger if drag position is below 50%.
+ // If we're moving down the hoverIndex needs to be increased
+ // by one so it's ordered properly. Otherwise the hoverIndex will work.
+
+ if (dragIndex < hoverIndex && hoverClientY > hoverMiddleY) {
+ props.onDelayProfileDragMove(dragIndex, hoverIndex + 1);
+ } else if (dragIndex > hoverIndex && hoverClientY < hoverMiddleY) {
+ props.onDelayProfileDragMove(dragIndex, hoverIndex);
+ }
+ }
+};
+
+function collectDragSource(connect, monitor) {
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ };
+}
+
+function collectDropTarget(connect, monitor) {
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver()
+ };
+}
+
+class DelayProfileDragSource extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ id,
+ order,
+ isDragging,
+ isDraggingUp,
+ isDraggingDown,
+ isOver,
+ connectDragSource,
+ connectDropTarget,
+ ...otherProps
+ } = this.props;
+
+ const isBefore = !isDragging && isDraggingUp && isOver;
+ const isAfter = !isDragging && isDraggingDown && isOver;
+
+ // if (isDragging && !isOver) {
+ // return null;
+ // }
+
+ return connectDropTarget(
+
+ {
+ isBefore &&
+
+ }
+
+
+
+ {
+ isAfter &&
+
+ }
+
+
+
+
+
+
+
+ {translate('PreferredProtocol')}
+
+
+ {translate('UsenetDelay')}
+
+
+ {translate('TorrentDelay')}
+
+
+ {translate('Tags')}
+
+
+
+
+ {
+ items.map((item, index) => {
+ return (
+
+
+ {
+ defaultProfile ?
+
+
:
+ null
+ }
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+DelayProfiles.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ defaultProfile: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ dragIndex: PropTypes.number,
+ dropIndex: PropTypes.number,
+ onConfirmDeleteDelayProfile: PropTypes.func.isRequired
+};
+
+export default DelayProfiles;
diff --git a/frontend/src/Settings/Profiles/Delay/DelayProfilesConnector.js b/frontend/src/Settings/Profiles/Delay/DelayProfilesConnector.js
new file mode 100644
index 000000000..b2f822a5a
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/DelayProfilesConnector.js
@@ -0,0 +1,105 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteDelayProfile, fetchDelayProfiles, reorderDelayProfile } from 'Store/Actions/settingsActions';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import DelayProfiles from './DelayProfiles';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.delayProfiles,
+ createTagsSelector(),
+ (delayProfiles, tagList) => {
+ const defaultProfile = _.find(delayProfiles.items, { id: 1 });
+ const items = _.sortBy(_.reject(delayProfiles.items, { id: 1 }), ['order']);
+
+ return {
+ defaultProfile,
+ ...delayProfiles,
+ items,
+ tagList
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchDelayProfiles,
+ deleteDelayProfile,
+ reorderDelayProfile
+};
+
+class DelayProfilesConnector extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ dragIndex: null,
+ dropIndex: null
+ };
+ }
+
+ componentDidMount() {
+ this.props.fetchDelayProfiles();
+ }
+
+ //
+ // Listeners
+
+ onConfirmDeleteDelayProfile = (id) => {
+ this.props.deleteDelayProfile({ id });
+ };
+
+ onDelayProfileDragMove = (dragIndex, dropIndex) => {
+ if (this.state.dragIndex !== dragIndex || this.state.dropIndex !== dropIndex) {
+ this.setState({
+ dragIndex,
+ dropIndex
+ });
+ }
+ };
+
+ onDelayProfileDragEnd = ({ id }, didDrop) => {
+ const {
+ dropIndex
+ } = this.state;
+
+ if (didDrop && dropIndex !== null) {
+ this.props.reorderDelayProfile({ id, moveIndex: dropIndex - 1 });
+ }
+
+ this.setState({
+ dragIndex: null,
+ dropIndex: null
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+}
+
+EditDelayProfileModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditDelayProfileModal;
diff --git a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalConnector.js b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalConnector.js
new file mode 100644
index 000000000..5eb8ce871
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalConnector.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditDelayProfileModal from './EditDelayProfileModal';
+
+function mapStateToProps() {
+ return {};
+}
+
+const mapDispatchToProps = {
+ clearPendingChanges
+};
+
+class EditDelayProfileModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.clearPendingChanges({ section: 'settings.delayProfiles' });
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {id ? translate('EditDelayProfile') : translate('AddDelayProfile')}
+
+
+
+ {
+ isFetching ?
+
+ {translate('AddDelayProfileError')}
+ :
+ null
+ }
+
+ {
+ !isFetching && !error ?
+ :
+ null
+ }
+
+
+ {
+ id && id > 1 ?
+
+ {translate('Delete')}
+ :
+ null
+ }
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+const delayProfileShape = {
+ enableUsenet: PropTypes.shape(boolSettingShape).isRequired,
+ enableTorrent: PropTypes.shape(boolSettingShape).isRequired,
+ usenetDelay: PropTypes.shape(numberSettingShape).isRequired,
+ torrentDelay: PropTypes.shape(numberSettingShape).isRequired,
+ bypassIfHighestQuality: PropTypes.shape(boolSettingShape).isRequired,
+ bypassIfAboveCustomFormatScore: PropTypes.shape(boolSettingShape).isRequired,
+ minimumCustomFormatScore: PropTypes.shape(numberSettingShape).isRequired,
+ order: PropTypes.shape(numberSettingShape),
+ tags: PropTypes.shape(tagSettingShape).isRequired
+};
+
+EditDelayProfileModalContent.propTypes = {
+ id: PropTypes.number,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ isSaving: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ item: PropTypes.shape(delayProfileShape).isRequired,
+ protocol: PropTypes.string.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onProtocolChange: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onDeleteDelayProfilePress: PropTypes.func
+};
+
+export default EditDelayProfileModalContent;
diff --git a/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js
new file mode 100644
index 000000000..a1e3d85a1
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Delay/EditDelayProfileModalContentConnector.js
@@ -0,0 +1,173 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveDelayProfile, setDelayProfileValue } from 'Store/Actions/settingsActions';
+import selectSettings from 'Store/Selectors/selectSettings';
+import EditDelayProfileModalContent from './EditDelayProfileModalContent';
+
+const newDelayProfile = {
+ enableUsenet: true,
+ enableTorrent: true,
+ preferredProtocol: 'usenet',
+ usenetDelay: 0,
+ torrentDelay: 0,
+ bypassIfHighestQuality: false,
+ bypassIfAboveCustomFormatScore: false,
+ minimumCustomFormatScore: 0,
+ tags: []
+};
+
+function createDelayProfileSelector() {
+ return createSelector(
+ (state, { id }) => id,
+ (state) => state.settings.delayProfiles,
+ (id, delayProfiles) => {
+ const {
+ isFetching,
+ error,
+ isSaving,
+ saveError,
+ pendingChanges,
+ items
+ } = delayProfiles;
+
+ const profile = id ? _.find(items, { id }) : newDelayProfile;
+ const settings = selectSettings(profile, pendingChanges, saveError);
+
+ return {
+ id,
+ isFetching,
+ error,
+ isSaving,
+ saveError,
+ item: settings.settings,
+ ...settings
+ };
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ createDelayProfileSelector(),
+ (delayProfile) => {
+ const enableUsenet = delayProfile.item.enableUsenet.value;
+ const enableTorrent = delayProfile.item.enableTorrent.value;
+ const preferredProtocol = delayProfile.item.preferredProtocol.value;
+ let protocol = 'preferUsenet';
+
+ if (preferredProtocol === 'usenet') {
+ protocol = 'preferUsenet';
+ } else {
+ protocol = 'preferTorrent';
+ }
+
+ if (!enableUsenet) {
+ protocol = 'onlyTorrent';
+ }
+
+ if (!enableTorrent) {
+ protocol = 'onlyUsenet';
+ }
+
+ return {
+ protocol,
+ ...delayProfile
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setDelayProfileValue,
+ saveDelayProfile
+};
+
+class EditDelayProfileModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ if (!this.props.id) {
+ Object.keys(newDelayProfile).forEach((name) => {
+ this.props.setDelayProfileValue({
+ name,
+ value: newDelayProfile[name]
+ });
+ });
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setDelayProfileValue({ name, value });
+ };
+
+ onProtocolChange = ({ value }) => {
+ switch (value) {
+ case 'preferUsenet':
+ this.props.setDelayProfileValue({ name: 'enableUsenet', value: true });
+ this.props.setDelayProfileValue({ name: 'enableTorrent', value: true });
+ this.props.setDelayProfileValue({ name: 'preferredProtocol', value: 'usenet' });
+ break;
+ case 'preferTorrent':
+ this.props.setDelayProfileValue({ name: 'enableUsenet', value: true });
+ this.props.setDelayProfileValue({ name: 'enableTorrent', value: true });
+ this.props.setDelayProfileValue({ name: 'preferredProtocol', value: 'torrent' });
+ break;
+ case 'onlyUsenet':
+ this.props.setDelayProfileValue({ name: 'enableUsenet', value: true });
+ this.props.setDelayProfileValue({ name: 'enableTorrent', value: false });
+ this.props.setDelayProfileValue({ name: 'preferredProtocol', value: 'usenet' });
+ break;
+ case 'onlyTorrent':
+ this.props.setDelayProfileValue({ name: 'enableUsenet', value: false });
+ this.props.setDelayProfileValue({ name: 'enableTorrent', value: true });
+ this.props.setDelayProfileValue({ name: 'preferredProtocol', value: 'torrent' });
+ break;
+ default:
+ throw Error(`Unknown protocol option: ${value}`);
+ }
+ };
+
+ onSavePress = () => {
+ this.props.saveDelayProfile({ id: this.props.id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+}
+
+EditMetadataProfileModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditMetadataProfileModal;
diff --git a/frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalConnector.js b/frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalConnector.js
new file mode 100644
index 000000000..cece2c82c
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalConnector.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditMetadataProfileModal from './EditMetadataProfileModal';
+
+function mapStateToProps() {
+ return {};
+}
+
+const mapDispatchToProps = {
+ clearPendingChanges
+};
+
+class EditMetadataProfileModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.clearPendingChanges({ section: 'settings.metadataProfiles' });
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {id ? translate('EditMetadataProfile') : translate('AddMetadataProfile')}
+
+
+
+ {
+ isFetching &&
+
+ {translate('UnableToAddANewMetadataProfilePleaseTryAgain')}
+
+ }
+
+ {
+ !isFetching && !error &&
+
+ }
+
+
+ {
+ id &&
+
+
+ {translate('Delete')}
+
+
+ }
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditMetadataProfileModalContent.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ isSaving: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ primaryAlbumTypes: PropTypes.arrayOf(PropTypes.object).isRequired,
+ secondaryAlbumTypes: PropTypes.arrayOf(PropTypes.object).isRequired,
+ releaseStatuses: PropTypes.arrayOf(PropTypes.object).isRequired,
+ item: PropTypes.object.isRequired,
+ isInUse: PropTypes.bool.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onDeleteMetadataProfilePress: PropTypes.func
+};
+
+export default EditMetadataProfileModalContent;
diff --git a/frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalContentConnector.js b/frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalContentConnector.js
new file mode 100644
index 000000000..ae9c8f4ce
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/EditMetadataProfileModalContentConnector.js
@@ -0,0 +1,213 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchMetadataProfileSchema, saveMetadataProfile, setMetadataProfileValue } from 'Store/Actions/settingsActions';
+import createProfileInUseSelector from 'Store/Selectors/createProfileInUseSelector';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditMetadataProfileModalContent from './EditMetadataProfileModalContent';
+
+function createPrimaryAlbumTypesSelector() {
+ return createSelector(
+ createProviderSettingsSelector('metadataProfiles'),
+ (metadataProfile) => {
+ const primaryAlbumTypes = metadataProfile.item.primaryAlbumTypes;
+ if (!primaryAlbumTypes || !primaryAlbumTypes.value) {
+ return [];
+ }
+
+ return _.reduceRight(primaryAlbumTypes.value, (result, { allowed, albumType }) => {
+ if (allowed) {
+ result.push({
+ key: albumType.id,
+ value: albumType.name
+ });
+ }
+
+ return result;
+ }, []);
+ }
+ );
+}
+
+function createSecondaryAlbumTypesSelector() {
+ return createSelector(
+ createProviderSettingsSelector('metadataProfiles'),
+ (metadataProfile) => {
+ const secondaryAlbumTypes = metadataProfile.item.secondaryAlbumTypes;
+ if (!secondaryAlbumTypes || !secondaryAlbumTypes.value) {
+ return [];
+ }
+
+ return _.reduceRight(secondaryAlbumTypes.value, (result, { allowed, albumType }) => {
+ if (allowed) {
+ result.push({
+ key: albumType.id,
+ value: albumType.name
+ });
+ }
+
+ return result;
+ }, []);
+ }
+ );
+}
+
+function createReleaseStatusesSelector() {
+ return createSelector(
+ createProviderSettingsSelector('metadataProfiles'),
+ (metadataProfile) => {
+ const releaseStatuses = metadataProfile.item.releaseStatuses;
+ if (!releaseStatuses || !releaseStatuses.value) {
+ return [];
+ }
+
+ return _.reduceRight(releaseStatuses.value, (result, { allowed, releaseStatus }) => {
+ if (allowed) {
+ result.push({
+ key: releaseStatus.id,
+ value: releaseStatus.name
+ });
+ }
+
+ return result;
+ }, []);
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ createProviderSettingsSelector('metadataProfiles'),
+ createPrimaryAlbumTypesSelector(),
+ createSecondaryAlbumTypesSelector(),
+ createReleaseStatusesSelector(),
+ createProfileInUseSelector('metadataProfileId'),
+ (metadataProfile, primaryAlbumTypes, secondaryAlbumTypes, releaseStatuses, isInUse) => {
+ return {
+ primaryAlbumTypes,
+ secondaryAlbumTypes,
+ releaseStatuses,
+ ...metadataProfile,
+ isInUse
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchMetadataProfileSchema,
+ setMetadataProfileValue,
+ saveMetadataProfile
+};
+
+class EditMetadataProfileModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ dragIndex: null,
+ dropIndex: null
+ };
+ }
+
+ componentDidMount() {
+ if (!this.props.id && !this.props.isPopulated) {
+ this.props.fetchMetadataProfileSchema();
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setMetadataProfileValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveMetadataProfile({ id: this.props.id });
+ };
+
+ onMetadataPrimaryTypeItemAllowedChange = (id, allowed) => {
+ const metadataProfile = _.cloneDeep(this.props.item);
+
+ const item = _.find(metadataProfile.primaryAlbumTypes.value, (i) => i.albumType.id === id);
+ item.allowed = allowed;
+
+ this.props.setMetadataProfileValue({
+ name: 'primaryAlbumTypes',
+ value: metadataProfile.primaryAlbumTypes.value
+ });
+ };
+
+ onMetadataSecondaryTypeItemAllowedChange = (id, allowed) => {
+ const metadataProfile = _.cloneDeep(this.props.item);
+
+ const item = _.find(metadataProfile.secondaryAlbumTypes.value, (i) => i.albumType.id === id);
+ item.allowed = allowed;
+
+ this.props.setMetadataProfileValue({
+ name: 'secondaryAlbumTypes',
+ value: metadataProfile.secondaryAlbumTypes.value
+ });
+ };
+
+ onMetadataReleaseStatusItemAllowedChange = (id, allowed) => {
+ const metadataProfile = _.cloneDeep(this.props.item);
+
+ const item = _.find(metadataProfile.releaseStatuses.value, (i) => i.releaseStatus.id === id);
+ item.allowed = allowed;
+
+ this.props.setMetadataProfileValue({
+ name: 'releaseStatuses',
+ value: metadataProfile.releaseStatuses.value
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ if (_.isEmpty(this.props.item.primaryAlbumTypes) && !this.props.isFetching) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ {
+ primaryAlbumTypes.map((item) => {
+ if (!item.allowed) {
+ return null;
+ }
+
+ return (
+
+ {item.albumType.name}
+
+ );
+ })
+ }
+
+
+
+ {
+ secondaryAlbumTypes.map((item) => {
+ if (!item.allowed) {
+ return null;
+ }
+
+ return (
+
+ {item.albumType.name}
+
+ );
+ })
+ }
+
+
+
+ );
+ }
+}
+
+MetadataProfile.propTypes = {
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ primaryAlbumTypes: PropTypes.arrayOf(PropTypes.object).isRequired,
+ secondaryAlbumTypes: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isDeleting: PropTypes.bool.isRequired,
+ onConfirmDeleteMetadataProfile: PropTypes.func.isRequired,
+ onCloneMetadataProfilePress: PropTypes.func.isRequired
+
+};
+
+export default MetadataProfile;
diff --git a/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css
new file mode 100644
index 000000000..f5b69a80e
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css
@@ -0,0 +1,21 @@
+.metadataProfiles {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.addMetadataProfile {
+ composes: metadataProfile from '~./MetadataProfile.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+ font-size: 45px;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
diff --git a/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css.d.ts b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css.d.ts
new file mode 100644
index 000000000..c9469d5f3
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addMetadataProfile': string;
+ 'center': string;
+ 'metadataProfiles': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.js b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.js
new file mode 100644
index 000000000..5e719517f
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/MetadataProfiles.js
@@ -0,0 +1,111 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons, metadataProfileNames } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import EditMetadataProfileModalConnector from './EditMetadataProfileModalConnector';
+import MetadataProfile from './MetadataProfile';
+import styles from './MetadataProfiles.css';
+
+class MetadataProfiles extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isMetadataProfileModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onCloneMetadataProfilePress = (id) => {
+ this.props.onCloneMetadataProfilePress(id);
+ this.setState({ isMetadataProfileModalOpen: true });
+ };
+
+ onEditMetadataProfilePress = () => {
+ this.setState({ isMetadataProfileModalOpen: true });
+ };
+
+ onModalClose = () => {
+ this.setState({ isMetadataProfileModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ items,
+ isDeleting,
+ onConfirmDeleteMetadataProfile,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+
+ {
+ items
+ .filter((item) => item.name !== metadataProfileNames.NONE)
+ .sort(sortByProp('name'))
+ .map((item) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+ );
+ }
+}
+
+MetadataProfiles.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isDeleting: PropTypes.bool.isRequired,
+ onConfirmDeleteMetadataProfile: PropTypes.func.isRequired,
+ onCloneMetadataProfilePress: PropTypes.func.isRequired
+};
+
+export default MetadataProfiles;
diff --git a/frontend/src/Settings/Profiles/Metadata/MetadataProfilesConnector.js b/frontend/src/Settings/Profiles/Metadata/MetadataProfilesConnector.js
new file mode 100644
index 000000000..b4c8c2037
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/MetadataProfilesConnector.js
@@ -0,0 +1,67 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { cloneMetadataProfile, deleteMetadataProfile, fetchMetadataProfiles } from 'Store/Actions/settingsActions';
+import MetadataProfiles from './MetadataProfiles';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ (state) => state.settings.metadataProfiles,
+ (advancedSettings, metadataProfiles) => {
+ return {
+ advancedSettings,
+ ...metadataProfiles
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchMetadataProfiles: fetchMetadataProfiles,
+ dispatchDeleteMetadataProfile: deleteMetadataProfile,
+ dispatchCloneMetadataProfile: cloneMetadataProfile
+};
+
+class MetadataProfilesConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.dispatchFetchMetadataProfiles();
+ }
+
+ //
+ // Listeners
+
+ onConfirmDeleteMetadataProfile = (id) => {
+ this.props.dispatchDeleteMetadataProfile({ id });
+ };
+
+ onCloneMetadataProfilePress = (id) => {
+ this.props.dispatchCloneMetadataProfile({ id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+ );
+ }
+}
+
+PrimaryTypeItem.propTypes = {
+ albumTypeId: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ allowed: PropTypes.bool.isRequired,
+ sortIndex: PropTypes.number.isRequired,
+ onMetadataPrimaryTypeItemAllowedChange: PropTypes.func
+};
+
+export default PrimaryTypeItem;
diff --git a/frontend/src/Settings/Profiles/Metadata/PrimaryTypeItems.js b/frontend/src/Settings/Profiles/Metadata/PrimaryTypeItems.js
new file mode 100644
index 000000000..e70b831b3
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/PrimaryTypeItems.js
@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import FormLabel from 'Components/Form/FormLabel';
+import translate from 'Utilities/String/translate';
+import PrimaryTypeItem from './PrimaryTypeItem';
+import styles from './TypeItems.css';
+
+class PrimaryTypeItems extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ metadataProfileItems,
+ errors,
+ warnings,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ {translate('PrimaryTypes')}
+
+
+
+ {
+ errors.map((error, index) => {
+ return (
+
+ );
+ })
+ }
+
+ {
+ warnings.map((warning, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+ {
+ metadataProfileItems.map(({ allowed, albumType }, index) => {
+ return (
+
+ );
+ }).reverse()
+ }
+
+
+ );
+ }
+}
+
+PrimaryTypeItems.propTypes = {
+ metadataProfileItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+ errors: PropTypes.arrayOf(PropTypes.object),
+ warnings: PropTypes.arrayOf(PropTypes.object),
+ formLabel: PropTypes.string
+};
+
+PrimaryTypeItems.defaultProps = {
+ errors: [],
+ warnings: []
+};
+
+export default PrimaryTypeItems;
diff --git a/frontend/src/Settings/Profiles/Metadata/ReleaseStatusItem.js b/frontend/src/Settings/Profiles/Metadata/ReleaseStatusItem.js
new file mode 100644
index 000000000..a80c72f6a
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/ReleaseStatusItem.js
@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import CheckInput from 'Components/Form/CheckInput';
+import styles from './TypeItem.css';
+
+class ReleaseStatusItem extends Component {
+
+ //
+ // Listeners
+
+ onAllowedChange = ({ value }) => {
+ const {
+ albumTypeId,
+ onMetadataReleaseStatusItemAllowedChange
+ } = this.props;
+
+ onMetadataReleaseStatusItemAllowedChange(albumTypeId, value);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ name,
+ allowed
+ } = this.props;
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+ReleaseStatusItem.propTypes = {
+ albumTypeId: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ allowed: PropTypes.bool.isRequired,
+ sortIndex: PropTypes.number.isRequired,
+ onMetadataReleaseStatusItemAllowedChange: PropTypes.func
+};
+
+export default ReleaseStatusItem;
diff --git a/frontend/src/Settings/Profiles/Metadata/ReleaseStatusItems.js b/frontend/src/Settings/Profiles/Metadata/ReleaseStatusItems.js
new file mode 100644
index 000000000..8fbea3499
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/ReleaseStatusItems.js
@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import FormLabel from 'Components/Form/FormLabel';
+import translate from 'Utilities/String/translate';
+import ReleaseStatusItem from './ReleaseStatusItem';
+import styles from './TypeItems.css';
+
+class ReleaseStatusItems extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ metadataProfileItems,
+ errors,
+ warnings,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ {translate('ReleaseStatuses')}
+
+
+
+ {
+ errors.map((error, index) => {
+ return (
+
+ );
+ })
+ }
+
+ {
+ warnings.map((warning, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+ {
+ metadataProfileItems.map(({ allowed, releaseStatus }, index) => {
+ return (
+
+
+ );
+ }
+}
+
+ReleaseStatusItems.propTypes = {
+ metadataProfileItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+ errors: PropTypes.arrayOf(PropTypes.object),
+ warnings: PropTypes.arrayOf(PropTypes.object),
+ formLabel: PropTypes.string
+};
+
+ReleaseStatusItems.defaultProps = {
+ errors: [],
+ warnings: []
+};
+
+export default ReleaseStatusItems;
diff --git a/frontend/src/Settings/Profiles/Metadata/SecondaryTypeItem.js b/frontend/src/Settings/Profiles/Metadata/SecondaryTypeItem.js
new file mode 100644
index 000000000..52fdd0192
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/SecondaryTypeItem.js
@@ -0,0 +1,60 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import CheckInput from 'Components/Form/CheckInput';
+import styles from './TypeItem.css';
+
+class SecondaryTypeItem extends Component {
+
+ //
+ // Listeners
+
+ onAllowedChange = ({ value }) => {
+ const {
+ albumTypeId,
+ onMetadataSecondaryTypeItemAllowedChange
+ } = this.props;
+
+ onMetadataSecondaryTypeItemAllowedChange(albumTypeId, value);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ name,
+ allowed
+ } = this.props;
+
+ return (
+
+
+
+
+ );
+ }
+}
+
+SecondaryTypeItem.propTypes = {
+ albumTypeId: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ allowed: PropTypes.bool.isRequired,
+ sortIndex: PropTypes.number.isRequired,
+ onMetadataSecondaryTypeItemAllowedChange: PropTypes.func
+};
+
+export default SecondaryTypeItem;
diff --git a/frontend/src/Settings/Profiles/Metadata/SecondaryTypeItems.js b/frontend/src/Settings/Profiles/Metadata/SecondaryTypeItems.js
new file mode 100644
index 000000000..24ca76cf3
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/SecondaryTypeItems.js
@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import FormLabel from 'Components/Form/FormLabel';
+import translate from 'Utilities/String/translate';
+import SecondaryTypeItem from './SecondaryTypeItem';
+import styles from './TypeItems.css';
+
+class SecondaryTypeItems extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ metadataProfileItems,
+ errors,
+ warnings,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ {translate('SecondaryTypes')}
+
+
+
+ {
+ errors.map((error, index) => {
+ return (
+
+ );
+ })
+ }
+
+ {
+ warnings.map((warning, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+ {
+ metadataProfileItems.map(({ allowed, albumType }, index) => {
+ return (
+
+
+ );
+ }
+}
+
+SecondaryTypeItems.propTypes = {
+ metadataProfileItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+ errors: PropTypes.arrayOf(PropTypes.object),
+ warnings: PropTypes.arrayOf(PropTypes.object),
+ formLabel: PropTypes.string
+};
+
+SecondaryTypeItems.defaultProps = {
+ errors: [],
+ warnings: []
+};
+
+export default SecondaryTypeItems;
diff --git a/frontend/src/Settings/Profiles/Metadata/TypeItem.css b/frontend/src/Settings/Profiles/Metadata/TypeItem.css
new file mode 100644
index 000000000..908f3bde6
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/TypeItem.css
@@ -0,0 +1,25 @@
+.metadataProfileItem {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+}
+
+.checkContainer {
+ position: relative;
+ margin-right: 4px;
+ margin-bottom: 7px;
+ margin-left: 8px;
+}
+
+.albumTypeName {
+ display: flex;
+ flex-grow: 1;
+ margin-bottom: 0;
+ margin-left: 2px;
+ font-weight: normal;
+ line-height: 36px;
+}
+
+.isDragging {
+ opacity: 0.25;
+}
diff --git a/frontend/src/Settings/Profiles/Metadata/TypeItem.css.d.ts b/frontend/src/Settings/Profiles/Metadata/TypeItem.css.d.ts
new file mode 100644
index 000000000..618c15cee
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/TypeItem.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'albumTypeName': string;
+ 'checkContainer': string;
+ 'isDragging': string;
+ 'metadataProfileItem': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Metadata/TypeItems.css b/frontend/src/Settings/Profiles/Metadata/TypeItems.css
new file mode 100644
index 000000000..3bce22799
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/TypeItems.css
@@ -0,0 +1,6 @@
+.albumTypes {
+ margin-top: 10px;
+ /* TODO: This should consider the number of types in the list */
+ min-height: 200px;
+ user-select: none;
+}
diff --git a/frontend/src/Settings/Profiles/Metadata/TypeItems.css.d.ts b/frontend/src/Settings/Profiles/Metadata/TypeItems.css.d.ts
new file mode 100644
index 000000000..5ab3f9ea1
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Metadata/TypeItems.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'albumTypes': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Profiles.js b/frontend/src/Settings/Profiles/Profiles.js
new file mode 100644
index 000000000..985214fc1
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Profiles.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { DndProvider } from 'react-dnd-multi-backend';
+import HTML5toTouch from 'react-dnd-multi-backend/dist/esm/HTML5toTouch';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
+import DelayProfilesConnector from './Delay/DelayProfilesConnector';
+import MetadataProfilesConnector from './Metadata/MetadataProfilesConnector';
+import QualityProfilesConnector from './Quality/QualityProfilesConnector';
+import ReleaseProfilesConnector from './Release/ReleaseProfilesConnector';
+
+// Only a single DragDrop Context can exist so it's done here to allow editing
+// quality profiles and reordering delay profiles to work.
+
+class Profiles extends Component {
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+}
+
+export default Profiles;
diff --git a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModal.js b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModal.js
new file mode 100644
index 000000000..d6f2b8ed0
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModal.js
@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import EditQualityProfileModalContentConnector from './EditQualityProfileModalContentConnector';
+
+class EditQualityProfileModal extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ height: 'auto'
+ };
+ }
+
+ //
+ // Listeners
+
+ onContentHeightChange = (height) => {
+ if (this.state.height === 'auto' || height > this.state.height) {
+ this.setState({ height });
+ }
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ isOpen,
+ onModalClose,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ );
+ }
+}
+
+EditQualityProfileModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditQualityProfileModal;
diff --git a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalConnector.js b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalConnector.js
new file mode 100644
index 000000000..5d7f48d29
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalConnector.js
@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditQualityProfileModal from './EditQualityProfileModal';
+
+function mapStateToProps() {
+ return {};
+}
+
+const mapDispatchToProps = {
+ clearPendingChanges
+};
+
+class EditQualityProfileModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.clearPendingChanges({ section: 'settings.qualityProfiles' });
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+ {id ? translate('EditQualityProfile') : translate('AddQualityProfile')}
+
+
+
+
+
+
+ {
+ isFetching &&
+
+ }
+
+ {
+ !isFetching && !!error &&
+
+ {translate('UnableToAddANewQualityProfilePleaseTryAgain')}
+
+ }
+
+ {
+ !isFetching && !error &&
+
+
+ }
+
+
+
+
+
+ {
+ id ?
+
+
+ {translate('Delete')}
+
+
:
+ null
+ }
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+
+ );
+ }
+}
+
+EditQualityProfileModalContent.propTypes = {
+ editGroups: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ isSaving: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+ customFormats: PropTypes.arrayOf(PropTypes.object).isRequired,
+ item: PropTypes.object.isRequired,
+ isInUse: PropTypes.bool.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onCutoffChange: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onContentHeightChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onDeleteQualityProfilePress: PropTypes.func
+};
+
+export default EditQualityProfileModalContent;
diff --git a/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContentConnector.js b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContentConnector.js
new file mode 100644
index 000000000..de92e998b
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/EditQualityProfileModalContentConnector.js
@@ -0,0 +1,488 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchQualityProfileSchema, saveQualityProfile, setQualityProfileValue } from 'Store/Actions/settingsActions';
+import createProfileInUseSelector from 'Store/Selectors/createProfileInUseSelector';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditQualityProfileModalContent from './EditQualityProfileModalContent';
+
+function getQualityItemGroupId(qualityProfile) {
+ // Get items with an `id` and filter out null/undefined values
+ const ids = _.filter(_.map(qualityProfile.items.value, 'id'), (i) => i != null);
+
+ return Math.max(1000, ...ids) + 1;
+}
+
+function parseIndex(index) {
+ const split = index.split('.');
+
+ if (split.length === 1) {
+ return [
+ null,
+ parseInt(split[0]) - 1
+ ];
+ }
+
+ return [
+ parseInt(split[0]) - 1,
+ parseInt(split[1]) - 1
+ ];
+}
+
+function createQualitiesSelector() {
+ return createSelector(
+ createProviderSettingsSelector('qualityProfiles'),
+ (qualityProfile) => {
+ const items = qualityProfile.item.items;
+ if (!items || !items.value) {
+ return [];
+ }
+
+ return _.reduceRight(items.value, (result, { allowed, id, name, quality }) => {
+ if (allowed) {
+ if (id) {
+ result.push({
+ key: id,
+ value: name
+ });
+ } else {
+ result.push({
+ key: quality.id,
+ value: quality.name
+ });
+ }
+ }
+
+ return result;
+ }, []);
+ }
+ );
+}
+
+function createFormatsSelector() {
+ return createSelector(
+ createProviderSettingsSelector('qualityProfiles'),
+ (customFormat) => {
+ const items = customFormat.item.formatItems;
+ if (!items || !items.value) {
+ return [];
+ }
+
+ return _.reduceRight(items.value, (result, { id, name, format, score }) => {
+ if (id) {
+ result.push({
+ key: id,
+ value: name,
+ score
+ });
+ } else {
+ result.push({
+ key: format,
+ value: name,
+ score
+ });
+ }
+
+ return result;
+ }, []);
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ createProviderSettingsSelector('qualityProfiles'),
+ createQualitiesSelector(),
+ createFormatsSelector(),
+ createProfileInUseSelector('qualityProfileId'),
+ (qualityProfile, qualities, customFormats, isInUse) => {
+ return {
+ qualities,
+ customFormats,
+ ...qualityProfile,
+ isInUse
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchQualityProfileSchema,
+ setQualityProfileValue,
+ saveQualityProfile
+};
+
+class EditQualityProfileModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ dragQualityIndex: null,
+ dropQualityIndex: null,
+ dropPosition: null,
+ editGroups: false
+ };
+ }
+
+ componentDidMount() {
+ if (!this.props.id && !this.props.isPopulated) {
+ this.props.fetchQualityProfileSchema();
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Control
+
+ ensureCutoff = (qualityProfile) => {
+ const cutoff = qualityProfile.cutoff.value;
+
+ const cutoffItem = _.find(qualityProfile.items.value, (i) => {
+ if (!cutoff) {
+ return false;
+ }
+
+ return i.id === cutoff || (i.quality && i.quality.id === cutoff);
+ });
+
+ // If the cutoff isn't allowed anymore or there isn't a cutoff set one
+ if (!cutoff || !cutoffItem || !cutoffItem.allowed) {
+ const firstAllowed = _.find(qualityProfile.items.value, { allowed: true });
+ let cutoffId = null;
+
+ if (firstAllowed) {
+ cutoffId = firstAllowed.quality ? firstAllowed.quality.id : firstAllowed.id;
+ }
+
+ this.props.setQualityProfileValue({ name: 'cutoff', value: cutoffId });
+ }
+ };
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setQualityProfileValue({ name, value });
+ };
+
+ onCutoffChange = ({ name, value }) => {
+ const id = parseInt(value);
+ const item = _.find(this.props.item.items.value, (i) => {
+ if (i.quality) {
+ return i.quality.id === id;
+ }
+
+ return i.id === id;
+ });
+
+ const cutoffId = item.quality ? item.quality.id : item.id;
+
+ this.props.setQualityProfileValue({ name, value: cutoffId });
+ };
+
+ onSavePress = () => {
+ this.props.saveQualityProfile({ id: this.props.id });
+ };
+
+ onQualityProfileItemAllowedChange = (id, allowed) => {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const items = qualityProfile.items.value;
+ const item = _.find(qualityProfile.items.value, (i) => i.quality && i.quality.id === id);
+
+ item.allowed = allowed;
+
+ this.props.setQualityProfileValue({
+ name: 'items',
+ value: items
+ });
+
+ this.ensureCutoff(qualityProfile);
+ };
+
+ onQualityProfileFormatItemScoreChange = (id, score) => {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const formatItems = qualityProfile.formatItems.value;
+ const item = _.find(qualityProfile.formatItems.value, (i) => i.format === id);
+
+ item.score = score;
+
+ this.props.setQualityProfileValue({
+ name: 'formatItems',
+ value: formatItems
+ });
+ };
+
+ onItemGroupAllowedChange = (id, allowed) => {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const items = qualityProfile.items.value;
+ const item = _.find(qualityProfile.items.value, (i) => i.id === id);
+
+ item.allowed = allowed;
+
+ // Update each item in the group (for consistency only)
+ item.items.forEach((i) => {
+ i.allowed = allowed;
+ });
+
+ this.props.setQualityProfileValue({
+ name: 'items',
+ value: items
+ });
+
+ this.ensureCutoff(qualityProfile);
+ };
+
+ onItemGroupNameChange = (id, name) => {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const items = qualityProfile.items.value;
+ const group = _.find(items, (i) => i.id === id);
+
+ group.name = name;
+
+ this.props.setQualityProfileValue({
+ name: 'items',
+ value: items
+ });
+ };
+
+ onCreateGroupPress = (id) => {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const items = qualityProfile.items.value;
+ const item = _.find(items, (i) => i.quality && i.quality.id === id);
+ const index = items.indexOf(item);
+ const groupId = getQualityItemGroupId(qualityProfile);
+
+ const group = {
+ id: groupId,
+ name: item.quality.name,
+ allowed: item.allowed,
+ items: [
+ item
+ ]
+ };
+
+ // Add the group in the same location the quality item was in.
+ items.splice(index, 1, group);
+
+ this.props.setQualityProfileValue({
+ name: 'items',
+ value: items
+ });
+
+ this.ensureCutoff(qualityProfile);
+ };
+
+ onDeleteGroupPress = (id) => {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const items = qualityProfile.items.value;
+ const group = _.find(items, (i) => i.id === id);
+ const index = items.indexOf(group);
+
+ // Add the items in the same location the group was in
+ items.splice(index, 1, ...group.items);
+
+ this.props.setQualityProfileValue({
+ name: 'items',
+ value: items
+ });
+
+ this.ensureCutoff(qualityProfile);
+ };
+
+ onQualityProfileItemDragMove = (options) => {
+ const {
+ dragQualityIndex,
+ dropQualityIndex,
+ dropPosition
+ } = options;
+
+ const [dragGroupIndex, dragItemIndex] = parseIndex(dragQualityIndex);
+ const [dropGroupIndex, dropItemIndex] = parseIndex(dropQualityIndex);
+
+ if (
+ (dropPosition === 'below' && dropItemIndex - 1 === dragItemIndex) ||
+ (dropPosition === 'above' && dropItemIndex + 1 === dragItemIndex)
+ ) {
+ if (
+ this.state.dragQualityIndex != null &&
+ this.state.dropQualityIndex != null &&
+ this.state.dropPosition != null
+ ) {
+ this.setState({
+ dragQualityIndex: null,
+ dropQualityIndex: null,
+ dropPosition: null
+ });
+ }
+
+ return;
+ }
+
+ let adjustedDropQualityIndex = dropQualityIndex;
+
+ // Correct dragging out of a group to the position above
+ if (
+ dropPosition === 'above' &&
+ dragGroupIndex !== dropGroupIndex &&
+ dropGroupIndex != null
+ ) {
+ // Add 1 to the group index and 2 to the item index so it's inserted above in the correct group
+ adjustedDropQualityIndex = `${dropGroupIndex + 1}.${dropItemIndex + 2}`;
+ }
+
+ // Correct inserting above outside a group
+ if (
+ dropPosition === 'above' &&
+ dragGroupIndex !== dropGroupIndex &&
+ dropGroupIndex == null
+ ) {
+ // Add 2 to the item index so it's entered in the correct place
+ adjustedDropQualityIndex = `${dropItemIndex + 2}`;
+ }
+
+ // Correct inserting below a quality within the same group (when moving a lower item)
+ if (
+ dropPosition === 'below' &&
+ dragGroupIndex === dropGroupIndex &&
+ dropGroupIndex != null &&
+ dragItemIndex < dropItemIndex
+ ) {
+ // Add 1 to the group index leave the item index
+ adjustedDropQualityIndex = `${dropGroupIndex + 1}.${dropItemIndex}`;
+ }
+
+ // Correct inserting below a quality outside a group (when moving a lower item)
+ if (
+ dropPosition === 'below' &&
+ dragGroupIndex === dropGroupIndex &&
+ dropGroupIndex == null &&
+ dragItemIndex < dropItemIndex
+ ) {
+ // Leave the item index so it's inserted below the item
+ adjustedDropQualityIndex = `${dropItemIndex}`;
+ }
+
+ if (
+ dragQualityIndex !== this.state.dragQualityIndex ||
+ adjustedDropQualityIndex !== this.state.dropQualityIndex ||
+ dropPosition !== this.state.dropPosition
+ ) {
+ this.setState({
+ dragQualityIndex,
+ dropQualityIndex: adjustedDropQualityIndex,
+ dropPosition
+ });
+ }
+ };
+
+ onQualityProfileItemDragEnd = (didDrop) => {
+ const {
+ dragQualityIndex,
+ dropQualityIndex
+ } = this.state;
+
+ if (didDrop && dropQualityIndex != null) {
+ const qualityProfile = _.cloneDeep(this.props.item);
+ const items = qualityProfile.items.value;
+ const [dragGroupIndex, dragItemIndex] = parseIndex(dragQualityIndex);
+ const [dropGroupIndex, dropItemIndex] = parseIndex(dropQualityIndex);
+
+ let item = null;
+ let dropGroup = null;
+
+ // Get the group before moving anything so we know the correct place to drop it.
+ if (dropGroupIndex != null) {
+ dropGroup = items[dropGroupIndex];
+ }
+
+ if (dragGroupIndex == null) {
+ item = items.splice(dragItemIndex, 1)[0];
+ } else {
+ const group = items[dragGroupIndex];
+ item = group.items.splice(dragItemIndex, 1)[0];
+
+ // If the group is now empty, destroy it.
+ if (!group.items.length) {
+ items.splice(dragGroupIndex, 1);
+ }
+ }
+
+ if (dropGroupIndex == null) {
+ items.splice(dropItemIndex, 0, item);
+ } else {
+ dropGroup.items.splice(dropItemIndex, 0, item);
+ }
+
+ this.props.setQualityProfileValue({
+ name: 'items',
+ value: items
+ });
+
+ this.ensureCutoff(qualityProfile);
+ }
+
+ this.setState({
+ dragQualityIndex: null,
+ dropQualityIndex: null,
+ dropPosition: null
+ });
+ };
+
+ onToggleEditGroupsMode = () => {
+ this.setState({ editGroups: !this.state.editGroups });
+ };
+
+ //
+ // Render
+
+ render() {
+ if (_.isEmpty(this.props.item.items) && !this.props.isFetching) {
+ return null;
+ }
+
+ return (
+
+
+
+
+ {
+ items.map((item) => {
+ if (!item.allowed) {
+ return null;
+ }
+
+ if (item.quality) {
+ const isCutoff = upgradeAllowed && item.quality.id === cutoff;
+
+ return (
+
+ {item.quality.name}
+
+ );
+ }
+
+ const isCutoff = upgradeAllowed && item.id === cutoff;
+
+ return (
+
+ {item.name}
+
+ }
+ tooltip={
+
+ {
+ item.items.map((groupItem) => {
+ return (
+
+ {groupItem.quality.name}
+
+ );
+ })
+ }
+
+ }
+ kind={kinds.INVERSE}
+ position={tooltipPositions.TOP}
+ />
+ );
+ })
+ }
+
+ );
+ }
+}
+
+QualityProfile.propTypes = {
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ upgradeAllowed: PropTypes.bool.isRequired,
+ cutoff: PropTypes.number.isRequired,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isDeleting: PropTypes.bool.isRequired,
+ onConfirmDeleteQualityProfile: PropTypes.func.isRequired,
+ onCloneQualityProfilePress: PropTypes.func.isRequired
+};
+
+export default QualityProfile;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css
new file mode 100644
index 000000000..4f235ba35
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css
@@ -0,0 +1,45 @@
+.qualityProfileFormatItemContainer {
+ display: flex;
+ padding: $qualityProfileItemDragSourcePadding 0;
+ width: 100%;
+}
+
+.qualityProfileFormatItem {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ border: 1px solid #aaa;
+ border-radius: 4px;
+ background: var(--inputBackgroundColor);
+}
+
+.formatNameContainer {
+ display: flex;
+ flex-grow: 1;
+ margin-bottom: 0;
+ margin-left: 14px;
+ width: 100%;
+ font-weight: normal;
+ line-height: $qualityProfileItemHeight;
+ cursor: text;
+}
+
+.formatName {
+ display: flex;
+ flex-grow: 1;
+}
+
+.scoreContainer {
+ display: flex;
+ flex-grow: 0;
+}
+
+.scoreInput {
+ composes: input from '~Components/Form/Input.css';
+
+ width: 100px;
+ height: 30px;
+ border: unset;
+ border-radius: unset;
+ background-color: unset;
+}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css.d.ts b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css.d.ts
new file mode 100644
index 000000000..faa350dcd
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'formatName': string;
+ 'formatNameContainer': string;
+ 'qualityProfileFormatItem': string;
+ 'qualityProfileFormatItemContainer': string;
+ 'scoreContainer': string;
+ 'scoreInput': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.js b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.js
new file mode 100644
index 000000000..5ef4add2d
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItem.js
@@ -0,0 +1,68 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import NumberInput from 'Components/Form/NumberInput';
+import styles from './QualityProfileFormatItem.css';
+
+class QualityProfileFormatItem extends Component {
+
+ //
+ // Listeners
+
+ onScoreChange = ({ value }) => {
+ const {
+ formatId
+ } = this.props;
+
+ this.props.onScoreChange(formatId, value);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ name,
+ score
+ } = this.props;
+
+ return (
+
+ );
+ }
+}
+
+QualityProfileFormatItem.propTypes = {
+ formatId: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ score: PropTypes.number.isRequired,
+ onScoreChange: PropTypes.func
+};
+
+QualityProfileFormatItem.defaultProps = {
+ // To handle the case score is deleted during edit
+ score: 0
+};
+
+export default QualityProfileFormatItem;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css
new file mode 100644
index 000000000..def839960
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css
@@ -0,0 +1,31 @@
+.formats {
+ margin-top: 10px;
+ /* TODO: This should consider the number of languages in the list */
+ user-select: none;
+}
+
+.headerContainer {
+ display: flex;
+ font-weight: bold;
+ line-height: 35px;
+}
+
+.headerTitle {
+ display: flex;
+ flex-grow: 1;
+}
+
+.headerScore {
+ display: flex;
+ flex-grow: 0;
+ padding-left: 16px;
+ width: 100px;
+}
+
+.addCustomFormatMessage {
+ max-width: $formGroupExtraSmallWidth;
+ color: var(--helpTextColor);
+ text-align: center;
+ font-weight: 300;
+ font-size: 20px;
+}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css.d.ts b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css.d.ts
new file mode 100644
index 000000000..75c081099
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addCustomFormatMessage': string;
+ 'formats': string;
+ 'headerContainer': string;
+ 'headerScore': string;
+ 'headerTitle': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js
new file mode 100644
index 000000000..9ec4bb841
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileFormatItems.js
@@ -0,0 +1,160 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FormGroup from 'Components/Form/FormGroup';
+import FormInputHelpText from 'Components/Form/FormInputHelpText';
+import FormLabel from 'Components/Form/FormLabel';
+import Link from 'Components/Link/Link';
+import { sizes } from 'Helpers/Props';
+import QualityProfileFormatItem from './QualityProfileFormatItem';
+import styles from './QualityProfileFormatItems.css';
+
+function calcOrder(profileFormatItems) {
+ const items = profileFormatItems.reduce((acc, cur, index) => {
+ acc[cur.format] = index;
+ return acc;
+ }, {});
+
+ return [...profileFormatItems].sort((a, b) => {
+ if (b.score !== a.score) {
+ return b.score - a.score;
+ }
+
+ return a.name.localeCompare(b.name, undefined, { numeric: true });
+ }).map((x) => items[x.format]);
+}
+
+class QualityProfileFormatItems extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ order: calcOrder(this.props.profileFormatItems)
+ };
+ }
+
+ //
+ // Listeners
+
+ onScoreChange = (formatId, value) => {
+ const {
+ onQualityProfileFormatItemScoreChange
+ } = this.props;
+
+ onQualityProfileFormatItemScoreChange(formatId, value);
+ this.reorderItems();
+ };
+
+ reorderItems = _.debounce(() => this.setState({ order: calcOrder(this.props.profileFormatItems) }), 1000);
+
+ //
+ // Render
+
+ render() {
+ const {
+ profileFormatItems,
+ errors,
+ warnings
+ } = this.props;
+
+ const {
+ order
+ } = this.state;
+
+ if (profileFormatItems.length < 1) {
+ return (
+
+ {'Want more control over which downloads are preferred? Add a'}
+
+ );
+ }
+
+ return (
+
+
+ Custom Formats
+
+
+
+
+
+ {
+ errors.map((error, index) => {
+ return (
+
+ );
+ })
+ }
+
+ {
+ warnings.map((warning, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+ Custom Format
+
+
+ Score
+
+
+ {
+ order.map((index) => {
+ const {
+ format,
+ name,
+ score
+ } = profileFormatItems[index];
+ return (
+
+ );
+ })
+ }
+
+
+ );
+ }
+}
+
+QualityProfileFormatItems.propTypes = {
+ profileFormatItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+ errors: PropTypes.arrayOf(PropTypes.object),
+ warnings: PropTypes.arrayOf(PropTypes.object),
+ onQualityProfileFormatItemScoreChange: PropTypes.func
+};
+
+QualityProfileFormatItems.defaultProps = {
+ errors: [],
+ warnings: []
+};
+
+export default QualityProfileFormatItems;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
new file mode 100644
index 000000000..c10bcd200
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css
@@ -0,0 +1,86 @@
+.qualityProfileItem {
+ display: flex;
+ align-items: stretch;
+ width: 100%;
+ border: 1px solid #aaa;
+ border-radius: 4px;
+ background: var(--inputBackgroundColor);
+
+ &.isInGroup {
+ border-style: dashed;
+ }
+}
+
+.checkInputContainer {
+ position: relative;
+ margin-right: 4px;
+ margin-bottom: 5px;
+ margin-left: 8px;
+}
+
+.checkInput {
+ composes: input from '~Components/Form/CheckInput.css';
+
+ margin-top: 5px;
+}
+
+.qualityNameContainer {
+ display: flex;
+ flex-grow: 1;
+ margin-bottom: 0;
+ margin-left: 2px;
+ font-weight: normal;
+ line-height: $qualityProfileItemHeight;
+ cursor: pointer;
+}
+
+.qualityName {
+ &.isInGroup {
+ margin-left: 14px;
+ }
+
+ &.notAllowed {
+ color: #c6c6c6;
+ }
+}
+
+.createGroupButton {
+ composes: buton from '~Components/Link/IconButton.css';
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ margin-right: 5px;
+ margin-left: 8px;
+ width: 20px;
+}
+
+.dragHandle {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ margin-left: auto;
+ width: $dragHandleWidth;
+ text-align: center;
+ cursor: grab;
+}
+
+.dragIcon {
+ top: 0;
+}
+
+.isDragging {
+ opacity: 0.25;
+}
+
+.isPreview {
+ .qualityName {
+ margin-left: 14px;
+
+ &.isInGroup {
+ margin-left: 28px;
+ }
+ }
+}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css.d.ts b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css.d.ts
new file mode 100644
index 000000000..2f18ba539
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.css.d.ts
@@ -0,0 +1,18 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'checkInput': string;
+ 'checkInputContainer': string;
+ 'createGroupButton': string;
+ 'dragHandle': string;
+ 'dragIcon': string;
+ 'isDragging': string;
+ 'isInGroup': string;
+ 'isPreview': string;
+ 'notAllowed': string;
+ 'qualityName': string;
+ 'qualityNameContainer': string;
+ 'qualityProfileItem': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItem.js b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.js
new file mode 100644
index 000000000..5550464cb
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItem.js
@@ -0,0 +1,132 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import CheckInput from 'Components/Form/CheckInput';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './QualityProfileItem.css';
+
+class QualityProfileItem extends Component {
+
+ //
+ // Listeners
+
+ onAllowedChange = ({ value }) => {
+ const {
+ qualityId,
+ onQualityProfileItemAllowedChange
+ } = this.props;
+
+ onQualityProfileItemAllowedChange(qualityId, value);
+ };
+
+ onCreateGroupPress = () => {
+ const {
+ qualityId,
+ onCreateGroupPress
+ } = this.props;
+
+ onCreateGroupPress(qualityId);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ editGroups,
+ isPreview,
+ groupId,
+ name,
+ allowed,
+ isDragging,
+ isOverCurrent,
+ connectDragSource
+ } = this.props;
+
+ return (
+
+
+ {
+ editGroups && !groupId && !isPreview &&
+
+ {name}
+
+
+
+ {
+ connectDragSource(
+
+
+ )
+ }
+
+
+
+
+ );
+ }
+}
+
+QualityProfileItemDragPreview.propTypes = {
+ item: PropTypes.object,
+ itemType: PropTypes.string,
+ currentOffset: PropTypes.shape({
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired
+ })
+};
+
+export default DragLayer(collectDragLayer)(QualityProfileItemDragPreview);
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.css b/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.css
new file mode 100644
index 000000000..d5061cc95
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.css
@@ -0,0 +1,18 @@
+.qualityProfileItemDragSource {
+ padding: $qualityProfileItemDragSourcePadding 0;
+}
+
+.qualityProfileItemPlaceholder {
+ width: 100%;
+ height: $qualityProfileItemHeight;
+ border: 1px dotted #aaa;
+ border-radius: 4px;
+}
+
+.qualityProfileItemPlaceholderBefore {
+ margin-bottom: 8px;
+}
+
+.qualityProfileItemPlaceholderAfter {
+ margin-top: 8px;
+}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.css.d.ts b/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.css.d.ts
new file mode 100644
index 000000000..32d2e00a7
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'qualityProfileItemDragSource': string;
+ 'qualityProfileItemPlaceholder': string;
+ 'qualityProfileItemPlaceholderAfter': string;
+ 'qualityProfileItemPlaceholderBefore': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.js b/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.js
new file mode 100644
index 000000000..b47470171
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileItemDragSource.js
@@ -0,0 +1,241 @@
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { DragSource, DropTarget } from 'react-dnd';
+import { findDOMNode } from 'react-dom';
+import { QUALITY_PROFILE_ITEM } from 'Helpers/dragTypes';
+import QualityProfileItem from './QualityProfileItem';
+import QualityProfileItemGroup from './QualityProfileItemGroup';
+import styles from './QualityProfileItemDragSource.css';
+
+const qualityProfileItemDragSource = {
+ beginDrag(props) {
+ const {
+ editGroups,
+ qualityIndex,
+ groupId,
+ qualityId,
+ name,
+ allowed
+ } = props;
+
+ return {
+ editGroups,
+ qualityIndex,
+ groupId,
+ qualityId,
+ isGroup: !qualityId,
+ name,
+ allowed
+ };
+ },
+
+ endDrag(props, monitor, component) {
+ props.onQualityProfileItemDragEnd(monitor.didDrop());
+ }
+};
+
+const qualityProfileItemDropTarget = {
+ hover(props, monitor, component) {
+ const {
+ qualityIndex: dragQualityIndex,
+ isGroup: isDragGroup
+ } = monitor.getItem();
+
+ const dropQualityIndex = props.qualityIndex;
+ const isDropGroupItem = !!(props.qualityId && props.groupId);
+
+ // Use childNodeIndex to select the correct node to get the middle of so
+ // we don't bounce between above and below causing rapid setState calls.
+ const childNodeIndex = component.props.isOverCurrent && component.props.isDraggingUp ? 1 :0;
+ const componentDOMNode = findDOMNode(component).children[childNodeIndex];
+ const hoverBoundingRect = componentDOMNode.getBoundingClientRect();
+ const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+ const clientOffset = monitor.getClientOffset();
+ const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+ // If we're hovering over a child don't trigger on the parent
+ if (!monitor.isOver({ shallow: true })) {
+ return;
+ }
+
+ // Don't show targets for dropping on self
+ if (dragQualityIndex === dropQualityIndex) {
+ return;
+ }
+
+ // Don't allow a group to be dropped inside a group
+ if (isDragGroup && isDropGroupItem) {
+ return;
+ }
+
+ let dropPosition = null;
+
+ // Determine drop position based on position over target
+ if (hoverClientY > hoverMiddleY) {
+ dropPosition = 'below';
+ } else if (hoverClientY < hoverMiddleY) {
+ dropPosition = 'above';
+ } else {
+ return;
+ }
+
+ props.onQualityProfileItemDragMove({
+ dragQualityIndex,
+ dropQualityIndex,
+ dropPosition
+ });
+ }
+};
+
+function collectDragSource(connect, monitor) {
+ return {
+ connectDragSource: connect.dragSource(),
+ isDragging: monitor.isDragging()
+ };
+}
+
+function collectDropTarget(connect, monitor) {
+ return {
+ connectDropTarget: connect.dropTarget(),
+ isOver: monitor.isOver(),
+ isOverCurrent: monitor.isOver({ shallow: true })
+ };
+}
+
+class QualityProfileItemDragSource extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ editGroups,
+ groupId,
+ qualityId,
+ name,
+ allowed,
+ items,
+ qualityIndex,
+ isDragging,
+ isDraggingUp,
+ isDraggingDown,
+ isOverCurrent,
+ connectDragSource,
+ connectDropTarget,
+ onCreateGroupPress,
+ onDeleteGroupPress,
+ onQualityProfileItemAllowedChange,
+ onItemGroupAllowedChange,
+ onItemGroupNameChange,
+ onQualityProfileItemDragMove,
+ onQualityProfileItemDragEnd
+ } = this.props;
+
+ const isBefore = !isDragging && isDraggingUp && isOverCurrent;
+ const isAfter = !isDragging && isDraggingDown && isOverCurrent;
+
+ return connectDropTarget(
+
+ {
+ isBefore &&
+
+ }
+
+ {
+ !!groupId && qualityId == null &&
+
+ }
+
+ {
+ qualityId != null &&
+
+ }
+
+ {
+ isAfter &&
+
+ }
+
+
+ {
+ editGroups &&
+
+
+ }
+
+ {
+ !editGroups &&
+
+
+
+ {name}
+
+
+
+ {
+ items.map(({ quality }) => {
+ return (
+
+ {quality.name}
+
+ );
+ }).reverse()
+ }
+
+
+ }
+
+ {
+ connectDragSource(
+
+
+ )
+ }
+
+
+ {
+ editGroups &&
+
+ {
+ items.map(({ quality }, index) => {
+ return (
+
+ }
+
+
+ Qualities
+
+
+
+
+
+ {
+ errors.map((error, index) => {
+ return (
+
+ );
+ })
+ }
+
+ {
+ warnings.map((warning, index) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+
+ {
+ qualityProfileItems.map(({ id, name, allowed, quality, items }, index) => {
+ const identifier = quality ? quality.id : id;
+
+ return (
+
+
+
+ );
+ }
+}
+
+QualityProfileItems.propTypes = {
+ editGroups: PropTypes.bool.isRequired,
+ dragQualityIndex: PropTypes.string,
+ dropQualityIndex: PropTypes.string,
+ dropPosition: PropTypes.string,
+ qualityProfileItems: PropTypes.arrayOf(PropTypes.object).isRequired,
+ errors: PropTypes.arrayOf(PropTypes.object),
+ warnings: PropTypes.arrayOf(PropTypes.object),
+ onToggleEditGroupsMode: PropTypes.func.isRequired
+};
+
+QualityProfileItems.defaultProps = {
+ errors: [],
+ warnings: []
+};
+
+export default QualityProfileItems;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
new file mode 100644
index 000000000..bf13815ff
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfileNameConnector.js
@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createQualityProfileSelector from 'Store/Selectors/createQualityProfileSelector';
+
+function createMapStateToProps() {
+ return createSelector(
+ createQualityProfileSelector(),
+ (qualityProfile) => {
+ return {
+ name: qualityProfile.name
+ };
+ }
+ );
+}
+
+function QualityProfileNameConnector({ name, ...otherProps }) {
+ return (
+
+ {name}
+
+ );
+}
+
+QualityProfileNameConnector.propTypes = {
+ qualityProfileId: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired
+};
+
+export default connect(createMapStateToProps)(QualityProfileNameConnector);
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css
new file mode 100644
index 000000000..32dad3fac
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css
@@ -0,0 +1,21 @@
+.qualityProfiles {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.addQualityProfile {
+ composes: qualityProfile from '~./QualityProfile.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+ font-size: 45px;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.css.d.ts b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css.d.ts
new file mode 100644
index 000000000..f3033cab2
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addQualityProfile': string;
+ 'center': string;
+ 'qualityProfiles': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfiles.js b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
new file mode 100644
index 000000000..c2405447b
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfiles.js
@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import EditQualityProfileModalConnector from './EditQualityProfileModalConnector';
+import QualityProfile from './QualityProfile';
+import styles from './QualityProfiles.css';
+
+class QualityProfiles extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isQualityProfileModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onCloneQualityProfilePress = (id) => {
+ this.props.onCloneQualityProfilePress(id);
+ this.setState({ isQualityProfileModalOpen: true });
+ };
+
+ onEditQualityProfilePress = () => {
+ this.setState({ isQualityProfileModalOpen: true });
+ };
+
+ onModalClose = () => {
+ this.setState({ isQualityProfileModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ items,
+ isDeleting,
+ onConfirmDeleteQualityProfile,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+ );
+ }
+}
+
+QualityProfiles.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ isDeleting: PropTypes.bool.isRequired,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteQualityProfile: PropTypes.func.isRequired,
+ onCloneQualityProfilePress: PropTypes.func.isRequired
+};
+
+export default QualityProfiles;
diff --git a/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js b/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js
new file mode 100644
index 000000000..4cb318463
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Quality/QualityProfilesConnector.js
@@ -0,0 +1,63 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { cloneQualityProfile, deleteQualityProfile, fetchQualityProfiles } from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
+import QualityProfiles from './QualityProfiles';
+
+function createMapStateToProps() {
+ return createSelector(
+ createSortedSectionSelector('settings.qualityProfiles', sortByProp('name')),
+ (qualityProfiles) => qualityProfiles
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchQualityProfiles: fetchQualityProfiles,
+ dispatchDeleteQualityProfile: deleteQualityProfile,
+ dispatchCloneQualityProfile: cloneQualityProfile
+};
+
+class QualityProfilesConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.dispatchFetchQualityProfiles();
+ }
+
+ //
+ // Listeners
+
+ onConfirmDeleteQualityProfile = (id) => {
+ this.props.dispatchDeleteQualityProfile({ id });
+ };
+
+ onCloneQualityProfilePress = (id) => {
+ this.props.dispatchCloneQualityProfile({ id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+}
+
+EditReleaseProfileModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditReleaseProfileModal;
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalConnector.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalConnector.js
new file mode 100644
index 000000000..e846ff6ff
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalConnector.js
@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditReleaseProfileModal from './EditReleaseProfileModal';
+
+const mapDispatchToProps = {
+ clearPendingChanges
+};
+
+class EditReleaseProfileModalConnector extends Component {
+
+ //
+ // Listeners
+
+ onModalClose = () => {
+ this.props.clearPendingChanges({ section: 'settings.releaseProfiles' });
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {id ? translate('EditReleaseProfile') : translate('AddReleaseProfile')}
+
+
+
+
+
+
+ {
+ id &&
+
+ {translate('Delete')}
+
+ }
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditReleaseProfileModalContent.propTypes = {
+ isSaving: PropTypes.bool.isRequired,
+ saveError: PropTypes.object,
+ item: PropTypes.object.isRequired,
+ onInputChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ onDeleteReleaseProfilePress: PropTypes.func
+};
+
+export default EditReleaseProfileModalContent;
diff --git a/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js
new file mode 100644
index 000000000..b14d72269
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Release/EditReleaseProfileModalContentConnector.js
@@ -0,0 +1,114 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { saveReleaseProfile, setReleaseProfileValue } from 'Store/Actions/settingsActions';
+import selectSettings from 'Store/Selectors/selectSettings';
+import EditReleaseProfileModalContent from './EditReleaseProfileModalContent';
+
+const newReleaseProfile = {
+ enabled: true,
+ required: [],
+ ignored: [],
+ includePreferredWhenRenaming: false,
+ tags: [],
+ indexerId: 0
+};
+
+function createMapStateToProps() {
+ return createSelector(
+ (state, { id }) => id,
+ (state) => state.settings.releaseProfiles,
+ (id, releaseProfiles) => {
+ const {
+ isFetching,
+ error,
+ isSaving,
+ saveError,
+ pendingChanges,
+ items
+ } = releaseProfiles;
+
+ const profile = id ? _.find(items, { id }) : newReleaseProfile;
+ const settings = selectSettings(profile, pendingChanges, saveError);
+
+ return {
+ id,
+ isFetching,
+ error,
+ isSaving,
+ saveError,
+ item: settings.settings,
+ ...settings
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setReleaseProfileValue,
+ saveReleaseProfile
+};
+
+class EditReleaseProfileModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ if (!this.props.id) {
+ Object.keys(newReleaseProfile).forEach((name) => {
+ this.props.setReleaseProfileValue({
+ name,
+ value: newReleaseProfile[name]
+ });
+ });
+ }
+ }
+
+ componentDidUpdate(prevProps, prevState) {
+ if (prevProps.isSaving && !this.props.isSaving && !this.props.saveError) {
+ this.props.onModalClose();
+ }
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setReleaseProfileValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveReleaseProfile({ id: this.props.id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {
+ required.map((item) => {
+ if (!item) {
+ return null;
+ }
+
+ return (
+
+
+ );
+ })
+ }
+
+
+
+ {
+ ignored.map((item) => {
+ if (!item) {
+ return null;
+ }
+
+ return (
+
+
+ );
+ })
+ }
+
+
+
+ {
+ !enabled &&
+
+ Disabled
+
+ }
+
+ {
+ indexer &&
+
+ {indexer.name}
+
+ }
+
+
+
+ );
+ }
+}
+
+ReleaseProfile.propTypes = {
+ id: PropTypes.number.isRequired,
+ enabled: PropTypes.bool.isRequired,
+ required: PropTypes.arrayOf(PropTypes.string).isRequired,
+ ignored: PropTypes.arrayOf(PropTypes.string).isRequired,
+ tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+ indexerId: PropTypes.number.isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ indexerList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteReleaseProfile: PropTypes.func.isRequired
+};
+
+ReleaseProfile.defaultProps = {
+ enabled: true,
+ required: [],
+ ignored: [],
+ indexerId: 0
+};
+
+export default ReleaseProfile;
diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css
new file mode 100644
index 000000000..9e9715e77
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css
@@ -0,0 +1,20 @@
+.releaseProfiles {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.addReleaseProfile {
+ composes: releaseProfile from '~./ReleaseProfile.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css.d.ts b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css.d.ts
new file mode 100644
index 000000000..be1ba4596
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addReleaseProfile': string;
+ 'center': string;
+ 'releaseProfiles': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfiles.js b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.js
new file mode 100644
index 000000000..b04e24eae
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfiles.js
@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import EditReleaseProfileModalConnector from './EditReleaseProfileModalConnector';
+import ReleaseProfile from './ReleaseProfile';
+import styles from './ReleaseProfiles.css';
+
+class ReleaseProfiles extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isAddReleaseProfileModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onAddReleaseProfilePress = () => {
+ this.setState({ isAddReleaseProfileModalOpen: true });
+ };
+
+ onAddReleaseProfileModalClose = () => {
+ this.setState({ isAddReleaseProfileModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ items,
+ tagList,
+ indexerList,
+ onConfirmDeleteReleaseProfile,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+ );
+ })
+ }
+
+
+ );
+ }
+}
+
+ReleaseProfiles.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ indexerList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteReleaseProfile: PropTypes.func.isRequired
+};
+
+export default ReleaseProfiles;
diff --git a/frontend/src/Settings/Profiles/Release/ReleaseProfilesConnector.js b/frontend/src/Settings/Profiles/Release/ReleaseProfilesConnector.js
new file mode 100644
index 000000000..0c0d81c77
--- /dev/null
+++ b/frontend/src/Settings/Profiles/Release/ReleaseProfilesConnector.js
@@ -0,0 +1,70 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteReleaseProfile, fetchIndexers, fetchReleaseProfiles } from 'Store/Actions/settingsActions';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import ReleaseProfiles from './ReleaseProfiles';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.releaseProfiles,
+ (state) => state.settings.indexers,
+ createTagsSelector(),
+ (releaseProfiles, indexers, tagList) => {
+ return {
+ ...releaseProfiles,
+ tagList,
+ isIndexersPopulated: indexers.isPopulated,
+ indexerList: indexers.items
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchIndexers,
+ fetchReleaseProfiles,
+ deleteReleaseProfile
+};
+
+class ReleaseProfilesConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchReleaseProfiles();
+ if (!this.props.isIndexersPopulated) {
+ this.props.fetchIndexers();
+ }
+ }
+
+ //
+ // Listeners
+
+ onConfirmDeleteReleaseProfile = (id) => {
+ this.props.deleteReleaseProfile({ id });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ );
+ }
+
+ thumbRenderer(props, state) {
+ return (
+
+ );
+ }
+
+ //
+ // Listeners
+
+ onSliderChange = ([sliderMinSize, sliderPreferredSize, sliderMaxSize]) => {
+ this.setState({
+ sliderMinSize,
+ sliderMaxSize,
+ sliderPreferredSize
+ });
+
+ this.props.onSizeChange({
+ minSize: roundNumber(Math.pow(sliderMinSize, 1.1)),
+ preferredSize: sliderPreferredSize === (slider.max - 3) ? null : roundNumber(Math.pow(sliderPreferredSize, 1.1)),
+ maxSize: sliderMaxSize === slider.max ? null : roundNumber(Math.pow(sliderMaxSize, 1.1))
+ });
+ };
+
+ onAfterSliderChange = () => {
+ const {
+ minSize,
+ maxSize,
+ preferredSize
+ } = this.props;
+
+ this.setState({
+ sliderMiSize: getSliderValue(minSize, slider.min),
+ sliderMaxSize: getSliderValue(maxSize, slider.max),
+ sliderPreferredSize: getSliderValue(preferredSize, (slider.max - 3)) // fix
+ });
+ };
+
+ onMinSizeChange = ({ value }) => {
+ const minSize = getValue(value);
+
+ this.setState({
+ sliderMinSize: getSliderValue(minSize, slider.min)
+ });
+
+ this.props.onSizeChange({
+ minSize,
+ maxSize: this.props.maxSize,
+ preferredSize: this.props.preferredSize
+ });
+ };
+
+ onPreferredSizeChange = ({ value }) => {
+ const preferredSize = value === (MAX - 3) ? null : getValue(value);
+
+ this.setState({
+ sliderPreferredSize: getSliderValue(preferredSize, slider.preferred)
+ });
+
+ this.props.onSizeChange({
+ minSize: this.props.minSize,
+ maxSize: this.props.maxSize,
+ preferredSize
+ });
+ };
+
+ onMaxSizeChange = ({ value }) => {
+ const maxSize = value === MAX ? null : getValue(value);
+
+ this.setState({
+ sliderMaxSize: getSliderValue(maxSize, slider.max)
+ });
+
+ this.props.onSizeChange({
+ minSize: this.props.minSize,
+ maxSize,
+ preferredSize: this.props.preferredSize
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ id,
+ quality,
+ title,
+ minSize,
+ maxSize,
+ preferredSize,
+ advancedSettings,
+ onTitleChange
+ } = this.props;
+
+ const {
+ sliderMinSize,
+ sliderMaxSize,
+ sliderPreferredSize
+ } = this.state;
+
+ const minBytes = minSize * 128;
+ const minRate = `${formatBytes(minBytes, true)}/s`;
+
+ const preferredBytes = preferredSize * 128;
+ const preferredRate = preferredBytes ? `${formatBytes(preferredBytes, true)}/s` : translate('Unlimited');
+
+ const maxBytes = maxSize && maxSize * 128;
+ const maxRate = maxBytes ? `${formatBytes(maxBytes, true)}/s` : translate('Unlimited');
+
+ return (
+
+
+ {quality.name}
+
+
+
+
+
+
+
+
+
+
+
{minRate}
+ }
+ title={translate('MinimumLimits')}
+ body={
+
+
+
+
{preferredRate}
+ }
+ title={translate('PreferredSize')}
+ body={
+
+
+
+
{maxRate}
+ }
+ title={translate('MaximumLimits')}
+ body={
+
+
+
+
+ {
+ advancedSettings &&
+
+
+ {translate('Min')}
+
+
+
+
+ {translate('Preferred')}
+
+
+
+
+ {translate('Max')}
+
+
+
+ }
+
{message}
;
+ }
+
+ const twenty = formatBytes(bytes * 20 * 60);
+ const fourtyFive = formatBytes(bytes * 45 * 60);
+ const sixty = formatBytes(bytes * 60 * 60);
+
+ return (
+
+
+ {translate('20MinutesTwenty', [twenty])}
+
+
+ {translate('45MinutesFourtyFive', [fourtyFive])}
+
+
+ {translate('60MinutesSixty', [sixty])}
+
+
+
+
+
+ {translate('Quality')}
+
+
+ {translate('Title')}
+
+
+ {translate('SizeLimit')}
+
+
+ {
+ advancedSettings ?
+
+ Kilobits Per Second
+
:
+ null
+ }
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+
+ {translate('QualityLimitsHelpText')}
+
+
+
+ );
+ }
+}
+
+QualityDefinitions.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ defaultProfile: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ advancedSettings: PropTypes.bool.isRequired
+};
+
+export default QualityDefinitions;
diff --git a/frontend/src/Settings/Quality/Definition/QualityDefinitionsConnector.js b/frontend/src/Settings/Quality/Definition/QualityDefinitionsConnector.js
new file mode 100644
index 000000000..4b1fc72a6
--- /dev/null
+++ b/frontend/src/Settings/Quality/Definition/QualityDefinitionsConnector.js
@@ -0,0 +1,90 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchQualityDefinitions, saveQualityDefinitions } from 'Store/Actions/settingsActions';
+import QualityDefinitions from './QualityDefinitions';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.qualityDefinitions,
+ (state) => state.settings.advancedSettings,
+ (qualityDefinitions, advancedSettings) => {
+ const items = qualityDefinitions.items.map((item) => {
+ const pendingChanges = qualityDefinitions.pendingChanges[item.id] || {};
+
+ return Object.assign({}, item, pendingChanges);
+ });
+
+ return {
+ ...qualityDefinitions,
+ items,
+ hasPendingChanges: !_.isEmpty(qualityDefinitions.pendingChanges),
+ advancedSettings
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchQualityDefinitions: fetchQualityDefinitions,
+ dispatchSaveQualityDefinitions: saveQualityDefinitions
+};
+
+class QualityDefinitionsConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ dispatchFetchQualityDefinitions,
+ dispatchSaveQualityDefinitions,
+ onChildMounted
+ } = this.props;
+
+ dispatchFetchQualityDefinitions();
+ onChildMounted(dispatchSaveQualityDefinitions);
+ }
+
+ componentDidUpdate(prevProps) {
+ const {
+ hasPendingChanges,
+ isSaving,
+ onChildStateChange
+ } = this.props;
+
+ if (
+ prevProps.isSaving !== isSaving ||
+ prevProps.hasPendingChanges !== hasPendingChanges
+ ) {
+ onChildStateChange({
+ isSaving,
+ hasPendingChanges
+ });
+ }
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+
+
+ );
+ }
+}
+
+Quality.propTypes = {
+ isResettingQualityDefinitions: PropTypes.bool.isRequired
+};
+
+export default Quality;
diff --git a/frontend/src/Settings/Quality/QualityConnector.js b/frontend/src/Settings/Quality/QualityConnector.js
new file mode 100644
index 000000000..8cc9219cb
--- /dev/null
+++ b/frontend/src/Settings/Quality/QualityConnector.js
@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import Quality from './Quality';
+
+function createMapStateToProps() {
+ return createSelector(
+ createCommandExecutingSelector(commandNames.RESET_QUALITY_DEFINITIONS),
+ (isResettingQualityDefinitions) => {
+ return {
+ isResettingQualityDefinitions
+ };
+ }
+ );
+}
+
+class QualityConnector extends Component {
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+}
+
+ResetQualityDefinitionsModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default ResetQualityDefinitionsModal;
diff --git a/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.css b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.css
new file mode 100644
index 000000000..99c50adbe
--- /dev/null
+++ b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.css
@@ -0,0 +1,3 @@
+.messageContainer {
+ margin-bottom: 20px;
+}
diff --git a/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.css.d.ts b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.css.d.ts
new file mode 100644
index 000000000..651320174
--- /dev/null
+++ b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'messageContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.js b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.js
new file mode 100644
index 000000000..11f9dfa2f
--- /dev/null
+++ b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContent.js
@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import React, { Component } 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, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './ResetQualityDefinitionsModalContent.css';
+
+class ResetQualityDefinitionsModalContent extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ resetDefinitionTitles: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onResetDefinitionTitlesChange = ({ value }) => {
+ this.setState({ resetDefinitionTitles: value });
+ };
+
+ onResetQualityDefinitionsConfirmed = () => {
+ const resetDefinitionTitles = this.state.resetDefinitionTitles;
+
+ this.setState({ resetDefinitionTitles: false });
+ this.props.onResetQualityDefinitions(resetDefinitionTitles);
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ onModalClose,
+ isResettingQualityDefinitions
+ } = this.props;
+
+ const resetDefinitionTitles = this.state.resetDefinitionTitles;
+
+ return (
+
+
+ {translate('ResetQualityDefinitions')}
+
+
+
+
+ {translate('ResetQualityDefinitionsMessageText')}
+
+
+
+
+ {translate('ResetTitles')}
+
+
+
+
+
+
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Reset')}
+
+
+
+ );
+ }
+}
+
+ResetQualityDefinitionsModalContent.propTypes = {
+ onResetQualityDefinitions: PropTypes.func.isRequired,
+ isResettingQualityDefinitions: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default ResetQualityDefinitionsModalContent;
diff --git a/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContentConnector.js b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContentConnector.js
new file mode 100644
index 000000000..645cac1e1
--- /dev/null
+++ b/frontend/src/Settings/Quality/Reset/ResetQualityDefinitionsModalContentConnector.js
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import { executeCommand } from 'Store/Actions/commandActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import ResetQualityDefinitionsModalContent from './ResetQualityDefinitionsModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ createCommandExecutingSelector(commandNames.RESET_QUALITY_DEFINITIONS),
+ (isResettingQualityDefinitions) => {
+ return {
+ isResettingQualityDefinitions
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ executeCommand
+};
+
+class ResetQualityDefinitionsModalContentConnector extends Component {
+
+ //
+ // Listeners
+
+ onResetQualityDefinitions = (resetTitles) => {
+ this.props.executeCommand({ name: commandNames.RESET_QUALITY_DEFINITIONS, resetTitles });
+ this.props.onModalClose(true);
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+ {translate('MediaManagementSettingsSummary')}
+
+
+
+ {translate('ProfilesSettingsArtistSummary')}
+
+
+
+ {translate('QualitySettingsSummary')}
+
+
+
+ {translate('CustomFormatsSettingsSummary')}
+
+
+
+ {translate('IndexersSettingsSummary')}
+
+
+
+ {translate('DownloadClientsSettingsSummary')}
+
+
+
+ {translate('ImportListsSettingsSummary')}
+
+
+
+ {translate('ConnectSettingsSummary')}
+
+
+
+ {translate('MetadataSettingsArtistSummary')}
+
+
+
+ {translate('TagsSettingsSummary')}
+
+
+
+ {translate('GeneralSettingsSummary')}
+
+
+
+ {translate('UiSettingsSummary')}
+
+
+
+ );
+}
+
+Settings.propTypes = {
+};
+
+export default Settings;
diff --git a/frontend/src/Settings/SettingsToolbar.js b/frontend/src/Settings/SettingsToolbar.js
new file mode 100644
index 000000000..b36cdcaca
--- /dev/null
+++ b/frontend/src/Settings/SettingsToolbar.js
@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import keyboardShortcuts, { shortcuts } from 'Components/keyboardShortcuts';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import AdvancedSettingsButton from './AdvancedSettingsButton';
+import PendingChangesModal from './PendingChangesModal';
+
+class SettingsToolbar extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.bindShortcut(shortcuts.SAVE_SETTINGS.key, this.saveSettings, { isGlobal: true });
+ }
+
+ //
+ // Control
+
+ saveSettings = (event) => {
+ event.preventDefault();
+
+ const {
+ hasPendingChanges,
+ onSavePress
+ } = this.props;
+
+ if (hasPendingChanges) {
+ onSavePress();
+ }
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ advancedSettings,
+ showSave,
+ isSaving,
+ hasPendingChanges,
+ additionalButtons,
+ hasPendingLocation,
+ onSavePress,
+ onConfirmNavigation,
+ onCancelNavigation,
+ onAdvancedSettingsPress
+ } = this.props;
+
+ return (
+
+
+
+
+
+ );
+ }
+}
+
+SettingsToolbar.propTypes = {
+ advancedSettings: PropTypes.bool.isRequired,
+ showSave: PropTypes.bool.isRequired,
+ isSaving: PropTypes.bool,
+ hasPendingLocation: PropTypes.bool.isRequired,
+ hasPendingChanges: PropTypes.bool,
+ additionalButtons: PropTypes.node,
+ onSavePress: PropTypes.func,
+ onAdvancedSettingsPress: PropTypes.func.isRequired,
+ onConfirmNavigation: PropTypes.func.isRequired,
+ onCancelNavigation: PropTypes.func.isRequired,
+ bindShortcut: PropTypes.func.isRequired
+};
+
+SettingsToolbar.defaultProps = {
+ showSave: true
+};
+
+export default keyboardShortcuts(SettingsToolbar);
diff --git a/frontend/src/Settings/SettingsToolbarConnector.js b/frontend/src/Settings/SettingsToolbarConnector.js
new file mode 100644
index 000000000..65d937ab8
--- /dev/null
+++ b/frontend/src/Settings/SettingsToolbarConnector.js
@@ -0,0 +1,148 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { toggleAdvancedSettings } from 'Store/Actions/settingsActions';
+import SettingsToolbar from './SettingsToolbar';
+
+function mapStateToProps(state) {
+ return {
+ advancedSettings: state.settings.advancedSettings
+ };
+}
+
+const mapDispatchToProps = {
+ toggleAdvancedSettings
+};
+
+class SettingsToolbarConnector extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ nextLocation: null,
+ nextLocationAction: null,
+ confirmed: false
+ };
+
+ this._unblock = null;
+ }
+
+ componentDidMount() {
+ this._unblock = this.props.history.block(this.routerWillLeave);
+ }
+
+ componentWillUnmount() {
+ if (this._unblock) {
+ this._unblock();
+ }
+ }
+
+ //
+ // Control
+
+ routerWillLeave = (nextLocation, nextLocationAction) => {
+ if (this.state.confirmed) {
+ this.setState({
+ nextLocation: null,
+ nextLocationAction: null,
+ confirmed: false
+ });
+
+ return true;
+ }
+
+ if (this.props.hasPendingChanges ) {
+ this.setState({
+ nextLocation,
+ nextLocationAction
+ });
+
+ return false;
+ }
+
+ return true;
+ };
+
+ //
+ // Listeners
+
+ onAdvancedSettingsPress = () => {
+ this.props.toggleAdvancedSettings();
+ };
+
+ onConfirmNavigation = () => {
+ const {
+ nextLocation,
+ nextLocationAction
+ } = this.state;
+
+ const history = this.props.history;
+
+ const path = `${nextLocation.pathname}${nextLocation.search}`;
+
+ this.setState({
+ confirmed: true
+ }, () => {
+ if (nextLocationAction === 'PUSH') {
+ history.push(path);
+ } else {
+ // Unfortunately back and forward both use POP,
+ // which means we don't actually know which direction
+ // the user wanted to go, assuming back.
+
+ history.goBack();
+ }
+ });
+ };
+
+ onCancelNavigation = () => {
+ this.setState({
+ nextLocation: null,
+ nextLocationAction: null,
+ confirmed: false
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ const hasPendingLocation = this.state.nextLocation !== null;
+
+ return (
+
+
+
+
+ {
+ specifications.map((item, index) => {
+ if (!item) {
+ return null;
+ }
+
+ let kind = kinds.DEFAULT;
+ if (item.required) {
+ kind = kinds.SUCCESS;
+ }
+ if (item.negate) {
+ kind = kinds.DANGER;
+ }
+
+ return (
+
+ {item.name}
+
+ );
+ })
+ }
+
+
+
+ );
+}
+
+AutoTagging.propTypes = {
+ id: PropTypes.number.isRequired,
+ name: PropTypes.string.isRequired,
+ specifications: PropTypes.arrayOf(PropTypes.object).isRequired,
+ tags: PropTypes.arrayOf(PropTypes.number).isRequired,
+ tagList: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isDeleting: PropTypes.bool.isRequired,
+ onConfirmDeleteAutoTagging: PropTypes.func.isRequired,
+ onCloneAutoTaggingPress: PropTypes.func.isRequired
+};
diff --git a/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.css b/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.css
new file mode 100644
index 000000000..40950bd5f
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.css
@@ -0,0 +1,21 @@
+.autoTaggings {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.addAutoTagging {
+ composes: autoTagging from '~./AutoTagging.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+ font-size: 45px;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
diff --git a/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.css.d.ts b/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.css.d.ts
new file mode 100644
index 000000000..ef3094d3b
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.css.d.ts
@@ -0,0 +1,9 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addAutoTagging': string;
+ 'autoTaggings': string;
+ 'center': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.js b/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.js
new file mode 100644
index 000000000..005547bb7
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/AutoTaggings.js
@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { icons } from 'Helpers/Props';
+import {
+ cloneAutoTagging,
+ deleteAutoTagging,
+ fetchAutoTaggings,
+ fetchRootFolders
+} from 'Store/Actions/settingsActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import AutoTagging from './AutoTagging';
+import EditAutoTaggingModal from './EditAutoTaggingModal';
+import styles from './AutoTaggings.css';
+
+export default function AutoTaggings() {
+ const {
+ error,
+ items,
+ isDeleting,
+ isFetching,
+ isPopulated
+ } = useSelector(
+ createSortedSectionSelector('settings.autoTaggings', sortByProp('name'))
+ );
+
+ const tagList = useSelector(createTagsSelector());
+ const dispatch = useDispatch();
+ const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+ const [tagsFromId, setTagsFromId] = useState(undefined);
+
+ const onClonePress = useCallback((id) => {
+ dispatch(cloneAutoTagging({ id }));
+
+ setTagsFromId(id);
+ setIsEditModalOpen(true);
+ }, [dispatch, setIsEditModalOpen]);
+
+ const onEditPress = useCallback(() => {
+ setIsEditModalOpen(true);
+ }, [setIsEditModalOpen]);
+
+ const onEditModalClose = useCallback(() => {
+ setIsEditModalOpen(false);
+ }, [setIsEditModalOpen]);
+
+ const onConfirmDelete = useCallback((id) => {
+ dispatch(deleteAutoTagging({ id }));
+ }, [dispatch]);
+
+ useEffect(() => {
+ dispatch(fetchAutoTaggings());
+ dispatch(fetchRootFolders());
+ }, [dispatch]);
+
+ return (
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModal.js b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModal.js
new file mode 100644
index 000000000..c6f810785
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModal.js
@@ -0,0 +1,50 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useState } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditAutoTaggingModalContent from './EditAutoTaggingModalContent';
+
+export default function EditAutoTaggingModal(props) {
+ const {
+ isOpen,
+ onModalClose: onOriginalModalClose,
+ ...otherProps
+ } = props;
+
+ const dispatch = useDispatch();
+ const [height, setHeight] = useState('auto');
+
+ const onContentHeightChange = useCallback((h) => {
+ if (height === 'auto' || h > height) {
+ setHeight(h);
+ }
+ }, [height, setHeight]);
+
+ const onModalClose = useCallback(() => {
+ dispatch(clearPendingChanges({ section: 'settings.autoTaggings' }));
+ onOriginalModalClose();
+ }, [dispatch, onOriginalModalClose]);
+
+ return (
+
+
+ );
+}
+
+EditAutoTaggingModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
diff --git a/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.css b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.css
new file mode 100644
index 000000000..d503b0af3
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.css
@@ -0,0 +1,32 @@
+.deleteButton {
+ composes: button from '~Components/Link/Button.css';
+
+ margin-right: auto;
+}
+
+.rightButtons {
+ justify-content: flex-end;
+ margin-right: auto;
+}
+
+.addSpecification {
+ composes: autoTagging from '~./AutoTagging.css';
+
+ background-color: var(--cardAlternateBackgroundColor);
+ color: var(--gray);
+ text-align: center;
+ font-size: 45px;
+}
+
+.center {
+ display: inline-block;
+ padding: 5px 20px 0;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardCenterBackgroundColor);
+}
+
+.autoTaggings {
+ display: flex;
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.css.d.ts b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.css.d.ts
new file mode 100644
index 000000000..2a7f6b41e
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'addSpecification': string;
+ 'autoTaggings': string;
+ 'center': string;
+ 'deleteButton': string;
+ 'rightButtons': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js
new file mode 100644
index 000000000..01a5e846b
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/EditAutoTaggingModalContent.js
@@ -0,0 +1,269 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Card from 'Components/Card';
+import FieldSet from 'Components/FieldSet';
+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 Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 { icons, inputTypes, kinds } from 'Helpers/Props';
+import {
+ cloneAutoTaggingSpecification,
+ deleteAutoTaggingSpecification,
+ fetchAutoTaggingSpecifications,
+ saveAutoTagging,
+ setAutoTaggingValue
+} from 'Store/Actions/settingsActions';
+import { createProviderSettingsSelectorHook } from 'Store/Selectors/createProviderSettingsSelector';
+import translate from 'Utilities/String/translate';
+import AddSpecificationModal from './Specifications/AddSpecificationModal';
+import EditSpecificationModal from './Specifications/EditSpecificationModal';
+import Specification from './Specifications/Specification';
+import styles from './EditAutoTaggingModalContent.css';
+
+export default function EditAutoTaggingModalContent(props) {
+ const {
+ id,
+ tagsFromId,
+ onModalClose,
+ onDeleteAutoTaggingPress
+ } = props;
+
+ const {
+ error,
+ item,
+ isFetching,
+ isSaving,
+ saveError,
+ validationErrors,
+ validationWarnings
+ } = useSelector(createProviderSettingsSelectorHook('autoTaggings', id));
+
+ const {
+ isPopulated: specificationsPopulated,
+ items: specifications
+ } = useSelector((state) => state.settings.autoTaggingSpecifications);
+
+ const dispatch = useDispatch();
+ const [isAddSpecificationModalOpen, setIsAddSpecificationModalOpen] = useState(false);
+ const [isEditSpecificationModalOpen, setIsEditSpecificationModalOpen] = useState(false);
+ // const [isImportAutoTaggingModalOpen, setIsImportAutoTaggingModalOpen] = useState(false);
+
+ const onAddSpecificationPress = useCallback(() => {
+ setIsAddSpecificationModalOpen(true);
+ }, [setIsAddSpecificationModalOpen]);
+
+ const onAddSpecificationModalClose = useCallback(({ specificationSelected = false } = {}) => {
+ setIsAddSpecificationModalOpen(false);
+ setIsEditSpecificationModalOpen(specificationSelected);
+ }, [setIsAddSpecificationModalOpen]);
+
+ const onEditSpecificationModalClose = useCallback(() => {
+ setIsEditSpecificationModalOpen(false);
+ }, [setIsEditSpecificationModalOpen]);
+
+ const onInputChange = useCallback(({ name, value }) => {
+ dispatch(setAutoTaggingValue({ name, value }));
+ }, [dispatch]);
+
+ const onSavePress = useCallback(() => {
+ dispatch(saveAutoTagging({ id }));
+ }, [dispatch, id]);
+
+ const onCloneSpecificationPress = useCallback((specId) => {
+ dispatch(cloneAutoTaggingSpecification({ id: specId }));
+ }, [dispatch]);
+
+ const onConfirmDeleteSpecification = useCallback((specId) => {
+ dispatch(deleteAutoTaggingSpecification({ id: specId }));
+ }, [dispatch]);
+
+ useEffect(() => {
+ dispatch(fetchAutoTaggingSpecifications({ id: tagsFromId || id }));
+ }, [id, tagsFromId, dispatch]);
+
+ const isSavingRef = useRef();
+
+ useEffect(() => {
+ if (isSavingRef.current && !isSaving && !saveError) {
+ onModalClose();
+ }
+
+ isSavingRef.current = isSaving;
+ }, [isSaving, saveError, onModalClose]);
+
+ const {
+ name,
+ removeTagsAutomatically,
+ tags
+ } = item;
+
+ return (
+
+
+
+ {id ? translate('EditAutoTag') : translate('AddAutoTag')}
+
+
+
+
+ {
+ isFetching ?
: null
+ }
+
+ {
+ !isFetching && !!error ?
+
+ {translate('AddAutoTagError')}
+
:
+ null
+ }
+
+ {
+ !isFetching && !error && specificationsPopulated ?
+
+
+
+
+
+ {
+ specifications.map((tag) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+
+
+
+
+
+ {/*
*/}
+
+
:
+ null
+ }
+
+
+
+ {
+ id ?
+
+ {translate('Delete')}
+ :
+ null
+ }
+
+ {/*
+ Import
+ */}
+
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditAutoTaggingModalContent.propTypes = {
+ id: PropTypes.number,
+ tagsFromId: PropTypes.number,
+ onModalClose: PropTypes.func.isRequired,
+ onDeleteAutoTaggingPress: PropTypes.func
+};
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.css b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.css
new file mode 100644
index 000000000..eabcae750
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.css
@@ -0,0 +1,44 @@
+.specification {
+ composes: card from '~Components/Card.css';
+
+ position: relative;
+ width: 300px;
+ height: 100px;
+}
+
+.underlay {
+ @add-mixin cover;
+}
+
+.overlay {
+ @add-mixin linkOverlay;
+
+ padding: 10px;
+}
+
+.name {
+ text-align: center;
+ font-weight: lighter;
+ font-size: 24px;
+}
+
+.actions {
+ margin-top: 20px;
+ text-align: right;
+}
+
+.presetsMenu {
+ composes: menu from '~Components/Menu/Menu.css';
+
+ display: inline-block;
+ margin: 0 5px;
+}
+
+.presetsMenuButton {
+ composes: button from '~Components/Link/Button.css';
+
+ &::after {
+ margin-left: 5px;
+ content: '\25BE';
+ }
+}
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.css.d.ts b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.css.d.ts
new file mode 100644
index 000000000..7f8a93de9
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'name': string;
+ 'overlay': string;
+ 'presetsMenu': string;
+ 'presetsMenuButton': string;
+ 'specification': string;
+ 'underlay': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.js
new file mode 100644
index 000000000..f6f2b134e
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationItem.js
@@ -0,0 +1,101 @@
+import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
+import Button from 'Components/Link/Button';
+import Link from 'Components/Link/Link';
+import Menu from 'Components/Menu/Menu';
+import MenuContent from 'Components/Menu/MenuContent';
+import { sizes } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import AddSpecificationPresetMenuItem from './AddSpecificationPresetMenuItem';
+import styles from './AddSpecificationItem.css';
+
+export default function AddSpecificationItem(props) {
+ const {
+ implementation,
+ implementationName,
+ infoLink,
+ presets,
+ onSpecificationSelect
+ } = props;
+
+ const onWrappedSpecificationSelect = useCallback(() => {
+ onSpecificationSelect({ implementation });
+ }, [implementation, onSpecificationSelect]);
+
+ const hasPresets = !!presets && !!presets.length;
+
+ return (
+
+
+
+
+
+ {implementationName}
+
+
+
+ {
+ hasPresets ?
+
+
+ {translate('Custom')}
+
+
+
+
+ {translate('Presets')}
+
+
+
+ {
+ presets.map((preset, index) => {
+ return (
+
+
+ :
+ null
+ }
+
+ {
+ infoLink ?
+
+ {translate('MoreInfo')}
+ :
+ null
+ }
+
+
+
+
+ );
+}
+
+AddSpecificationModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default AddSpecificationModal;
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.css b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.css
new file mode 100644
index 000000000..d51349ea9
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.css
@@ -0,0 +1,5 @@
+.specifications {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.css.d.ts b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.css.d.ts
new file mode 100644
index 000000000..83fbf5804
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'specifications': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js
new file mode 100644
index 000000000..454a2591a
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationModalContent.js
@@ -0,0 +1,106 @@
+import PropTypes from 'prop-types';
+import React, { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+import Button from 'Components/Link/Button';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+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 {
+ fetchAutoTaggingSpecificationSchema,
+ selectAutoTaggingSpecificationSchema
+} from 'Store/Actions/settingsActions';
+import translate from 'Utilities/String/translate';
+import AddSpecificationItem from './AddSpecificationItem';
+import styles from './AddSpecificationModalContent.css';
+
+export default function AddSpecificationModalContent(props) {
+ const {
+ onModalClose
+ } = props;
+
+ const {
+ isSchemaFetching,
+ isSchemaPopulated,
+ schemaError,
+ schema
+ } = useSelector(
+ (state) => state.settings.autoTaggingSpecifications
+ );
+
+ const dispatch = useDispatch();
+
+ const onSpecificationSelect = useCallback(({ implementation, name }) => {
+ dispatch(selectAutoTaggingSpecificationSchema({ implementation, presetName: name }));
+ onModalClose({ specificationSelected: true });
+ }, [dispatch, onModalClose]);
+
+ useEffect(() => {
+ dispatch(fetchAutoTaggingSpecificationSchema());
+ }, [dispatch]);
+
+ return (
+
+
+ {translate('AddCondition')}
+
+
+
+ {
+ isSchemaFetching ?
+ {translate('AddConditionError')}
+
:
+ null
+ }
+
+ {
+ isSchemaPopulated && !schemaError ?
+
+
+
+
+ {translate('SupportedAutoTaggingProperties')}
+
+
+
+
+ {
+ schema.map((specification) => {
+ return (
+
+ );
+ })
+ }
+
+
+
+
+
+
+ {translate('Close')}
+
+
+
+ );
+}
+
+AddSpecificationModalContent.propTypes = {
+ onModalClose: PropTypes.func.isRequired
+};
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationPresetMenuItem.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationPresetMenuItem.js
new file mode 100644
index 000000000..b043ddf06
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/AddSpecificationPresetMenuItem.js
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
+import MenuItem from 'Components/Menu/MenuItem';
+
+export default function AddSpecificationPresetMenuItem(props) {
+ const {
+ name,
+ implementation,
+ onPress,
+ ...otherProps
+ } = props;
+
+ const onWrappedPress = useCallback(() => {
+ onPress({
+ name,
+ implementation
+ });
+ }, [name, implementation, onPress]);
+
+ return (
+
+ {name}
+
+ );
+}
+
+AddSpecificationPresetMenuItem.propTypes = {
+ name: PropTypes.string.isRequired,
+ implementation: PropTypes.string.isRequired,
+ onPress: PropTypes.func.isRequired
+};
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModal.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModal.js
new file mode 100644
index 000000000..16ed4daec
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModal.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import Modal from 'Components/Modal/Modal';
+import { sizes } from 'Helpers/Props';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import EditSpecificationModalContent from './EditSpecificationModalContent';
+
+function EditSpecificationModal({ isOpen, onModalClose, ...otherProps }) {
+ const dispatch = useDispatch();
+
+ const onWrappedModalClose = useCallback(() => {
+ dispatch(clearPendingChanges({ section: 'settings.autoTaggingSpecifications' }));
+ onModalClose();
+ }, [onModalClose, dispatch]);
+
+ return (
+
+
+ );
+}
+
+EditSpecificationModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditSpecificationModal;
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.css b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.css
new file mode 100644
index 000000000..a2b6014df
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.css
@@ -0,0 +1,5 @@
+.deleteButton {
+ composes: button from '~Components/Link/Button.css';
+
+ margin-right: auto;
+}
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.css.d.ts b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.css.d.ts
new file mode 100644
index 000000000..c5f0ef8a7
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'deleteButton': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js
new file mode 100644
index 000000000..04302729b
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContent.js
@@ -0,0 +1,190 @@
+import PropTypes from 'prop-types';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import Alert from 'Components/Alert';
+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 ProviderFieldFormGroup from 'Components/Form/ProviderFieldFormGroup';
+import Button from 'Components/Link/Button';
+import SpinnerErrorButton from 'Components/Link/SpinnerErrorButton';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+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 } from 'Helpers/Props';
+import {
+ clearAutoTaggingSpecificationPending,
+ saveAutoTaggingSpecification,
+ setAutoTaggingSpecificationFieldValue,
+ setAutoTaggingSpecificationValue
+} from 'Store/Actions/settingsActions';
+import { createProviderSettingsSelectorHook } from 'Store/Selectors/createProviderSettingsSelector';
+import translate from 'Utilities/String/translate';
+import styles from './EditSpecificationModalContent.css';
+
+function EditSpecificationModalContent(props) {
+ const {
+ id,
+ onDeleteSpecificationPress,
+ onModalClose
+ } = props;
+
+ const advancedSettings = useSelector((state) => state.settings.advancedSettings);
+
+ const {
+ item,
+ ...otherFormProps
+ } = useSelector(
+ createProviderSettingsSelectorHook('autoTaggingSpecifications', id)
+ );
+
+ const dispatch = useDispatch();
+
+ const onInputChange = useCallback(({ name, value }) => {
+ dispatch(setAutoTaggingSpecificationValue({ name, value }));
+ }, [dispatch]);
+
+ const onFieldChange = useCallback(({ name, value }) => {
+ dispatch(setAutoTaggingSpecificationFieldValue({ name, value }));
+ }, [dispatch]);
+
+ const onCancelPress = useCallback(({ name, value }) => {
+ dispatch(clearAutoTaggingSpecificationPending());
+ onModalClose();
+ }, [dispatch, onModalClose]);
+
+ const onSavePress = useCallback(({ name, value }) => {
+ dispatch(saveAutoTaggingSpecification({ id }));
+ onModalClose();
+ }, [dispatch, id, onModalClose]);
+
+ const {
+ implementationName,
+ name,
+ negate,
+ required,
+ fields
+ } = item;
+
+ return (
+
+
+ {id ? translate('EditConditionImplementation', { implementationName }) : translate('AddConditionImplementation', { implementationName })}
+
+
+
+
+
+
+ {
+ id ?
+
+ {translate('Delete')}
+ :
+ null
+ }
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Save')}
+
+
+
+ );
+}
+
+EditSpecificationModalContent.propTypes = {
+ id: PropTypes.number,
+ onDeleteSpecificationPress: PropTypes.func,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default EditSpecificationModalContent;
diff --git a/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContentConnector.js b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContentConnector.js
new file mode 100644
index 000000000..8f27b74e0
--- /dev/null
+++ b/frontend/src/Settings/Tags/AutoTagging/Specifications/EditSpecificationModalContentConnector.js
@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearAutoTaggingSpecificationPending, saveAutoTaggingSpecification, setAutoTaggingSpecificationFieldValue, setAutoTaggingSpecificationValue } from 'Store/Actions/settingsActions';
+import createProviderSettingsSelector from 'Store/Selectors/createProviderSettingsSelector';
+import EditSpecificationModalContent from './EditSpecificationModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ createProviderSettingsSelector('autoTaggingSpecifications'),
+ (advancedSettings, specification) => {
+ return {
+ advancedSettings,
+ ...specification
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setAutoTaggingSpecificationValue,
+ setAutoTaggingSpecificationFieldValue,
+ saveAutoTaggingSpecification,
+ clearAutoTaggingSpecificationPending
+};
+
+class EditSpecificationModalContentConnector extends Component {
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setAutoTaggingSpecificationValue({ name, value });
+ };
+
+ onFieldChange = ({ name, value }) => {
+ this.props.setAutoTaggingSpecificationFieldValue({ name, value });
+ };
+
+ onCancelPress = () => {
+ this.props.clearAutoTaggingSpecificationPending();
+ this.props.onModalClose();
+ };
+
+ onSavePress = () => {
+ this.props.saveAutoTaggingSpecification({ id: this.props.id });
+ this.props.onModalClose();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+
+ {implementationName}
+
+
+ {
+ negate ?
+
+ {translate('Negated')}
+ :
+ null
+ }
+
+ {
+ required ?
+
+ {translate('Required')}
+ :
+ null
+ }
+
+
+
+ );
+}
+
+Specification.propTypes = {
+ id: PropTypes.number.isRequired,
+ implementation: PropTypes.string.isRequired,
+ implementationName: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ negate: PropTypes.bool.isRequired,
+ required: PropTypes.bool.isRequired,
+ fields: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onConfirmDeleteSpecification: PropTypes.func.isRequired,
+ onCloneSpecificationPress: PropTypes.func.isRequired
+};
diff --git a/frontend/src/Settings/Tags/Details/TagDetailsDelayProfile.js b/frontend/src/Settings/Tags/Details/TagDetailsDelayProfile.js
new file mode 100644
index 000000000..ab670359b
--- /dev/null
+++ b/frontend/src/Settings/Tags/Details/TagDetailsDelayProfile.js
@@ -0,0 +1,47 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import titleCase from 'Utilities/String/titleCase';
+
+function TagDetailsDelayProfile(props) {
+ const {
+ preferredProtocol,
+ enableUsenet,
+ enableTorrent,
+ usenetDelay,
+ torrentDelay
+ } = props;
+
+ return (
+
+
+ Protocol: {titleCase(preferredProtocol)}
+
+
+
+ {
+ enableUsenet ?
+ `Usenet Delay: ${usenetDelay}` :
+ 'Usenet disabled'
+ }
+
+
+
+ {
+ enableTorrent ?
+ `Torrent Delay: ${torrentDelay}` :
+ 'Torrents disabled'
+ }
+
+
+
+ );
+}
+
+TagDetailsModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default TagDetailsModal;
diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css
new file mode 100644
index 000000000..75b157063
--- /dev/null
+++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css
@@ -0,0 +1,26 @@
+.items {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.item {
+ flex: 0 0 100%;
+}
+
+.restriction {
+ margin-bottom: 5px;
+ padding-bottom: 5px;
+ border-bottom: 1px solid var(--borderColor);
+
+ &:last-child {
+ margin: 0;
+ padding: 0;
+ border-bottom: none;
+ }
+}
+
+.deleteButton {
+ composes: button from '~Components/Link/Button.css';
+
+ margin-right: auto;
+}
diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css.d.ts b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css.d.ts
new file mode 100644
index 000000000..81112f53f
--- /dev/null
+++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'deleteButton': string;
+ 'item': string;
+ 'items': string;
+ 'restriction': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContent.js b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.js
new file mode 100644
index 000000000..78372d5a3
--- /dev/null
+++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContent.js
@@ -0,0 +1,257 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import FieldSet from 'Components/FieldSet';
+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 { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import TagDetailsDelayProfile from './TagDetailsDelayProfile';
+import styles from './TagDetailsModalContent.css';
+
+function TagDetailsModalContent(props) {
+ const {
+ label,
+ isTagUsed,
+ artist,
+ delayProfiles,
+ importLists,
+ notifications,
+ releaseProfiles,
+ indexers,
+ downloadClients,
+ autoTags,
+ onModalClose,
+ onDeleteTagPress
+ } = props;
+
+ return (
+
+
+ Tag Details - {label}
+
+
+
+ {
+ !isTagUsed &&
+
+ {translate('TagIsNotUsedAndCanBeDeleted')}
+
+ }
+
+ {
+ artist.length ?
+
+ {
+ artist.map((item) => {
+ return (
+
+ {item.artistName}
+
+ );
+ })
+ }
+ :
+ null
+ }
+
+ {
+ delayProfiles.length ?
+
+ {
+ delayProfiles.map((item) => {
+ const {
+ id,
+ preferredProtocol,
+ enableUsenet,
+ enableTorrent,
+ usenetDelay,
+ torrentDelay
+ } = item;
+
+ return (
+ :
+ null
+ }
+
+ {
+ notifications.length ?
+
+ {
+ notifications.map((item) => {
+ return (
+
+ {item.name}
+
+ );
+ })
+ }
+ :
+ null
+ }
+
+ {
+ importLists.length ?
+
+ {
+ importLists.map((item) => {
+ return (
+
+ {item.name}
+
+ );
+ })
+ }
+ :
+ null
+ }
+
+ {
+ releaseProfiles.length ?
+
+ {
+ releaseProfiles.map((item) => {
+ return (
+
+
+ {
+ item.required.map((r) => {
+ return (
+
+ {r}
+
+ );
+ })
+ }
+
+
+
+ {
+ item.ignored.map((i) => {
+ return (
+
+ {i}
+
+ );
+ })
+ }
+
+
:
+ null
+ }
+
+ {
+ indexers.length ?
+
+ {
+ indexers.map((item) => {
+ return (
+
+ {item.name}
+
+ );
+ })
+ }
+ :
+ null
+ }
+
+ {
+ downloadClients.length ?
+
+ {
+ downloadClients.map((item) => {
+ return (
+
+ {item.name}
+
+ );
+ })
+ }
+ :
+ null
+ }
+
+ {
+ autoTags.length ?
+
+ {
+ autoTags.map((item) => {
+ return (
+
+ {item.name}
+
+ );
+ })
+ }
+ :
+ null
+ }
+
+
+
+ {
+
+ Delete
+
+ }
+
+
+ Close
+
+
+
+ );
+}
+
+TagDetailsModalContent.propTypes = {
+ label: PropTypes.string.isRequired,
+ isTagUsed: PropTypes.bool.isRequired,
+ artist: PropTypes.arrayOf(PropTypes.object).isRequired,
+ delayProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+ importLists: PropTypes.arrayOf(PropTypes.object).isRequired,
+ notifications: PropTypes.arrayOf(PropTypes.object).isRequired,
+ releaseProfiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+ indexers: PropTypes.arrayOf(PropTypes.object).isRequired,
+ downloadClients: PropTypes.arrayOf(PropTypes.object).isRequired,
+ autoTags: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ onDeleteTagPress: PropTypes.func.isRequired
+};
+
+export default TagDetailsModalContent;
diff --git a/frontend/src/Settings/Tags/Details/TagDetailsModalContentConnector.js b/frontend/src/Settings/Tags/Details/TagDetailsModalContentConnector.js
new file mode 100644
index 000000000..ddd70b253
--- /dev/null
+++ b/frontend/src/Settings/Tags/Details/TagDetailsModalContentConnector.js
@@ -0,0 +1,121 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createAllArtistSelector from 'Store/Selectors/createAllArtistSelector';
+import TagDetailsModalContent from './TagDetailsModalContent';
+
+function findMatchingItems(ids, items) {
+ return items.filter((s) => {
+ return ids.includes(s.id);
+ });
+}
+
+function createUnorderedMatchingArtistSelector() {
+ return createSelector(
+ (state, { artistIds }) => artistIds,
+ createAllArtistSelector(),
+ findMatchingItems
+ );
+}
+
+function createMatchingArtistSelector() {
+ return createSelector(
+ createUnorderedMatchingArtistSelector(),
+ (artists) => {
+ return artists.sort((artistA, artistB) => {
+ const sortNameA = artistA.sortName;
+ const sortNameB = artistB.sortName;
+
+ if (sortNameA > sortNameB) {
+ return 1;
+ } else if (sortNameA < sortNameB) {
+ return -1;
+ }
+
+ return 0;
+ });
+ }
+ );
+}
+
+function createMatchingDelayProfilesSelector() {
+ return createSelector(
+ (state, { delayProfileIds }) => delayProfileIds,
+ (state) => state.settings.delayProfiles.items,
+ findMatchingItems
+ );
+}
+
+function createMatchingImportListsSelector() {
+ return createSelector(
+ (state, { importListIds }) => importListIds,
+ (state) => state.settings.importLists.items,
+ findMatchingItems
+ );
+}
+
+function createMatchingNotificationsSelector() {
+ return createSelector(
+ (state, { notificationIds }) => notificationIds,
+ (state) => state.settings.notifications.items,
+ findMatchingItems
+ );
+}
+
+function createMatchingReleaseProfilesSelector() {
+ return createSelector(
+ (state, { restrictionIds }) => restrictionIds,
+ (state) => state.settings.releaseProfiles.items,
+ findMatchingItems
+ );
+}
+
+function createMatchingIndexersSelector() {
+ return createSelector(
+ (state, { indexerIds }) => indexerIds,
+ (state) => state.settings.indexers.items,
+ findMatchingItems
+ );
+}
+
+function createMatchingDownloadClientsSelector() {
+ return createSelector(
+ (state, { downloadClientIds }) => downloadClientIds,
+ (state) => state.settings.downloadClients.items,
+ findMatchingItems
+ );
+}
+
+function createMatchingAutoTagsSelector() {
+ return createSelector(
+ (state, { autoTagIds }) => autoTagIds,
+ (state) => state.settings.autoTaggings.items,
+ findMatchingItems
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ createMatchingArtistSelector(),
+ createMatchingDelayProfilesSelector(),
+ createMatchingImportListsSelector(),
+ createMatchingNotificationsSelector(),
+ createMatchingReleaseProfilesSelector(),
+ createMatchingIndexersSelector(),
+ createMatchingDownloadClientsSelector(),
+ createMatchingAutoTagsSelector(),
+ (artist, delayProfiles, importLists, notifications, releaseProfiles, indexers, downloadClients, autoTags) => {
+ return {
+ artist,
+ delayProfiles,
+ importLists,
+ notifications,
+ releaseProfiles,
+ indexers,
+ downloadClients,
+ autoTags
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(TagDetailsModalContent);
diff --git a/frontend/src/Settings/Tags/Tag.css b/frontend/src/Settings/Tags/Tag.css
new file mode 100644
index 000000000..ebf61e539
--- /dev/null
+++ b/frontend/src/Settings/Tags/Tag.css
@@ -0,0 +1,12 @@
+.tag {
+ composes: card from '~Components/Card.css';
+
+ flex: 150px 0 1;
+}
+
+.label {
+ margin-bottom: 20px;
+ white-space: nowrap;
+ font-weight: 300;
+ font-size: 24px;
+}
diff --git a/frontend/src/Settings/Tags/Tag.css.d.ts b/frontend/src/Settings/Tags/Tag.css.d.ts
new file mode 100644
index 000000000..51d18383e
--- /dev/null
+++ b/frontend/src/Settings/Tags/Tag.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'label': string;
+ 'tag': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/Tag.js b/frontend/src/Settings/Tags/Tag.js
new file mode 100644
index 000000000..525bf5844
--- /dev/null
+++ b/frontend/src/Settings/Tags/Tag.js
@@ -0,0 +1,208 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Card from 'Components/Card';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import TagDetailsModal from './Details/TagDetailsModal';
+import TagInUse from './TagInUse';
+import styles from './Tag.css';
+
+class Tag extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isDetailsModalOpen: false,
+ isDeleteTagModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onShowDetailsPress = () => {
+ this.setState({ isDetailsModalOpen: true });
+ };
+
+ onDetailsModalClose = () => {
+ this.setState({ isDetailsModalOpen: false });
+ };
+
+ onDeleteTagPress = () => {
+ this.setState({
+ isDetailsModalOpen: false,
+ isDeleteTagModalOpen: true
+ });
+ };
+
+ onDeleteTagModalClose= () => {
+ this.setState({ isDeleteTagModalOpen: false });
+ };
+
+ onConfirmDeleteTag = () => {
+ this.props.onConfirmDeleteTag({ id: this.props.id });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ label,
+ delayProfileIds,
+ importListIds,
+ notificationIds,
+ restrictionIds,
+ indexerIds,
+ downloadClientIds,
+ autoTagIds,
+ artistIds
+ } = this.props;
+
+ const {
+ isDetailsModalOpen,
+ isDeleteTagModalOpen
+ } = this.state;
+
+ const isTagUsed = !!(
+ delayProfileIds.length ||
+ importListIds.length ||
+ notificationIds.length ||
+ restrictionIds.length ||
+ indexerIds.length ||
+ downloadClientIds.length ||
+ autoTagIds.length ||
+ artistIds.length
+ );
+
+ return (
+
+
+ {label}
+
+
+ {
+ isTagUsed ?
+
+
:
+ null
+ }
+
+ {
+ !isTagUsed &&
+
+ No links
+
+ }
+
+
+ );
+ }
+}
+
+Tag.propTypes = {
+ id: PropTypes.number.isRequired,
+ label: PropTypes.string.isRequired,
+ delayProfileIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ importListIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ notificationIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ restrictionIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ indexerIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ downloadClientIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ autoTagIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ artistIds: PropTypes.arrayOf(PropTypes.number).isRequired,
+ onConfirmDeleteTag: PropTypes.func.isRequired
+};
+
+Tag.defaultProps = {
+ delayProfileIds: [],
+ importListIds: [],
+ notificationIds: [],
+ restrictionIds: [],
+ indexerIds: [],
+ downloadClientIds: [],
+ autoTagIds: [],
+ artistIds: []
+};
+
+export default Tag;
diff --git a/frontend/src/Settings/Tags/TagConnector.js b/frontend/src/Settings/Tags/TagConnector.js
new file mode 100644
index 000000000..986acc8e8
--- /dev/null
+++ b/frontend/src/Settings/Tags/TagConnector.js
@@ -0,0 +1,22 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { deleteTag } from 'Store/Actions/tagActions';
+import createTagDetailsSelector from 'Store/Selectors/createTagDetailsSelector';
+import Tag from './Tag';
+
+function createMapStateToProps() {
+ return createSelector(
+ createTagDetailsSelector(),
+ (tagDetails) => {
+ return {
+ ...tagDetails
+ };
+ }
+ );
+}
+
+const mapStateToProps = {
+ onConfirmDeleteTag: deleteTag
+};
+
+export default connect(createMapStateToProps, mapStateToProps)(Tag);
diff --git a/frontend/src/Settings/Tags/TagInUse.js b/frontend/src/Settings/Tags/TagInUse.js
new file mode 100644
index 000000000..27228fa2e
--- /dev/null
+++ b/frontend/src/Settings/Tags/TagInUse.js
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export default function TagInUse(props) {
+ const {
+ label,
+ labelPlural,
+ count
+ } = props;
+
+ if (count === 0) {
+ return null;
+ }
+
+ if (count > 1 && labelPlural) {
+ return (
+
+ {count} {labelPlural.toLowerCase()}
+
+ );
+ }
+
+ return (
+
+ {count} {label.toLowerCase()}
+
+ );
+}
+
+TagInUse.propTypes = {
+ label: PropTypes.string.isRequired,
+ labelPlural: PropTypes.string,
+ count: PropTypes.number.isRequired
+};
diff --git a/frontend/src/Settings/Tags/TagSettings.js b/frontend/src/Settings/Tags/TagSettings.js
new file mode 100644
index 000000000..ca8672603
--- /dev/null
+++ b/frontend/src/Settings/Tags/TagSettings.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
+import translate from 'Utilities/String/translate';
+import AutoTaggings from './AutoTagging/AutoTaggings';
+import TagsConnector from './TagsConnector';
+
+function TagSettings() {
+ return (
+
+
+
+
+ );
+}
+
+export default TagSettings;
diff --git a/frontend/src/Settings/Tags/Tags.css b/frontend/src/Settings/Tags/Tags.css
new file mode 100644
index 000000000..5a44f8331
--- /dev/null
+++ b/frontend/src/Settings/Tags/Tags.css
@@ -0,0 +1,4 @@
+.tags {
+ display: flex;
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/Settings/Tags/Tags.css.d.ts b/frontend/src/Settings/Tags/Tags.css.d.ts
new file mode 100644
index 000000000..bf5da21eb
--- /dev/null
+++ b/frontend/src/Settings/Tags/Tags.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'tags': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/Settings/Tags/Tags.js b/frontend/src/Settings/Tags/Tags.js
new file mode 100644
index 000000000..c5f3d8706
--- /dev/null
+++ b/frontend/src/Settings/Tags/Tags.js
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import PageSectionContent from 'Components/Page/PageSectionContent';
+import { kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import TagConnector from './TagConnector';
+import styles from './Tags.css';
+
+function Tags(props) {
+ const {
+ items,
+ ...otherProps
+ } = props;
+
+ if (!items.length) {
+ return (
+
+ {translate('NoTagsHaveBeenAddedYet')}
+
+ );
+ }
+
+ return (
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+ );
+}
+
+Tags.propTypes = {
+ items: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default Tags;
diff --git a/frontend/src/Settings/Tags/TagsConnector.js b/frontend/src/Settings/Tags/TagsConnector.js
new file mode 100644
index 000000000..15f31d3c5
--- /dev/null
+++ b/frontend/src/Settings/Tags/TagsConnector.js
@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchDelayProfiles, fetchDownloadClients, fetchImportLists, fetchIndexers, fetchNotifications, fetchReleaseProfiles } from 'Store/Actions/settingsActions';
+import { fetchTagDetails, fetchTags } from 'Store/Actions/tagActions';
+import createSortedSectionSelector from 'Store/Selectors/createSortedSectionSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
+import Tags from './Tags';
+
+function createMapStateToProps() {
+ return createSelector(
+ createSortedSectionSelector('tags', sortByProp('label')),
+ (tags) => {
+ const isFetching = tags.isFetching || tags.details.isFetching;
+ const error = tags.error || tags.details.error;
+ const isPopulated = tags.isPopulated && tags.details.isPopulated;
+
+ return {
+ ...tags,
+ isFetching,
+ error,
+ isPopulated
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchTags: fetchTags,
+ dispatchFetchTagDetails: fetchTagDetails,
+ dispatchFetchDelayProfiles: fetchDelayProfiles,
+ dispatchFetchImportLists: fetchImportLists,
+ dispatchFetchNotifications: fetchNotifications,
+ dispatchFetchReleaseProfiles: fetchReleaseProfiles,
+ dispatchFetchIndexers: fetchIndexers,
+ dispatchFetchDownloadClients: fetchDownloadClients
+};
+
+class MetadatasConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ dispatchFetchTags,
+ dispatchFetchTagDetails,
+ dispatchFetchDelayProfiles,
+ dispatchFetchImportLists,
+ dispatchFetchNotifications,
+ dispatchFetchReleaseProfiles,
+ dispatchFetchIndexers,
+ dispatchFetchDownloadClients
+ } = this.props;
+
+ dispatchFetchTags();
+ dispatchFetchTagDetails();
+ dispatchFetchDelayProfiles();
+ dispatchFetchImportLists();
+ dispatchFetchNotifications();
+ dispatchFetchReleaseProfiles();
+ dispatchFetchIndexers();
+ dispatchFetchDownloadClients();
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {
+ isFetching &&
+
+ {translate('UnableToLoadUISettings')}
+
+ }
+
+ {
+ hasSettings && !isFetching && !error &&
+
+ }
+
+
+ );
+ }
+
+}
+
+UISettings.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ settings: PropTypes.object.isRequired,
+ hasSettings: PropTypes.bool.isRequired,
+ onSavePress: PropTypes.func.isRequired,
+ languages: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onInputChange: PropTypes.func.isRequired
+};
+
+export default UISettings;
diff --git a/frontend/src/Settings/UI/UISettingsConnector.js b/frontend/src/Settings/UI/UISettingsConnector.js
new file mode 100644
index 000000000..ea9194f8c
--- /dev/null
+++ b/frontend/src/Settings/UI/UISettingsConnector.js
@@ -0,0 +1,102 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { clearPendingChanges } from 'Store/Actions/baseActions';
+import { fetchUISettings, saveUISettings, setUISettingsValue } from 'Store/Actions/settingsActions';
+import createSettingsSectionSelector from 'Store/Selectors/createSettingsSectionSelector';
+import UISettings from './UISettings';
+
+const SECTION = 'ui';
+
+function createLanguagesSelector() {
+ return createSelector(
+ (state) => state.settings.languages,
+ (languages) => {
+ const items = languages.items;
+ const filterItems = ['Any', 'Unknown'];
+
+ if (!items) {
+ return [];
+ }
+
+ const newItems = items.filter((lang) => !filterItems.includes(lang.name)).map((item) => {
+ return {
+ key: item.id,
+ value: item.name
+ };
+ });
+
+ return newItems;
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.settings.advancedSettings,
+ createSettingsSectionSelector(SECTION),
+ createLanguagesSelector(),
+ (advancedSettings, sectionSettings, languages) => {
+ return {
+ advancedSettings,
+ languages,
+ ...sectionSettings
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ setUISettingsValue,
+ saveUISettings,
+ fetchUISettings,
+ clearPendingChanges
+};
+
+class UISettingsConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchUISettings();
+ }
+
+ componentWillUnmount() {
+ this.props.clearPendingChanges({ section: `settings.${SECTION}` });
+ }
+
+ //
+ // Listeners
+
+ onInputChange = ({ name, value }) => {
+ this.props.setUISettingsValue({ name, value });
+ };
+
+ onSavePress = () => {
+ this.props.saveUISettings();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+ (
+ 'settings.rootFolders',
+ sortByProp('name')
+ ),
+ (rootFolders: RootFolderAppState) => rootFolders
+ );
+}
diff --git a/frontend/src/Store/Selectors/createSettingsSectionSelector.js b/frontend/src/Store/Selectors/createSettingsSectionSelector.js
new file mode 100644
index 000000000..a9f6cbff6
--- /dev/null
+++ b/frontend/src/Store/Selectors/createSettingsSectionSelector.js
@@ -0,0 +1,32 @@
+import { createSelector } from 'reselect';
+import selectSettings from 'Store/Selectors/selectSettings';
+
+function createSettingsSectionSelector(section) {
+ return createSelector(
+ (state) => state.settings[section],
+ (sectionSettings) => {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ item,
+ pendingChanges,
+ isSaving,
+ saveError
+ } = sectionSettings;
+
+ const settings = selectSettings(item, pendingChanges, saveError);
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ isSaving,
+ saveError,
+ ...settings
+ };
+ }
+ );
+}
+
+export default createSettingsSectionSelector;
diff --git a/frontend/src/Store/Selectors/createSortedSectionSelector.ts b/frontend/src/Store/Selectors/createSortedSectionSelector.ts
new file mode 100644
index 000000000..abee01f75
--- /dev/null
+++ b/frontend/src/Store/Selectors/createSortedSectionSelector.ts
@@ -0,0 +1,21 @@
+import { createSelector } from 'reselect';
+import getSectionState from 'Utilities/State/getSectionState';
+
+function createSortedSectionSelector(
+ section: string,
+ comparer: (a: T, b: T) => number
+) {
+ return createSelector(
+ (state) => state,
+ (state) => {
+ const sectionState = getSectionState(state, section, true);
+
+ return {
+ ...sectionState,
+ items: [...sectionState.items].sort(comparer),
+ };
+ }
+ );
+}
+
+export default createSortedSectionSelector;
diff --git a/frontend/src/Store/Selectors/createSystemStatusSelector.ts b/frontend/src/Store/Selectors/createSystemStatusSelector.ts
new file mode 100644
index 000000000..f5e276069
--- /dev/null
+++ b/frontend/src/Store/Selectors/createSystemStatusSelector.ts
@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createSystemStatusSelector() {
+ return createSelector(
+ (state: AppState) => state.system.status,
+ (status) => {
+ return status.item;
+ }
+ );
+}
+
+export default createSystemStatusSelector;
diff --git a/frontend/src/Store/Selectors/createTagDetailsSelector.ts b/frontend/src/Store/Selectors/createTagDetailsSelector.ts
new file mode 100644
index 000000000..2a271cafe
--- /dev/null
+++ b/frontend/src/Store/Selectors/createTagDetailsSelector.ts
@@ -0,0 +1,14 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createTagDetailsSelector() {
+ return createSelector(
+ (_: AppState, { id }: { id: number }) => id,
+ (state: AppState) => state.tags.details.items,
+ (id, tagDetails) => {
+ return tagDetails.find((t) => t.id === id);
+ }
+ );
+}
+
+export default createTagDetailsSelector;
diff --git a/frontend/src/Store/Selectors/createTagsSelector.ts b/frontend/src/Store/Selectors/createTagsSelector.ts
new file mode 100644
index 000000000..f653ff6e3
--- /dev/null
+++ b/frontend/src/Store/Selectors/createTagsSelector.ts
@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createTagsSelector() {
+ return createSelector(
+ (state: AppState) => state.tags.items,
+ (tags) => {
+ return tags;
+ }
+ );
+}
+
+export default createTagsSelector;
diff --git a/frontend/src/Store/Selectors/createTrackFileSelector.ts b/frontend/src/Store/Selectors/createTrackFileSelector.ts
new file mode 100644
index 000000000..a162df1fa
--- /dev/null
+++ b/frontend/src/Store/Selectors/createTrackFileSelector.ts
@@ -0,0 +1,18 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createTrackFileSelector() {
+ return createSelector(
+ (_: AppState, { trackFileId }: { trackFileId: number }) => trackFileId,
+ (state: AppState) => state.trackFiles,
+ (trackFileId, trackFiles) => {
+ if (!trackFileId) {
+ return;
+ }
+
+ return trackFiles.items.find((trackFile) => trackFile.id === trackFileId);
+ }
+ );
+}
+
+export default createTrackFileSelector;
diff --git a/frontend/src/Store/Selectors/createTrackSelector.js b/frontend/src/Store/Selectors/createTrackSelector.js
new file mode 100644
index 000000000..be57e6ca0
--- /dev/null
+++ b/frontend/src/Store/Selectors/createTrackSelector.js
@@ -0,0 +1,14 @@
+import _ from 'lodash';
+import { createSelector } from 'reselect';
+
+function createTrackSelector() {
+ return createSelector(
+ (state, { trackId }) => trackId,
+ (state) => state.tracks,
+ (trackId, tracks) => {
+ return _.find(tracks.items, { id: trackId });
+ }
+ );
+}
+
+export default createTrackSelector;
diff --git a/frontend/src/Store/Selectors/createUISettingsSelector.ts b/frontend/src/Store/Selectors/createUISettingsSelector.ts
new file mode 100644
index 000000000..ff539679b
--- /dev/null
+++ b/frontend/src/Store/Selectors/createUISettingsSelector.ts
@@ -0,0 +1,13 @@
+import { createSelector } from 'reselect';
+import AppState from 'App/State/AppState';
+
+function createUISettingsSelector() {
+ return createSelector(
+ (state: AppState) => state.settings.ui,
+ (ui) => {
+ return ui.item;
+ }
+ );
+}
+
+export default createUISettingsSelector;
diff --git a/frontend/src/Store/Selectors/selectSettings.js b/frontend/src/Store/Selectors/selectSettings.js
new file mode 100644
index 000000000..3e30478b7
--- /dev/null
+++ b/frontend/src/Store/Selectors/selectSettings.js
@@ -0,0 +1,104 @@
+import _ from 'lodash';
+
+function getValidationFailures(saveError) {
+ if (!saveError || saveError.status !== 400) {
+ return [];
+ }
+
+ return _.cloneDeep(saveError.responseJSON);
+}
+
+function mapFailure(failure) {
+ return {
+ message: failure.errorMessage,
+ link: failure.infoLink,
+ detailedMessage: failure.detailedDescription
+ };
+}
+
+function selectSettings(item, pendingChanges, saveError) {
+ const validationFailures = getValidationFailures(saveError);
+
+ // Merge all settings from the item along with pending
+ // changes to ensure any settings that were not included
+ // with the item are included.
+ const allSettings = Object.assign({}, item, pendingChanges);
+
+ const settings = _.reduce(allSettings, (result, value, key) => {
+ if (key === 'fields') {
+ return result;
+ }
+
+ // Return a flattened value
+ if (key === 'implementationName') {
+ result.implementationName = item[key];
+
+ return result;
+ }
+
+ const setting = {
+ value: item[key],
+ errors: _.map(_.remove(validationFailures, (failure) => {
+ return failure.propertyName.toLowerCase() === key.toLowerCase() && !failure.isWarning;
+ }), mapFailure),
+
+ warnings: _.map(_.remove(validationFailures, (failure) => {
+ return failure.propertyName.toLowerCase() === key.toLowerCase() && failure.isWarning;
+ }), mapFailure)
+ };
+
+ if (pendingChanges.hasOwnProperty(key)) {
+ setting.previousValue = setting.value;
+ setting.value = pendingChanges[key];
+ setting.pending = true;
+ }
+
+ result[key] = setting;
+ return result;
+ }, {});
+
+ const fields = _.reduce(item.fields, (result, f) => {
+ const field = Object.assign({ pending: false }, f);
+ const hasPendingFieldChange = pendingChanges.fields && pendingChanges.fields.hasOwnProperty(field.name);
+
+ if (hasPendingFieldChange) {
+ field.previousValue = field.value;
+ field.value = pendingChanges.fields[field.name];
+ field.pending = true;
+ }
+
+ field.errors = _.map(_.remove(validationFailures, (failure) => {
+ return failure.propertyName.toLowerCase() === field.name.toLowerCase() && !failure.isWarning;
+ }), mapFailure);
+
+ field.warnings = _.map(_.remove(validationFailures, (failure) => {
+ return failure.propertyName.toLowerCase() === field.name.toLowerCase() && failure.isWarning;
+ }), mapFailure);
+
+ result.push(field);
+ return result;
+ }, []);
+
+ if (fields.length) {
+ settings.fields = fields;
+ }
+
+ const validationErrors = _.filter(validationFailures, (failure) => {
+ return !failure.isWarning;
+ });
+
+ const validationWarnings = _.filter(validationFailures, (failure) => {
+ return failure.isWarning;
+ });
+
+ return {
+ settings,
+ validationErrors,
+ validationWarnings,
+ hasPendingChanges: !_.isEmpty(pendingChanges),
+ hasSettings: !_.isEmpty(settings),
+ pendingChanges
+ };
+}
+
+export default selectSettings;
diff --git a/frontend/src/Store/createAppStore.js b/frontend/src/Store/createAppStore.js
new file mode 100644
index 000000000..4fef265f1
--- /dev/null
+++ b/frontend/src/Store/createAppStore.js
@@ -0,0 +1,15 @@
+import { createStore } from 'redux';
+import createReducers, { defaultState } from 'Store/Actions/createReducers';
+import middlewares from 'Store/Middleware/middlewares';
+
+function createAppStore(history) {
+ const appStore = createStore(
+ createReducers(history),
+ defaultState,
+ middlewares(history)
+ );
+
+ return appStore;
+}
+
+export default createAppStore;
diff --git a/frontend/src/Store/scrollPositions.ts b/frontend/src/Store/scrollPositions.ts
new file mode 100644
index 000000000..199bfa84c
--- /dev/null
+++ b/frontend/src/Store/scrollPositions.ts
@@ -0,0 +1,5 @@
+const scrollPositions: Record = {
+ artistIndex: 0,
+};
+
+export default scrollPositions;
diff --git a/frontend/src/Store/thunks.ts b/frontend/src/Store/thunks.ts
new file mode 100644
index 000000000..fd277211e
--- /dev/null
+++ b/frontend/src/Store/thunks.ts
@@ -0,0 +1,39 @@
+import { Dispatch } from 'redux';
+import AppState from 'App/State/AppState';
+
+type GetState = () => AppState;
+type Thunk = (
+ getState: GetState,
+ identityFn: never,
+ dispatch: Dispatch
+) => unknown;
+
+const thunks: Record = {};
+
+function identity(payload: T): TResult {
+ return payload as unknown as TResult;
+}
+
+export function createThunk(type: string, identityFunction = identity) {
+ return function (payload?: T) {
+ return function (dispatch: Dispatch, getState: GetState) {
+ const thunk = thunks[type];
+
+ if (thunk) {
+ const finalPayload = payload ?? {};
+
+ return thunk(getState, identityFunction(finalPayload), dispatch);
+ }
+
+ throw Error(`Thunk handler has not been registered for ${type}`);
+ };
+ };
+}
+
+export function handleThunks(handlers: Record) {
+ const types = Object.keys(handlers);
+
+ types.forEach((type) => {
+ thunks[type] = handlers[type];
+ });
+}
diff --git a/src/UI/Shared/Styles/clickable.less b/frontend/src/Styles/Mixins/clickable.css
similarity index 100%
rename from src/UI/Shared/Styles/clickable.less
rename to frontend/src/Styles/Mixins/clickable.css
diff --git a/frontend/src/Styles/Mixins/cover.css b/frontend/src/Styles/Mixins/cover.css
new file mode 100644
index 000000000..e44c99be6
--- /dev/null
+++ b/frontend/src/Styles/Mixins/cover.css
@@ -0,0 +1,8 @@
+@define-mixin cover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+}
diff --git a/frontend/src/Styles/Mixins/linkOverlay.css b/frontend/src/Styles/Mixins/linkOverlay.css
new file mode 100644
index 000000000..74c3fd753
--- /dev/null
+++ b/frontend/src/Styles/Mixins/linkOverlay.css
@@ -0,0 +1,11 @@
+@define-mixin linkOverlay {
+ @add-mixin cover;
+
+ pointer-events: none;
+ user-select: none;
+
+ a,
+ button {
+ pointer-events: all;
+ }
+}
diff --git a/frontend/src/Styles/Mixins/scroller.css b/frontend/src/Styles/Mixins/scroller.css
new file mode 100644
index 000000000..29b2016b9
--- /dev/null
+++ b/frontend/src/Styles/Mixins/scroller.css
@@ -0,0 +1,29 @@
+@define-mixin scrollbar {
+ scrollbar-color: var(--scrollbarBackgroundColor) transparent;
+ scrollbar-width: thin;
+
+ &::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+ }
+}
+
+@define-mixin scrollbarTrack {
+ &::-webkit-scrollbar-track {
+ background-color: transparent;
+ }
+}
+
+@define-mixin scrollbarThumb {
+ &::-webkit-scrollbar-thumb {
+ min-height: 100px;
+ border: 1px solid transparent;
+ border-radius: 5px;
+ background-color: var(--scrollbarBackgroundColor);
+ background-clip: padding-box;
+
+ &:hover {
+ background-color: var(--scrollbarHoverBackgroundColor);
+ }
+ }
+}
diff --git a/frontend/src/Styles/Mixins/truncate.css b/frontend/src/Styles/Mixins/truncate.css
new file mode 100644
index 000000000..1941afc9b
--- /dev/null
+++ b/frontend/src/Styles/Mixins/truncate.css
@@ -0,0 +1,18 @@
+/**
+ * From: https://github.com/suitcss/utils-text/blob/master/lib/text.css
+ *
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ * occur.
+ */
+
+@define-mixin truncate {
+ overflow: hidden !important;
+ max-width: 100%; /* 1 */
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+}
diff --git a/frontend/src/Styles/Themes/dark.js b/frontend/src/Styles/Themes/dark.js
new file mode 100644
index 000000000..7513139a4
--- /dev/null
+++ b/frontend/src/Styles/Themes/dark.js
@@ -0,0 +1,241 @@
+const lidarrGreen = '#00A65B';
+const darkGray = '#888';
+const gray = '#adadad';
+const black = '#000';
+const white = '#fff';
+const offWhite = '#f5f7fa';
+const purple = '#7a43b6';
+const pink = '#ff69b4';
+const lightGray = '#ddd';
+
+module.exports = {
+ textColor: '#ccc',
+ defaultColor: '#ccc',
+ disabledColor: '#999',
+ dimColor: '#555',
+ black,
+ white,
+ offWhite,
+ blue: '#06f',
+ primaryColor: '#5d9cec',
+ selectedColor: '#f9be03',
+ successColor: '#00853d',
+ dangerColor: '#f05050',
+ warningColor: '#ffa500',
+ infoColor: lidarrGreen,
+ purple,
+ pink,
+ lidarrGreen,
+ helpTextColor: '#909293',
+ darkGray,
+ gray,
+ lightGray,
+
+ // Theme Colors
+
+ themeBlue: lidarrGreen,
+ themeAlternateBlue: '#00a65b',
+ themeRed: '#c4273c',
+ themeDarkColor: '#494949',
+ themeLightColor: '#595959',
+ pageBackground: '#202020',
+ pageFooterBackground: 'rgba(0, 0, 0, .25)',
+
+ torrentColor: '#00853d',
+ usenetColor: '#17b1d9',
+
+ // Labels
+ inverseLabelColor: '#ddd',
+ inverseLabelTextColor: '#333',
+ disabledLabelColor: '#838383',
+ infoTextColor: white,
+
+ // Links
+ defaultLinkHoverColor: '#fff',
+ linkColor: '#fff',
+ linkHoverColor: '#0b8750',
+
+ // Header
+ pageHeaderBackgroundColor: '#2a2a2a',
+
+ // Sidebar
+
+ sidebarColor: '#e1e2e3',
+ sidebarBackgroundColor: '#2a2a2a',
+ sidebarActiveBackgroundColor: '#333333',
+
+ // Toolbar
+ toolbarColor: '#e1e2e3',
+ toolbarBackgroundColor: '#262626',
+ toolbarMenuItemBackgroundColor: '#333',
+ toolbarMenuItemHoverBackgroundColor: '#414141',
+ toolbarLabelColor: '#e1e2e3',
+
+ // Accents
+ borderColor: '#858585',
+ inputBorderColor: '#dde6e9',
+ inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
+ inputFocusBorderColor: '#66afe9',
+ inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
+ inputErrorBorderColor: '#f05050',
+ inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
+ inputWarningBorderColor: '#ffa500',
+ inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
+ colorImpairedGradient: '#707070',
+ colorImpairedGradientDark: '#424242',
+ colorImpairedDangerGradient: '#d84848',
+ colorImpairedWarningGradient: '#e59400',
+ colorImpairedPrimaryGradient: '#538cd4',
+ colorImpairedGrayGradient: '#9b9b9b',
+
+ //
+ // Buttons
+
+ defaultButtonTextColor: '#eee',
+ defaultBackgroundColor: '#333',
+ defaultBorderColor: '#393f45',
+ defaultHoverBackgroundColor: '#444',
+ defaultHoverBorderColor: '#5a6265',
+
+ primaryBackgroundColor: '#0b8750',
+ primaryBorderColor: '#1d563d',
+ primaryHoverBackgroundColor: '#097948',
+ primaryHoverBorderColor: '#1D563D',
+
+ successBackgroundColor: '#27c24c',
+ successBorderColor: '#26be4a',
+ successHoverBackgroundColor: '#24b145',
+ successHoverBorderColor: '#1f9c3d',
+
+ warningBackgroundColor: '#ff902b',
+ warningBorderColor: '#ff8d26',
+ warningHoverBackgroundColor: '#ff8517',
+ warningHoverBorderColor: '#fc7800',
+
+ dangerBackgroundColor: '#f05050',
+ dangerBorderColor: '#f04b4b',
+ dangerHoverBackgroundColor: '#ee3d3d',
+ dangerHoverBorderColor: '#ec2626',
+
+ iconButtonDisabledColor: '#7a7a7a',
+ iconButtonHoverColor: '#666',
+ iconButtonHoverLightColor: '#ccc',
+
+ //
+ // Modal
+
+ modalBackdropBackgroundColor: 'rgba(0, 0, 0, 0.6)',
+ modalBackgroundColor: '#2a2a2a',
+ modalCloseButtonHoverColor: '#888',
+
+ //
+ // Menu
+ menuItemColor: '#e1e2e3',
+ menuItemHoverColor: lidarrGreen,
+ menuItemHoverBackgroundColor: '#606060',
+
+ //
+ // Toolbar
+
+ toobarButtonHoverColor: lidarrGreen,
+ toobarButtonSelectedColor: lidarrGreen,
+
+ //
+ // Scroller
+
+ scrollbarBackgroundColor: '#707070',
+ scrollbarHoverBackgroundColor: '#606060',
+
+ //
+ // Card
+
+ cardBackgroundColor: '#333333',
+ cardShadowColor: '#111',
+ cardAlternateBackgroundColor: '#333333',
+ cardCenterBackgroundColor: '#2a2a2a',
+
+ //
+ // Alert
+
+ alertDangerBorderColor: '#a94442',
+ alertDangerBackgroundColor: 'rgba(255,0,0,0.1)',
+ alertDangerColor: '#ccc',
+
+ alertInfoBorderColor: '#31708f',
+ alertInfoBackgroundColor: 'rgba(0,0,255,0.1)',
+ alertInfoColor: '#ccc',
+
+ alertSuccessBorderColor: '#3c763d',
+ alertSuccessBackgroundColor: 'rgba(0,255,0,0.1)',
+ alertSuccessColor: '#ccc',
+
+ alertWarningBorderColor: '#8a6d3b',
+ alertWarningBackgroundColor: 'rgba(255,255,0,0.1)',
+ alertWarningColor: '#ccc',
+
+ //
+ // Slider
+
+ sliderAccentColor: '#0b8750',
+
+ //
+ // Form
+
+ inputBackgroundColor: '#333',
+ inputReadOnlyBackgroundColor: '#222',
+ inputHoverBackgroundColor: 'rgba(255, 255, 255, 0.20)',
+ inputSelectedBackgroundColor: 'rgba(255, 255, 255, 0.05)',
+ advancedFormLabelColor: '#ff902b',
+ disabledCheckInputColor: '#ddd',
+ disabledInputColor: '#808080',
+
+ //
+ // Popover
+
+ popoverTitleBackgroundColor: '#424242',
+ popoverTitleBorderColor: '#2a2a2a',
+ popoverBodyBackgroundColor: '#2a2a2a',
+ popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
+ popoverArrowBorderColor: '#2a2a2a',
+
+ popoverTitleBackgroundInverseColor: '#595959',
+ popoverTitleBorderInverseColor: '#707070',
+ popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
+ popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',
+
+ //
+ // Calendar
+
+ calendarTodayBackgroundColor: '#3e3e3e',
+ calendarBackgroundColor: '#2a2a2a',
+ calendarBorderColor: '#393f45',
+ calendarTextDim: '#eee',
+ calendarTextDimAlternate: '#fff',
+
+ //
+ // Table
+
+ tableRowHoverBackgroundColor: 'rgba(255, 255, 255, 0.08)',
+
+ //
+ // Srtist
+
+ addArtistBackgroundColor: '#2a2a2a',
+ artistBackgroundColor: '#2a2a2a',
+ searchIconContainerBackgroundColor: '#2b2b2b',
+ collapseButtonBackgroundColor: '#2a2a2a',
+
+ //
+ // Album
+
+ albumBackgroundColor: '#424242',
+ trackBackgroundColor: '#2a2a2a',
+
+ //
+ // misc
+
+ progressBarFrontTextColor: white,
+ progressBarBackTextColor: white,
+ progressBarBackgroundColor: '#727070',
+ logEventsBackgroundColor: '#2a2a2a'
+};
diff --git a/frontend/src/Styles/Themes/index.js b/frontend/src/Styles/Themes/index.js
new file mode 100644
index 000000000..4dec39164
--- /dev/null
+++ b/frontend/src/Styles/Themes/index.js
@@ -0,0 +1,11 @@
+import * as dark from './dark';
+import * as light from './light';
+
+const defaultDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+const auto = defaultDark ? dark : light;
+
+export default {
+ auto,
+ light,
+ dark
+};
diff --git a/frontend/src/Styles/Themes/light.js b/frontend/src/Styles/Themes/light.js
new file mode 100644
index 000000000..ccf5dcea6
--- /dev/null
+++ b/frontend/src/Styles/Themes/light.js
@@ -0,0 +1,235 @@
+const lidarrGreen = '#00A65B';
+const darkGray = '#888';
+const gray = '#adadad';
+const black = '#000';
+const white = '#fff';
+const offWhite = '#f5f7fa';
+const purple = '#7a43b6';
+const pink = '#ff69b4';
+const lightGray = '#ddd';
+
+module.exports = {
+ textColor: '#515253',
+ defaultColor: '#333',
+ disabledColor: '#999',
+ dimColor: '#555',
+ black,
+ white,
+ offWhite,
+ blue: '#06f',
+ primaryColor: '#5d9cec',
+ selectedColor: '#f9be03',
+ successColor: '#00853d',
+ dangerColor: '#f05050',
+ warningColor: '#ffa500',
+ infoColor: lidarrGreen,
+ purple,
+ pink,
+ lidarrGreen,
+ helpTextColor: '#909293',
+ darkGray,
+ gray,
+ lightGray,
+
+ // Theme Colors
+
+ themeBlue: lidarrGreen,
+ themeAlternateBlue: '#00a65b',
+ themeRed: '#c4273c',
+ themeDarkColor: '#353535',
+ themeLightColor: '#1d563d',
+ pageBackground: '#f5f7fa',
+ pageFooterBackground: '#f1f1f1',
+
+ torrentColor: '#00853d',
+ usenetColor: '#17b1d9',
+
+ // Labels
+ inverseLabelColor: '#ddd',
+ inverseLabelTextColor: '#333',
+ disabledLabelColor: '#999',
+ infoTextColor: white,
+
+ // Links
+ defaultLinkHoverColor: '#fff',
+ linkColor: '#0b8750',
+ linkHoverColor: '#1b72e2',
+
+ // Header
+ pageHeaderBackgroundColor: lidarrGreen,
+
+ // Sidebar
+
+ sidebarColor: '#e1e2e3',
+ sidebarBackgroundColor: '#353535',
+ sidebarActiveBackgroundColor: '#252525',
+
+ // Toolbar
+ toolbarColor: '#e1e2e3',
+ toolbarBackgroundColor: '#1d563d',
+ toolbarMenuItemBackgroundColor: '#4D8069',
+ toolbarMenuItemHoverBackgroundColor: '#353535',
+ toolbarLabelColor: '#8895aa',
+
+ // Accents
+ borderColor: '#e5e5e5',
+ inputBorderColor: '#dde6e9',
+ inputBoxShadowColor: 'rgba(0, 0, 0, 0.075)',
+ inputFocusBorderColor: '#66afe9',
+ inputFocusBoxShadowColor: 'rgba(102, 175, 233, 0.6)',
+ inputErrorBorderColor: '#f05050',
+ inputErrorBoxShadowColor: 'rgba(240, 80, 80, 0.6)',
+ inputWarningBorderColor: '#ffa500',
+ inputWarningBoxShadowColor: 'rgba(255, 165, 0, 0.6)',
+ colorImpairedGradient: '#ffffff',
+ colorImpairedGradientDark: '#f4f5f6',
+
+ //
+ // Buttons
+
+ defaultButtonTextColor: '#eee',
+ defaultBackgroundColor: '#fff',
+ defaultBorderColor: '#eaeaea',
+ defaultHoverBackgroundColor: '#f5f5f5',
+ defaultHoverBorderColor: '#d6d6d6',
+
+ primaryBackgroundColor: '#0b8750',
+ primaryBorderColor: '#1d563d',
+ primaryHoverBackgroundColor: '#097948',
+ primaryHoverBorderColor: '#1D563D',
+
+ successBackgroundColor: '#27c24c',
+ successBorderColor: '#26be4a',
+ successHoverBackgroundColor: '#24b145',
+ successHoverBorderColor: '#1f9c3d',
+
+ warningBackgroundColor: '#ff902b',
+ warningBorderColor: '#ff8d26',
+ warningHoverBackgroundColor: '#ff8517',
+ warningHoverBorderColor: '#fc7800',
+
+ dangerBackgroundColor: '#f05050',
+ dangerBorderColor: '#f04b4b',
+ dangerHoverBackgroundColor: '#ee3d3d',
+ dangerHoverBorderColor: '#ec2626',
+
+ iconButtonDisabledColor: '#7a7a7a',
+ iconButtonHoverColor: '#666',
+ iconButtonHoverLightColor: '#ccc',
+
+ //
+ // Modal
+
+ modalBackdropBackgroundColor: 'rgba(0, 0, 0, 0.6)',
+ modalBackgroundColor: '#fff',
+ modalCloseButtonHoverColor: '#888',
+
+ //
+ // Menu
+ menuItemColor: '#e1e2e3',
+ menuItemHoverColor: '#fbfcfc',
+ menuItemHoverBackgroundColor: '#f5f7fa',
+
+ //
+ // Toolbar
+
+ toobarButtonHoverColor: '#00A65B',
+ toobarButtonSelectedColor: '#00A65B',
+
+ //
+ // Scroller
+
+ scrollbarBackgroundColor: '#9ea4b9',
+ scrollbarHoverBackgroundColor: '#656d8c',
+
+ //
+ // Card
+
+ cardBackgroundColor: '#fff',
+ cardShadowColor: '#e1e1e1',
+ cardAlternateBackgroundColor: '#f5f5f5',
+ cardCenterBackgroundColor: '#fff',
+
+ //
+ // Alert
+
+ alertDangerBorderColor: '#ebccd1',
+ alertDangerBackgroundColor: '#f2dede',
+ alertDangerColor: '#a94442',
+
+ alertInfoBorderColor: '#bce8f1',
+ alertInfoBackgroundColor: '#d9edf7',
+ alertInfoColor: '#31708f',
+
+ alertSuccessBorderColor: '#d6e9c6',
+ alertSuccessBackgroundColor: '#dff0d8',
+ alertSuccessColor: '#3c763d',
+
+ alertWarningBorderColor: '#faebcc',
+ alertWarningBackgroundColor: '#fcf8e3',
+ alertWarningColor: '#8a6d3b',
+
+ //
+ // Slider
+
+ sliderAccentColor: '#0b8750',
+
+ //
+ // Form
+
+ inputBackgroundColor: '#fff',
+ inputReadOnlyBackgroundColor: '#eee',
+ inputHoverBackgroundColor: '#f8f8f8',
+ inputSelectedBackgroundColor: '#e2e2e2',
+ advancedFormLabelColor: '#ff902b',
+ disabledCheckInputColor: '#ddd',
+ disabledInputColor: '#808080',
+
+ //
+ // Popover
+
+ popoverTitleBackgroundColor: '#f7f7f7',
+ popoverTitleBorderColor: '#ebebeb',
+ popoverBodyBackgroundColor: '#e9e9e9',
+ popoverShadowColor: 'rgba(0, 0, 0, 0.2)',
+ popoverArrowBorderColor: '#fff',
+
+ popoverTitleBackgroundInverseColor: '#3a3f51',
+ popoverTitleBorderInverseColor: '#353535',
+ popoverShadowInverseColor: 'rgba(0, 0, 0, 0.2)',
+ popoverArrowBorderInverseColor: 'rgba(58, 63, 81, 0.75)',
+
+ //
+ // Calendar
+
+ calendarTodayBackgroundColor: '#c5c5c5',
+ calendarBackgroundColor: '#e4eaec',
+ calendarBorderColor: '#cecece',
+
+ //
+ // Table
+
+ tableRowHoverBackgroundColor: '#fafbfc',
+
+ //
+ // Atist
+
+ addArtistBackgroundColor: '#ededed',
+ artistBackgroundColor: '#ededed',
+ searchIconContainerBackgroundColor: offWhite,
+ collapseButtonBackgroundColor: offWhite,
+
+ //
+ // Album
+
+ albumBackgroundColor: white,
+ trackBackgroundColor: offWhite,
+
+ //
+ // misc
+
+ progressBarFrontTextColor: white,
+ progressBarBackTextColor: darkGray,
+ progressBarBackgroundColor: white,
+ logEventsBackgroundColor: white
+};
diff --git a/frontend/src/Styles/Variables/animations.js b/frontend/src/Styles/Variables/animations.js
new file mode 100644
index 000000000..52d12827a
--- /dev/null
+++ b/frontend/src/Styles/Variables/animations.js
@@ -0,0 +1,8 @@
+// Use CommonJS since this is consumed by PostCSS via webpack (node.js).
+
+module.exports = {
+ // Durations
+ defaultSpeed: '0.2s',
+ slowSpeed: '0.6s',
+ fastSpeed: '0.1s'
+};
diff --git a/frontend/src/Styles/Variables/dimensions.js b/frontend/src/Styles/Variables/dimensions.js
new file mode 100644
index 000000000..a704270ff
--- /dev/null
+++ b/frontend/src/Styles/Variables/dimensions.js
@@ -0,0 +1,53 @@
+module.exports = {
+ // Page
+ pageContentBodyPadding: '20px',
+ pageContentBodyPaddingSmallScreen: '10px',
+
+ // Header
+ headerHeight: '60px',
+
+ // Sidebar
+ sidebarWidth: '210px',
+
+ // Toolbar
+ toolbarHeight: '60px',
+ toolbarButtonWidth: '60px',
+ toolbarSeparatorMargin: '20px',
+
+ // Break Points
+ breakpointExtraSmall: '480px',
+ breakpointSmall: '768px',
+ breakpointMedium: '992px',
+ breakpointLarge: '1310px',
+ breakpointExtraLarge: '1450px',
+
+ // Form
+ formGroupExtraSmallWidth: '550px',
+ formGroupSmallWidth: '650px',
+ formGroupMediumWidth: '800px',
+ formGroupLargeWidth: '1200px',
+ formLabelSmallWidth: '150px',
+ formLabelLargeWidth: '250px',
+ formLabelRightMarginWidth: '20px',
+
+ // Drag
+ dragHandleWidth: '40px',
+ qualityProfileItemHeight: '30px',
+ qualityProfileItemDragSourcePadding: '4px',
+
+ // Progress Bar
+ progressBarSmallHeight: '5px',
+ progressBarMediumHeight: '15px',
+ progressBarLargeHeight: '20px',
+
+ // Jump Bar
+ jumpBarItemHeight: '25px',
+
+ // Modal
+ modalBodyPadding: '30px',
+
+ // Artist
+ artistIndexColumnPadding: '10px',
+ artistIndexColumnPaddingSmallScreen: '5px',
+ artistIndexOverviewInfoRowHeight: '21px'
+};
diff --git a/frontend/src/Styles/Variables/fonts.js b/frontend/src/Styles/Variables/fonts.js
new file mode 100644
index 000000000..def48f28e
--- /dev/null
+++ b/frontend/src/Styles/Variables/fonts.js
@@ -0,0 +1,14 @@
+module.exports = {
+ // Families
+ defaultFontFamily: 'Roboto, "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
+ monoSpaceFontFamily: '"Ubuntu Mono", Menlo, Monaco, Consolas, "Courier New", monospace;',
+
+ // Sizes
+ extraSmallFontSize: '11px',
+ smallFontSize: '12px',
+ defaultFontSize: '14px',
+ intermediateFontSize: '15px',
+ largeFontSize: '16px',
+
+ lineHeight: '1.528571429'
+};
diff --git a/frontend/src/Styles/Variables/zIndexes.js b/frontend/src/Styles/Variables/zIndexes.js
new file mode 100644
index 000000000..4d10253a7
--- /dev/null
+++ b/frontend/src/Styles/Variables/zIndexes.js
@@ -0,0 +1,5 @@
+module.exports = {
+ pageJumpBarZIndex: 10,
+ modalZIndex: 1000,
+ popperZIndex: 2000
+};
diff --git a/frontend/src/Styles/globals.css b/frontend/src/Styles/globals.css
new file mode 100644
index 000000000..e630c77b9
--- /dev/null
+++ b/frontend/src/Styles/globals.css
@@ -0,0 +1,6 @@
+/* stylelint-disable */
+
+@import "~normalize.css/normalize.css";
+@import "scaffolding.css";
+
+/* stylelint-enable */
\ No newline at end of file
diff --git a/frontend/src/Styles/scaffolding.css b/frontend/src/Styles/scaffolding.css
new file mode 100644
index 000000000..3f5f0fa65
--- /dev/null
+++ b/frontend/src/Styles/scaffolding.css
@@ -0,0 +1,54 @@
+/* stylelint-disable */
+* {
+ box-sizing: border-box;
+}
+
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+*:focus {
+ outline: none;
+}
+/* stylelint-enable */
+
+html,
+body {
+ color: var(--textColor);
+ font-family: 'Roboto', 'open sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+}
+
+body {
+ font-size: 14px;
+ line-height: 1.528571429; /* 20/14 */
+}
+
+/* Override normalize */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ margin: 0;
+ font-size: inherit;
+ font-family: inherit;
+ line-height: 1.528571429; /* 20/14 */
+}
+
+/* Better defaults for unordererd lists */
+
+ul {
+ margin: 0;
+ padding-left: 20px;
+}
+
+@media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
+ input,
+ optgroup,
+ select,
+ textarea {
+ font-size: 16px;
+ }
+}
diff --git a/frontend/src/System/Backup/BackupRow.css b/frontend/src/System/Backup/BackupRow.css
new file mode 100644
index 000000000..db805650e
--- /dev/null
+++ b/frontend/src/System/Backup/BackupRow.css
@@ -0,0 +1,12 @@
+.type {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 20px;
+ text-align: center;
+}
+
+.actions {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 70px;
+}
diff --git a/frontend/src/System/Backup/BackupRow.css.d.ts b/frontend/src/System/Backup/BackupRow.css.d.ts
new file mode 100644
index 000000000..d758c14ca
--- /dev/null
+++ b/frontend/src/System/Backup/BackupRow.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'type': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Backup/BackupRow.js b/frontend/src/System/Backup/BackupRow.js
new file mode 100644
index 000000000..f053ef741
--- /dev/null
+++ b/frontend/src/System/Backup/BackupRow.js
@@ -0,0 +1,161 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import Link from 'Components/Link/Link';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import RestoreBackupModalConnector from './RestoreBackupModalConnector';
+import styles from './BackupRow.css';
+
+class BackupRow extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isRestoreModalOpen: false,
+ isConfirmDeleteModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onRestorePress = () => {
+ this.setState({ isRestoreModalOpen: true });
+ };
+
+ onRestoreModalClose = () => {
+ this.setState({ isRestoreModalOpen: false });
+ };
+
+ onDeletePress = () => {
+ this.setState({ isConfirmDeleteModalOpen: true });
+ };
+
+ onConfirmDeleteModalClose = () => {
+ this.setState({ isConfirmDeleteModalOpen: false });
+ };
+
+ onConfirmDeletePress = () => {
+ const {
+ id,
+ onDeleteBackupPress
+ } = this.props;
+
+ this.setState({ isConfirmDeleteModalOpen: false }, () => {
+ onDeleteBackupPress(id);
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ id,
+ type,
+ name,
+ path,
+ size,
+ time
+ } = this.props;
+
+ const {
+ isRestoreModalOpen,
+ isConfirmDeleteModalOpen
+ } = this.state;
+
+ let iconClassName = icons.SCHEDULED;
+ let iconTooltip = translate('Scheduled');
+
+ if (type === 'manual') {
+ iconClassName = icons.INTERACTIVE;
+ iconTooltip = translate('Manual');
+ } else if (type === 'update') {
+ iconClassName = icons.UPDATE;
+ iconTooltip = translate('BeforeUpdate');
+ }
+
+ return (
+
+
+ {
+
+
+
+
+
+
+ {formatBytes(size)}
+
+
+
+
+
+
+ );
+ }
+}
+
+BackupRow.propTypes = {
+ id: PropTypes.number.isRequired,
+ type: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ path: PropTypes.string.isRequired,
+ size: PropTypes.number.isRequired,
+ time: PropTypes.string.isRequired,
+ onDeleteBackupPress: PropTypes.func.isRequired
+};
+
+export default BackupRow;
diff --git a/frontend/src/System/Backup/Backups.js b/frontend/src/System/Backup/Backups.js
new file mode 100644
index 000000000..8f7a5b0a5
--- /dev/null
+++ b/frontend/src/System/Backup/Backups.js
@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import BackupRow from './BackupRow';
+import RestoreBackupModalConnector from './RestoreBackupModalConnector';
+
+const columns = [
+ {
+ name: 'type',
+ isVisible: true
+ },
+ {
+ name: 'name',
+ label: () => translate('Name'),
+ isVisible: true
+ },
+ {
+ name: 'size',
+ label: () => translate('Size'),
+ isVisible: true
+ },
+ {
+ name: 'time',
+ label: () => translate('Time'),
+ isVisible: true
+ },
+ {
+ name: 'actions',
+ isVisible: true
+ }
+];
+
+class Backups extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isRestoreModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onRestorePress = () => {
+ this.setState({ isRestoreModalOpen: true });
+ };
+
+ onRestoreModalClose = () => {
+ this.setState({ isRestoreModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ backupExecuting,
+ onBackupPress,
+ onDeleteBackupPress
+ } = this.props;
+
+ const hasBackups = isPopulated && !!items.length;
+ const noBackups = isPopulated && !items.length;
+
+ return (
+
+
+
+
+
+
+
+ {
+ isFetching && !isPopulated &&
+
+ {translate('UnableToLoadBackups')}
+
+ }
+
+ {
+ noBackups &&
+
+ {translate('NoBackupsAreAvailable')}
+
+ }
+
+ {
+ hasBackups &&
+
+
+ {
+ items.map((item) => {
+ const {
+ id,
+ type,
+ name,
+ path,
+ size,
+ time
+ } = item;
+
+ return (
+
+
+ }
+
+
+
+ );
+ }
+
+}
+
+Backups.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.array.isRequired,
+ backupExecuting: PropTypes.bool.isRequired,
+ onBackupPress: PropTypes.func.isRequired,
+ onDeleteBackupPress: PropTypes.func.isRequired
+};
+
+export default Backups;
diff --git a/frontend/src/System/Backup/BackupsConnector.js b/frontend/src/System/Backup/BackupsConnector.js
new file mode 100644
index 000000000..1353b6196
--- /dev/null
+++ b/frontend/src/System/Backup/BackupsConnector.js
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { deleteBackup, fetchBackups } from 'Store/Actions/systemActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import Backups from './Backups';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.backups,
+ createCommandExecutingSelector(commandNames.BACKUP),
+ (backups, backupExecuting) => {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items
+ } = backups;
+
+ return {
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ backupExecuting
+ };
+ }
+ );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ dispatchFetchBackups() {
+ dispatch(fetchBackups());
+ },
+
+ onDeleteBackupPress(id) {
+ dispatch(deleteBackup({ id }));
+ },
+
+ onBackupPress() {
+ dispatch(executeCommand({
+ name: commandNames.BACKUP
+ }));
+ }
+ };
+}
+
+class BackupsConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.dispatchFetchBackups();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.backupExecuting && !this.props.backupExecuting) {
+ this.props.dispatchFetchBackups();
+ }
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+}
+
+RestoreBackupModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default RestoreBackupModal;
diff --git a/frontend/src/System/Backup/RestoreBackupModalConnector.js b/frontend/src/System/Backup/RestoreBackupModalConnector.js
new file mode 100644
index 000000000..98cbcd11b
--- /dev/null
+++ b/frontend/src/System/Backup/RestoreBackupModalConnector.js
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { clearRestoreBackup } from 'Store/Actions/systemActions';
+import RestoreBackupModal from './RestoreBackupModal';
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ onModalClose() {
+ dispatch(clearRestoreBackup());
+
+ props.onModalClose();
+ }
+ };
+}
+
+export default connect(null, createMapDispatchToProps)(RestoreBackupModal);
diff --git a/frontend/src/System/Backup/RestoreBackupModalContent.css b/frontend/src/System/Backup/RestoreBackupModalContent.css
new file mode 100644
index 000000000..2775e8e08
--- /dev/null
+++ b/frontend/src/System/Backup/RestoreBackupModalContent.css
@@ -0,0 +1,24 @@
+.additionalInfo {
+ flex-grow: 1;
+ color: #777;
+}
+
+.steps {
+ margin-top: 20px;
+}
+
+.step {
+ display: flex;
+ font-size: $largeFontSize;
+ line-height: 20px;
+}
+
+.stepState {
+ margin-right: 8px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+ composes: modalFooter from '~Components/Modal/ModalFooter.css';
+
+ flex-wrap: wrap;
+}
diff --git a/frontend/src/System/Backup/RestoreBackupModalContent.css.d.ts b/frontend/src/System/Backup/RestoreBackupModalContent.css.d.ts
new file mode 100644
index 000000000..6603c6533
--- /dev/null
+++ b/frontend/src/System/Backup/RestoreBackupModalContent.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'additionalInfo': string;
+ 'step': string;
+ 'stepState': string;
+ 'steps': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Backup/RestoreBackupModalContent.js b/frontend/src/System/Backup/RestoreBackupModalContent.js
new file mode 100644
index 000000000..d6cfb0c81
--- /dev/null
+++ b/frontend/src/System/Backup/RestoreBackupModalContent.js
@@ -0,0 +1,239 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TextInput from 'Components/Form/TextInput';
+import Icon from 'Components/Icon';
+import Button from 'Components/Link/Button';
+import SpinnerButton from 'Components/Link/SpinnerButton';
+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 { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import styles from './RestoreBackupModalContent.css';
+
+function getErrorMessage(error) {
+ if (!error || !error.responseJSON || !error.responseJSON.message) {
+ return translate('ErrorRestoringBackup');
+ }
+
+ return error.responseJSON.message;
+}
+
+function getStepIconProps(isExecuting, hasExecuted, error) {
+ if (isExecuting) {
+ return {
+ name: icons.SPINNER,
+ isSpinning: true
+ };
+ }
+
+ if (hasExecuted) {
+ return {
+ name: icons.CHECK,
+ kind: kinds.SUCCESS
+ };
+ }
+
+ if (error) {
+ return {
+ name: icons.FATAL,
+ kinds: kinds.DANGER,
+ title: getErrorMessage(error)
+ };
+ }
+
+ return {
+ name: icons.PENDING
+ };
+}
+
+class RestoreBackupModalContent extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ file: null,
+ path: '',
+ isRestored: false,
+ isRestarted: false,
+ isReloading: false
+ };
+ }
+
+ componentDidUpdate(prevProps) {
+ const {
+ isRestoring,
+ restoreError,
+ isRestarting,
+ dispatchRestart
+ } = this.props;
+
+ if (prevProps.isRestoring && !isRestoring && !restoreError) {
+ this.setState({ isRestored: true }, () => {
+ dispatchRestart();
+ });
+ }
+
+ if (prevProps.isRestarting && !isRestarting) {
+ this.setState({
+ isRestarted: true,
+ isReloading: true
+ }, () => {
+ location.reload();
+ });
+ }
+ }
+
+ //
+ // Listeners
+
+ onPathChange = ({ value, files }) => {
+ this.setState({
+ file: files[0],
+ path: value
+ });
+ };
+
+ onRestorePress = () => {
+ const {
+ id,
+ onRestorePress
+ } = this.props;
+
+ onRestorePress({
+ id,
+ file: this.state.file
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ id,
+ name,
+ isRestoring,
+ restoreError,
+ isRestarting,
+ onModalClose
+ } = this.props;
+
+ const {
+ path,
+ isRestored,
+ isRestarted,
+ isReloading
+ } = this.state;
+
+ const isRestoreDisabled = (
+ (!id && !path) ||
+ isRestoring ||
+ isRestarting ||
+ isReloading
+ );
+
+ return (
+
+
+ Restore Backup
+
+
+
+ {
+ !!id && translate('WouldYouLikeToRestoreBackup', { name })
+ }
+
+ {
+ !id &&
+
+
+
+
+
+
+ {translate('Restore')}
+
+
+
+
+
+
+
+
+ {translate('Restart')}
+
+
+
+
+
+
+
+
+ {translate('Reload')}
+
+
+
+
+
+
+ {translate('RestoreBackupAdditionalInfo')}
+
+
+
+ {translate('Cancel')}
+
+
+
+ {translate('Restore')}
+
+
+
+ );
+ }
+}
+
+RestoreBackupModalContent.propTypes = {
+ id: PropTypes.number,
+ name: PropTypes.string,
+ path: PropTypes.string,
+ isRestoring: PropTypes.bool.isRequired,
+ restoreError: PropTypes.object,
+ isRestarting: PropTypes.bool.isRequired,
+ dispatchRestart: PropTypes.func.isRequired,
+ onRestorePress: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default RestoreBackupModalContent;
diff --git a/frontend/src/System/Backup/RestoreBackupModalContentConnector.js b/frontend/src/System/Backup/RestoreBackupModalContentConnector.js
new file mode 100644
index 000000000..d408d0f50
--- /dev/null
+++ b/frontend/src/System/Backup/RestoreBackupModalContentConnector.js
@@ -0,0 +1,37 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { restart, restoreBackup } from 'Store/Actions/systemActions';
+import RestoreBackupModalContent from './RestoreBackupModalContent';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.backups,
+ (state) => state.app.isRestarting,
+ (backups, isRestarting) => {
+ const {
+ isRestoring,
+ restoreError
+ } = backups;
+
+ return {
+ isRestoring,
+ restoreError,
+ isRestarting
+ };
+ }
+ );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ onRestorePress(payload) {
+ dispatch(restoreBackup(payload));
+ },
+
+ dispatchRestart() {
+ dispatch(restart());
+ }
+ };
+}
+
+export default connect(createMapStateToProps, createMapDispatchToProps)(RestoreBackupModalContent);
diff --git a/frontend/src/System/Events/LogsTable.js b/frontend/src/System/Events/LogsTable.js
new file mode 100644
index 000000000..1c37a03ba
--- /dev/null
+++ b/frontend/src/System/Events/LogsTable.js
@@ -0,0 +1,141 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import { align, icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import LogsTableRow from './LogsTableRow';
+
+function LogsTable(props) {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ columns,
+ selectedFilterKey,
+ filters,
+ totalRecords,
+ clearLogExecuting,
+ onRefreshPress,
+ onClearLogsPress,
+ onFilterSelect,
+ ...otherProps
+ } = props;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ isFetching && !isPopulated &&
+
+ {translate('NoEventsFound')}
+
+ }
+
+ {
+ isPopulated && !error && !!items.length &&
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+
+
+
+ );
+}
+
+LogsTable.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ selectedFilterKey: PropTypes.string.isRequired,
+ filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+ totalRecords: PropTypes.number,
+ clearLogExecuting: PropTypes.bool.isRequired,
+ onFilterSelect: PropTypes.func.isRequired,
+ onRefreshPress: PropTypes.func.isRequired,
+ onClearLogsPress: PropTypes.func.isRequired
+};
+
+export default LogsTable;
diff --git a/frontend/src/System/Events/LogsTableConnector.js b/frontend/src/System/Events/LogsTableConnector.js
new file mode 100644
index 000000000..a717cba15
--- /dev/null
+++ b/frontend/src/System/Events/LogsTableConnector.js
@@ -0,0 +1,148 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
+import * as systemActions from 'Store/Actions/systemActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import LogsTable from './LogsTable';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.logs,
+ createCommandExecutingSelector(commandNames.CLEAR_LOGS),
+ (logs, clearLogExecuting) => {
+ return {
+ clearLogExecuting,
+ ...logs
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ executeCommand,
+ ...systemActions
+};
+
+class LogsTableConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ useCurrentPage,
+ fetchLogs,
+ gotoLogsFirstPage
+ } = this.props;
+
+ if (useCurrentPage) {
+ fetchLogs();
+ } else {
+ gotoLogsFirstPage();
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.clearLogExecuting && !this.props.clearLogExecuting) {
+ this.props.gotoLogsFirstPage();
+ }
+ }
+
+ //
+ // Listeners
+
+ onFirstPagePress = () => {
+ this.props.gotoLogsFirstPage();
+ };
+
+ onPreviousPagePress = () => {
+ this.props.gotoLogsPreviousPage();
+ };
+
+ onNextPagePress = () => {
+ this.props.gotoLogsNextPage();
+ };
+
+ onLastPagePress = () => {
+ this.props.gotoLogsLastPage();
+ };
+
+ onPageSelect = (page) => {
+ this.props.gotoLogsPage({ page });
+ };
+
+ onSortPress = (sortKey) => {
+ this.props.setLogsSort({ sortKey });
+ };
+
+ onFilterSelect = (selectedFilterKey) => {
+ this.props.setLogsFilter({ selectedFilterKey });
+ };
+
+ onTableOptionChange = (payload) => {
+ this.props.setLogsTableOption(payload);
+
+ if (payload.pageSize) {
+ this.props.gotoLogsFirstPage();
+ }
+ };
+
+ onRefreshPress = () => {
+ this.props.gotoLogsFirstPage();
+ };
+
+ onClearLogsPress = () => {
+ this.props.executeCommand({
+ name: commandNames.CLEAR_LOGS,
+ commandFinished: this.onCommandFinished
+ });
+ };
+
+ onCommandFinished = () => {
+ this.props.gotoLogsFirstPage();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+ Details
+
+
+
+
+ {translate('Message')}
+
+
+
+ {message}
+
+
+ {
+ !!exception &&
+
+
+ {translate('Exception')}
+
+
+ {exception}
+
+
+
+
+
+ Close
+
+
+
+
+ );
+}
+
+LogsTableDetailsModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ message: PropTypes.string.isRequired,
+ exception: PropTypes.string,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default LogsTableDetailsModal;
diff --git a/frontend/src/System/Events/LogsTableRow.css b/frontend/src/System/Events/LogsTableRow.css
new file mode 100644
index 000000000..0c5a3e1c6
--- /dev/null
+++ b/frontend/src/System/Events/LogsTableRow.css
@@ -0,0 +1,35 @@
+.level {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 20px;
+}
+
+.info {
+ color: #1e90ff;
+}
+
+.debug {
+ color: #808080;
+}
+
+.trace {
+ color: #d3d3d3;
+}
+
+.warn {
+ color: var(--warningColor);
+}
+
+.error {
+ color: var(--dangerColor);
+}
+
+.fatal {
+ color: var(--purple);
+}
+
+.actions {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 45px;
+}
diff --git a/frontend/src/System/Events/LogsTableRow.css.d.ts b/frontend/src/System/Events/LogsTableRow.css.d.ts
new file mode 100644
index 000000000..c0267e838
--- /dev/null
+++ b/frontend/src/System/Events/LogsTableRow.css.d.ts
@@ -0,0 +1,14 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'debug': string;
+ 'error': string;
+ 'fatal': string;
+ 'info': string;
+ 'level': string;
+ 'trace': string;
+ 'warn': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Events/LogsTableRow.js b/frontend/src/System/Events/LogsTableRow.js
new file mode 100644
index 000000000..8d2d5f541
--- /dev/null
+++ b/frontend/src/System/Events/LogsTableRow.js
@@ -0,0 +1,157 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRowButton from 'Components/Table/TableRowButton';
+import { icons } from 'Helpers/Props';
+import LogsTableDetailsModal from './LogsTableDetailsModal';
+import styles from './LogsTableRow.css';
+
+function getIconName(level) {
+ switch (level) {
+ case 'trace':
+ case 'debug':
+ case 'info':
+ return icons.INFO;
+ case 'warn':
+ return icons.DANGER;
+ case 'error':
+ return icons.BUG;
+ case 'fatal':
+ return icons.FATAL;
+ default:
+ return icons.UNKNOWN;
+ }
+}
+
+class LogsTableRow extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isDetailsModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onPress = () => {
+ // Don't re-open the modal if it's already open
+ if (!this.state.isDetailsModalOpen) {
+ this.setState({ isDetailsModalOpen: true });
+ }
+ };
+
+ onModalClose = () => {
+ this.setState({ isDetailsModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ level,
+ time,
+ logger,
+ message,
+ exception,
+ columns
+ } = this.props;
+
+ return (
+
+ {
+ columns.map((column) => {
+ const {
+ name,
+ isVisible
+ } = column;
+
+ if (!isVisible) {
+ return null;
+ }
+
+ if (name === 'level') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'time') {
+ return (
+
+ {logger}
+
+ );
+ }
+
+ if (name === 'message') {
+ return (
+
+ {message}
+
+ );
+ }
+
+ if (name === 'actions') {
+ return (
+
+ );
+ }
+
+}
+
+LogsTableRow.propTypes = {
+ level: PropTypes.string.isRequired,
+ time: PropTypes.string.isRequired,
+ logger: PropTypes.string.isRequired,
+ message: PropTypes.string.isRequired,
+ exception: PropTypes.string,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default LogsTableRow;
diff --git a/frontend/src/System/Logs/Files/LogFiles.js b/frontend/src/System/Logs/Files/LogFiles.js
new file mode 100644
index 000000000..5339a8590
--- /dev/null
+++ b/frontend/src/System/Logs/Files/LogFiles.js
@@ -0,0 +1,143 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { icons, kinds } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import LogsNavMenu from '../LogsNavMenu';
+import LogFilesTableRow from './LogFilesTableRow';
+
+const columns = [
+ {
+ name: 'filename',
+ label: () => translate('Filename'),
+ isVisible: true
+ },
+ {
+ name: 'lastWriteTime',
+ label: () => translate('LastWriteTime'),
+ isVisible: true
+ },
+ {
+ name: 'download',
+ isVisible: true
+ }
+];
+
+class LogFiles extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ isFetching,
+ items,
+ deleteFilesExecuting,
+ currentLogView,
+ location,
+ onRefreshPress,
+ onDeleteFilesPress,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+
+
+
+
+
+
+ {translate('LogFilesLocation', {
+ location
+ })}
+
+
+ {currentLogView === 'Log Files' ? (
+
+
+ ) : null}
+
+
+ {
+ isFetching &&
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+ {translate('NoLogFiles')}
+
+ }
+
+
+ );
+ }
+
+}
+
+LogFiles.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ items: PropTypes.array.isRequired,
+ deleteFilesExecuting: PropTypes.bool.isRequired,
+ currentLogView: PropTypes.string.isRequired,
+ location: PropTypes.string.isRequired,
+ onRefreshPress: PropTypes.func.isRequired,
+ onDeleteFilesPress: PropTypes.func.isRequired
+};
+
+export default LogFiles;
diff --git a/frontend/src/System/Logs/Files/LogFilesConnector.js b/frontend/src/System/Logs/Files/LogFilesConnector.js
new file mode 100644
index 000000000..98a55f32f
--- /dev/null
+++ b/frontend/src/System/Logs/Files/LogFilesConnector.js
@@ -0,0 +1,91 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchLogFiles } from 'Store/Actions/systemActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import combinePath from 'Utilities/String/combinePath';
+import LogFiles from './LogFiles';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.logFiles,
+ (state) => state.system.status.item,
+ createCommandExecutingSelector(commandNames.DELETE_LOG_FILES),
+ (logFiles, status, deleteFilesExecuting) => {
+ const {
+ isFetching,
+ items
+ } = logFiles;
+
+ const {
+ appData,
+ isWindows
+ } = status;
+
+ return {
+ isFetching,
+ items,
+ deleteFilesExecuting,
+ currentLogView: 'Log Files',
+ location: combinePath(isWindows, appData, ['logs'])
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchLogFiles,
+ executeCommand
+};
+
+class LogFilesConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchLogFiles();
+ }
+
+ //
+ // Listeners
+
+ onRefreshPress = () => {
+ this.props.fetchLogFiles();
+ };
+
+ onDeleteFilesPress = () => {
+ this.props.executeCommand({
+ name: commandNames.DELETE_LOG_FILES,
+ commandFinished: this.onCommandFinished
+ });
+ };
+
+ onCommandFinished = () => {
+ this.props.fetchLogFiles();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {filename}
+
+
+
+
+ );
+ }
+
+}
+
+LogFilesTableRow.propTypes = {
+ filename: PropTypes.string.isRequired,
+ lastWriteTime: PropTypes.string.isRequired,
+ downloadUrl: PropTypes.string.isRequired
+};
+
+export default LogFilesTableRow;
diff --git a/frontend/src/System/Logs/Logs.js b/frontend/src/System/Logs/Logs.js
new file mode 100644
index 000000000..fa0be453e
--- /dev/null
+++ b/frontend/src/System/Logs/Logs.js
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { Route } from 'react-router-dom';
+import Switch from 'Components/Router/Switch';
+import LogFilesConnector from './Files/LogFilesConnector';
+import UpdateLogFilesConnector from './Updates/UpdateLogFilesConnector';
+
+class Logs extends Component {
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ );
+ }
+}
+
+export default Logs;
diff --git a/frontend/src/System/Logs/LogsNavMenu.js b/frontend/src/System/Logs/LogsNavMenu.js
new file mode 100644
index 000000000..cc485f270
--- /dev/null
+++ b/frontend/src/System/Logs/LogsNavMenu.js
@@ -0,0 +1,71 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Menu from 'Components/Menu/Menu';
+import MenuButton from 'Components/Menu/MenuButton';
+import MenuContent from 'Components/Menu/MenuContent';
+import MenuItem from 'Components/Menu/MenuItem';
+
+class LogsNavMenu extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isMenuOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onMenuButtonPress = () => {
+ this.setState({ isMenuOpen: !this.state.isMenuOpen });
+ };
+
+ onMenuItemPress = () => {
+ this.setState({ isMenuOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ current
+ } = this.props;
+
+ return (
+
+
+ {current}
+
+
+
+ Log Files
+
+
+
+ Updater Log Files
+
+
+
+ );
+ }
+}
+
+LogsNavMenu.propTypes = {
+ current: PropTypes.string.isRequired
+};
+
+export default LogsNavMenu;
diff --git a/frontend/src/System/Logs/Updates/UpdateLogFilesConnector.js b/frontend/src/System/Logs/Updates/UpdateLogFilesConnector.js
new file mode 100644
index 000000000..537816014
--- /dev/null
+++ b/frontend/src/System/Logs/Updates/UpdateLogFilesConnector.js
@@ -0,0 +1,90 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchUpdateLogFiles } from 'Store/Actions/systemActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import combinePath from 'Utilities/String/combinePath';
+import LogFiles from '../Files/LogFiles';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.updateLogFiles,
+ (state) => state.system.status.item,
+ createCommandExecutingSelector(commandNames.DELETE_UPDATE_LOG_FILES),
+ (updateLogFiles, status, deleteFilesExecuting) => {
+ const {
+ isFetching,
+ items
+ } = updateLogFiles;
+
+ const {
+ appData,
+ isWindows
+ } = status;
+
+ return {
+ isFetching,
+ items,
+ deleteFilesExecuting,
+ currentLogView: 'Updater Log Files',
+ location: combinePath(isWindows, appData, ['UpdateLogs'])
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchUpdateLogFiles,
+ executeCommand
+};
+
+class UpdateLogFilesConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchUpdateLogFiles();
+ }
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.deleteFilesExecuting && !this.props.deleteFilesExecuting) {
+ this.props.fetchUpdateLogFiles();
+ }
+ }
+
+ //
+ // Listeners
+
+ onRefreshPress = () => {
+ this.props.fetchUpdateLogFiles();
+ };
+
+ onDeleteFilesPress = () => {
+ this.props.executeCommand({ name: commandNames.DELETE_UPDATE_LOG_FILES });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+ {packageVersion} {' by '}
+
+ );
+ }
+
+}
+
+About.propTypes = {
+ version: PropTypes.string.isRequired,
+ packageVersion: PropTypes.string,
+ packageAuthor: PropTypes.string,
+ isNetCore: PropTypes.bool.isRequired,
+ runtimeVersion: PropTypes.string.isRequired,
+ isDocker: PropTypes.bool.isRequired,
+ databaseType: PropTypes.string.isRequired,
+ databaseVersion: PropTypes.string.isRequired,
+ migrationVersion: PropTypes.number.isRequired,
+ appData: PropTypes.string.isRequired,
+ startupPath: PropTypes.string.isRequired,
+ mode: PropTypes.string.isRequired,
+ startTime: PropTypes.string.isRequired,
+ timeFormat: PropTypes.string.isRequired,
+ longDateFormat: PropTypes.string.isRequired
+};
+
+export default About;
diff --git a/frontend/src/System/Status/About/AboutConnector.js b/frontend/src/System/Status/About/AboutConnector.js
new file mode 100644
index 000000000..475d9778b
--- /dev/null
+++ b/frontend/src/System/Status/About/AboutConnector.js
@@ -0,0 +1,52 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchStatus } from 'Store/Actions/systemActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import About from './About';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.status,
+ createUISettingsSelector(),
+ (status, uiSettings) => {
+ return {
+ ...status.item,
+ timeFormat: uiSettings.timeFormat,
+ longDateFormat: uiSettings.longDateFormat
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchStatus
+};
+
+class AboutConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchStatus();
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {uptime}
+
+ );
+ }
+}
+
+StartTime.propTypes = {
+ startTime: PropTypes.string.isRequired,
+ timeFormat: PropTypes.string.isRequired,
+ longDateFormat: PropTypes.string.isRequired
+};
+
+export default StartTime;
diff --git a/frontend/src/System/Status/DiskSpace/DiskSpace.css b/frontend/src/System/Status/DiskSpace/DiskSpace.css
new file mode 100644
index 000000000..dd92926d4
--- /dev/null
+++ b/frontend/src/System/Status/DiskSpace/DiskSpace.css
@@ -0,0 +1,5 @@
+.space {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 150px;
+}
diff --git a/frontend/src/System/Status/DiskSpace/DiskSpace.css.d.ts b/frontend/src/System/Status/DiskSpace/DiskSpace.css.d.ts
new file mode 100644
index 000000000..23a67ff58
--- /dev/null
+++ b/frontend/src/System/Status/DiskSpace/DiskSpace.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'space': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Status/DiskSpace/DiskSpace.js b/frontend/src/System/Status/DiskSpace/DiskSpace.js
new file mode 100644
index 000000000..38cf9254a
--- /dev/null
+++ b/frontend/src/System/Status/DiskSpace/DiskSpace.js
@@ -0,0 +1,123 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import FieldSet from 'Components/FieldSet';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import ProgressBar from 'Components/ProgressBar';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableRow from 'Components/Table/TableRow';
+import { kinds, sizes } from 'Helpers/Props';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import styles from './DiskSpace.css';
+
+const columns = [
+ {
+ name: 'path',
+ label: () => translate('Location'),
+ isVisible: true
+ },
+ {
+ name: 'freeSpace',
+ label: () => translate('FreeSpace'),
+ isVisible: true
+ },
+ {
+ name: 'totalSpace',
+ label: () => translate('TotalSpace'),
+ isVisible: true
+ },
+ {
+ name: 'progress',
+ isVisible: true
+ }
+];
+
+class DiskSpace extends Component {
+
+ //
+ // Render
+
+ render() {
+ const {
+ isFetching,
+ items
+ } = this.props;
+
+ return (
+
+ {
+ isFetching &&
+
+
+ {
+ items.map((item) => {
+ const {
+ freeSpace,
+ totalSpace
+ } = item;
+
+ const diskUsage = Math.round(100 - freeSpace / totalSpace * 100);
+ let diskUsageKind = kinds.PRIMARY;
+
+ if (diskUsage > 90) {
+ diskUsageKind = kinds.DANGER;
+ } else if (diskUsage > 80) {
+ diskUsageKind = kinds.WARNING;
+ }
+
+ return (
+
+
+ {item.path}
+
+ {
+ item.label &&
+ ` (${item.label})`
+ }
+
+
+
+ {formatBytes(freeSpace)}
+
+
+
+ {formatBytes(totalSpace)}
+
+
+
+ = 12}
+ text={`${diskUsage}%`}
+ />
+
+
+ );
+ })
+ }
+
+
+ }
+
+ );
+ }
+
+}
+
+DiskSpace.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ items: PropTypes.array.isRequired
+};
+
+export default DiskSpace;
diff --git a/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js b/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js
new file mode 100644
index 000000000..3049b2ead
--- /dev/null
+++ b/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js
@@ -0,0 +1,54 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchDiskSpace } from 'Store/Actions/systemActions';
+import DiskSpace from './DiskSpace';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.diskSpace,
+ (diskSpace) => {
+ const {
+ isFetching,
+ items
+ } = diskSpace;
+
+ return {
+ isFetching,
+ items
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchDiskSpace
+};
+
+class DiskSpaceConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchDiskSpace();
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+}
+
+Donations.propTypes = {
+
+};
+
+export default Donations;
diff --git a/frontend/src/System/Status/Health/Health.css b/frontend/src/System/Status/Health/Health.css
new file mode 100644
index 000000000..1c4cb6a9d
--- /dev/null
+++ b/frontend/src/System/Status/Health/Health.css
@@ -0,0 +1,20 @@
+.legend {
+ display: flex;
+ justify-content: space-between;
+}
+
+.loading {
+ composes: loading from '~Components/Loading/LoadingIndicator.css';
+
+ margin-top: 2px;
+ margin-left: 10px;
+ text-align: left;
+}
+
+.status {
+ width: 20px;
+}
+
+.healthOk {
+ margin-bottom: 25px;
+}
diff --git a/frontend/src/System/Status/Health/Health.css.d.ts b/frontend/src/System/Status/Health/Health.css.d.ts
new file mode 100644
index 000000000..f25332f00
--- /dev/null
+++ b/frontend/src/System/Status/Health/Health.css.d.ts
@@ -0,0 +1,10 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'healthOk': string;
+ 'legend': string;
+ 'loading': string;
+ 'status': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Status/Health/Health.js b/frontend/src/System/Status/Health/Health.js
new file mode 100644
index 000000000..7d4eaf58e
--- /dev/null
+++ b/frontend/src/System/Status/Health/Health.js
@@ -0,0 +1,243 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import FieldSet from 'Components/FieldSet';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableRow from 'Components/Table/TableRow';
+import { icons, kinds } from 'Helpers/Props';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import styles from './Health.css';
+
+function getInternalLink(source) {
+ switch (source) {
+ case 'IndexerRssCheck':
+ case 'IndexerSearchCheck':
+ case 'IndexerStatusCheck':
+ case 'IndexerJackettAllCheck':
+ case 'IndexerLongTermStatusCheck':
+ return (
+
+ Health
+
+ {
+ isFetching && isPopulated &&
+
+ No issues with your configuration
+
+ }
+
+ {
+ healthIssues &&
+
+
+ {
+ items.map((item) => {
+ const internalLink = getInternalLink(item.source);
+ const testLink = getTestLink(item.source, this.props);
+
+ let kind = kinds.WARNING;
+ switch (item.type.toLowerCase()) {
+ case 'error':
+ kind = kinds.DANGER;
+ break;
+ default:
+ case 'warning':
+ kind = kinds.WARNING;
+ break;
+ case 'notice':
+ kind = kinds.INFO;
+ break;
+ }
+
+ return (
+
+
+
+
+ {item.message}
+
+
+
+
+ );
+ })
+ }
+
+
+ }
+ {
+ healthIssues &&
+
+
+ }
+
+ );
+ }
+
+}
+
+Health.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ items: PropTypes.array.isRequired,
+ isTestingAllDownloadClients: PropTypes.bool.isRequired,
+ isTestingAllIndexers: PropTypes.bool.isRequired,
+ dispatchTestAllDownloadClients: PropTypes.func.isRequired,
+ dispatchTestAllIndexers: PropTypes.func.isRequired
+};
+
+export default Health;
diff --git a/frontend/src/System/Status/Health/HealthConnector.js b/frontend/src/System/Status/Health/HealthConnector.js
new file mode 100644
index 000000000..dd13b0a9c
--- /dev/null
+++ b/frontend/src/System/Status/Health/HealthConnector.js
@@ -0,0 +1,69 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { testAllDownloadClients, testAllIndexers } from 'Store/Actions/settingsActions';
+import { fetchHealth } from 'Store/Actions/systemActions';
+import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
+import Health from './Health';
+
+function createMapStateToProps() {
+ return createSelector(
+ createHealthCheckSelector(),
+ (state) => state.system.health,
+ (state) => state.settings.downloadClients.isTestingAll,
+ (state) => state.settings.indexers.isTestingAll,
+ (items, health, isTestingAllDownloadClients, isTestingAllIndexers) => {
+ const {
+ isFetching,
+ isPopulated
+ } = health;
+
+ return {
+ isFetching,
+ isPopulated,
+ items,
+ isTestingAllDownloadClients,
+ isTestingAllIndexers
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchHealth: fetchHealth,
+ dispatchTestAllDownloadClients: testAllDownloadClients,
+ dispatchTestAllIndexers: testAllIndexers
+};
+
+class HealthConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.dispatchFetchHealth();
+ }
+
+ //
+ // Render
+
+ render() {
+ const {
+ dispatchFetchHealth,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ Home page
+
+
+
+ Wiki
+
+
+
+ Reddit
+
+
+
+ Discord
+
+
+
+ Source
+
+
+
+ Feature Requests
+
+
+
+
+
+ );
+ }
+}
+
+MoreInfo.propTypes = {
+
+};
+
+export default MoreInfo;
diff --git a/frontend/src/System/Status/Status.js b/frontend/src/System/Status/Status.js
new file mode 100644
index 000000000..c1f5dac3b
--- /dev/null
+++ b/frontend/src/System/Status/Status.js
@@ -0,0 +1,32 @@
+import React, { Component } from 'react';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import translate from 'Utilities/String/translate';
+import AboutConnector from './About/AboutConnector';
+import DiskSpaceConnector from './DiskSpace/DiskSpaceConnector';
+import Donations from './Donations/Donations';
+import HealthConnector from './Health/HealthConnector';
+import MoreInfo from './MoreInfo/MoreInfo';
+
+class Status extends Component {
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+ );
+ }
+
+}
+
+export default Status;
diff --git a/frontend/src/System/Status/styles.css b/frontend/src/System/Status/styles.css
new file mode 100644
index 000000000..44fe69bad
--- /dev/null
+++ b/frontend/src/System/Status/styles.css
@@ -0,0 +1,17 @@
+.logo {
+ margin: auto;
+ padding: 9px;
+}
+
+.logoContainer {
+ display: inline-block;
+ margin: 0.5em;
+ width: 50px;
+ height: 50px;
+ outline: none;
+ border: solid 1px #e6e6e6;
+ border-radius: 0.5em;
+ background: #f8f8ff;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ cursor: pointer;
+}
diff --git a/frontend/src/System/Status/styles.css.d.ts b/frontend/src/System/Status/styles.css.d.ts
new file mode 100644
index 000000000..521c670e6
--- /dev/null
+++ b/frontend/src/System/Status/styles.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'logo': string;
+ 'logoContainer': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRow.css b/frontend/src/System/Tasks/Queued/QueuedTaskRow.css
new file mode 100644
index 000000000..6e38929c9
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRow.css
@@ -0,0 +1,31 @@
+.trigger {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 50px;
+}
+
+.triggerContent {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+}
+
+.queued,
+.started,
+.ended {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 180px;
+}
+
+.duration {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 100px;
+}
+
+.actions {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 60px;
+}
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRow.css.d.ts b/frontend/src/System/Tasks/Queued/QueuedTaskRow.css.d.ts
new file mode 100644
index 000000000..2c6010533
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRow.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'duration': string;
+ 'ended': string;
+ 'queued': string;
+ 'started': string;
+ 'trigger': string;
+ 'triggerContent': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx b/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx
new file mode 100644
index 000000000..4511bcbf4
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRow.tsx
@@ -0,0 +1,238 @@
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { CommandBody } from 'Commands/Command';
+import Icon from 'Components/Icon';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import useModalOpenState from 'Helpers/Hooks/useModalOpenState';
+import { icons, kinds } from 'Helpers/Props';
+import { cancelCommand } from 'Store/Actions/commandActions';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import titleCase from 'Utilities/String/titleCase';
+import translate from 'Utilities/String/translate';
+import QueuedTaskRowNameCell from './QueuedTaskRowNameCell';
+import styles from './QueuedTaskRow.css';
+
+function getStatusIconProps(status: string, message: string | undefined) {
+ const title = titleCase(status);
+
+ switch (status) {
+ case 'queued':
+ return {
+ name: icons.PENDING,
+ title,
+ };
+
+ case 'started':
+ return {
+ name: icons.REFRESH,
+ isSpinning: true,
+ title,
+ };
+
+ case 'completed':
+ return {
+ name: icons.CHECK,
+ kind: kinds.SUCCESS,
+ title: message === 'Completed' ? title : `${title}: ${message}`,
+ };
+
+ case 'failed':
+ return {
+ name: icons.FATAL,
+ kind: kinds.DANGER,
+ title: `${title}: ${message}`,
+ };
+
+ default:
+ return {
+ name: icons.UNKNOWN,
+ title,
+ };
+ }
+}
+
+function getFormattedDates(
+ queued: string,
+ started: string | undefined,
+ ended: string | undefined,
+ showRelativeDates: boolean,
+ shortDateFormat: string
+) {
+ if (showRelativeDates) {
+ return {
+ queuedAt: moment(queued).fromNow(),
+ startedAt: started ? moment(started).fromNow() : '-',
+ endedAt: ended ? moment(ended).fromNow() : '-',
+ };
+ }
+
+ return {
+ queuedAt: formatDate(queued, shortDateFormat),
+ startedAt: started ? formatDate(started, shortDateFormat) : '-',
+ endedAt: ended ? formatDate(ended, shortDateFormat) : '-',
+ };
+}
+
+interface QueuedTimes {
+ queuedAt: string;
+ startedAt: string;
+ endedAt: string;
+}
+
+export interface QueuedTaskRowProps {
+ id: number;
+ trigger: string;
+ commandName: string;
+ queued: string;
+ started?: string;
+ ended?: string;
+ status: string;
+ duration?: string;
+ message?: string;
+ body: CommandBody;
+ clientUserAgent?: string;
+}
+
+export default function QueuedTaskRow(props: QueuedTaskRowProps) {
+ const {
+ id,
+ trigger,
+ commandName,
+ queued,
+ started,
+ ended,
+ status,
+ duration,
+ message,
+ body,
+ clientUserAgent,
+ } = props;
+
+ const dispatch = useDispatch();
+ const { longDateFormat, shortDateFormat, showRelativeDates, timeFormat } =
+ useSelector(createUISettingsSelector());
+
+ const updateTimeTimeoutId = useRef | null>(
+ null
+ );
+ const [times, setTimes] = useState(
+ getFormattedDates(
+ queued,
+ started,
+ ended,
+ showRelativeDates,
+ shortDateFormat
+ )
+ );
+
+ const [
+ isCancelConfirmModalOpen,
+ openCancelConfirmModal,
+ closeCancelConfirmModal,
+ ] = useModalOpenState(false);
+
+ const handleCancelPress = useCallback(() => {
+ dispatch(cancelCommand({ id }));
+ }, [id, dispatch]);
+
+ useEffect(() => {
+ updateTimeTimeoutId.current = setTimeout(() => {
+ setTimes(
+ getFormattedDates(
+ queued,
+ started,
+ ended,
+ showRelativeDates,
+ shortDateFormat
+ )
+ );
+ }, 30000);
+
+ return () => {
+ if (updateTimeTimeoutId.current) {
+ clearTimeout(updateTimeTimeoutId.current);
+ }
+ };
+ }, [queued, started, ended, showRelativeDates, shortDateFormat, setTimes]);
+
+ const { queuedAt, startedAt, endedAt } = times;
+
+ let triggerIcon = icons.QUICK;
+
+ if (trigger === 'manual') {
+ triggerIcon = icons.INTERACTIVE;
+ } else if (trigger === 'scheduled') {
+ triggerIcon = icons.SCHEDULED;
+ }
+
+ return (
+
+
+
+
+
+
+
+ {queuedAt}
+
+
+
+ {startedAt}
+
+
+
+ {endedAt}
+
+
+
+ {formatTimeSpan(duration)}
+
+
+
+ {status === 'queued' && (
+
+
+
+ );
+}
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css b/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css
new file mode 100644
index 000000000..41acb33f8
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css
@@ -0,0 +1,8 @@
+.commandName {
+ display: inline-block;
+ min-width: 220px;
+}
+
+.userAgent {
+ color: #b0b0b0;
+}
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css.d.ts b/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css.d.ts
new file mode 100644
index 000000000..fc9081492
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'commandName': string;
+ 'userAgent': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.tsx b/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.tsx
new file mode 100644
index 000000000..41a307d5f
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTaskRowNameCell.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { CommandBody } from 'Commands/Command';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import createMultiArtistsSelector from 'Store/Selectors/createMultiArtistsSelector';
+import sortByProp from 'Utilities/Array/sortByProp';
+import translate from 'Utilities/String/translate';
+import styles from './QueuedTaskRowNameCell.css';
+
+function formatTitles(titles: string[]) {
+ if (!titles) {
+ return null;
+ }
+
+ if (titles.length > 11) {
+ return (
+
+ {titles.slice(0, 10).join(', ')}, {titles.length - 10} more
+
+ );
+ }
+
+ return {titles.join(', ')} ;
+}
+
+export interface QueuedTaskRowNameCellProps {
+ commandName: string;
+ body: CommandBody;
+ clientUserAgent?: string;
+}
+
+export default function QueuedTaskRowNameCell(
+ props: QueuedTaskRowNameCellProps
+) {
+ const { commandName, body, clientUserAgent } = props;
+ const movieIds = [...(body.artistIds ?? [])];
+
+ if (body.artistId) {
+ movieIds.push(body.artistId);
+ }
+
+ const artists = useSelector(createMultiArtistsSelector(movieIds));
+ const sortedArtists = artists.sort(sortByProp('sortName'));
+
+ return (
+
+
+ {commandName}
+ {sortedArtists.length ? (
+ - {formatTitles(sortedArtists.map((a) => a.artistName))}
+ ) : null}
+
+
+ {clientUserAgent ? (
+
+ {translate('From')}: {clientUserAgent}
+
+ ) : null}
+
+ );
+}
diff --git a/frontend/src/System/Tasks/Queued/QueuedTasks.tsx b/frontend/src/System/Tasks/Queued/QueuedTasks.tsx
new file mode 100644
index 000000000..e79deed7c
--- /dev/null
+++ b/frontend/src/System/Tasks/Queued/QueuedTasks.tsx
@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import FieldSet from 'Components/FieldSet';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import { fetchCommands } from 'Store/Actions/commandActions';
+import translate from 'Utilities/String/translate';
+import QueuedTaskRow from './QueuedTaskRow';
+
+const columns = [
+ {
+ name: 'trigger',
+ label: '',
+ isVisible: true,
+ },
+ {
+ name: 'commandName',
+ label: () => translate('Name'),
+ isVisible: true,
+ },
+ {
+ name: 'queued',
+ label: () => translate('Queued'),
+ isVisible: true,
+ },
+ {
+ name: 'started',
+ label: () => translate('Started'),
+ isVisible: true,
+ },
+ {
+ name: 'ended',
+ label: () => translate('Ended'),
+ isVisible: true,
+ },
+ {
+ name: 'duration',
+ label: () => translate('Duration'),
+ isVisible: true,
+ },
+ {
+ name: 'actions',
+ isVisible: true,
+ },
+];
+
+export default function QueuedTasks() {
+ const dispatch = useDispatch();
+ const { isFetching, isPopulated, items } = useSelector(
+ (state: AppState) => state.commands
+ );
+
+ useEffect(() => {
+ dispatch(fetchCommands());
+ }, [dispatch]);
+
+ return (
+
+ {isFetching && !isPopulated &&
+
+ {items.map((item) => {
+ return
+
+ )}
+
+ );
+}
diff --git a/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.css b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.css
new file mode 100644
index 000000000..a5c84ee3a
--- /dev/null
+++ b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.css
@@ -0,0 +1,19 @@
+.interval {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 150px;
+}
+
+.lastExecution,
+.lastDuration,
+.nextExecution {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 180px;
+}
+
+.actions {
+ composes: cell from '~Components/Table/Cells/TableRowCell.css';
+
+ width: 20px;
+}
diff --git a/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.css.d.ts b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.css.d.ts
new file mode 100644
index 000000000..5b9af5313
--- /dev/null
+++ b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.css.d.ts
@@ -0,0 +1,11 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'interval': string;
+ 'lastDuration': string;
+ 'lastExecution': string;
+ 'nextExecution': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.js b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.js
new file mode 100644
index 000000000..acb8c8d36
--- /dev/null
+++ b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRow.js
@@ -0,0 +1,203 @@
+import moment from 'moment';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import TableRowCell from 'Components/Table/Cells/TableRowCell';
+import TableRow from 'Components/Table/TableRow';
+import { icons } from 'Helpers/Props';
+import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
+import formatTimeSpan from 'Utilities/Date/formatTimeSpan';
+import styles from './ScheduledTaskRow.css';
+
+function getFormattedDates(props) {
+ const {
+ lastExecution,
+ nextExecution,
+ interval,
+ showRelativeDates,
+ shortDateFormat
+ } = props;
+
+ const isDisabled = interval === 0;
+
+ if (showRelativeDates) {
+ return {
+ lastExecutionTime: moment(lastExecution).fromNow(),
+ nextExecutionTime: isDisabled ? '-' : moment(nextExecution).fromNow()
+ };
+ }
+
+ return {
+ lastExecutionTime: formatDate(lastExecution, shortDateFormat),
+ nextExecutionTime: isDisabled ? '-' : formatDate(nextExecution, shortDateFormat)
+ };
+}
+
+class ScheduledTaskRow extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = getFormattedDates(props);
+
+ this._updateTimeoutId = null;
+ }
+
+ componentDidMount() {
+ this.setUpdateTimer();
+ }
+
+ componentDidUpdate(prevProps) {
+ const {
+ lastExecution,
+ nextExecution
+ } = this.props;
+
+ if (
+ lastExecution !== prevProps.lastExecution ||
+ nextExecution !== prevProps.nextExecution
+ ) {
+ this.setState(getFormattedDates(this.props));
+ }
+ }
+
+ componentWillUnmount() {
+ if (this._updateTimeoutId) {
+ this._updateTimeoutId = clearTimeout(this._updateTimeoutId);
+ }
+ }
+
+ //
+ // Listeners
+
+ setUpdateTimer() {
+ const { interval } = this.props;
+ const timeout = interval < 60 ? 10000 : 60000;
+
+ this._updateTimeoutId = setTimeout(() => {
+ this.setState(getFormattedDates(this.props));
+ this.setUpdateTimer();
+ }, timeout);
+ }
+
+ //
+ // Render
+
+ render() {
+ const {
+ name,
+ interval,
+ lastExecution,
+ lastStartTime,
+ lastDuration,
+ nextExecution,
+ isQueued,
+ isExecuting,
+ longDateFormat,
+ timeFormat,
+ onExecutePress
+ } = this.props;
+
+ const {
+ lastExecutionTime,
+ nextExecutionTime
+ } = this.state;
+
+ const isDisabled = interval === 0;
+ const executeNow = !isDisabled && moment().isAfter(nextExecution);
+ const hasNextExecutionTime = !isDisabled && !executeNow;
+ const duration = moment.duration(interval, 'minutes').humanize().replace(/an?(?=\s)/, '1');
+ const hasLastStartTime = moment(lastStartTime).isAfter('2010-01-01');
+
+ return (
+
+ {name}
+
+ {isDisabled ? 'disabled' : duration}
+
+
+
+ {lastExecutionTime}
+
+
+ {
+ !hasLastStartTime &&
+ -
+ }
+
+ {
+ hasLastStartTime &&
+
+ {formatTimeSpan(lastDuration)}
+
+ }
+
+ {
+ isDisabled &&
+ -
+ }
+
+ {
+ executeNow && isQueued &&
+ queued
+ }
+
+ {
+ executeNow && !isQueued &&
+ now
+ }
+
+ {
+ hasNextExecutionTime &&
+
+ {nextExecutionTime}
+
+ }
+
+
+
+
+ );
+ }
+}
+
+ScheduledTaskRow.propTypes = {
+ name: PropTypes.string.isRequired,
+ interval: PropTypes.number.isRequired,
+ lastExecution: PropTypes.string.isRequired,
+ lastStartTime: PropTypes.string.isRequired,
+ lastDuration: PropTypes.string.isRequired,
+ nextExecution: PropTypes.string.isRequired,
+ isQueued: PropTypes.bool.isRequired,
+ isExecuting: PropTypes.bool.isRequired,
+ showRelativeDates: PropTypes.bool.isRequired,
+ shortDateFormat: PropTypes.string.isRequired,
+ longDateFormat: PropTypes.string.isRequired,
+ timeFormat: PropTypes.string.isRequired,
+ onExecutePress: PropTypes.func.isRequired
+};
+
+export default ScheduledTaskRow;
diff --git a/frontend/src/System/Tasks/Scheduled/ScheduledTaskRowConnector.js b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRowConnector.js
new file mode 100644
index 000000000..dae790d68
--- /dev/null
+++ b/frontend/src/System/Tasks/Scheduled/ScheduledTaskRowConnector.js
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { fetchTask } from 'Store/Actions/systemActions';
+import createCommandsSelector from 'Store/Selectors/createCommandsSelector';
+import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector';
+import { findCommand, isCommandExecuting } from 'Utilities/Command';
+import ScheduledTaskRow from './ScheduledTaskRow';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state, { taskName }) => taskName,
+ createCommandsSelector(),
+ createUISettingsSelector(),
+ (taskName, commands, uiSettings) => {
+ const command = findCommand(commands, { name: taskName });
+
+ return {
+ isQueued: !!(command && command.state === 'queued'),
+ isExecuting: isCommandExecuting(command),
+ showRelativeDates: uiSettings.showRelativeDates,
+ shortDateFormat: uiSettings.shortDateFormat,
+ longDateFormat: uiSettings.longDateFormat,
+ timeFormat: uiSettings.timeFormat
+ };
+ }
+ );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+ const taskName = props.taskName;
+
+ return {
+ dispatchFetchTask() {
+ dispatch(fetchTask({
+ id: props.id
+ }));
+ },
+
+ onExecutePress() {
+ dispatch(executeCommand({
+ name: taskName
+ }));
+ }
+ };
+}
+
+class ScheduledTaskRowConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidUpdate(prevProps) {
+ const {
+ isExecuting,
+ dispatchFetchTask
+ } = this.props;
+
+ if (!isExecuting && prevProps.isExecuting) {
+ // Give the host a moment to update after the command completes
+ setTimeout(() => {
+ dispatchFetchTask();
+ }, 1000);
+ }
+ }
+
+ //
+ // Render
+
+ render() {
+ const {
+ dispatchFetchTask,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+ {
+ isFetching && !isPopulated &&
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+ }
+
+ );
+}
+
+ScheduledTasks.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ items: PropTypes.array.isRequired
+};
+
+export default ScheduledTasks;
diff --git a/frontend/src/System/Tasks/Scheduled/ScheduledTasksConnector.js b/frontend/src/System/Tasks/Scheduled/ScheduledTasksConnector.js
new file mode 100644
index 000000000..8f418d3bb
--- /dev/null
+++ b/frontend/src/System/Tasks/Scheduled/ScheduledTasksConnector.js
@@ -0,0 +1,46 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchTasks } from 'Store/Actions/systemActions';
+import ScheduledTasks from './ScheduledTasks';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.system.tasks,
+ (tasks) => {
+ return tasks;
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ dispatchFetchTasks: fetchTasks
+};
+
+class ScheduledTasksConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.dispatchFetchTasks();
+ }
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+
+ );
+}
+
+export default Tasks;
diff --git a/frontend/src/System/Updates/UpdateChanges.css b/frontend/src/System/Updates/UpdateChanges.css
new file mode 100644
index 000000000..d21897373
--- /dev/null
+++ b/frontend/src/System/Updates/UpdateChanges.css
@@ -0,0 +1,4 @@
+.title {
+ margin-top: 10px;
+ font-size: 16px;
+}
diff --git a/frontend/src/System/Updates/UpdateChanges.css.d.ts b/frontend/src/System/Updates/UpdateChanges.css.d.ts
new file mode 100644
index 000000000..86bceec06
--- /dev/null
+++ b/frontend/src/System/Updates/UpdateChanges.css.d.ts
@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/System/Updates/UpdateChanges.tsx b/frontend/src/System/Updates/UpdateChanges.tsx
new file mode 100644
index 000000000..3e5ba1c9b
--- /dev/null
+++ b/frontend/src/System/Updates/UpdateChanges.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
+import styles from './UpdateChanges.css';
+
+interface UpdateChangesProps {
+ title: string;
+ changes: string[];
+}
+
+function UpdateChanges(props: UpdateChangesProps) {
+ const { title, changes } = props;
+
+ if (changes.length === 0) {
+ return null;
+ }
+
+ const uniqueChanges = [...new Set(changes)];
+
+ return (
+
+
{title}
+
+ {uniqueChanges.map((change, index) => {
+ const checkChange = change.replace(
+ /#\d{4,5}\b/g,
+ (match) =>
+ `[${match}](https://github.com/Lidarr/Lidarr/issues/${match.substring(
+ 1
+ )})`
+ );
+
+ return (
+
+
+ );
+ })}
+
+
> = {
+ external: translate('ExternalUpdater'),
+ apt: translate('AptUpdater'),
+ docker: translate('DockerUpdater'),
+ };
+
+ const { isMajorUpdate, hasUpdateToInstall } = useMemo(() => {
+ const majorVersion = parseInt(
+ currentVersion.match(VERSION_REGEX)?.[0] ?? '0'
+ );
+
+ const latestVersion = items[0]?.version;
+ const latestMajorVersion = parseInt(
+ latestVersion?.match(VERSION_REGEX)?.[0] ?? '0'
+ );
+
+ return {
+ isMajorUpdate: latestMajorVersion > majorVersion,
+ hasUpdateToInstall: items.some(
+ (update) => update.installable && update.latest
+ ),
+ };
+ }, [currentVersion, items]);
+
+ const noUpdateToInstall = hasUpdates && !hasUpdateToInstall;
+
+ const handleInstallLatestPress = useCallback(() => {
+ if (isMajorUpdate) {
+ setIsMajorUpdateModalOpen(true);
+ } else {
+ dispatch(executeCommand({ name: commandNames.APPLICATION_UPDATE }));
+ }
+ }, [isMajorUpdate, setIsMajorUpdateModalOpen, dispatch]);
+
+ const handleInstallLatestMajorVersionPress = useCallback(() => {
+ setIsMajorUpdateModalOpen(false);
+
+ dispatch(
+ executeCommand({
+ name: commandNames.APPLICATION_UPDATE,
+ installMajorUpdate: true,
+ })
+ );
+ }, [setIsMajorUpdateModalOpen, dispatch]);
+
+ const handleCancelMajorVersionPress = useCallback(() => {
+ setIsMajorUpdateModalOpen(false);
+ }, [setIsMajorUpdateModalOpen]);
+
+ useEffect(() => {
+ dispatch(fetchUpdates());
+ dispatch(fetchGeneralSettings());
+ }, [dispatch]);
+
+ return (
+
+
+ {isPopulated || hasError ? null : {translate('NoUpdatesAreAvailable')}
+ ) : null}
+
+ {hasUpdateToInstall ? (
+
+ {updateMechanism === 'builtIn' || updateMechanism === 'script' ? (
+
+ {translate('InstallLatest')}
+
+ ) : (
+ <>
+
+
+
+ {externalUpdaterPrefix}{' '}
+
+
+ )}
+
+ {isFetching ? (
+
+ ) : null}
+
+
+
{translate('OnLatestVersion')}
+
+ {isFetching && (
+
+ )}
+
+ {items.map((update) => {
+ return (
+
+
+
{update.version}
+
—
+
+ {formatDate(update.releaseDate, shortDateFormat)}
+
+
+ {update.branch === 'master' ? null : (
+
{update.branch}
+ )}
+
+ {update.version === currentVersion ? (
+
+ {translate('CurrentlyInstalled')}
+
+ ) : null}
+
+ {update.version !== currentVersion && update.installedOn ? (
+
+ {translate('PreviouslyInstalled')}
+
+ ) : null}
+
+
+ {update.changes ? (
+
+
+ ) : (
+
{translate('MaintenanceRelease')}
+ )}
+
+ );
+ })}
+
+ {translate('FailedToFetchUpdates')}
+
+ ) : null}
+
+ {generalSettingsError ? (
+
+ {translate('FailedToFetchSettings')}
+
+ ) : null}
+
+
+ {translate('InstallMajorVersionUpdateMessage')}
+
+
+
+ }
+ confirmLabel={translate('Install')}
+ onConfirm={handleInstallLatestMajorVersionPress}
+ onCancel={handleCancelMajorVersionPress}
+ />
+
+
+ );
+}
+
+export default Updates;
diff --git a/frontend/src/Track/Track.ts b/frontend/src/Track/Track.ts
new file mode 100644
index 000000000..7c080290a
--- /dev/null
+++ b/frontend/src/Track/Track.ts
@@ -0,0 +1,19 @@
+import ModelBase from 'App/ModelBase';
+
+interface Track extends ModelBase {
+ artistId: number;
+ foreignTrackId: string;
+ foreignRecordingId: string;
+ trackFileId: number;
+ albumId: number;
+ explicit: boolean;
+ absoluteTrackNumber: number;
+ trackNumber: string;
+ title: string;
+ duration: number;
+ trackFile?: object;
+ mediumNumber: number;
+ hasFile: boolean;
+}
+
+export default Track;
diff --git a/frontend/src/TrackFile/Editor/TrackFileEditorModal.js b/frontend/src/TrackFile/Editor/TrackFileEditorModal.js
new file mode 100644
index 000000000..7f52aca05
--- /dev/null
+++ b/frontend/src/TrackFile/Editor/TrackFileEditorModal.js
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Modal from 'Components/Modal/Modal';
+import TrackFileEditorModalContentConnector from './TrackFileEditorModalContentConnector';
+
+function TrackFileEditorModal(props) {
+ const {
+ isOpen,
+ onModalClose,
+ ...otherProps
+ } = props;
+
+ return (
+
+ {
+ isOpen &&
+
+ );
+}
+
+TrackFileEditorModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default TrackFileEditorModal;
diff --git a/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css b/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css
new file mode 100644
index 000000000..49e946826
--- /dev/null
+++ b/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css
@@ -0,0 +1,8 @@
+.actions {
+ display: flex;
+ margin-right: auto;
+}
+
+.selectInput {
+ margin-left: 10px;
+}
diff --git a/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css.d.ts b/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css.d.ts
new file mode 100644
index 000000000..3c384a307
--- /dev/null
+++ b/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.css.d.ts
@@ -0,0 +1,8 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'selectInput': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.js b/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.js
new file mode 100644
index 000000000..0e387f39f
--- /dev/null
+++ b/frontend/src/TrackFile/Editor/TrackFileEditorModalContent.js
@@ -0,0 +1,263 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import SelectInput from 'Components/Form/SelectInput';
+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 { kinds } from 'Helpers/Props';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import TrackFileEditorRow from './TrackFileEditorRow';
+import styles from './TrackFileEditorModalContent.css';
+
+const columns = [
+ {
+ name: 'trackNumber',
+ label: () => translate('Track'),
+ isVisible: true
+ },
+ {
+ name: 'path',
+ label: () => translate('Path'),
+ isVisible: true
+ },
+ {
+ name: 'quality',
+ label: () => translate('Quality'),
+ isVisible: true
+ }
+];
+
+class TrackFileEditorModalContent extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ allSelected: false,
+ allUnselected: false,
+ lastToggled: null,
+ selectedState: {},
+ isConfirmDeleteModalOpen: false
+ };
+ }
+
+ componentDidUpdate(prevProps) {
+ if (hasDifferentItems(prevProps.items, this.props.items)) {
+ this.setState((state) => {
+ return removeOldSelectedState(state, prevProps.items);
+ });
+ }
+ }
+
+ //
+ // Control
+
+ getSelectedIds = () => {
+ const selectedIds = getSelectedIds(this.state.selectedState);
+
+ return selectedIds.reduce((acc, id) => {
+ const matchingItem = this.props.items.find((item) => item.id === id);
+
+ if (matchingItem && !acc.includes(matchingItem.trackFileId)) {
+ acc.push(matchingItem.trackFileId);
+ }
+
+ return acc;
+ }, []);
+ };
+
+ //
+ // Listeners
+
+ onSelectAllChange = ({ value }) => {
+ this.setState(selectAll(this.state.selectedState, value));
+ };
+
+ onSelectedChange = ({ id, value, shiftKey = false }) => {
+ this.setState((state) => {
+ return toggleSelected(state, this.props.items, id, value, shiftKey);
+ });
+ };
+
+ onDeletePress = () => {
+ this.setState({ isConfirmDeleteModalOpen: true });
+ };
+
+ onConfirmDelete = () => {
+ this.setState({ isConfirmDeleteModalOpen: false });
+ this.props.onDeletePress(this.getSelectedIds());
+ };
+
+ onConfirmDeleteModalClose = () => {
+ this.setState({ isConfirmDeleteModalOpen: false });
+ };
+
+ onQualityChange = ({ value }) => {
+ const selectedIds = this.getSelectedIds();
+
+ if (!selectedIds.length) {
+ return;
+ }
+
+ this.props.onQualityChange(selectedIds, parseInt(value));
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ isDeleting,
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ qualities,
+ onModalClose
+ } = this.props;
+
+ const {
+ allSelected,
+ allUnselected,
+ selectedState,
+ isConfirmDeleteModalOpen
+ } = this.state;
+
+ const qualityOptions = _.reduceRight(qualities, (acc, quality) => {
+ acc.push({
+ key: quality.id,
+ value: quality.name
+ });
+
+ return acc;
+ }, [{ key: 'selectQuality', value: translate('SelectQuality'), isDisabled: true }]);
+
+ const hasSelectedFiles = this.getSelectedIds().length > 0;
+
+ return (
+
+
+ Manage Tracks
+
+
+
+ {
+ isFetching && !isPopulated ?
+ {error}
:
+ null
+ }
+
+ {
+ isPopulated && !items.length ?
+
+ No track files to manage.
+
:
+ null
+ }
+
+ {
+ isPopulated && items.length ?
+
+
+ {
+ items.map((item) => {
+ return (
+
+
:
+ null
+ }
+
+
+
+
+
+
+ {translate('Close')}
+
+
+
+
+ );
+ }
+}
+
+TrackFileEditorModalContent.propTypes = {
+ isDeleting: PropTypes.bool.isRequired,
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ qualities: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onDeletePress: PropTypes.func.isRequired,
+ onQualityChange: PropTypes.func.isRequired,
+ onModalClose: PropTypes.func.isRequired
+};
+
+export default TrackFileEditorModalContent;
diff --git a/frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js b/frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js
new file mode 100644
index 000000000..71bb1a4f4
--- /dev/null
+++ b/frontend/src/TrackFile/Editor/TrackFileEditorModalContentConnector.js
@@ -0,0 +1,174 @@
+/* eslint max-params: 0 */
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import { fetchQualityProfileSchema } from 'Store/Actions/settingsActions';
+import { clearTracks, fetchTracks } from 'Store/Actions/trackActions';
+import { deleteTrackFiles, updateTrackFiles } from 'Store/Actions/trackFileActions';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import getQualities from 'Utilities/Quality/getQualities';
+import TrackFileEditorModalContent from './TrackFileEditorModalContent';
+
+function createSchemaSelector() {
+ return createSelector(
+ (state) => state.settings.qualityProfiles,
+ (qualityProfiles) => {
+ const qualities = getQualities(qualityProfiles.schema.items);
+
+ let error = null;
+
+ if (qualityProfiles.schemaError) {
+ error = 'Unable to load qualities';
+ }
+
+ return {
+ isFetching: qualityProfiles.isSchemaFetching,
+ isPopulated: qualityProfiles.isSchemaPopulated,
+ error,
+ qualities
+ };
+ }
+ );
+}
+
+function createMapStateToProps() {
+ return createSelector(
+ (state, { albumId }) => albumId,
+ (state) => state.tracks,
+ (state) => state.trackFiles,
+ createSchemaSelector(),
+ createArtistSelector(),
+ (
+ albumId,
+ tracks,
+ trackFiles,
+ schema,
+ artist
+ ) => {
+ const filtered = _.filter(tracks.items, (track) => {
+ if (albumId >= 0 && track.albumId !== albumId) {
+ return false;
+ }
+
+ if (!track.trackFileId) {
+ return false;
+ }
+
+ return _.some(trackFiles.items, { id: track.trackFileId });
+ });
+
+ const sorted = _.orderBy(filtered, ['albumId', 'mediumNumber', 'absoluteTrackNumber'], ['desc', 'asc', 'asc']);
+
+ const items = _.map(sorted, (track) => {
+ const trackFile = _.find(trackFiles.items, { id: track.trackFileId });
+
+ return {
+ path: trackFile.path,
+ quality: trackFile.quality,
+ qualityCutoffNotMet: trackFile.qualityCutoffNotMet,
+ ...track
+ };
+ });
+
+ return {
+ ...schema,
+ items,
+ artistType: artist.artistType,
+ isDeleting: trackFiles.isDeleting,
+ isSaving: trackFiles.isSaving
+ };
+ }
+ );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ dispatchClearTracks() {
+ dispatch(clearTracks());
+ },
+
+ dispatchFetchTracks(updateProps) {
+ dispatch(fetchTracks(updateProps));
+ },
+
+ dispatchFetchQualityProfileSchema(name, path) {
+ dispatch(fetchQualityProfileSchema());
+ },
+
+ dispatchUpdateTrackFiles(updateProps) {
+ dispatch(updateTrackFiles(updateProps));
+ },
+
+ onDeletePress(trackFileIds) {
+ dispatch(deleteTrackFiles({ trackFileIds }));
+ }
+ };
+}
+
+class TrackFileEditorModalContentConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const artistId = this.props.artistId;
+ const albumId = this.props.albumId;
+
+ this.props.dispatchFetchTracks({ artistId, albumId });
+
+ this.props.dispatchFetchQualityProfileSchema();
+ }
+
+ componentWillUnmount() {
+ this.props.dispatchClearTracks();
+ }
+
+ //
+ // Listeners
+
+ onQualityChange = (trackFileIds, qualityId) => {
+ const quality = {
+ quality: _.find(this.props.qualities, { id: qualityId }),
+ revision: {
+ version: 1,
+ real: 0
+ }
+ };
+
+ this.props.dispatchUpdateTrackFiles({ trackFileIds, quality });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ dispatchFetchQualityProfileSchema,
+ dispatchUpdateTrackFiles,
+ dispatchFetchTracks,
+ dispatchClearTracks,
+ ...otherProps
+ } = this.props;
+
+ return (
+
+
+ {padNumber(trackNumber, 2)}
+
+
+
+ {path}
+
+
+
+
+
+ );
+}
+
+TrackFileEditorRow.propTypes = {
+ id: PropTypes.number.isRequired,
+ trackNumber: PropTypes.string.isRequired,
+ path: PropTypes.string.isRequired,
+ quality: PropTypes.object.isRequired,
+ qualityCutoffNotMet: PropTypes.bool.isRequired,
+ isSelected: PropTypes.bool,
+ onSelectedChange: PropTypes.func.isRequired
+};
+
+export default TrackFileEditorRow;
diff --git a/frontend/src/TrackFile/ExpandingFileDetails.css b/frontend/src/TrackFile/ExpandingFileDetails.css
new file mode 100644
index 000000000..23af8caf7
--- /dev/null
+++ b/frontend/src/TrackFile/ExpandingFileDetails.css
@@ -0,0 +1,61 @@
+.fileDetails {
+ margin-bottom: 20px;
+ border: 1px solid var(--borderColor);
+ border-radius: 4px;
+ background-color: var(--cardBackgroundColor);
+
+ &:last-of-type {
+ margin-bottom: 0;
+ }
+}
+
+.filename {
+ flex-grow: 1;
+ margin-right: 10px;
+ margin-left: 10px;
+ font-size: 14px;
+ font-family: $monoSpaceFontFamily;
+}
+
+.header {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 100%;
+ font-size: 18px;
+}
+
+.expandButton {
+ position: relative;
+ width: 60px;
+ height: 60px;
+}
+
+.actionButton {
+ composes: button from '~Components/Link/IconButton.css';
+
+ width: 30px;
+}
+
+.expandButtonIcon {
+ composes: actionButton;
+
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin-top: -12px;
+ margin-left: -15px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+ .medium {
+ border-right: 0;
+ border-left: 0;
+ border-radius: 0;
+ }
+
+ .expandButtonIcon {
+ position: static;
+ margin: 0;
+ }
+}
diff --git a/frontend/src/TrackFile/ExpandingFileDetails.css.d.ts b/frontend/src/TrackFile/ExpandingFileDetails.css.d.ts
new file mode 100644
index 000000000..55c305cf3
--- /dev/null
+++ b/frontend/src/TrackFile/ExpandingFileDetails.css.d.ts
@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actionButton': string;
+ 'expandButton': string;
+ 'expandButtonIcon': string;
+ 'fileDetails': string;
+ 'filename': string;
+ 'header': string;
+ 'medium': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/TrackFile/ExpandingFileDetails.js b/frontend/src/TrackFile/ExpandingFileDetails.js
new file mode 100644
index 000000000..15e5d3625
--- /dev/null
+++ b/frontend/src/TrackFile/ExpandingFileDetails.js
@@ -0,0 +1,84 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Icon from 'Components/Icon';
+import { icons } from 'Helpers/Props';
+import translate from 'Utilities/String/translate';
+import FileDetails from './FileDetails';
+import styles from './ExpandingFileDetails.css';
+
+class ExpandingFileDetails extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isExpanded: props.isExpanded
+ };
+ }
+
+ //
+ // Listeners
+
+ onExpandPress = () => {
+ const {
+ isExpanded
+ } = this.state;
+ this.setState({ isExpanded: !isExpanded });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ filename,
+ audioTags,
+ rejections
+ } = this.props;
+
+ const {
+ isExpanded
+ } = this.state;
+
+ return (
+
+
+
+ {filename}
+
+
+
+
+
+
+ {
+ isExpanded &&
+
+ }
+
+
+ Rejections
+
+ {
+ _.map(rejections, (item, key) => {
+ return (
+
+ {item.reason}
+
+ );
+ })
+ }
+
+ );
+}
+
+function FileDetails(props) {
+
+ const {
+ filename,
+ audioTags,
+ rejections
+ } = props;
+
+ return (
+
+
+
+ {
+ filename &&
+
+
+
+ );
+}
+
+FileDetails.propTypes = {
+ filename: PropTypes.string,
+ audioTags: PropTypes.object.isRequired,
+ rejections: PropTypes.arrayOf(PropTypes.object)
+};
+
+export default FileDetails;
diff --git a/frontend/src/TrackFile/FileDetailsConnector.js b/frontend/src/TrackFile/FileDetailsConnector.js
new file mode 100644
index 000000000..28f8766d0
--- /dev/null
+++ b/frontend/src/TrackFile/FileDetailsConnector.js
@@ -0,0 +1,77 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import { fetchTrackFiles } from 'Store/Actions/trackFileActions';
+import getErrorMessage from 'Utilities/Object/getErrorMessage';
+import FileDetails from './FileDetails';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.trackFiles,
+ (trackFiles) => {
+ return {
+ ...trackFiles
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ fetchTrackFiles
+};
+
+class FileDetailsConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ this.props.fetchTrackFiles({ id: this.props.id });
+ }
+
+ //
+ // Render
+
+ render() {
+ const {
+ items,
+ id,
+ isFetching,
+ error
+ } = this.props;
+
+ const item = _.find(items, { id });
+ const errorMessage = getErrorMessage(error, 'Unable to load manual import items');
+
+ if (isFetching || !item.audioTags) {
+ return (
+ {errorMessage}
+ );
+ }
+
+ return (
+
+
+
+ Details
+
+
+
+
+
+
+
+ Close
+
+
+
+
+ );
+}
+
+FileDetailsModal.propTypes = {
+ isOpen: PropTypes.bool.isRequired,
+ onModalClose: PropTypes.func.isRequired,
+ id: PropTypes.number.isRequired
+};
+
+export default FileDetailsModal;
diff --git a/frontend/src/TrackFile/MediaInfo.js b/frontend/src/TrackFile/MediaInfo.js
new file mode 100644
index 000000000..3f50fb70e
--- /dev/null
+++ b/frontend/src/TrackFile/MediaInfo.js
@@ -0,0 +1,78 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import * as mediaInfoTypes from './mediaInfoTypes';
+
+function MediaInfo(props) {
+ const {
+ type,
+ audioChannels,
+ audioCodec,
+ audioBitRate,
+ audioBits,
+ audioSampleRate
+ } = props;
+
+ if (type === mediaInfoTypes.AUDIO) {
+ return (
+
+ {
+ !!audioCodec &&
+ audioCodec
+ }
+
+ {
+ !!audioCodec && !!audioChannels &&
+ ' - '
+ }
+
+ {
+ !!audioChannels &&
+ audioChannels.toFixed(1)
+ }
+
+ {
+ ((!!audioCodec && !!audioBitRate) || (!!audioChannels && !!audioBitRate)) &&
+ ' - '
+ }
+
+ {
+ !!audioBitRate &&
+ audioBitRate
+ }
+
+ {
+ ((!!audioCodec && !!audioSampleRate) || (!!audioChannels && !!audioSampleRate) || (!!audioBitRate && !!audioSampleRate)) &&
+ ' - '
+ }
+
+ {
+ !!audioSampleRate &&
+ audioSampleRate
+ }
+
+ {
+ ((!!audioCodec && !!audioBits) || (!!audioChannels && !!audioBits) || (!!audioBitRate && !!audioBits) || (!!audioSampleRate && !!audioBits)) &&
+ ' - '
+ }
+
+ {
+ !!audioBits &&
+ audioBits
+ }
+
+ );
+ }
+
+ return null;
+}
+
+MediaInfo.propTypes = {
+ type: PropTypes.string.isRequired,
+ audioChannels: PropTypes.number,
+ audioCodec: PropTypes.string,
+ audioBitRate: PropTypes.string,
+ audioBits: PropTypes.string,
+ audioSampleRate: PropTypes.string
+};
+
+export default MediaInfo;
diff --git a/frontend/src/TrackFile/MediaInfoConnector.js b/frontend/src/TrackFile/MediaInfoConnector.js
new file mode 100644
index 000000000..5f3a1386b
--- /dev/null
+++ b/frontend/src/TrackFile/MediaInfoConnector.js
@@ -0,0 +1,21 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createTrackFileSelector from 'Store/Selectors/createTrackFileSelector';
+import MediaInfo from './MediaInfo';
+
+function createMapStateToProps() {
+ return createSelector(
+ createTrackFileSelector(),
+ (trackFile) => {
+ if (trackFile) {
+ return {
+ ...trackFile.mediaInfo
+ };
+ }
+
+ return {};
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(MediaInfo);
diff --git a/frontend/src/TrackFile/TrackFile.ts b/frontend/src/TrackFile/TrackFile.ts
new file mode 100644
index 000000000..ef4dc65f3
--- /dev/null
+++ b/frontend/src/TrackFile/TrackFile.ts
@@ -0,0 +1,19 @@
+import ModelBase from 'App/ModelBase';
+import { QualityModel } from 'Quality/Quality';
+import CustomFormat from 'typings/CustomFormat';
+import MediaInfo from 'typings/MediaInfo';
+
+export interface TrackFile extends ModelBase {
+ artistId: number;
+ albumId: number;
+ path: string;
+ size: number;
+ dateAdded: string;
+ sceneName: string;
+ releaseGroup: string;
+ quality: QualityModel;
+ customFormats: CustomFormat[];
+ indexerFlags: number;
+ mediaInfo: MediaInfo;
+ qualityCutoffNotMet: boolean;
+}
diff --git a/frontend/src/TrackFile/mediaInfoTypes.js b/frontend/src/TrackFile/mediaInfoTypes.js
new file mode 100644
index 000000000..5e5a78e64
--- /dev/null
+++ b/frontend/src/TrackFile/mediaInfoTypes.js
@@ -0,0 +1,2 @@
+export const AUDIO = 'audio';
+export const VIDEO = 'video';
diff --git a/frontend/src/UnmappedFiles/UnmappedFilesTable.js b/frontend/src/UnmappedFiles/UnmappedFilesTable.js
new file mode 100644
index 000000000..a326f91e0
--- /dev/null
+++ b/frontend/src/UnmappedFiles/UnmappedFilesTable.js
@@ -0,0 +1,290 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import VirtualTable from 'Components/Table/VirtualTable';
+import VirtualTableRow from 'Components/Table/VirtualTableRow';
+import { align, icons, kinds, sortDirections } from 'Helpers/Props';
+import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import UnmappedFilesTableHeader from './UnmappedFilesTableHeader';
+import UnmappedFilesTableRow from './UnmappedFilesTableRow';
+
+class UnmappedFilesTable extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.scrollerRef = React.createRef();
+
+ this.state = {
+ allSelected: false,
+ allUnselected: false,
+ lastToggled: null,
+ selectedState: {}
+ };
+ }
+
+ componentDidMount() {
+ this.setSelectedState();
+ }
+
+ componentDidUpdate(prevProps) {
+ const {
+ items,
+ sortKey,
+ sortDirection,
+ isDeleting,
+ deleteError
+ } = this.props;
+
+ if (sortKey !== prevProps.sortKey ||
+ sortDirection !== prevProps.sortDirection ||
+ hasDifferentItemsOrOrder(prevProps.items, items)
+ ) {
+ this.setSelectedState();
+ }
+
+ const hasFinishedDeleting = prevProps.isDeleting &&
+ !isDeleting &&
+ !deleteError;
+
+ if (hasFinishedDeleting) {
+ this.onSelectAllChange({ value: false });
+ }
+ }
+
+ getSelectedIds = () => {
+ if (this.state.allUnselected) {
+ return [];
+ }
+ return getSelectedIds(this.state.selectedState);
+ };
+
+ setSelectedState() {
+ const {
+ items
+ } = this.props;
+
+ const {
+ selectedState
+ } = this.state;
+
+ const newSelectedState = {};
+
+ items.forEach((file) => {
+ const isItemSelected = selectedState[file.id];
+
+ if (isItemSelected) {
+ newSelectedState[file.id] = isItemSelected;
+ } else {
+ newSelectedState[file.id] = false;
+ }
+ });
+
+ const selectedCount = getSelectedIds(newSelectedState).length;
+ const newStateCount = Object.keys(newSelectedState).length;
+ let isAllSelected = false;
+ let isAllUnselected = false;
+
+ if (selectedCount === 0) {
+ isAllUnselected = true;
+ } else if (selectedCount === newStateCount) {
+ isAllSelected = true;
+ }
+
+ this.setState({ selectedState: newSelectedState, allSelected: isAllSelected, allUnselected: isAllUnselected });
+ }
+
+ onSelectAllChange = ({ value }) => {
+ this.setState(selectAll(this.state.selectedState, value));
+ };
+
+ onSelectAllPress = () => {
+ this.onSelectAllChange({ value: !this.state.allSelected });
+ };
+
+ onSelectedChange = ({ id, value, shiftKey = false }) => {
+ this.setState((state) => {
+ return toggleSelected(state, this.props.items, id, value, shiftKey);
+ });
+ };
+
+ onDeleteUnmappedFilesPress = () => {
+ const selectedIds = this.getSelectedIds();
+
+ this.props.deleteUnmappedFiles(selectedIds);
+ };
+
+ rowRenderer = ({ key, rowIndex, style }) => {
+ const {
+ items,
+ columns,
+ deleteUnmappedFile
+ } = this.props;
+
+ const {
+ selectedState
+ } = this.state;
+
+ const item = items[rowIndex];
+
+ return (
+
+
+ );
+ };
+
+ render() {
+
+ const {
+ isFetching,
+ isPopulated,
+ isDeleting,
+ error,
+ items,
+ columns,
+ sortKey,
+ sortDirection,
+ onTableOptionChange,
+ onSortPress,
+ isScanningFolders,
+ onAddMissingArtistsPress,
+ deleteUnmappedFiles,
+ ...otherProps
+ } = this.props;
+
+ const {
+ allSelected,
+ allUnselected,
+ selectedState
+ } = this.state;
+
+ const selectedTrackFileIds = this.getSelectedIds();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ isFetching && !isPopulated &&
+
+ Success! My work is done, all files on disk are matched to known tracks.
+
+ }
+
+ {
+ isPopulated &&
+ !error &&
+ !!items.length &&
+ this.scrollerRef.current ?
+
+
+ );
+ }
+}
+
+UnmappedFilesTable.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ isDeleting: PropTypes.bool.isRequired,
+ deleteError: PropTypes.object,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ sortKey: PropTypes.string,
+ sortDirection: PropTypes.oneOf(sortDirections.all),
+ onTableOptionChange: PropTypes.func.isRequired,
+ onSortPress: PropTypes.func.isRequired,
+ deleteUnmappedFile: PropTypes.func.isRequired,
+ deleteUnmappedFiles: PropTypes.func.isRequired,
+ isScanningFolders: PropTypes.bool.isRequired,
+ onAddMissingArtistsPress: PropTypes.func.isRequired
+};
+
+export default UnmappedFilesTable;
diff --git a/frontend/src/UnmappedFiles/UnmappedFilesTableConnector.js b/frontend/src/UnmappedFiles/UnmappedFilesTableConnector.js
new file mode 100644
index 000000000..63484b210
--- /dev/null
+++ b/frontend/src/UnmappedFiles/UnmappedFilesTableConnector.js
@@ -0,0 +1,120 @@
+import _ from 'lodash';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { deleteTrackFile, deleteTrackFiles, fetchTrackFiles, setTrackFilesSort, setTrackFilesTableOption } from 'Store/Actions/trackFileActions';
+import createClientSideCollectionSelector from 'Store/Selectors/createClientSideCollectionSelector';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import UnmappedFilesTable from './UnmappedFilesTable';
+
+function createMapStateToProps() {
+ return createSelector(
+ createClientSideCollectionSelector('trackFiles'),
+ createCommandExecutingSelector(commandNames.RESCAN_FOLDERS),
+ createDimensionsSelector(),
+ (
+ trackFiles,
+ isScanningFolders,
+ dimensionsState
+ ) => {
+ // trackFiles could pick up mapped entries via signalR so filter again here
+ const {
+ items,
+ ...otherProps
+ } = trackFiles;
+
+ const unmappedFiles = _.filter(items, { albumId: 0 });
+
+ return {
+ items: unmappedFiles,
+ ...otherProps,
+ isScanningFolders,
+ isSmallScreen: dimensionsState.isSmallScreen
+ };
+ }
+ );
+}
+
+function createMapDispatchToProps(dispatch, props) {
+ return {
+ onTableOptionChange(payload) {
+ dispatch(setTrackFilesTableOption(payload));
+ },
+
+ onSortPress(sortKey) {
+ dispatch(setTrackFilesSort({ sortKey }));
+ },
+
+ fetchUnmappedFiles() {
+ dispatch(fetchTrackFiles({ unmapped: true }));
+ },
+
+ deleteUnmappedFile(id) {
+ dispatch(deleteTrackFile({ id }));
+ },
+
+ deleteUnmappedFiles(trackFileIds) {
+ dispatch(deleteTrackFiles({ trackFileIds }));
+ },
+
+ onAddMissingArtistsPress() {
+ dispatch(executeCommand({
+ name: commandNames.RESCAN_FOLDERS,
+ filter: 'matched'
+ }));
+ }
+ };
+}
+
+class UnmappedFilesTableConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ registerPagePopulator(this.repopulate, ['trackFileUpdated']);
+
+ this.repopulate();
+ }
+
+ componentWillUnmount() {
+ unregisterPagePopulator(this.repopulate);
+ }
+
+ //
+ // Control
+
+ repopulate = () => {
+ this.props.fetchUnmappedFiles();
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+ {
+ columns.map((column) => {
+ const {
+ name,
+ label,
+ isSortable,
+ isVisible
+ } = column;
+
+ if (!isVisible) {
+ return null;
+ }
+
+ if (name === 'select') {
+ return (
+
+
+
+
+
+ );
+ }
+
+ return (
+
+ {typeof label === 'function' ? label() : label}
+
+ );
+ })
+ }
+
+ );
+}
+
+UnmappedFilesTableHeader.propTypes = {
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ allSelected: PropTypes.bool.isRequired,
+ allUnselected: PropTypes.bool.isRequired,
+ onSelectAllChange: PropTypes.func.isRequired,
+ onTableOptionChange: PropTypes.func.isRequired
+};
+
+export default UnmappedFilesTableHeader;
diff --git a/frontend/src/UnmappedFiles/UnmappedFilesTableRow.css b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.css
new file mode 100644
index 000000000..e89cfbc31
--- /dev/null
+++ b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.css
@@ -0,0 +1,28 @@
+.path {
+ composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+ flex: 4 0 400px;
+ font-size: 13px;
+ font-family: $monoSpaceFontFamily;
+}
+
+.quality,
+.dateAdded,
+.size {
+ composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+ flex: 0 0 120px;
+ white-space: nowrap;
+}
+
+.actions {
+ composes: cell from '~Components/Table/Cells/VirtualTableRowCell.css';
+
+ flex: 0 0 95px;
+}
+
+.checkInput {
+ composes: input from '~Components/Form/CheckInput.css';
+
+ margin-top: 0;
+}
diff --git a/frontend/src/UnmappedFiles/UnmappedFilesTableRow.css.d.ts b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.css.d.ts
new file mode 100644
index 000000000..b455e5f7a
--- /dev/null
+++ b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.css.d.ts
@@ -0,0 +1,12 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+ 'actions': string;
+ 'checkInput': string;
+ 'dateAdded': string;
+ 'path': string;
+ 'quality': string;
+ 'size': string;
+}
+export const cssExports: CssExports;
+export default cssExports;
diff --git a/frontend/src/UnmappedFiles/UnmappedFilesTableRow.js b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.js
new file mode 100644
index 000000000..7b84a04a5
--- /dev/null
+++ b/frontend/src/UnmappedFiles/UnmappedFilesTableRow.js
@@ -0,0 +1,232 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import TrackQuality from 'Album/TrackQuality';
+import IconButton from 'Components/Link/IconButton';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import RelativeDateCellConnector from 'Components/Table/Cells/RelativeDateCellConnector';
+import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
+import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
+import { icons, kinds } from 'Helpers/Props';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import FileDetailsModal from 'TrackFile/FileDetailsModal';
+import formatBytes from 'Utilities/Number/formatBytes';
+import translate from 'Utilities/String/translate';
+import styles from './UnmappedFilesTableRow.css';
+
+class UnmappedFilesTableRow extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ isDetailsModalOpen: false,
+ isInteractiveImportModalOpen: false,
+ isConfirmDeleteModalOpen: false
+ };
+ }
+
+ //
+ // Listeners
+
+ onDetailsPress = () => {
+ this.setState({ isDetailsModalOpen: true });
+ };
+
+ onDetailsModalClose = () => {
+ this.setState({ isDetailsModalOpen: false });
+ };
+
+ onInteractiveImportPress = () => {
+ this.setState({ isInteractiveImportModalOpen: true });
+ };
+
+ onInteractiveImportModalClose = () => {
+ this.setState({ isInteractiveImportModalOpen: false });
+ };
+
+ onDeleteFilePress = () => {
+ this.setState({ isConfirmDeleteModalOpen: true });
+ };
+
+ onConfirmDelete = () => {
+ this.setState({ isConfirmDeleteModalOpen: false });
+ this.props.deleteUnmappedFile(this.props.id);
+ };
+
+ onConfirmDeleteModalClose = () => {
+ this.setState({ isConfirmDeleteModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ id,
+ path,
+ size,
+ dateAdded,
+ quality,
+ columns,
+ isSelected,
+ onSelectedChange
+ } = this.props;
+
+ const folder = path.substring(0, Math.max(path.lastIndexOf('/'), path.lastIndexOf('\\')));
+
+ const {
+ isInteractiveImportModalOpen,
+ isDetailsModalOpen,
+ isConfirmDeleteModalOpen
+ } = this.state;
+
+ return (
+ <>
+ {
+ columns.map((column) => {
+ const {
+ name,
+ isVisible
+ } = column;
+
+ if (!isVisible) {
+ return null;
+ }
+
+ if (name === 'select') {
+ return (
+
+ {path}
+
+ );
+ }
+
+ if (name === 'size') {
+ return (
+
+ {formatBytes(size)}
+
+ );
+ }
+
+ if (name === 'dateAdded') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'actions') {
+ return (
+
+
+ );
+ }
+
+ return null;
+ })
+ }
+
+ ,
+ K extends StringKey
+>(sortKey: K) {
+ return (a: T, b: T) => {
+ return a[sortKey].localeCompare(b[sortKey], undefined, { numeric: true });
+ };
+}
+
+export default sortByProp;
diff --git a/frontend/src/Utilities/Artist/getNewArtist.js b/frontend/src/Utilities/Artist/getNewArtist.js
new file mode 100644
index 000000000..ed1a6fb11
--- /dev/null
+++ b/frontend/src/Utilities/Artist/getNewArtist.js
@@ -0,0 +1,31 @@
+
+function getNewArtist(artist, payload) {
+ const {
+ rootFolderPath,
+ monitor,
+ monitorNewItems,
+ qualityProfileId,
+ metadataProfileId,
+ artistType,
+ tags,
+ searchForMissingAlbums = false
+ } = payload;
+
+ const addOptions = {
+ monitor,
+ searchForMissingAlbums
+ };
+
+ artist.addOptions = addOptions;
+ artist.monitored = true;
+ artist.monitorNewItems = monitorNewItems;
+ artist.qualityProfileId = qualityProfileId;
+ artist.metadataProfileId = metadataProfileId;
+ artist.rootFolderPath = rootFolderPath;
+ artist.artistType = artistType;
+ artist.tags = tags;
+
+ return artist;
+}
+
+export default getNewArtist;
diff --git a/frontend/src/Utilities/Artist/getProgressBarKind.ts b/frontend/src/Utilities/Artist/getProgressBarKind.ts
new file mode 100644
index 000000000..f45387024
--- /dev/null
+++ b/frontend/src/Utilities/Artist/getProgressBarKind.ts
@@ -0,0 +1,24 @@
+import { kinds } from 'Helpers/Props';
+
+function getProgressBarKind(
+ status: string,
+ monitored: boolean,
+ progress: number,
+ isDownloading: boolean
+) {
+ if (isDownloading) {
+ return kinds.PURPLE;
+ }
+
+ if (progress === 100) {
+ return status === 'ended' ? kinds.SUCCESS : kinds.PRIMARY;
+ }
+
+ if (monitored) {
+ return kinds.DANGER;
+ }
+
+ return kinds.WARNING;
+}
+
+export default getProgressBarKind;
diff --git a/frontend/src/Utilities/Artist/monitorNewItemsOptions.js b/frontend/src/Utilities/Artist/monitorNewItemsOptions.js
new file mode 100644
index 000000000..f45095b6e
--- /dev/null
+++ b/frontend/src/Utilities/Artist/monitorNewItemsOptions.js
@@ -0,0 +1,24 @@
+import translate from 'Utilities/String/translate';
+
+const monitorNewItemsOptions = [
+ {
+ key: 'all',
+ get value() {
+ return translate('MonitorAllAlbums');
+ }
+ },
+ {
+ key: 'none',
+ get value() {
+ return translate('MonitorNoNewAlbums');
+ }
+ },
+ {
+ key: 'new',
+ get value() {
+ return translate('MonitorNewAlbums');
+ }
+ }
+];
+
+export default monitorNewItemsOptions;
diff --git a/frontend/src/Utilities/Artist/monitorOptions.js b/frontend/src/Utilities/Artist/monitorOptions.js
new file mode 100644
index 000000000..a06a79a96
--- /dev/null
+++ b/frontend/src/Utilities/Artist/monitorOptions.js
@@ -0,0 +1,48 @@
+import translate from 'Utilities/String/translate';
+
+const monitorOptions = [
+ {
+ key: 'all',
+ get value() {
+ return translate('MonitorAllAlbums');
+ }
+ },
+ {
+ key: 'future',
+ get value() {
+ return translate('MonitorFutureAlbums');
+ }
+ },
+ {
+ key: 'missing',
+ get value() {
+ return translate('MonitorMissingAlbums');
+ }
+ },
+ {
+ key: 'existing',
+ get value() {
+ return translate('MonitorExistingAlbums');
+ }
+ },
+ {
+ key: 'first',
+ get value() {
+ return translate('MonitorFirstAlbum');
+ }
+ },
+ {
+ key: 'latest',
+ get value() {
+ return translate('MonitorLastestAlbum');
+ }
+ },
+ {
+ key: 'none',
+ get value() {
+ return translate('MonitorNoAlbums');
+ }
+ }
+];
+
+export default monitorOptions;
diff --git a/frontend/src/Utilities/Command/findCommand.js b/frontend/src/Utilities/Command/findCommand.js
new file mode 100644
index 000000000..cf7d5444a
--- /dev/null
+++ b/frontend/src/Utilities/Command/findCommand.js
@@ -0,0 +1,10 @@
+import _ from 'lodash';
+import isSameCommand from './isSameCommand';
+
+function findCommand(commands, options) {
+ return _.findLast(commands, (command) => {
+ return isSameCommand(command.body, options);
+ });
+}
+
+export default findCommand;
diff --git a/frontend/src/Utilities/Command/index.js b/frontend/src/Utilities/Command/index.js
new file mode 100644
index 000000000..66043bf03
--- /dev/null
+++ b/frontend/src/Utilities/Command/index.js
@@ -0,0 +1,5 @@
+export { default as findCommand } from './findCommand';
+export { default as isCommandComplete } from './isCommandComplete';
+export { default as isCommandExecuting } from './isCommandExecuting';
+export { default as isCommandFailed } from './isCommandFailed';
+export { default as isSameCommand } from './isSameCommand';
diff --git a/frontend/src/Utilities/Command/isCommandComplete.js b/frontend/src/Utilities/Command/isCommandComplete.js
new file mode 100644
index 000000000..558ab801b
--- /dev/null
+++ b/frontend/src/Utilities/Command/isCommandComplete.js
@@ -0,0 +1,9 @@
+function isCommandComplete(command) {
+ if (!command) {
+ return false;
+ }
+
+ return command.status === 'complete';
+}
+
+export default isCommandComplete;
diff --git a/frontend/src/Utilities/Command/isCommandExecuting.js b/frontend/src/Utilities/Command/isCommandExecuting.js
new file mode 100644
index 000000000..8e637704e
--- /dev/null
+++ b/frontend/src/Utilities/Command/isCommandExecuting.js
@@ -0,0 +1,9 @@
+function isCommandExecuting(command) {
+ if (!command) {
+ return false;
+ }
+
+ return command.status === 'queued' || command.status === 'started';
+}
+
+export default isCommandExecuting;
diff --git a/frontend/src/Utilities/Command/isCommandFailed.js b/frontend/src/Utilities/Command/isCommandFailed.js
new file mode 100644
index 000000000..00e5ccdf2
--- /dev/null
+++ b/frontend/src/Utilities/Command/isCommandFailed.js
@@ -0,0 +1,12 @@
+function isCommandFailed(command) {
+ if (!command) {
+ return false;
+ }
+
+ return command.status === 'failed' ||
+ command.status === 'aborted' ||
+ command.status === 'cancelled' ||
+ command.status === 'orphaned';
+}
+
+export default isCommandFailed;
diff --git a/frontend/src/Utilities/Command/isSameCommand.js b/frontend/src/Utilities/Command/isSameCommand.js
new file mode 100644
index 000000000..d0acb24b5
--- /dev/null
+++ b/frontend/src/Utilities/Command/isSameCommand.js
@@ -0,0 +1,24 @@
+import _ from 'lodash';
+
+function isSameCommand(commandA, commandB) {
+ if (commandA.name.toLocaleLowerCase() !== commandB.name.toLocaleLowerCase()) {
+ return false;
+ }
+
+ for (const key in commandB) {
+ if (key !== 'name') {
+ const value = commandB[key];
+ if (Array.isArray(value)) {
+ if (_.difference(value, commandA[key]).length > 0) {
+ return false;
+ }
+ } else if (value !== commandA[key]) {
+ return false;
+ }
+ }
+ }
+
+ return true;
+}
+
+export default isSameCommand;
diff --git a/frontend/src/Utilities/Constants/keyCodes.js b/frontend/src/Utilities/Constants/keyCodes.js
new file mode 100644
index 000000000..9285b10fe
--- /dev/null
+++ b/frontend/src/Utilities/Constants/keyCodes.js
@@ -0,0 +1,7 @@
+export const TAB = 9;
+export const ENTER = 13;
+export const SHIFT = 16;
+export const CONTROL = 17;
+export const ESCAPE = 27;
+export const UP_ARROW = 38;
+export const DOWN_ARROW = 40;
diff --git a/frontend/src/Utilities/Date/dateFilterPredicate.js b/frontend/src/Utilities/Date/dateFilterPredicate.js
new file mode 100644
index 000000000..59407e3ba
--- /dev/null
+++ b/frontend/src/Utilities/Date/dateFilterPredicate.js
@@ -0,0 +1,43 @@
+import moment from 'moment';
+import * as filterTypes from 'Helpers/Props/filterTypes';
+import isAfter from 'Utilities/Date/isAfter';
+import isBefore from 'Utilities/Date/isBefore';
+
+export default function(itemValue, filterValue, type) {
+ if (!itemValue) {
+ return false;
+ }
+
+ switch (type) {
+ case filterTypes.LESS_THAN:
+ return moment(itemValue).isBefore(filterValue);
+
+ case filterTypes.GREATER_THAN:
+ return moment(itemValue).isAfter(filterValue);
+
+ case filterTypes.IN_LAST:
+ return (
+ isAfter(itemValue, { [filterValue.time]: filterValue.value * -1 }) &&
+ isBefore(itemValue)
+ );
+
+ case filterTypes.NOT_IN_LAST:
+ return (
+ isBefore(itemValue, { [filterValue.time]: filterValue.value * -1 })
+ );
+
+ case filterTypes.IN_NEXT:
+ return (
+ isAfter(itemValue) &&
+ isBefore(itemValue, { [filterValue.time]: filterValue.value })
+ );
+
+ case filterTypes.NOT_IN_NEXT:
+ return (
+ isAfter(itemValue, { [filterValue.time]: filterValue.value })
+ );
+
+ default:
+ return false;
+ }
+}
diff --git a/frontend/src/Utilities/Date/formatDate.js b/frontend/src/Utilities/Date/formatDate.js
new file mode 100644
index 000000000..92eb57840
--- /dev/null
+++ b/frontend/src/Utilities/Date/formatDate.js
@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+function formatDate(date, dateFormat) {
+ if (!date) {
+ return '';
+ }
+
+ return moment(date).format(dateFormat);
+}
+
+export default formatDate;
diff --git a/frontend/src/Utilities/Date/formatDateTime.js b/frontend/src/Utilities/Date/formatDateTime.js
new file mode 100644
index 000000000..fb50230e1
--- /dev/null
+++ b/frontend/src/Utilities/Date/formatDateTime.js
@@ -0,0 +1,43 @@
+import moment from 'moment';
+import translate from 'Utilities/String/translate';
+import formatTime from './formatTime';
+import isToday from './isToday';
+import isTomorrow from './isTomorrow';
+import isYesterday from './isYesterday';
+
+function getRelativeDay(date, includeRelativeDate) {
+ if (!includeRelativeDate) {
+ return '';
+ }
+
+ if (isYesterday(date)) {
+ return translate('Yesterday');
+ }
+
+ if (isToday(date)) {
+ return translate('Today');
+ }
+
+ if (isTomorrow(date)) {
+ return translate('Tomorrow');
+ }
+
+ return '';
+}
+
+function formatDateTime(date, dateFormat, timeFormat, { includeSeconds = false, includeRelativeDay = false } = {}) {
+ if (!date) {
+ return '';
+ }
+
+ const relativeDay = getRelativeDay(date, includeRelativeDay);
+ const formattedDate = moment(date).format(dateFormat);
+ const formattedTime = formatTime(date, timeFormat, { includeMinuteZero: true, includeSeconds });
+
+ if (relativeDay) {
+ return translate('FormatDateTimeRelative', { relativeDay, formattedDate, formattedTime });
+ }
+ return translate('FormatDateTime', { formattedDate, formattedTime });
+}
+
+export default formatDateTime;
diff --git a/frontend/src/Utilities/Date/formatShortTimeSpan.js b/frontend/src/Utilities/Date/formatShortTimeSpan.js
new file mode 100644
index 000000000..148dc2627
--- /dev/null
+++ b/frontend/src/Utilities/Date/formatShortTimeSpan.js
@@ -0,0 +1,26 @@
+import moment from 'moment';
+import translate from 'Utilities/String/translate';
+
+function formatShortTimeSpan(timeSpan) {
+ if (!timeSpan) {
+ return '';
+ }
+
+ const duration = moment.duration(timeSpan);
+
+ const hours = Math.floor(duration.asHours());
+ const minutes = Math.floor(duration.asMinutes());
+ const seconds = Math.floor(duration.asSeconds());
+
+ if (hours > 0) {
+ return translate('FormatShortTimeSpanHours', { hours });
+ }
+
+ if (minutes > 0) {
+ return translate('FormatShortTimeSpanMinutes', { minutes });
+ }
+
+ return translate('FormatShortTimeSpanSeconds', { seconds });
+}
+
+export default formatShortTimeSpan;
diff --git a/frontend/src/Utilities/Date/formatTime.js b/frontend/src/Utilities/Date/formatTime.js
new file mode 100644
index 000000000..226b0cd97
--- /dev/null
+++ b/frontend/src/Utilities/Date/formatTime.js
@@ -0,0 +1,21 @@
+import moment from 'moment';
+
+function formatTime(date, timeFormat, { includeMinuteZero = false, includeSeconds = false } = {}) {
+ if (!date) {
+ return '';
+ }
+
+ const time = moment(date);
+
+ if (includeSeconds) {
+ timeFormat = timeFormat.replace(/\(?:mm\)?/, ':mm:ss');
+ } else if (includeMinuteZero || time.minute() !== 0) {
+ timeFormat = timeFormat.replace('(:mm)', ':mm');
+ } else {
+ timeFormat = timeFormat.replace('(:mm)', '');
+ }
+
+ return time.format(timeFormat);
+}
+
+export default formatTime;
diff --git a/frontend/src/Utilities/Date/formatTimeSpan.js b/frontend/src/Utilities/Date/formatTimeSpan.js
new file mode 100644
index 000000000..2422e19d5
--- /dev/null
+++ b/frontend/src/Utilities/Date/formatTimeSpan.js
@@ -0,0 +1,26 @@
+import moment from 'moment';
+import padNumber from 'Utilities/Number/padNumber';
+import translate from 'Utilities/String/translate';
+
+function formatTimeSpan(timeSpan) {
+ if (!timeSpan) {
+ return '';
+ }
+
+ const duration = moment.duration(timeSpan);
+
+ const days = Math.floor(duration.asDays());
+ const hours = padNumber(duration.get('hours'), 2);
+ const minutes = padNumber(duration.get('minutes'), 2);
+ const seconds = padNumber(duration.get('seconds'), 2);
+
+ const time = `${hours}:${minutes}:${seconds}`;
+
+ if (days > 0) {
+ return translate('FormatTimeSpanDays', { days, time });
+ }
+
+ return time;
+}
+
+export default formatTimeSpan;
diff --git a/frontend/src/Utilities/Date/getRelativeDate.ts b/frontend/src/Utilities/Date/getRelativeDate.ts
new file mode 100644
index 000000000..178d14fb7
--- /dev/null
+++ b/frontend/src/Utilities/Date/getRelativeDate.ts
@@ -0,0 +1,61 @@
+import moment from 'moment';
+import formatTime from 'Utilities/Date/formatTime';
+import isInNextWeek from 'Utilities/Date/isInNextWeek';
+import isToday from 'Utilities/Date/isToday';
+import isTomorrow from 'Utilities/Date/isTomorrow';
+import isYesterday from 'Utilities/Date/isYesterday';
+import translate from 'Utilities/String/translate';
+
+interface GetRelativeDateOptions {
+ timeFormat?: string;
+ includeSeconds?: boolean;
+ timeForToday?: boolean;
+}
+
+function getRelativeDate(
+ date: string | undefined,
+ shortDateFormat: string,
+ showRelativeDates: boolean,
+ {
+ timeFormat,
+ includeSeconds = false,
+ timeForToday = false,
+ }: GetRelativeDateOptions = {}
+) {
+ if (!date) {
+ return '';
+ }
+
+ const isTodayDate = isToday(date);
+
+ if (isTodayDate && timeForToday && timeFormat) {
+ return formatTime(date, timeFormat, {
+ includeMinuteZero: true,
+ includeSeconds,
+ });
+ }
+
+ if (!showRelativeDates) {
+ return moment(date).format(shortDateFormat);
+ }
+
+ if (isYesterday(date)) {
+ return translate('Yesterday');
+ }
+
+ if (isTodayDate) {
+ return translate('Today');
+ }
+
+ if (isTomorrow(date)) {
+ return translate('Tomorrow');
+ }
+
+ if (isInNextWeek(date)) {
+ return moment(date).format('dddd');
+ }
+
+ return moment(date).format(shortDateFormat);
+}
+
+export default getRelativeDate;
diff --git a/frontend/src/Utilities/Date/isAfter.js b/frontend/src/Utilities/Date/isAfter.js
new file mode 100644
index 000000000..4bbd8660b
--- /dev/null
+++ b/frontend/src/Utilities/Date/isAfter.js
@@ -0,0 +1,17 @@
+import moment from 'moment';
+
+function isAfter(date, offsets = {}) {
+ if (!date) {
+ return false;
+ }
+
+ const offsetTime = moment();
+
+ Object.keys(offsets).forEach((key) => {
+ offsetTime.add(offsets[key], key);
+ });
+
+ return moment(date).isAfter(offsetTime);
+}
+
+export default isAfter;
diff --git a/frontend/src/Utilities/Date/isBefore.js b/frontend/src/Utilities/Date/isBefore.js
new file mode 100644
index 000000000..3e1e81f67
--- /dev/null
+++ b/frontend/src/Utilities/Date/isBefore.js
@@ -0,0 +1,17 @@
+import moment from 'moment';
+
+function isBefore(date, offsets = {}) {
+ if (!date) {
+ return false;
+ }
+
+ const offsetTime = moment();
+
+ Object.keys(offsets).forEach((key) => {
+ offsetTime.add(offsets[key], key);
+ });
+
+ return moment(date).isBefore(offsetTime);
+}
+
+export default isBefore;
diff --git a/frontend/src/Utilities/Date/isInNextWeek.js b/frontend/src/Utilities/Date/isInNextWeek.js
new file mode 100644
index 000000000..7b5fd7cc7
--- /dev/null
+++ b/frontend/src/Utilities/Date/isInNextWeek.js
@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+function isInNextWeek(date) {
+ if (!date) {
+ return false;
+ }
+ const now = moment();
+ return moment(date).isBetween(now, now.clone().add(6, 'days').endOf('day'));
+}
+
+export default isInNextWeek;
diff --git a/frontend/src/Utilities/Date/isSameWeek.js b/frontend/src/Utilities/Date/isSameWeek.js
new file mode 100644
index 000000000..14b76ffb7
--- /dev/null
+++ b/frontend/src/Utilities/Date/isSameWeek.js
@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+function isSameWeek(date) {
+ if (!date) {
+ return false;
+ }
+
+ return moment(date).isSame(moment(), 'week');
+}
+
+export default isSameWeek;
diff --git a/frontend/src/Utilities/Date/isToday.js b/frontend/src/Utilities/Date/isToday.js
new file mode 100644
index 000000000..31502951f
--- /dev/null
+++ b/frontend/src/Utilities/Date/isToday.js
@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+function isToday(date) {
+ if (!date) {
+ return false;
+ }
+
+ return moment(date).isSame(moment(), 'day');
+}
+
+export default isToday;
diff --git a/frontend/src/Utilities/Date/isTomorrow.js b/frontend/src/Utilities/Date/isTomorrow.js
new file mode 100644
index 000000000..d22386dbd
--- /dev/null
+++ b/frontend/src/Utilities/Date/isTomorrow.js
@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+function isTomorrow(date) {
+ if (!date) {
+ return false;
+ }
+
+ return moment(date).isSame(moment().add(1, 'day'), 'day');
+}
+
+export default isTomorrow;
diff --git a/frontend/src/Utilities/Date/isYesterday.js b/frontend/src/Utilities/Date/isYesterday.js
new file mode 100644
index 000000000..9de21d82a
--- /dev/null
+++ b/frontend/src/Utilities/Date/isYesterday.js
@@ -0,0 +1,11 @@
+import moment from 'moment';
+
+function isYesterday(date) {
+ if (!date) {
+ return false;
+ }
+
+ return moment(date).isSame(moment().subtract(1, 'day'), 'day');
+}
+
+export default isYesterday;
diff --git a/frontend/src/Utilities/Filter/findSelectedFilters.js b/frontend/src/Utilities/Filter/findSelectedFilters.js
new file mode 100644
index 000000000..1c104073c
--- /dev/null
+++ b/frontend/src/Utilities/Filter/findSelectedFilters.js
@@ -0,0 +1,19 @@
+export default function findSelectedFilters(selectedFilterKey, filters = [], customFilters = []) {
+ if (!selectedFilterKey) {
+ return [];
+ }
+
+ let selectedFilter = filters.find((f) => f.key === selectedFilterKey);
+
+ if (!selectedFilter) {
+ selectedFilter = customFilters.find((f) => f.id === selectedFilterKey);
+ }
+
+ if (!selectedFilter) {
+ // TODO: throw in dev
+ console.error('Matching filter not found');
+ return [];
+ }
+
+ return selectedFilter.filters;
+}
diff --git a/frontend/src/Utilities/Filter/getFilterValue.js b/frontend/src/Utilities/Filter/getFilterValue.js
new file mode 100644
index 000000000..70b0b51f1
--- /dev/null
+++ b/frontend/src/Utilities/Filter/getFilterValue.js
@@ -0,0 +1,11 @@
+export default function getFilterValue(filters, filterKey, filterValueKey, defaultValue) {
+ const filter = filters.find((f) => f.key === filterKey);
+
+ if (!filter) {
+ return defaultValue;
+ }
+
+ const filterValue = filter.filters.find((f) => f.key === filterValueKey);
+
+ return filterValue ? filterValue.value : defaultValue;
+}
diff --git a/frontend/src/Utilities/Number/convertToBytes.js b/frontend/src/Utilities/Number/convertToBytes.js
new file mode 100644
index 000000000..88357944f
--- /dev/null
+++ b/frontend/src/Utilities/Number/convertToBytes.js
@@ -0,0 +1,15 @@
+function convertToBytes(input, power, binaryPrefix) {
+ const size = Number(input);
+
+ if (isNaN(size)) {
+ return '';
+ }
+
+ const prefix = binaryPrefix ? 1024 : 1000;
+ const multiplier = Math.pow(prefix, power);
+ const result = size * multiplier;
+
+ return Math.round(result);
+}
+
+export default convertToBytes;
diff --git a/frontend/src/Utilities/Number/formatAge.js b/frontend/src/Utilities/Number/formatAge.js
new file mode 100644
index 000000000..a8f0e9f65
--- /dev/null
+++ b/frontend/src/Utilities/Number/formatAge.js
@@ -0,0 +1,19 @@
+import translate from 'Utilities/String/translate';
+
+function formatAge(age, ageHours, ageMinutes) {
+ age = Math.round(age);
+ ageHours = parseFloat(ageHours);
+ ageMinutes = ageMinutes && parseFloat(ageMinutes);
+
+ if (age < 2 && ageHours) {
+ if (ageHours < 2 && !!ageMinutes) {
+ return `${ageMinutes.toFixed(0)} ${ageHours === 1 ? translate('FormatAgeMinute') : translate('FormatAgeMinutes')}`;
+ }
+
+ return `${ageHours.toFixed(1)} ${ageHours === 1 ? translate('FormatAgeHour') : translate('FormatAgeHours')}`;
+ }
+
+ return `${age} ${age === 1 ? translate('FormatAgeDay') : translate('FormatAgeDays')}`;
+}
+
+export default formatAge;
diff --git a/frontend/src/Utilities/Number/formatBytes.js b/frontend/src/Utilities/Number/formatBytes.js
new file mode 100644
index 000000000..273452031
--- /dev/null
+++ b/frontend/src/Utilities/Number/formatBytes.js
@@ -0,0 +1,17 @@
+import { filesize } from 'filesize';
+
+function formatBytes(input, showBits = false) {
+ const size = Number(input);
+
+ if (isNaN(size)) {
+ return '';
+ }
+
+ return `${filesize(size, {
+ base: 2,
+ round: 1,
+ bits: showBits
+ })}`;
+}
+
+export default formatBytes;
diff --git a/frontend/src/Utilities/Number/formatCustomFormatScore.ts b/frontend/src/Utilities/Number/formatCustomFormatScore.ts
new file mode 100644
index 000000000..b4da3a2cd
--- /dev/null
+++ b/frontend/src/Utilities/Number/formatCustomFormatScore.ts
@@ -0,0 +1,18 @@
+function formatCustomFormatScore(
+ input?: number,
+ customFormatsLength = 0
+): string {
+ const score = Number(input);
+
+ if (score > 0) {
+ return `+${score}`;
+ }
+
+ if (score < 0) {
+ return `${score}`;
+ }
+
+ return customFormatsLength > 0 ? '+0' : '';
+}
+
+export default formatCustomFormatScore;
diff --git a/frontend/src/Utilities/Number/padNumber.js b/frontend/src/Utilities/Number/padNumber.js
new file mode 100644
index 000000000..53ae69cac
--- /dev/null
+++ b/frontend/src/Utilities/Number/padNumber.js
@@ -0,0 +1,10 @@
+function padNumber(input, width, paddingCharacter = 0) {
+ if (input == null) {
+ return '';
+ }
+
+ input = `${input}`;
+ return input.length >= width ? input : new Array(width - input.length + 1).join(paddingCharacter) + input;
+}
+
+export default padNumber;
diff --git a/frontend/src/Utilities/Number/roundNumber.js b/frontend/src/Utilities/Number/roundNumber.js
new file mode 100644
index 000000000..e1a19018f
--- /dev/null
+++ b/frontend/src/Utilities/Number/roundNumber.js
@@ -0,0 +1,5 @@
+export default function roundNumber(input, decimalPlaces = 1) {
+ const multiplier = Math.pow(10, decimalPlaces);
+
+ return Math.round(input * multiplier) / multiplier;
+}
diff --git a/frontend/src/Utilities/Object/getErrorMessage.js b/frontend/src/Utilities/Object/getErrorMessage.js
new file mode 100644
index 000000000..1ba874660
--- /dev/null
+++ b/frontend/src/Utilities/Object/getErrorMessage.js
@@ -0,0 +1,11 @@
+function getErrorMessage(xhr, fallbackErrorMessage) {
+ if (!xhr || !xhr.responseJSON || !xhr.responseJSON.message) {
+ return fallbackErrorMessage;
+ }
+
+ const message = xhr.responseJSON.message;
+
+ return message || fallbackErrorMessage;
+}
+
+export default getErrorMessage;
diff --git a/frontend/src/Utilities/Object/getRemovedItems.js b/frontend/src/Utilities/Object/getRemovedItems.js
new file mode 100644
index 000000000..df7ada3a8
--- /dev/null
+++ b/frontend/src/Utilities/Object/getRemovedItems.js
@@ -0,0 +1,15 @@
+function getRemovedItems(prevItems, currentItems, idProp = 'id') {
+ if (prevItems === currentItems) {
+ return [];
+ }
+
+ const currentItemIds = new Set();
+
+ currentItems.forEach((currentItem) => {
+ currentItemIds.add(currentItem[idProp]);
+ });
+
+ return prevItems.filter((prevItem) => !currentItemIds.has(prevItem[idProp]));
+}
+
+export default getRemovedItems;
diff --git a/frontend/src/Utilities/Object/hasDifferentItems.js b/frontend/src/Utilities/Object/hasDifferentItems.js
new file mode 100644
index 000000000..d3c0046e4
--- /dev/null
+++ b/frontend/src/Utilities/Object/hasDifferentItems.js
@@ -0,0 +1,19 @@
+function hasDifferentItems(prevItems, currentItems, idProp = 'id') {
+ if (prevItems === currentItems) {
+ return false;
+ }
+
+ if (prevItems.length !== currentItems.length) {
+ return true;
+ }
+
+ const currentItemIds = new Set();
+
+ currentItems.forEach((currentItem) => {
+ currentItemIds.add(currentItem[idProp]);
+ });
+
+ return prevItems.some((prevItem) => !currentItemIds.has(prevItem[idProp]));
+}
+
+export default hasDifferentItems;
diff --git a/frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js b/frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js
new file mode 100644
index 000000000..e2acbc5c0
--- /dev/null
+++ b/frontend/src/Utilities/Object/hasDifferentItemsOrOrder.js
@@ -0,0 +1,21 @@
+function hasDifferentItemsOrOrder(prevItems, currentItems, idProp = 'id') {
+ if (prevItems === currentItems) {
+ return false;
+ }
+
+ const len = prevItems.length;
+
+ if (len !== currentItems.length) {
+ return true;
+ }
+
+ for (let i = 0; i < len; i++) {
+ if (prevItems[i][idProp] !== currentItems[i][idProp]) {
+ return true;
+ }
+ }
+
+ return false;
+}
+
+export default hasDifferentItemsOrOrder;
diff --git a/frontend/src/Utilities/Object/selectUniqueIds.js b/frontend/src/Utilities/Object/selectUniqueIds.js
new file mode 100644
index 000000000..c2c0c17e3
--- /dev/null
+++ b/frontend/src/Utilities/Object/selectUniqueIds.js
@@ -0,0 +1,15 @@
+import _ from 'lodash';
+
+function selectUniqueIds(items, idProp) {
+ const ids = _.reduce(items, (result, item) => {
+ if (item[idProp]) {
+ result.push(item[idProp]);
+ }
+
+ return result;
+ }, []);
+
+ return _.uniq(ids);
+}
+
+export default selectUniqueIds;
diff --git a/frontend/src/Utilities/Quality/getQualities.js b/frontend/src/Utilities/Quality/getQualities.js
new file mode 100644
index 000000000..da09851ea
--- /dev/null
+++ b/frontend/src/Utilities/Quality/getQualities.js
@@ -0,0 +1,16 @@
+export default function getQualities(qualities) {
+ if (!qualities) {
+ return [];
+ }
+
+ return qualities.reduce((acc, item) => {
+ if (item.quality) {
+ acc.push(item.quality);
+ } else {
+ const groupQualities = item.items.map((i) => i.quality);
+ acc.push(...groupQualities);
+ }
+
+ return acc;
+ }, []);
+}
diff --git a/frontend/src/Utilities/ResolutionUtility.js b/frontend/src/Utilities/ResolutionUtility.js
new file mode 100644
index 000000000..358448ca9
--- /dev/null
+++ b/frontend/src/Utilities/ResolutionUtility.js
@@ -0,0 +1,26 @@
+import $ from 'jquery';
+
+module.exports = {
+ resolutions: {
+ desktopLarge: 1200,
+ desktop: 992,
+ tablet: 768,
+ mobile: 480
+ },
+
+ isDesktopLarge() {
+ return $(window).width() < this.resolutions.desktopLarge;
+ },
+
+ isDesktop() {
+ return $(window).width() < this.resolutions.desktop;
+ },
+
+ isTablet() {
+ return $(window).width() < this.resolutions.tablet;
+ },
+
+ isMobile() {
+ return $(window).width() < this.resolutions.mobile;
+ }
+};
diff --git a/frontend/src/Utilities/State/getNextId.js b/frontend/src/Utilities/State/getNextId.js
new file mode 100644
index 000000000..204aac95a
--- /dev/null
+++ b/frontend/src/Utilities/State/getNextId.js
@@ -0,0 +1,5 @@
+function getNextId(items) {
+ return items.reduce((id, x) => Math.max(id, x.id), 1) + 1;
+}
+
+export default getNextId;
diff --git a/frontend/src/Utilities/State/getProviderState.js b/frontend/src/Utilities/State/getProviderState.js
new file mode 100644
index 000000000..4159905b8
--- /dev/null
+++ b/frontend/src/Utilities/State/getProviderState.js
@@ -0,0 +1,49 @@
+import _ from 'lodash';
+import getSectionState from 'Utilities/State/getSectionState';
+
+function getProviderState(payload, getState, section, keyValueOnly=true) {
+ const {
+ id,
+ ...otherPayload
+ } = payload;
+
+ const state = getSectionState(getState(), section, true);
+ const pendingChanges = Object.assign({}, state.pendingChanges, otherPayload);
+ const pendingFields = state.pendingChanges.fields || {};
+ delete pendingChanges.fields;
+
+ const item = id ? _.find(state.items, { id }) : state.selectedSchema || state.schema || {};
+
+ if (item.fields) {
+ pendingChanges.fields = _.reduce(item.fields, (result, field) => {
+ const name = field.name;
+
+ const value = pendingFields.hasOwnProperty(name) ?
+ pendingFields[name] :
+ field.value;
+
+ // Only send the name and value to the server
+ if (keyValueOnly) {
+ result.push({
+ name,
+ value
+ });
+ } else {
+ result.push({
+ ...field,
+ value
+ });
+ }
+
+ return result;
+ }, []);
+ }
+
+ const result = Object.assign({}, item, pendingChanges);
+
+ delete result.presets;
+
+ return result;
+}
+
+export default getProviderState;
diff --git a/frontend/src/Utilities/State/getSectionState.js b/frontend/src/Utilities/State/getSectionState.js
new file mode 100644
index 000000000..00871bed2
--- /dev/null
+++ b/frontend/src/Utilities/State/getSectionState.js
@@ -0,0 +1,22 @@
+import _ from 'lodash';
+
+function getSectionState(state, section, isFullStateTree = false) {
+ if (isFullStateTree) {
+ return _.get(state, section);
+ }
+
+ const [, subSection] = section.split('.');
+
+ if (subSection) {
+ return Object.assign({}, state[subSection]);
+ }
+
+ // TODO: Remove in favour of using subSection
+ if (state.hasOwnProperty(section)) {
+ return Object.assign({}, state[section]);
+ }
+
+ return Object.assign({}, state);
+}
+
+export default getSectionState;
diff --git a/frontend/src/Utilities/State/selectProviderSchema.js b/frontend/src/Utilities/State/selectProviderSchema.js
new file mode 100644
index 000000000..c8a31760c
--- /dev/null
+++ b/frontend/src/Utilities/State/selectProviderSchema.js
@@ -0,0 +1,34 @@
+import _ from 'lodash';
+import getSectionState from 'Utilities/State/getSectionState';
+import updateSectionState from 'Utilities/State/updateSectionState';
+
+function applySchemaDefaults(selectedSchema, schemaDefaults) {
+ if (!schemaDefaults) {
+ return selectedSchema;
+ } else if (_.isFunction(schemaDefaults)) {
+ return schemaDefaults(selectedSchema);
+ }
+
+ return Object.assign(selectedSchema, schemaDefaults);
+}
+
+function selectProviderSchema(state, section, payload, schemaDefaults) {
+ const newState = getSectionState(state, section);
+
+ const {
+ implementation,
+ presetName
+ } = payload;
+
+ const selectedImplementation = _.find(newState.schema, { implementation });
+
+ const selectedSchema = presetName ?
+ _.find(selectedImplementation.presets, { name: presetName }) :
+ selectedImplementation;
+
+ newState.selectedSchema = applySchemaDefaults(_.cloneDeep(selectedSchema), schemaDefaults);
+
+ return updateSectionState(state, section, newState);
+}
+
+export default selectProviderSchema;
diff --git a/frontend/src/Utilities/State/updateSectionState.js b/frontend/src/Utilities/State/updateSectionState.js
new file mode 100644
index 000000000..81b33ecaf
--- /dev/null
+++ b/frontend/src/Utilities/State/updateSectionState.js
@@ -0,0 +1,16 @@
+function updateSectionState(state, section, newState) {
+ const [, subSection] = section.split('.');
+
+ if (subSection) {
+ return Object.assign({}, state, { [subSection]: newState });
+ }
+
+ // TODO: Remove in favour of using subSection
+ if (state.hasOwnProperty(section)) {
+ return Object.assign({}, state, { [section]: newState });
+ }
+
+ return Object.assign({}, state, newState);
+}
+
+export default updateSectionState;
diff --git a/frontend/src/Utilities/String/combinePath.js b/frontend/src/Utilities/String/combinePath.js
new file mode 100644
index 000000000..9e4e9abe8
--- /dev/null
+++ b/frontend/src/Utilities/String/combinePath.js
@@ -0,0 +1,5 @@
+export default function combinePath(isWindows, basePath, paths = []) {
+ const slash = isWindows ? '\\' : '/';
+
+ return `${basePath}${slash}${paths.join(slash)}`;
+}
diff --git a/frontend/src/Utilities/String/firstCharToUpper.js b/frontend/src/Utilities/String/firstCharToUpper.js
new file mode 100644
index 000000000..1ce64831c
--- /dev/null
+++ b/frontend/src/Utilities/String/firstCharToUpper.js
@@ -0,0 +1,9 @@
+function firstCharToUpper(input) {
+ if (!input) {
+ return '';
+ }
+
+ return [].map.call(input, (char, i) => (i ? char : char.toUpperCase())).join('');
+}
+
+export default firstCharToUpper;
diff --git a/frontend/src/Utilities/String/generateUUIDv4.js b/frontend/src/Utilities/String/generateUUIDv4.js
new file mode 100644
index 000000000..51b15ec60
--- /dev/null
+++ b/frontend/src/Utilities/String/generateUUIDv4.js
@@ -0,0 +1,6 @@
+export default function generateUUIDv4() {
+ return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, (c) =>
+ // eslint-disable-next-line no-bitwise
+ (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
+ );
+}
diff --git a/frontend/src/Utilities/String/isString.js b/frontend/src/Utilities/String/isString.js
new file mode 100644
index 000000000..1e7c3dff8
--- /dev/null
+++ b/frontend/src/Utilities/String/isString.js
@@ -0,0 +1,3 @@
+export default function isString(possibleString) {
+ return typeof possibleString === 'string' || possibleString instanceof String;
+}
diff --git a/frontend/src/Utilities/String/naturalExpansion.js b/frontend/src/Utilities/String/naturalExpansion.js
new file mode 100644
index 000000000..2cdd69b86
--- /dev/null
+++ b/frontend/src/Utilities/String/naturalExpansion.js
@@ -0,0 +1,11 @@
+const regex = /\d+/g;
+
+function naturalExpansion(input) {
+ if (!input) {
+ return '';
+ }
+
+ return input.replace(regex, (n) => n.padStart(8, '0'));
+}
+
+export default naturalExpansion;
diff --git a/frontend/src/Utilities/String/parseUrl.js b/frontend/src/Utilities/String/parseUrl.js
new file mode 100644
index 000000000..93341f85f
--- /dev/null
+++ b/frontend/src/Utilities/String/parseUrl.js
@@ -0,0 +1,36 @@
+import _ from 'lodash';
+import qs from 'qs';
+
+// See: https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils
+const anchor = document.createElement('a');
+
+export default function parseUrl(url) {
+ anchor.href = url;
+
+ // The `origin`, `password`, and `username` properties are unavailable in
+ // Opera Presto. We synthesize `origin` if it's not present. While `password`
+ // and `username` are ignored intentionally.
+ const properties = _.pick(
+ anchor,
+ 'hash',
+ 'host',
+ 'hostname',
+ 'href',
+ 'origin',
+ 'pathname',
+ 'port',
+ 'protocol',
+ 'search'
+ );
+
+ properties.isAbsolute = (/^[\w:]*\/\//).test(url);
+
+ if (properties.search) {
+ // Remove leading ? from querystring before parsing.
+ properties.params = qs.parse(properties.search.substring(1));
+ } else {
+ properties.params = {};
+ }
+
+ return properties;
+}
diff --git a/frontend/src/Utilities/String/shortenList.js b/frontend/src/Utilities/String/shortenList.js
new file mode 100644
index 000000000..66085db4d
--- /dev/null
+++ b/frontend/src/Utilities/String/shortenList.js
@@ -0,0 +1,7 @@
+export default function shortenList(input, startCount = 3, endCount = 1, separator = ', ') {
+ const sorted = [...input].sort();
+ if (sorted.length <= startCount + endCount) {
+ return sorted.join(separator);
+ }
+ return [...sorted.slice(0, startCount), '...', sorted.slice(-endCount)].join(separator);
+}
diff --git a/frontend/src/Utilities/String/split.js b/frontend/src/Utilities/String/split.js
new file mode 100644
index 000000000..0e57e7545
--- /dev/null
+++ b/frontend/src/Utilities/String/split.js
@@ -0,0 +1,17 @@
+import _ from 'lodash';
+
+function split(input, separator = ',') {
+ if (!input) {
+ return [];
+ }
+
+ return _.reduce(input.split(separator), (result, s) => {
+ if (s) {
+ result.push(s);
+ }
+
+ return result;
+ }, []);
+}
+
+export default split;
diff --git a/frontend/src/Utilities/String/titleCase.js b/frontend/src/Utilities/String/titleCase.js
new file mode 100644
index 000000000..03573b9e3
--- /dev/null
+++ b/frontend/src/Utilities/String/titleCase.js
@@ -0,0 +1,13 @@
+const regex = /\b\w+/g;
+
+function titleCase(input) {
+ if (!input) {
+ return '';
+ }
+
+ return input.replace(regex, (match) => {
+ return match.charAt(0).toUpperCase() + match.substr(1).toLowerCase();
+ });
+}
+
+export default titleCase;
diff --git a/frontend/src/Utilities/String/translate.ts b/frontend/src/Utilities/String/translate.ts
new file mode 100644
index 000000000..5571ef6b0
--- /dev/null
+++ b/frontend/src/Utilities/String/translate.ts
@@ -0,0 +1,48 @@
+import createAjaxRequest from 'Utilities/createAjaxRequest';
+
+function getTranslations() {
+ return createAjaxRequest({
+ global: false,
+ dataType: 'json',
+ url: '/localization',
+ }).request;
+}
+
+let translations: Record = {};
+
+export async function fetchTranslations(): Promise {
+ return new Promise(async (resolve) => {
+ try {
+ const data = await getTranslations();
+ translations = data.strings;
+
+ resolve(true);
+ } catch {
+ resolve(false);
+ }
+ });
+}
+
+export default function translate(
+ key: string,
+ tokens: Record = {}
+) {
+ const { isProduction = true } = window.Lidarr;
+
+ if (!isProduction && !(key in translations)) {
+ console.warn(`Missing translation for key: ${key}`);
+ }
+
+ const translation = translations[key] || key;
+
+ tokens.appName = 'Lidarr';
+
+ // Fallback to the old behaviour for translations not yet updated to use named tokens
+ Object.values(tokens).forEach((value, index) => {
+ tokens[index] = value;
+ });
+
+ return translation.replace(/\{([a-z0-9]+?)\}/gi, (match, tokenMatch) =>
+ String(tokens[tokenMatch] ?? match)
+ );
+}
diff --git a/frontend/src/Utilities/Table/areAllSelected.js b/frontend/src/Utilities/Table/areAllSelected.js
new file mode 100644
index 000000000..26102f89b
--- /dev/null
+++ b/frontend/src/Utilities/Table/areAllSelected.js
@@ -0,0 +1,17 @@
+export default function areAllSelected(selectedState) {
+ let allSelected = true;
+ let allUnselected = true;
+
+ Object.keys(selectedState).forEach((key) => {
+ if (selectedState[key]) {
+ allUnselected = false;
+ } else {
+ allSelected = false;
+ }
+ });
+
+ return {
+ allSelected,
+ allUnselected
+ };
+}
diff --git a/frontend/src/Utilities/Table/getSelectedIds.ts b/frontend/src/Utilities/Table/getSelectedIds.ts
new file mode 100644
index 000000000..b84db6245
--- /dev/null
+++ b/frontend/src/Utilities/Table/getSelectedIds.ts
@@ -0,0 +1,18 @@
+import { reduce } from 'lodash';
+import { SelectedState } from 'Helpers/Hooks/useSelectState';
+
+function getSelectedIds(selectedState: SelectedState): number[] {
+ return reduce(
+ selectedState,
+ (result: number[], value, id) => {
+ if (value) {
+ result.push(parseInt(id));
+ }
+
+ return result;
+ },
+ []
+ );
+}
+
+export default getSelectedIds;
diff --git a/frontend/src/Utilities/Table/getToggledRange.js b/frontend/src/Utilities/Table/getToggledRange.js
new file mode 100644
index 000000000..c0cc44fe5
--- /dev/null
+++ b/frontend/src/Utilities/Table/getToggledRange.js
@@ -0,0 +1,23 @@
+import _ from 'lodash';
+
+function getToggledRange(items, id, lastToggled) {
+ const lastToggledIndex = _.findIndex(items, { id: lastToggled });
+ const changedIndex = _.findIndex(items, { id });
+ let lower = 0;
+ let upper = 0;
+
+ if (lastToggledIndex > changedIndex) {
+ lower = changedIndex;
+ upper = lastToggledIndex + 1;
+ } else {
+ lower = lastToggledIndex;
+ upper = changedIndex;
+ }
+
+ return {
+ lower,
+ upper
+ };
+}
+
+export default getToggledRange;
diff --git a/frontend/src/Utilities/Table/removeOldSelectedState.js b/frontend/src/Utilities/Table/removeOldSelectedState.js
new file mode 100644
index 000000000..ff3a4fe11
--- /dev/null
+++ b/frontend/src/Utilities/Table/removeOldSelectedState.js
@@ -0,0 +1,16 @@
+import areAllSelected from './areAllSelected';
+
+export default function removeOldSelectedState(state, prevItems) {
+ const selectedState = {
+ ...state.selectedState
+ };
+
+ prevItems.forEach((item) => {
+ delete selectedState[item.id];
+ });
+
+ return {
+ ...areAllSelected(selectedState),
+ selectedState
+ };
+}
diff --git a/frontend/src/Utilities/Table/selectAll.js b/frontend/src/Utilities/Table/selectAll.js
new file mode 100644
index 000000000..ffaaeaddf
--- /dev/null
+++ b/frontend/src/Utilities/Table/selectAll.js
@@ -0,0 +1,17 @@
+import _ from 'lodash';
+
+function selectAll(selectedState, selected) {
+ const newSelectedState = _.reduce(Object.keys(selectedState), (result, item) => {
+ result[item] = selected;
+ return result;
+ }, {});
+
+ return {
+ allSelected: selected,
+ allUnselected: !selected,
+ lastToggled: null,
+ selectedState: newSelectedState
+ };
+}
+
+export default selectAll;
diff --git a/frontend/src/Utilities/Table/toggleSelected.js b/frontend/src/Utilities/Table/toggleSelected.js
new file mode 100644
index 000000000..ec8870b0b
--- /dev/null
+++ b/frontend/src/Utilities/Table/toggleSelected.js
@@ -0,0 +1,30 @@
+import areAllSelected from './areAllSelected';
+import getToggledRange from './getToggledRange';
+
+function toggleSelected(selectedState, items, id, selected, shiftKey) {
+ const lastToggled = selectedState.lastToggled;
+ const nextSelectedState = {
+ ...selectedState.selectedState,
+ [id]: selected
+ };
+
+ if (selected == null) {
+ delete nextSelectedState[id];
+ }
+
+ if (shiftKey && lastToggled) {
+ const { lower, upper } = getToggledRange(items, id, lastToggled);
+
+ for (let i = lower; i < upper; i++) {
+ nextSelectedState[items[i].id] = selected;
+ }
+ }
+
+ return {
+ ...areAllSelected(nextSelectedState),
+ lastToggled: id,
+ selectedState: nextSelectedState
+ };
+}
+
+export default toggleSelected;
diff --git a/frontend/src/Utilities/browser.js b/frontend/src/Utilities/browser.js
new file mode 100644
index 000000000..ff896e801
--- /dev/null
+++ b/frontend/src/Utilities/browser.js
@@ -0,0 +1,16 @@
+import MobileDetect from 'mobile-detect';
+
+const mobileDetect = new MobileDetect(window.navigator.userAgent);
+
+export function isMobile() {
+
+ return mobileDetect.mobile() != null;
+}
+
+export function isIOS() {
+ return mobileDetect.is('iOS');
+}
+
+export function isFirefox() {
+ return window.navigator.userAgent.toLowerCase().indexOf('firefox/') >= 0;
+}
diff --git a/frontend/src/Utilities/createAjaxRequest.js b/frontend/src/Utilities/createAjaxRequest.js
new file mode 100644
index 000000000..d4836cadc
--- /dev/null
+++ b/frontend/src/Utilities/createAjaxRequest.js
@@ -0,0 +1,63 @@
+import $ from 'jquery';
+
+const absUrlRegex = /^(https?:)?\/\//i;
+const apiRoot = window.Lidarr.apiRoot;
+
+function isRelative(ajaxOptions) {
+ return !absUrlRegex.test(ajaxOptions.url);
+}
+
+function addRootUrl(ajaxOptions) {
+ ajaxOptions.url = apiRoot + ajaxOptions.url;
+}
+
+function addApiKey(ajaxOptions) {
+ ajaxOptions.headers = ajaxOptions.headers || {};
+ ajaxOptions.headers['X-Api-Key'] = window.Lidarr.apiKey;
+}
+
+function addContentType(ajaxOptions) {
+ if (
+ ajaxOptions.contentType == null &&
+ ajaxOptions.dataType === 'json' &&
+ (ajaxOptions.method === 'PUT' || ajaxOptions.method === 'POST' || ajaxOptions.method === 'DELETE')) {
+ ajaxOptions.contentType = 'application/json';
+ }
+}
+
+export default function createAjaxRequest(originalAjaxOptions) {
+ const requestXHR = new window.XMLHttpRequest();
+ let aborted = false;
+ let complete = false;
+
+ function abortRequest() {
+ if (!complete) {
+ aborted = true;
+ requestXHR.abort();
+ }
+ }
+
+ const ajaxOptions = { ...originalAjaxOptions };
+
+ if (isRelative(ajaxOptions)) {
+ addRootUrl(ajaxOptions);
+ addApiKey(ajaxOptions);
+ addContentType(ajaxOptions);
+ }
+
+ const request = $.ajax({
+ xhr: () => requestXHR,
+ ...ajaxOptions
+ }).then(null, (xhr, textStatus, errorThrown) => {
+ xhr.aborted = aborted;
+
+ return $.Deferred().reject(xhr, textStatus, errorThrown).promise();
+ }).always(() => {
+ complete = true;
+ });
+
+ return {
+ request,
+ abortRequest
+ };
+}
diff --git a/frontend/src/Utilities/getPathWithUrlBase.js b/frontend/src/Utilities/getPathWithUrlBase.js
new file mode 100644
index 000000000..292e98dba
--- /dev/null
+++ b/frontend/src/Utilities/getPathWithUrlBase.js
@@ -0,0 +1,3 @@
+export default function getPathWithUrlBase(path) {
+ return `${window.Lidarr.urlBase}${path}`;
+}
diff --git a/frontend/src/Utilities/getUniqueElementId.js b/frontend/src/Utilities/getUniqueElementId.js
new file mode 100644
index 000000000..dae5150b7
--- /dev/null
+++ b/frontend/src/Utilities/getUniqueElementId.js
@@ -0,0 +1,7 @@
+let i = 0;
+
+// returns a HTML 4.0 compliant element IDs (http://stackoverflow.com/a/79022)
+
+export default function getUniqueElementId() {
+ return `id-${i++}`;
+}
diff --git a/frontend/src/Utilities/pagePopulator.js b/frontend/src/Utilities/pagePopulator.js
new file mode 100644
index 000000000..f58dbe803
--- /dev/null
+++ b/frontend/src/Utilities/pagePopulator.js
@@ -0,0 +1,28 @@
+let currentPopulator = null;
+let currentReasons = [];
+
+export function registerPagePopulator(populator, reasons = []) {
+ currentPopulator = populator;
+ currentReasons = reasons;
+}
+
+export function unregisterPagePopulator(populator) {
+ if (currentPopulator === populator) {
+ currentPopulator = null;
+ currentReasons = [];
+ }
+}
+
+export function repopulatePage(reason) {
+ if (!currentPopulator) {
+ return;
+ }
+
+ if (!reason) {
+ currentPopulator();
+ }
+
+ if (reason && currentReasons.includes(reason)) {
+ currentPopulator();
+ }
+}
diff --git a/frontend/src/Utilities/pages.js b/frontend/src/Utilities/pages.js
new file mode 100644
index 000000000..1355442d9
--- /dev/null
+++ b/frontend/src/Utilities/pages.js
@@ -0,0 +1,9 @@
+const pages = {
+ FIRST: 'first',
+ PREVIOUS: 'previous',
+ NEXT: 'next',
+ LAST: 'last',
+ EXACT: 'exact'
+};
+
+export default pages;
diff --git a/frontend/src/Utilities/requestAction.js b/frontend/src/Utilities/requestAction.js
new file mode 100644
index 000000000..ed69cf5ad
--- /dev/null
+++ b/frontend/src/Utilities/requestAction.js
@@ -0,0 +1,41 @@
+import $ from 'jquery';
+import _ from 'lodash';
+import createAjaxRequest from './createAjaxRequest';
+
+function flattenProviderData(providerData) {
+ return _.reduce(Object.keys(providerData), (result, key) => {
+ const property = providerData[key];
+
+ if (key === 'fields') {
+ result[key] = property;
+ } else {
+ result[key] = property.value;
+ }
+
+ return result;
+ }, {});
+}
+
+function requestAction(payload) {
+ const {
+ provider,
+ action,
+ providerData,
+ queryParams
+ } = payload;
+
+ const ajaxOptions = {
+ url: `/${provider}/action/${action}`,
+ contentType: 'application/json',
+ method: 'POST',
+ data: JSON.stringify(flattenProviderData(providerData))
+ };
+
+ if (queryParams) {
+ ajaxOptions.url += `?${$.param(queryParams, true)}`;
+ }
+
+ return createAjaxRequest(ajaxOptions).request;
+}
+
+export default requestAction;
diff --git a/frontend/src/Utilities/scrollLock.js b/frontend/src/Utilities/scrollLock.js
new file mode 100644
index 000000000..cff50a34b
--- /dev/null
+++ b/frontend/src/Utilities/scrollLock.js
@@ -0,0 +1,13 @@
+// Allow iOS devices to disable scrolling of the body/virtual table
+// when a modal is open. This will prevent focusing an input in a
+// modal causing the modal to close due to scrolling.
+
+let scrollLock = false;
+
+export function isLocked() {
+ return scrollLock;
+}
+
+export function setScrollLock(locked) {
+ scrollLock = locked;
+}
diff --git a/frontend/src/Utilities/sectionTypes.js b/frontend/src/Utilities/sectionTypes.js
new file mode 100644
index 000000000..5479b32b9
--- /dev/null
+++ b/frontend/src/Utilities/sectionTypes.js
@@ -0,0 +1,6 @@
+const sectionTypes = {
+ COLLECTION: 'collection',
+ MODEL: 'model'
+};
+
+export default sectionTypes;
diff --git a/frontend/src/Utilities/serverSideCollectionHandlers.js b/frontend/src/Utilities/serverSideCollectionHandlers.js
new file mode 100644
index 000000000..03fa39c00
--- /dev/null
+++ b/frontend/src/Utilities/serverSideCollectionHandlers.js
@@ -0,0 +1,12 @@
+const serverSideCollectionHandlers = {
+ FETCH: 'fetch',
+ FIRST_PAGE: 'firstPage',
+ PREVIOUS_PAGE: 'previousPage',
+ NEXT_PAGE: 'nextPage',
+ LAST_PAGE: 'lastPage',
+ EXACT_PAGE: 'exactPage',
+ SORT: 'sort',
+ FILTER: 'filter'
+};
+
+export default serverSideCollectionHandlers;
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
new file mode 100644
index 000000000..6710118b1
--- /dev/null
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
@@ -0,0 +1,296 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import { align, icons, kinds } from 'Helpers/Props';
+import getFilterValue from 'Utilities/Filter/getFilterValue';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import CutoffUnmetRowConnector from './CutoffUnmetRowConnector';
+
+function getMonitoredValue(props) {
+ const {
+ filters,
+ selectedFilterKey
+ } = props;
+
+ return getFilterValue(filters, selectedFilterKey, 'monitored', false);
+}
+
+class CutoffUnmet extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ allSelected: false,
+ allUnselected: false,
+ lastToggled: null,
+ selectedState: {},
+ isConfirmSearchAllCutoffUnmetModalOpen: false,
+ isInteractiveImportModalOpen: false
+ };
+ }
+
+ componentDidUpdate(prevProps) {
+ if (hasDifferentItems(prevProps.items, this.props.items)) {
+ this.setState((state) => {
+ return removeOldSelectedState(state, prevProps.items);
+ });
+ }
+ }
+
+ //
+ // Control
+
+ getSelectedIds = () => {
+ return getSelectedIds(this.state.selectedState);
+ };
+
+ //
+ // Listeners
+
+ onSelectAllChange = ({ value }) => {
+ this.setState(selectAll(this.state.selectedState, value));
+ };
+
+ onSelectedChange = ({ id, value, shiftKey = false }) => {
+ this.setState((state) => {
+ return toggleSelected(state, this.props.items, id, value, shiftKey);
+ });
+ };
+
+ onSearchSelectedPress = () => {
+ const selected = this.getSelectedIds();
+
+ this.props.onSearchSelectedPress(selected);
+ };
+
+ onToggleSelectedPress = () => {
+ const albumIds = this.getSelectedIds();
+
+ this.props.batchToggleCutoffUnmetAlbums({
+ albumIds,
+ monitored: !getMonitoredValue(this.props)
+ });
+ };
+
+ onSearchAllCutoffUnmetPress = () => {
+ this.setState({ isConfirmSearchAllCutoffUnmetModalOpen: true });
+ };
+
+ onSearchAllCutoffUnmetConfirmed = () => {
+ this.props.onSearchAllCutoffUnmetPress();
+ this.setState({ isConfirmSearchAllCutoffUnmetModalOpen: false });
+ };
+
+ onConfirmSearchAllCutoffUnmetModalClose = () => {
+ this.setState({ isConfirmSearchAllCutoffUnmetModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ isArtistFetching,
+ isArtistPopulated,
+ selectedFilterKey,
+ filters,
+ columns,
+ totalRecords,
+ isSearchingForCutoffUnmetAlbums,
+ isSaving,
+ onFilterSelect,
+ ...otherProps
+ } = this.props;
+
+ const {
+ allSelected,
+ allUnselected,
+ selectedState,
+ isConfirmSearchAllCutoffUnmetModalOpen
+ } = this.state;
+
+ const isAllPopulated = isPopulated && isArtistPopulated;
+ const isAnyFetching = isFetching || isArtistFetching;
+
+ const itemsSelected = !!this.getSelectedIds().length;
+ const isShowingMonitored = getMonitoredValue(this.props);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ isAnyFetching && !isAllPopulated &&
+
+ Error fetching cutoff unmet
+
+ }
+
+ {
+ isAllPopulated && !error && !items.length &&
+
+ {translate('NoCutoffUnmetItems')}
+
+ }
+
+ {
+ isAllPopulated && !error && !!items.length &&
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+
+
+
+
+ {translate('SearchForAllCutoffUnmetAlbumsConfirmationCount', { totalRecords })}
+
+
+ {translate('MassSearchCancelWarning')}
+
+
+
+ );
+ }
+}
+
+CutoffUnmet.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isArtistFetching: PropTypes.bool.isRequired,
+ isArtistPopulated: PropTypes.bool.isRequired,
+ selectedFilterKey: PropTypes.string.isRequired,
+ filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ totalRecords: PropTypes.number,
+ isSearchingForCutoffUnmetAlbums: PropTypes.bool.isRequired,
+ isSaving: PropTypes.bool.isRequired,
+ onFilterSelect: PropTypes.func.isRequired,
+ onSearchSelectedPress: PropTypes.func.isRequired,
+ batchToggleCutoffUnmetAlbums: PropTypes.func.isRequired,
+ onSearchAllCutoffUnmetPress: PropTypes.func.isRequired
+};
+
+export default CutoffUnmet;
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js
new file mode 100644
index 000000000..1dd9870d1
--- /dev/null
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetConnector.js
@@ -0,0 +1,191 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
+import { clearTrackFiles, fetchTrackFiles } from 'Store/Actions/trackFileActions';
+import * as wantedActions from 'Store/Actions/wantedActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import CutoffUnmet from './CutoffUnmet';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.wanted.cutoffUnmet,
+ (state) => state.artist,
+ createCommandExecutingSelector(commandNames.CUTOFF_UNMET_ALBUM_SEARCH),
+ (cutoffUnmet, artist, isSearchingForCutoffUnmetAlbums) => {
+
+ return {
+ isArtistFetching: artist.isFetching,
+ isArtistPopulated: artist.isPopulated,
+ isSearchingForCutoffUnmetAlbums,
+ isSaving: cutoffUnmet.items.filter((m) => m.isSaving).length > 1,
+ ...cutoffUnmet
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ ...wantedActions,
+ executeCommand,
+ fetchQueueDetails,
+ clearQueueDetails,
+ fetchTrackFiles,
+ clearTrackFiles
+};
+
+class CutoffUnmetConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ useCurrentPage,
+ fetchCutoffUnmet,
+ gotoCutoffUnmetFirstPage
+ } = this.props;
+
+ registerPagePopulator(this.repopulate, ['trackFileUpdated', 'trackFileDeleted']);
+
+ if (useCurrentPage) {
+ fetchCutoffUnmet();
+ } else {
+ gotoCutoffUnmetFirstPage();
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ if (hasDifferentItems(prevProps.items, this.props.items)) {
+ const albumIds = selectUniqueIds(this.props.items, 'id');
+ const trackFileIds = selectUniqueIds(this.props.items, 'trackFileId');
+
+ this.props.fetchQueueDetails({ albumIds });
+
+ if (trackFileIds.length) {
+ this.props.fetchTrackFiles({ trackFileIds });
+ }
+ }
+ }
+
+ componentWillUnmount() {
+ unregisterPagePopulator(this.repopulate);
+ this.props.clearCutoffUnmet();
+ this.props.clearQueueDetails();
+ this.props.clearTrackFiles();
+ }
+
+ //
+ // Control
+
+ repopulate = () => {
+ this.props.fetchCutoffUnmet();
+ };
+
+ //
+ // Listeners
+
+ onFirstPagePress = () => {
+ this.props.gotoCutoffUnmetFirstPage();
+ };
+
+ onPreviousPagePress = () => {
+ this.props.gotoCutoffUnmetPreviousPage();
+ };
+
+ onNextPagePress = () => {
+ this.props.gotoCutoffUnmetNextPage();
+ };
+
+ onLastPagePress = () => {
+ this.props.gotoCutoffUnmetLastPage();
+ };
+
+ onPageSelect = (page) => {
+ this.props.gotoCutoffUnmetPage({ page });
+ };
+
+ onSortPress = (sortKey) => {
+ this.props.setCutoffUnmetSort({ sortKey });
+ };
+
+ onFilterSelect = (selectedFilterKey) => {
+ this.props.setCutoffUnmetFilter({ selectedFilterKey });
+ };
+
+ onTableOptionChange = (payload) => {
+ this.props.setCutoffUnmetTableOption(payload);
+
+ if (payload.pageSize) {
+ this.props.gotoCutoffUnmetFirstPage();
+ }
+ };
+
+ onSearchSelectedPress = (selected) => {
+ this.props.executeCommand({
+ name: commandNames.ALBUM_SEARCH,
+ albumIds: selected,
+ commandFinished: this.repopulate
+ });
+ };
+
+ onSearchAllCutoffUnmetPress = () => {
+ this.props.executeCommand({
+ name: commandNames.CUTOFF_UNMET_ALBUM_SEARCH,
+ commandFinished: this.repopulate
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+ );
+ }
+
+ if (name === 'albums.title') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'albumType') {
+ return (
+
+ {albumType}
+
+ );
+ }
+
+ if (name === 'releaseDate') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'actions') {
+ return (
+
+ );
+}
+
+CutoffUnmetRow.propTypes = {
+ id: PropTypes.number.isRequired,
+ trackFileId: PropTypes.number,
+ artist: PropTypes.object.isRequired,
+ releaseDate: PropTypes.string.isRequired,
+ foreignAlbumId: PropTypes.string.isRequired,
+ albumType: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ lastSearchTime: PropTypes.string,
+ disambiguation: PropTypes.string,
+ isSelected: PropTypes.bool,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onSelectedChange: PropTypes.func.isRequired
+};
+
+export default CutoffUnmetRow;
diff --git a/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js
new file mode 100644
index 000000000..625055c57
--- /dev/null
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmetRowConnector.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import CutoffUnmetRow from './CutoffUnmetRow';
+
+function createMapStateToProps() {
+ return createSelector(
+ createArtistSelector(),
+ (artist) => {
+ return {
+ artist
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(CutoffUnmetRow);
diff --git a/frontend/src/Wanted/Missing/Missing.js b/frontend/src/Wanted/Missing/Missing.js
new file mode 100644
index 000000000..52bfbc30d
--- /dev/null
+++ b/frontend/src/Wanted/Missing/Missing.js
@@ -0,0 +1,319 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import Alert from 'Components/Alert';
+import LoadingIndicator from 'Components/Loading/LoadingIndicator';
+import FilterMenu from 'Components/Menu/FilterMenu';
+import ConfirmModal from 'Components/Modal/ConfirmModal';
+import PageContent from 'Components/Page/PageContent';
+import PageContentBody from 'Components/Page/PageContentBody';
+import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
+import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
+import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
+import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
+import Table from 'Components/Table/Table';
+import TableBody from 'Components/Table/TableBody';
+import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
+import TablePager from 'Components/Table/TablePager';
+import { align, icons, kinds } from 'Helpers/Props';
+import InteractiveImportModal from 'InteractiveImport/InteractiveImportModal';
+import getFilterValue from 'Utilities/Filter/getFilterValue';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import translate from 'Utilities/String/translate';
+import getSelectedIds from 'Utilities/Table/getSelectedIds';
+import removeOldSelectedState from 'Utilities/Table/removeOldSelectedState';
+import selectAll from 'Utilities/Table/selectAll';
+import toggleSelected from 'Utilities/Table/toggleSelected';
+import MissingRowConnector from './MissingRowConnector';
+
+function getMonitoredValue(props) {
+ const {
+ filters,
+ selectedFilterKey
+ } = props;
+
+ return getFilterValue(filters, selectedFilterKey, 'monitored', false);
+}
+
+class Missing extends Component {
+
+ //
+ // Lifecycle
+
+ constructor(props, context) {
+ super(props, context);
+
+ this.state = {
+ allSelected: false,
+ allUnselected: false,
+ lastToggled: null,
+ selectedState: {},
+ isConfirmSearchAllMissingModalOpen: false,
+ isInteractiveImportModalOpen: false
+ };
+ }
+
+ componentDidUpdate(prevProps) {
+ if (hasDifferentItems(prevProps.items, this.props.items)) {
+ this.setState((state) => {
+ return removeOldSelectedState(state, prevProps.items);
+ });
+ }
+ }
+
+ //
+ // Control
+
+ getSelectedIds = () => {
+ return getSelectedIds(this.state.selectedState);
+ };
+
+ //
+ // Listeners
+
+ onSelectAllChange = ({ value }) => {
+ this.setState(selectAll(this.state.selectedState, value));
+ };
+
+ onSelectedChange = ({ id, value, shiftKey = false }) => {
+ this.setState((state) => {
+ return toggleSelected(state, this.props.items, id, value, shiftKey);
+ });
+ };
+
+ onSearchSelectedPress = () => {
+ const selected = this.getSelectedIds();
+
+ this.props.onSearchSelectedPress(selected);
+ };
+
+ onToggleSelectedPress = () => {
+ const albumIds = this.getSelectedIds();
+
+ this.props.batchToggleMissingAlbums({
+ albumIds,
+ monitored: !getMonitoredValue(this.props)
+ });
+ };
+
+ onSearchAllMissingPress = () => {
+ this.setState({ isConfirmSearchAllMissingModalOpen: true });
+ };
+
+ onSearchAllMissingConfirmed = () => {
+ this.props.onSearchAllMissingPress();
+ this.setState({ isConfirmSearchAllMissingModalOpen: false });
+ };
+
+ onConfirmSearchAllMissingModalClose = () => {
+ this.setState({ isConfirmSearchAllMissingModalOpen: false });
+ };
+
+ onInteractiveImportPress = () => {
+ this.setState({ isInteractiveImportModalOpen: true });
+ };
+
+ onInteractiveImportModalClose = () => {
+ this.setState({ isInteractiveImportModalOpen: false });
+ };
+
+ //
+ // Render
+
+ render() {
+ const {
+ isFetching,
+ isPopulated,
+ error,
+ items,
+ isArtistFetching,
+ isArtistPopulated,
+ selectedFilterKey,
+ filters,
+ columns,
+ totalRecords,
+ isSearchingForMissingAlbums,
+ isSaving,
+ onFilterSelect,
+ ...otherProps
+ } = this.props;
+
+ const {
+ allSelected,
+ allUnselected,
+ selectedState,
+ isConfirmSearchAllMissingModalOpen,
+ isInteractiveImportModalOpen
+ } = this.state;
+
+ const isAllPopulated = isPopulated && isArtistPopulated;
+ const isAnyFetching = isFetching || isArtistFetching;
+
+ const itemsSelected = !!this.getSelectedIds().length;
+ const isShowingMonitored = getMonitoredValue(this.props);
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ isAnyFetching && !isAllPopulated &&
+
+ Error fetching missing items
+
+ }
+
+ {
+ isAllPopulated && !error && !items.length &&
+
+ {translate('NoMissingItems')}
+
+ }
+
+ {
+ isAllPopulated && !error && !!items.length &&
+
+
+
+ {
+ items.map((item) => {
+ return (
+
+
+
+
+
+
+
+ {translate('SearchForAllMissingAlbumsConfirmationCount', { totalRecords })}
+
+
+ {translate('MassSearchCancelWarning')}
+
+
+
+ );
+ }
+}
+
+Missing.propTypes = {
+ isFetching: PropTypes.bool.isRequired,
+ isPopulated: PropTypes.bool.isRequired,
+ error: PropTypes.object,
+ items: PropTypes.arrayOf(PropTypes.object).isRequired,
+ isArtistFetching: PropTypes.bool.isRequired,
+ isArtistPopulated: PropTypes.bool.isRequired,
+ selectedFilterKey: PropTypes.string.isRequired,
+ filters: PropTypes.arrayOf(PropTypes.object).isRequired,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ totalRecords: PropTypes.number,
+ isSearchingForMissingAlbums: PropTypes.bool.isRequired,
+ isSaving: PropTypes.bool.isRequired,
+ onFilterSelect: PropTypes.func.isRequired,
+ onSearchSelectedPress: PropTypes.func.isRequired,
+ batchToggleMissingAlbums: PropTypes.func.isRequired,
+ onSearchAllMissingPress: PropTypes.func.isRequired
+};
+
+export default Missing;
diff --git a/frontend/src/Wanted/Missing/MissingConnector.js b/frontend/src/Wanted/Missing/MissingConnector.js
new file mode 100644
index 000000000..008f1a149
--- /dev/null
+++ b/frontend/src/Wanted/Missing/MissingConnector.js
@@ -0,0 +1,179 @@
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import * as commandNames from 'Commands/commandNames';
+import withCurrentPage from 'Components/withCurrentPage';
+import { executeCommand } from 'Store/Actions/commandActions';
+import { clearQueueDetails, fetchQueueDetails } from 'Store/Actions/queueActions';
+import * as wantedActions from 'Store/Actions/wantedActions';
+import createCommandExecutingSelector from 'Store/Selectors/createCommandExecutingSelector';
+import hasDifferentItems from 'Utilities/Object/hasDifferentItems';
+import selectUniqueIds from 'Utilities/Object/selectUniqueIds';
+import { registerPagePopulator, unregisterPagePopulator } from 'Utilities/pagePopulator';
+import Missing from './Missing';
+
+function createMapStateToProps() {
+ return createSelector(
+ (state) => state.wanted.missing,
+ (state) => state.artist,
+ createCommandExecutingSelector(commandNames.MISSING_ALBUM_SEARCH),
+ (missing, artist, isSearchingForMissingAlbums) => {
+
+ return {
+ isArtistFetching: artist.isFetching,
+ isArtistPopulated: artist.isPopulated,
+ isSearchingForMissingAlbums,
+ isSaving: missing.items.filter((m) => m.isSaving).length > 1,
+ ...missing
+ };
+ }
+ );
+}
+
+const mapDispatchToProps = {
+ ...wantedActions,
+ executeCommand,
+ fetchQueueDetails,
+ clearQueueDetails
+};
+
+class MissingConnector extends Component {
+
+ //
+ // Lifecycle
+
+ componentDidMount() {
+ const {
+ useCurrentPage,
+ fetchMissing,
+ gotoMissingFirstPage
+ } = this.props;
+
+ registerPagePopulator(this.repopulate, ['trackFileUpdated', 'trackFileDeleted']);
+
+ if (useCurrentPage) {
+ fetchMissing();
+ } else {
+ gotoMissingFirstPage();
+ }
+ }
+
+ componentDidUpdate(prevProps) {
+ if (hasDifferentItems(prevProps.items, this.props.items)) {
+ const albumIds = selectUniqueIds(this.props.items, 'id');
+ this.props.fetchQueueDetails({ albumIds });
+ }
+ }
+
+ componentWillUnmount() {
+ unregisterPagePopulator(this.repopulate);
+ this.props.clearMissing();
+ this.props.clearQueueDetails();
+ }
+
+ //
+ // Control
+
+ repopulate = () => {
+ this.props.fetchMissing();
+ };
+
+ //
+ // Listeners
+
+ onFirstPagePress = () => {
+ this.props.gotoMissingFirstPage();
+ };
+
+ onPreviousPagePress = () => {
+ this.props.gotoMissingPreviousPage();
+ };
+
+ onNextPagePress = () => {
+ this.props.gotoMissingNextPage();
+ };
+
+ onLastPagePress = () => {
+ this.props.gotoMissingLastPage();
+ };
+
+ onPageSelect = (page) => {
+ this.props.gotoMissingPage({ page });
+ };
+
+ onSortPress = (sortKey) => {
+ this.props.setMissingSort({ sortKey });
+ };
+
+ onFilterSelect = (selectedFilterKey) => {
+ this.props.setMissingFilter({ selectedFilterKey });
+ };
+
+ onTableOptionChange = (payload) => {
+ this.props.setMissingTableOption(payload);
+
+ if (payload.pageSize) {
+ this.props.gotoMissingFirstPage();
+ }
+ };
+
+ onSearchSelectedPress = (selected) => {
+ this.props.executeCommand({
+ name: commandNames.ALBUM_SEARCH,
+ albumIds: selected,
+ commandFinished: this.repopulate
+ });
+ };
+
+ onSearchAllMissingPress = () => {
+ this.props.executeCommand({
+ name: commandNames.MISSING_ALBUM_SEARCH,
+ commandFinished: this.repopulate
+ });
+ };
+
+ //
+ // Render
+
+ render() {
+ return (
+
+
+
+ );
+ }
+
+ if (name === 'albums.title') {
+ return (
+
+
+ );
+ }
+
+ if (name === 'albumType') {
+ return (
+
+ {albumType}
+
+ );
+ }
+
+ if (name === 'releaseDate') {
+ return (
+
+ );
+}
+
+MissingRow.propTypes = {
+ id: PropTypes.number.isRequired,
+ artist: PropTypes.object.isRequired,
+ releaseDate: PropTypes.string.isRequired,
+ foreignAlbumId: PropTypes.string.isRequired,
+ albumType: PropTypes.string.isRequired,
+ title: PropTypes.string.isRequired,
+ lastSearchTime: PropTypes.string,
+ disambiguation: PropTypes.string,
+ isSelected: PropTypes.bool,
+ columns: PropTypes.arrayOf(PropTypes.object).isRequired,
+ onSelectedChange: PropTypes.func.isRequired
+};
+
+export default MissingRow;
diff --git a/frontend/src/Wanted/Missing/MissingRowConnector.js b/frontend/src/Wanted/Missing/MissingRowConnector.js
new file mode 100644
index 000000000..f0a30d9cd
--- /dev/null
+++ b/frontend/src/Wanted/Missing/MissingRowConnector.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux';
+import { createSelector } from 'reselect';
+import createArtistSelector from 'Store/Selectors/createArtistSelector';
+import MissingRow from './MissingRow';
+
+function createMapStateToProps() {
+ return createSelector(
+ createArtistSelector(),
+ (artist) => {
+ return {
+ artist
+ };
+ }
+ );
+}
+
+export default connect(createMapStateToProps)(MissingRow);
diff --git a/frontend/src/bootstrap.tsx b/frontend/src/bootstrap.tsx
new file mode 100644
index 000000000..9ecf27e0e
--- /dev/null
+++ b/frontend/src/bootstrap.tsx
@@ -0,0 +1,16 @@
+import { createBrowserHistory } from 'history';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import createAppStore from 'Store/createAppStore';
+import App from './App/App';
+
+import 'Diag/ConsoleApi';
+
+export async function bootstrap() {
+ const history = createBrowserHistory();
+ const store = createAppStore(history);
+ const container = document.getElementById('root');
+
+ const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+ root.render(Lidarr
+
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
new file mode 100644
index 000000000..37e780919
--- /dev/null
+++ b/frontend/src/index.ts
@@ -0,0 +1,45 @@
+import './polyfills';
+import 'Styles/globals.css';
+import './index.css';
+
+const initializeUrl = `${
+ window.Lidarr.urlBase
+}/initialize.json?t=${Date.now()}`;
+const response = await fetch(initializeUrl);
+
+window.Lidarr = await response.json();
+
+/* eslint-disable no-undef, @typescript-eslint/ban-ts-comment */
+// @ts-ignore 2304
+__webpack_public_path__ = `${window.Lidarr.urlBase}/`;
+/* eslint-enable no-undef, @typescript-eslint/ban-ts-comment */
+
+const error = console.error;
+
+// Monkey patch console.error to filter out some warnings from React
+// TODO: Remove this after the great TypeScript migration
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function logError(...parameters: any[]) {
+ const filter = parameters.find((parameter) => {
+ return (
+ typeof parameter === 'string' &&
+ (parameter.includes(
+ 'Support for defaultProps will be removed from function components in a future major release'
+ ) ||
+ parameter.includes(
+ 'findDOMNode is deprecated and will be removed in the next major release'
+ ))
+ );
+ });
+
+ if (!filter) {
+ error(...parameters);
+ }
+}
+
+console.error = logError;
+
+const { bootstrap } = await import('./bootstrap');
+
+await bootstrap();
diff --git a/frontend/src/login.html b/frontend/src/login.html
new file mode 100644
index 000000000..24d086959
--- /dev/null
+++ b/frontend/src/login.html
@@ -0,0 +1,348 @@
+
+
+
+ Login - Lidarr
+
+
+
+
+
+
+
+
+
+
+
+
SIGN IN TO CONTINUE
+
+
+
+
+
+
+ ©
+ -
+ Lidarr
+
+
+
oauth landing page
-
Shouldn't see this
-
\ No newline at end of file
+ 
+
+## Backers
+
+Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/Lidarr#backer)
+
+
+
+## Sponsors
+
+Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor](https://opencollective.com/Lidarr#sponsor)
+
+
+
+## Mega Sponsors
+
+
+## JetBrains
+Thank you to [
JetBrains](http://www.jetbrains.com/) for providing us with free licenses to their great tools.
+
+* [
ReSharper](http://www.jetbrains.com/resharper/)
+* [
WebStorm](http://www.jetbrains.com/webstorm/)
+* [
Rider](http://www.jetbrains.com/rider/)
+* [
dotTrace](http://www.jetbrains.com/dottrace/)
+
+## DigitalOcean
+
+This project is also supported by DigitalOcean
+
+
+