New: Rework List sync interval logic

* New: Rework List sync interval logic

(cherry picked from commit c522cd120d08757e7e43c2348be4d7f05a254fac)

* Minor alignment with Sonarr

* Remove ListUpdateInterval

---------

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

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

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

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

@@ -2,6 +2,7 @@
 // Please do not change this file!
 interface CssExports {
   'deleteButton': string;
+  'message': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

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

@@ -14,6 +14,7 @@ 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 formatShortTimeSpan from 'Utilities/Date/formatShortTimeSpan';
 import translate from 'Utilities/String/translate';
 import styles from './EditImportListModalContent.css';
 
@@ -42,6 +43,7 @@ function EditImportListModalContent(props) {
     name,
     enabled,
     enableAuto,
+    minRefreshInterval,
     monitor,
     minimumAvailability,
     qualityProfileId,
@@ -85,6 +87,14 @@ function EditImportListModalContent(props) {
                     {message.value.message}
                   </Alert>
               }
+
+              <Alert
+                kind={kinds.INFO}
+                className={styles.message}
+              >
+                {translate('ListWillRefreshEveryInterp', [formatShortTimeSpan(minRefreshInterval.value)])}
+              </Alert>
+
               <FormGroup>
                 <FormLabel>{translate('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 translate from 'Utilities/String/translate';
 import EditImportListModalConnector from './EditImportListModalConnector';
 import styles from './ImportList.css';
@@ -56,7 +57,8 @@ class ImportList extends Component {
       id,
       name,
       enabled,
-      enableAuto
+      enableAuto,
+      minRefreshInterval
     } = this.props;
 
     return (
@@ -96,6 +98,12 @@ class ImportList extends Component {
           }
         </div>
 
+        <div className={styles.enabled}>
+          <Label kind={kinds.INFO} title='List Refresh Interval'>
+            {`${translate('Refresh')}: ${formatShortTimeSpan(minRefreshInterval)}`}
+          </Label>
+        </div>
+
         <EditImportListModalConnector
           id={id}
           isOpen={this.state.isEditImportListModalOpen}
@@ -122,6 +130,7 @@ ImportList.propTypes = {
   name: PropTypes.string.isRequired,
   enabled: PropTypes.bool.isRequired,
   enableAuto: PropTypes.bool.isRequired,
+  minRefreshInterval: PropTypes.string.isRequired,
   onConfirmDeleteImportList: PropTypes.func.isRequired
 };
 

frontend/src/Settings/ImportLists/Options/ImportListOptions.js

@@ -46,23 +46,6 @@ function ImportListOptions(props) {
         {
           hasSettings && !isFetching && !error &&
             <Form>
-              <FormGroup
-                advancedSettings={advancedSettings}
-                isAdvanced={true}
-              >
-                <FormLabel>{translate('ListUpdateInterval')}</FormLabel>
-
-                <FormInputGroup
-                  type={inputTypes.NUMBER}
-                  name="importListSyncInterval"
-                  min={6}
-                  unit="hours"
-                  helpText={translate('ImportListSyncIntervalHelpText')}
-                  onChange={onInputChange}
-                  {...settings.importListSyncInterval}
-                />
-              </FormGroup>
-
               <FormGroup
                 advancedSettings={advancedSettings}
                 isAdvanced={true}

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;