Merge pull request #323 from UiPath/fix/humanize-duration-v14.5

[v14.5] fix: humanize duration in different locales

Author: caleniuc

CHANGELOG.md

@@ -1,3 +1,6 @@
+# v14.5.5 (2023-03-31)
+* **fix** humanize duration in different locales
+
 # v14.5.3 (2023-03-03)
 * **grid** add test for tooltip on focus
 * **grid** display title & description tooltip on focus

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-components",
-  "version": "14.5.3",
+  "version": "14.5.5",
   "author": {
     "name": "UiPath Inc",
     "url": "https://uipath.com"
@@ -81,7 +81,6 @@
     "@angular/platform-browser-dynamic": "14.2.12",
     "@angular/router": "14.2.12",
     "clipboard": "2.0.8",
-    "humanize-duration": "3.28.0",
     "lodash-es": "4.17.21",
     "luxon": "3.2.1",
     "moment": "2.29.4",
@@ -112,7 +111,6 @@
     "@types/chalk": "^2.2.0",
     "@types/clipboard": "2.0.7",
     "@types/faker": "4.1.5",
-    "@types/humanize-duration": "3.27.1",
     "@types/jasmine": "3.3.12",
     "@types/jasmine_dom_matchers": "^1.4.4",
     "@types/jasminewd2": "2.0.6",

package.json

@@ -112,7 +112,6 @@ export const resolveTimezone = (options: IDateFormatOptions) => {
  * Optionally, you can opt-in to use Luxon instead of Moment.
  * Depends On:
  * - [luxon](https://www.npmjs.com/package/luxon)
- * - [humanize-duration](https://www.npmjs.com/package/humanize-duration)
  *
  * @export
  */

projects/angular/directives/ui-dateformat/src/ui-dateformat.directive.ts

@@ -1,3 +1,4 @@
+import { Settings } from 'luxon';
 import {
     BehaviorSubject,
     firstValueFrom,
@@ -13,9 +14,8 @@ import {
     waitForAsync,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-
-import { Settings } from 'luxon';
 import { USE_LUXON } from '@uipath/angular/utilities';
+
 import {
     ISecondFormatOptions,
     UiSecondFormatDirective,
@@ -161,4 +161,35 @@ describe('Directive: UiSecondFormat with luxon', () => {
             expect(enTooltip).toBe(jaTooltip);
         });
     });
+
+    describe('humanize in different locales', () => {
+        [
+            {
+                code: 'es-mx',
+                unit: ' segundos',
+            },
+            {
+                code: 'pt-br',
+                unit: ' segundos',
+            },
+            {
+                code: 'zh-cn',
+                unit: '秒钟',
+            },
+        ].forEach(locale => {
+            it(`should humanize in ${locale.code}`, async () => {
+                Settings.defaultLocale = locale.code;
+
+                component.seconds = 40;
+                fixture.detectChanges();
+
+                const text = fixture.debugElement.query(By.directive(UiSecondFormatDirective));
+
+                (options.redraw$ as BehaviorSubject<void>).next();
+
+                fixture.detectChanges();
+                expect(text.nativeElement.innerText).toBe(`40${locale.unit}`);
+            });
+        });
+    });
 });

projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.luxon.spec.ts

@@ -1,5 +1,7 @@
-import humanizeDuration from 'humanize-duration';
-import { Duration } from 'luxon';
+import {
+    Duration,
+    DurationObjectUnits,
+} from 'luxon';
 import moment from 'moment';
 import {
     BehaviorSubject,
@@ -55,7 +57,6 @@ export const UI_SECONDFORMAT_OPTIONS = new InjectionToken<Observable<void>>('UiS
  * Optionally, you can opt-in to use Luxon instead of Moment.
  * Depends On:
  * - [luxon](https://www.npmjs.com/package/luxon)
- * - [humanize-duration](https://www.npmjs.com/package/humanize-duration)
  *
  * @export
  */
@@ -88,6 +89,8 @@ export class UiSecondFormatDirective {
 
     private _seconds$ = new BehaviorSubject<number | null>(null);
 
+    private _units: (keyof DurationObjectUnits)[] = ['years', 'months', 'days', 'hours', 'minutes', 'seconds', 'milliseconds'];
+
     /**
      * @ignore
      */
@@ -134,13 +137,15 @@ export class UiSecondFormatDirective {
             return '';
         }
 
-        return moment.isDuration(duration)
-            ? duration.humanize()
-            : humanizeDuration(duration.toMillis(), {
-                language: duration.locale,
-                // Max number of units is set to 1 to mimic what moment does
-                largest: 1,
-            });
+        if (moment.isDuration(duration)) {
+            return duration.humanize();
+        }
+
+        const rescaledDuration = duration.rescale();
+
+        const largestUnit = this._getDurationLargestUnit(rescaledDuration);
+
+        return Duration.fromObject({ [largestUnit]: rescaledDuration[largestUnit] }).toHuman();
     };
 
     private _mapDurationToTooltip = (duration: Duration | moment.Duration | null) => {
@@ -152,4 +157,8 @@ export class UiSecondFormatDirective {
             ? duration.toISOString()
             : duration.shiftTo('hours', 'minutes', 'seconds').toISO();
     };
+
+    private _getDurationLargestUnit(duration: Duration) {
+        return this._units.find(unit => !!duration[unit]) ?? 'seconds';
+    }
 }

projects/angular/directives/ui-secondformat/src/ui-secondformat.directive.ts

@@ -1,6 +1,6 @@
 {
     "name": "@uipath/angular",
-    "version": "14.5.3",
+    "version": "14.5.5",
     "license": "MIT",
     "author": {
         "name": "UiPath Inc",
@@ -39,7 +39,6 @@
         "@angular/platform-browser-dynamic": ">=14.1.0",
         "@angular/router": ">=14.1.0",
         "clipboard": "^2.0.8",
-        "humanize-duration": "^3.28.0",
         "lodash-es": "^4.17.21",
         "luxon": "^3.2.1",
         "moment": "^2.29.1",