New: Show previously installed version in Updates UI

Co-Authored-By: Taloth <Taloth@users.noreply.github.com>

frontend/src/System/Updates/Updates.js

@@ -10,6 +10,7 @@ import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import { icons, kinds } from 'Helpers/Props';
 import formatDate from 'Utilities/Date/formatDate';
+import formatDateTime from 'Utilities/Date/formatDateTime';
 import translate from 'Utilities/String/translate';
 import UpdateChanges from './UpdateChanges';
 import styles from './Updates.css';
@@ -32,6 +33,8 @@ class Updates extends Component {
       isDocker,
       updateMechanismMessage,
       shortDateFormat,
+      longDateFormat,
+      timeFormat,
       onInstallLatestPress
     } = this.props;
 
@@ -138,7 +141,12 @@ class Updates extends Component {
                         <div className={styles.info}>
                           <div className={styles.version}>{update.version}</div>
                           <div className={styles.space}>&mdash;</div>
-                          <div className={styles.date}>{formatDate(update.releaseDate, shortDateFormat)}</div>
+                          <div
+                            className={styles.date}
+                            title={formatDateTime(update.releaseDate, longDateFormat, timeFormat)}
+                          >
+                            {formatDate(update.releaseDate, shortDateFormat)}
+                          </div>
 
                           {
                             update.branch === 'master' ?
@@ -155,11 +163,24 @@ class Updates extends Component {
                               <Label
                                 className={styles.label}
                                 kind={kinds.SUCCESS}
+                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
                               >
                                 Currently Installed
                               </Label> :
                               null
                           }
+
+                          {
+                            update.version !== currentVersion && update.installedOn ?
+                              <Label
+                                className={styles.label}
+                                kind={kinds.INVERSE}
+                                title={formatDateTime(update.installedOn, longDateFormat, timeFormat)}
+                              >
+                                Previously Installed
+                              </Label> :
+                              null
+                          }
                         </div>
 
                         {
@@ -222,6 +243,8 @@ Updates.propTypes = {
   updateMechanism: PropTypes.string,
   updateMechanismMessage: PropTypes.string,
   shortDateFormat: PropTypes.string.isRequired,
+  longDateFormat: PropTypes.string.isRequired,
+  timeFormat: PropTypes.string.isRequired,
   onInstallLatestPress: PropTypes.func.isRequired
 };
 

frontend/src/System/Updates/UpdatesConnector.js

@@ -48,7 +48,9 @@ function createMapStateToProps() {
         isDocker: systemStatus.isDocker,
         updateMechanism: generalSettings.item.updateMechanism,
         updateMechanismMessage: status.packageUpdateMechanismMessage,
-        shortDateFormat: uiSettings.shortDateFormat
+        shortDateFormat: uiSettings.shortDateFormat,
+        longDateFormat: uiSettings.longDateFormat,
+        timeFormat: uiSettings.timeFormat
       };
     }
   );