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

{simple_module_feature_flags-0.0.30 → simple_module_feature_flags-0.0.32}/.gitignore

@@ -63,3 +63,4 @@ Thumbs.db
 host/client_app/.playwright-cli/*
 .superpowers/
 .qa/
+.verify/

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

@@ -1,6 +1,6 @@
-Metadata-Version: 2.4
+Metadata-Version: 2.5
 Name: simple_module_feature_flags
-Version: 0.0.30
+Version: 0.0.32
 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.30
-Requires-Dist: simple-module-db==0.0.30
-Requires-Dist: simple-module-hosting==0.0.30
+Requires-Dist: simple-module-core==0.0.32
+Requires-Dist: simple-module-db==0.0.32
+Requires-Dist: simple-module-hosting==0.0.32
 Description-Content-Type: text/markdown
 
 # simple_module_feature_flags

{simple_module_feature_flags-0.0.30 → simple_module_feature_flags-0.0.32}/feature_flags/locales/en.json

@@ -10,12 +10,11 @@
     "viewing_tenant": "Viewing overrides for tenant \"{tenant_id}\". Tenant overrides beat the system value.",
     "tenant_id_label": "Tenant ID",
     "tenant_id_placeholder": "e.g. acme",
-    "scope_label": "Scope",
     "scope_system": "System (all tenants)",
-    "scope_tenant": "Specific tenant",
     "go": "View",
-    "back_to_system": "Back to system view",
-    "tenants_with_overrides": "Tenants with overrides"
+    "viewing_label": "Viewing",
+    "scope_custom": "Other tenant…",
+    "cancel": "Cancel"
   },
   "table": {
     "name": "Flag",
@@ -31,6 +30,15 @@
     "system_value": "System: {value}",
     "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",

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

@@ -48,6 +48,9 @@ class FeatureFlagsModule(ModuleBase):
                 order=MENU_ORDER,
                 section=MenuSection.SIDEBAR,
                 group="Administration",
+                # 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],
             )
         )
 

{simple_module_feature_flags-0.0.30 → simple_module_feature_flags-0.0.32}/feature_flags/pages/Browse.tsx

@@ -10,7 +10,6 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from '@simple-module-py/ui/components/ui/empty';
-import { Input } from '@simple-module-py/ui/components/ui/input';
 import { Switch } from '@simple-module-py/ui/components/ui/switch';
 import {
   Table,
@@ -25,6 +24,8 @@ import { AuthenticatedLayout } from '@simple-module-py/ui/layouts/AuthenticatedL
 import { Flag, RotateCcw } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { TenantPicker } from './components/TenantPicker';
+import { type PendingToggle, ToggleConfirmDialog } from './components/ToggleConfirmDialog';
 
 interface FeatureFlag {
   name: string;
@@ -55,19 +56,24 @@ function Browse() {
   const { t } = useT();
   const { can } = usePermissions();
   const canManage = can('feature_flags.manage');
-  const [tenantInput, setTenantInput] = useState(tenant_id ?? '');
 
-  function handleToggle(flag: FeatureFlag, next: boolean) {
+  // 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(flag.name, 'toggle', tenant_id),
+      actionUrl(name, 'toggle', tenant_id),
       { enabled: next },
       {
         preserveScroll: true,
         onSuccess: () =>
           toast.success(
             next
-              ? t(keys.feature_flags.toasts.enabled, { name: flag.name })
-              : t(keys.feature_flags.toasts.disabled, { name: flag.name }),
+              ? t(keys.feature_flags.toasts.enabled, { name })
+              : t(keys.feature_flags.toasts.disabled, { name }),
           ),
         onError: () => toast.error(t(keys.feature_flags.toasts.toggle_failed)),
       },
@@ -86,10 +92,6 @@ function Browse() {
     );
   }
 
-  function visitTenant(value: string) {
-    router.visit(buildPath(value.trim() || null));
-  }
-
   return (
     <>
       <Head title="Feature Flags" />
@@ -98,51 +100,11 @@ function Browse() {
         description={t(keys.feature_flags.browse.description)}
       >
         <Card className="mb-4 p-4">
-          <form
-            className="flex flex-wrap items-end gap-3"
-            onSubmit={(e) => {
-              e.preventDefault();
-              visitTenant(tenantInput);
-            }}
-          >
-            <div className="flex-1 min-w-[200px]">
-              <label className="block text-sm font-medium mb-1" htmlFor="tenant_id">
-                {t(keys.feature_flags.browse.tenant_id_label)}
-              </label>
-              <Input
-                id="tenant_id"
-                value={tenantInput}
-                onChange={(e) => setTenantInput(e.target.value)}
-                placeholder={t(keys.feature_flags.browse.tenant_id_placeholder)}
-              />
-            </div>
-            <Button type="submit" variant="default">
-              {t(keys.feature_flags.browse.go)}
-            </Button>
-            {tenant_id && (
-              <Button type="button" variant="ghost" onClick={() => visitTenant('')}>
-                {t(keys.feature_flags.browse.back_to_system)}
-              </Button>
-            )}
-          </form>
-          {tenants.length > 0 && (
-            <div className="mt-3 flex flex-wrap items-center gap-2 text-sm">
-              <span className="text-muted-foreground">
-                {t(keys.feature_flags.browse.tenants_with_overrides)}:
-              </span>
-              {tenants.map((tid) => (
-                <Button
-                  key={tid}
-                  type="button"
-                  size="sm"
-                  variant={tid === tenant_id ? 'default' : 'outline'}
-                  onClick={() => visitTenant(tid)}
-                >
-                  {tid}
-                </Button>
-              ))}
-            </div>
-          )}
+          <TenantPicker
+            tenantId={tenant_id}
+            tenants={tenants}
+            onSelect={(next) => router.visit(buildPath(next))}
+          />
           <p className="mt-3 text-sm text-muted-foreground">
             {tenant_id
               ? t(keys.feature_flags.browse.viewing_tenant, { tenant_id })
@@ -212,7 +174,9 @@ function Browse() {
                     <div className="flex items-center gap-3">
                       <Switch
                         checked={flag.enabled}
-                        onCheckedChange={(checked) => handleToggle(flag, checked === true)}
+                        onCheckedChange={(checked) =>
+                          setPending({ name: flag.name, next: checked === true })
+                        }
                         disabled={!canManage}
                         aria-label={flag.name}
                       />
@@ -277,6 +241,13 @@ function Browse() {
             </TableBody>
           </Table>
         </Card>
+
+        <ToggleConfirmDialog
+          pending={pending}
+          tenantId={tenant_id}
+          onConfirm={handleToggle}
+          onCancel={() => setPending(null)}
+        />
       </PageShell>
     </>
   );

simple_module_feature_flags-0.0.32/feature_flags/pages/components/TenantPicker.tsx

@@ -0,0 +1,112 @@
+import { keys, useT } from '@simple-module-py/i18n';
+import { Button } from '@simple-module-py/ui/components/ui/button';
+import { Input } from '@simple-module-py/ui/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from '@simple-module-py/ui/components/ui/select';
+import { useState } from 'react';
+
+interface Props {
+  /** Currently-viewed tenant, or null for the system scope. */
+  tenantId: string | null;
+  /** Tenants that already carry at least one override. */
+  tenants: string[];
+  onSelect: (tenantId: string | null) => void;
+}
+
+const SYSTEM = '__system__';
+const CUSTOM = '__custom__';
+
+/**
+ * Scope picker for the flags table.
+ *
+ * This was a free-text box, so viewing a tenant meant knowing and correctly
+ * typing its id — and a typo silently showed a scope with no overrides
+ * instead of an error.
+ *
+ * The list cannot be closed: there is no tenant registry in the framework
+ * (ids arrive on auth claims), so the only tenants this app can enumerate are
+ * those that already have an override. Creating the *first* override for a
+ * tenant therefore still needs a way to name one by hand, which is what the
+ * "other tenant" branch is for.
+ */
+export function TenantPicker({ tenantId, tenants, onSelect }: Props) {
+  const { t } = useT();
+  const [custom, setCustom] = useState(false);
+  const [draft, setDraft] = useState('');
+
+  // The tenant being viewed may not have overrides yet, so it can be absent
+  // from `tenants` — without this it would vanish from its own picker.
+  const options = [...new Set(tenantId ? [...tenants, tenantId] : tenants)].sort();
+
+  function handleChange(value: string) {
+    if (value === CUSTOM) {
+      setCustom(true);
+      setDraft('');
+      return;
+    }
+    setCustom(false);
+    onSelect(value === SYSTEM ? null : value);
+  }
+
+  return (
+    <div className="flex flex-wrap items-end gap-3">
+      <div className="min-w-[240px]">
+        <span className="mb-1 block text-sm font-medium">
+          {t(keys.feature_flags.browse.viewing_label)}
+        </span>
+        <Select value={custom ? CUSTOM : (tenantId ?? SYSTEM)} onValueChange={handleChange}>
+          <SelectTrigger className="w-full">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={SYSTEM}>{t(keys.feature_flags.browse.scope_system)}</SelectItem>
+            {options.length > 0 && <SelectSeparator />}
+            {options.map((tid) => (
+              <SelectItem key={tid} value={tid}>
+                {tid}
+              </SelectItem>
+            ))}
+            <SelectSeparator />
+            <SelectItem value={CUSTOM}>{t(keys.feature_flags.browse.scope_custom)}</SelectItem>
+          </SelectContent>
+        </Select>
+      </div>
+
+      {custom && (
+        <form
+          className="flex items-end gap-2"
+          onSubmit={(e) => {
+            e.preventDefault();
+            const trimmed = draft.trim();
+            if (trimmed) onSelect(trimmed);
+          }}
+        >
+          <div className="min-w-[200px]">
+            <label className="mb-1 block text-sm font-medium" htmlFor="tenant_id">
+              {t(keys.feature_flags.browse.tenant_id_label)}
+            </label>
+            <Input
+              id="tenant_id"
+              autoFocus
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              placeholder={t(keys.feature_flags.browse.tenant_id_placeholder)}
+            />
+          </div>
+          <Button type="submit" disabled={!draft.trim()}>
+            {t(keys.feature_flags.browse.go)}
+          </Button>
+          <Button type="button" variant="ghost" onClick={() => setCustom(false)}>
+            {t(keys.feature_flags.browse.cancel)}
+          </Button>
+        </form>
+      )}
+    </div>
+  );
+}

simple_module_feature_flags-0.0.32/feature_flags/pages/components/ToggleConfirmDialog.tsx

@@ -0,0 +1,69 @@
+import { keys, useT } from '@simple-module-py/i18n';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@simple-module-py/ui/components/ui/alert-dialog';
+
+export interface PendingToggle {
+  name: string;
+  next: boolean;
+}
+
+interface Props {
+  pending: PendingToggle | null;
+  tenantId: string | null;
+  onConfirm: (pending: PendingToggle) => void;
+  onCancel: () => void;
+}
+
+/**
+ * Confirms a flag flip before it is written.
+ *
+ * A flag toggle takes effect the instant the switch moves, with no undo and no
+ * local record of who moved it — and the same switch means "for this tenant" or
+ * "for everyone" depending on a scope selector further up the page. That scope
+ * is the part worth restating: it is the difference between an experiment and
+ * an outage, and it is the piece you cannot see from the switch itself.
+ */
+export function ToggleConfirmDialog({ pending, tenantId, onConfirm, onCancel }: Props) {
+  const { t } = useT();
+  if (!pending) return null;
+
+  // Spelled out per branch — `t` needs a literal key, not one built at runtime.
+  const title = pending.next
+    ? t(keys.feature_flags.confirm.enable_title, { name: pending.name })
+    : t(keys.feature_flags.confirm.disable_title, { name: pending.name });
+  const scope = tenantId
+    ? t(keys.feature_flags.confirm.scope_tenant, { tenant_id: tenantId })
+    : t(keys.feature_flags.confirm.scope_system);
+
+  return (
+    <AlertDialog open onOpenChange={(open) => !open && onCancel()}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{scope}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>
+            {t(keys.feature_flags.confirm.cancel)}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            variant={pending.next ? 'default' : 'destructive'}
+            onClick={() => onConfirm(pending)}
+          >
+            {pending.next
+              ? t(keys.feature_flags.confirm.enable_action)
+              : t(keys.feature_flags.confirm.disable_action)}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

{simple_module_feature_flags-0.0.30 → simple_module_feature_flags-0.0.32}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "simple_module_feature_flags"
-version = "0.0.30"
+version = "0.0.32"
 description = "Simple feature-flag module with per-tenant overrides and a consumer API for simple_module"
 readme = "README.md"
 license = "MIT"
@@ -21,9 +21,9 @@ classifiers = [
     "Typing :: Typed",
 ]
 dependencies = [
-    "simple_module_core==0.0.30",
-    "simple_module_db==0.0.30",
-    "simple_module_hosting==0.0.30",
+    "simple_module_core==0.0.32",
+    "simple_module_db==0.0.32",
+    "simple_module_hosting==0.0.32",
 ]
 
 [project.entry-points.simple_module]