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)}