webpack/scenes/ContentViews/Details/Repositories/LastSync.js in katello-4.3.0.rc1 vs webpack/scenes/ContentViews/Details/Repositories/LastSync.js in katello-4.3.0.rc2

@@ -1,12 +1,23 @@
 import React, { Fragment } from 'react';
-import { CheckCircleIcon, ExclamationTriangleIcon, ExclamationCircleIcon, InProgressIcon } from '@patternfly/react-icons';
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  ExclamationCircleIcon,
+  InProgressIcon,
+} from '@patternfly/react-icons';
+import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+
 import { foremanUrl } from 'foremanReact/common/helpers';
 import PropTypes from 'prop-types';
+import { translate as __ } from 'foremanReact/common/I18n';
 import InactiveText from '../../components/InactiveText';
+import { makeReadableDate } from '../../../../utils/dateTimeHelpers';
 
-const LastSync = ({ lastSyncWords, lastSync, emptyMessage }) => {
+const LastSync = ({
+  lastSyncWords, lastSync, emptyMessage, startedAt,
+}) => {
   if (lastSync && lastSyncWords) {
     let Icon;
     let color = 'black';
     const { result, id } = lastSync;
 
@@ -24,30 +35,57 @@
       color = 'blue';
     } else {
       Icon = Fragment;
     }
 
+    if (startedAt) {
+      return (
+        <Tooltip
+          position={TooltipPosition.top}
+          content={makeReadableDate(startedAt)}
+        >
+          <a
+            href={foremanUrl(`/foreman_tasks/tasks/${id}/`)}
+            style={{
+              display: 'inline-flex', alignItems: 'center', margin: 0,
+            }}
+          >
+            <Icon style={{ color, marginRight: '5px' }} />
+            <span>{lastSyncWords}{__(' ago')}</span>
+          </a >
+        </Tooltip >
+      );
+    }
+
     return (
-      <a href={foremanUrl(`/foreman_tasks/tasks/${id}/`)}>
-        <Icon style={{ color }} />&nbsp;{`${lastSyncWords} ago`}
-      </a>
-    );
+      <a
+        href={foremanUrl(`/foreman_tasks/tasks/${id}/`)}
+        style={{
+          display: 'flex', alignItems: 'center',
+        }}
+      >
+        <Icon style={{ color, marginRight: '5px' }} />
+        <span>{lastSyncWords}{__(' ago')}</span>
+      </a >);
   }
+
   return <InactiveText text={emptyMessage} />;
 };
 
 LastSync.propTypes = {
+  startedAt: PropTypes.string,
   lastSyncWords: PropTypes.string,
   lastSync: PropTypes.shape({
     id: PropTypes.string, // API returns string
     result: PropTypes.string,
   }),
   emptyMessage: PropTypes.string,
 };
 
 LastSync.defaultProps = {
-  lastSyncWords: null,
-  lastSync: null,
+  startedAt: undefined,
+  lastSyncWords: undefined,
+  lastSync: undefined,
   emptyMessage: 'Not Synced',
 };
 
 export default LastSync;