feat(playground); add outdated application dialog

packages/playground/admin/index.tsx

@@ -8,6 +8,7 @@ import { LogInIcon } from 'lucide-react'
 import { LoginWithEmail } from './lib/components/dev/login-panel'
 import { createRoot } from 'react-dom/client'
 import { getConfig } from './config'
+import { OutdatedApplicationDialog } from './lib/components/outdated-application-dialog'
 
 const errorHandler = createErrorHandler((dom, react, onRecoverableError) => createRoot(dom, { onRecoverableError }).render(react))
 
@@ -27,6 +28,7 @@ errorHandler(onRecoverableError => createRoot(rootEl, { onRecoverableError }).re
 								{ eager: true },
 							)}
 						/>
+						<OutdatedApplicationDialog />
 						{import.meta.env.DEV && <DevBar>
 							<DevPanel heading="Login" icon={<LogInIcon />}><LoginWithEmail /></DevPanel>
 						</DevBar>}

packages/playground/admin/lib/components/outdated-application-dialog.tsx

@@ -0,0 +1,41 @@
+import { ComponentType, useCallback, useEffect, useState } from 'react'
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader } from './ui/alert-dialog'
+import { useIsApplicationOutdated } from '@contember/interface'
+import { ClockIcon, RefreshCwIcon } from 'lucide-react'
+import { dict } from '../dict'
+
+const postponeTimeoutMs = 60_000 * 5
+const checkIntervalMs = 30_000
+
+export const OutdatedApplicationDialog: ComponentType = () => {
+	const isOutdated = useIsApplicationOutdated({ checkIntervalMs })
+	const [open, setOpen] = useState(true)
+
+	const postpone = useCallback(() => {
+		setOpen(false)
+		setTimeout(() => setOpen(true), postponeTimeoutMs)
+	}, [])
+
+	return (
+		<AlertDialog open={isOutdated && open} onOpenChange={it => !it ? postpone() : null}>
+			<AlertDialogContent>
+				<AlertDialogHeader>{dict.outdatedApplication.title}</AlertDialogHeader>
+				<AlertDialogDescription>{dict.outdatedApplication.description}</AlertDialogDescription>
+
+				<div className="text-sm text-destructive">{dict.outdatedApplication.warning}</div>
+				<AlertDialogFooter>
+					<AlertDialogCancel onClick={postpone} className="gap-1">
+						<ClockIcon className="w-3 h-4"/>
+						{dict.outdatedApplication.snooze}
+					</AlertDialogCancel>
+					<AlertDialogAction onClick={() => window.location.reload()} className="gap-1">
+						<RefreshCwIcon className="w-3 h-4" />
+						{dict.outdatedApplication.refreshNow}
+					</AlertDialogAction>
+				</AlertDialogFooter>
+			</AlertDialogContent>
+		</AlertDialog>
+	)
+}
+
+

packages/playground/admin/lib/dict.ts

@@ -112,4 +112,12 @@ export const dict = {
 		empty: 'No items.',
 		addItem: 'Add item',
 	},
+	outdatedApplication: {
+		title: 'An updated version is available',
+		description: 'To access the latest features and improvements, kindly refresh your browser.',
+		warning: 'Any unsaved data will be lost. Please save your work before refreshing.',
+		snooze: 'Snooze',
+		refreshNow: 'Refresh now',
+
+	},
 }