New: Show previously installed version in Updates UI

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

frontend/src/App/AppUpdatedModalContent.js

@@ -11,9 +11,43 @@ import UpdateChanges from 'System/Updates/UpdateChanges';
 import translate from 'Utilities/String/translate';
 import styles from './AppUpdatedModalContent.css';
 
+function mergeUpdates(items, version, prevVersion) {
+  let installedIndex = items.findIndex((u) => u.version === version);
+  let installedPreviouslyIndex = items.findIndex((u) => u.version === prevVersion);
+
+  if (installedIndex === -1) {
+    installedIndex = 0;
+  }
+
+  if (installedPreviouslyIndex === -1) {
+    installedPreviouslyIndex = items.length;
+  } else if (installedPreviouslyIndex === installedIndex && items.size()) {
+    installedPreviouslyIndex += 1;
+  }
+
+  const appliedUpdates = items.slice(installedIndex, installedPreviouslyIndex);
+
+  if (!appliedUpdates.length) {
+    return null;
+  }
+
+  const appliedChanges = { new: [], fixed: [] };
+  appliedUpdates.forEach((u) => {
+    if (u.changes) {
+      appliedChanges.new.push(... u.changes.new);
+      appliedChanges.fixed.push(... u.changes.fixed);
+    }
+  });
+
+  const mergedUpdate = Object.assign({}, appliedUpdates[0], { changes: appliedChanges });
+
+  return mergedUpdate;
+}
+
 function AppUpdatedModalContent(props) {
   const {
     version,
+    prevVersion,
     isPopulated,
     error,
     items,
@@ -21,7 +55,7 @@ function AppUpdatedModalContent(props) {
     onModalClose
   } = props;
 
-  const update = items[0];
+  const update = mergeUpdates(items, version, prevVersion);
 
   return (
     <ModalContent onModalClose={onModalClose}>
@@ -89,6 +123,7 @@ function AppUpdatedModalContent(props) {
 
 AppUpdatedModalContent.propTypes = {
   version: PropTypes.string.isRequired,
+  prevVersion: PropTypes.string,
   isPopulated: PropTypes.bool.isRequired,
   error: PropTypes.object,
   items: PropTypes.arrayOf(PropTypes.object).isRequired,

frontend/src/App/AppUpdatedModalContentConnector.js

@@ -8,8 +8,9 @@ import AppUpdatedModalContent from './AppUpdatedModalContent';
 function createMapStateToProps() {
   return createSelector(
     (state) => state.app.version,
+    (state) => state.app.prevVersion,
     (state) => state.system.updates,
-    (version, updates) => {
+    (version, prevVersion, updates) => {
       const {
         isPopulated,
         error,
@@ -18,6 +19,7 @@ function createMapStateToProps() {
 
       return {
         version,
+        prevVersion,
         isPopulated,
         error,
         items

frontend/src/Store/Actions/appActions.js

@@ -187,6 +187,9 @@ export const reducers = createHandleActions({
     };
 
     if (state.version !== version) {
+      if (!state.prevVersion) {
+        newState.prevVersion = state.version;
+      }
       newState.isUpdated = true;
     }
 

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;
 
@@ -137,7 +140,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' ?
@@ -154,11 +162,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>
 
                         {
@@ -221,6 +242,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
       };
     }
   );