Kamu UI 496 look for a replacement for moment (#528)

* replaces all methods from moment

* removed 'moment-timezone' package

* fixed unit tests

* downgrade 'autoprefixer' package

* changed CHANGELOG.md

* minor changes

* fixed unit tests

* fixed time in the tests

* tried toDate function

* changed timezone

* changed time to the timekeeper

* see timezone

* set timezone for karma

---------

Co-authored-by: Dmitriy Borzenko <[email protected]>

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - Replaced the package for custom svg icons with the MatIconRegistry
 - Replaced the lodash package with custom helpers
+- Replaced the moment.js package with date-fns
 
 
 ## [0.37.0] - 2025-01-17

angular.json

@@ -18,14 +18,12 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "allowedCommonJsDependencies": [
-              "lodash",
               "zen-observable",
               "dagre",
-              "moment-timezone",
               "webcola",
               "fast-json-stable-stringify",
-              "marked",
               "moment",
+              "marked",
               "cron-parser",
               "@tweenjs/tween.js"
             ],

karma.conf.js

@@ -30,4 +30,5 @@ module.exports = function (config) {
     singleRun: false,
     restartOnFileChange: true,
   });
+  process.env.TZ = "Europe/Kyiv";
 };

package.json

@@ -42,14 +42,15 @@
     "@swimlane/ngx-graph": "8.4.0",
     "angular2-multiselect-dropdown": "^10.0.0",
     "apollo-angular": "^5.0.2",
-    "autoprefixer": "^10.4.20",
+    "autoprefixer": "10.4.5",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "clipboard": "^2.0.11",
     "cron-parser": "^4.9.0",
     "d3-scale": "^4.0.2",
+    "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "graphql": "^16.10.0",
-    "moment-timezone": "^0.5.46",
     "monaco-editor": "^0.41.0",
     "ng-multiselect-dropdown": "^1.0.0",
     "ngx-highlightjs": "^7.0.1",

src/app/app.component.ts

@@ -15,7 +15,6 @@ import { AppUIConfigFeatureFlags, LoginMethod } from "./app-config.model";
 import { LoginService } from "./auth/login/login.service";
 import { loadErrorMessages } from "@apollo/client/dev";
 import { isDevMode } from "@angular/core";
-import moment from "moment";
 import { LoggedUserService } from "./auth/logged-user.service";
 import packageFile from "../../package.json";
 import { LocalStorageService } from "./services/local-storage.service";
@@ -70,7 +69,6 @@ export class AppComponent extends BaseComponent implements OnInit {
         }
         this.registerMaterialIcons();
         this.outputAppVersion();
-        this.setMomentOptions();
         this.readConfiguration();
         this.checkView();
 
@@ -92,12 +90,6 @@ export class AppComponent extends BaseComponent implements OnInit {
             });
     }
 
-    private setMomentOptions(): void {
-        moment.relativeTimeThreshold("s", 59);
-        moment.relativeTimeThreshold("m", 59);
-        moment.relativeTimeThreshold("h", 23);
-    }
-
     private readConfiguration(): void {
         this.featureFlags = this.appConfigService.featureFlags;
         this.loginMethods = this.loginService.loginMethods;

src/app/common/app.helpers.spec.ts

@@ -1,6 +1,5 @@
 import { MaybeNullOrUndefined } from "src/app/common/app.types";
 import { fakeAsync, flush, tick } from "@angular/core/testing";
-import moment from "moment";
 import {
     isEqual,
     isNil,
@@ -10,6 +9,7 @@ import {
     requireValue,
 } from "./app.helpers";
 import AppValues from "./app.values";
+import { subDays } from "date-fns";
 
 describe("AppHelpers", () => {
     it("should check non-null requireValue", () => {
@@ -59,7 +59,7 @@ describe("AppHelpers", () => {
 
     it("should convert data to today ", () => {
         const result = momentConvertDateToLocalWithFormat({
-            date: Date.now(),
+            date: new Date(),
             format: AppValues.DISPLAY_DATE_FORMAT,
             isTextDate: true,
         });
@@ -68,7 +68,7 @@ describe("AppHelpers", () => {
 
     it("should convert data to yesterday ", () => {
         const result = momentConvertDateToLocalWithFormat({
-            date: moment().subtract(1, "day").toDate(),
+            date: subDays(new Date(), 1),
             format: AppValues.DISPLAY_DATE_FORMAT,
             isTextDate: true,
         });

src/app/common/app.helpers.ts

@@ -1,10 +1,10 @@
-import moment from "moment";
 import cronParser from "cron-parser";
 
 import { MaybeNull, MaybeNullOrUndefined } from "./app.types";
 import { DataSchema } from "../api/kamu.graphql.interface";
 import { DatasetSchema } from "../interface/dataset.interface";
 import AppValues from "./app.values";
+import { format, isSameDay, subDays } from "date-fns";
 
 export function requireValue<T>(input: MaybeNull<T>) {
     if (input === null) throw Error("value is required!");
@@ -35,25 +35,25 @@ export function isMobileView(): boolean {
  */
 export function momentConvertDateToLocalWithFormat(dateParams: {
     date: Date | number;
-    format?: string;
+    format: string;
     isTextDate?: boolean;
 }): string {
     const stringDate: Date = new Date(dateParams.date);
 
     // solution for all browsers
-    const UTCStringDate: string = moment(stringDate).format("YYYY-MM-DDTHH:mm:ss.sss");
+    const UTCStringDate: string = format(stringDate, "dd MMM yyyy");
     const ISOStringDate: string = new Date(String(UTCStringDate)).toISOString();
 
     if (dateParams.isTextDate) {
-        if (moment(dateParams.date).isSame(moment().subtract(1, "day"), "day")) {
+        if (isSameDay(dateParams.date, subDays(new Date(), 1))) {
             return "Yesterday";
         }
-        if (moment(dateParams.date).isSame(moment(), "day")) {
+        if (isSameDay(dateParams.date, new Date())) {
             return "Today";
         }
     }
 
-    return moment(ISOStringDate).format(dateParams.format);
+    return format(ISOStringDate, dateParams.format);
 }
 
 export function parseCurrentSchema(data: MaybeNullOrUndefined<DataSchema>): MaybeNull<DatasetSchema> {
@@ -70,7 +70,7 @@ export function excludeAgoWord(value: string): string {
 
 export function cronExpressionNextTime(cronExpression: string): string {
     const date = cronParser.parseExpression(cronExpression).next().toDate();
-    return moment(date).format(AppValues.CRON_EXPRESSION_DATE_FORMAT as string);
+    return format(date, AppValues.CRON_EXPRESSION_DATE_FORMAT);
 }
 
 export function convertSecondsToHumanReadableFormat(seconds: number): string {

src/app/common/app.values.ts

@@ -17,11 +17,10 @@ export default class AppValues {
     public static readonly SCHEMA_NAME_PATTERN = /^[a-zA-Z0-9]+[a-zA-Z0-9\s(_)]*$/i;
     public static readonly SPLIT_ARGUMENTS_PATTERN = /[^\s"']+|"([^"]*)"+|'([^']*)'/g;
 
-    public static readonly DISPLAY_DATE_FORMAT = "DD MMM YYYY";
-    public static readonly DISPLAY_TOOLTIP_DATE_FORMAT = "MMM D, YYYY, HH:mm A";
-    public static readonly CRON_EXPRESSION_DATE_FORMAT = "MMM Do YYYY, h:mm:ss A ZZ";
+    public static readonly DISPLAY_DATE_FORMAT = "dd MMM yyyy";
+    public static readonly CRON_EXPRESSION_DATE_FORMAT = "MMM do yyyy pppp";
     public static readonly DISPLAY_FLOW_DATE_FORMAT = "y-MM-dd, h:mm:ss a";
-    public static readonly TIME_FORMAT = "h:mm:ss A";
+    public static readonly TIME_FORMAT = "h:mm:ss a";
     public static readonly UNIMPLEMENTED_MESSAGE = "Feature coming soon";
     public static readonly SAMPLE_DATA_LIMIT = 10;
     public static readonly SQL_QUERY_LIMIT = 50;

src/app/common/components/flows-table/flows-table.helpers.mock.ts

@@ -418,24 +418,24 @@ export const mockFlowSummaryDataFragmentTooltipAndDurationText: FlowSummaryDataF
 
 export const durationBlockTextResults: string[] = [
     "waiting for 58 minutes ",
-    "wake up time: in an hour",
+    "wake up time: in 1 hour",
     "wake up time: in 2 hours",
-    "deadline time: in an hour",
+    "deadline time: in 1 hour",
     "running for 48 minutes ",
-    "finished in an hour",
+    "finished in 1 hour",
     "aborted 2 hours ago",
     "failed 2 hours ago",
 ];
 
 export const tooltipTextResults: string[] = [
-    "waiting for: Mar 14th 2024, 12:24:29 PM +0200",
-    "Wake up time: Mar 14th 2024, 2:24:29 PM +0200",
-    "Wake up time: Mar 14th 2024, 3:24:29 PM +0200",
-    "Deadline time: Mar 14th 2024, 2:24:29 PM +0200",
-    "Start running time: Mar 14th 2024, 12:34:29 PM +0200",
-    "Completed time: Mar 14th 2024, 2:24:29 PM +0200",
-    "Aborted time: Mar 14th 2024, 11:24:29 AM +0200",
-    "Start running time: Mar 14th 2024, 11:24:29 AM +0200",
+    "waiting for: Mar 14th 2024 12:24:29 PM GMT+02:00",
+    "Wake up time: Mar 14th 2024 2:24:29 PM GMT+02:00",
+    "Wake up time: Mar 14th 2024 3:24:29 PM GMT+02:00",
+    "Deadline time: Mar 14th 2024 2:24:29 PM GMT+02:00",
+    "Start running time: Mar 14th 2024 12:34:29 PM GMT+02:00",
+    "Completed time: Mar 14th 2024 2:24:29 PM GMT+02:00",
+    "Aborted time: Mar 14th 2024 11:24:29 AM GMT+02:00",
+    "Start running time: Mar 14th 2024 11:24:29 AM GMT+02:00",
 ];
 
 export const mockDatasets: DatasetListFlowsDataFragment[] = [

src/app/common/components/flows-table/flows-table.helpers.spec.ts

@@ -19,20 +19,15 @@ import {
     tooltipTextResults,
 } from "./flows-table.helpers.mock";
 import timekeeper from "timekeeper";
-import moment from "moment";
 import { mockDatasetMainDataId } from "src/app/search/mock.data";
 
 describe("DatasetFlowTableHelpers", () => {
     beforeAll(() => {
         timekeeper.freeze("2024-03-14T11:22:29+00:00");
-        moment.relativeTimeThreshold("s", 59);
-        moment.relativeTimeThreshold("m", 59);
-        moment.relativeTimeThreshold("h", 23);
-        moment.tz.setDefault("Europe/Kiev");
     });
 
     afterAll(() => {
-        moment.tz.setDefault();
+        timekeeper.reset();
     });
 
     it("should check waiting block text with FlowStartConditionThrottling typename", () => {