feat: add temporal context and contextual help

webui/src/App.tsx

@@ -11,6 +11,8 @@ import { PermissionBoundary } from "./components/AccessBoundary";
 import { firstAccessibleRoute, loadInstalledPublicWebModules, loadInstalledWebModules, loadRemotePublicWebModules, loadRemoteWebModules, moduleInstalled, navItemsForModules, publicRouteContributionsForModules, routeContributionsForModules, uiCapability } from "./platform/modules";
 import { PlatformModulesProvider } from "./platform/ModuleContext";
 import { PlatformViewProvider } from "./platform/ViewContext";
+import { PlatformTemporalProvider } from "./platform/TemporalContext";
+import { PLATFORM_TEMPORAL_CONTEXT_CHANGED_EVENT } from "./platform/temporal";
 import {
   PLATFORM_VIEW_CHANGED_EVENT,
   PLATFORM_WORKFLOW_VIEW_CHANGED_EVENT,
@@ -53,6 +55,7 @@ export default function App() {
   const [reloginMessage, setReloginMessage] = useState("");
   const [baseViewProjection, setBaseViewProjection] = useState<EffectiveViewProjection | null>(null);
   const [workflowViewProjection, setWorkflowViewProjection] = useState<EffectiveViewProjection | null>(null);
+  const [temporalRevision, setTemporalRevision] = useState(0);
   const viewProjection = workflowViewProjection ?? baseViewProjection;
 
   const webModules = useMemo(() => mergeWebModules(localWebModules, remoteWebModules), [localWebModules, remoteWebModules]);
@@ -71,6 +74,20 @@ export default function App() {
   const moduleTranslations = useMemo(() => contextModules.map((module) => module.translations).filter(Boolean), [contextModules]);
   const dashboardModuleInstalled = useMemo(() => moduleInstalled("dashboard", webModules), [webModules]);
 
+  useEffect(() => {
+    function reloadTemporalData() {
+      setTemporalRevision((current) => current + 1);
+    }
+    window.addEventListener(
+      PLATFORM_TEMPORAL_CONTEXT_CHANGED_EVENT,
+      reloadTemporalData
+    );
+    return () => window.removeEventListener(
+      PLATFORM_TEMPORAL_CONTEXT_CHANGED_EVENT,
+      reloadTemporalData
+    );
+  }, []);
+
   useEffect(() => {
     if (!auth || !viewsRuntime) {
       setBaseViewProjection(null);
@@ -518,12 +535,13 @@ export default function App() {
       onLanguageChange={persistLanguagePreference}
       moduleTranslations={moduleTranslations}>
     <PlatformModulesProvider modules={webModules}>
+      <PlatformTemporalProvider scopeKey={`${auth.user?.id ?? "account"}:${(auth.active_tenant ?? auth.tenant).id}`}>
       <DocumentationHelpProvider localDocsAvailable={localDocsAvailable}>
       <PlatformViewProvider modules={webModules} projection={viewProjection}>
       <UnsavedChangesProvider>
       <AppShell settings={settings} auth={auth} onSettingsChange={updateSettings} onAuthChange={updateAuth} navItems={navItems} maintenanceMode={maintenanceMode} backendReachable={backendReachable}>
-      <ModuleLoadBoundary resetKey={location.pathname} loading={webModulesLoading}>
-        <Routes key={(auth.active_tenant ?? auth.tenant).id}>
+      <ModuleLoadBoundary resetKey={`${location.pathname}:${temporalRevision}`} loading={webModulesLoading}>
+        <Routes key={`${(auth.active_tenant ?? auth.tenant).id}:${temporalRevision}`}>
           <Route path="/" element={<Navigate to={defaultRoute} replace />} />
           {!dashboardModuleInstalled && <Route path="/dashboard" element={<DashboardPage />} />}
           {publicRoutes.map((route) =>
@@ -567,6 +585,7 @@ export default function App() {
       </UnsavedChangesProvider>
       </PlatformViewProvider>
       </DocumentationHelpProvider>
+      </PlatformTemporalProvider>
     </PlatformModulesProvider>
     </PlatformLanguageProvider>);