New: Rework List sync interval logic

(cherry picked from commit c522cd120d08757e7e43c2348be4d7f05a254fac)

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

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

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

@@ -20,6 +20,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 translate from 'Utilities/String/translate';
 import styles from './EditImportListModalContent.css';
 
@@ -74,6 +75,7 @@ function EditImportListModalContent(props) {
     id,
     name,
     enableAutomaticAdd,
+    minRefreshInterval,
     shouldMonitor,
     shouldMonitorExisting,
     shouldSearch,
@@ -118,6 +120,13 @@ function EditImportListModalContent(props) {
                   </Alert>
               }
 
+              <Alert
+                kind={kinds.INFO}
+                className={styles.message}
+              >
+                {translate('ListWillRefreshEveryInterp', [formatShortTimeSpan(minRefreshInterval.value)])}
+              </Alert>
+
               <FieldSet legend={translate('ImportListSettings')} >
                 <FormGroup>
                   <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,6 +57,7 @@ class ImportList extends Component {
       id,
       name,
       enableAutomaticAdd,
+      minRefreshInterval,
       shouldSearch
     } = this.props;
 
@@ -85,6 +87,15 @@ class ImportList extends Component {
           }
         </div>
 
+        <div className={styles.enabled}>
+          <Label
+            kind={kinds.INFO}
+            title={translate('ListRefreshInterval')}
+          >
+            {`${translate('Refresh')}: ${formatShortTimeSpan(minRefreshInterval)}`}
+          </Label>
+        </div>
+
         <EditImportListModalConnector
           id={id}
           isOpen={this.state.isEditImportListModalOpen}
@@ -110,6 +121,7 @@ ImportList.propTypes = {
   id: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   enableAutomaticAdd: PropTypes.bool.isRequired,
+  minRefreshInterval: PropTypes.string.isRequired,
   shouldSearch: PropTypes.bool.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;