diff --git a/src/common/layout/optima/OptimaMOTD.tsx b/src/common/layout/optima/OptimaMOTD.tsx
index 7e5bbbe09..ab9c155b7 100644
--- a/src/common/layout/optima/OptimaMOTD.tsx
+++ b/src/common/layout/optima/OptimaMOTD.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import TimeAgo from 'react-timeago';
import { Box, IconButton, Sheet, Typography } from '@mui/joy';
import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
@@ -25,20 +26,21 @@ export const optimaHasMOTD = !!process.env.NEXT_PUBLIC_MOTD;
export function OptimaMOTD() {
// expand special variables in the MOTD
- const { message, hash } = React.useMemo(() => {
+ const { message, hash, buildTimestamp } = React.useMemo(() => {
const rawMOTD = process.env.NEXT_PUBLIC_MOTD;
- if (!rawMOTD?.trim()) return { message: null, hash: null };
+ if (!rawMOTD?.trim()) return { message: null, hash: null, buildTimestamp: null };
const buildInfo = Release.buildInfo('frontend');
const message = rawMOTD
.replace(/{{app_build_hash}}/g, buildInfo.gitSha || '')
.replace(/{{app_build_pkgver}}/g, buildInfo.pkgVersion || '')
- .replace(/{{app_build_time}}/g, new Date(buildInfo.timestamp || '').toLocaleDateString())
+ // .replace(/{{app_build_time}}/g, new Date(buildInfo.timestamp || '').toLocaleDateString()) // we don't do this anymore, as we handle it with TimeAgo.
.replace(/{{app_deployment_type}}/g, buildInfo.deploymentType || '');
return {
message,
hash: frontendHashString(message),
+ buildTimestamp: buildInfo.timestamp || '',
};
}, []);
@@ -50,6 +52,18 @@ export function OptimaMOTD() {
if (!message || dismissed === true)
return null;
+
+ /**
+ * Special render function to split '{{app_build_time}}' and insert a TimeAgo component.
+ */
+ function renderMessageWithTimeAgo(message: string) {
+ if (message.includes('{{app_build_time}}')) {
+ const parts = message.split('{{app_build_time}}');
+ return <>{parts[0]}{buildTimestamp && }{parts[1]}>;
+ }
+ return message;
+ }
+
return (
- {message}
+ {renderMessageWithTimeAgo(message)}