SEP-1844: Hide per-app write controls from non-admin sessions

The React shell gated its own Settings and Admin Apps pages on
`useAuth().isAdmin`, but no per-app control did, so a non-admin was
offered create / execute / stop / retry / delete buttons that answer 403
now that the server enforces them. The gap was structural rather than an
oversight per control: `useAuth` lived in `@sep/shell`, and the workspace
dependency direction is shell -> apps -> framework -> api, so neither the
app packages nor the framework could reach it. Exactly one app was
role-aware, and only via a shell-side wrapper threading a boolean down as
a prop.

Move the context down the graph instead of threading the boolean across
it. `@sep/api` has no `@sep` dependencies, already carries React as a peer
and hosts the query hooks, and every consuming package already depends on
it, so it hosts the context and `useAuth` while `@sep/shell` keeps owning
the provider and all session/token state. A missing provider now resolves
to a signed-out, non-admin session instead of throwing, so the many test
and Storybook renders that mount these components bare keep working; a
once-per-bundle dev warning keeps that from failing silently.

Gated controls read a derived `canMutate`, never `isAdmin`. The server
already resolves a minimum role per route rather than one administrator
flag, so widening the UI to match is an edit to `deriveCanMutate` and to
no call site. `isAdmin` survives only where the question really is
"is this an administrator": the shell's two page guards and their
`enabled: isAdmin` query suppression.

Gating the framework's shared components covers every schema-driven app
at once; the bespoke apps' local mutations are swept at their rendering
call sites, so a hidden control issues no request and the hooks stay
usable unchanged on the admin path. Selection affordances are hidden
alongside the action they feed, so no bulk toolbar is left stranded. The
create and edit pages keep their back chrome behind the guard state,
since nothing links a read-only session there and anyone who arrives did
so by URL. `SchemaListView` now drops an `actions` column with no delete
handler rather than rendering a header over empty cells.

Reads are untouched: the server gate keys on HTTP method, so every GET
still succeeds for a non-admin, and no query suppression was added. This
is what the UI advertises, never a security control -- the backend gate
remains the only boundary.

Also collapses the snippets prop-threading onto the hook and deletes the
registry wrapper that fed it. The e2e harness mocked `isAdmin: false`
while driving write controls, which the flag did not previously affect;
those stubs now say admin, matching what the specs exercise.

Addressed review feedback: dropped the dead `actions` column in the
shared list view, kept back navigation on the page guards, moved the
read-only wording into one component so it cannot drift, and added direct
tests for the capability derivation and the missing-provider fallback.

Author: nachodd

changelog.d/SEP-1844.changed.md

@@ -0,0 +1 @@
+Non-administrator sessions no longer see per-app create, execute, stop, retry or delete controls in the React UI: every such control is hidden rather than offered and answered with a 403. This is a UI-only change and never a security boundary — the server-side gate is unchanged and remains the only one. Reads are untouched, so a non-administrator keeps every list, detail, log and history view; the pages they are left with are read-only, which for some apps means a sparse view with no actions. Which sessions this affects depends on the auth provider: Casdoor defaults new users to non-administrator, and the Grafana provider grants administrator only from `isGrafanaAdmin` or an Admin org role. The UI still keys on the administrator flag alone, so a session holding a lesser role that the server would accept (an `editor` on Alert Templates' push and restore) is offered no control for it yet.

frontend/packages/api/src/auth-context.ts

@@ -0,0 +1,129 @@
+/**
+ * Copyright (C) 2026 Percona LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { createContext, useContext, useMemo } from 'react';
+import type { User } from './types/api';
+
+/**
+ * Session state owned by the shell's ``AuthProvider``.
+ *
+ * The context lives here, at the root of the frontend dependency graph, so the
+ * framework and every app package can read it — they all depend on ``@sep/api``
+ * and none of them may depend on ``@sep/shell``. The provider itself, and all
+ * token/session bookkeeping, stays in the shell.
+ *
+ * One context carries both the session and the capability derived from it, so a
+ * silent-refresh token rotation re-renders every capability consumer too. That
+ * is a handful of controls every few minutes; splitting the capability into its
+ * own context is the fix if it ever costs more than it saves.
+ */
+export interface AuthSession {
+  user: User | null;
+  accessToken: string | null;
+  isAuthenticated: boolean;
+  /**
+   * Administrator identity. Read this only for genuinely admin-only surfaces
+   * (the shell's Settings / Admin Apps pages and their query suppression). Per-app
+   * write controls gate on {@link AuthState.canMutate} instead.
+   */
+  isAdmin: boolean;
+  /** true during initial session bootstrap & during login */
+  loading: boolean;
+  /** true after the initial session check finishes (success or failure) */
+  ready: boolean;
+  login: (username: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+}
+
+/** {@link AuthSession} plus the capabilities derived from it. */
+export interface AuthState extends AuthSession {
+  /**
+   * Whether this session may mutate: the gate every per-app create / execute /
+   * stop / retry / delete control reads.
+   *
+   * Semantically distinct from {@link AuthSession.isAdmin} even though it is
+   * exactly that today. The server already resolves a minimum role per route
+   * rather than one administrator flag (SEP-1850), and ``User`` carries that
+   * role, so widening the UI to match is an edit to
+   * {@link deriveCanMutate} — per-control minimum roles — and to no call site.
+   */
+  canMutate: boolean;
+}
+
+/**
+ * Single derivation of "may this session mutate?" from session state.
+ *
+ * Deliberately the administrator flag and nothing finer: most unsafe routes
+ * require ``admin``, so keying on a lesser role here would put back the
+ * controls that answer 403. Widening this to a per-control minimum role is the
+ * follow-up that {@link AuthState.canMutate} describes.
+ */
+export function deriveCanMutate(session: AuthSession): boolean {
+  return session.isAdmin;
+}
+
+/**
+ * Resolved state for a consumer rendered outside an ``AuthProvider``: signed
+ * out, non-admin, and therefore unable to mutate. Tests and Storybook renders
+ * mount framework/app components without the shell's provider, so a missing
+ * provider must degrade to the least-privileged state rather than throw.
+ */
+export const UNAUTHENTICATED_SESSION: AuthSession = Object.freeze({
+  user: null,
+  accessToken: null,
+  isAuthenticated: false,
+  isAdmin: false,
+  loading: false,
+  ready: false,
+  login: async () => {},
+  logout: async () => {},
+});
+
+export const AuthContext = createContext<AuthSession | null>(null);
+
+let warnedMissingProvider = false;
+
+/**
+ * Warn once per bundle when the provider is missing. Hiding controls is a
+ * quieter failure than the throw this replaced, so a stray consumer mounted
+ * outside the provider would otherwise silently look like a non-admin session.
+ */
+function warnMissingProvider(): void {
+  if (warnedMissingProvider || !import.meta.env?.DEV) {
+    return;
+  }
+  warnedMissingProvider = true;
+  // eslint-disable-next-line no-console -- surface a silently degraded session in dev
+  console.warn(
+    'useAuth() was called outside an AuthProvider — falling back to a signed-out, ' +
+      'non-admin session. Mutation controls will be hidden.',
+  );
+}
+
+/**
+ * Read the current session and its derived capabilities.
+ *
+ * Resolves to {@link UNAUTHENTICATED_SESSION} when no provider is mounted.
+ */
+export function useAuth(): AuthState {
+  const session = useContext(AuthContext);
+  if (!session) {
+    warnMissingProvider();
+  }
+  const resolved = session ?? UNAUTHENTICATED_SESSION;
+  return useMemo(() => ({ ...resolved, canMutate: deriveCanMutate(resolved) }), [resolved]);
+}

frontend/packages/api/src/index.ts

@@ -37,6 +37,11 @@ export { createQueryClient, defaultQueryClientConfig } from './queryClient';
 export { ApiError, normalizeAxiosError, parseFieldErrors } from './errors';
 export type { ApiErrorDetails, ApiErrorKind, FieldValidationError } from './errors';
 
+// Auth context (provider lives in @sep/shell; the context lives here so the
+// framework and app packages can read it without depending on the shell)
+export { AuthContext, UNAUTHENTICATED_SESSION, deriveCanMutate, useAuth } from './auth-context';
+export type { AuthSession, AuthState } from './auth-context';
+
 // Auth
 export {
   postLogin,

frontend/packages/api/tests/auth-context.test.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (C) 2026 Percona LLC
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import { describe, expect, it } from 'vitest';
+import { UNAUTHENTICATED_SESSION, deriveCanMutate, type AuthSession } from '../src/auth-context';
+
+function session(overrides: Partial<AuthSession> = {}): AuthSession {
+  return { ...UNAUTHENTICATED_SESSION, ...overrides };
+}
+
+describe('deriveCanMutate', () => {
+  it('grants mutation to an administrator', () => {
+    expect(deriveCanMutate(session({ isAdmin: true, isAuthenticated: true }))).toBe(true);
+  });
+
+  it('withholds mutation from an authenticated non-administrator', () => {
+    expect(deriveCanMutate(session({ isAdmin: false, isAuthenticated: true }))).toBe(false);
+  });
+
+  it('withholds mutation from a signed-out session', () => {
+    expect(deriveCanMutate(UNAUTHENTICATED_SESSION)).toBe(false);
+  });
+
+  it('keys on the administrator flag alone, not on authentication', () => {
+    // The server resolves a minimum role per route; the UI deliberately keys on
+    // the one flag, so widening it stays a single-function change.
+    expect(deriveCanMutate(session({ isAdmin: true, isAuthenticated: false }))).toBe(true);
+  });
+});
+
+describe('UNAUTHENTICATED_SESSION', () => {
+  it('is the least-privileged session a missing provider can resolve to', () => {
+    expect(UNAUTHENTICATED_SESSION.isAdmin).toBe(false);
+    expect(UNAUTHENTICATED_SESSION.isAuthenticated).toBe(false);
+    expect(UNAUTHENTICATED_SESSION.user).toBeNull();
+    expect(UNAUTHENTICATED_SESSION.accessToken).toBeNull();
+  });
+
+  it('is frozen, so a consumer cannot escalate the shared fallback', () => {
+    expect(Object.isFrozen(UNAUTHENTICATED_SESSION)).toBe(true);
+    expect(() => {
+      (UNAUTHENTICATED_SESSION as { isAdmin: boolean }).isAdmin = true;
+    }).toThrow();
+    expect(UNAUTHENTICATED_SESSION.isAdmin).toBe(false);
+  });
+
+  it('resolves its no-op login and logout without throwing', async () => {
+    await expect(UNAUTHENTICATED_SESSION.login('u', 'p')).resolves.toBeUndefined();
+    await expect(UNAUTHENTICATED_SESSION.logout()).resolves.toBeUndefined();
+  });
+});

frontend/packages/apps/alerts/src/AlertsListPage.tsx

@@ -35,6 +35,7 @@ import {
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
 import SettingsIcon from '@mui/icons-material/Settings';
+import { useAuth } from '@sep/api';
 import { useAlertBackups, useAlertsIndex } from './hooks';
 import { AlertsWizard } from './AlertsWizard';
 import type { AlertTemplate, WizardMode } from './types';
@@ -54,6 +55,7 @@ const SEVERITY_COLORS: Record<string, 'default' | 'info' | 'warning' | 'error'>
  * AlertsWizard dialog.
  */
 export function AlertsListPage() {
+  const { canMutate } = useAuth();
   const { data, isLoading, error } = useAlertsIndex();
 
   const [selected, setSelected] = useState<Set<string>>(new Set());
@@ -133,30 +135,34 @@ export function AlertsListPage() {
               PMM not connected
             </Alert>
           )}
-          <Button
-            variant="contained"
-            startIcon={<NotificationsActiveIcon />}
-            disabled={selected.size === 0 || !data?.pmm_connected}
-            onClick={() => openWizard('push')}
-          >
-            Push Selected ({selected.size})
-          </Button>
-          <Button
-            variant="outlined"
-            onClick={() => openWizard('restore')}
-            disabled={(data?.recent_backups ?? []).length === 0}
-          >
-            Restore from Backup
-          </Button>
-          <Button
-            variant="outlined"
-            startIcon={<SettingsIcon />}
-            onClick={() => openWizard('pagerduty')}
-            disabled={!data?.pmm_connected}
-            color={pagerdutyConfigured ? 'success' : 'primary'}
-          >
-            {pagerdutyConfigured ? 'PagerDuty Configured ✓' : 'Configure PagerDuty'}
-          </Button>
+          {canMutate && (
+            <>
+              <Button
+                variant="contained"
+                startIcon={<NotificationsActiveIcon />}
+                disabled={selected.size === 0 || !data?.pmm_connected}
+                onClick={() => openWizard('push')}
+              >
+                Push Selected ({selected.size})
+              </Button>
+              <Button
+                variant="outlined"
+                onClick={() => openWizard('restore')}
+                disabled={(data?.recent_backups ?? []).length === 0}
+              >
+                Restore from Backup
+              </Button>
+              <Button
+                variant="outlined"
+                startIcon={<SettingsIcon />}
+                onClick={() => openWizard('pagerduty')}
+                disabled={!data?.pmm_connected}
+                color={pagerdutyConfigured ? 'success' : 'primary'}
+              >
+                {pagerdutyConfigured ? 'PagerDuty Configured ✓' : 'Configure PagerDuty'}
+              </Button>
+            </>
+          )}
         </Box>
       </Box>
 
@@ -173,16 +179,19 @@ export function AlertsListPage() {
             <Accordion key={group.service_type} disableGutters sx={{ mb: 1 }}>
               <AccordionSummary expandIcon={<ExpandMoreIcon />}>
                 <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Checkbox
-                    checked={allChecked}
-                    indeterminate={someChecked && !allChecked}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      toggleGroup(groupNames);
-                    }}
-                    size="small"
-                    inputProps={{ 'aria-label': `Select all ${group.label} templates` }}
-                  />
+                  {/* Selection exists only to feed Push Selected, so both go together. */}
+                  {canMutate && (
+                    <Checkbox
+                      checked={allChecked}
+                      indeterminate={someChecked && !allChecked}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        toggleGroup(groupNames);
+                      }}
+                      size="small"
+                      inputProps={{ 'aria-label': `Select all ${group.label} templates` }}
+                    />
+                  )}
                   <Typography variant="subtitle1" fontWeight={500}>
                     {group.label} ({group.templates.length})
                   </Typography>
@@ -205,12 +214,14 @@ export function AlertsListPage() {
                           py: 0.5,
                         }}
                       >
-                        <Checkbox
-                          checked={selected.has(template.name)}
-                          onChange={() => toggleTemplate(template.name)}
-                          size="small"
-                          inputProps={{ 'aria-label': template.name }}
-                        />
+                        {canMutate && (
+                          <Checkbox
+                            checked={selected.has(template.name)}
+                            onChange={() => toggleTemplate(template.name)}
+                            size="small"
+                            inputProps={{ 'aria-label': template.name }}
+                          />
+                        )}
                         <Box sx={{ flex: 1, minWidth: 0 }}>
                           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                             <Typography variant="body2" fontWeight={500}>