feat(UI-1447): replace momentjs to dayjs

package.json

@@ -135,7 +135,6 @@
 		"husky": "^9.1.7",
 		"i18next": "^24.2.0",
 		"lint-staged": "^15.4.3",
-		"moment": "^2.30.1",
 		"openai": "^4.77.0",
 		"postcss": "^8.4.49",
 		"rollup": "^4.34.6",

src/components/organisms/dashboard/projectsTableRow.tsx

@@ -1,6 +1,6 @@
 import React, { MouseEvent, KeyboardEvent } from "react";
 
-import moment from "moment";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 
 import { dateTimeFormat } from "@src/constants";
@@ -89,7 +89,7 @@ export const DashboardProjectsTableRow = ({
 			</Td>
 
 			<Td className="hidden w-2/6 sm:flex">
-				{lastDeployed ? moment(lastDeployed).local().format(dateTimeFormat) : t("never")}
+				{lastDeployed ? dayjs(lastDeployed).format(dateTimeFormat) : t("never")}
 			</Td>
 
 			<Td className="w-1/3 sm:w-1/6">

src/components/organisms/deployments/sessions/table/tableRow.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, memo, useState } from "react";
 
-import moment from "moment";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 
 import { SessionState } from "@enums";
@@ -89,7 +89,7 @@ export const SessionsTableRow = memo(
 				onClick={() => openSession(session.sessionId)}
 				style={{ ...style }}
 			>
-				<Td className="w-1/5 min-w-36 pl-4">{moment(session.createdAt).local().format(dateTimeFormat)}</Td>
+				<Td className="w-1/5 min-w-36 pl-4">{dayjs(session.createdAt).format(dateTimeFormat)}</Td>
 
 				<Td className="w-1/5 min-w-20">
 					<SessionsTableState sessionState={session.state} />

src/components/organisms/deployments/sessions/viewer.tsx

@@ -2,7 +2,8 @@ import React, { useCallback, useEffect, useState } from "react";
 
 import JsonView from "@uiw/react-json-view";
 import { githubDarkTheme } from "@uiw/react-json-view/githubDark";
-import moment from "moment";
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
 import { useTranslation } from "react-i18next";
 import { Outlet, useLocation, useNavigate, useParams } from "react-router-dom";
 import ReactTimeAgo from "react-time-ago";
@@ -31,6 +32,8 @@ import { SessionsTableState } from "@components/organisms/deployments";
 
 import { DownloadIcon, ArrowRightIcon, CircleMinusIcon, CirclePlusIcon, CopyIcon } from "@assets/image/icons";
 
+dayjs.extend(duration);
+
 export const SessionViewer = () => {
 	const { deploymentId, projectId, sessionId } = useParams<{
 		deploymentId: string;
@@ -104,7 +107,7 @@ export const SessionViewer = () => {
 				if (!logContent) return;
 				const blob = new Blob([logContent], { type: "text/plain" });
 				const url = URL.createObjectURL(blob);
-				const dateTime = moment().local().format(dateTimeFormat);
+				const dateTime = dayjs().format(dateTimeFormat);
 				const fileName = `${sessionInfo?.sourceType?.toLowerCase() || "session"}-${dateTime}.log`;
 
 				const link = Object.assign(document.createElement("a"), {
@@ -246,7 +249,7 @@ export const SessionViewer = () => {
 	);
 
 	const formatTimeDifference = useCallback((endDate: Date, startDate: Date) => {
-		const duration = moment.duration(moment(endDate).diff(moment(startDate)));
+		const duration = dayjs.duration(dayjs(endDate).diff(dayjs(startDate)));
 		const months = Math.floor(duration.asMonths());
 		const weeks = Math.floor(duration.asWeeks());
 		const days = Math.floor(duration.asDays());
@@ -291,11 +294,11 @@ export const SessionViewer = () => {
 							Time:
 						</div>
 						<div className="flex flex-row items-center">
-							{moment(sessionInfo.createdAt).local().format(dateTimeFormat)}
+							{dayjs(sessionInfo.createdAt).format(dateTimeFormat)}
 							<IconSvg className="mx-2 fill-white" size="sm" src={ArrowRightIcon} />
 							{sessionInfo.state === SessionState.completed ||
 							sessionInfo.state === SessionState.error ? (
-								<div title="End Time">{moment(sessionInfo.updatedAt).local().format(timeFormat)}</div>
+								<div title="End Time">{dayjs(sessionInfo.updatedAt).format(timeFormat)}</div>
 							) : (
 								<SessionsTableState sessionState={sessionInfo.state} />
 							)}

src/components/organisms/deployments/tableContent.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from "react";
 
-import moment from "moment";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -203,9 +203,7 @@ export const DeploymentsTableContent = ({
 							key={deploymentId}
 							onClick={() => goToDeploymentSessions(deploymentId)}
 						>
-							<Td className="w-1/8 cursor-pointer pl-4">
-								{moment(createdAt).local().format(dateTimeFormat)}
-							</Td>
+							<Td className="w-1/8 cursor-pointer pl-4">{dayjs(createdAt).format(dateTimeFormat)}</Td>
 							<Td className="w-1/12" />
 
 							<Td className="w-1/3 cursor-pointer">

src/components/organisms/editorTabs.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import Editor, { Monaco } from "@monaco-editor/react";
+import dayjs from "dayjs";
 import { debounce, last } from "lodash";
-import moment from "moment";
 import * as monaco from "monaco-editor";
 import { useTranslation } from "react-i18next";
 import Markdown from "react-markdown";
@@ -244,7 +244,7 @@ export const EditorTabs = () => {
 				);
 				return;
 			}
-			setLastSaved(moment().local().format(dateTimeFormat));
+			setLastSaved(dayjs().format(dateTimeFormat));
 		} catch (error) {
 			addToast({
 				message: tErrors("codeSaveFailed"),
@@ -376,7 +376,7 @@ export const EditorTabs = () => {
 						{openFiles[projectId]?.length ? (
 							<div
 								className="relative -right-4 -top-2 z-10 flex items-center gap-1 whitespace-nowrap"
-								title={lastSaved ? `${t("lastSaved")}:${lastSaved}` : ""}
+								title={lastSaved ? `${t("lastSaved")}: ${lastSaved}` : ""}
 							>
 								<div className="inline-flex items-center gap-2 rounded-3xl border border-gray-1000 p-1">
 									{autoSaveMode ? (

src/components/organisms/events/table/redispatchEventModal.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import JsonView from "@uiw/react-json-view";
 import { githubDarkTheme } from "@uiw/react-json-view/githubDark";
-import moment from "moment";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 
 import { ModalName } from "@enums/components";
@@ -74,7 +74,7 @@ export const RedispatchEventModal = ({
 								{tEvents("viewer.created")}
 							</div>
 							<div className="flex flex-row items-center">
-								{moment(eventInfo?.createdAt).local().format(dateTimeFormat)}
+								{dayjs(eventInfo?.createdAt).format(dateTimeFormat)}
 							</div>
 						</div>
 						<div className="flex items-center gap-4">

src/components/organisms/events/table/row.tsx

@@ -1,6 +1,6 @@
 import React, { CSSProperties, memo } from "react";
 
-import moment from "moment";
+import dayjs from "dayjs";
 import { useParams } from "react-router-dom";
 
 import { useEventsDrawer } from "@contexts";
@@ -40,8 +40,8 @@ export const EventRow = memo(
 
 		return (
 			<Tr className={rowClass} onClick={onClick} style={style}>
-				<Td className={firstColumnClass} title={moment(createdAt).local().format(dateTimeFormat)}>
-					{moment(createdAt).local().format(dateTimeFormat)}
+				<Td className={firstColumnClass} title={dayjs(createdAt).format(dateTimeFormat)}>
+					{dayjs(createdAt).format(dateTimeFormat)}
 				</Td>
 				{isDrawer ? null : (
 					<>

src/components/organisms/events/viewer.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect } from "react";
 
 import JsonView from "@uiw/react-json-view";
 import { githubDarkTheme } from "@uiw/react-json-view/githubDark";
-import moment from "moment";
+import dayjs from "dayjs";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 
@@ -61,7 +61,7 @@ export const EventViewer = () => {
 								{t("created")}
 							</div>
 							<div className="flex flex-row items-center">
-								{moment(eventInfo.createdAt).local().format(dateTimeFormat)}
+								{dayjs(eventInfo.createdAt).format(dateTimeFormat)}
 							</div>
 						</div>
 					</div>

src/models/sessionLog.model.ts

@@ -1,4 +1,4 @@
-import moment from "moment";
+import dayjs from "dayjs";
 
 import { GetPrintsResponse_Print as ProtoGetPrintsResponse_Print } from "@ak-proto-ts/sessions/v1/svc_pb";
 import { dateTimeFormat } from "@src/constants";
@@ -8,7 +8,7 @@ import { convertTimestampToDate } from "@src/utilities";
 export function convertSessionLogProtoToModel(protoPrintLog?: ProtoGetPrintsResponse_Print): SessionOutputLog {
 	const time = convertTimestampToDate(protoPrintLog?.t);
 	const print = protoPrintLog?.v?.string?.v || "Empty print";
-	const formattedDateTime = moment(time).local().format(dateTimeFormat);
+	const formattedDateTime = dayjs(time).format(dateTimeFormat);
 
 	return { time: formattedDateTime, print };
 }

src/models/sessionLogRecord.model.ts

@@ -1,5 +1,5 @@
+import dayjs from "dayjs";
 import { t as i18n } from "i18next";
-import moment from "moment";
 
 import { SessionLogRecord as ProtoSessionLogRecord } from "@ak-proto-ts/sessions/v1/session_pb";
 import { Value } from "@ak-proto-ts/values/v1/values_pb";
@@ -175,7 +175,7 @@ export const convertSessionLogProtoToViewerOutput = (
 	) {
 		return;
 	}
-	const formattedDateTime = moment(record.dateTime).local().format(dateTimeFormat);
+	const formattedDateTime = dayjs(record.dateTime).format(dateTimeFormat);
 
 	return {
 		print: record?.logs || "",

src/services/logger.service.ts

@@ -1,4 +1,4 @@
-import moment from "moment";
+import dayjs from "dayjs";
 
 import { LoggerLevel } from "@enums";
 import { dateTimeFormat } from "@src/constants";
@@ -34,7 +34,7 @@ export class LoggerService {
 		level: LoggerLevel = LoggerLevel.info,
 		consoleOnly?: boolean
 	): void {
-		const timestamp = moment().utc().local().format(dateTimeFormat);
+		const timestamp = dayjs().format(dateTimeFormat);
 		const formattedMessage = `[${namespace}] ${message}`;
 
 		switch (level) {