Fix last and next run date display, and prevent from editing destination target

Author: abrilgzz

UI/web-app/src/pages/JobDetails/JobDetails.base.tsx

@@ -515,12 +515,27 @@ const MembershipConfiguration: React.FunctionComponent<IContentProps> = (
   const hoursMessage: React.CSSProperties = {
     fontWeight: 100
   }
-
   const SQL_MIN_DATE = new Date('1753-01-01T00:00:00');
+  
+  function splitDateString(value: string) {
+    const isEmpty = value === '';
+    if (isEmpty) {
+      return ['-', ''];
+    }
+
+    const spaceIndex = value.indexOf(' ');
+    const datePart = value.substring(0, spaceIndex);
+    const hoursPart = value.substring(spaceIndex + 1);
 
-  const lastRunFormatted = formatLastRunTime(job.lastSuccessfulRunTime, job.period);
-  const nextRunFormatted = formatNextRunTime(job.estimatedNextRunTime, job.period, job.enabledOrNot);
+    const parsedDate = new Date(datePart);
+
+    const isMinDate = parsedDate <= SQL_MIN_DATE;
+
+    return [isMinDate ? '' : datePart, isMinDate ? '-' : hoursPart];
+  }
 
+  const lastRunDetails = splitDateString(job.lastSuccessfulRunTime);
+  const nextRunDetails = splitDateString(job.estimatedNextRunTime);
 
   return (
     <Stack
@@ -565,10 +580,10 @@ const MembershipConfiguration: React.FunctionComponent<IContentProps> = (
         />
         <div className={classNames.itemData}>
           <Text variant="medium" block>
-            {lastRunFormatted[0]}
+            {lastRunDetails[0]}
           </Text>
           <Text style={hoursMessage} variant="medium" block>
-            {lastRunFormatted[1]}
+            {lastRunDetails[1]}
           </Text>
         </div>
       </Stack.Item>
@@ -580,10 +595,10 @@ const MembershipConfiguration: React.FunctionComponent<IContentProps> = (
         />
         <div className={classNames.itemData}>
           <Text variant="medium" block>
-            {nextRunFormatted[0]}
+            {nextRunDetails[0]}
           </Text>
           <Text style={hoursMessage} variant="medium" block>
-            {nextRunFormatted[1]}
+            {nextRunDetails[1]}
           </Text>
         </div>
       </Stack.Item>

UI/web-app/src/pages/ManageMembership/ManageMembership.base.tsx

@@ -318,7 +318,11 @@ export const ManageMembershipBase: React.FunctionComponent<IManageMembershipProp
             <></> :
             <div className={classNames.bottomContainer}>
               {currentStep !== OnboardingSteps.SelectDestination && <div className={classNames.backButtonContainer}>
-                <DefaultButton text={strings.back} onClick={onBackStepClick} />
+                <DefaultButton 
+                  text={strings.back}
+                  onClick={onBackStepClick}
+                  disabled={isEditingExistingJob && currentStep === OnboardingSteps.RunConfiguration}
+                />
               </div>}
               <div className={classNames.circlesContainer}>
                 {Array.from({ length: 4 }, (_, index) => (

UI/web-app/src/services/localization/i18n/locales/en/translations.ts

@@ -350,7 +350,7 @@ export const strings: IStrings = {
   or: 'Or',
   and: 'And',
   privacyPolicy: 'Privacy Policy',
-  hoursAgo: 'hrs ago',
-  hoursLeft: 'hrs left',
+  hoursAgo: '{0}, {1} hrs ago',
+  hoursLeft: '{0}, {1} hrs left',
   pendingInitialSync: 'Pending initial sync',
 };

UI/web-app/src/services/localization/i18n/locales/es/translations.ts

@@ -354,7 +354,7 @@ export const strings: IStrings = {
   or: 'O',
   and: 'Y',
   privacyPolicy: 'Política de Privacidad',
-  hoursAgo: 'horas atrás',
-  hoursLeft: 'horas restantes',
+  hoursAgo: '{0}, {1} horas atrás',
+  hoursLeft: '{0}, {1} horas restantes',
   pendingInitialSync: 'En espera de correr el primer sync',
 };

UI/web-app/src/store/jobs.api.tsx

@@ -13,6 +13,9 @@ import {
   PeoplePickerPersona
 } from '../models';
 import { formatLastRunTime, formatNextRunTime } from '../utils/dateUtils';
+import { format } from '@fluentui/react';
+import { strings } from '../services/localization/i18n/locales/en/translations';
+import moment from 'moment';
 
 export interface JobsResponse {
   jobs: Job[];
@@ -30,8 +33,23 @@ export const fetchJobs = createAsyncThunk<Page<Job>, PagingOptions | undefined,
       const mapped = jobsPage.items.map((index) => {
         index['enabledOrNot'] =
         index['status'] === SyncStatus.Idle || index['status'] === SyncStatus.InProgress ? true : false;
-        index['lastSuccessfulRunTime'] = formatLastRunTime(index['lastSuccessfulRunTime'], index['period']).join(' ');
-        index['estimatedNextRunTime'] = formatNextRunTime(index['estimatedNextRunTime'], index['period'], index['enabledOrNot']).join(' ');
+        const lastRunTime = formatLastRunTime(index['lastSuccessfulRunTime']);
+        const estimatedNextRunTime = formatNextRunTime(index['estimatedNextRunTime'], index['period'], index['enabledOrNot']);
+        const SQLMinDateMoment = moment.utc('1753-01-01T00:00:00');
+        
+        if(lastRunTime[0] === SQLMinDateMoment.toLocaleString()) { // Jobs that haven't run yet
+          index['lastSuccessfulRunTime'] = "Pending initial sync";
+          index['estimatedNextRunTime'] = "Pending initial sync";
+        }
+        else if (estimatedNextRunTime[0] === "-") { // Disabled jobs
+          index['lastSuccessfulRunTime'] = `${format(strings.hoursAgo, lastRunTime[0], lastRunTime[1])}`;
+          index['estimatedNextRunTime'] = "-";
+        }
+        else {
+          index['lastSuccessfulRunTime'] = `${format(strings.hoursAgo, lastRunTime[0], lastRunTime[1])}`;
+          index['estimatedNextRunTime'] = `${format(strings.hoursLeft, estimatedNextRunTime[0], estimatedNextRunTime[1])}`;
+        }
+        
         index['arrow'] = '';
 
         return index;

UI/web-app/src/utils/dateUtils.ts

@@ -2,46 +2,37 @@
 // Licensed under the MIT license.
 
 import moment from 'moment';
-import { useStrings } from '../store/hooks';
+const SQLMinDateMoment = moment.utc('1753-01-01T00:00:00');
 
-export function formatLastRunTime(lastSuccessfulRunTime: string, period: number): [string, number] {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const strings = useStrings();
-    const currentTime = moment.utc();
+export function formatLastRunTime(lastSuccessfulRunTime: string): [string, number] {
     const lastRunMoment = moment.utc(lastSuccessfulRunTime);
-    const SQL_MIN_DATE = new Date('1753-01-01T00:00:00');
-    const hoursAgo = currentTime.diff(lastRunMoment, 'hours');
-    const formattedDate = lastRunMoment.local().format('MM/DD/YYYY');
 
-    if (lastRunMoment.isSame(SQL_MIN_DATE)) {
-        return [strings.pendingInitialSync, 0];  
-    }
+    const lastRunTime = new Date(lastSuccessfulRunTime);
+    const today = new Date();
+    const hoursAgo = Math.round(Math.abs(today.valueOf() - lastRunTime.valueOf()) / 36e5);
+
+    const formattedDate = lastRunMoment.format('MM/DD/YYYY');
 
-    if (hoursAgo > period) {
-        return [formattedDate, period];
-    } else {
-        return [formattedDate, hoursAgo];
+    if (lastRunMoment.isSame(SQLMinDateMoment, 'day')) {
+        return [SQLMinDateMoment.toLocaleString(), 0];
     }
-}
 
+    return [formattedDate, hoursAgo];
+}
 
 export function formatNextRunTime(lastSuccessfulRunTime: string, period: number, enabled: boolean): [string, number] {
-    const currentTime = moment.utc();
     let lastRunMoment = moment.utc(lastSuccessfulRunTime);
     let estimatedNextRunTime = lastRunMoment.add(period, 'hours');
 
-    // Adjust the next run time until it is in the future
-    while (estimatedNextRunTime.isBefore(currentTime) && enabled) {
-        lastRunMoment = estimatedNextRunTime; // Set new base for calculation
-        estimatedNextRunTime = lastRunMoment.add(period, 'hours');
-    }
-
     const formattedDate: string = estimatedNextRunTime.local().format('MM/DD/YYYY');
-    const hoursLeft = Math.abs(currentTime.diff(estimatedNextRunTime, 'hours'));
+    const lastRunTime = new Date(lastSuccessfulRunTime);
+    const today = new Date();
+    const hoursLeft = Math.round(Math.abs(today.valueOf() - lastRunTime.valueOf()) / 36e5);
 
     if (!enabled) {
-        return ['', 0];
-    } else {
+        return ['-', 0];
+    }
+    else {
         return [formattedDate, hoursLeft];
     }
-}
+}