simple-module-feature-flags 0.0.32__tar.gz → 0.0.33__tar.gz

{simple_module_feature_flags-0.0.32 → simple_module_feature_flags-0.0.33}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: simple_module_feature_flags
-Version: 0.0.32
+Version: 0.0.33
 Summary: Simple feature-flag module with per-tenant overrides and a consumer API for simple_module
 Project-URL: Homepage, https://github.com/antosubash/simple_module_python
 Project-URL: Repository, https://github.com/antosubash/simple_module_python
@@ -21,9 +21,9 @@ Classifier: Topic :: Internet :: WWW/HTTP
 Classifier: Topic :: Software Development :: Libraries :: Application Frameworks
 Classifier: Typing :: Typed
 Requires-Python: >=3.12
-Requires-Dist: simple-module-core==0.0.32
-Requires-Dist: simple-module-db==0.0.32
-Requires-Dist: simple-module-hosting==0.0.32
+Requires-Dist: simple-module-core==0.0.33
+Requires-Dist: simple-module-db==0.0.33
+Requires-Dist: simple-module-hosting==0.0.33
 Description-Content-Type: text/markdown
 
 # simple_module_feature_flags

simple_module_feature_flags-0.0.33/feature_flags/constants.py

@@ -0,0 +1,50 @@
+"""Stable identifiers for the feature_flags module."""
+
+PERM_FEATURE_FLAGS_VIEW = "feature_flags.view"
+PERM_FEATURE_FLAGS_MANAGE = "feature_flags.manage"
+# Shown as a heading in the role editor, so it follows the same sentence case
+# as the menu label and the page title rather than reading "Feature Flags"
+# beside them.
+PERM_GROUP = "Feature flags"
+
+# Prefix is load-bearing on SQLite, which has no per-module schemas.
+TABLE_OVERRIDE = "feature_flags_override"
+UQ_OVERRIDE_SCOPE_NAME = "uq_feature_flags_override_scope_scope_id_name"
+
+SCOPE_SYSTEM = "system"
+SCOPE_TENANT = "tenant"
+ALL_SCOPES = (SCOPE_SYSTEM, SCOPE_TENANT)
+# Empty string, not NULL: PG treats NULLs as distinct in unique indexes,
+# which would let two "system" rows for the same flag coexist.
+SYSTEM_SCOPE_ID = ""
+
+SCOPE_MAX_LENGTH = 10
+SCOPE_ID_MAX_LENGTH = 64
+
+LOCALE_NAMESPACE = "feature_flags"
+
+MENU_LABEL = "Feature flags"
+# Trailing slash: the browse route is registered at "/" under the view
+# prefix, so linking to the bare prefix costs a 307 on every navigation.
+MENU_URL = "/admin/feature-flags/"
+MENU_ICON = "flag"
+MENU_ORDER = 110
+
+PAGE_BROWSE = "FeatureFlags/Browse"
+
+API_PREFIX = "/api/feature_flags"
+VIEW_PREFIX = "/admin/feature-flags"
+QP_TENANT_ID = "tenant_id"
+# Audit rows carry an override's primary key and nothing else. There is no
+# per-override page to land on, so the link opens the flags screen and names
+# the row it came from; an AuditLink without an "{id}" slot is rejected at
+# boot because every row would otherwise resolve to the same URL.
+QP_OVERRIDE = "override"
+AUDIT_LINK_LABEL = "Feature flag override"
+AUDIT_LINK_LABEL_KEY = "feature_flags.audit.override"
+
+# Module name and browse URL of the audit log, used to decide whether the
+# "View change history" link has anywhere to go and where. Not a dependency:
+# flags work perfectly well without an audit log installed.
+AUDIT_LOG_MODULE = "AuditLog"
+AUDIT_LOG_VIEW_URL = "/admin/audit-log/"

{simple_module_feature_flags-0.0.32 → simple_module_feature_flags-0.0.33}/feature_flags/endpoints/views.py

@@ -15,6 +15,8 @@ from simple_module_hosting.permissions import RequiresPermission
 from starlette.responses import RedirectResponse
 
 from feature_flags.constants import (
+    AUDIT_LOG_MODULE,
+    AUDIT_LOG_VIEW_URL,
     MENU_URL,
     PAGE_BROWSE,
     PERM_FEATURE_FLAGS_MANAGE,
@@ -34,6 +36,22 @@ def _redirect_for_tenant(tenant_id: str | None) -> RedirectResponse:
     return RedirectResponse(target, status_code=303)
 
 
+def _audit_log_url(request: Request) -> str | None:
+    """Where "View change history" points, or ``None`` when nothing is there.
+
+    The audit log is an ordinary installable module, not a dependency of this
+    one — offering a link to a screen the install does not have is a 404 with
+    extra steps. Built from the model class name because that is the key the
+    trail is written under.
+    """
+    from feature_flags.models import FeatureFlagOverride
+
+    installed = any(m.meta.name == AUDIT_LOG_MODULE for m in request.app.state.sm.modules)
+    if not installed:
+        return None
+    return f"{AUDIT_LOG_VIEW_URL}?entity_type={FeatureFlagOverride.__name__}"
+
+
 def _scope_args(tenant_id: str | None) -> dict[str, str]:
     if tenant_id:
         return {"scope": SCOPE_TENANT, "scope_id": tenant_id}
@@ -46,6 +64,7 @@ def _scope_args(tenant_id: str | None) -> dict[str, str]:
     dependencies=[Depends(RequiresPermission(PERM_FEATURE_FLAGS_VIEW))],
 )
 async def browse(
+    request: Request,
     inertia: InertiaDep,
     service: FeatureFlagServiceDep,
     registry: FeatureFlagRegistryDep,
@@ -59,6 +78,7 @@ async def browse(
             "flags": [f.model_dump(mode="json") for f in flags],
             "tenant_id": tenant_id,
             "tenants": tenants,
+            "audit_log_url": _audit_log_url(request),
         },
     )
 

simple_module_feature_flags-0.0.33/feature_flags/locales/en.json

@@ -0,0 +1,55 @@
+{
+  "browse": {
+    "title": "Feature flags",
+    "description": "Runtime toggles. A tenant override wins over the system value.",
+    "empty_title": "No feature flags registered",
+    "empty_description": "Modules declare flags via register_feature_flags(); install one to see it here.",
+    "scope_label": "Scope",
+    "viewing_system": "Viewing system-level flags — every tenant follows these unless it overrides them.",
+    "viewing_tenant": "Viewing overrides for tenant {tenant_id} — unset flags follow the system value.",
+    "view_history": "View change history →",
+    "audit_note": "Every toggle is written to the audit log with the actor and the previous value.",
+    "tenant_id_label": "Tenant ID",
+    "tenant_id_placeholder": "e.g. acme",
+    "scope_system": "system",
+    "scope_custom": "Other…",
+    "go": "View",
+    "cancel": "Cancel"
+  },
+  "table": {
+    "name": "Name",
+    "description": "Description",
+    "system": "System",
+    "effective": "Effective",
+    "actions": "Actions",
+    "on": "on",
+    "off": "off",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "overridden": "override",
+    "following_default": "following default",
+    "following_system": "following system",
+    "clear_override": "Clear override"
+  },
+  "confirm": {
+    "enable_title": "Enable “{name}”?",
+    "disable_title": "Disable “{name}”?",
+    "scope_system": "This changes the value for every tenant, immediately.",
+    "scope_tenant": "This sets an override for tenant “{tenant_id}” only. Other tenants keep following the system value.",
+    "enable_action": "Enable",
+    "disable_action": "Disable",
+    "cancel": "Cancel"
+  },
+  "toasts": {
+    "enabled": "\"{name}\" enabled",
+    "disabled": "\"{name}\" disabled",
+    "cleared": "Override cleared for \"{name}\"",
+    "toggle_failed": "Failed to update flag"
+  },
+  "audit": {
+    "override": "Feature flag override"
+  },
+  "nav": {
+    "feature_flags": "Feature flags"
+  }
+}

{simple_module_feature_flags-0.0.32 → simple_module_feature_flags-0.0.33}/feature_flags/module.py

@@ -5,13 +5,17 @@ from __future__ import annotations
 import importlib.resources
 import logging
 from pathlib import Path
+from typing import TYPE_CHECKING
 
 from fastapi import APIRouter, FastAPI
+from simple_module_core.audit_links import AuditLink, AuditLinkRegistry
 from simple_module_core.menu import MenuItem, MenuRegistry, MenuSection
 from simple_module_core.module import ModuleBase, ModuleMeta
 from simple_module_core.permissions import PermissionRegistry
 
 from feature_flags.constants import (
+    AUDIT_LINK_LABEL,
+    AUDIT_LINK_LABEL_KEY,
     LOCALE_NAMESPACE,
     MENU_ICON,
     MENU_LABEL,
@@ -19,16 +23,47 @@ from feature_flags.constants import (
     MENU_URL,
     PERM_FEATURE_FLAGS_MANAGE,
     PERM_FEATURE_FLAGS_VIEW,
+    PERM_GROUP,
+    QP_OVERRIDE,
+    VIEW_PREFIX,
 )
 
+if TYPE_CHECKING:
+    from sqlalchemy.ext.asyncio import AsyncSession
+
 _logger = logging.getLogger(__name__)
 
 
+async def _resolve_override_labels(db: AsyncSession, ids: list[str]) -> dict[str, str]:
+    """Name an override row by the flag it overrides.
+
+    The row's primary key is an autoincrementing integer with no meaning
+    outside the table. What a reader of "someone changed override 12" wants to
+    know is *which flag* — so the label is the flag name, not the id, and not
+    the row's scope (which the flags screen shows once the link is followed).
+    """
+    from sqlalchemy import select
+
+    from feature_flags.models import FeatureFlagOverride
+
+    numeric = {int(raw): raw for raw in ids if raw.lstrip("-").isdigit()}
+    if not numeric:
+        return {}
+    rows = (
+        await db.execute(
+            select(FeatureFlagOverride.id, FeatureFlagOverride.name).where(
+                FeatureFlagOverride.id.in_(list(numeric))
+            )
+        )
+    ).all()
+    return {numeric.get(row_id, str(row_id)): name for row_id, name in rows}
+
+
 class FeatureFlagsModule(ModuleBase):
     meta = ModuleMeta(
         name="FeatureFlags",
         route_prefix="/api/feature_flags",
-        view_prefix="/feature_flags",
+        view_prefix=VIEW_PREFIX,
         i18n_audience="admin",
     )
 
@@ -43,20 +78,46 @@ class FeatureFlagsModule(ModuleBase):
         registry.add(
             MenuItem(
                 label=MENU_LABEL,
+                label_key="feature_flags.nav.feature_flags",
                 url=MENU_URL,
                 icon=MENU_ICON,
                 order=MENU_ORDER,
-                section=MenuSection.SIDEBAR,
-                group="Administration",
+                section=MenuSection.ADMIN_SIDEBAR,
+                group="System",
+                group_key="ui.nav_groups.system",
                 # Mirrors the view router's guard. Without it the entry shows
                 # for every signed-in account and 403s on click.
                 permissions=[PERM_FEATURE_FLAGS_VIEW],
             )
         )
 
+    def register_audit_links(self, registry: AuditLinkRegistry) -> None:
+        """Point audit rows for an override back at the flags screen.
+
+        The browse footer promises every toggle is written to the audit log;
+        the reverse trip is what makes that promise useful. There is no
+        per-override page, so the link lands on the table with the row's id in
+        the query string rather than inventing a detail screen for a two-column
+        record.
+        """
+        from feature_flags.models import FeatureFlagOverride
+
+        registry.register(
+            AuditLink(
+                # Class name, not __tablename__ — see AuditLink.entity_type.
+                # The table name travels alongside as the audit log's type tag.
+                entity_type=FeatureFlagOverride.__name__,
+                url_template=f"{MENU_URL}?{QP_OVERRIDE}={{id}}",
+                label=AUDIT_LINK_LABEL,
+                label_key=AUDIT_LINK_LABEL_KEY,
+                table_name=FeatureFlagOverride.__tablename__,
+                label_resolver=_resolve_override_labels,
+            )
+        )
+
     def register_permissions(self, registry: PermissionRegistry) -> None:
         registry.add_group(
-            "Feature Flags",
+            PERM_GROUP,
             [
                 PERM_FEATURE_FLAGS_VIEW,
                 PERM_FEATURE_FLAGS_MANAGE,

simple_module_feature_flags-0.0.33/feature_flags/pages/Browse.tsx

@@ -0,0 +1,111 @@
+import { Head, router, usePage } from '@inertiajs/react';
+import { keys, useT } from '@simple-module-py/i18n';
+import { PageShell } from '@simple-module-py/ui/components/PageShell';
+import { usePermissions } from '@simple-module-py/ui/hooks/use-permissions';
+import { AdminLayout } from '@simple-module-py/ui/layouts/AdminLayout';
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { FlagTable } from './components/FlagTable';
+import { ScopeCard } from './components/ScopeCard';
+import { type PendingToggle, ToggleConfirmDialog } from './components/ToggleConfirmDialog';
+import type { FeatureFlag } from './types';
+
+interface Props {
+  flags: FeatureFlag[];
+  tenant_id: string | null;
+  tenants: string[];
+  audit_log_url: string | null;
+}
+
+function buildPath(tenantId: string | null) {
+  // Trailing slash: the browse route is registered at "/" under the module's
+  // view prefix, and `_clone_bare_prefix_route` cannot alias a bare prefix for
+  // routes contributed via `include_router` — so the bare form costs a 307 on
+  // every navigation. Matches MENU_URL in constants.py.
+  return tenantId
+    ? `/admin/feature-flags/?tenant_id=${encodeURIComponent(tenantId)}`
+    : '/admin/feature-flags/';
+}
+
+function actionUrl(name: string, action: 'toggle' | 'clear', tenantId: string | null) {
+  const base = `/admin/feature-flags/${name}/${action}`;
+  return tenantId ? `${base}?tenant_id=${encodeURIComponent(tenantId)}` : base;
+}
+
+function Browse() {
+  const { flags, tenant_id, tenants, audit_log_url } = usePage<{ props: Props }>()
+    .props as unknown as Props;
+  const { t } = useT();
+  const { can } = usePermissions();
+  const canManage = can('feature_flags.manage');
+
+  // The switch stages the change; the confirm is what writes it. The Switch
+  // stays bound to the server value, so cancelling leaves it where it was
+  // without needing to undo anything.
+  const [pending, setPending] = useState<PendingToggle | null>(null);
+
+  function handleToggle({ name, next }: PendingToggle) {
+    setPending(null);
+    router.post(
+      actionUrl(name, 'toggle', tenant_id),
+      { enabled: next },
+      {
+        preserveScroll: true,
+        onSuccess: () =>
+          toast.success(
+            next
+              ? t(keys.feature_flags.toasts.enabled, { name })
+              : t(keys.feature_flags.toasts.disabled, { name }),
+          ),
+        onError: () => toast.error(t(keys.feature_flags.toasts.toggle_failed)),
+      },
+    );
+  }
+
+  function handleClear(flag: FeatureFlag) {
+    router.post(
+      actionUrl(flag.name, 'clear', tenant_id),
+      {},
+      {
+        preserveScroll: true,
+        onSuccess: () => toast.success(t(keys.feature_flags.toasts.cleared, { name: flag.name })),
+        onError: () => toast.error(t(keys.feature_flags.toasts.toggle_failed)),
+      },
+    );
+  }
+
+  return (
+    <>
+      <Head title={t(keys.feature_flags.browse.title)} />
+      <PageShell
+        title={t(keys.feature_flags.browse.title)}
+        description={t(keys.feature_flags.browse.description)}
+      >
+        <ScopeCard
+          tenantId={tenant_id}
+          tenants={tenants}
+          auditLogUrl={audit_log_url}
+          onSelect={(next) => router.visit(buildPath(next))}
+        />
+
+        <FlagTable
+          flags={flags}
+          tenantId={tenant_id}
+          canManage={canManage}
+          onToggle={(flag, next) => setPending({ name: flag.name, next })}
+          onClear={handleClear}
+        />
+
+        <ToggleConfirmDialog
+          pending={pending}
+          tenantId={tenant_id}
+          onConfirm={handleToggle}
+          onCancel={() => setPending(null)}
+        />
+      </PageShell>
+    </>
+  );
+}
+
+Browse.layout = (page: React.ReactNode) => <AdminLayout>{page}</AdminLayout>;
+export default Browse;

simple_module_feature_flags-0.0.33/feature_flags/pages/components/FlagTable.tsx

@@ -0,0 +1,162 @@
+import { keys, useT } from '@simple-module-py/i18n';
+import { Badge } from '@simple-module-py/ui/components/ui/badge';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import { Card } from '@simple-module-py/ui/components/ui/card';
+import {
+  Empty,
+  EmptyDescription,
+  EmptyMedia,
+  EmptyTitle,
+} from '@simple-module-py/ui/components/ui/empty';
+import { Switch } from '@simple-module-py/ui/components/ui/switch';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@simple-module-py/ui/components/ui/table';
+import { cn } from '@simple-module-py/ui/lib/utils';
+import { Flag } from 'lucide-react';
+import type { FeatureFlag } from '../types';
+
+interface Props {
+  flags: FeatureFlag[];
+  /** Non-null while a tenant scope is selected; changes the fallback copy. */
+  tenantId: string | null;
+  canManage: boolean;
+  onToggle: (flag: FeatureFlag, next: boolean) => void;
+  onClear: (flag: FeatureFlag) => void;
+}
+
+const HEAD =
+  'bg-secondary/40 text-[11px] font-semibold uppercase tracking-[0.08em] ' +
+  'text-muted-foreground sm:px-6';
+
+export function FlagTable({ flags, tenantId, canManage, onToggle, onClear }: Props) {
+  const { t } = useT();
+  const columnCount = canManage ? 5 : 4;
+
+  /** The override control, or the sentence explaining why there is none. */
+  const clearAction = (flag: FeatureFlag) =>
+    flag.overridden ? (
+      <Button
+        variant="link"
+        size="sm"
+        className="h-auto p-0 text-primary-700 max-sm:min-h-11"
+        onClick={() => onClear(flag)}
+      >
+        {t(keys.feature_flags.table.clear_override)}
+      </Button>
+    ) : (
+      <span className="text-xs text-muted-foreground">
+        {tenantId
+          ? t(keys.feature_flags.table.following_system)
+          : t(keys.feature_flags.table.following_default)}
+      </span>
+    );
+
+  return (
+    // Fills the viewport with the audit note pinned to the bottom, as the deck
+    // and the settings store both do. A min-height, not a fixed one, so a long
+    // flag list grows rather than scrolling inside the card.
+    <Card className="flex flex-col gap-0 overflow-hidden border-border p-0 lg:min-h-[calc(100vh-var(--app-chrome-h)-15rem)]">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className={HEAD}>{t(keys.feature_flags.table.name)}</TableHead>
+            <TableHead className={cn(HEAD, 'hidden md:table-cell')}>
+              {t(keys.feature_flags.table.description)}
+            </TableHead>
+            <TableHead className={cn(HEAD, 'hidden sm:table-cell')}>
+              {t(keys.feature_flags.table.system)}
+            </TableHead>
+            <TableHead className={HEAD}>{t(keys.feature_flags.table.effective)}</TableHead>
+            {canManage && (
+              // Hidden below `sm`: at 390px this column pushed the table wider
+              // than the card. Its control moves under the switch instead.
+              <TableHead className={cn(HEAD, 'hidden text-right sm:table-cell')}>
+                {t(keys.feature_flags.table.actions)}
+              </TableHead>
+            )}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {flags.map((flag) => (
+            <TableRow key={flag.name} className={cn(flag.overridden && 'bg-primary-600/10')}>
+              <TableCell className="sm:px-6">
+                <div className="flex flex-wrap items-center gap-2">
+                  <code className="font-mono text-sm font-medium">{flag.name}</code>
+                  {flag.overridden && (
+                    <Badge variant="outline" className="border-primary text-primary-700">
+                      {t(keys.feature_flags.table.overridden)}
+                    </Badge>
+                  )}
+                </div>
+              </TableCell>
+              <TableCell className="hidden md:table-cell sm:px-6">
+                <span className="line-clamp-2 text-sm text-muted-foreground">
+                  {flag.description || '—'}
+                </span>
+              </TableCell>
+              {/* The value every tenant inherits: the system override when one
+                  exists, otherwise the default the module shipped. */}
+              <TableCell className="hidden sm:table-cell sm:px-6 text-sm text-muted-foreground">
+                {(flag.system_enabled ?? flag.default_enabled)
+                  ? t(keys.feature_flags.table.on)
+                  : t(keys.feature_flags.table.off)}
+              </TableCell>
+              <TableCell className="sm:px-6">
+                <div className="flex items-center gap-3">
+                  <Switch
+                    checked={flag.enabled}
+                    onCheckedChange={(checked) => onToggle(flag, checked === true)}
+                    disabled={!canManage}
+                    aria-label={flag.name}
+                  />
+                  <span
+                    className={cn(
+                      'text-sm',
+                      flag.enabled ? 'font-medium' : 'text-muted-foreground',
+                    )}
+                  >
+                    {flag.enabled
+                      ? t(keys.feature_flags.table.enabled)
+                      : t(keys.feature_flags.table.disabled)}
+                  </span>
+                </div>
+                {canManage && <div className="mt-1.5 sm:hidden">{clearAction(flag)}</div>}
+              </TableCell>
+              {canManage && (
+                <TableCell className="hidden text-right sm:table-cell sm:px-6">
+                  {clearAction(flag)}
+                </TableCell>
+              )}
+            </TableRow>
+          ))}
+          {/* The deck has no empty state — it never shows an install with no
+              modules registering flags. This one does exist. */}
+          {flags.length === 0 && (
+            <TableRow>
+              <TableCell colSpan={columnCount} className="h-40">
+                <Empty>
+                  <EmptyMedia variant="icon">
+                    <Flag className="size-5 text-primary-300" />
+                  </EmptyMedia>
+                  <EmptyTitle>{t(keys.feature_flags.browse.empty_title)}</EmptyTitle>
+                  <EmptyDescription>
+                    {t(keys.feature_flags.browse.empty_description)}
+                  </EmptyDescription>
+                </Empty>
+              </TableCell>
+            </TableRow>
+          )}
+        </TableBody>
+      </Table>
+      <p className="mt-auto border-t px-4 py-3 text-sm text-muted-foreground">
+        {t(keys.feature_flags.browse.audit_note)}
+      </p>
+    </Card>
+  );
+}

simple_module_feature_flags-0.0.33/feature_flags/pages/components/ScopeCard.tsx

@@ -0,0 +1,51 @@
+import { Link } from '@inertiajs/react';
+import { keys, useT } from '@simple-module-py/i18n';
+import { Card } from '@simple-module-py/ui/components/ui/card';
+import { TenantPicker } from './TenantPicker';
+
+interface Props {
+  tenantId: string | null;
+  tenants: string[];
+  /** Audit log filtered to override rows, or null when none is installed. */
+  auditLogUrl: string | null;
+  onSelect: (tenantId: string | null) => void;
+}
+
+// Word Joiner: a zero-width character that cannot appear in real copy, used to
+// find where the translator put the tenant id so it can be rendered in the mono
+// face. Interpolating twice and splitting keeps word order the translator's
+// choice, which pinning the id to the end of the sentence would not.
+const SLOT = '\u2060';
+
+/**
+ * The scope row above the table: which tenant is being looked at, what that
+ * means for unset flags, and a way into the history of every change.
+ */
+export function ScopeCard({ tenantId, tenants, auditLogUrl, onSelect }: Props) {
+  const { t } = useT();
+  const [hintBefore, hintAfter] = tenantId
+    ? t(keys.feature_flags.browse.viewing_tenant, { tenant_id: SLOT }).split(SLOT)
+    : [t(keys.feature_flags.browse.viewing_system), ''];
+
+  return (
+    <Card className="mb-4 flex flex-row flex-wrap items-center gap-x-3 gap-y-2 p-4">
+      <span className="text-sm font-medium text-muted-foreground">
+        {t(keys.feature_flags.browse.scope_label)}
+      </span>
+      <TenantPicker tenantId={tenantId} tenants={tenants} onSelect={onSelect} />
+      <p className="text-sm text-muted-foreground">
+        {hintBefore}
+        {tenantId && <code className="font-mono text-xs">{tenantId}</code>}
+        {hintAfter}
+      </p>
+      {auditLogUrl && (
+        <Link
+          href={auditLogUrl}
+          className="text-xs font-medium text-primary-700 hover:underline sm:ml-auto"
+        >
+          {t(keys.feature_flags.browse.view_history)}
+        </Link>
+      )}
+    </Card>
+  );
+}