New: Rework List sync interval logic

* New: Rework List sync interval logic

Fixes #5011

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.css

@@ -7,3 +7,9 @@
 .labelIcon {
   margin-left: 8px;
 }
+
+.message {
+  composes: alert from '~Components/Alert.css';
+
+  margin-bottom: 30px;
+}

frontend/src/Settings/ImportLists/ImportLists/EditImportListModalContent.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import SeriesMonitoringOptionsPopoverContent from 'AddSeries/SeriesMonitoringOptionsPopoverContent';
 import SeriesTypePopoverContent from 'AddSeries/SeriesTypePopoverContent';
+import Alert from 'Components/Alert';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';
@@ -17,6 +18,7 @@ import ModalFooter from 'Components/Modal/ModalFooter';
 import ModalHeader from 'Components/Modal/ModalHeader';
 import Popover from 'Components/Tooltip/Popover';
 import { icons, inputTypes, kinds, tooltipPositions } from 'Helpers/Props';
+import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
 import styles from './EditImportListModalContent.css';
 
 function EditImportListModalContent(props) {
@@ -42,6 +44,7 @@ function EditImportListModalContent(props) {
     id,
     name,
     enableAutomaticAdd,
+    minRefreshInterval,
     shouldMonitor,
     rootFolderPath,
     qualityProfileId,
@@ -73,6 +76,14 @@ function EditImportListModalContent(props) {
         {
           !isFetching && !error ?
             <Form {...otherProps}>
+
+              <Alert
+                kind={kinds.INFO}
+                className={styles.message}
+              >
+                {`List will refresh every ${formatShortTimeSpan(minRefreshInterval.value)}`}
+              </Alert>
+
               <FormGroup>
                 <FormLabel>Name</FormLabel>
 

frontend/src/Settings/ImportLists/ImportLists/ImportList.js

@@ -4,6 +4,7 @@ import Card from 'Components/Card';
 import Label from 'Components/Label';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
 import { kinds } from 'Helpers/Props';
+import formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
 import EditImportListModalConnector from './EditImportListModalConnector';
 import styles from './ImportList.css';
 
@@ -54,7 +55,8 @@ class ImportList extends Component {
     const {
       id,
       name,
-      enableAutomaticAdd
+      enableAutomaticAdd,
+      minRefreshInterval
     } = this.props;
 
     return (
@@ -77,6 +79,12 @@ class ImportList extends Component {
 
         </div>
 
+        <div className={styles.enabled}>
+          <Label kind={kinds.INFO} title='List Refresh Interval'>
+            {`Refresh: ${formatShortTimeSpan(minRefreshInterval)}`}
+          </Label>
+        </div>
+
         <EditImportListModalConnector
           id={id}
           isOpen={this.state.isEditImportListModalOpen}
@@ -102,6 +110,7 @@ ImportList.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   enableAutomaticAdd: PropTypes.bool.isRequired,
+  minRefreshInterval: PropTypes.string.isRequired,
   onConfirmDeleteImportList: PropTypes.func.isRequired
 };
 

frontend/src/Utilities/Date/formatShortTimeSpan.js

@@ -0,0 +1,25 @@
+import moment from 'moment';
+
+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 `${hours} hour(s)`;
+  }
+
+  if (minutes > 0) {
+    return `${minutes} minute(s)`;
+  }
+
+  return `${seconds} second(s)`;
+}
+
+export default formatShortTimeSpan;