+
- )
+ );
}
if (!isAuthenticated) {
// A session that ended on its own should come back to where it left off; a
// deliberate sign-out is a fresh start and gets no return ticket, so the
// startup destination decides where the next login lands.
- if (loggingOut) return
+
{children}
- )
+ );
}
/**
@@ -164,7 +161,7 @@ function ProtectedRoute({ children, adminRequired = false, addonId }: ProtectedR
* failed, and the two anonymous share pages.
*/
function PublicRoute({ children, redirectAuthed = false }: { children: React.ReactNode; redirectAuthed?: boolean }) {
- const location = useLocation()
+ const location = useLocation();
// redirectAuthed (only /login and /register) bounces a visitor who is already
// authenticated when they land here — manual URL, browser back button (#1810).
// Only on a bare URL, because every parameter this page takes is a flow that
@@ -178,15 +175,15 @@ function PublicRoute({ children, redirectAuthed = false }: { children: React.Rea
// useLogin navigates away.
// The target is START_DESTINATION_ROUTE, not /dashboard, so the bounce honours
// the start-page preference the same way useLogin does.
- const wasAuthenticated = useRef(useAuthStore.getState().isAuthenticated)
+ const wasAuthenticated = useRef(useAuthStore.getState().isAuthenticated);
if (redirectAuthed && wasAuthenticated.current && !location.search) {
- return
{children}
- )
+ );
}
/**
@@ -195,12 +192,15 @@ function PublicRoute({ children, redirectAuthed = false }: { children: React.Rea
* point: the ternary that used to sit in each page only ran once the browser
* had already paid for both trees.
*/
-function ViewportRoute({ phone: Phone, desktop: Desktop }: {
- phone: React.ComponentType
- desktop: React.ComponentType
+function ViewportRoute({
+ phone: Phone,
+ desktop: Desktop,
+}: {
+ phone: React.ComponentType;
+ desktop: React.ComponentType;
}): React.ReactElement {
- const isPhone = useIsPhone()
- return isPhone ? (null)
+ const { isAuthenticated, isLoading } = useAuthStore();
+ const settingsLoaded = useSettingsStore((s) => s.isLoaded);
+ const settings = useSettingsStore((s) => s.settings);
+ const loadSettings = useSettingsStore((s) => s.loadSettings);
+ const [target, setTarget] = useState(null);
// Bounds the wait below: loadSettings deliberately leaves isLoaded false on a
// failed request so it can retry, which would otherwise strand a launch that
// started offline on the spinner.
- const [settingsGaveUp, setSettingsGaveUp] = useState(false)
+ const [settingsGaveUp, setSettingsGaveUp] = useState(false);
useEffect(() => {
- if (settingsLoaded) return
- const timer = setTimeout(() => setSettingsGaveUp(true), SETTINGS_WAIT_MS)
- return () => clearTimeout(timer)
- }, [settingsLoaded])
+ if (settingsLoaded) return;
+ const timer = setTimeout(() => setSettingsGaveUp(true), SETTINGS_WAIT_MS);
+ return () => clearTimeout(timer);
+ }, [settingsLoaded]);
useEffect(() => {
- if (isLoading || !isAuthenticated || target) return
+ if (isLoading || !isAuthenticated || target) return;
// The installed app coming back after the system threw it away (#1024):
// back to the trip and tab it was in, ahead of the start page.
- const resume = takeResumeRoute()
- if (resume) { setTarget(resume); return }
- const mirrored = readStartDestination()
+ const resume = takeResumeRoute();
+ if (resume) {
+ setTarget(resume);
+ return;
+ }
+ const mirrored = readStartDestination();
if (!mirrored && !settingsLoaded && !settingsGaveUp) {
// Ask for the settings instead of waiting for whoever else might. The
// store de-dupes concurrent loads, so this is free when one is already in
// flight — and it stops the decision from riding on where that request
// happens to land in the queue behind everything else a launch fires off.
- loadSettings()
- return
+ loadSettings();
+ return;
}
// Loaded settings are the truth; the mirror is what we knew last time.
const { page, tab } = settingsLoaded
? { page: settings.start_page ?? DEFAULT_START_PAGE, tab: settings.start_trip_tab ?? DEFAULT_START_TRIP_TAB }
- : (mirrored ?? { page: DEFAULT_START_PAGE, tab: DEFAULT_START_TRIP_TAB })
- if (page !== 'active_trip') { setTarget('/dashboard'); return }
- let cancelled = false
+ : (mirrored ?? { page: DEFAULT_START_PAGE, tab: DEFAULT_START_TRIP_TAB });
+ if (page !== 'active_trip') {
+ setTarget('/dashboard');
+ return;
+ }
+ let cancelled = false;
// Through the repo, not the api: offline this answers from Dexie instead of
// bouncing a cached trip to the dashboard.
- tripRepo.active()
- .then(({ trip }) => { if (!cancelled) setTarget(trip ? tripStartPath(trip.id, tab) : '/dashboard') })
- .catch(() => { if (!cancelled) setTarget('/dashboard') })
- return () => { cancelled = true }
- }, [isLoading, isAuthenticated, settingsLoaded, settingsGaveUp, settings, target])
+ tripRepo
+ .active()
+ .then(({ trip }) => {
+ if (!cancelled) setTarget(trip ? tripStartPath(trip.id, tab) : '/dashboard');
+ })
+ .catch(() => {
+ if (!cancelled) setTarget('/dashboard');
+ });
+ return () => {
+ cancelled = true;
+ };
+ }, [isLoading, isAuthenticated, settingsLoaded, settingsGaveUp, settings, target]);
if (isLoading || (isAuthenticated && !target)) {
return (
-
-
-
{t('common.loading')}
+ +{t('common.loading')}
-
+ onToggleCollabFeature(feat.key)}
/>
- )
- })
+ );
+ });
}
// Document providers are the Documents tile's shelf, the way photo providers
// are Journey's. Unlike those they carry no credential form here: a document
// connection belongs to a trip, not to a user, so it is entered in the trip's
// file manager. The admin decides only whether a provider may be offered.
if (addon.id === 'documents' && addon.enabled && documentProviderOptions.length > 0) {
- return documentProviderOptions.map(provider => {
- const ProviderIcon = PROVIDER_ICONS[provider.key]
+ return documentProviderOptions.map((provider) => {
+ const ProviderIcon = PROVIDER_ICONS[provider.key];
return (
{shelfFor(addon)}
- )
- }
+ );
+ };
/* One column per type, side by side, instead of three stacked sections. Stacked, each
section opened its own set of columns and the tall tiles (Collab, Journey) set a
@@ -291,59 +360,78 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
{ key: 'trip', addons: tripAddons },
{ key: 'global', addons: globalAddons },
{ key: 'integration', addons: integrationAddons },
- ].filter(g => g.addons.length > 0)
- const enabledCount = addons.filter(a => a.type !== 'photo_provider' && a.type !== 'document_provider' && a.enabled).length
- const totalCount = tripAddons.length + globalAddons.length + integrationAddons.length
+ ].filter((g) => g.addons.length > 0);
+ const enabledCount = addons.filter(
+ (a) => a.type !== 'photo_provider' && a.type !== 'document_provider' && a.enabled
+ ).length;
+ const totalCount = tripAddons.length + globalAddons.length + integrationAddons.length;
const subtitle = (
{t('admin.addons.subtitleBefore')}
- 
+
{t('admin.addons.subtitleAfter')}
- )
+ );
return (
0 ? (
-
-
- 0 ? 'success' : 'neutral'}>{enabledCount}/{totalCount}
-
-
- ) : undefined}
+ badge={
+ totalCount > 0 ? (
+
+
+ 0 ? 'success' : 'neutral'}>
+ {enabledCount}/{totalCount}
+
+
+
+ ) : undefined
+ }
>
{addons.length === 0 ? (
- )
+ );
}
/** The head band of one type's column: icon tile, the type, its count and what it means. */
-function GroupHead({ icon: Icon, label, hint, addons, t }: {
- icon: ComponentType<{ size?: number; className?: string; strokeWidth?: number }>
- label: string
- hint: string
- addons: Addon[]
- t: (key: string, params?: Record) => string
+function GroupHead({
+ icon: Icon,
+ label,
+ hint,
+ addons,
+ t,
+}: {
+ icon: ComponentType<{ size?: number; className?: string; strokeWidth?: number }>;
+ label: string;
+ hint: string;
+ addons: Addon[];
+ t: (key: string, params?: Record) => string;
}) {
- const enabled = addons.filter(a => a.enabled).length
+ const enabled = addons.filter((a) => a.enabled).length;
return (
- const [provider, setProvider] = useState((cfg.provider as string) ?? 'local')
- const [model, setModel] = useState((cfg.model as string) ?? '')
- const [baseUrl, setBaseUrl] = useState((cfg.baseUrl as string) ?? '')
- const [apiKey, setApiKey] = useState((cfg.apiKey as string) ?? '')
- const [vision, setVision] = useState(asLlmVision(cfg.vision))
- const [saving, setSaving] = useState(false)
- const fieldId = useId()
+ const { t } = useTranslation();
+ const toast = useToast();
+ const cfg = (addon.config ?? {}) as Record;
+ const [provider, setProvider] = useState((cfg.provider as string) ?? 'local');
+ const [model, setModel] = useState((cfg.model as string) ?? '');
+ const [baseUrl, setBaseUrl] = useState((cfg.baseUrl as string) ?? '');
+ const [apiKey, setApiKey] = useState((cfg.apiKey as string) ?? '');
+ const [vision, setVision] = useState(asLlmVision(cfg.vision));
+ const [saving, setSaving] = useState(false);
+ const fieldId = useId();
// Local-provider model management.
- const [installed, setInstalled] = useState([])
- const [modelsErr, setModelsErr] = useState('')
- const [loadingModels, setLoadingModels] = useState(false)
- const [pulling, setPulling] = useState(null)
- const [pullPct, setPullPct] = useState(0)
- const [pullStatus, setPullStatus] = useState('')
+ const [installed, setInstalled] = useState([]);
+ const [modelsErr, setModelsErr] = useState('');
+ const [loadingModels, setLoadingModels] = useState(false);
+ const [pulling, setPulling] = useState(null);
+ const [pullPct, setPullPct] = useState(0);
+ const [pullStatus, setPullStatus] = useState('');
- const effectiveUrl = baseUrl.trim() || DEFAULT_OLLAMA_URL
- const isInstalled = (id: string) => installed.some(n => n === id || n.startsWith(id + ':') || n.startsWith(id))
+ const effectiveUrl = baseUrl.trim() || DEFAULT_OLLAMA_URL;
+ const isInstalled = (id: string) => installed.some((n) => n === id || n.startsWith(id + ':') || n.startsWith(id));
const loadModels = async () => {
- if (provider !== 'local') return
- setLoadingModels(true)
- setModelsErr('')
+ if (provider !== 'local') return;
+ setLoadingModels(true);
+ setModelsErr('');
try {
- const res = await adminApi.llmLocalModels(effectiveUrl)
- setInstalled(res.models.map(m => m.name))
+ const res = await adminApi.llmLocalModels(effectiveUrl);
+ setInstalled(res.models.map((m) => m.name));
} catch (e: unknown) {
- setModelsErr(e instanceof Error ? e.message : 'Could not reach the local LLM server')
- setInstalled([])
+ setModelsErr(e instanceof Error ? e.message : 'Could not reach the local LLM server');
+ setInstalled([]);
} finally {
- setLoadingModels(false)
+ setLoadingModels(false);
}
- }
+ };
// Load installed models when the local provider is active.
useEffect(() => {
- if (provider === 'local') void loadModels()
+ if (provider === 'local') void loadModels();
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [provider])
+ }, [provider]);
const pull = async (id: string) => {
- if (pulling) return
- setPulling(id)
- setPullPct(0)
- setPullStatus('starting…')
+ if (pulling) return;
+ setPulling(id);
+ setPullPct(0);
+ setPullStatus('starting…');
try {
await adminApi.llmLocalPull(effectiveUrl, id, (p) => {
- if (p.error) throw new Error(p.error)
- if (p.status) setPullStatus(p.status)
- if (p.total && p.completed != null) setPullPct(Math.round((p.completed / p.total) * 100))
- })
- toast.success('Model pulled')
- setModel(id)
- await loadModels()
+ if (p.error) throw new Error(p.error);
+ if (p.status) setPullStatus(p.status);
+ if (p.total && p.completed != null) setPullPct(Math.round((p.completed / p.total) * 100));
+ });
+ toast.success('Model pulled');
+ setModel(id);
+ await loadModels();
} catch (e: unknown) {
- toast.error(e instanceof Error ? e.message : 'Pull failed')
+ toast.error(e instanceof Error ? e.message : 'Pull failed');
} finally {
- setPulling(null)
- setPullPct(0)
- setPullStatus('')
+ setPulling(null);
+ setPullPct(0);
+ setPullStatus('');
}
- }
+ };
const save = async () => {
- setSaving(true)
+ setSaving(true);
try {
// Send the masked sentinel unchanged so the server keeps the stored key.
- await adminApi.updateAddon(addon.id, { config: { provider, model: model.trim(), baseUrl: provider === 'anthropic' ? '' : baseUrl.trim(), apiKey, vision } })
- toast.success('Saved')
+ await adminApi.updateAddon(addon.id, {
+ config: {
+ provider,
+ model: model.trim(),
+ baseUrl: provider === 'anthropic' ? '' : baseUrl.trim(),
+ apiKey,
+ vision,
+ },
+ });
+ toast.success('Saved');
} catch {
- toast.error('Failed to save')
+ toast.error('Failed to save');
} finally {
- setSaving(false)
+ setSaving(false);
}
- }
+ };
const providerOptions = [
{ value: 'local', label: 'Local · OpenAI-compatible', icon:
- setProvider(String(v))} options={providerOptions} />
+ setProvider(String(v))} options={providerOptions} />
{provider !== 'anthropic' && (
- setBaseUrl(e.target.value)} onBlur={loadModels} placeholder={provider === 'local' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1'} />
+ setBaseUrl(e.target.value)}
+ onBlur={loadModels}
+ placeholder={provider === 'local' ? 'http://localhost:11434/v1' : 'https://api.openai.com/v1'}
+ />
)}
- setApiKey(e.target.value)} placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'} />
+ setApiKey(e.target.value)}
+ placeholder={apiKey === MASKED ? MASKED : provider === 'local' ? '(often not required)' : 'sk-…'}
+ />
- setModel(e.target.value)} placeholder={provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'} />
+ setModel(e.target.value)}
+ placeholder={
+ provider === 'anthropic' ? 'claude-opus-4-8' : provider === 'openai' ? 'gpt-4o' : 'select or pull below'
+ }
+ />
-
+
label={t('settings.aiParsing.multimodal')}
value={vision}
- onChange={v => setVision(asLlmVision(v))}
+ onChange={(v) => setVision(asLlmVision(v))}
options={visionOptions}
fill
/>
@@ -511,22 +652,33 @@ function LlmParsingConfig({ addon }: { addon: Addon }) {
{provider === 'local' && (
No models installed yet — pull one below.
)}
{installed.length > 0 && (
-
- )
+ );
}
export default function AdminMcpTokensPanel() {
- const [sessions, setSessions] = useState([])
- const [sessionsLoading, setSessionsLoading] = useState(true)
- const [tokens, setTokens] = useState([])
- const [tokensLoading, setTokensLoading] = useState(true)
- const [expandedScopes, setExpandedScopes] = useState>(new Set())
- const [revokeConfirmId, setRevokeConfirmId] = useState(null)
- const [deleteConfirmId, setDeleteConfirmId] = useState(null)
+ const [sessions, setSessions] = useState([]);
+ const [sessionsLoading, setSessionsLoading] = useState(true);
+ const [tokens, setTokens] = useState([]);
+ const [tokensLoading, setTokensLoading] = useState(true);
+ const [expandedScopes, setExpandedScopes] = useState>(new Set());
+ const [revokeConfirmId, setRevokeConfirmId] = useState(null);
+ const [deleteConfirmId, setDeleteConfirmId] = useState(null);
const toggleScopes = (id: number) =>
- setExpandedScopes(prev => {
- const next = new Set(prev)
- next.has(id) ? next.delete(id) : next.add(id)
- return next
- })
- const toast = useToast()
- const { t, locale } = useTranslation()
+ setExpandedScopes((prev) => {
+ const next = new Set(prev);
+ next.has(id) ? next.delete(id) : next.add(id);
+ return next;
+ });
+ const toast = useToast();
+ const { t, locale } = useTranslation();
useEffect(() => {
- adminApi.oauthSessions()
- .then(d => setSessions(d.sessions || []))
+ adminApi
+ .oauthSessions()
+ .then((d) => setSessions(d.sessions || []))
.catch(() => toast.error(t('admin.oauthSessions.loadError')))
- .finally(() => setSessionsLoading(false))
+ .finally(() => setSessionsLoading(false));
- adminApi.mcpTokens()
- .then(d => setTokens(d.tokens || []))
+ adminApi
+ .mcpTokens()
+ .then((d) => setTokens(d.tokens || []))
.catch(() => toast.error(t('admin.mcpTokens.loadError')))
- .finally(() => setTokensLoading(false))
- }, [])
+ .finally(() => setTokensLoading(false));
+ }, []);
const handleRevoke = async (id: number) => {
try {
- await adminApi.revokeOAuthSession(id)
- setSessions(prev => prev.filter(s => s.id !== id))
- setRevokeConfirmId(null)
- toast.success(t('admin.oauthSessions.revokeSuccess'))
+ await adminApi.revokeOAuthSession(id);
+ setSessions((prev) => prev.filter((s) => s.id !== id));
+ setRevokeConfirmId(null);
+ toast.success(t('admin.oauthSessions.revokeSuccess'));
} catch {
- toast.error(t('admin.oauthSessions.revokeError'))
+ toast.error(t('admin.oauthSessions.revokeError'));
}
- }
+ };
const handleDelete = async (id: number) => {
try {
- await adminApi.deleteMcpToken(id)
- setTokens(prev => prev.filter(tk => tk.id !== id))
- setDeleteConfirmId(null)
- toast.success(t('admin.mcpTokens.deleteSuccess'))
+ await adminApi.deleteMcpToken(id);
+ setTokens((prev) => prev.filter((tk) => tk.id !== id));
+ setDeleteConfirmId(null);
+ toast.success(t('admin.mcpTokens.deleteSuccess'));
} catch {
- toast.error(t('admin.mcpTokens.deleteError'))
+ toast.error(t('admin.mcpTokens.deleteError'));
}
- }
+ };
- const date = (iso: string) => new Date(iso).toLocaleDateString(locale)
+ const date = (iso: string) => new Date(iso).toLocaleDateString(locale);
return (
+
- )
+ );
}
- return
-
+ }) => {
- setManaged(!!config?.managed)
- setDemoMode(!!config?.demo_mode)
- if (config?.dev_mode) setDevMode(true)
- if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
- if (config?.version) setAppVersion(config.version)
- if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
- if (config?.has_amap_key !== undefined) setHasAmapKey(config.has_amap_key)
- if (config?.places_provider) setPlacesProvider(config.places_provider)
- if (config?.timezone) setServerTimezone(config.timezone)
- if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
- if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled)
- if (config?.places_photos_enabled !== undefined) setPlacesPhotosEnabled(config.places_photos_enabled)
- if (config?.places_autocomplete_enabled !== undefined) setPlacesAutocompleteEnabled(config.places_autocomplete_enabled)
- if (config?.places_details_enabled !== undefined) setPlacesDetailsEnabled(config.places_details_enabled)
- if (config?.places_enrich_enabled !== undefined) setPlacesEnrichEnabled(config.places_enrich_enabled)
- if (config?.place_shadow_enabled !== undefined) setPlaceShadowEnabled(config.place_shadow_enabled)
- if (typeof config?.max_upload_mb === 'number' && config.max_upload_mb > 0) useAuthStore.getState().setMaxUploadMb(config.max_upload_mb)
- if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions)
- // Last, since a new release reloads the page from here.
- await reconcileAppVersion(config?.version)
- }).catch(() => {})
- }, [])
+ authApi
+ .getAppConfig()
+ .then(
+ async (config: {
+ managed?: boolean;
+ demo_mode?: boolean;
+ dev_mode?: boolean;
+ is_prerelease?: boolean;
+ has_maps_key?: boolean;
+ has_amap_key?: boolean;
+ places_provider?: string;
+ version?: string;
+ timezone?: string;
+ require_mfa?: boolean;
+ trip_reminders_enabled?: boolean;
+ places_photos_enabled?: boolean;
+ places_autocomplete_enabled?: boolean;
+ places_details_enabled?: boolean;
+ places_enrich_enabled?: boolean;
+ place_shadow_enabled?: boolean;
+ max_upload_mb?: number;
+ permissions?: Record;
+ }) => {
+ setManaged(!!config?.managed);
+ setDemoMode(!!config?.demo_mode);
+ if (config?.dev_mode) setDevMode(true);
+ if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease);
+ if (config?.version) setAppVersion(config.version);
+ if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key);
+ if (config?.has_amap_key !== undefined) setHasAmapKey(config.has_amap_key);
+ if (config?.places_provider) setPlacesProvider(config.places_provider);
+ if (config?.timezone) setServerTimezone(config.timezone);
+ if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa);
+ if (config?.trip_reminders_enabled !== undefined) setTripRemindersEnabled(config.trip_reminders_enabled);
+ if (config?.places_photos_enabled !== undefined) setPlacesPhotosEnabled(config.places_photos_enabled);
+ if (config?.places_autocomplete_enabled !== undefined)
+ setPlacesAutocompleteEnabled(config.places_autocomplete_enabled);
+ if (config?.places_details_enabled !== undefined) setPlacesDetailsEnabled(config.places_details_enabled);
+ if (config?.places_enrich_enabled !== undefined) setPlacesEnrichEnabled(config.places_enrich_enabled);
+ if (config?.place_shadow_enabled !== undefined) setPlaceShadowEnabled(config.place_shadow_enabled);
+ if (typeof config?.max_upload_mb === 'number' && config.max_upload_mb > 0)
+ useAuthStore.getState().setMaxUploadMb(config.max_upload_mb);
+ if (config?.permissions) usePermissionsStore.getState().setPermissions(config.permissions);
+ // Last, since a new release reloads the page from here.
+ await reconcileAppVersion(config?.version);
+ }
+ )
+ .catch(() => {});
+ }, []);
- const { settings } = useSettingsStore()
+ const { settings } = useSettingsStore();
- useInAppNotificationListener()
- useRoadtripPreferencesSync()
+ useInAppNotificationListener();
+ useRoadtripPreferencesSync();
useEffect(() => {
if (isAuthenticated) {
- loadSettings()
- loadAddons()
- loadPlugins()
+ loadSettings();
+ loadAddons();
+ loadPlugins();
}
- }, [isAuthenticated])
+ }, [isAuthenticated]);
useEffect(() => {
- registerSyncTriggers()
- return () => unregisterSyncTriggers()
- }, [])
+ registerSyncTriggers();
+ return () => unregisterSyncTriggers();
+ }, []);
- const location = useLocation()
- const isSharedPage = location.pathname.startsWith('/shared/')
+ const location = useLocation();
+ const isSharedPage = location.pathname.startsWith('/shared/');
useEffect(() => {
const run = () =>
@@ -366,22 +429,23 @@ export default function App() {
darkMode: settings.dark_mode,
appearance: settings.appearance,
isSharedPage,
- })
- run()
+ });
+ run();
// Re-resolve on OS theme change while in auto mode.
if (!isSharedPage && settings.dark_mode === 'auto') {
- const mq = window.matchMedia('(prefers-color-scheme: dark)')
- const handler = () => run()
- mq.addEventListener('change', handler)
- return () => mq.removeEventListener('change', handler)
+ const mq = window.matchMedia('(prefers-color-scheme: dark)');
+ const handler = () => run();
+ mq.addEventListener('change', handler);
+ return () => mq.removeEventListener('change', handler);
}
- }, [settings.dark_mode, settings.appearance, isSharedPage])
+ }, [settings.dark_mode, settings.appearance, isSharedPage]);
- const isPhone = useIsPhone()
- const isAuthPage = location.pathname.startsWith('/login')
- || location.pathname.startsWith('/register')
- || location.pathname.startsWith('/forgot-password')
- || location.pathname.startsWith('/reset-password')
+ const isPhone = useIsPhone();
+ const isAuthPage =
+ location.pathname.startsWith('/login') ||
+ location.pathname.startsWith('/register') ||
+ location.pathname.startsWith('/forgot-password') ||
+ location.pathname.startsWith('/reset-password');
// No session on these, so authenticated-only widgets (system notices,
// background tasks, save-to-collection) have nothing to do and would only fire
// a doomed authenticated request on mount.
@@ -390,16 +454,32 @@ export default function App() {
// drifted, this one naming only /public/journey/ while the response
// interceptor's covers all of /public/. A route that is public to one and not
// to the other is exactly the seam that puts a 401 back.
- const hideAuthedWidgets = isAuthPage || isAuthPublicPath(location.pathname)
+ const hideAuthedWidgets = isAuthPage || isAuthPublicPath(location.pathname);
return (
- {!hideAuthedWidgets &&
+
+ )}
+ {!hideAuthedWidgets && (
+
+
+ )}
+
+
+ {!hideAuthedWidgets && (
+
+
+ )}
{!hideAuthedWidgets && (isPhone ?
+
{/* One boundary for all route chunks, above so it stays mounted
across navigations. react-router runs location updates inside a transition,
so a mounted boundary keeps the current page on screen instead of flashing
@@ -407,14 +487,63 @@ export default function App() {
+
+
+
+
+
+
+
- )
+ );
}
diff --git a/client/src/App.versionHandover.test.tsx b/client/src/App.versionHandover.test.tsx
index 473a24cf7..61e6ae1a2 100644
--- a/client/src/App.versionHandover.test.tsx
+++ b/client/src/App.versionHandover.test.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
-import { render, waitFor, act } from '@testing-library/react'
-import { MemoryRouter } from 'react-router'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { http, HttpResponse } from 'msw'
-import { server } from '../tests/helpers/msw/server'
-import { useAuthStore } from './store/authStore'
-import { resetAllStores } from '../tests/helpers/store'
-import App from './App'
+import { act, render, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { MemoryRouter } from 'react-router';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { server } from '../tests/helpers/msw/server';
+import { resetAllStores } from '../tests/helpers/store';
+import App from './App';
+import { useAuthStore } from './store/authStore';
/*
* #2458: an installed PWA kept serving the previous UI after a server upgrade.
@@ -23,233 +22,244 @@ import App from './App'
*/
const sw = vi.hoisted(() => {
class FakeWorker extends EventTarget {
- state: string
- readonly scriptURL = '/sw.js'
+ state: string;
+ readonly scriptURL = '/sw.js';
constructor(state: string) {
- super()
- this.state = state
+ super();
+ this.state = state;
}
become(state: string) {
- this.state = state
- this.dispatchEvent(new Event('statechange'))
+ this.state = state;
+ this.dispatchEvent(new Event('statechange'));
}
}
class FakeRegistration extends EventTarget {
- active: FakeWorker | null = null
- installing: FakeWorker | null = null
- waiting: FakeWorker | null = null
- readonly scope = '/'
- update = vi.fn()
+ active: FakeWorker | null = null;
+ installing: FakeWorker | null = null;
+ waiting: FakeWorker | null = null;
+ readonly scope = '/';
+ update = vi.fn();
}
class FakeContainer extends EventTarget {
- controller: FakeWorker | null = null
- getRegistration = vi.fn()
+ controller: FakeWorker | null = null;
+ getRegistration = vi.fn();
// Listeners a page adds die with that page. Those added while modules load
// (before `trackPage` is switched on) stand for module-level code and stay.
- trackPage = false
- private pageListeners: Array<[string, EventListenerOrEventListenerObject, boolean | AddEventListenerOptions | undefined]> = []
- addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions) {
- super.addEventListener(type, listener, options)
- if (this.trackPage && listener) this.pageListeners.push([type, listener, options])
+ trackPage = false;
+ private pageListeners: Array<
+ [string, EventListenerOrEventListenerObject, boolean | AddEventListenerOptions | undefined]
+ > = [];
+ addEventListener(
+ type: string,
+ listener: EventListenerOrEventListenerObject | null,
+ options?: boolean | AddEventListenerOptions
+ ) {
+ super.addEventListener(type, listener, options);
+ if (this.trackPage && listener) this.pageListeners.push([type, listener, options]);
}
dropPageListeners() {
- for (const [type, listener, options] of this.pageListeners) super.removeEventListener(type, listener, options)
- this.pageListeners = []
+ for (const [type, listener, options] of this.pageListeners) super.removeEventListener(type, listener, options);
+ this.pageListeners = [];
}
}
- const oldWorker = new FakeWorker('activated')
- const registration = new FakeRegistration()
- const container = new FakeContainer()
- registration.active = oldWorker
- container.controller = oldWorker
- container.getRegistration.mockImplementation(async () => registration)
- Object.defineProperty(navigator, 'serviceWorker', { configurable: true, value: container })
- return { FakeWorker, registration, container, oldWorker }
-})
+ const oldWorker = new FakeWorker('activated');
+ const registration = new FakeRegistration();
+ const container = new FakeContainer();
+ registration.active = oldWorker;
+ container.controller = oldWorker;
+ container.getRegistration.mockImplementation(async () => registration);
+ Object.defineProperty(navigator, 'serviceWorker', { configurable: true, value: container });
+ return { FakeWorker, registration, container, oldWorker };
+});
-vi.mock('./pages/LoginPage', () => ({ default: () => ) {
server.use(
http.get('/api/auth/app-config', async () => {
- configHits++
- if (gate) await gate
- return HttpResponse.json({ version })
- }),
- )
+ configHits++;
+ if (gate) await gate;
+ return HttpResponse.json({ version });
+ })
+ );
}
/** The browser's handover: the new worker installs, activates and claims the page. */
function handOver() {
- const next = new sw.FakeWorker('activated')
- sw.registration.installing = null
- sw.registration.active = next
- sw.container.controller = next
- sw.container.dispatchEvent(new Event('controllerchange'))
+ const next = new sw.FakeWorker('activated');
+ sw.registration.installing = null;
+ sw.registration.active = next;
+ sw.container.controller = next;
+ sw.container.dispatchEvent(new Event('controllerchange'));
}
/** update() finds a new sw.js and starts installing it; `then` decides how the install ends. */
function updateStartsInstall(then: 'activates' | 'fails') {
sw.registration.update.mockImplementation(async () => {
- const next = new sw.FakeWorker('installing')
- sw.registration.installing = next
+ const next = new sw.FakeWorker('installing');
+ sw.registration.installing = next;
setTimeout(() => {
if (then === 'activates') {
- next.become('activated')
- handOver()
+ next.become('activated');
+ handOver();
} else {
// Workbox precaching is all-or-nothing: one failed fetch out of ~463
// rejects the install event and the new worker is thrown away.
- sw.registration.installing = null
- next.become('redundant')
+ sw.registration.installing = null;
+ next.become('redundant');
}
- }, 0)
- return sw.registration
- })
+ }, 0);
+ return sw.registration;
+ });
}
/** One cold start of the installed app: fresh page, fresh session, same localStorage. */
async function launch() {
- sessionStorage.clear()
- const hitsBefore = configHits
+ sessionStorage.clear();
+ const hitsBefore = configHits;
const view = render(
,
- )
- await waitFor(() => expect(configHits).toBe(hitsBefore + 1))
+
+ );
+ await waitFor(() => expect(configHits).toBe(hitsBefore + 1));
// Let the probe, update() and the fake install run to completion.
- await act(async () => { await new Promise(r => setTimeout(r, 50)) })
- view.unmount()
- sw.container.dropPageListeners()
+ await act(async () => {
+ await new Promise((r) => setTimeout(r, 50));
+ });
+ view.unmount();
+ sw.container.dropPageListeners();
}
beforeEach(() => {
- resetAllStores()
- vi.clearAllMocks()
- configHits = 0
- sw.registration.active = sw.oldWorker
- sw.registration.installing = null
- sw.registration.waiting = null
- sw.registration.update.mockReset()
- sw.registration.update.mockResolvedValue(sw.registration)
- sw.container.controller = sw.oldWorker
- sw.container.dropPageListeners()
- sw.container.getRegistration.mockReset()
- sw.container.getRegistration.mockImplementation(async () => sw.registration)
- reload.mockReset()
- Object.defineProperty(window, 'location', { writable: true, value: { ...window.location, reload } })
+ resetAllStores();
+ vi.clearAllMocks();
+ configHits = 0;
+ sw.registration.active = sw.oldWorker;
+ sw.registration.installing = null;
+ sw.registration.waiting = null;
+ sw.registration.update.mockReset();
+ sw.registration.update.mockResolvedValue(sw.registration);
+ sw.container.controller = sw.oldWorker;
+ sw.container.dropPageListeners();
+ sw.container.getRegistration.mockReset();
+ sw.container.getRegistration.mockImplementation(async () => sw.registration);
+ reload.mockReset();
+ Object.defineProperty(window, 'location', { writable: true, value: { ...window.location, reload } });
server.use(
http.get('/api/health/features', () => HttpResponse.json({ bookingImport: false, aiParsing: false })),
- http.get('/api/system-notices/active', () => HttpResponse.json([])),
- )
+ http.get('/api/system-notices/active', () => HttpResponse.json([]))
+ );
useAuthStore.setState({
isLoading: false,
isAuthenticated: false,
user: null,
appRequireMfa: false,
loadUser: vi.fn().mockResolvedValue(undefined),
- })
-})
+ });
+});
describe('#2458 version handover: behaviour that must survive the fix', () => {
it('FE-COMP-APP-2458-P1: a confirmed handover reloads once and is not repeated on the next launch', async () => {
- localStorage.setItem('trek_app_version', '4.3.0')
- serveVersion('4.3.1')
- updateStartsInstall('activates')
+ localStorage.setItem('trek_app_version', '4.3.0');
+ serveVersion('4.3.1');
+ updateStartsInstall('activates');
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(1)
- expect(reload).toHaveBeenCalledTimes(1)
- expect(localStorage.getItem('trek_app_version')).toBe('4.3.1')
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(1);
+ expect(reload).toHaveBeenCalledTimes(1);
+ expect(localStorage.getItem('trek_app_version')).toBe('4.3.1');
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(1)
- expect(reload).toHaveBeenCalledTimes(1)
- })
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(1);
+ expect(reload).toHaveBeenCalledTimes(1);
+ });
it('FE-COMP-APP-2458-P2: nothing to hand over (sw.js unchanged, same worker in control) neither reloads nor retries', async () => {
// A release that changed nothing the precache holds leaves sw.js byte-identical,
// so update() installs nothing. The bundle this page runs is already current.
- localStorage.setItem('trek_app_version', '4.3.0')
- serveVersion('4.3.1')
+ localStorage.setItem('trek_app_version', '4.3.0');
+ serveVersion('4.3.1');
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(1)
- expect(reload).not.toHaveBeenCalled()
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(1);
+ expect(reload).not.toHaveBeenCalled();
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(1)
- expect(reload).not.toHaveBeenCalled()
- })
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(1);
+ expect(reload).not.toHaveBeenCalled();
+ });
it.each([
['a self-built image without the build arg', 'dev'],
['a test instance pinned to an older tag', '4.0.0'],
['a prerelease image, whose bundle keeps the last stable version', '4.4.0-pre.3'],
- ])('FE-COMP-APP-2458-P3: %s (server says %s, bundle is built as another version) never loops', async (_label, serverVersion) => {
- // The server reports APP_VERSION, the bundle carries client/package.json. On
- // these setups the two never agree, so a check against the bundle's own
- // version would see an update on every launch.
- serveVersion(serverVersion)
+ ])(
+ 'FE-COMP-APP-2458-P3: %s (server says %s, bundle is built as another version) never loops',
+ async (_label, serverVersion) => {
+ // The server reports APP_VERSION, the bundle carries client/package.json. On
+ // these setups the two never agree, so a check against the bundle's own
+ // version would see an update on every launch.
+ serveVersion(serverVersion);
- await launch()
- await launch()
- await launch()
- expect(reload).not.toHaveBeenCalled()
- expect(sw.registration.update).not.toHaveBeenCalled()
- })
-})
+ await launch();
+ await launch();
+ await launch();
+ expect(reload).not.toHaveBeenCalled();
+ expect(sw.registration.update).not.toHaveBeenCalled();
+ }
+ );
+});
describe('#2458 version handover: the reported defect', () => {
it('FE-COMP-APP-2458-01: an update() that rejects is retried on the next launch', async () => {
- localStorage.setItem('trek_app_version', '4.3.0')
- serveVersion('4.3.1')
- sw.registration.update.mockRejectedValue(new TypeError('Failed to update a ServiceWorker: network error'))
+ localStorage.setItem('trek_app_version', '4.3.0');
+ serveVersion('4.3.1');
+ sw.registration.update.mockRejectedValue(new TypeError('Failed to update a ServiceWorker: network error'));
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(1)
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(1);
// Next cold start, network fine this time.
- updateStartsInstall('activates')
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(2)
- expect(reload).toHaveBeenCalled()
- })
+ updateStartsInstall('activates');
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(2);
+ expect(reload).toHaveBeenCalled();
+ });
it('FE-COMP-APP-2458-02: a failed update() does not reload into the shell the same worker serves again', async () => {
// The old worker still controls the page, so a plain reload is answered from
// its precache: the same old UI, now with the marker saying it is current.
- localStorage.setItem('trek_app_version', '4.3.0')
- serveVersion('4.3.1')
- sw.registration.update.mockRejectedValue(new TypeError('Failed to update a ServiceWorker: network error'))
+ localStorage.setItem('trek_app_version', '4.3.0');
+ serveVersion('4.3.1');
+ sw.registration.update.mockRejectedValue(new TypeError('Failed to update a ServiceWorker: network error'));
- await launch()
- expect(reload).not.toHaveBeenCalled()
- })
+ await launch();
+ expect(reload).not.toHaveBeenCalled();
+ });
it('FE-COMP-APP-2458-03: an install that goes redundant is retried on the next launch', async () => {
- localStorage.setItem('trek_app_version', '4.3.0')
- serveVersion('4.3.1')
- updateStartsInstall('fails')
+ localStorage.setItem('trek_app_version', '4.3.0');
+ serveVersion('4.3.1');
+ updateStartsInstall('fails');
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(1)
- expect(reload).not.toHaveBeenCalled()
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(1);
+ expect(reload).not.toHaveBeenCalled();
- updateStartsInstall('activates')
- await launch()
- expect(sw.registration.update).toHaveBeenCalledTimes(2)
- expect(reload).toHaveBeenCalledTimes(1)
- })
+ updateStartsInstall('activates');
+ await launch();
+ expect(sw.registration.update).toHaveBeenCalledTimes(2);
+ expect(reload).toHaveBeenCalledTimes(1);
+ });
// Kept last: it swaps the controlling worker mid-launch, which code that
// remembers "the controller changed since this page loaded" keeps seeing.
@@ -258,24 +268,28 @@ describe('#2458 version handover: the reported defect', () => {
// installs and activates the new worker before /api/auth/app-config has
// answered, the takeover happens while nobody listens, and update() then
// finds nothing newer. The page keeps running the bundle the old worker served.
- localStorage.setItem('trek_app_version', '4.3.0')
- let open!: () => void
- const gate = new Promise(r => { open = r })
- serveVersion('4.3.1', gate)
+ localStorage.setItem('trek_app_version', '4.3.0');
+ let open!: () => void;
+ const gate = new Promise((r) => {
+ open = r;
+ });
+ serveVersion('4.3.1', gate);
- sessionStorage.clear()
+ sessionStorage.clear();
const view = render(
,
- )
- await waitFor(() => expect(configHits).toBe(1))
- act(() => handOver())
- open()
- await act(async () => { await new Promise(r => setTimeout(r, 50)) })
- view.unmount()
- sw.container.dropPageListeners()
+
+ );
+ await waitFor(() => expect(configHits).toBe(1));
+ act(() => handOver());
+ open();
+ await act(async () => {
+ await new Promise((r) => setTimeout(r, 50));
+ });
+ view.unmount();
+ sw.container.dropPageListeners();
- expect(reload).toHaveBeenCalledTimes(1)
- })
-})
+ expect(reload).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/client/src/App.viewport.test.tsx b/client/src/App.viewport.test.tsx
index 13c37d5e5..c6b054a5d 100644
--- a/client/src/App.viewport.test.tsx
+++ b/client/src/App.viewport.test.tsx
@@ -1,12 +1,11 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { MemoryRouter } from 'react-router'
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { useAuthStore } from './store/authStore'
-import { useAddonStore } from './store/addonStore'
-import { resetAllStores } from '../tests/helpers/store'
-import { buildUser } from '../tests/helpers/factories'
-import App from './App'
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { buildUser } from '../tests/helpers/factories';
+import { resetAllStores } from '../tests/helpers/store';
+import App from './App';
+import { useAddonStore } from './store/addonStore';
+import { useAuthStore } from './store/authStore';
/**
* The viewport decides which chunk gets fetched, so the switch lives in App.tsx
@@ -17,35 +16,35 @@ import App from './App'
* root hangs off the route, and the desktop page is never rendered at all.
*/
-const isPhone = vi.hoisted(() => ({ value: false }))
-vi.mock('./mobile/useIsPhone', () => ({ useIsPhone: () => isPhone.value }))
+const isPhone = vi.hoisted(() => ({ value: false }));
+vi.mock('./mobile/useIsPhone', () => ({ useIsPhone: () => isPhone.value }));
-vi.mock('./mobile/screens/dashboard/MDashboard', () => ({ default: () =>
- )
+ );
}
beforeEach(() => {
- resetAllStores()
- vi.clearAllMocks()
- isPhone.value = false
+ resetAllStores();
+ vi.clearAllMocks();
+ isPhone.value = false;
// An admin passes the role check on /admin; every other route ignores it.
useAuthStore.setState({
isLoading: false,
@@ -81,31 +80,31 @@ beforeEach(() => {
user: buildUser({ role: 'admin', mfa_enabled: true }),
appRequireMfa: false,
loadUser: vi.fn().mockResolvedValue(undefined),
- })
+ });
// /journey and /collections sit behind addons; without this they redirect to
// the dashboard and the route under test never renders.
- useAddonStore.setState({ loaded: true, isEnabled: () => true })
-})
+ useAddonStore.setState({ loaded: true, isEnabled: () => true });
+});
describe('App — viewport routing', () => {
it.each(ROUTES)(
'FE-COMP-APPVP-001: %s renders the mobile screen below the breakpoint',
async (path, mobile, desktop) => {
- isPhone.value = true
- renderAt(path)
+ isPhone.value = true;
+ renderAt(path);
- expect(await screen.findByText(mobile)).toBeInTheDocument()
- expect(screen.queryByText(desktop)).not.toBeInTheDocument()
+ expect(await screen.findByText(mobile)).toBeInTheDocument();
+ expect(screen.queryByText(desktop)).not.toBeInTheDocument();
}
- )
+ );
it.each(ROUTES)(
'FE-COMP-APPVP-002: %s renders the desktop page above the breakpoint',
async (path, mobile, desktop) => {
- renderAt(path)
+ renderAt(path);
- expect(await screen.findByText(desktop)).toBeInTheDocument()
- expect(screen.queryByText(mobile)).not.toBeInTheDocument()
+ expect(await screen.findByText(desktop)).toBeInTheDocument();
+ expect(screen.queryByText(mobile)).not.toBeInTheDocument();
}
- )
-})
+ );
+});
diff --git a/client/src/components/Admin/AddonManager.test.tsx b/client/src/components/Admin/AddonManager.test.tsx
index 739bb1b71..f698a9a83 100644
--- a/client/src/components/Admin/AddonManager.test.tsx
+++ b/client/src/components/Admin/AddonManager.test.tsx
@@ -1,11 +1,11 @@
// FE-ADMIN-ADDON-001 to FE-ADMIN-ADDON-039
-import { render, screen, waitFor } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { delay, http, HttpResponse } from 'msw';
import { server } from '../../../tests/helpers/msw/server';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { useSettingsStore } from '../../store/settingsStore';
import { useAddonStore } from '../../store/addonStore';
+import { useSettingsStore } from '../../store/settingsStore';
import { ToastContainer } from '../shared/Toast';
import AddonManager from './AddonManager';
@@ -40,7 +40,7 @@ function llmAddon(config: Record = {}) {
function modelsRoute(names: string[], seen?: (string | null)[]) {
return http.get('/api/admin/llm/local/models', ({ request }) => {
seen?.push(new URL(request.url).searchParams.get('baseUrl'));
- return HttpResponse.json({ models: names.map(name => ({ name, size: 1 })) });
+ return HttpResponse.json({ models: names.map((name) => ({ name, size: 1 })) });
});
}
@@ -71,9 +71,7 @@ beforeEach(() => {
resetAllStores();
seedStore(useSettingsStore, { settings: { dark_mode: false } });
vi.spyOn(useAddonStore.getState(), 'loadAddons').mockResolvedValue(undefined);
- server.use(
- http.get('/api/admin/addons', () => HttpResponse.json({ addons: [] }))
- );
+ server.use(http.get('/api/admin/addons', () => HttpResponse.json({ addons: [] })));
});
afterEach(() => {
@@ -85,7 +83,7 @@ describe('AddonManager', () => {
it('FE-ADMIN-ADDON-001: loading spinner shown while fetching', async () => {
server.use(
http.get('/api/admin/addons', async () => {
- await new Promise(resolve => setTimeout(resolve, 200));
+ await new Promise((resolve) => setTimeout(resolve, 200));
return HttpResponse.json({ addons: [] });
})
);
@@ -131,14 +129,15 @@ describe('AddonManager', () => {
it('FE-ADMIN-ADDON-005: toggle enables a disabled addon (optimistic update)', async () => {
const user = userEvent.setup();
server.use(
- http.get('/api/admin/addons', () =>
- HttpResponse.json({ addons: [buildAddon({ id: 'todo', enabled: false })] })
- ),
- http.put('/api/admin/addons/todo', () =>
- HttpResponse.json({ success: true })
- )
+ http.get('/api/admin/addons', () => HttpResponse.json({ addons: [buildAddon({ id: 'todo', enabled: false })] })),
+ http.put('/api/admin/addons/todo', () => HttpResponse.json({ success: true }))
+ );
+ render(
+ <>
+ > = {
@@ -50,31 +96,31 @@ const PROVIDER_ICONS: Record> = {
// The document providers' own marks, single-colour so they read as glyphs in
// a row of lucide icons and invert with the theme.
...DOCUMENT_PROVIDER_ICONS,
-}
+};
interface Addon {
- id: string
- name: string
- description: string
- icon: string
- type: string
- enabled: boolean
- config?: Record
+ id: string;
+ name: string;
+ description: string;
+ icon: string;
+ type: string;
+ enabled: boolean;
+ config?: Record;
}
interface ProviderOption {
- key: string
- label: string
- description: string
- enabled: boolean
- toggle: () => Promise
+ key: string;
+ label: string;
+ description: string;
+ enabled: boolean;
+ toggle: () => Promise;
}
interface AddonIconProps {
- name: string
- size?: number
+ name: string;
+ size?: number;
/** A switched-off addon greys its icon out, brand marks included. */
- enabled?: boolean
+ enabled?: boolean;
}
function AddonIcon({ name, size = 20, enabled = true }: AddonIconProps) {
@@ -82,13 +128,13 @@ function AddonIcon({ name, size = 20, enabled = true }: AddonIconProps) {
// sitting in the middle of it at glyph size, and they grey out when the addon
// is off — the lucide glyphs get that from the slot's text colour, an ![]()
// has to be told.
- if (name === 'Dawarich') return ; labelK
trip: { icon: Briefcase, labelKey: 'admin.addons.type.trip', hintKey: 'admin.addons.tripHint' },
global: { icon: Globe, labelKey: 'admin.addons.type.global', hintKey: 'admin.addons.globalHint' },
integration: { icon: Link2, labelKey: 'admin.addons.type.integration', hintKey: 'admin.addons.integrationHint' },
-}
+};
-interface CollabFeatures { chat: boolean; notes: boolean; links?: boolean; polls: boolean; whatsnext: boolean }
+interface CollabFeatures {
+ chat: boolean;
+ notes: boolean;
+ links?: boolean;
+ polls: boolean;
+ whatsnext: boolean;
+}
const COLLAB_SUB_FEATURES = [
{ key: 'chat', icon: MessageCircle, titleKey: 'admin.collab.chat.title', subtitleKey: 'admin.collab.chat.subtitle' },
{ key: 'notes', icon: StickyNote, titleKey: 'admin.collab.notes.title', subtitleKey: 'admin.collab.notes.subtitle' },
{ key: 'links', icon: Link2, titleKey: 'collab.tabs.links', subtitleKey: 'admin.collab.links.subtitle' },
{ key: 'polls', icon: BarChart3, titleKey: 'admin.collab.polls.title', subtitleKey: 'admin.collab.polls.subtitle' },
- { key: 'whatsnext', icon: Sparkles, titleKey: 'admin.collab.whatsnext.title', subtitleKey: 'admin.collab.whatsnext.subtitle' },
-] as const
+ {
+ key: 'whatsnext',
+ icon: Sparkles,
+ titleKey: 'admin.collab.whatsnext.title',
+ subtitleKey: 'admin.collab.whatsnext.subtitle',
+ },
+] as const;
-export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking, collabFeatures, onToggleCollabFeature }: { bagTrackingEnabled?: boolean; onToggleBagTracking?: () => void; collabFeatures?: CollabFeatures; onToggleCollabFeature?: (key: string) => void }) {
- const { t } = useTranslation()
- const dark = useIsDark()
- const toast = useToast()
- const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
- const [addons, setAddons] = useState([])
- const [loading, setLoading] = useState(true)
+export default function AddonManager({
+ bagTrackingEnabled,
+ onToggleBagTracking,
+ collabFeatures,
+ onToggleCollabFeature,
+}: {
+ bagTrackingEnabled?: boolean;
+ onToggleBagTracking?: () => void;
+ collabFeatures?: CollabFeatures;
+ onToggleCollabFeature?: (key: string) => void;
+}) {
+ const { t } = useTranslation();
+ const dark = useIsDark();
+ const toast = useToast();
+ const refreshGlobalAddons = useAddonStore((s) => s.loadAddons);
+ const [addons, setAddons] = useState([]);
+ const [loading, setLoading] = useState(true);
useEffect(() => {
- void loadAddons().finally(() => setLoading(false))
- }, [])
+ void loadAddons().finally(() => setLoading(false));
+ }, []);
const loadAddons = async () => {
try {
- const data = await adminApi.addons()
- setAddons(data.addons)
+ const data = await adminApi.addons();
+ setAddons(data.addons);
} catch (err: unknown) {
- toast.error(t('admin.addons.toast.error'))
+ toast.error(t('admin.addons.toast.error'));
}
- }
+ };
/** Optimistic flip, per-row rollback on failure. Rolling the whole addons
* snapshot back instead would undo a toggle the user hit in parallel. */
const handleToggle = async (addon: Addon) => {
- const newEnabled = !addon.enabled
- setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
+ const newEnabled = !addon.enabled;
+ setAddons((prev) => prev.map((a) => (a.id === addon.id ? { ...a, enabled: newEnabled } : a)));
try {
- await adminApi.updateAddon(addon.id, { enabled: newEnabled })
+ await adminApi.updateAddon(addon.id, { enabled: newEnabled });
} catch (err: unknown) {
- setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: !newEnabled } : a))
- toast.error(t('admin.addons.toast.error'))
- return
+ setAddons((prev) => prev.map((a) => (a.id === addon.id ? { ...a, enabled: !newEnabled } : a)));
+ toast.error(t('admin.addons.toast.error'));
+ return;
}
- refreshGlobalAddons()
+ refreshGlobalAddons();
// Journey off disables every photo provider with it, and the response carries
// only Journey. Without re-reading, switching Journey back on brings the shelf
// up with providers the database has long since turned off.
// Same for Documents: switching it off disables every document provider in
// the database, and the response carries only the addon itself.
- if (addon.id === 'journey' || addon.id === 'documents') await loadAddons()
- toast.success(t('admin.addons.toast.updated'))
- }
+ if (addon.id === 'journey' || addon.id === 'documents') await loadAddons();
+ toast.success(t('admin.addons.toast.updated'));
+ };
const isPhotoProviderAddon = (addon: Addon) => {
- return addon.type === 'photo_provider'
- }
+ return addon.type === 'photo_provider';
+ };
const isDocumentProviderAddon = (addon: Addon) => {
- return addon.type === 'document_provider'
- }
+ return addon.type === 'document_provider';
+ };
const isPhotosAddon = (addon: Addon) => {
- const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase()
- return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
- }
+ const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase();
+ return (
+ addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
+ );
+ };
- const photoProviderAddons = addons.filter(isPhotoProviderAddon)
- const documentProviderAddons = addons.filter(isDocumentProviderAddon)
- const tripAddons = addons.filter(a => a.type === 'trip' && !isPhotosAddon(a))
- const globalAddons = addons.filter(a => a.type === 'global')
- const integrationAddons = addons.filter(a => a.type === 'integration')
+ const photoProviderAddons = addons.filter(isPhotoProviderAddon);
+ const documentProviderAddons = addons.filter(isDocumentProviderAddon);
+ const tripAddons = addons.filter((a) => a.type === 'trip' && !isPhotosAddon(a));
+ const globalAddons = addons.filter((a) => a.type === 'global');
+ const integrationAddons = addons.filter((a) => a.type === 'integration');
const providerOptions: ProviderOption[] = photoProviderAddons.map((provider) => ({
- key: provider.id,
- label: provider.name,
- description: provider.description,
- enabled: provider.enabled,
- toggle: () => handleToggle(provider),
- }))
+ key: provider.id,
+ label: provider.name,
+ description: provider.description,
+ enabled: provider.enabled,
+ toggle: () => handleToggle(provider),
+ }));
const documentProviderOptions: ProviderOption[] = documentProviderAddons.map((provider) => ({
- key: provider.id,
- label: provider.name,
- description: provider.description,
- enabled: provider.enabled,
- toggle: () => handleToggle(provider),
- }))
+ key: provider.id,
+ label: provider.name,
+ description: provider.description,
+ enabled: provider.enabled,
+ toggle: () => handleToggle(provider),
+ }));
if (loading) {
return (
@@ -192,7 +261,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
- )
+ );
}
/** Bag tracking, the collab features and the photo providers all hang off their
@@ -208,11 +277,11 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking,
enabled={!!bagTrackingEnabled}
onToggle={onToggleBagTracking}
/>
- )
+ );
}
if (addon.id === 'collab' && addon.enabled && collabFeatures && onToggleCollabFeature) {
- return COLLAB_SUB_FEATURES.map(feat => {
- const Icon = feat.icon
+ return COLLAB_SUB_FEATURES.map((feat) => {
+ const Icon = feat.icon;
return (
+
- )
+ );
}
export default function App() {
- const { loadUser, isAuthenticated, demoMode, setManaged, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setHasAmapKey, setPlacesProvider, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled, setPlacesPhotosEnabled, setPlacesAutocompleteEnabled, setPlacesDetailsEnabled, setPlacesEnrichEnabled, setPlaceShadowEnabled } = useAuthStore()
- const { loadSettings } = useSettingsStore()
- const { loadAddons } = useAddonStore()
- const { loadPlugins } = usePluginStore()
+ const {
+ loadUser,
+ isAuthenticated,
+ demoMode,
+ setManaged,
+ setDemoMode,
+ setDevMode,
+ setIsPrerelease,
+ setAppVersion,
+ setHasMapsKey,
+ setHasAmapKey,
+ setPlacesProvider,
+ setServerTimezone,
+ setAppRequireMfa,
+ setTripRemindersEnabled,
+ setPlacesPhotosEnabled,
+ setPlacesAutocompleteEnabled,
+ setPlacesDetailsEnabled,
+ setPlacesEnrichEnabled,
+ setPlaceShadowEnabled,
+ } = useAuthStore();
+ const { loadSettings } = useSettingsStore();
+ const { loadAddons } = useAddonStore();
+ const { loadPlugins } = usePluginStore();
useEffect(() => {
- if (!location.pathname.startsWith('/shared/') && !location.pathname.startsWith('/public/') && !location.pathname.startsWith('/login')) {
+ if (
+ !location.pathname.startsWith('/shared/') &&
+ !location.pathname.startsWith('/public/') &&
+ !location.pathname.startsWith('/login')
+ ) {
// If the persist snapshot already has an authenticated user, validate
// silently so the PWA shell renders immediately without a spinner.
- const alreadyAuthenticated = useAuthStore.getState().isAuthenticated
+ const alreadyAuthenticated = useAuthStore.getState().isAuthenticated;
if (alreadyAuthenticated) {
- useAuthStore.setState({ isLoading: false })
- loadUser({ silent: true })
+ useAuthStore.setState({ isLoading: false });
+ loadUser({ silent: true });
} else {
- loadUser()
+ loadUser();
}
}
- authApi.getAppConfig().then(async (config: { managed?: boolean; demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; has_amap_key?: boolean; places_provider?: string; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; places_photos_enabled?: boolean; places_autocomplete_enabled?: boolean; places_details_enabled?: boolean; places_enrich_enabled?: boolean; place_shadow_enabled?: boolean; max_upload_mb?: number; permissions?: RecordLogin
}))
-vi.mock('./pages/DashboardPage', () => ({ default: () => Dashboard
}))
-vi.mock('./hooks/useInAppNotificationListener.ts', () => ({ useInAppNotificationListener: vi.fn() }))
+vi.mock('./pages/LoginPage', () => ({ default: () => Login
}));
+vi.mock('./pages/DashboardPage', () => ({ default: () => Dashboard
}));
+vi.mock('./hooks/useInAppNotificationListener.ts', () => ({ useInAppNotificationListener: vi.fn() }));
// Every import above has been evaluated by now; from here on a listener belongs to a page.
-sw.container.trackPage = true
+sw.container.trackPage = true;
-const reload = vi.fn()
-let configHits = 0
+const reload = vi.fn();
+let configHits = 0;
function serveVersion(version: string, gate?: Promisem-dashboard
}))
-vi.mock('./mobile/screens/trip/MTripShell', () => ({ default: () => m-trip
}))
-vi.mock('./mobile/screens/admin/MAdmin', () => ({ default: () => m-admin
}))
-vi.mock('./mobile/screens/settings/MSettings', () => ({ default: () => m-settings
}))
-vi.mock('./mobile/screens/vacay/MVacay', () => ({ default: () => m-vacay
}))
-vi.mock('./mobile/screens/atlas/MAtlas', () => ({ default: () => m-atlas
}))
-vi.mock('./mobile/screens/journey/MJourney', () => ({ default: () => m-journey
}))
-vi.mock('./mobile/screens/journey/MJourneyDetail', () => ({ default: () => m-journey-detail
}))
-vi.mock('./mobile/screens/collections/MCollections', () => ({ default: () => m-collections
}))
-vi.mock('./mobile/screens/notifications/MNotifications', () => ({ default: () => m-notifications
}))
+vi.mock('./mobile/screens/dashboard/MDashboard', () => ({ default: () => m-dashboard
}));
+vi.mock('./mobile/screens/trip/MTripShell', () => ({ default: () => m-trip
}));
+vi.mock('./mobile/screens/admin/MAdmin', () => ({ default: () => m-admin
}));
+vi.mock('./mobile/screens/settings/MSettings', () => ({ default: () => m-settings
}));
+vi.mock('./mobile/screens/vacay/MVacay', () => ({ default: () => m-vacay
}));
+vi.mock('./mobile/screens/atlas/MAtlas', () => ({ default: () => m-atlas
}));
+vi.mock('./mobile/screens/journey/MJourney', () => ({ default: () => m-journey
}));
+vi.mock('./mobile/screens/journey/MJourneyDetail', () => ({ default: () => m-journey-detail
}));
+vi.mock('./mobile/screens/collections/MCollections', () => ({ default: () => m-collections
}));
+vi.mock('./mobile/screens/notifications/MNotifications', () => ({ default: () => m-notifications
}));
-vi.mock('./pages/DashboardPage', () => ({ default: () => d-dashboard
}))
-vi.mock('./pages/TripPlannerPage', () => ({ default: () => d-trip
}))
-vi.mock('./pages/AdminPage', () => ({ default: () => d-admin
}))
-vi.mock('./pages/SettingsPage', () => ({ default: () => d-settings
}))
-vi.mock('./pages/VacayPage', () => ({ default: () => d-vacay
}))
-vi.mock('./pages/AtlasPage', () => ({ default: () => d-atlas
}))
-vi.mock('./pages/JourneyPage', () => ({ default: () => d-journey
}))
-vi.mock('./pages/JourneyDetailPage', () => ({ default: () => d-journey-detail
}))
-vi.mock('./pages/CollectionsPage', () => ({ default: () => d-collections
}))
-vi.mock('./pages/InAppNotificationsPage.tsx', () => ({ default: () => d-notifications
}))
+vi.mock('./pages/DashboardPage', () => ({ default: () => d-dashboard
}));
+vi.mock('./pages/TripPlannerPage', () => ({ default: () => d-trip
}));
+vi.mock('./pages/AdminPage', () => ({ default: () => d-admin
}));
+vi.mock('./pages/SettingsPage', () => ({ default: () => d-settings
}));
+vi.mock('./pages/VacayPage', () => ({ default: () => d-vacay
}));
+vi.mock('./pages/AtlasPage', () => ({ default: () => d-atlas
}));
+vi.mock('./pages/JourneyPage', () => ({ default: () => d-journey
}));
+vi.mock('./pages/JourneyDetailPage', () => ({ default: () => d-journey-detail
}));
+vi.mock('./pages/CollectionsPage', () => ({ default: () => d-collections
}));
+vi.mock('./pages/InAppNotificationsPage.tsx', () => ({ default: () => d-notifications
}));
// The notification listener opens a WebSocket on mount.
vi.mock('./hooks/useInAppNotificationListener.ts', () => ({
useInAppNotificationListener: vi.fn(),
-}))
+}));
/** path, mobile marker, desktop marker */
const ROUTES: [string, string, string][] = [
@@ -60,20 +59,20 @@ const ROUTES: [string, string, string][] = [
['/collections', 'm-collections', 'd-collections'],
['/collections/1', 'm-collections', 'd-collections'],
['/notifications', 'm-notifications', 'd-notifications'],
-]
+];
function renderAt(path: string) {
return render(
- {groups.map(g => {
- const meta = TYPE_META[g.key]
+ {groups.map((g) => {
+ const meta = TYPE_META[g.key];
return (
-
+
- )
+ );
})}
)}
{g.addons.map(tile)}
@@ -351,31 +439,44 @@ function GroupHead({ icon: Icon, label, hint, addons, t }: {
- )
+ );
}
-const MASKED = '••••••••'
-const EYEBROW = 'font-geist font-bold uppercase tracking-[.08em] text-content-faint'
-const SMALL_BUTTON = 'inline-flex flex-none items-center rounded-[9px] px-2.5 py-1 font-medium transition-colors disabled:cursor-default disabled:opacity-60'
-const DEFAULT_OLLAMA_URL = 'http://localhost:11434/v1'
+const MASKED = '••••••••';
+const EYEBROW = 'font-geist font-bold uppercase tracking-[.08em] text-content-faint';
+const SMALL_BUTTON =
+ 'inline-flex flex-none items-center rounded-[9px] px-2.5 py-1 font-medium transition-colors disabled:cursor-default disabled:opacity-60';
+const DEFAULT_OLLAMA_URL = 'http://localhost:11434/v1';
/** Curated models the local extractor is tuned for, pullable via Ollama. The router drives
* one model per document via Ollama's grammar-constrained `format`; "thinking" is disabled
* automatically, so the Qwen3 family works without any tuning. A host only needs one. */
const RECOMMENDED_MODELS: { id: string; label: string; note: string; recommended: boolean; vision: boolean }[] = [
- { id: 'qwen3.5:4b', label: 'Qwen3.5 — 4B', note: 'Recommended · small and quick on CPU, 3.4 GB download, 256K context (thinking auto-disabled) · Apache-2.0', recommended: true, vision: true },
-]
+ {
+ id: 'qwen3.5:4b',
+ label: 'Qwen3.5 — 4B',
+ note: 'Recommended · small and quick on CPU, 3.4 GB download, 256K context (thinking auto-disabled) · Apache-2.0',
+ recommended: true,
+ vision: true,
+ },
+];
/**
* Instance-wide AI-parsing config. When set, applies to the whole instance and
@@ -384,91 +485,99 @@ const RECOMMENDED_MODELS: { id: string; label: string; note: string; recommended
* provider, it also lists installed Ollama models and can pull NuExtract models.
*/
function LlmParsingConfig({ addon }: { addon: Addon }) {
- const { t } = useTranslation()
- const toast = useToast()
- const cfg = (addon.config ?? {}) as Record
-
- {enabled}/{addons.length}
+
+ {enabled}/{addons.length}
+
{/* Says what the type means: the only place that still explains it. */}
- {label}
++ {label} +
{hint}
++ {hint} +
- Installed on the server
-
- {modelsErr && {modelsErr}
} + {modelsErr && ( ++ {modelsErr} +
+ )} {!modelsErr && installed.length === 0 && !loadingModels && (
- {installed.map(name => (
-
)}
- )
+ );
}
diff --git a/client/src/components/Admin/AdminMcpTokensPanel.test.tsx b/client/src/components/Admin/AdminMcpTokensPanel.test.tsx
index f6fe60bba..609d66c35 100644
--- a/client/src/components/Admin/AdminMcpTokensPanel.test.tsx
+++ b/client/src/components/Admin/AdminMcpTokensPanel.test.tsx
@@ -1,8 +1,8 @@
// FE-ADMIN-MCP-001 to FE-ADMIN-MCP-016
-import { render, screen, waitFor } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../../../tests/helpers/msw/server';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
import { resetAllStores } from '../../../tests/helpers/store';
import { ToastContainer } from '../shared/Toast';
import AdminMcpTokensPanel from './AdminMcpTokensPanel';
@@ -39,7 +39,7 @@ describe('AdminMcpTokensPanel', () => {
it('FE-ADMIN-MCP-001: loading spinner shown on mount', async () => {
server.use(
http.get('/api/admin/mcp-tokens', async () => {
- await new Promise(resolve => setTimeout(resolve, 200));
+ await new Promise((resolve) => setTimeout(resolve, 200));
return HttpResponse.json({ tokens: [] });
})
);
@@ -53,11 +53,7 @@ describe('AdminMcpTokensPanel', () => {
});
it('FE-ADMIN-MCP-003: token list renders correctly', async () => {
- server.use(
- http.get('/api/admin/mcp-tokens', () =>
- HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
- )
- );
+ server.use(http.get('/api/admin/mcp-tokens', () => HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })));
render(
{icon}
{text}
- )
+ );
}
/** One fact on the right of a row: an eyebrow over its value. */
function Meta({ label, children }: { label: string; children: ReactNode }) {
return (
-
- )
+ );
}
/** The owner of a session or token, with the person glyph in front. */
function Owner({ name }: { name: string }) {
return (
-
+
{label}
- {children}
+
+ {label}
+
+
+ {children}
+
@@ -149,25 +164,38 @@ export default function AdminMcpTokensPanel() {
badge={!sessionsLoading && sessions.length > 0 ? {sessions.length} : undefined}
>
{sessionsLoading || sessions.length === 0 ? (
-
- {sessions.map(session => {
- const expanded = expandedScopes.has(session.id)
- const visible = expanded ? session.scopes : session.scopes.slice(0, SCOPES_PREVIEW)
- const hidden = session.scopes.length - SCOPES_PREVIEW
+ {sessions.map((session) => {
+ const expanded = expandedScopes.has(session.id);
+ const visible = expanded ? session.scopes : session.scopes.slice(0, SCOPES_PREVIEW);
+ const hidden = session.scopes.length - SCOPES_PREVIEW;
return (
- {tokens.length} : undefined}
>
{tokensLoading || tokens.length === 0 ? (
-
- {tokens.map(token => (
+ {tokens.map((token) => (
-
- )
+ );
})}
)}
@@ -192,15 +220,25 @@ export default function AdminMcpTokensPanel() {
badge={!tokensLoading && tokens.length > 0 ? {session.client_name}
++ {session.client_name} +
- {visible.map(scope => (
- {scope}
+ {visible.map((scope) => (
+
+ {scope}
+
))}
{hidden > 0 && (
-
- setRevokeConfirmId(null)}
- onConfirm={() => { if (revokeConfirmId !== null) void handleRevoke(revokeConfirmId) }}
+ onConfirm={() => {
+ if (revokeConfirmId !== null) void handleRevoke(revokeConfirmId);
+ }}
title={t('admin.oauthSessions.revokeTitle')}
message={t('admin.oauthSessions.revokeMessage')}
confirmLabel={t('common.delete')}
@@ -231,12 +271,14 @@ export default function AdminMcpTokensPanel() {
setDeleteConfirmId(null)}
- onConfirm={() => { if (deleteConfirmId !== null) void handleDelete(deleteConfirmId) }}
+ onConfirm={() => {
+ if (deleteConfirmId !== null) void handleDelete(deleteConfirmId);
+ }}
title={t('admin.mcpTokens.deleteTitle')}
message={t('admin.mcpTokens.deleteMessage')}
confirmLabel={t('common.delete')}
danger
/>
- )
+ );
}
diff --git a/client/src/components/Admin/AdminPluginsPanel.test.tsx b/client/src/components/Admin/AdminPluginsPanel.test.tsx
index 472f6a7da..f0ba41a6a 100644
--- a/client/src/components/Admin/AdminPluginsPanel.test.tsx
+++ b/client/src/components/Admin/AdminPluginsPanel.test.tsx
@@ -1,11 +1,11 @@
-import { http, HttpResponse } from 'msw'
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
-import userEvent from '@testing-library/user-event'
-import { server } from '../../../tests/helpers/msw/server'
-import { fireEvent, render, screen, waitFor, within } from '../../../tests/helpers/render'
-import { resetAllStores } from '../../../tests/helpers/store'
-import { ToastContainer } from '../shared/Toast'
-import AdminPluginsPanel from './AdminPluginsPanel'
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { server } from '../../../tests/helpers/msw/server';
+import { fireEvent, render, screen, waitFor, within } from '../../../tests/helpers/render';
+import { resetAllStores } from '../../../tests/helpers/store';
+import { ToastContainer } from '../shared/Toast';
+import AdminPluginsPanel from './AdminPluginsPanel';
/**
* The "allowed hosts" chip. A plugin that talks to a SELF-HOSTED service (a Gotify) can't
@@ -15,9 +15,17 @@ import AdminPluginsPanel from './AdminPluginsPanel'
*/
function plugin(over: Record = {}) {
return {
- id: 'trek-gotify', name: 'Gotify', description: 'Push notifications', type: 'integration',
- icon: 'Bell', version: '1.0.0', status: 'active', enabled: 1,
- last_error: null, reviewed_at: null, source_repo: null,
+ id: 'trek-gotify',
+ name: 'Gotify',
+ description: 'Push notifications',
+ type: 'integration',
+ icon: 'Bell',
+ version: '1.0.0',
+ status: 'active',
+ enabled: 1,
+ last_error: null,
+ reviewed_at: null,
+ source_repo: null,
permissions: JSON.stringify(['hook:notification-channel', 'http:outbound:gotify.net']),
capabilities: '{}',
operatorEgress: true,
@@ -25,59 +33,60 @@ function plugin(over: Record = {}) {
dependencyStatus: 'ok',
dependencyIssues: { disabledAddons: [], missing: [], versionMismatch: [] },
...over,
- }
+ };
}
function mockList(p: Record) {
server.use(
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [p] })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json({ plugins: [] })),
- )
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json({ plugins: [] }))
+ );
}
-beforeEach(() => resetAllStores())
+beforeEach(() => resetAllStores());
/** A press on a dialog's backdrop: DialogShell closes only when the press both starts and ends there. */
function clickBackdrop(el: HTMLElement) {
- fireEvent.mouseDown(el)
- fireEvent.click(el)
+ fireEvent.mouseDown(el);
+ fireEvent.click(el);
}
describe('AdminPluginsPanel — allowed-hosts chip', () => {
it('FE-COMP-PLUGINS-EGRESS-001: invites the admin to add a host when none is set', async () => {
- mockList(plugin({ egressHostCount: 0 }))
- render( | null) {
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [] })),
// pluginBrowse returns the ARRAY itself, not { plugins: [...] }.
http.get('*/api/admin/plugins/registry', () =>
- HttpResponse.json([{ id: 'trek-gotify', name: 'Gotify', author: 'jubnl', description: 'Push', repo: 'jubnl/trek-gotify', type: 'integration', tags: [] }])),
+ HttpResponse.json([
+ {
+ id: 'trek-gotify',
+ name: 'Gotify',
+ author: 'jubnl',
+ description: 'Push',
+ repo: 'jubnl/trek-gotify',
+ type: 'integration',
+ tags: [],
+ },
+ ])
+ ),
http.get('*/api/admin/plugins/registry/trek-gotify', () =>
HttpResponse.json({
- id: 'trek-gotify', name: 'Gotify', author: 'jubnl', description: 'Push', repo: 'jubnl/trek-gotify',
- type: 'integration', tags: [], size: 1024, publishedAt: null, latest: '1.0.0', manifest,
- })),
- )
+ id: 'trek-gotify',
+ name: 'Gotify',
+ author: 'jubnl',
+ description: 'Push',
+ repo: 'jubnl/trek-gotify',
+ type: 'integration',
+ tags: [],
+ size: 1024,
+ publishedAt: null,
+ latest: '1.0.0',
+ manifest,
+ })
+ )
+ );
}
describe('AdminPluginsPanel — Discover modal, operator-egress pill', () => {
- const base = { permissions: ['hook:notification-channel', 'http:outbound:gotify.net'], egress: ['gotify.net'], settings: [], license: 'MIT', icon: null }
+ const base = {
+ permissions: ['hook:notification-channel', 'http:outbound:gotify.net'],
+ egress: ['gotify.net'],
+ settings: [],
+ license: 'MIT',
+ icon: null,
+ };
/** The panel opens on Installed — switch to Discover, then open the plugin's card. */
async function openDetail() {
- render( = {}) {
return {
- id: 'trek-gotify', name: 'Gotify', author: 'Acme', description: 'Push', repo: 'acme/gotify',
- type: 'integration', latest: '2.0.0', minTrekVersion: null, reviewedAt: null,
- screenshotUrl: null, signed: true, authorPublicKey: 'NEWKEYbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+ id: 'trek-gotify',
+ name: 'Gotify',
+ author: 'Acme',
+ description: 'Push',
+ repo: 'acme/gotify',
+ type: 'integration',
+ latest: '2.0.0',
+ minTrekVersion: null,
+ reviewedAt: null,
+ screenshotUrl: null,
+ signed: true,
+ authorPublicKey: 'NEWKEYbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
// The real browse response always carries latestCompatible (server-side hostCompat);
// mirror `latest` by default, exactly like a fully-compatible entry.
latestCompatible: (over.latest as string | undefined) ?? '2.0.0',
...over,
- }
+ };
}
function mockPanel(p: Record, entry: Record | null = registryEntry()) {
server.use(
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [p] })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : [])),
- )
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : []))
+ );
}
describe('AdminPluginsPanel — signature badges', () => {
it('FE-COMP-PLUGINS-SIG-001: a registry plugin with a pinned key reads as Signed', async () => {
- mockPanel(plugin({ source_repo: 'acme/gotify', signed: true, keyFingerprint: 'AAAAAAAA…BBBBBBBB' }))
- render() {
- mockPanel(plugin({ id: 'something-else' }), registryEntry(entry))
- render([],
- opts: { enabled?: boolean; devLink?: boolean; registry?: Record[] } = {},
+ opts: { enabled?: boolean; devLink?: boolean; registry?: Record[] } = {}
) {
server.use(
- http.get('*/api/admin/plugins', () => HttpResponse.json({
- enabled: opts.enabled ?? true, devLink: opts.devLink ?? false, plugins,
- })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json(opts.registry ?? [])),
- )
+ http.get('*/api/admin/plugins', () =>
+ HttpResponse.json({
+ enabled: opts.enabled ?? true,
+ devLink: opts.devLink ?? false,
+ plugins,
+ })
+ ),
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json(opts.registry ?? []))
+ );
}
function withToast() {
- return render(<> = plugin()) {
- panelWith([p])
- withToast()
- fireEvent.click(await screen.findByTestId(`plugin-row-menu-btn-${p.id}`))
+ panelWith([p]);
+ withToast();
+ fireEvent.click(await screen.findByTestId(`plugin-row-menu-btn-${p.id}`));
}
/** Every modal in the panel closes by clicking its backdrop. */
function closeModal() {
- clickBackdrop(document.querySelector('.trek-modal-backdrop') as HTMLElement)
+ clickBackdrop(document.querySelector('.trek-modal-backdrop') as HTMLElement);
}
it('FE-COMP-PLUGINS-PANEL-014: the error log lists what the runtime recorded', async () => {
- server.use(http.get('*/api/admin/plugins/trek-gotify/errors', () =>
- HttpResponse.json({ errors: [{ ts: '2026-01-01T00:00:00Z', level: 'error', message: 'connect ECONNREFUSED' }] })))
- await openRowMenu()
+ server.use(
+ http.get('*/api/admin/plugins/trek-gotify/errors', () =>
+ HttpResponse.json({ errors: [{ ts: '2026-01-01T00:00:00Z', level: 'error', message: 'connect ECONNREFUSED' }] })
+ )
+ );
+ await openRowMenu();
- fireEvent.click(screen.getByText('View error log'))
- expect(await screen.findByText('connect ECONNREFUSED')).toBeInTheDocument()
- expect(screen.getByText('error')).toBeInTheDocument()
+ fireEvent.click(screen.getByText('View error log'));
+ expect(await screen.findByText('connect ECONNREFUSED')).toBeInTheDocument();
+ expect(screen.getByText('error')).toBeInTheDocument();
- closeModal()
- await waitFor(() => expect(screen.queryByText('connect ECONNREFUSED')).not.toBeInTheDocument())
- })
+ closeModal();
+ await waitFor(() => expect(screen.queryByText('connect ECONNREFUSED')).not.toBeInTheDocument());
+ });
it('FE-COMP-PLUGINS-PANEL-015: an unreachable error log still opens, empty', async () => {
- server.use(http.get('*/api/admin/plugins/trek-gotify/errors', () => HttpResponse.error()))
- await openRowMenu()
+ server.use(http.get('*/api/admin/plugins/trek-gotify/errors', () => HttpResponse.error()));
+ await openRowMenu();
- fireEvent.click(screen.getByText('View error log'))
+ fireEvent.click(screen.getByText('View error log'));
- expect(await screen.findByText('No errors logged.')).toBeInTheDocument()
- })
+ expect(await screen.findByText('No errors logged.')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-016: allowed hosts can be added and removed, and a rejected save says why', async () => {
- let hosts: string[] = []
- let puts = 0
+ let hosts: string[] = [];
+ let puts = 0;
server.use(
http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () => HttpResponse.json({ supported: true, hosts })),
http.put('*/api/admin/plugins/trek-gotify/egress-hosts', async ({ request }) => {
- puts += 1
- const body = await request.json() as { hosts: string[] }
- if (puts === 3) return HttpResponse.json({ error: 'not a valid host' }, { status: 400 })
- hosts = body.hosts
- return HttpResponse.json({ hosts })
- }),
- )
- await openRowMenu()
+ puts += 1;
+ const body = (await request.json()) as { hosts: string[] };
+ if (puts === 3) return HttpResponse.json({ error: 'not a valid host' }, { status: 400 });
+ hosts = body.hosts;
+ return HttpResponse.json({ hosts });
+ })
+ );
+ await openRowMenu();
- fireEvent.click(screen.getByText('Allowed hosts'))
- expect(await screen.findByText('No hosts added yet.')).toBeInTheDocument()
- expect(screen.getByRole('button', { name: /^add$/i })).toBeDisabled()
+ fireEvent.click(screen.getByText('Allowed hosts'));
+ expect(await screen.findByText('No hosts added yet.')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: /^add$/i })).toBeDisabled();
- fireEvent.change(screen.getByPlaceholderText('gotify.example.com'), { target: { value: 'gotify.lan' } })
- fireEvent.click(screen.getByRole('button', { name: /^add$/i }))
- expect(await screen.findByText('gotify.lan')).toBeInTheDocument()
+ fireEvent.change(screen.getByPlaceholderText('gotify.example.com'), { target: { value: 'gotify.lan' } });
+ fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
+ expect(await screen.findByText('gotify.lan')).toBeInTheDocument();
- fireEvent.click(screen.getAllByLabelText('Delete')[0])
- await waitFor(() => expect(screen.getByText('No hosts added yet.')).toBeInTheDocument())
+ fireEvent.click(screen.getAllByLabelText('Delete')[0]);
+ await waitFor(() => expect(screen.getByText('No hosts added yet.')).toBeInTheDocument());
- fireEvent.change(screen.getByPlaceholderText('gotify.example.com'), { target: { value: 'bad host' } })
- fireEvent.click(screen.getByRole('button', { name: /^add$/i }))
- expect(await screen.findByText('not a valid host')).toBeInTheDocument()
- })
+ fireEvent.change(screen.getByPlaceholderText('gotify.example.com'), { target: { value: 'bad host' } });
+ fireEvent.click(screen.getByRole('button', { name: /^add$/i }));
+ expect(await screen.findByText('not a valid host')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-017: a plugin whose hosts are fixed in its manifest says the list is unsupported', async () => {
- server.use(http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () => HttpResponse.error()))
- await openRowMenu()
+ server.use(http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () => HttpResponse.error()));
+ await openRowMenu();
- fireEvent.click(screen.getByText('Allowed hosts'))
+ fireEvent.click(screen.getByText('Allowed hosts'));
- expect(await screen.findByText(/does not use operator-supplied hosts/i)).toBeInTheDocument()
- expect(screen.queryByPlaceholderText('gotify.example.com')).not.toBeInTheDocument()
- })
+ expect(await screen.findByText(/does not use operator-supplied hosts/i)).toBeInTheDocument();
+ expect(screen.queryByPlaceholderText('gotify.example.com')).not.toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-018: Delete asks first, then uninstalls with its data', async () => {
- let body: unknown = null
- server.use(http.post('*/api/admin/plugins/trek-gotify/uninstall', async ({ request }) => {
- body = await request.json()
- return HttpResponse.json({ ok: true })
- }))
- await openRowMenu()
+ let body: unknown = null;
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/uninstall', async ({ request }) => {
+ body = await request.json();
+ return HttpResponse.json({ ok: true });
+ })
+ );
+ await openRowMenu();
- fireEvent.click(screen.getByText('Delete'))
- expect(await screen.findByText('Uninstall plugin?')).toBeInTheDocument()
+ fireEvent.click(screen.getByText('Delete'));
+ expect(await screen.findByText('Uninstall plugin?')).toBeInTheDocument();
- fireEvent.click(screen.getAllByRole('button', { name: /^delete$/i }).pop()!)
+ fireEvent.click(screen.getAllByRole('button', { name: /^delete$/i }).pop()!);
- expect(await screen.findByText('Plugin uninstalled')).toBeInTheDocument()
- expect(body).toEqual({ deleteData: true })
- })
+ expect(await screen.findByText('Plugin uninstalled')).toBeInTheDocument();
+ expect(body).toEqual({ deleteData: true });
+ });
it('FE-COMP-PLUGINS-PANEL-019: Restart cycles the plugin off and on again', async () => {
- const seen: string[] = []
+ const seen: string[] = [];
server.use(
- http.post('*/api/admin/plugins/trek-gotify/deactivate', () => { seen.push('deactivate'); return HttpResponse.json({ ok: true }) }),
- http.post('*/api/admin/plugins/trek-gotify/activate', () => { seen.push('activate'); return HttpResponse.json({ ok: true }) }),
- )
- await openRowMenu(plugin({ enabled: 1, status: 'active' }))
+ http.post('*/api/admin/plugins/trek-gotify/deactivate', () => {
+ seen.push('deactivate');
+ return HttpResponse.json({ ok: true });
+ }),
+ http.post('*/api/admin/plugins/trek-gotify/activate', () => {
+ seen.push('activate');
+ return HttpResponse.json({ ok: true });
+ })
+ );
+ await openRowMenu(plugin({ enabled: 1, status: 'active' }));
- fireEvent.click(screen.getByText('Restart'))
+ fireEvent.click(screen.getByText('Restart'));
- expect(await screen.findByText('Plugin restarted')).toBeInTheDocument()
- expect(seen).toEqual(['deactivate', 'activate'])
- })
+ expect(await screen.findByText('Plugin restarted')).toBeInTheDocument();
+ expect(seen).toEqual(['deactivate', 'activate']);
+ });
it('FE-COMP-PLUGINS-PANEL-020: a disabled plugin offers no Restart', async () => {
- await openRowMenu(plugin({ enabled: 0, status: 'inactive' }))
+ await openRowMenu(plugin({ enabled: 0, status: 'inactive' }));
- expect(screen.getByText('View error log')).toBeInTheDocument()
- expect(screen.queryByText('Restart')).not.toBeInTheDocument()
- })
+ expect(screen.getByText('View error log')).toBeInTheDocument();
+ expect(screen.queryByText('Restart')).not.toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-049: Allowed hosts is offered only to a plugin that declared operatorEgress', async () => {
// An admin must never be invited to widen egress for a plugin that didn't ask for it
// — same rule the row chip already follows.
- await openRowMenu(plugin({ operatorEgress: false }))
+ await openRowMenu(plugin({ operatorEgress: false }));
- expect(screen.getByText('View error log')).toBeInTheDocument() // menu is open
- expect(screen.queryByText('Allowed hosts')).not.toBeInTheDocument()
- })
+ expect(screen.getByText('View error log')).toBeInTheDocument(); // menu is open
+ expect(screen.queryByText('Allowed hosts')).not.toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-050: a long host list scrolls inside the dialog instead of growing past the viewport (#2159)', async () => {
- server.use(http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () =>
- HttpResponse.json({ supported: true, hosts: ['gotify.lan', 'ntfy.lan'] })))
- await openRowMenu()
+ server.use(
+ http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () =>
+ HttpResponse.json({ supported: true, hosts: ['gotify.lan', 'ntfy.lan'] })
+ )
+ );
+ await openRowMenu();
- fireEvent.click(screen.getByText('Allowed hosts'))
+ fireEvent.click(screen.getByText('Allowed hosts'));
// The card is capped and its body scrolls, so the input, the Add button and the
// restart note below the list stay reachable however many hosts the admin entered.
- const body = (await screen.findByText('gotify.lan')).closest('.overflow-y-auto')
- expect(body).not.toBeNull()
- expect(body).toContainElement(screen.getByPlaceholderText('gotify.example.com'))
- expect(body!.parentElement!.className).toContain('max-h-full')
- })
-})
+ const body = (await screen.findByText('gotify.lan')).closest('.overflow-y-auto');
+ expect(body).not.toBeNull();
+ expect(body).toContainElement(screen.getByPlaceholderText('gotify.example.com'));
+ expect(body!.parentElement!.className).toContain('max-h-full');
+ });
+});
describe('AdminPluginsPanel — enabling a plugin', () => {
it('FE-COMP-PLUGINS-PANEL-021: turning a plugin off deactivates it', async () => {
- let called = false
- panelWith([plugin({ enabled: 1, status: 'active' })])
- server.use(http.post('*/api/admin/plugins/trek-gotify/deactivate', () => { called = true; return HttpResponse.json({ ok: true }) }))
- withToast()
- await screen.findByText('Gotify')
+ let called = false;
+ panelWith([plugin({ enabled: 1, status: 'active' })]);
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/deactivate', () => {
+ called = true;
+ return HttpResponse.json({ ok: true });
+ })
+ );
+ withToast();
+ await screen.findByText('Gotify');
- fireEvent.click(rowToggle('Gotify'))
+ fireEvent.click(rowToggle('Gotify'));
- expect(await screen.findByText('Plugin deactivated')).toBeInTheDocument()
- expect(called).toBe(true)
- })
+ expect(await screen.findByText('Plugin deactivated')).toBeInTheDocument();
+ expect(called).toBe(true);
+ });
it('FE-COMP-PLUGINS-PANEL-022: turning one on also reports the dependencies it enabled first', async () => {
panelWith([
- plugin({ enabled: 0, status: 'inactive', dependencies: { pluginDependencies: [{ id: 'trek-core', version: '^1.0.0' }] } }),
+ plugin({
+ enabled: 0,
+ status: 'inactive',
+ dependencies: { pluginDependencies: [{ id: 'trek-core', version: '^1.0.0' }] },
+ }),
plugin({ id: 'trek-core', name: 'Core', enabled: 0, status: 'inactive' }),
- ])
- server.use(http.post('*/api/admin/plugins/trek-gotify/activate', () => HttpResponse.json({ ok: true })))
- withToast()
- await screen.findByText('Gotify')
+ ]);
+ server.use(http.post('*/api/admin/plugins/trek-gotify/activate', () => HttpResponse.json({ ok: true })));
+ withToast();
+ await screen.findByText('Gotify');
- fireEvent.click(rowToggle('Gotify'))
+ fireEvent.click(rowToggle('Gotify'));
- expect(await screen.findByText('Plugin activated')).toBeInTheDocument()
- expect(await screen.findByText(/enabled required plugin\(s\) first: core/i)).toBeInTheDocument()
- })
+ expect(await screen.findByText('Plugin activated')).toBeInTheDocument();
+ expect(await screen.findByText(/enabled required plugin\(s\) first: core/i)).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-023: a disabled required addon is reported as a toast, not a dialog', async () => {
- panelWith([plugin({ enabled: 0, status: 'inactive' })])
- server.use(http.post('*/api/admin/plugins/trek-gotify/activate', () =>
- HttpResponse.json({ code: 'ADDON_DISABLED', addons: ['journey'] }, { status: 409 })))
- withToast()
- await screen.findByText('Gotify')
-
- fireEvent.click(rowToggle('Gotify'))
-
- expect(await screen.findByText(/enable the required addon\(s\) first: journey/i)).toBeInTheDocument()
- })
-
- it('FE-COMP-PLUGINS-PANEL-024: any other activation failure surfaces the server message', async () => {
- panelWith([plugin({ enabled: 0, status: 'inactive' })])
- server.use(http.post('*/api/admin/plugins/trek-gotify/activate', () =>
- HttpResponse.json({ code: 'DEPENDENCY_CYCLE', error: 'circular dependency' }, { status: 409 })))
- withToast()
- await screen.findByText('Gotify')
-
- fireEvent.click(rowToggle('Gotify'))
-
- expect(await screen.findByText('circular dependency')).toBeInTheDocument()
- })
-
- it('FE-COMP-PLUGINS-PANEL-025: a missing dependency opens the resolve dialog and one click fixes it', async () => {
- let activates = 0
- let installed: unknown = null
- panelWith([plugin({ enabled: 0, status: 'inactive' })])
- server.use(
- http.post('*/api/admin/plugins/trek-gotify/activate', () => {
- activates += 1
- return activates === 1
- ? HttpResponse.json({
- code: 'DEPENDENCY_MISSING',
- missing: [{ id: 'trek-core', version: '^1.0.0' }],
- versionMismatch: [{ id: 'trek-old', wanted: '^2.0.0', installed: '1.0.0' }],
- }, { status: 409 })
- : HttpResponse.json({ ok: true })
- }),
- http.post('*/api/admin/plugins/install', async ({ request }) => {
- installed = await request.json()
- return HttpResponse.json({ installed: ['trek-core'], requiredAddons: ['journey'] })
- }),
- )
- withToast()
- await screen.findByText('Gotify')
-
- fireEvent.click(rowToggle('Gotify'))
- expect(await screen.findByText('Missing dependencies')).toBeInTheDocument()
- expect(screen.getByText('Requires ^1.0.0')).toBeInTheDocument()
- expect(screen.getByText('Needs ^2.0.0 — 1.0.0 is installed')).toBeInTheDocument()
- expect(screen.getByText(/downloads the latest compatible version/i)).toBeInTheDocument()
-
- fireEvent.click(screen.getByRole('button', { name: /^download$/i }))
-
- expect(await screen.findByText('Downloaded trek-core')).toBeInTheDocument()
- expect(installed).toEqual({ id: 'trek-core', constraint: '^1.0.0', withDependencies: true })
- expect(await screen.findByText(/enable the required addon\(s\) first: journey/i)).toBeInTheDocument()
- await waitFor(() => expect(screen.queryByText('Missing dependencies')).not.toBeInTheDocument())
- })
-
- it('FE-COMP-PLUGINS-PANEL-026: the resolve dialog can be dismissed without downloading anything', async () => {
- let installs = 0
- panelWith([plugin({ enabled: 0, status: 'inactive' })])
+ panelWith([plugin({ enabled: 0, status: 'inactive' })]);
server.use(
http.post('*/api/admin/plugins/trek-gotify/activate', () =>
- HttpResponse.json({ code: 'DEPENDENCY_MISSING', missing: [{ id: 'trek-core', version: '^1.0.0' }], versionMismatch: [] }, { status: 409 })),
- http.post('*/api/admin/plugins/install', () => { installs += 1; return HttpResponse.json({}) }),
- )
- withToast()
- await screen.findByText('Gotify')
+ HttpResponse.json({ code: 'ADDON_DISABLED', addons: ['journey'] }, { status: 409 })
+ )
+ );
+ withToast();
+ await screen.findByText('Gotify');
- fireEvent.click(rowToggle('Gotify'))
+ fireEvent.click(rowToggle('Gotify'));
+
+ expect(await screen.findByText(/enable the required addon\(s\) first: journey/i)).toBeInTheDocument();
+ });
+
+ it('FE-COMP-PLUGINS-PANEL-024: any other activation failure surfaces the server message', async () => {
+ panelWith([plugin({ enabled: 0, status: 'inactive' })]);
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/activate', () =>
+ HttpResponse.json({ code: 'DEPENDENCY_CYCLE', error: 'circular dependency' }, { status: 409 })
+ )
+ );
+ withToast();
+ await screen.findByText('Gotify');
+
+ fireEvent.click(rowToggle('Gotify'));
+
+ expect(await screen.findByText('circular dependency')).toBeInTheDocument();
+ });
+
+ it('FE-COMP-PLUGINS-PANEL-025: a missing dependency opens the resolve dialog and one click fixes it', async () => {
+ let activates = 0;
+ let installed: unknown = null;
+ panelWith([plugin({ enabled: 0, status: 'inactive' })]);
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/activate', () => {
+ activates += 1;
+ return activates === 1
+ ? HttpResponse.json(
+ {
+ code: 'DEPENDENCY_MISSING',
+ missing: [{ id: 'trek-core', version: '^1.0.0' }],
+ versionMismatch: [{ id: 'trek-old', wanted: '^2.0.0', installed: '1.0.0' }],
+ },
+ { status: 409 }
+ )
+ : HttpResponse.json({ ok: true });
+ }),
+ http.post('*/api/admin/plugins/install', async ({ request }) => {
+ installed = await request.json();
+ return HttpResponse.json({ installed: ['trek-core'], requiredAddons: ['journey'] });
+ })
+ );
+ withToast();
+ await screen.findByText('Gotify');
+
+ fireEvent.click(rowToggle('Gotify'));
+ expect(await screen.findByText('Missing dependencies')).toBeInTheDocument();
+ expect(screen.getByText('Requires ^1.0.0')).toBeInTheDocument();
+ expect(screen.getByText('Needs ^2.0.0 — 1.0.0 is installed')).toBeInTheDocument();
+ expect(screen.getByText(/downloads the latest compatible version/i)).toBeInTheDocument();
+
+ fireEvent.click(screen.getByRole('button', { name: /^download$/i }));
+
+ expect(await screen.findByText('Downloaded trek-core')).toBeInTheDocument();
+ expect(installed).toEqual({ id: 'trek-core', constraint: '^1.0.0', withDependencies: true });
+ expect(await screen.findByText(/enable the required addon\(s\) first: journey/i)).toBeInTheDocument();
+ await waitFor(() => expect(screen.queryByText('Missing dependencies')).not.toBeInTheDocument());
+ });
+
+ it('FE-COMP-PLUGINS-PANEL-026: the resolve dialog can be dismissed without downloading anything', async () => {
+ let installs = 0;
+ panelWith([plugin({ enabled: 0, status: 'inactive' })]);
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/activate', () =>
+ HttpResponse.json(
+ { code: 'DEPENDENCY_MISSING', missing: [{ id: 'trek-core', version: '^1.0.0' }], versionMismatch: [] },
+ { status: 409 }
+ )
+ ),
+ http.post('*/api/admin/plugins/install', () => {
+ installs += 1;
+ return HttpResponse.json({});
+ })
+ );
+ withToast();
+ await screen.findByText('Gotify');
+
+ fireEvent.click(rowToggle('Gotify'));
// The dependency list scrolls; Cancel sits outside it, so it never leaves the viewport (#2159).
- const body = (await screen.findByText('trek-core')).closest('.overflow-y-auto')
- expect(body).not.toBeNull()
- expect(body).not.toContainElement(screen.getByRole('button', { name: /^cancel$/i }))
- fireEvent.click(screen.getByRole('button', { name: /^cancel$/i }))
+ const body = (await screen.findByText('trek-core')).closest('.overflow-y-auto');
+ expect(body).not.toBeNull();
+ expect(body).not.toContainElement(screen.getByRole('button', { name: /^cancel$/i }));
+ fireEvent.click(screen.getByRole('button', { name: /^cancel$/i }));
- await waitFor(() => expect(screen.queryByText('Missing dependencies')).not.toBeInTheDocument())
- expect(installs).toBe(0)
- })
+ await waitFor(() => expect(screen.queryByText('Missing dependencies')).not.toBeInTheDocument());
+ expect(installs).toBe(0);
+ });
it('FE-COMP-PLUGINS-PANEL-027: widened permissions route to the consent dialog, which can be deferred', async () => {
- panelWith([plugin({ enabled: 0, status: 'inactive', source_repo: 'acme/gotify', signed: false })])
- server.use(http.post('*/api/admin/plugins/trek-gotify/activate', () =>
- HttpResponse.json({ code: 'CONSENT_REQUIRED', newPermissions: ['db:read:trips', 'weird:perm'], newEgress: ['api.acme.io'] }, { status: 409 })))
- withToast()
- await screen.findByText('Gotify')
+ panelWith([plugin({ enabled: 0, status: 'inactive', source_repo: 'acme/gotify', signed: false })]);
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/activate', () =>
+ HttpResponse.json(
+ { code: 'CONSENT_REQUIRED', newPermissions: ['db:read:trips', 'weird:perm'], newEgress: ['api.acme.io'] },
+ { status: 409 }
+ )
+ )
+ );
+ withToast();
+ await screen.findByText('Gotify');
- fireEvent.click(rowToggle('Gotify'))
+ fireEvent.click(rowToggle('Gotify'));
- expect(await screen.findByText('This update needs new permissions')).toBeInTheDocument()
- expect(screen.getByText('Read trips the acting user can access')).toBeInTheDocument()
+ expect(await screen.findByText('This update needs new permissions')).toBeInTheDocument();
+ expect(screen.getByText('Read trips the acting user can access')).toBeInTheDocument();
// An unknown permission is still shown — as its raw code
- expect(screen.getByText('weird:perm')).toBeInTheDocument()
- expect(screen.getByText('api.acme.io')).toBeInTheDocument()
+ expect(screen.getByText('weird:perm')).toBeInTheDocument();
+ expect(screen.getByText('api.acme.io')).toBeInTheDocument();
// A long permission list scrolls inside the dialog; the decision buttons sit outside
// the scroll container, so they never leave the viewport (#2159).
- const body = screen.getByText('Read trips the acting user can access').closest('.overflow-y-auto')
- expect(body).not.toBeNull()
- expect(body).not.toContainElement(screen.getByRole('button', { name: /keep off for now/i }))
+ const body = screen.getByText('Read trips the acting user can access').closest('.overflow-y-auto');
+ expect(body).not.toBeNull();
+ expect(body).not.toContainElement(screen.getByRole('button', { name: /keep off for now/i }));
- fireEvent.click(screen.getByRole('button', { name: /keep off for now/i }))
- expect(await screen.findByText(/left off until you approve/i)).toBeInTheDocument()
- })
+ fireEvent.click(screen.getByRole('button', { name: /keep off for now/i }));
+ expect(await screen.findByText(/left off until you approve/i)).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-028: approving consent re-activates with the consent flag', async () => {
- const bodies: unknown[] = []
- panelWith([plugin({ enabled: 0, status: 'inactive' })])
- server.use(http.post('*/api/admin/plugins/trek-gotify/activate', async ({ request }) => {
- bodies.push(await request.json())
- return bodies.length === 1
- ? HttpResponse.json({ code: 'CONSENT_REQUIRED', newPermissions: ['db:read:trips'], newEgress: [] }, { status: 409 })
- : HttpResponse.json({ ok: true })
- }))
- withToast()
- await screen.findByText('Gotify')
+ const bodies: unknown[] = [];
+ panelWith([plugin({ enabled: 0, status: 'inactive' })]);
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/activate', async ({ request }) => {
+ bodies.push(await request.json());
+ return bodies.length === 1
+ ? HttpResponse.json(
+ { code: 'CONSENT_REQUIRED', newPermissions: ['db:read:trips'], newEgress: [] },
+ { status: 409 }
+ )
+ : HttpResponse.json({ ok: true });
+ })
+ );
+ withToast();
+ await screen.findByText('Gotify');
- fireEvent.click(rowToggle('Gotify'))
- fireEvent.click(await screen.findByRole('button', { name: /approve & turn on/i }))
+ fireEvent.click(rowToggle('Gotify'));
+ fireEvent.click(await screen.findByRole('button', { name: /approve & turn on/i }));
- expect(await screen.findByText('Plugin updated')).toBeInTheDocument()
- expect(bodies[1]).toEqual({ consent: true })
- })
-})
+ expect(await screen.findByText('Plugin updated')).toBeInTheDocument();
+ expect(bodies[1]).toEqual({ consent: true });
+ });
+});
describe('AdminPluginsPanel — updates', () => {
- const outdated = plugin({ source_repo: 'acme/gotify', version: '1.0.0', operatorEgress: false })
+ const outdated = plugin({ source_repo: 'acme/gotify', version: '1.0.0', operatorEgress: false });
it('FE-COMP-PLUGINS-PANEL-029: the update banner updates every outdated plugin at once', async () => {
- const updated: string[] = []
+ const updated: string[] = [];
panelWith(
- [outdated, plugin({ id: 'trek-ntfy', name: 'Ntfy', source_repo: 'acme/ntfy', version: '1.0.0', operatorEgress: false })],
- { registry: [registryEntry({ latest: '2.0.0' }), registryEntry({ id: 'trek-ntfy', latest: '3.0.0' })] },
- )
- server.use(http.post('*/api/admin/plugins/:id/update', ({ params }) => {
- updated.push(String(params.id))
- return HttpResponse.json({ version: '2.0.0', activated: true, newPermissions: [], newEgress: [] })
- }))
- withToast()
+ [
+ outdated,
+ plugin({ id: 'trek-ntfy', name: 'Ntfy', source_repo: 'acme/ntfy', version: '1.0.0', operatorEgress: false }),
+ ],
+ { registry: [registryEntry({ latest: '2.0.0' }), registryEntry({ id: 'trek-ntfy', latest: '3.0.0' })] }
+ );
+ server.use(
+ http.post('*/api/admin/plugins/:id/update', ({ params }) => {
+ updated.push(String(params.id));
+ return HttpResponse.json({ version: '2.0.0', activated: true, newPermissions: [], newEgress: [] });
+ })
+ );
+ withToast();
- expect(await screen.findByText('2 updates available for your plugins.')).toBeInTheDocument()
- fireEvent.click(screen.getByRole('button', { name: /update all/i }))
+ expect(await screen.findByText('2 updates available for your plugins.')).toBeInTheDocument();
+ fireEvent.click(screen.getByRole('button', { name: /update all/i }));
- await waitFor(() => expect([...updated].sort()).toEqual(['trek-gotify', 'trek-ntfy']))
- expect((await screen.findAllByText('Plugin updated')).length).toBeGreaterThan(0)
- })
+ await waitFor(() => expect([...updated].sort()).toEqual(['trek-gotify', 'trek-ntfy']));
+ expect((await screen.findAllByText('Plugin updated')).length).toBeGreaterThan(0);
+ });
it('FE-COMP-PLUGINS-PANEL-030: an update that widens permissions queues the consent dialog', async () => {
- panelWith([outdated], { registry: [registryEntry({ latest: '2.0.0', signed: false })] })
- server.use(http.post('*/api/admin/plugins/trek-gotify/update', () =>
- HttpResponse.json({ version: '2.0.0', activated: false, newPermissions: ['db:read:users'], newEgress: [] })))
- withToast()
+ panelWith([outdated], { registry: [registryEntry({ latest: '2.0.0', signed: false })] });
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/update', () =>
+ HttpResponse.json({ version: '2.0.0', activated: false, newPermissions: ['db:read:users'], newEgress: [] })
+ )
+ );
+ withToast();
- fireEvent.click(await screen.findByRole('button', { name: /update → v2\.0\.0/i }))
+ fireEvent.click(await screen.findByRole('button', { name: /update → v2\.0\.0/i }));
- expect(await screen.findByText('This update needs new permissions')).toBeInTheDocument()
- expect(screen.getByText(/read basic profile info/i)).toBeInTheDocument()
+ expect(await screen.findByText('This update needs new permissions')).toBeInTheDocument();
+ expect(screen.getByText(/read basic profile info/i)).toBeInTheDocument();
// The registry says the new code is unsigned — say so where the rights get widened
- expect(screen.getByText(/nothing ties this version to its author/i)).toBeInTheDocument()
- })
+ expect(screen.getByText(/nothing ties this version to its author/i)).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-031: a failed update that is not a signature refusal is a plain toast', async () => {
- panelWith([outdated], { registry: [registryEntry({ latest: '2.0.0' })] })
- server.use(http.post('*/api/admin/plugins/trek-gotify/update', () =>
- HttpResponse.json({ error: 'registry unreachable' }, { status: 502 })))
- withToast()
+ panelWith([outdated], { registry: [registryEntry({ latest: '2.0.0' })] });
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/update', () =>
+ HttpResponse.json({ error: 'registry unreachable' }, { status: 502 })
+ )
+ );
+ withToast();
- fireEvent.click(await screen.findByRole('button', { name: /update → v2\.0\.0/i }))
+ fireEvent.click(await screen.findByRole('button', { name: /update → v2\.0\.0/i }));
- expect(await screen.findByText('registry unreachable')).toBeInTheDocument()
- })
+ expect(await screen.findByText('registry unreachable')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-032: a re-trusted update that widens rights still asks for consent', async () => {
- panelWith([plugin({
- source_repo: 'acme/gotify', version: '1.0.0', keyFingerprint: 'OLDAAAAA…BBBBBBBB', operatorEgress: false,
- updateBlock: { code: 'SIGNATURE_KEY_CHANGED', version: '2.0.0', detail: 'key rotated' },
- })], { registry: [registryEntry({ latest: '2.0.0' })] })
- server.use(http.post('*/api/admin/plugins/trek-gotify/retrust', () =>
- HttpResponse.json({ version: '2.0.0', activated: false, newPermissions: ['db:read:trips'], newEgress: ['api.acme.io'] })))
- withToast()
+ panelWith(
+ [
+ plugin({
+ source_repo: 'acme/gotify',
+ version: '1.0.0',
+ keyFingerprint: 'OLDAAAAA…BBBBBBBB',
+ operatorEgress: false,
+ updateBlock: { code: 'SIGNATURE_KEY_CHANGED', version: '2.0.0', detail: 'key rotated' },
+ }),
+ ],
+ { registry: [registryEntry({ latest: '2.0.0' })] }
+ );
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/retrust', () =>
+ HttpResponse.json({
+ version: '2.0.0',
+ activated: false,
+ newPermissions: ['db:read:trips'],
+ newEgress: ['api.acme.io'],
+ })
+ )
+ );
+ withToast();
- fireEvent.click(await screen.findByRole('button', { name: /^review$/i }))
- fireEvent.click(await screen.findByRole('button', { name: /trust the new key/i }))
+ fireEvent.click(await screen.findByRole('button', { name: /^review$/i }));
+ fireEvent.click(await screen.findByRole('button', { name: /trust the new key/i }));
- expect(await screen.findByText('This update needs new permissions')).toBeInTheDocument()
- expect(screen.getByText('api.acme.io')).toBeInTheDocument()
- })
+ expect(await screen.findByText('This update needs new permissions')).toBeInTheDocument();
+ expect(screen.getByText('api.acme.io')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-033: a failed re-trust surfaces the server message', async () => {
- panelWith([plugin({
- source_repo: 'acme/gotify', version: '1.0.0', keyFingerprint: 'OLDAAAAA…BBBBBBBB', operatorEgress: false,
- updateBlock: { code: 'SIGNATURE_KEY_CHANGED', version: '2.0.0', detail: 'key rotated' },
- })], { registry: [registryEntry({ latest: '2.0.0' })] })
- server.use(http.post('*/api/admin/plugins/trek-gotify/retrust', () =>
- HttpResponse.json({ error: 'key does not match' }, { status: 400 })))
- withToast()
+ panelWith(
+ [
+ plugin({
+ source_repo: 'acme/gotify',
+ version: '1.0.0',
+ keyFingerprint: 'OLDAAAAA…BBBBBBBB',
+ operatorEgress: false,
+ updateBlock: { code: 'SIGNATURE_KEY_CHANGED', version: '2.0.0', detail: 'key rotated' },
+ }),
+ ],
+ { registry: [registryEntry({ latest: '2.0.0' })] }
+ );
+ server.use(
+ http.post('*/api/admin/plugins/trek-gotify/retrust', () =>
+ HttpResponse.json({ error: 'key does not match' }, { status: 400 })
+ )
+ );
+ withToast();
- fireEvent.click(await screen.findByRole('button', { name: /^review$/i }))
- fireEvent.click(await screen.findByRole('button', { name: /trust the new key/i }))
+ fireEvent.click(await screen.findByRole('button', { name: /^review$/i }));
+ fireEvent.click(await screen.findByRole('button', { name: /trust the new key/i }));
- expect(await screen.findByText('key does not match')).toBeInTheDocument()
- })
+ expect(await screen.findByText('key does not match')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-PANEL-034a: a stable release counts as newer than the prerelease of the same version', async () => {
panelWith([plugin({ source_repo: 'acme/gotify', version: '2.0.0-beta.1', operatorEgress: false })], {
registry: [registryEntry({ latest: '2.0.0' })],
- })
- render(, detail?: Record) {
@@ -1470,796 +1809,996 @@ describe('AdminPluginsPanel — Discover cards and the detail modal', () => {
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [] })),
http.get('*/api/admin/plugins/registry', () => HttpResponse.json([registryEntry(entry)])),
http.get('*/api/admin/plugins/registry/trek-gotify', () =>
- detail ? HttpResponse.json(detail) : HttpResponse.json({ error: 'gone' }, { status: 404 })),
- )
+ detail ? HttpResponse.json(detail) : HttpResponse.json({ error: 'gone' }, { status: 404 })
+ )
+ );
}
function manifestDetail(over: Record = {}, manifest: Record = {}) {
return {
- id: 'trek-gotify', name: 'Gotify', author: 'Acme', description: 'Push', repo: 'acme/gotify',
- type: 'integration', tags: [], size: 4096, publishedAt: null, latest: '2.0.0',
- manifest: { permissions: [], egress: [], settings: [], license: 'MIT', icon: null, operatorEgress: false, ...manifest },
+ id: 'trek-gotify',
+ name: 'Gotify',
+ author: 'Acme',
+ description: 'Push',
+ repo: 'acme/gotify',
+ type: 'integration',
+ tags: [],
+ size: 4096,
+ publishedAt: null,
+ latest: '2.0.0',
+ manifest: {
+ permissions: [],
+ egress: [],
+ settings: [],
+ license: 'MIT',
+ icon: null,
+ operatorEgress: false,
+ ...manifest,
+ },
...over,
- }
+ };
}
it('FE-COMP-PLUGINS-PANEL-040: a card shows its compact download count and falls back on a broken shot', async () => {
- discoverWith({ downloadCount: 1234, screenshotUrl: 'https://example.com/shot.png', reviewedAt: '2026-01-05T00:00:00Z' })
- const { container } = render().egress
- delete (detail.manifest as Record).settings
- delete (detail.manifest as Record).permissions
- discoverWith({}, detail)
- render().egress;
+ delete (detail.manifest as Record).settings;
+ delete (detail.manifest as Record).permissions;
+ discoverWith({}, detail);
+ render( = {}) => plugin({
- id: 'a-widget', name: 'Alpha Widget', description: 'a widget', type: 'widget',
- version: '1.0.0', status: 'active', enabled: 1, operatorEgress: false,
- ...over,
- })
+ const row = (over: Record = {}) =>
+ plugin({
+ id: 'a-widget',
+ name: 'Alpha Widget',
+ description: 'a widget',
+ type: 'widget',
+ version: '1.0.0',
+ status: 'active',
+ enabled: 1,
+ operatorEgress: false,
+ ...over,
+ });
function mockPanel(rows: Record[], registry: unknown = []) {
server.use(
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: rows })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json(registry)),
- )
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json(registry))
+ );
}
const three = () => [
row(),
- row({ id: 'b-integration', name: 'Beta Bridge', description: 'a bridge', type: 'integration', enabled: 0, status: 'inactive' }),
- row({ id: 'c-page', name: 'Gamma Page', description: 'a page', type: 'page', enabled: 1, status: 'error', last_error: 'boom' }),
- ]
+ row({
+ id: 'b-integration',
+ name: 'Beta Bridge',
+ description: 'a bridge',
+ type: 'integration',
+ enabled: 0,
+ status: 'inactive',
+ }),
+ row({
+ id: 'c-page',
+ name: 'Gamma Page',
+ description: 'a page',
+ type: 'page',
+ enabled: 1,
+ status: 'error',
+ last_error: 'boom',
+ }),
+ ];
const pickFilter = async (user: ReturnType, filter: RegExp, option: RegExp) => {
- await user.click(screen.getByTitle(filter))
- await user.click(screen.getByRole('button', { name: option }))
- }
+ await user.click(screen.getByTitle(filter));
+ await user.click(screen.getByRole('button', { name: option }));
+ };
it('FE-W5PLG-001: the search box narrows the installed list by name and description', async () => {
- const user = userEvent.setup()
- mockPanel(three())
- render( = {}) => plugin({
- id: 'a-widget', name: 'Alpha Widget', description: 'a widget', type: 'widget',
- version: '1.0.0', status: 'active', enabled: 1, operatorEgress: false,
- permissions: JSON.stringify([]),
- ...over,
- })
+ const row = (over: Record = {}) =>
+ plugin({
+ id: 'a-widget',
+ name: 'Alpha Widget',
+ description: 'a widget',
+ type: 'widget',
+ version: '1.0.0',
+ status: 'active',
+ enabled: 1,
+ operatorEgress: false,
+ permissions: JSON.stringify([]),
+ ...over,
+ });
const regItem = (over: Record = {}) => ({
- id: 'r-a', name: 'Mapper', author: 'ann', description: 'maps things', type: 'widget',
- latest: '2.0.0', repo: 'ann/mapper', signed: true, ...over,
- })
+ id: 'r-a',
+ name: 'Mapper',
+ author: 'ann',
+ description: 'maps things',
+ type: 'widget',
+ latest: '2.0.0',
+ repo: 'ann/mapper',
+ signed: true,
+ ...over,
+ });
function mockPanel(rows: Record[], registry: unknown = []) {
server.use(
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: rows })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json(registry)),
- )
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json(registry))
+ );
}
const openDiscover = async (user: ReturnType) => {
- await user.click(screen.getByRole('tab', { name: /Discover/ }))
- }
+ await user.click(screen.getByRole('tab', { name: /Discover/ }));
+ };
it('FE-W5PLG-016: leaving Discover snaps the downloads sort back to name', async () => {
- const user = userEvent.setup()
- mockPanel([row()], [regItem({ downloadCount: 5 })])
- render( = {}) => plugin({
- source_repo: 'acme/gotify', signed: true, keyFingerprint: 'OLDKEYaa…aaaaaaaa',
- updateBlock: { code: 'SIGNATURE_KEY_CHANGED', detail: 'the signing key changed', version: '2.0.0' },
- ...over,
- })
+ const blocked = (over: Record = {}) =>
+ plugin({
+ source_repo: 'acme/gotify',
+ signed: true,
+ keyFingerprint: 'OLDKEYaa…aaaaaaaa',
+ updateBlock: { code: 'SIGNATURE_KEY_CHANGED', detail: 'the signing key changed', version: '2.0.0' },
+ ...over,
+ });
function mockPanel(row: Record, registry: unknown[] = []) {
server.use(
http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [row] })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json(registry)),
- )
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json(registry))
+ );
}
it('FE-W5PLG-024: a long new key is shown head…tail next to the pinned one', async () => {
- const key = 'untrusted comment: minisign key\nRWQf6LRCGA9iA1234567890ABCDEFGH'
- mockPanel(blocked(), [{ id: 'trek-gotify', name: 'Gotify', author: 'acme', description: 'd', type: 'integration', latest: '2.0.0', authorPublicKey: key }])
- render( = {}) => plugin({
- id: 'a-widget', name: 'Alpha Widget', type: 'widget', version: '1.0.0', operatorEgress: false, ...over,
- })
+ const updatableRow = (over: Record = {}) =>
+ plugin({
+ id: 'a-widget',
+ name: 'Alpha Widget',
+ type: 'widget',
+ version: '1.0.0',
+ operatorEgress: false,
+ ...over,
+ });
it('FE-W5PLG-030: Update all sends the second update only after the first came back', async () => {
- const started: string[] = []
- let release = () => {}
- const gate = new Promise(resolve => { release = resolve })
+ const started: string[] = [];
+ let release = () => {};
+ const gate = new Promise((resolve) => {
+ release = resolve;
+ });
server.use(
- http.get('*/api/admin/plugins', () => HttpResponse.json({
- enabled: true, devLink: false,
- plugins: [updatableRow(), updatableRow({ id: 'b-widget', name: 'Beta Widget' })],
- })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json([
- { id: 'a-widget', name: 'Alpha Widget', author: 'acme', description: 'd', type: 'widget', latest: '2.0.0', latestCompatible: '2.0.0' },
- { id: 'b-widget', name: 'Beta Widget', author: 'acme', description: 'd', type: 'widget', latest: '2.0.0', latestCompatible: '2.0.0' },
- ])),
+ http.get('*/api/admin/plugins', () =>
+ HttpResponse.json({
+ enabled: true,
+ devLink: false,
+ plugins: [updatableRow(), updatableRow({ id: 'b-widget', name: 'Beta Widget' })],
+ })
+ ),
+ http.get('*/api/admin/plugins/registry', () =>
+ HttpResponse.json([
+ {
+ id: 'a-widget',
+ name: 'Alpha Widget',
+ author: 'acme',
+ description: 'd',
+ type: 'widget',
+ latest: '2.0.0',
+ latestCompatible: '2.0.0',
+ },
+ {
+ id: 'b-widget',
+ name: 'Beta Widget',
+ author: 'acme',
+ description: 'd',
+ type: 'widget',
+ latest: '2.0.0',
+ latestCompatible: '2.0.0',
+ },
+ ])
+ ),
http.post('*/api/admin/plugins/:id/update', async ({ params }) => {
- started.push(String(params.id))
- if (started.length === 1) await gate
- return HttpResponse.json({ version: '2.0.0', activated: true, newPermissions: [], newEgress: [] })
- }),
- )
- render() {
- mockList(p)
- render(<> = { apiUrl: 'https://gotify.mydomain.com', apiKey: '••••••••' }) {
- server.use(
- http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({ fields: FIELDS, config })),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 2 }))
- fireEvent.click(screen.getByText('Instance settings'))
- await waitFor(() => expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument(), { timeout: 5000 })
+ async function openSettings(
+ config: Record = { apiUrl: 'https://gotify.mydomain.com', apiKey: '••••••••' }
+ ) {
+ server.use(http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({ fields: FIELDS, config })));
+ await openRowMenu(plugin({ instanceSettingsCount: 2 }));
+ fireEvent.click(screen.getByText('Instance settings'));
+ await waitFor(() => expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument(), {
+ timeout: 5000,
+ });
}
it('FE-COMP-PLUGINS-CFG-001: a plugin with instance fields offers the menu item, opening the form', async () => {
- await openSettings()
+ await openSettings();
// Both declared fields render, the secret as a masked password input.
- expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument()
- expect(screen.getByDisplayValue('••••••••')).toHaveAttribute('type', 'password')
- })
+ expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument();
+ expect(screen.getByDisplayValue('••••••••')).toHaveAttribute('type', 'password');
+ });
it('FE-COMP-PLUGINS-CFG-002: a plugin with NO instance fields gets no menu item', async () => {
- await openRowMenu(plugin({ instanceSettingsCount: 0, instanceActionsCount: 0 }))
- expect(screen.getByText('View error log')).toBeInTheDocument() // menu is open
- expect(screen.queryByText('Instance settings')).not.toBeInTheDocument()
- })
+ await openRowMenu(plugin({ instanceSettingsCount: 0, instanceActionsCount: 0 }));
+ expect(screen.getByText('View error log')).toBeInTheDocument(); // menu is open
+ expect(screen.queryByText('Instance settings')).not.toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-008: a plugin with instance ACTIONS but no fields still offers the menu item', async () => {
server.use(
http.get('*/api/admin/plugins/trek-gotify/config', () =>
- HttpResponse.json({ fields: [], config: {}, actions: [{ key: 'ping', label: 'Ping server', danger: false, scope: 'instance' }] })),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 0, instanceActionsCount: 1 }))
- expect(screen.getByText('Instance settings')).toBeInTheDocument()
- fireEvent.click(screen.getByText('Instance settings'))
- expect(await screen.findByRole('button', { name: 'Ping server' }, { timeout: 5000 })).toBeInTheDocument()
- })
+ HttpResponse.json({
+ fields: [],
+ config: {},
+ actions: [{ key: 'ping', label: 'Ping server', danger: false, scope: 'instance' }],
+ })
+ )
+ );
+ await openRowMenu(plugin({ instanceSettingsCount: 0, instanceActionsCount: 1 }));
+ expect(screen.getByText('Instance settings')).toBeInTheDocument();
+ fireEvent.click(screen.getByText('Instance settings'));
+ expect(await screen.findByRole('button', { name: 'Ping server' }, { timeout: 5000 })).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-003: saving sends the edits but never the untouched secret mask', async () => {
- let body: Record | null = null
+ let body: Record | null = null;
server.use(
http.put('*/api/admin/plugins/trek-gotify/config', async ({ request }) => {
- body = await request.json() as Record
- return HttpResponse.json({ config: body, restarted: false })
- }),
- )
- await openSettings()
+ body = (await request.json()) as Record;
+ return HttpResponse.json({ config: body, restarted: false });
+ })
+ );
+ await openSettings();
- fireEvent.change(screen.getByDisplayValue('https://gotify.mydomain.com'), { target: { value: 'https://new.example' } })
- fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+ fireEvent.change(screen.getByDisplayValue('https://gotify.mydomain.com'), {
+ target: { value: 'https://new.example' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
- expect(await screen.findByText('Settings saved', {}, { timeout: 5000 })).toBeInTheDocument()
+ expect(await screen.findByText('Settings saved', {}, { timeout: 5000 })).toBeInTheDocument();
// The mask is a display artifact, not a value — sending it would overwrite the stored secret.
- expect(body).toEqual({ apiUrl: 'https://new.example' })
- })
+ expect(body).toEqual({ apiUrl: 'https://new.example' });
+ });
it('FE-COMP-PLUGINS-CFG-004: a save that restarted the running plugin says so', async () => {
server.use(
http.put('*/api/admin/plugins/trek-gotify/config', () =>
- HttpResponse.json({ config: { apiUrl: 'https://gotify.mydomain.com' }, restarted: true })),
- )
- await openSettings()
+ HttpResponse.json({ config: { apiUrl: 'https://gotify.mydomain.com' }, restarted: true })
+ )
+ );
+ await openSettings();
- fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+ fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
- expect(await screen.findByText('Settings saved — plugin restarted', {}, { timeout: 5000 })).toBeInTheDocument()
- })
+ expect(await screen.findByText('Settings saved — plugin restarted', {}, { timeout: 5000 })).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-005: renders every declared field type and saves the edited values', async () => {
const RICH = [
- { key: 'mode', label: 'Mode', input_type: 'select', options: [{ value: 'fast', label: 'Fast' }, { value: 'slow', label: 'Slow' }], hint: 'Pick one' },
+ {
+ key: 'mode',
+ label: 'Mode',
+ input_type: 'select',
+ options: [
+ { value: 'fast', label: 'Fast' },
+ { value: 'slow', label: 'Slow' },
+ ],
+ hint: 'Pick one',
+ },
{ key: 'enabled', input_type: 'checkbox' }, // no label — the key stands in
{ key: 'retries', label: 'Retries', input_type: 'number', required: true },
- ]
- let body: Record | null = null
+ ];
+ let body: Record | null = null;
server.use(
http.get('*/api/admin/plugins/trek-gotify/config', () =>
- HttpResponse.json({ fields: RICH, config: { mode: 'slow', enabled: true } })),
+ HttpResponse.json({ fields: RICH, config: { mode: 'slow', enabled: true } })
+ ),
http.put('*/api/admin/plugins/trek-gotify/config', async ({ request }) => {
- body = await request.json() as Record
- return HttpResponse.json({ config: body, restarted: false })
- }),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 3 }))
- fireEvent.click(screen.getByText('Instance settings'))
+ body = (await request.json()) as Record;
+ return HttpResponse.json({ config: body, restarted: false });
+ })
+ );
+ await openRowMenu(plugin({ instanceSettingsCount: 3 }));
+ fireEvent.click(screen.getByText('Instance settings'));
// Stored values land in the right controls; an unset value renders empty.
- const select = await screen.findByRole('button', { name: 'Mode' }, { timeout: 5000 })
- expect(select).toHaveTextContent('Slow')
- const toggle = screen.getByRole('button', { name: 'enabled' })
- expect(toggle).toHaveAttribute('aria-pressed', 'true')
- expect(screen.getByRole('spinbutton')).toHaveValue(null)
- expect(screen.getByText('Pick one')).toBeInTheDocument() // hint
- expect(screen.getByText('enabled')).toBeInTheDocument() // label falls back to the key
+ const select = await screen.findByRole('button', { name: 'Mode' }, { timeout: 5000 });
+ expect(select).toHaveTextContent('Slow');
+ const toggle = screen.getByRole('button', { name: 'enabled' });
+ expect(toggle).toHaveAttribute('aria-pressed', 'true');
+ expect(screen.getByRole('spinbutton')).toHaveValue(null);
+ expect(screen.getByText('Pick one')).toBeInTheDocument(); // hint
+ expect(screen.getByText('enabled')).toBeInTheDocument(); // label falls back to the key
- fireEvent.click(select)
- fireEvent.click(await screen.findByRole('button', { name: 'Fast' }))
- fireEvent.click(toggle)
- fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '3' } })
- fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+ fireEvent.click(select);
+ fireEvent.click(await screen.findByRole('button', { name: 'Fast' }));
+ fireEvent.click(toggle);
+ fireEvent.change(screen.getByRole('spinbutton'), { target: { value: '3' } });
+ fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
- expect(await screen.findByText('Settings saved', {}, { timeout: 5000 })).toBeInTheDocument()
- expect(body).toEqual({ mode: 'fast', enabled: false, retries: '3' })
- })
+ expect(await screen.findByText('Settings saved', {}, { timeout: 5000 })).toBeInTheDocument();
+ expect(body).toEqual({ mode: 'fast', enabled: false, retries: '3' });
+ });
const ACTIONS = [
{ key: 'ping', label: 'Ping server', danger: false, scope: 'instance' },
{ key: 'purge', label: 'Purge cache', hint: 'Drops every cached tile', danger: true, scope: 'instance' },
- ]
+ ];
async function openWithActions(p: Record = plugin({ instanceSettingsCount: 2 })) {
server.use(
http.get('*/api/admin/plugins/trek-gotify/config', () =>
- HttpResponse.json({ fields: FIELDS, config: { apiUrl: 'https://gotify.mydomain.com' }, actions: ACTIONS })),
- )
- await openRowMenu(p)
- fireEvent.click(screen.getByText('Instance settings'))
- await waitFor(() => expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument(), { timeout: 5000 })
+ HttpResponse.json({ fields: FIELDS, config: { apiUrl: 'https://gotify.mydomain.com' }, actions: ACTIONS })
+ )
+ );
+ await openRowMenu(p);
+ fireEvent.click(screen.getByText('Instance settings'));
+ await waitFor(() => expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument(), {
+ timeout: 5000,
+ });
}
it('FE-COMP-PLUGINS-ACT-010: instance actions render below the fields and run against the admin route', async () => {
- let posted = ''
+ let posted = '';
server.use(
http.post('*/api/admin/plugins/trek-gotify/actions/:key', ({ params }) => {
- posted = String(params.key)
- return HttpResponse.json({ ok: true, message: 'pong' })
- }),
- )
- await openWithActions()
- expect(screen.getByText('Drops every cached tile')).toBeInTheDocument() // hint
- fireEvent.click(screen.getByRole('button', { name: 'Ping server' }))
- expect(await screen.findByText('pong', {}, { timeout: 5000 })).toBeInTheDocument()
- expect(posted).toBe('ping')
+ posted = String(params.key);
+ return HttpResponse.json({ ok: true, message: 'pong' });
+ })
+ );
+ await openWithActions();
+ expect(screen.getByText('Drops every cached tile')).toBeInTheDocument(); // hint
+ fireEvent.click(screen.getByRole('button', { name: 'Ping server' }));
+ expect(await screen.findByText('pong', {}, { timeout: 5000 })).toBeInTheDocument();
+ expect(posted).toBe('ping');
// The dialog stays open — the admin may run another one.
- expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument()
- })
+ expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-ACT-011: a danger action asks first; confirming runs it', async () => {
- let posted = ''
+ let posted = '';
server.use(
http.post('*/api/admin/plugins/trek-gotify/actions/:key', ({ params }) => {
- posted = String(params.key)
- return HttpResponse.json({ ok: false, message: 'cache locked' })
- }),
- )
- await openWithActions()
- fireEvent.click(screen.getByRole('button', { name: 'Purge cache' }))
- expect(await screen.findByText('Run this action?')).toBeInTheDocument()
- expect(posted).toBe('')
- fireEvent.click(screen.getByRole('button', { name: /^confirm$/i }))
- expect(await screen.findByText('cache locked', {}, { timeout: 5000 })).toBeInTheDocument()
- expect(posted).toBe('purge')
- })
+ posted = String(params.key);
+ return HttpResponse.json({ ok: false, message: 'cache locked' });
+ })
+ );
+ await openWithActions();
+ fireEvent.click(screen.getByRole('button', { name: 'Purge cache' }));
+ expect(await screen.findByText('Run this action?')).toBeInTheDocument();
+ expect(posted).toBe('');
+ fireEvent.click(screen.getByRole('button', { name: /^confirm$/i }));
+ expect(await screen.findByText('cache locked', {}, { timeout: 5000 })).toBeInTheDocument();
+ expect(posted).toBe('purge');
+ });
it('FE-COMP-PLUGINS-ACT-012: an inactive plugin shows the buttons disabled with the activation hint', async () => {
- await openWithActions(plugin({ instanceSettingsCount: 2, status: 'inactive', enabled: 0 }))
- expect(screen.getByRole('button', { name: 'Ping server' })).toBeDisabled()
- expect(screen.getByText('Activate the plugin to run its actions')).toBeInTheDocument()
- })
+ await openWithActions(plugin({ instanceSettingsCount: 2, status: 'inactive', enabled: 0 }));
+ expect(screen.getByRole('button', { name: 'Ping server' })).toBeDisabled();
+ expect(screen.getByText('Activate the plugin to run its actions')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-ACT-013: a dirty form is saved before the action runs', async () => {
- const calls: string[] = []
+ const calls: string[] = [];
server.use(
- http.put('*/api/admin/plugins/trek-gotify/config', () => { calls.push('save'); return HttpResponse.json({ config: {}, restarted: false }) }),
- http.post('*/api/admin/plugins/trek-gotify/actions/:key', () => { calls.push('run'); return HttpResponse.json({ ok: true }) }),
- )
- await openWithActions()
- fireEvent.change(screen.getByDisplayValue('https://gotify.mydomain.com'), { target: { value: 'https://new.example' } })
- fireEvent.click(screen.getByRole('button', { name: 'Ping server' }))
- await waitFor(() => expect(calls).toEqual(['save', 'run']), { timeout: 5000 })
- })
+ http.put('*/api/admin/plugins/trek-gotify/config', () => {
+ calls.push('save');
+ return HttpResponse.json({ config: {}, restarted: false });
+ }),
+ http.post('*/api/admin/plugins/trek-gotify/actions/:key', () => {
+ calls.push('run');
+ return HttpResponse.json({ ok: true });
+ })
+ );
+ await openWithActions();
+ fireEvent.change(screen.getByDisplayValue('https://gotify.mydomain.com'), {
+ target: { value: 'https://new.example' },
+ });
+ fireEvent.click(screen.getByRole('button', { name: 'Ping server' }));
+ await waitFor(() => expect(calls).toEqual(['save', 'run']), { timeout: 5000 });
+ });
it('FE-COMP-PLUGINS-CFG-006: a failed config fetch is a toast, not a broken dialog', async () => {
server.use(
- http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({ error: 'nope' }, { status: 500 })),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 2 }))
- fireEvent.click(screen.getByText('Instance settings'))
+ http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({ error: 'nope' }, { status: 500 }))
+ );
+ await openRowMenu(plugin({ instanceSettingsCount: 2 }));
+ fireEvent.click(screen.getByText('Instance settings'));
- expect(await screen.findByText('Error', {}, { timeout: 5000 })).toBeInTheDocument()
- })
+ expect(await screen.findByText('Error', {}, { timeout: 5000 })).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-007: a rejected save shows the server reason and keeps the dialog open', async () => {
server.use(
http.put('*/api/admin/plugins/trek-gotify/config', () =>
- HttpResponse.json({ error: 'config refused' }, { status: 400 })),
- )
- await openSettings()
+ HttpResponse.json({ error: 'config refused' }, { status: 400 })
+ )
+ );
+ await openSettings();
- fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+ fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
- expect(await screen.findByText('config refused', {}, { timeout: 5000 })).toBeInTheDocument()
+ expect(await screen.findByText('config refused', {}, { timeout: 5000 })).toBeInTheDocument();
// Still open — the admin's edits are not thrown away on a refusal.
- expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument()
- })
+ expect(screen.getByDisplayValue('https://gotify.mydomain.com')).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-008: the dialog closes without saving', async () => {
- await openSettings()
+ await openSettings();
- fireEvent.click(screen.getByRole('button', { name: /^close$/i }))
+ fireEvent.click(screen.getByRole('button', { name: /^close$/i }));
- expect(screen.queryByDisplayValue('https://gotify.mydomain.com')).not.toBeInTheDocument()
- })
+ expect(screen.queryByDisplayValue('https://gotify.mydomain.com')).not.toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-009: pre-fills a declared default when no value is stored', async () => {
server.use(
- http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({
- fields: [{ key: 'oauth_authorize_url', label: 'Authorize URL', input_type: 'text', required: true, secret: false, default: 'https://auth.openbnb.org/authorize' }],
- config: {},
- })),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 1 }))
- fireEvent.click(screen.getByText('Instance settings'))
+ http.get('*/api/admin/plugins/trek-gotify/config', () =>
+ HttpResponse.json({
+ fields: [
+ {
+ key: 'oauth_authorize_url',
+ label: 'Authorize URL',
+ input_type: 'text',
+ required: true,
+ secret: false,
+ default: 'https://auth.openbnb.org/authorize',
+ },
+ ],
+ config: {},
+ })
+ )
+ );
+ await openRowMenu(plugin({ instanceSettingsCount: 1 }));
+ fireEvent.click(screen.getByText('Instance settings'));
- expect(await screen.findByDisplayValue('https://auth.openbnb.org/authorize', {}, { timeout: 5000 })).toBeInTheDocument()
- })
+ expect(
+ await screen.findByDisplayValue('https://auth.openbnb.org/authorize', {}, { timeout: 5000 })
+ ).toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-010: a stored value wins over the default', async () => {
server.use(
- http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({
- fields: [{ key: 'oauth_authorize_url', label: 'Authorize URL', input_type: 'text', required: false, secret: false, default: 'https://auth.openbnb.org/authorize' }],
- config: { oauth_authorize_url: 'https://mine.example' },
- })),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 1 }))
- fireEvent.click(screen.getByText('Instance settings'))
+ http.get('*/api/admin/plugins/trek-gotify/config', () =>
+ HttpResponse.json({
+ fields: [
+ {
+ key: 'oauth_authorize_url',
+ label: 'Authorize URL',
+ input_type: 'text',
+ required: false,
+ secret: false,
+ default: 'https://auth.openbnb.org/authorize',
+ },
+ ],
+ config: { oauth_authorize_url: 'https://mine.example' },
+ })
+ )
+ );
+ await openRowMenu(plugin({ instanceSettingsCount: 1 }));
+ fireEvent.click(screen.getByText('Instance settings'));
- expect(await screen.findByDisplayValue('https://mine.example', {}, { timeout: 5000 })).toBeInTheDocument()
- expect(screen.queryByDisplayValue('https://auth.openbnb.org/authorize')).not.toBeInTheDocument()
- })
+ expect(await screen.findByDisplayValue('https://mine.example', {}, { timeout: 5000 })).toBeInTheDocument();
+ expect(screen.queryByDisplayValue('https://auth.openbnb.org/authorize')).not.toBeInTheDocument();
+ });
it('FE-COMP-PLUGINS-CFG-011: blocks Save while a required field is empty and names it', async () => {
- let called = false
+ let called = false;
server.use(
- http.get('*/api/admin/plugins/trek-gotify/config', () => HttpResponse.json({
- fields: [{ key: 'client_id', label: 'Client ID', input_type: 'text', required: true, secret: false }],
- config: {},
- })),
- http.put('*/api/admin/plugins/trek-gotify/config', () => { called = true; return HttpResponse.json({ config: {}, restarted: false }) }),
- )
- await openRowMenu(plugin({ instanceSettingsCount: 1 }))
- fireEvent.click(screen.getByText('Instance settings'))
- await screen.findByText('Client ID', {}, { timeout: 5000 })
+ http.get('*/api/admin/plugins/trek-gotify/config', () =>
+ HttpResponse.json({
+ fields: [{ key: 'client_id', label: 'Client ID', input_type: 'text', required: true, secret: false }],
+ config: {},
+ })
+ ),
+ http.put('*/api/admin/plugins/trek-gotify/config', () => {
+ called = true;
+ return HttpResponse.json({ config: {}, restarted: false });
+ })
+ );
+ await openRowMenu(plugin({ instanceSettingsCount: 1 }));
+ fireEvent.click(screen.getByText('Instance settings'));
+ await screen.findByText('Client ID', {}, { timeout: 5000 });
- fireEvent.click(screen.getByRole('button', { name: /^save$/i }))
+ fireEvent.click(screen.getByRole('button', { name: /^save$/i }));
- expect(await screen.findByText('"Client ID" is required', {}, { timeout: 5000 })).toBeInTheDocument()
- expect(called).toBe(false)
- })
+ expect(await screen.findByText('"Client ID" is required', {}, { timeout: 5000 })).toBeInTheDocument();
+ expect(called).toBe(false);
+ });
it('FE-COMP-PLUGINS-CFG-012: Save paints its label with the accent-text token, so a light accent stays readable', async () => {
- await openSettings()
+ await openSettings();
// `--accent-text` flips per scheme and per light/dark; a hard white label vanishes on
// the near-white accent the dark theme uses by default.
- const save = screen.getByRole('button', { name: /^save$/i })
- expect(save.className).toContain('text-accent-text')
- expect(save.className).not.toContain('text-white')
- })
-})
+ const save = screen.getByRole('button', { name: /^save$/i });
+ expect(save.className).toContain('text-accent-text');
+ expect(save.className).not.toContain('text-white');
+ });
+});
/**
* TREK_PLUGINS_IGNORE_TREK_RANGE. The server turns its version gates into warnings; the
@@ -2544,75 +3149,109 @@ describe('AdminPluginsPanel — instance settings', () => {
describe('AdminPluginsPanel — TREK-range bypass (TREK_PLUGINS_IGNORE_TREK_RANGE)', () => {
function bypassPanel(plugins: Record[], entry: Record | null) {
server.use(
- http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, ignoreTrekRange: true, plugins })),
- http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : [])),
- )
+ http.get('*/api/admin/plugins', () =>
+ HttpResponse.json({ enabled: true, devLink: false, ignoreTrekRange: true, plugins })
+ ),
+ http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : []))
+ );
}
- const incompatibleEntry = () => registryEntry({ trek: '>=4.0.0', hostVersion: '3.3.0', compatible: false, latestCompatible: null })
+ const incompatibleEntry = () =>
+ registryEntry({ trek: '>=4.0.0', hostVersion: '3.3.0', compatible: false, latestCompatible: null });
it('FE-PLG-BYPASS-001: says so in the header', async () => {
- bypassPanel([plugin()], null)
- render() => string
-type TypeFilter = 'all' | 'widget' | 'page' | 'integration' | 'trip-page'
-type StatusFilter = 'all' | 'on' | 'off' | 'update' | 'err'
-type SortKey = 'name' | 'recent' | 'updates' | 'downloads'
+type T = (k: string, p?: Record) => string;
+type TypeFilter = 'all' | 'widget' | 'page' | 'integration' | 'trip-page';
+type StatusFilter = 'all' | 'on' | 'off' | 'update' | 'err';
+type SortKey = 'name' | 'recent' | 'updates' | 'downloads';
// Runtime health → dot colour on the icon tile.
const HEALTH: Record = {
@@ -219,38 +283,54 @@ const HEALTH: Record = {
inactive: 'bg-content-faint/60',
disabled: 'bg-warning',
incompatible: 'bg-warning',
-}
+};
// Known permissions → human-readable i18n key; unknown ones render as raw code.
// Generated from the host's protocol/envelope.ts by
// server/scripts/gen-plugin-facts.ts - this used to be a hand-kept fourth copy.
-const PERM_KEYS = PLUGIN_PERMISSIONS
+const PERM_KEYS = PLUGIN_PERMISSIONS;
-const KNOWN_TYPES = ['widget', 'page', 'integration', 'trip-page']
+const KNOWN_TYPES = ['widget', 'page', 'integration', 'trip-page'];
function isNewer(a: string, b: string): boolean {
- const nums = (v: string) => v.split('-')[0].split('.').map(n => Number.parseInt(n, 10) || 0)
- const pa = nums(a), pb = nums(b)
+ const nums = (v: string) =>
+ v
+ .split('-')[0]
+ .split('.')
+ .map((n) => Number.parseInt(n, 10) || 0);
+ const pa = nums(a),
+ pb = nums(b);
for (let i = 0; i < 3; i++) {
- const x = pa[i] || 0, y = pb[i] || 0
- if (x !== y) return x > y
+ const x = pa[i] || 0,
+ y = pb[i] || 0;
+ if (x !== y) return x > y;
}
- return !a.includes('-') && b.includes('-')
+ return !a.includes('-') && b.includes('-');
}
function parseJson(raw: string | null | undefined, fallback: T): T {
- try { const v = JSON.parse(raw || '') as T; return v ?? fallback } catch { return fallback }
+ try {
+ const v = JSON.parse(raw || '') as T;
+ return v ?? fallback;
+ } catch {
+ return fallback;
+ }
}
-interface DepChip { icon: React.ComponentType<{ size?: number; className?: string }>; label: string; blocked: boolean; warn?: boolean }
+interface DepChip {
+ icon: React.ComponentType<{ size?: number; className?: string }>;
+ label: string;
+ blocked: boolean;
+ warn?: boolean;
+}
// A plugin's declared dependencies as chips — a required addon (amber when that
// addon is disabled), a plugin dependency (amber when missing / version-mismatched),
// or the TREK version itself (amber when this server has outgrown the plugin's range,
// which is the one blocker the admin cannot fix by flipping something else on).
function deriveDeps(p: PluginRow, t: T): DepChip[] {
- const out: DepChip[] = []
- const issues = p.dependencyIssues
+ const out: DepChip[] = [];
+ const issues = p.dependencyIssues;
if (p.dependencyStatus === 'hostIncompatible') {
out.push({
icon: AlertTriangle,
@@ -258,18 +338,24 @@ function deriveDeps(p: PluginRow, t: T): DepChip[] {
? t('admin.plugins.dep.trekIncompatible', { range: p.trekRange, host: p.hostVersion ?? '?' })
: t('admin.plugins.dep.trekUnknown'),
blocked: true,
- })
+ });
}
- const bypassed = bypassChip(p.trekRangeBypassed, t) // TREK_PLUGINS_IGNORE_TREK_RANGE: a warning, not a blocker
- if (bypassed) out.push(bypassed)
+ const bypassed = bypassChip(p.trekRangeBypassed, t); // TREK_PLUGINS_IGNORE_TREK_RANGE: a warning, not a blocker
+ if (bypassed) out.push(bypassed);
for (const a of p.dependencies?.requiredAddons ?? []) {
- out.push({ icon: Blocks, label: t('admin.plugins.cap.requiresAddon', { addon: a }), blocked: !!issues?.disabledAddons.includes(a) })
+ out.push({
+ icon: Blocks,
+ label: t('admin.plugins.cap.requiresAddon', { addon: a }),
+ blocked: !!issues?.disabledAddons.includes(a),
+ });
}
for (const d of p.dependencies?.pluginDependencies ?? []) {
- const blocked = !!(issues?.missing.some(m => m.id === d.id) || issues?.versionMismatch.some(m => m.id === d.id))
- out.push({ icon: Puzzle, label: t('admin.plugins.cap.dependsOn', { id: d.id, version: d.version }), blocked })
+ const blocked = !!(
+ issues?.missing.some((m) => m.id === d.id) || issues?.versionMismatch.some((m) => m.id === d.id)
+ );
+ out.push({ icon: Puzzle, label: t('admin.plugins.cap.dependsOn', { id: d.id, version: d.version }), blocked });
}
- return out
+ return out;
}
/**
@@ -281,33 +367,43 @@ function deriveDeps(p: PluginRow, t: T): DepChip[] {
* has outrun this TREK but an older one still fits, offer THAT version rather than a dead
* grey button. The plugin is perfectly usable, just not at its newest.
*/
-function installOffer(item: RegistryItem, t: T, ignoreTrekRange = false): { blocked: boolean; version?: string; label: string; title?: string; warn?: RangeWarning } {
- if (item.compatible !== false) return { blocked: false, label: t('admin.plugins.install') }
+function installOffer(
+ item: RegistryItem,
+ t: T,
+ ignoreTrekRange = false
+): { blocked: boolean; version?: string; label: string; title?: string; warn?: RangeWarning } {
+ if (item.compatible !== false) return { blocked: false, label: t('admin.plugins.install') };
const title = item.trek
? t('admin.plugins.dep.trekIncompatible', { range: item.trek, host: item.hostVersion ?? '?' })
- : t('admin.plugins.dep.trekUnknown')
- if (ignoreTrekRange) return bypassOffer(item, t, title) // TREK_PLUGINS_IGNORE_TREK_RANGE: "Install anyway"
+ : t('admin.plugins.dep.trekUnknown');
+ if (ignoreTrekRange) return bypassOffer(item, t, title); // TREK_PLUGINS_IGNORE_TREK_RANGE: "Install anyway"
if (item.latestCompatible) {
- return { blocked: false, version: item.latestCompatible, label: t('admin.plugins.installCompatible', { version: item.latestCompatible }), title }
+ return {
+ blocked: false,
+ version: item.latestCompatible,
+ label: t('admin.plugins.installCompatible', { version: item.latestCompatible }),
+ title,
+ };
}
- return { blocked: true, label: t('admin.plugins.incompatible'), title }
+ return { blocked: true, label: t('admin.plugins.incompatible'), title };
}
-
/** The head band of a dialog that warns before something happens: a faint wash of the warning tone. */
-const WARN_TINT = 'color-mix(in srgb, var(--warning) 10%, transparent)'
+const WARN_TINT = 'color-mix(in srgb, var(--warning) 10%, transparent)';
/** The eyebrow over a block, the size the dialogs' sections use. */
-const EYEBROW = 'm-0 font-geist font-bold uppercase tracking-[.08em] text-content-faint'
+const EYEBROW = 'm-0 font-geist font-bold uppercase tracking-[.08em] text-content-faint';
/** A capability or dependency chip on an installed row. */
-const CHIP = 'inline-flex max-w-full items-center gap-1.5 rounded-full border px-2 py-[2px] font-medium'
-const CHIP_NEUTRAL = 'border-edge-faint bg-surface-secondary text-content-secondary'
-const CHIP_NET = 'border-transparent bg-info-soft text-info'
-const CHIP_WARN = 'border-transparent bg-warning-soft text-warning'
+const CHIP = 'inline-flex max-w-full items-center gap-1.5 rounded-full border px-2 py-[2px] font-medium';
+const CHIP_NEUTRAL = 'border-edge-faint bg-surface-secondary text-content-secondary';
+const CHIP_NET = 'border-transparent bg-info-soft text-info';
+const CHIP_WARN = 'border-transparent bg-warning-soft text-warning';
/** A small action inside a row or a card: the kit's button, a size down. */
-const SMALL_BUTTON = 'inline-flex flex-none items-center justify-center gap-1.5 rounded-[10px] bg-surface-card px-2.5 py-1.5 font-semibold text-content shadow-sm ring-1 ring-edge-faint hover:bg-surface-secondary disabled:cursor-default disabled:opacity-50'
-const SMALL_PRIMARY = 'inline-flex flex-none items-center justify-center gap-1.5 rounded-[10px] bg-accent px-3 py-1.5 font-semibold text-accent-text hover:opacity-90 disabled:cursor-default disabled:bg-surface-tertiary disabled:text-content-faint'
+const SMALL_BUTTON =
+ 'inline-flex flex-none items-center justify-center gap-1.5 rounded-[10px] bg-surface-card px-2.5 py-1.5 font-semibold text-content shadow-sm ring-1 ring-edge-faint hover:bg-surface-secondary disabled:cursor-default disabled:opacity-50';
+const SMALL_PRIMARY =
+ 'inline-flex flex-none items-center justify-center gap-1.5 rounded-[10px] bg-accent px-3 py-1.5 font-semibold text-accent-text hover:opacity-90 disabled:cursor-default disabled:bg-surface-tertiary disabled:text-content-faint';
/** A line of state under a row's name: a refused update, a paused one, an error. */
-const ROW_NOTE = 'mt-1.5 flex min-w-0 items-center gap-1.5'
+const ROW_NOTE = 'mt-1.5 flex min-w-0 items-center gap-1.5';
/** A pill that explains itself on hover. */
function HintPill({ hint, children }: { hint: string; children: ReactNode }) {
@@ -315,20 +411,22 @@ function HintPill({ hint, children }: { hint: string; children: ReactNode }) {
{children}
- )
+ );
}
function ReviewedBadge({ t }: { t: T }) {
- return
-
- )
+ );
}
/**
@@ -342,7 +440,7 @@ function SideloadedBadge({ t }: { t: T }) {
* dilutes the amber into wallpaper, which is exactly what makes a warning worthless.
*/
function isRegistrySourced(sourceRepo: string | null | undefined): boolean {
- return !!sourceRepo && sourceRepo !== 'local:upload' && sourceRepo !== 'local:link'
+ return !!sourceRepo && sourceRepo !== 'local:upload' && sourceRepo !== 'local:link';
}
/**
@@ -360,13 +458,15 @@ function TrustBadge({ signed, t }: { signed: boolean; t: T }) {
- )
+ );
}
return (
-
- )
+ );
}
/** Marks a dev-linked plugin: loaded from a local build dir + hot-reloaded (dev only). */
@@ -375,79 +475,99 @@ function DevLinkBadge({ t }: { t: T }) {
- )
+ );
}
function TypeBadge({ type, t }: { type: string; t: T }) {
return (
-
+
{KNOWN_TYPES.includes(type) ? t(`admin.plugins.type.${type}` as never) : type}
- )
+ );
}
export default function AdminPluginsPanel() {
- const { t, locale } = useTranslation()
- const toast = useToast()
- const [runtimeOn, setRuntimeOn] = useState(false)
- const [devLink, setDevLink] = useState(false) // dev-link enabled server-side (TREK_PLUGINS_DEV_LINK)
- const [ignoreTrekRange, setIgnoreTrekRange] = useState(false) // TREK_PLUGINS_IGNORE_TREK_RANGE set server-side
- const bypass = useRangeBypass() // its warning dialog/sheet state — shared with the other shell
- const [linkPath, setLinkPath] = useState('')
- const [plugins, setPlugins] = useState([])
- const [loading, setLoading] = useState(true)
- const [error, setError] = useState(false)
- const [busy, setBusy] = useState(null)
- const [view, setView] = useState<'installed' | 'discover'>('installed')
- const [registry, setRegistry] = useState(null)
- const [latest, setLatest] = useState>({})
+ const { t, locale } = useTranslation();
+ const toast = useToast();
+ const [runtimeOn, setRuntimeOn] = useState(false);
+ const [devLink, setDevLink] = useState(false); // dev-link enabled server-side (TREK_PLUGINS_DEV_LINK)
+ const [ignoreTrekRange, setIgnoreTrekRange] = useState(false); // TREK_PLUGINS_IGNORE_TREK_RANGE set server-side
+ const bypass = useRangeBypass(); // its warning dialog/sheet state — shared with the other shell
+ const [linkPath, setLinkPath] = useState('');
+ const [plugins, setPlugins] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(false);
+ const [busy, setBusy] = useState(null);
+ const [view, setView] = useState<'installed' | 'discover'>('installed');
+ const [registry, setRegistry] = useState(null);
+ const [latest, setLatest] = useState>({});
// The registry entry per id — the re-trust dialog needs the NEW author key from it (in
// full: the server's equality check is exact), and the Discover/consent copy needs `signed`.
- const [regById, setRegById] = useState>({})
+ const [regById, setRegById] = useState>({});
// Open when a signature check refused an install/update. Carries the code, so the dialog
// knows whether an override may even be offered.
- const [signatureBlock, setSignatureBlock] = useState<{ subject: SigSubject; code: string; detail: string | null } | null>(null)
- const [retrusting, setRetrusting] = useState(false)
- const [detailFor, setDetailFor] = useState(null)
- const [errorsFor, setErrorsFor] = useState<{ id: string; rows: Array<{ ts: string; level: string; message: string }> } | null>(null)
- const [egressFor, setEgressFor] = useState<{ id: string; supported: boolean; hosts: string[] } | null>(null)
+ const [signatureBlock, setSignatureBlock] = useState<{
+ subject: SigSubject;
+ code: string;
+ detail: string | null;
+ } | null>(null);
+ const [retrusting, setRetrusting] = useState(false);
+ const [detailFor, setDetailFor] = useState(null);
+ const [errorsFor, setErrorsFor] = useState<{
+ id: string;
+ rows: Array<{ ts: string; level: string; message: string }>;
+ } | null>(null);
+ const [egressFor, setEgressFor] = useState<{ id: string; supported: boolean; hosts: string[] } | null>(null);
// The admin-owned scope:'instance' settings form — shared logic with the phone shell.
- const settings = useInstanceSettings()
- const [egressDraft, setEgressDraft] = useState('')
- const [egressSaving, setEgressSaving] = useState(false)
- const [egressError, setEgressError] = useState('')
- const [confirmUninstall, setConfirmUninstall] = useState(null)
+ const settings = useInstanceSettings();
+ const [egressDraft, setEgressDraft] = useState('');
+ const [egressSaving, setEgressSaving] = useState(false);
+ const [egressError, setEgressError] = useState('');
+ const [confirmUninstall, setConfirmUninstall] = useState(null);
// The version picker for an INSTALLED plugin ("Change version…"); versions land async
// from the registry detail endpoint, which computes each version's compat verdict.
- const [versionPicker, setVersionPicker] = useState<{ plugin: PluginRow; versions: VersionInfo[] | null; failed: boolean } | null>(null)
+ const [versionPicker, setVersionPicker] = useState<{
+ plugin: PluginRow;
+ versions: VersionInfo[] | null;
+ failed: boolean;
+ } | null>(null);
// A picked version OLDER than the installed one — held here until the admin consents
// to the data risk (the plugin's data dir stays; older code may not understand it).
- const [confirmDowngrade, setConfirmDowngrade] = useState<{ plugin: PluginRow; version: string } | null>(null)
+ const [confirmDowngrade, setConfirmDowngrade] = useState<{ plugin: PluginRow; version: string } | null>(null);
// A QUEUE, not one slot: "Update All" can produce several re-consent prompts —
// each must be shown, not silently overwritten by the last one.
- const [consentQueue, setConsentQueue] = useState>([])
+ const [consentQueue, setConsentQueue] = useState<
+ Array<{ plugin: PluginRow; version: string; newPermissions: string[]; newEgress: string[] }>
+ >([]);
// Open when enabling a plugin is blocked by missing/outdated plugin dependencies.
- const [depResolve, setDepResolve] = useState<{ plugin: PluginRow; missing: PluginDep[]; versionMismatch: VersionMismatch[] } | null>(null)
- const [menu, setMenu] = useState(null)
+ const [depResolve, setDepResolve] = useState<{
+ plugin: PluginRow;
+ missing: PluginDep[];
+ versionMismatch: VersionMismatch[];
+ } | null>(null);
+ const [menu, setMenu] = useState(null);
// Toolbar state.
- const [q, setQ] = useState('')
- const [typeFilter, setTypeFilter] = useState('all')
- const [statusFilter, setStatusFilter] = useState('all')
- const [sort, setSort] = useState('name')
+ const [q, setQ] = useState('');
+ const [typeFilter, setTypeFilter] = useState('all');
+ const [statusFilter, setStatusFilter] = useState('all');
+ const [sort, setSort] = useState('name');
// 'updates' only ranks installed plugins, 'downloads' only the registry — snap
// the key back to name when switching tabs so the dropdown never carries a label
// for an option the active tab can't offer.
useEffect(() => {
- if (view === 'discover' && sort === 'updates') setSort('name')
- else if (view === 'installed' && sort === 'downloads') setSort('name')
- }, [view, sort])
+ if (view === 'discover' && sort === 'updates') setSort('name');
+ else if (view === 'installed' && sort === 'downloads') setSort('name');
+ }, [view, sort]);
// Sideload upload: drag a plugin .zip onto the panel or use the toolbar button.
- const [dragActive, setDragActive] = useState(false)
- const uploadInputRef = useRef(null)
- const dragDepth = useRef(0)
+ const [dragActive, setDragActive] = useState(false);
+ const uploadInputRef = useRef(null);
+ const dragDepth = useRef(0);
// Index the registry once per fetch: the version map the update badges read, plus the
// whole entry (author key + signed flag) the trust badges and re-trust dialog need.
@@ -455,31 +575,38 @@ export default function AdminPluginsPanel() {
// server-side) — not the absolute latest, so the banner never counts an update the
// update endpoint would refuse.
const indexRegistry = (items: RegistryItem[]) => {
- const vers: Record = {}
- const byId: Record = {}
- items.forEach((i) => { byId[i.id] = i; if (i.latestCompatible) vers[i.id] = i.latestCompatible })
- setLatest(vers)
- setRegById(byId)
- }
+ const vers: Record = {};
+ const byId: Record = {};
+ items.forEach((i) => {
+ byId[i.id] = i;
+ if (i.latestCompatible) vers[i.id] = i.latestCompatible;
+ });
+ setLatest(vers);
+ setRegById(byId);
+ };
const refresh = () => {
// Keep the app-wide active-plugin store in sync so widget/hero/tab consumers
// (e.g. the dashboard) reflect an activate/deactivate without a full reload (F5).
- void usePluginStore.getState().loadPlugins()
- adminApi.plugins()
+ void usePluginStore.getState().loadPlugins();
+ adminApi
+ .plugins()
.then((d: { enabled: boolean; devLink?: boolean; ignoreTrekRange?: boolean; plugins: PluginRow[] }) => {
- setRuntimeOn(!!d.enabled)
- setDevLink(!!d.devLink)
- setIgnoreTrekRange(!!d.ignoreTrekRange)
- setPlugins(d.plugins || [])
+ setRuntimeOn(!!d.enabled);
+ setDevLink(!!d.devLink);
+ setIgnoreTrekRange(!!d.ignoreTrekRange);
+ setPlugins(d.plugins || []);
if ((d.plugins || []).length) {
- adminApi.pluginBrowse().then(indexRegistry).catch(() => {})
+ adminApi
+ .pluginBrowse()
+ .then(indexRegistry)
+ .catch(() => {});
}
})
.catch(() => setError(true))
- .finally(() => setLoading(false))
- }
- useEffect(refresh, [])
+ .finally(() => setLoading(false));
+ };
+ useEffect(refresh, []);
// A signature refusal is not an ordinary "action failed": it is the one class of error
// where WHICH failure it was decides what the admin may do about it. Route it to the
@@ -490,344 +617,478 @@ export default function AdminPluginsPanel() {
// ALWAYS opens the dialog: falling back to a toast is what used to hide an invalid
// signature on a fresh install behind the same treatment as a network blip.
const routeSignatureError = (id: string, code?: string, detail?: string): boolean => {
- if (!code || !SIGNATURE_CODES.includes(code)) return false
- const row = plugins.find(p => p.id === id)
+ if (!code || !SIGNATURE_CODES.includes(code)) return false;
+ const row = plugins.find((p) => p.id === id);
const subject: SigSubject = row
? { id, name: row.name, keyFingerprint: row.keyFingerprint ?? null }
- // Not installed: no pinned key exists, so SIGNATURE_KEY_CHANGED cannot arise and the
- // dialog shows the no-override explanation — which is exactly right.
- : { id, name: regById[id]?.name ?? id, keyFingerprint: null }
- setSignatureBlock({ subject, code, detail: detail ?? null })
- return true
- }
+ : // Not installed: no pinned key exists, so SIGNATURE_KEY_CHANGED cannot arise and the
+ // dialog shows the no-override explanation — which is exactly right.
+ { id, name: regById[id]?.name ?? id, keyFingerprint: null };
+ setSignatureBlock({ subject, code, detail: detail ?? null });
+ return true;
+ };
const act = async (id: string, fn: () => Promise, ok: string) => {
- setBusy(id); setMenu(null)
- try { await fn(); toast.success(ok) }
- catch (e) {
- const { error, code } = errBody(e)
- if (!routeSignatureError(id, code, error)) toast.error(error || t('admin.plugins.actionError'))
+ setBusy(id);
+ setMenu(null);
+ try {
+ await fn();
+ toast.success(ok);
+ } catch (e) {
+ const { error, code } = errBody(e);
+ if (!routeSignatureError(id, code, error)) toast.error(error || t('admin.plugins.actionError'));
+ } finally {
+ setBusy(null);
+ refresh();
}
- finally { setBusy(null); refresh() }
- }
+ };
const openDiscover = () => {
- setView('discover')
+ setView('discover');
if (!registry) {
- adminApi.pluginBrowse()
- .then((items: RegistryItem[]) => { setRegistry(items); indexRegistry(items) })
- .catch(() => setRegistry([]))
+ adminApi
+ .pluginBrowse()
+ .then((items: RegistryItem[]) => {
+ setRegistry(items);
+ indexRegistry(items);
+ })
+ .catch(() => setRegistry([]));
}
- }
+ };
// The rescan/reload button rediscovers locally-installed plugins AND force-pulls
// the remote registry (bypassing the 30-min server cache + GitHub's CDN), so a
// just-published plugin shows up right away instead of up to ~35 min later.
- const rescan = () => act('__rescan', async () => {
- await adminApi.pluginRescan()
- const items: RegistryItem[] = await adminApi.pluginBrowse(true)
- setRegistry(items)
- indexRegistry(items)
- }, t('admin.plugins.rescanned'))
+ const rescan = () =>
+ act(
+ '__rescan',
+ async () => {
+ await adminApi.pluginRescan();
+ const items: RegistryItem[] = await adminApi.pluginBrowse(true);
+ setRegistry(items);
+ indexRegistry(items);
+ },
+ t('admin.plugins.rescanned')
+ );
// Sideload a plugin archive (installs INACTIVE — the admin still consents on activation).
const uploadPlugin = async (file: File) => {
- setBusy('__upload'); setMenu(null)
+ setBusy('__upload');
+ setMenu(null);
try {
- const res = await adminApi.pluginUpload(file)
- setView('installed')
- toast.success(t('admin.plugins.uploaded', { name: res.id }))
- bypass.notice(res.id, res.trekRangeBypassed)
+ const res = await adminApi.pluginUpload(file);
+ setView('installed');
+ toast.success(t('admin.plugins.uploaded', { name: res.id }));
+ bypass.notice(res.id, res.trekRangeBypassed);
} catch (e) {
- toast.error((e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError'))
+ toast.error(
+ (e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError')
+ );
} finally {
- setBusy(null); refresh()
+ setBusy(null);
+ refresh();
}
- }
- const pickUpload = () => uploadInputRef.current?.click()
+ };
+ const pickUpload = () => uploadInputRef.current?.click();
const onDragEnter = (e: DragEvent) => {
- if (!runtimeOn || !Array.from(e.dataTransfer.types).includes('Files')) return
- e.preventDefault(); dragDepth.current++; setDragActive(true)
- }
- const onDragLeave = () => { if (--dragDepth.current <= 0) { dragDepth.current = 0; setDragActive(false) } }
+ if (!runtimeOn || !Array.from(e.dataTransfer.types).includes('Files')) return;
+ e.preventDefault();
+ dragDepth.current++;
+ setDragActive(true);
+ };
+ const onDragLeave = () => {
+ if (--dragDepth.current <= 0) {
+ dragDepth.current = 0;
+ setDragActive(false);
+ }
+ };
const onDrop = (e: DragEvent) => {
- e.preventDefault(); dragDepth.current = 0; setDragActive(false)
- if (!runtimeOn) return
- const f = e.dataTransfer.files?.[0]
- if (f) void uploadPlugin(f)
- }
+ e.preventDefault();
+ dragDepth.current = 0;
+ setDragActive(false);
+ if (!runtimeOn) return;
+ const f = e.dataTransfer.files?.[0];
+ if (f) void uploadPlugin(f);
+ };
const openEgress = (id: string) => {
- setMenu(null)
- setEgressDraft(''); setEgressError('')
- adminApi.pluginEgressHosts(id)
- .then(d => setEgressFor({ id, supported: d.supported, hosts: d.hosts }))
- .catch(() => setEgressFor({ id, supported: false, hosts: [] }))
- }
+ setMenu(null);
+ setEgressDraft('');
+ setEgressError('');
+ adminApi
+ .pluginEgressHosts(id)
+ .then((d) => setEgressFor({ id, supported: d.supported, hosts: d.hosts }))
+ .catch(() => setEgressFor({ id, supported: false, hosts: [] }));
+ };
// Saving RE-SPAWNS the plugin: the child's egress guard is installed once at init and
// a second init is refused, so a live child's allow-list can never be widened in place.
const saveEgress = async (hosts: string[]) => {
- if (!egressFor) return
- setEgressSaving(true); setEgressError('')
+ if (!egressFor) return;
+ setEgressSaving(true);
+ setEgressError('');
try {
- const d = await adminApi.pluginSetEgressHosts(egressFor.id, hosts)
- setEgressFor({ ...egressFor, hosts: d.hosts })
- setEgressDraft('')
+ const d = await adminApi.pluginSetEgressHosts(egressFor.id, hosts);
+ setEgressFor({ ...egressFor, hosts: d.hosts });
+ setEgressDraft('');
} catch (e) {
- const err = e as { response?: { data?: { error?: string } } }
- setEgressError(err.response?.data?.error || t('common.error'))
+ const err = e as { response?: { data?: { error?: string } } };
+ setEgressError(err.response?.data?.error || t('common.error'));
} finally {
- setEgressSaving(false)
+ setEgressSaving(false);
}
- }
+ };
const openInstanceSettings = (p: { id: string; status: string }) => {
- setMenu(null)
- settings.open(p.id, p.status === 'active')
- }
+ setMenu(null);
+ settings.open(p.id, p.status === 'active');
+ };
const openErrors = (id: string) => {
- setMenu(null)
- adminApi.pluginErrors(id)
- .then((d: { errors: Array<{ ts: string; level: string; message: string }> }) => setErrorsFor({ id, rows: d.errors }))
- .catch(() => setErrorsFor({ id, rows: [] }))
- }
+ setMenu(null);
+ adminApi
+ .pluginErrors(id)
+ .then((d: { errors: Array<{ ts: string; level: string; message: string }> }) =>
+ setErrorsFor({ id, rows: d.errors })
+ )
+ .catch(() => setErrorsFor({ id, rows: [] }));
+ };
// A held plugin (deliberate non-latest install) is deliberately NOT an update candidate:
// the admin just rolled it back, and the banner nagging them straight back would make
// the rollback fight the UI. The row carries its own "paused" marker + resume instead.
- const updateAvailable = (p: PluginRow) => !!(p.version && !p.updateHold && latest[p.id] && isNewer(latest[p.id], p.version))
- const resumeUpdates = (p: PluginRow) => act(p.id, () => adminApi.pluginResumeUpdates(p.id), t('admin.plugins.updatesResumed'))
+ const updateAvailable = (p: PluginRow) =>
+ !!(p.version && !p.updateHold && latest[p.id] && isNewer(latest[p.id], p.version));
+ const resumeUpdates = (p: PluginRow) =>
+ act(p.id, () => adminApi.pluginResumeUpdates(p.id), t('admin.plugins.updatesResumed'));
// A newer version exists but this TREK can't install it (and it isn't the one on offer):
// said passively on the row, so the admin learns a TREK upgrade unlocks it instead of
// wondering why no update shows. Null when the registry gives no range to point at.
const newerIncompatible = (p: PluginRow): { version: string; range: string } | null => {
- const reg = regById[p.id]
- if (!reg?.latest || !p.version || !isNewer(reg.latest, p.version)) return null
- if (latest[p.id] === reg.latest) return null
- const range = reg.trek ?? (reg.minTrekVersion ? `>=${reg.minTrekVersion}` : null)
- return range ? { version: reg.latest, range } : null
- }
+ const reg = regById[p.id];
+ if (!reg?.latest || !p.version || !isNewer(reg.latest, p.version)) return null;
+ if (latest[p.id] === reg.latest) return null;
+ const range = reg.trek ?? (reg.minTrekVersion ? `>=${reg.minTrekVersion}` : null);
+ return range ? { version: reg.latest, range } : null;
+ };
// `warn` is the pre-install confirm for an entry the registry already flagged as
// incompatible; an artifact whose OWN manifest turns out to be out of range (the index
// was only a pre-download filter) is caught by the marker on the response instead.
- const install = (id: string, version?: string, warn?: RangeWarning) => bypass.guard(warn, () =>
- act(id, () => adminApi.pluginInstall(id, version ? { version } : undefined).then(r => { if (!warn) bypass.notice(id, r?.trekRangeBypassed) }), t('admin.plugins.installed')))
- const restart = (id: string) => act(id, async () => { await adminApi.pluginDeactivate(id); await adminApi.pluginActivate(id) }, t('admin.plugins.restarted'))
+ const install = (id: string, version?: string, warn?: RangeWarning) =>
+ bypass.guard(warn, () =>
+ act(
+ id,
+ () =>
+ adminApi.pluginInstall(id, version ? { version } : undefined).then((r) => {
+ if (!warn) bypass.notice(id, r?.trekRangeBypassed);
+ }),
+ t('admin.plugins.installed')
+ )
+ );
+ const restart = (id: string) =>
+ act(
+ id,
+ async () => {
+ await adminApi.pluginDeactivate(id);
+ await adminApi.pluginActivate(id);
+ },
+ t('admin.plugins.restarted')
+ );
// Dev-link: register a plugin from a local built directory (dev only). Reuses the
// same busy/toast/refresh loop as uploadPlugin; the server gates it.
const linkLocal = async () => {
- const p = linkPath.trim()
- if (!p) return
- setBusy('__link'); setMenu(null)
+ const p = linkPath.trim();
+ if (!p) return;
+ setBusy('__link');
+ setMenu(null);
try {
- const res = await adminApi.pluginLink(p)
- setView('installed')
- setLinkPath('')
- toast.success(t('admin.plugins.devLinkLinked', { id: res.id }))
- bypass.notice(res.id, res.trekRangeBypassed)
+ const res = await adminApi.pluginLink(p);
+ setView('installed');
+ setLinkPath('');
+ toast.success(t('admin.plugins.devLinkLinked', { id: res.id }));
+ bypass.notice(res.id, res.trekRangeBypassed);
} catch (e) {
- toast.error((e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError'))
+ toast.error(
+ (e as { response?: { data?: { error?: string } } })?.response?.data?.error || t('admin.plugins.actionError')
+ );
} finally {
- setBusy(null); refresh()
+ setBusy(null);
+ refresh();
}
- }
- const installedIds = new Set(plugins.map(p => p.id))
+ };
+ const installedIds = new Set(plugins.map((p) => p.id));
// Installed-but-disabled direct deps that enabling `p` will auto-enable first.
const autoEnabledDeps = (p: PluginRow) =>
(p.dependencies?.pluginDependencies ?? [])
- .map(d => plugins.find(x => x.id === d.id))
+ .map((d) => plugins.find((x) => x.id === d.id))
.filter((x): x is PluginRow => !!x && x.enabled === 0)
- .map(x => x.name)
+ .map((x) => x.name);
// Shared handling for a failed activation: route each 409 code to the right fix
// (consent dialog, download-dependency dialog, or a clear toast).
const onActivateError = (p: PluginRow, e: ActivateErr) => {
- const d = e?.response?.data
+ const d = e?.response?.data;
if (e?.response?.status === 409 && d?.code === 'CONSENT_REQUIRED') {
- setConsentQueue(qq => [...qq, { plugin: p, version: latest[p.id] ?? p.version ?? '', newPermissions: d.newPermissions ?? [], newEgress: d.newEgress ?? [] }])
+ setConsentQueue((qq) => [
+ ...qq,
+ {
+ plugin: p,
+ version: latest[p.id] ?? p.version ?? '',
+ newPermissions: d.newPermissions ?? [],
+ newEgress: d.newEgress ?? [],
+ },
+ ]);
} else if (e?.response?.status === 409 && d?.code === 'ADDON_DISABLED') {
- toast.error(t('admin.plugins.dep.addonDisabledToast', { addons: (d.addons ?? []).join(', ') }))
+ toast.error(t('admin.plugins.dep.addonDisabledToast', { addons: (d.addons ?? []).join(', ') }));
} else if (e?.response?.status === 409 && d?.code === 'DEPENDENCY_MISSING') {
- setDepResolve({ plugin: p, missing: d.missing ?? [], versionMismatch: d.versionMismatch ?? [] })
+ setDepResolve({ plugin: p, missing: d.missing ?? [], versionMismatch: d.versionMismatch ?? [] });
} else {
// DEPENDENCY_CYCLE and everything else surface their server message.
- toast.error(d?.error || t('admin.plugins.actionError'))
+ toast.error(d?.error || t('admin.plugins.actionError'));
}
- }
+ };
const attemptActivate = (p: PluginRow) => {
- const cascaded = autoEnabledDeps(p)
- return adminApi.pluginActivate(p.id)
+ const cascaded = autoEnabledDeps(p);
+ return adminApi
+ .pluginActivate(p.id)
.then(() => {
- toast.success(t('admin.plugins.activated'))
- if (cascaded.length) toast.success(t('admin.plugins.dep.autoEnabled', { plugins: cascaded.join(', ') }))
- setDepResolve(null)
+ toast.success(t('admin.plugins.activated'));
+ if (cascaded.length) toast.success(t('admin.plugins.dep.autoEnabled', { plugins: cascaded.join(', ') }));
+ setDepResolve(null);
})
- .catch((e: ActivateErr) => onActivateError(p, e))
- }
+ .catch((e: ActivateErr) => onActivateError(p, e));
+ };
// Enable/disable a plugin. Re-enabling one whose update widened its permissions
// must NOT grant them silently (409 CONSENT_REQUIRED → consent dialog); a disabled
// required addon or a missing plugin dependency (409 ADDON_DISABLED /
// DEPENDENCY_MISSING) routes to the right remedy.
const toggle = (p: PluginRow) => {
- if (busy === p.id) return
- if (p.enabled === 1) { void act(p.id, () => adminApi.pluginDeactivate(p.id), t('admin.plugins.deactivated')); return }
- setBusy(p.id); setMenu(null)
- attemptActivate(p).finally(() => { setBusy(null); refresh() })
- }
+ if (busy === p.id) return;
+ if (p.enabled === 1) {
+ void act(p.id, () => adminApi.pluginDeactivate(p.id), t('admin.plugins.deactivated'));
+ return;
+ }
+ setBusy(p.id);
+ setMenu(null);
+ attemptActivate(p).finally(() => {
+ setBusy(null);
+ refresh();
+ });
+ };
// Download a missing/outdated plugin dependency (latest compatible for its range,
// transitively), then retry enabling the plugin that needed it.
const resolveDependency = (parent: PluginRow, depId: string, constraint?: string) => {
- if (busy === parent.id) return
- setBusy(parent.id)
- adminApi.pluginInstall(depId, { constraint, withDependencies: true })
+ if (busy === parent.id) return;
+ setBusy(parent.id);
+ adminApi
+ .pluginInstall(depId, { constraint, withDependencies: true })
.then((r: { installed?: string[]; requiredAddons?: string[]; trekRangeBypassed?: TrekRangeBypass | null }) => {
- toast.success(t('admin.plugins.dep.downloaded', { id: depId }))
- if (r?.requiredAddons?.length) toast.error(t('admin.plugins.dep.addonDisabledToast', { addons: r.requiredAddons.join(', ') }))
- bypass.notice(depId, r?.trekRangeBypassed)
- return attemptActivate(parent)
+ toast.success(t('admin.plugins.dep.downloaded', { id: depId }));
+ if (r?.requiredAddons?.length)
+ toast.error(t('admin.plugins.dep.addonDisabledToast', { addons: r.requiredAddons.join(', ') }));
+ bypass.notice(depId, r?.trekRangeBypassed);
+ return attemptActivate(parent);
})
// The DEPENDENCY is what's being downloaded, so a signature refusal here is about the
// dependency's author, not the parent's — route it under depId before falling through
// to the activation-error handling, which knows nothing about signature codes.
.catch((e: ActivateErr) => {
- const { error, code } = errBody(e)
- if (!routeSignatureError(depId, code, error)) onActivateError(parent, e)
+ const { error, code } = errBody(e);
+ if (!routeSignatureError(depId, code, error)) onActivateError(parent, e);
})
- .finally(() => { setBusy(null); refresh() })
- }
+ .finally(() => {
+ setBusy(null);
+ refresh();
+ });
+ };
// `version` pins the exact version to install (rollback / explicit switch); omitted,
// the server resolves the newest TREK-compatible version itself.
const runUpdate = (p: PluginRow, version?: string) => {
- setBusy(p.id); setMenu(null)
- return adminApi.pluginUpdate(p.id, version)
- .then((r: { version: string; activated: boolean; newPermissions: string[]; newEgress: string[]; trekRangeBypassed?: TrekRangeBypass | null }) => {
- if (r.activated || (r.newPermissions.length === 0 && r.newEgress.length === 0)) toast.success(t('admin.plugins.updated'))
- else setConsentQueue(qq => [...qq, { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress }])
- bypass.notice(p.name, r.trekRangeBypassed)
+ setBusy(p.id);
+ setMenu(null);
+ return adminApi
+ .pluginUpdate(p.id, version)
+ .then(
+ (r: {
+ version: string;
+ activated: boolean;
+ newPermissions: string[];
+ newEgress: string[];
+ trekRangeBypassed?: TrekRangeBypass | null;
+ }) => {
+ if (r.activated || (r.newPermissions.length === 0 && r.newEgress.length === 0))
+ toast.success(t('admin.plugins.updated'));
+ else
+ setConsentQueue((qq) => [
+ ...qq,
+ { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress },
+ ]);
+ bypass.notice(p.name, r.trekRangeBypassed);
+ }
+ )
+ .catch((e) => {
+ const { error, code } = errBody(e);
+ if (!routeSignatureError(p.id, code, error)) toast.error(error || t('admin.plugins.actionError'));
})
- .catch(e => {
- const { error, code } = errBody(e)
- if (!routeSignatureError(p.id, code, error)) toast.error(error || t('admin.plugins.actionError'))
- })
- .finally(() => { setBusy(null); refresh() })
- }
+ .finally(() => {
+ setBusy(null);
+ refresh();
+ });
+ };
// Confirm a key rotation: re-pin the new key AND update, in one server call. There is no
// follow-up /update — a re-pin that waited for a second call would leave the plugin
// pinned to a key no install had ever been verified against if that call never came.
const confirmRetrust = (id: string, version: string, publicKey: string) => {
- setRetrusting(true)
- adminApi.pluginRetrust(id, version, publicKey)
+ setRetrusting(true);
+ adminApi
+ .pluginRetrust(id, version, publicKey)
.then((r: { version: string; activated: boolean; newPermissions: string[]; newEgress: string[] }) => {
- setSignatureBlock(null)
+ setSignatureBlock(null);
// A re-trusted update widening permissions still needs consent — re-trusting a
// signing key says nothing about what the new code is allowed to do. Re-trust only
// ever fires for an INSTALLED plugin, so the row is there to consent against.
- const p = plugins.find(x => x.id === id)
+ const p = plugins.find((x) => x.id === id);
if (p && !r.activated && (r.newPermissions.length > 0 || r.newEgress.length > 0)) {
- setConsentQueue(qq => [...qq, { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress }])
- } else toast.success(t('admin.plugins.retrusted'))
+ setConsentQueue((qq) => [
+ ...qq,
+ { plugin: p, version: r.version, newPermissions: r.newPermissions, newEgress: r.newEgress },
+ ]);
+ } else toast.success(t('admin.plugins.retrusted'));
})
- .catch(e => toast.error(errBody(e).error || t('admin.plugins.actionError')))
- .finally(() => { setRetrusting(false); refresh() })
- }
+ .catch((e) => toast.error(errBody(e).error || t('admin.plugins.actionError')))
+ .finally(() => {
+ setRetrusting(false);
+ refresh();
+ });
+ };
// "Change version…" on an installed row: fetch the per-version list (with the server's
// compat verdicts) and open the picker. The fetch is keyed to the plugin so a stale
// response can't populate a picker that was reopened for another row.
const openVersionPicker = (p: PluginRow) => {
- setMenu(null)
- setVersionPicker({ plugin: p, versions: null, failed: false })
- adminApi.pluginDetail(p.id)
- .then((d: RegistryDetail) => setVersionPicker(cur => (cur && cur.plugin.id === p.id ? { ...cur, versions: d.versions ?? [] } : cur)))
- .catch(() => setVersionPicker(cur => (cur && cur.plugin.id === p.id ? { ...cur, failed: true } : cur)))
- }
+ setMenu(null);
+ setVersionPicker({ plugin: p, versions: null, failed: false });
+ adminApi
+ .pluginDetail(p.id)
+ .then((d: RegistryDetail) =>
+ setVersionPicker((cur) => (cur && cur.plugin.id === p.id ? { ...cur, versions: d.versions ?? [] } : cur))
+ )
+ .catch(() => setVersionPicker((cur) => (cur && cur.plugin.id === p.id ? { ...cur, failed: true } : cur)));
+ };
// Switching DOWN keeps the plugin's data dir, which the older code may not understand —
// that asks for explicit consent first. Any other switch is the ordinary update path.
const pickVersion = (version: string) => {
- if (!versionPicker) return
- const p = versionPicker.plugin
- setVersionPicker(null)
- if (p.version && isNewer(p.version, version)) setConfirmDowngrade({ plugin: p, version })
- else void runUpdate(p, version)
- }
+ if (!versionPicker) return;
+ const p = versionPicker.plugin;
+ setVersionPicker(null);
+ if (p.version && isNewer(p.version, version)) setConfirmDowngrade({ plugin: p, version });
+ else void runUpdate(p, version);
+ };
// eslint-disable-next-line react-hooks/exhaustive-deps
- const updatable = useMemo(() => plugins.filter(updateAvailable), [plugins, latest])
+ const updatable = useMemo(() => plugins.filter(updateAvailable), [plugins, latest]);
// One after another: busy is a single slot, so parallel updates would leave the
// other rows clickable mid-install and refresh once per plugin.
const updateAll = async () => {
- for (const p of updatable) await runUpdate(p)
- }
+ for (const p of updatable) await runUpdate(p);
+ };
// Installed list after search / type / status filters + sort.
const shownInstalled = useMemo(() => {
- const term = q.trim().toLowerCase()
- let rows = plugins.filter(p => {
- const matchesText = !term || `${p.name} ${p.description ?? ''}`.toLowerCase().includes(term)
- const matchesType = typeFilter === 'all' || p.type === typeFilter
- const st = statusFilter === 'all' ? true
- : statusFilter === 'on' ? p.enabled === 1 && p.status !== 'error'
- : statusFilter === 'off' ? p.enabled === 0
- : statusFilter === 'update' ? updateAvailable(p)
- : p.status === 'error'
- return matchesText && matchesType && st
- })
+ const term = q.trim().toLowerCase();
+ let rows = plugins.filter((p) => {
+ const matchesText = !term || `${p.name} ${p.description ?? ''}`.toLowerCase().includes(term);
+ const matchesType = typeFilter === 'all' || p.type === typeFilter;
+ const st =
+ statusFilter === 'all'
+ ? true
+ : statusFilter === 'on'
+ ? p.enabled === 1 && p.status !== 'error'
+ : statusFilter === 'off'
+ ? p.enabled === 0
+ : statusFilter === 'update'
+ ? updateAvailable(p)
+ : p.status === 'error';
+ return matchesText && matchesType && st;
+ });
rows = [...rows].sort((a, b) => {
if (sort === 'updates') {
- const ua = updateAvailable(a) ? 0 : 1, ub = updateAvailable(b) ? 0 : 1
- if (ua !== ub) return ua - ub
+ const ua = updateAvailable(a) ? 0 : 1,
+ ub = updateAvailable(b) ? 0 : 1;
+ if (ua !== ub) return ua - ub;
}
- return a.name.localeCompare(b.name)
- })
- return rows
+ return a.name.localeCompare(b.name);
+ });
+ return rows;
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [plugins, q, typeFilter, statusFilter, sort, latest])
+ }, [plugins, q, typeFilter, statusFilter, sort, latest]);
// Registry list after search / type filter.
const shownRegistry = useMemo(() => {
- if (!registry) return null
- const term = q.trim().toLowerCase()
- let items = registry.filter(r => {
- const matchesText = !term || `${r.name} ${r.author} ${r.description}`.toLowerCase().includes(term)
- const matchesType = typeFilter === 'all' || r.type === typeFilter
- return matchesText && matchesType
- })
+ if (!registry) return null;
+ const term = q.trim().toLowerCase();
+ let items = registry.filter((r) => {
+ const matchesText = !term || `${r.name} ${r.author} ${r.description}`.toLowerCase().includes(term);
+ const matchesType = typeFilter === 'all' || r.type === typeFilter;
+ return matchesText && matchesType;
+ });
items = [...items].sort((a, b) => {
- if (sort === 'downloads') return (b.downloadCount ?? 0) - (a.downloadCount ?? 0) || a.name.localeCompare(b.name)
- if (sort === 'recent') return (Date.parse(b.reviewedAt ?? '') || 0) - (Date.parse(a.reviewedAt ?? '') || 0) || a.name.localeCompare(b.name)
- return a.name.localeCompare(b.name)
- })
- return items
- }, [registry, q, typeFilter, sort])
+ if (sort === 'downloads') return (b.downloadCount ?? 0) - (a.downloadCount ?? 0) || a.name.localeCompare(b.name);
+ if (sort === 'recent')
+ return (
+ (Date.parse(b.reviewedAt ?? '') || 0) - (Date.parse(a.reviewedAt ?? '') || 0) || a.name.localeCompare(b.name)
+ );
+ return a.name.localeCompare(b.name);
+ });
+ return items;
+ }, [registry, q, typeFilter, sort]);
- const anyFilter = q.trim() !== '' || typeFilter !== 'all' || statusFilter !== 'all'
- const ready = runtimeOn && !loading && !error
+ const anyFilter = q.trim() !== '' || typeFilter !== 'all' || statusFilter !== 'all';
+ const ready = runtimeOn && !loading && !error;
// A question opened from the detail view (the range warning, a signature refusal, the
// consent gate) sits on top of it; Escape and the backdrop leave the detail alone meanwhile.
- const detailBlocked = !!bypass.copy || !!signatureBlock || consentQueue.length > 0
+ const detailBlocked = !!bypass.copy || !!signatureBlock || consentQueue.length > 0;
return (
-
-
{token.name}
-{token.token_prefix}...
++ {token.name} +
++ {token.token_prefix}... +
{ if (dragActive) e.preventDefault() }} onDragLeave={onDragLeave} onDrop={onDrop}>
+ (null)
+ const open = menu === id;
+ const active = value !== options[0]?.[0];
+ const btnRef = useRef(null);
// Portaled like the row menu: the card around the toolbar clips what overflows it.
- useFollowTrigger(open)
+ useFollowTrigger(open);
return (
(p.permissions, []), parseJson<{ widget?: { slot?: string } }>(p.capabilities, {}), t)
- const deps = deriveDeps(p, t)
- const menuOpen = menu === `row:${p.id}`
- const menuBtnRef = useRef(null)
- const working = busy === p.id
- const on = p.enabled === 1 && p.status !== 'error'
+ const caps = deriveCaps(
+ parseJson(p.permissions, []),
+ parseJson<{ widget?: { slot?: string } }>(p.capabilities, {}),
+ t
+ );
+ const deps = deriveDeps(p, t);
+ const menuOpen = menu === `row:${p.id}`;
+ const menuBtnRef = useRef(null);
+ const working = busy === p.id;
+ const on = p.enabled === 1 && p.status !== 'error';
// The menu is portaled to and positioned `fixed` against the ⋯ button,
// because the row's ancestor (PageSidebar) is `overflow-hidden` and would clip
// an in-flow `absolute` menu — losing Delete on the lower rows of a long list.
// Re-anchor while the page moves under it.
- useFollowTrigger(menuOpen)
+ useFollowTrigger(menuOpen);
- const hostCount = p.egressHostCount ?? 0
+ const hostCount = p.egressHostCount ?? 0;
return (
-
{
+ if (dragActive) e.preventDefault();
+ }}
+ onDragLeave={onDragLeave}
+ onDrop={onDrop}
+ >
{/* Hidden input for the "Upload plugin" button (drag-drop uses the same handler). */}
- { const f = e.target.files?.[0]; if (f) void uploadPlugin(f); e.target.value = '' }} />
+ {
+ const f = e.target.files?.[0];
+ if (f) void uploadPlugin(f);
+ e.target.value = '';
+ }}
+ />
{/* Drag-to-install overlay */}
{dragActive && (
-
- )
+ );
}
/** "Nothing matches": a faint search glyph over one quiet line. */
@@ -1117,112 +1569,221 @@ function NoMatch({ children }: { children: ReactNode }) {
{children}
- )
+ );
}
-function SegBtn({ active, onClick, label, count }: { active: boolean; onClick: () => void; label: string; count?: number }) {
+function SegBtn({
+ active,
+ onClick,
+ label,
+ count,
+}: {
+ active: boolean;
+ onClick: () => void;
+ label: string;
+ count?: number;
+}) {
return (
-
- )
+ );
}
/** Re-renders while the page moves under an open, portaled menu, so it stays pinned to its trigger. */
function useFollowTrigger(open: boolean) {
- const [, reanchor] = useState(0)
+ const [, reanchor] = useState(0);
useEffect(() => {
- if (!open) return
- const onMove = () => reanchor(n => n + 1)
- window.addEventListener('scroll', onMove, true)
- window.addEventListener('resize', onMove)
+ if (!open) return;
+ const onMove = () => reanchor((n) => n + 1);
+ window.addEventListener('scroll', onMove, true);
+ window.addEventListener('resize', onMove);
return () => {
- window.removeEventListener('scroll', onMove, true)
- window.removeEventListener('resize', onMove)
- }
- }, [open])
+ window.removeEventListener('scroll', onMove, true);
+ window.removeEventListener('resize', onMove);
+ };
+ }, [open]);
}
-function FilterMenu({ id, label, valueLabel, options, onPick, value, menu, setMenu, icon }: {
- id: string; label: string; valueLabel: string
- options: Array<[string, string]>; onPick: (v: string) => void; value: string
- menu: string | null; setMenu: (v: string | null) => void; icon?: ReactNode
+function FilterMenu({
+ id,
+ label,
+ valueLabel,
+ options,
+ onPick,
+ value,
+ menu,
+ setMenu,
+ icon,
+}: {
+ id: string;
+ label: string;
+ valueLabel: string;
+ options: Array<[string, string]>;
+ onPick: (v: string) => void;
+ value: string;
+ menu: string | null;
+ setMenu: (v: string | null) => void;
+ icon?: ReactNode;
}) {
- const open = menu === id
- const active = value !== options[0]?.[0]
- const btnRef = useRef
+
-
- )}
-
-
-
-
-
- ) : undefined}
+ badge={
+ runtimeOn ? (
+ <>
+ {ignoreTrekRange && (
+
+
+ )}
+
+
+
+
+
+ ) : undefined
+ }
>
{loading ? (
- )
+ );
}
function statusLabel(s: StatusFilter, t: T): string {
- return s === 'all' ? t('admin.plugins.allStatuses') : s === 'on' ? t('admin.plugins.status.active')
- : s === 'off' ? t('admin.plugins.stateOff') : s === 'update' ? t('admin.plugins.filterUpdate') : t('admin.plugins.status.error')
+ return s === 'all'
+ ? t('admin.plugins.allStatuses')
+ : s === 'on'
+ ? t('admin.plugins.status.active')
+ : s === 'off'
+ ? t('admin.plugins.stateOff')
+ : s === 'update'
+ ? t('admin.plugins.filterUpdate')
+ : t('admin.plugins.status.error');
}
function sortLabel(s: SortKey, t: T): string {
- return s === 'name' ? t('admin.plugins.sortName')
- : s === 'recent' ? t('admin.plugins.sortRecent')
- : s === 'downloads' ? t('admin.plugins.sortDownloads')
- : t('admin.plugins.sortUpdates')
+ return s === 'name'
+ ? t('admin.plugins.sortName')
+ : s === 'recent'
+ ? t('admin.plugins.sortRecent')
+ : s === 'downloads'
+ ? t('admin.plugins.sortDownloads')
+ : t('admin.plugins.sortUpdates');
}
/** An icon action on the card's head band, named by its tooltip. */
-function BandButton({ label, onClick, disabled, children }: { label: string; onClick: () => void; disabled?: boolean; children: ReactNode }) {
+function BandButton({
+ label,
+ onClick,
+ disabled,
+ children,
+}: {
+ label: string;
+ onClick: () => void;
+ disabled?: boolean;
+ children: ReactNode;
+}) {
return (
-
) : error ? (
- {t('admin.plugins.loadError')}
+
+ {t('admin.plugins.loadError')}
+
) : !runtimeOn ? (
// Runtime switched off server-side: the notice replaces the whole body.
-
{t('admin.plugins.disabledTitle')}
-{t('admin.plugins.disabledBody')}
++ {t('admin.plugins.disabledTitle')} +
++ {t('admin.plugins.disabledBody')} +
-
- )
+ );
}
-function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIncompatible, blocked, onToggle, onUpdate, onRestart, onChangeVersion, onResume, onReviewBlock, onErrors, onEgress, onSettings, onUninstall }: {
- p: PluginRow; t: T; busy: string | null; menu: string | null; setMenu: (v: string | null) => void
- hasUpdate: boolean; latestVer?: string; newerIncompatible: { version: string; range: string } | null; blocked: boolean
- onToggle: () => void; onUpdate: () => void; onRestart: () => void; onChangeVersion: () => void; onResume: () => void; onReviewBlock: () => void
- onErrors: () => void; onEgress: () => void; onSettings: () => void; onUninstall: () => void
+function InstalledRow({
+ p,
+ t,
+ busy,
+ menu,
+ setMenu,
+ hasUpdate,
+ latestVer,
+ newerIncompatible,
+ blocked,
+ onToggle,
+ onUpdate,
+ onRestart,
+ onChangeVersion,
+ onResume,
+ onReviewBlock,
+ onErrors,
+ onEgress,
+ onSettings,
+ onUninstall,
+}: {
+ p: PluginRow;
+ t: T;
+ busy: string | null;
+ menu: string | null;
+ setMenu: (v: string | null) => void;
+ hasUpdate: boolean;
+ latestVer?: string;
+ newerIncompatible: { version: string; range: string } | null;
+ blocked: boolean;
+ onToggle: () => void;
+ onUpdate: () => void;
+ onRestart: () => void;
+ onChangeVersion: () => void;
+ onResume: () => void;
+ onReviewBlock: () => void;
+ onErrors: () => void;
+ onEgress: () => void;
+ onSettings: () => void;
+ onUninstall: () => void;
}) {
- const caps = deriveCaps(parseJson
+
-
+
- filtered: boolean
- ignoreTrekRange: boolean
+function RegistryGrid({
+ items,
+ onInstall,
+ onOpenDetail,
+ busy,
+ t,
+ installedIds,
+ filtered,
+ ignoreTrekRange,
+}: {
+ items: RegistryItem[] | null;
+ onInstall: (id: string, version?: string, warn?: RangeWarning) => void;
+ onOpenDetail: (item: RegistryItem) => void;
+ busy: string | null;
+ t: T;
+ installedIds: Set;
+ filtered: boolean;
+ ignoreTrekRange: boolean;
}) {
- if (!items) return (
- {filtered ? t('admin.plugins.noMatchRegistry') : t('admin.plugins.registryEmpty')}
+ if (!items)
+ return (
+ {filtered ? t('admin.plugins.noMatchRegistry') : t('admin.plugins.registryEmpty')} ;
return (
- {p.name}
- {p.version && v{p.version}}
+
+ {p.name}
+
+ {p.version && (
+
+ v{p.version}
+
+ )}
{p.reviewed_at &&
- {p.description && {p.description}
} + {p.description && ( ++ {p.description} +
+ )} {/* A refused update leaves a WORKING plugin pinned at its old version — so this is its own row state, not an error state, and it persists until it is resolved rather than dying with the toast that first reported it. */} {blocked && p.updateBlock && (
-
- ) : (caps.length > 0 || p.operatorEgress) && (
-
- {caps.map((c, i) => (
-
-
+
+
+ )}
+
+ )
)}
{deps.length > 0 && (
+ {caps.map((c, i) => (
+
+
-
-
- )}
-
+ {p.operatorEgress && (
+
{deps.map((d, i) => (
-
@@ -1305,100 +1893,161 @@ function InstalledRow({ p, t, busy, menu, setMenu, hasUpdate, latestVer, newerIn
{hasUpdate && (
-
)}
-
+
{p.enabled === 1 ? t('admin.plugins.status.active') : t('admin.plugins.stateOff')}
-
- {menuOpen && createPortal(
-
- {p.enabled === 1 && (
- } label={t('admin.plugins.restart')} onClick={onRestart} />
- )}
- {/* A plugin gets the item if it declares scope:'instance' fields OR actions —
+ {menuOpen &&
+ createPortal(
+
,
+ document.body
+ )}
+ {p.enabled === 1 && (
+ } label={t('admin.plugins.restart')} onClick={onRestart} />
+ )}
+ {/* A plugin gets the item if it declares scope:'instance' fields OR actions —
an action-only plugin still needs the dialog to run its buttons. */}
- {((p.instanceSettingsCount ?? 0) > 0 || (p.instanceActionsCount ?? 0) > 0) && (
- } label={t('admin.plugins.instanceSettings')} onClick={onSettings} />
- )}
- } label={t('admin.plugins.viewErrors')} onClick={onErrors} />
- {/* Only a plugin that DECLARED operatorEgress gets the item — an admin must
+ {((p.instanceSettingsCount ?? 0) > 0 || (p.instanceActionsCount ?? 0) > 0) && (
+ }
+ label={t('admin.plugins.instanceSettings')}
+ onClick={onSettings}
+ />
+ )}
+ } label={t('admin.plugins.viewErrors')} onClick={onErrors} />
+ {/* Only a plugin that DECLARED operatorEgress gets the item — an admin must
never be invited to widen egress for a plugin that didn't ask for it
(same rule the row's egress chip follows). */}
- {p.operatorEgress && (
- } label={t('admin.plugins.allowedHosts')} onClick={onEgress} />
- )}
- {/* Registry plugins only — a sideload/dev-link has no registry versions to pick from. */}
- {isRegistrySourced(p.source_repo) && (
- } label={t('admin.plugins.changeVersion')} onClick={onChangeVersion} />
- )}
- {p.source_repo && p.source_repo !== 'local:upload' && p.source_repo !== 'local:link' && (
- <>
- setMenu(null)}
- className={`${MENU_ITEM} text-content-secondary`} style={fs(12.5, 'body')}>
-
,
- document.body,
- )}
+ {p.operatorEgress && (
+ } label={t('admin.plugins.allowedHosts')} onClick={onEgress} />
+ )}
+ {/* Registry plugins only — a sideload/dev-link has no registry versions to pick from. */}
+ {isRegistrySourced(p.source_repo) && (
+ }
+ label={t('admin.plugins.changeVersion')}
+ onClick={onChangeVersion}
+ />
+ )}
+ {p.source_repo && p.source_repo !== 'local:upload' && p.source_repo !== 'local:link' && (
+ <>
+ setMenu(null)}
+ className={`${MENU_ITEM} text-content-secondary`}
+ style={fs(12.5, 'body')}
+ >
+
+
-
- )
- if (items.length === 0) return
+
+ );
+ if (items.length === 0)
+ return
- {items.map(item => {
- const installed = installedIds.has(item.id)
- const offer = installOffer(item, t, ignoreTrekRange)
+ {items.map((item) => {
+ const installed = installedIds.has(item.id);
+ const offer = installOffer(item, t, ignoreTrekRange);
return (
-
{icon && {icon}}
-
- )
+ );
}
/** A warning line inside a dialog body: a soft amber box with its icon. */
function WarnNote({ icon, children }: { icon: ReactNode; children: ReactNode }) {
return (
- {children}
+ return (
+
+ {children}
+
+ );
}
/**
* The TREK_PLUGINS_IGNORE_TREK_RANGE warning (copy and modes from useRangeBypass). Its own
* component rather than ConfirmDialog because the notice mode has no cancel button.
*/
-function RangeBypassDialog({ copy: { title, body, confirm }, onConfirm, onClose, t }: {
- copy: { title: string; body: string; confirm: boolean }; onConfirm: () => void; onClose: () => void; t: T
+function RangeBypassDialog({
+ copy: { title, body, confirm },
+ onConfirm,
+ onClose,
+ t,
+}: {
+ copy: { title: string; body: string; confirm: boolean };
+ onConfirm: () => void;
+ onClose: () => void;
+ t: T;
}) {
return (
+
{t('common.cancel')}
- {t('admin.plugins.installAnyway')}
+
+ {t('admin.plugins.installAnyway')}
+
) : (
- {t('common.ok')}
+
+ {t('common.ok')}
+
)}
- )}
+ }
>
-
+ {t('admin.plugins.noErrors')}
@@ -1579,7 +2336,9 @@ function ErrorLogDialog({ id, rows, t, onClose }: {
+ {t('admin.plugins.allowedHosts.unsupported')}
@@ -1609,22 +2394,32 @@ function EgressDialog({ data, draft, setDraft, saving, error, onSave, onClose, t
<>
{t('admin.plugins.allowedHosts.hint')}
{data.hosts.length === 0 ? (
-
- {data.hosts.map(h => (
-
-
- )}>
+ }
+ >
{h}
))}
@@ -1633,155 +2428,238 @@ function EgressDialog({ data, draft, setDraft, saving, error, onSave, onClose, t
{t('admin.plugins.allowedHosts.restartNote')}
)}
(fields: F[]): Array {
- const out: Array = []
+ const out: Array = [];
for (const f of fields) {
- const last = out[out.length - 1]
- if (f.input_type !== 'checkbox') out.push(f)
- else if (Array.isArray(last)) last.push(f)
- else out.push([f])
+ const last = out[out.length - 1];
+ if (f.input_type !== 'checkbox') out.push(f);
+ else if (Array.isArray(last)) last.push(f);
+ else out.push([f]);
}
- return out
+ return out;
}
/** The admin-owned scope:'instance' fields and actions of one plugin (logic in useInstanceSettings). */
function InstanceSettingsDialog({ settings, t }: { settings: ReturnType; t: T }) {
- const form = settings.form
- if (!form) return null
+ const form = settings.form;
+ if (!form) return null;
const fieldLabel = (f: { key: string; label?: string; required?: boolean }) => (
- <>{f.label || f.key}{f.required && *}
- )
+ <>
+ {f.label || f.key}
+ {f.required && *}
+
+ );
return (
+
{t('common.cancel')}
- void settings.save()}>
- {settings.saving && void settings.save()}
+ >
+ {settings.saving &&
- )}
+ }
>
- {groupToggles(form.fields).map(f => {
+ {groupToggles(form.fields).map((f) => {
if (Array.isArray(f)) {
// A run of consecutive checkbox fields shares one box of toggle rows.
return (
- {f.map(c => (
- settings.setValue(c.key, form.values[c.key] !== true)} />} />
+ {f.map((c) => (
+ settings.setValue(c.key, form.values[c.key] !== true)}
+ />
+ }
+ />
))}
- )
+ );
}
- const inputId = `plugin-setting-${f.key}`
+ const inputId = `plugin-setting-${f.key}`;
if (f.input_type === 'select' && f.options) {
return (
- settings.setValue(f.key, String(v))}
- options={[{ value: '', label: '—' }, ...f.options.map(o => ({ value: o.value, label: o.label }))]} />
+ settings.setValue(f.key, String(v))}
+ options={[{ value: '', label: '—' }, ...f.options.map((o) => ({ value: o.value, label: o.label }))]}
+ />
- )
+ );
}
return (
settings.setValue(f.key, e.target.value)}
+ onChange={(e) => settings.setValue(f.key, e.target.value)}
className={INPUT}
/>
- )
+ );
})}
{form.actions.length > 0 && (
{!form.active && {t('admin.plugins.actions.inactive')} }
- {form.actions.map(a => {
- const res = settings.actionResult[a.key]
+ {form.actions.map((a) => {
+ const res = settings.actionResult[a.key];
return (
)}
- {settings.error && (null)
- const [failed, setFailed] = useState(false)
+ const [detail, setDetail] = useState(null);
+ const [failed, setFailed] = useState(false);
useEffect(() => {
- let alive = true
- adminApi.pluginDetail(item.id)
- .then((d: RegistryDetail) => { if (alive) setDetail(d) })
- .catch(() => { if (alive) setFailed(true) })
- return () => { alive = false }
- }, [item.id])
+ let alive = true;
+ adminApi
+ .pluginDetail(item.id)
+ .then((d: RegistryDetail) => {
+ if (alive) setDetail(d);
+ })
+ .catch(() => {
+ if (alive) setFailed(true);
+ });
+ return () => {
+ alive = false;
+ };
+ }, [item.id]);
- const manifest = detail?.manifest ?? null
- const permissions = manifest?.permissions ?? []
- const egress = manifest?.egress ?? []
- const settings = manifest?.settings ?? []
- const caps = manifest ? deriveCaps(permissions, manifest.capabilities ?? {}, t) : []
- const repoUrl = `https://github.com/${item.repo}`
- const homepage = item.homepage && /^https?:\/\//i.test(item.homepage) && item.homepage !== repoUrl ? item.homepage : null
- const sizeKb = detail?.size ? Math.max(1, Math.round(detail.size / 1024)) : null
+ const manifest = detail?.manifest ?? null;
+ const permissions = manifest?.permissions ?? [];
+ const egress = manifest?.egress ?? [];
+ const settings = manifest?.settings ?? [];
+ const caps = manifest ? deriveCaps(permissions, manifest.capabilities ?? {}, t) : [];
+ const repoUrl = `https://github.com/${item.repo}`;
+ const homepage =
+ item.homepage && /^https?:\/\//i.test(item.homepage) && item.homepage !== repoUrl ? item.homepage : null;
+ const sizeKb = detail?.size ? Math.max(1, Math.round(detail.size / 1024)) : null;
// The detail fetch carries the same compat verdict as the browse list; prefer it once
// it lands (it is keyed to the same entry) and fall back to the grid item until then.
- const offer = installOffer(detail ?? item, t, ignoreTrekRange)
- const access = caps.filter(c => !c.net)
- const linkClass = SETTINGS_ICON_BUTTON
+ const offer = installOffer(detail ?? item, t, ignoreTrekRange);
+ const access = caps.filter((c) => !c.net);
+ const linkClass = SETTINGS_ICON_BUTTON;
return (
+
+ }
tint={NEUTRAL_TINT}
labelId="plugin-detail-title"
title={item.name}
sub={`${item.author}${item.latest ? ` · v${item.latest}` : ''}`}
- pills={(
+ pills={
<>
-
-
{homepage && (
-
)}
onInstall(item.id, offer.version, offer.warn)}
+ onInstall(item.id, offer.version, offer.warn)}
disabled={busy === item.id || installed || offer.blocked}
- title={installed ? undefined : offer.title}>
+ title={installed ? undefined : offer.title}
+ >
{busy === item.id ?
- )}
+ }
>
- {item.screenshotUrl &&
onOpenDetail(item)}
+
- )
+ );
}
// 1234 -> "1.2k" — GitHub-style compact download counts for the browse cards.
// The M threshold sits at the k-rounding boundary so 999 950 is "1M", not "1000k".
function formatCompactCount(n: number): string {
- if (n >= 999_500) return `${Math.round(n / 100_000) / 10}M`
- if (n >= 1000) return `${Math.round(n / 100) / 10}k`
- return String(n)
+ if (n >= 999_500) return `${Math.round(n / 100_000) / 10}M`;
+ if (n >= 1000) return `${Math.round(n / 100) / 10}k`;
+ return String(n);
}
// A permission rendered human-readable when known, else as its raw code.
function PermLabel({ perm, t }: { perm: string; t: T }) {
- return PERM_KEYS.includes(perm)
- ? {t(`admin.plugins.perm.${perm}` as never)}
- : onOpenDetail(item)}
// No press-scale on the card: shrinking it mid-click slides the Install
// button out from under the pointer, so the click retargets onto the card
// and opens the detail modal instead of installing (#2158).
data-no-press
- onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpenDetail(item) } }}
- className="group flex min-w-0 cursor-pointer flex-col overflow-hidden rounded-[14px] border border-edge-faint bg-surface-card shadow-sm outline-none transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-[color:var(--text-primary)]">
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ onOpenDetail(item);
+ }
+ }}
+ className="group flex min-w-0 cursor-pointer flex-col overflow-hidden rounded-[14px] border border-edge-faint bg-surface-card shadow-sm outline-none transition-shadow hover:shadow-md focus-visible:ring-2 focus-visible:ring-[color:var(--text-primary)]"
+ >
- )
+ );
})}
- {item.name}
- {item.author}
-
-
+
)}
{item.description}
+ + {item.name} + + + {item.author} + ++ {item.description} +
-
{perm}
+ return PERM_KEYS.includes(perm) ? (
+ {t(`admin.plugins.perm.${perm}` as never)}
+ ) : (
+
+ {perm}
+
+ );
}
/** A white box of short lines between hairlines, for the lists inside a dialog. */
function DialogList({ children }: { children: ReactNode }) {
- return - {children}
-
+ {children}
+
{children}
+
+ {children}
+
{trailing && {trailing}
}
- {icon}{children} +
+ {icon} + {children}
- ) + ); } /** A raised tile for a dialog's head band. */ function Tile({ children, warn }: { children: ReactNode; warn?: boolean }) { - return{body}
++ {body} +
{rows.map((r, i) => (
)}
- {r.level}
+
+ {r.level}
+
{r.ts}
{r.message}
@@ -1587,21 +2346,47 @@ function ErrorLogDialog({ id, rows, t, onClose }: {
+
{t('admin.plugins.allowedHosts.none')}
) : (
setDraft(e.target.value)}
+ onChange={(e) => setDraft(e.target.value)}
placeholder="gotify.example.com"
aria-label={t('admin.plugins.allowedHosts.add')}
className={`${INPUT} flex-1 font-mono`}
/>
-
- {error && {error}
} + {error && ( ++ {error} +
+ )}
-
- {a.hint && {a.hint}}
+ {a.hint && (
+
+ {a.hint}
+
+ )}
{res && (
-
+
{res.message || (res.ok ? t('common.success') : t('common.error'))}
)}
- )
+ );
})}
{settings.error}
} + {settings.error && ( ++ {settings.error} +
+ )}
-
{access.map((c, i) => (
-
)}
@@ -1869,14 +2799,22 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
{manifest && (manifest.capabilities?.mcpTools?.length ?? 0) > 0 && (
- {(manifest.capabilities?.mcpTools ?? []).map(tool => (
+ {(manifest.capabilities?.mcpTools ?? []).map((tool) => (
@@ -1884,39 +2822,51 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
)}
-
{t('admin.plugins.operatorEgressHint')} }
+ {manifest.operatorEgress && (
+ {t('admin.plugins.operatorEgressHint')}
+ )}
)}
{manifest && settings.length > 0 && (
- {settings.map(s => (
- (
+
{t(`admin.plugins.scope.${s.scope}` as never)}
{s.required && {t('admin.plugins.fieldRequired')} }
- )}>
+ }
+ >
{s.label}
))}
@@ -1931,9 +2881,14 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
{/* The range, not just its lower bound: "TREK 3.2.0+" reads as "and anything
newer", which is exactly the claim a `<4.0.0` upper bound denies. */}
{(item.trek || item.minTrekVersion) && (
-
+
+ )}
+ {item.reviewedAt && (
+
)}
- {item.reviewedAt && }
{typeof item.downloadCount === 'number' && item.downloadCount > 0 && (
)}
@@ -1945,18 +2900,29 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
{(detail?.versions?.length ?? 0) > 1 && (
- {detail!.versions!.map(v => (
- onInstall(item.id, v.version)} disabled={busy === item.id}
- className={SMALL_BUTTON} style={fs(11.5, 'body')}>
- {t('admin.plugins.installCompatible', { version: v.version })}
-
+ {detail!.versions!.map((v) => (
+ onInstall(item.id, v.version)}
+ disabled={busy === item.id}
+ className={SMALL_BUTTON}
+ style={fs(11.5, 'body')}
+ >
+ {t('admin.plugins.installCompatible', { version: v.version })}
+
+ )
+ ) : (
+
+ {t('admin.plugins.versionNeedsTrek', { range: v.trek ?? '' })}
+
)
- ) : (
- {t('admin.plugins.versionNeedsTrek', { range: v.trek ?? '' })}
- )}>
+ }
+ >
))}
@@ -1964,27 +2930,40 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
)}
- )
+ );
}
/** A version number with its date and, when the author signed it, a quiet tick. */
function VersionLine({ v, locale }: { v: VersionInfo; locale: string }) {
return (
- v{v.version}
- {v.publishedAt && {new Date(v.publishedAt).toLocaleDateString(locale)}}
+
+ v{v.version}
+
+ {v.publishedAt && (
+
+ {new Date(v.publishedAt).toLocaleDateString(locale)}
+
+ )}
{v.signed &&
+ {t('admin.plugins.noVersions')} }
{versions && versions.length > 0 && (
- {versions.map(v => {
- const current = v.version === plugin.version
+ {versions.map((v) => {
+ const current = v.version === plugin.version;
return (
-
+
{t('admin.plugins.updateLater')}
- {t('admin.plugins.updateApprove')}
+
+ {t('admin.plugins.updateApprove')}
+
- )}
+ }
>
{/* The admin is about to widen what this code may do — so say, right here, that
nothing ties this code to its author. One line, no checkbox, no extra click:
@@ -2156,8 +3247,10 @@ function UpdateConsentDialog({ data, unsigned, t, onApprove, onLater }: {
{data.newPermissions.length > 0 && (
- {data.newPermissions.map(perm => (
-
+ {data.newPermissions.map((perm) => (
+
@@ -2165,76 +3258,104 @@ function UpdateConsentDialog({ data, unsigned, t, onApprove, onLater }: {
{data.newEgress.length > 0 && (
)}
- )
+ );
}
// Shown when enabling a plugin is blocked by missing/outdated plugin dependencies.
// Each dependency gets a one-click download (latest version satisfying its range,
// transitively) that then retries enabling the plugin.
-function DependencyResolveDialog({ data, t, busy, installedIds, onDownload, onClose }: {
- data: { plugin: PluginRow; missing: PluginDep[]; versionMismatch: VersionMismatch[] }
- t: T; busy: boolean; installedIds: Set
- onDownload: (depId: string, constraint?: string) => void; onClose: () => void
+function DependencyResolveDialog({
+ data,
+ t,
+ busy,
+ installedIds,
+ onDownload,
+ onClose,
+}: {
+ data: { plugin: PluginRow; missing: PluginDep[]; versionMismatch: VersionMismatch[] };
+ t: T;
+ busy: boolean;
+ installedIds: Set;
+ onDownload: (depId: string, constraint?: string) => void;
+ onClose: () => void;
}) {
const rows: Array<{ id: string; constraint: string; installed?: string }> = [
- ...data.missing.map(d => ({ id: d.id, constraint: d.version })),
- ...data.versionMismatch.map(d => ({ id: d.id, constraint: d.wanted, installed: d.installed })),
- ]
+ ...data.missing.map((d) => ({ id: d.id, constraint: d.version })),
+ ...data.versionMismatch.map((d) => ({ id: d.id, constraint: d.wanted, installed: d.installed })),
+ ];
return (
+
{t('common.cancel')}
- )}
+ }
>
- {rows.map(r => (
+ {rows.map((r) => (
- {rows.some(r => !installedIds.has(r.id)) && {t('admin.plugins.dep.resolveHint')} }
+ {rows.some((r) => !installedIds.has(r.id)) && {t('admin.plugins.dep.resolveHint')} }
setOpen(o => !o)} aria-expanded={open}
- className="inline-flex max-w-full items-center gap-1.5 text-left font-bold text-content hover:opacity-80">
+ title={
+
- )}
+ }
>
| null
- ip: string | null
+ id: number;
+ created_at: string;
+ user_id: number | null;
+ username: string | null;
+ user_email: string | null;
+ action: string;
+ resource: string | null;
+ details: Record | null;
+ ip: string | null;
}
interface AuditLogPanelProps {
- serverTimezone?: string
+ serverTimezone?: string;
}
-const TH = 'whitespace-nowrap px-3.5 py-2.5 text-left font-geist font-bold uppercase tracking-[.08em] text-content-faint'
-const TD = 'px-3.5 py-2.5 align-top'
-const CODE = 'font-geist tabular-nums'
+const TH =
+ 'whitespace-nowrap px-3.5 py-2.5 text-left font-geist font-bold uppercase tracking-[.08em] text-content-faint';
+const TD = 'px-3.5 py-2.5 align-top';
+const CODE = 'font-geist tabular-nums';
export default function AuditLogPanel({ serverTimezone }: AuditLogPanelProps): React.ReactElement {
- const { t, locale } = useTranslation()
- const [entries, setEntries] = useState([])
- const [total, setTotal] = useState(0)
- const [offset, setOffset] = useState(0)
- const [loading, setLoading] = useState(true)
- const limit = 100
+ const { t, locale } = useTranslation();
+ const [entries, setEntries] = useState([]);
+ const [total, setTotal] = useState(0);
+ const [offset, setOffset] = useState(0);
+ const [loading, setLoading] = useState(true);
+ const limit = 100;
const loadFirstPage = useCallback(async () => {
- setLoading(true)
+ setLoading(true);
try {
- const data = await adminApi.auditLog({ limit, offset: 0 }) as {
- entries: AuditEntry[]
- total: number
- }
- setEntries(data.entries || [])
- setTotal(data.total ?? 0)
- setOffset(0)
+ const data = (await adminApi.auditLog({ limit, offset: 0 })) as {
+ entries: AuditEntry[];
+ total: number;
+ };
+ setEntries(data.entries || []);
+ setTotal(data.total ?? 0);
+ setOffset(0);
} catch {
- setEntries([])
- setTotal(0)
- setOffset(0)
+ setEntries([]);
+ setTotal(0);
+ setOffset(0);
} finally {
- setLoading(false)
+ setLoading(false);
}
- }, [])
+ }, []);
const loadMore = useCallback(async () => {
- const nextOffset = offset + limit
- setLoading(true)
+ const nextOffset = offset + limit;
+ setLoading(true);
try {
- const data = await adminApi.auditLog({ limit, offset: nextOffset }) as {
- entries: AuditEntry[]
- total: number
- }
- setEntries((prev) => [...prev, ...(data.entries || [])])
- setTotal(data.total ?? 0)
- setOffset(nextOffset)
+ const data = (await adminApi.auditLog({ limit, offset: nextOffset })) as {
+ entries: AuditEntry[];
+ total: number;
+ };
+ setEntries((prev) => [...prev, ...(data.entries || [])]);
+ setTotal(data.total ?? 0);
+ setOffset(nextOffset);
} catch {
/* keep existing */
} finally {
- setLoading(false)
+ setLoading(false);
}
- }, [offset])
+ }, [offset]);
useEffect(() => {
- loadFirstPage()
- }, [loadFirstPage])
+ loadFirstPage();
+ }, [loadFirstPage]);
const fmtTime = (iso: string) => {
try {
@@ -80,41 +81,43 @@ export default function AuditLogPanel({ serverTimezone }: AuditLogPanelProps): R
dateStyle: 'short',
timeStyle: 'medium',
timeZone: serverTimezone || undefined,
- })
+ });
} catch {
- return iso
+ return iso;
}
- }
+ };
const fmtDetails = (d: Record | null) => {
- if (!d || Object.keys(d).length === 0) return '—'
+ if (!d || Object.keys(d).length === 0) return '—';
try {
- return JSON.stringify(d)
+ return JSON.stringify(d);
} catch {
- return '—'
+ return '—';
}
- }
+ };
const userLabel = (e: AuditEntry) => {
- if (e.username) return e.username
- if (e.user_email) return e.user_email
- if (e.user_id != null) return `#${e.user_id}`
- return '—'
- }
+ if (e.username) return e.username;
+ if (e.user_email) return e.user_email;
+ if (e.user_id != null) return `#${e.user_id}`;
+ return '—';
+ };
- let body: React.ReactNode
+ let body: React.ReactNode;
if (loading && entries.length === 0) {
body = (
{t('admin.audit.empty')}
+ body = {t('admin.audit.empty')} ;
} else {
body = (
-
{item.description}
- {failed &&{t('admin.plugins.detailError')}
} ++ {item.description} +
+ {failed && ( ++ {t('admin.plugins.detailError')} +
+ )} {/* The reason the button is blocked (or offering an older version) — a tooltip alone would leave a touch user with a dead button and no explanation. */} {offer.title && !installed &&
-
)}
@@ -1852,10 +2778,14 @@ function PluginDetailModal({ item, installed, busy, onInstall, onClose, t, local
) : (
{tool.name}
- {tool.title && {tool.title}
} +
+ {tool.name}
+
+ {tool.title && (
+ + {tool.title} +
+ )} {/* The description is the assistant-facing text: it is what the model reads to decide whether to call the tool, so it is the line an admin most needs to see. Never hidden behind a title. */} -{tool.description}
++ {tool.description} +
))}
- {egress.map(h => (
-
- {manifest.operatorEgress && {h}
+ {egress.map((h) => (
+
+ {h}
+
))}
{/* The hosts above are NOT the whole story for this plugin: it talks to a
service only the operator can name, so its reach is whatever an admin
adds after install. Say so HERE — this is the pre-install review, and a
reviewer who reads only the host list would otherwise be misled. */}
{manifest.operatorEgress && (
-
-
- )
+ );
}
/**
@@ -1993,48 +2972,95 @@ function Meta({ k, v }: { k: string; v: string }) {
* caller routes a DOWNGRADE through the data-risk confirm), an incompatible one is
* explained and never offered.
*/
-function VersionPickerDialog({ plugin, versions, failed, busy, t, locale, onPick, onClose }: {
- plugin: PluginRow; versions: VersionInfo[] | null; failed: boolean; busy: string | null
- t: T; locale: string; onPick: (version: string) => void; onClose: () => void
+function VersionPickerDialog({
+ plugin,
+ versions,
+ failed,
+ busy,
+ t,
+ locale,
+ onPick,
+ onClose,
+}: {
+ plugin: PluginRow;
+ versions: VersionInfo[] | null;
+ failed: boolean;
+ busy: string | null;
+ t: T;
+ locale: string;
+ onPick: (version: string) => void;
+ onClose: () => void;
}) {
return (
{k}
- {v}
+
+ {k}
+
+
+ {v}
+
{t('admin.plugins.detailError')}
} + {failed && ( ++ {t('admin.plugins.detailError')} +
+ )} {!failed && !versions && (
-
)}
{versions?.length === 0 &&
-
+
{offerRetrust ? t('admin.plugins.sig.cancel') : t('common.close')}
+
+ {offerRetrust ? t('admin.plugins.sig.cancel') : t('common.close')}
+
{offerRetrust && (
onRetrust(version, newKey)} disabled={busy}>
- {busy &&
)}
- )}
+ }
>
-
)}
{!canRetrust && data.detail && (
-
+
- )
+ );
})}
)}
- )
+ );
}
/**
@@ -2051,44 +3077,73 @@ function VersionPickerDialog({ plugin, versions, failed, busy, t, locale, onPick
* (The server enforces this too — it re-derives the condition and refuses anything but a
* changed key. This dialog is the convenience, not the control.)
*/
-function SignatureBlockDialog({ data, entry, busy, t, onRetrust, onClose }: {
- data: { subject: SigSubject; code: string; detail: string | null }
- entry: RegistryItem | undefined
- busy: boolean; t: T
- onRetrust: (version: string, publicKey: string) => void
- onClose: () => void
+function SignatureBlockDialog({
+ data,
+ entry,
+ busy,
+ t,
+ onRetrust,
+ onClose,
+}: {
+ data: { subject: SigSubject; code: string; detail: string | null };
+ entry: RegistryItem | undefined;
+ busy: boolean;
+ t: T;
+ onRetrust: (version: string, publicKey: string) => void;
+ onClose: () => void;
}) {
- const canRetrust = data.code === RETRUSTABLE
- const newKey = entry?.authorPublicKey ?? null
- const version = entry?.latest ?? null
+ const canRetrust = data.code === RETRUSTABLE;
+ const newKey = entry?.authorPublicKey ?? null;
+ const version = entry?.latest ?? null;
// Only offer the override when we actually hold the new key + version to send: the
// request carries both, and the server compares the key exactly.
- const offerRetrust = canRetrust && !!newKey && !!version
+ const offerRetrust = canRetrust && !!newKey && !!version;
- const bodyKey = data.code === RETRUSTABLE ? 'admin.plugins.sig.keyChangedBody'
- : data.code === 'SIGNATURE_MISSING' ? 'admin.plugins.sig.missingBody'
- : data.code === 'SIGNATURE_INCOMPLETE' ? 'admin.plugins.sig.incompleteBody'
- : 'admin.plugins.sig.invalidBody'
+ const bodyKey =
+ data.code === RETRUSTABLE
+ ? 'admin.plugins.sig.keyChangedBody'
+ : data.code === 'SIGNATURE_MISSING'
+ ? 'admin.plugins.sig.missingBody'
+ : data.code === 'SIGNATURE_INCOMPLETE'
+ ? 'admin.plugins.sig.incompleteBody'
+ : 'admin.plugins.sig.invalidBody';
return (
+
{current ? (
- {t(bodyKey as never)}
++ {t(bodyKey as never)} +
{/* Fingerprints, not full keys: these exist to be COMPARED by a human — read the new one back to the author over the phone. The full key travels in the request. */} {canRetrust && ( @@ -2101,53 +3156,89 @@ function SignatureBlockDialog({ data, entry, busy, t, onRetrust, onClose }: {{data.detail}
++ {data.detail} +
)}
- {label}
-
- )
+ );
}
/** Client-side twin of the server's fingerprint: head…tail of the base64 payload. Display
* only — every equality check that matters happens server-side against the full key. */
function fingerprint(key: string | null): string | null {
- if (!key) return null
- const payload = key.trim().split(/\r?\n/).map(l => l.trim()).filter(l => l && !l.startsWith('untrusted comment')).pop()
- if (!payload) return null
- return payload.length <= 20 ? payload : `${payload.slice(0, 8)}…${payload.slice(-8)}`
+ if (!key) return null;
+ const payload = key
+ .trim()
+ .split(/\r?\n/)
+ .map((l) => l.trim())
+ .filter((l) => l && !l.startsWith('untrusted comment'))
+ .pop();
+ if (!payload) return null;
+ return payload.length <= 20 ? payload : `${payload.slice(0, 8)}…${payload.slice(-8)}`;
}
-function UpdateConsentDialog({ data, unsigned, t, onApprove, onLater }: {
- data: { plugin: PluginRow; version: string; newPermissions: string[]; newEgress: string[] }
- unsigned: boolean
- t: T; onApprove: () => void; onLater: () => void
+function UpdateConsentDialog({
+ data,
+ unsigned,
+ t,
+ onApprove,
+ onLater,
+}: {
+ data: { plugin: PluginRow; version: string; newPermissions: string[]; newEgress: string[] };
+ unsigned: boolean;
+ t: T;
+ onApprove: () => void;
+ onLater: () => void;
}) {
return (
{value}
+
+ {label}
+
+
+ {value}
+
- {data.newEgress.map(host => (
-
{host}
+ {data.newEgress.map((host) => (
+
+ {host}
+
))}
-
- {r.id}
+
+ {r.id}
+
{r.installed
? t('admin.plugins.dep.mismatch', { wanted: r.constraint, installed: r.installed })
: t('admin.plugins.dep.requires', { version: r.constraint })}
{sections.map(([h, b]) => (
)}
- )
+ );
}
diff --git a/client/src/components/Admin/AuditLogPanel.test.tsx b/client/src/components/Admin/AuditLogPanel.test.tsx
index 4d076f0ef..0e121ef45 100644
--- a/client/src/components/Admin/AuditLogPanel.test.tsx
+++ b/client/src/components/Admin/AuditLogPanel.test.tsx
@@ -1,8 +1,8 @@
// FE-ADMIN-AUDIT-001 to FE-ADMIN-AUDIT-010
-import { render, screen, waitFor } from '../../../tests/helpers/render';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { server } from '../../../tests/helpers/msw/server';
+import { render, screen, waitFor } from '../../../tests/helpers/render';
import { resetAllStores } from '../../../tests/helpers/store';
import AuditLogPanel from './AuditLogPanel';
@@ -44,7 +44,7 @@ describe('AuditLogPanel', () => {
http.get('/api/admin/audit-log', async () => {
await new Promise(() => {}); // never resolves
return HttpResponse.json({ entries: [], total: 0 });
- }),
+ })
);
render(
-
))}
{t(h as never)}
-{t(b as never)}
++ {t(h as never)} +
++ {t(b as never)} +
+
- )
+ );
}
return (
@@ -183,5 +192,5 @@ export default function AuditLogPanel({ serverTimezone }: AuditLogPanelProps): R
)}
- )
+ );
}
diff --git a/client/src/components/Admin/BackupPanel.test.tsx b/client/src/components/Admin/BackupPanel.test.tsx
index db30a6a05..6e770feda 100644
--- a/client/src/components/Admin/BackupPanel.test.tsx
+++ b/client/src/components/Admin/BackupPanel.test.tsx
@@ -1,23 +1,23 @@
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
-import { render, screen, waitFor, within, fireEvent } from '../../../tests/helpers/render'
-import userEvent from '@testing-library/user-event'
-import { resetAllStores, seedStore } from '../../../tests/helpers/store'
-import { useSettingsStore } from '../../store/settingsStore'
-import { server } from '../../../tests/helpers/msw/server'
-import { http, HttpResponse } from 'msw'
-import BackupPanel from './BackupPanel'
-import { ToastContainer } from '../shared/Toast'
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { server } from '../../../tests/helpers/msw/server';
+import { fireEvent, render, screen, waitFor } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useSettingsStore } from '../../store/settingsStore';
+import { ToastContainer } from '../shared/Toast';
+import BackupPanel from './BackupPanel';
const manualBackup = {
filename: 'backup-2025-01-15.zip',
created_at: '2025-01-15T10:00:00Z',
size: 2048000,
-}
+};
const autoBackup = {
filename: 'auto-backup-2025-02-01.zip',
created_at: '2025-02-01T02:00:00Z',
size: 1024000,
-}
+};
function defaultBackupHandlers() {
return [
@@ -26,437 +26,484 @@ function defaultBackupHandlers() {
HttpResponse.json({
settings: { enabled: false, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
timezone: 'UTC',
- }),
+ })
),
- ]
+ ];
}
function getToggleButton() {
// The enable toggle is a | {fmtTime(e.created_at)} | {/* A table cell ignores max-width under auto layout, so the box inside truncates. */} - {userLabel(e)} + + {userLabel(e)} + | - {e.action} + + {e.action} + | {e.resource || '—'} | {e.ip || '—'} | @@ -145,7 +154,7 @@ export default function AuditLogPanel({ serverTimezone }: AuditLogPanelProps): R