feat: add locked flags with read-only UI, unlock checkbox for non-cloud envs

Author: nicktrn

apps/webapp/app/components/admin/FeatureFlagsDialog.tsx

@@ -10,17 +10,27 @@ import {
 } from "~/components/primitives/Dialog";
 import { Button } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
+import { LockClosedIcon } from "@heroicons/react/20/solid";
+import { CheckboxWithLabel } from "~/components/primitives/Checkbox";
 import { cn } from "~/utils/cn";
-import { FEATURE_FLAG, type FlagControlType } from "~/v3/featureFlags";
-import { UNSET_VALUE, BooleanControl, EnumControl, StringControl } from "./FlagControls";
-
-const HIDDEN_FLAGS = [FEATURE_FLAG.defaultWorkerInstanceGroupId];
+import { FEATURE_FLAG, ORG_LOCKED_FLAGS, type FlagControlType } from "~/v3/featureFlags";
+import {
+  UNSET_VALUE,
+  BooleanControl,
+  EnumControl,
+  StringControl,
+  WorkerGroupControl,
+  type WorkerGroup,
+} from "./FlagControls";
 
 type LoaderData = {
   org: { id: string; title: string; slug: string };
   orgFlags: Record<string, unknown>;
   globalFlags: Record<string, unknown>;
   controlTypes: Record<string, FlagControlType>;
+  workerGroupName?: string;
+  workerGroups?: WorkerGroup[];
+  isManagedCloud?: boolean;
 };
 
 type ActionData = {
@@ -47,6 +57,9 @@ export function FeatureFlagsDialog({
   const [overrides, setOverrides] = useState<Record<string, unknown>>({});
   const [initialOverrides, setInitialOverrides] = useState<Record<string, unknown>>({});
   const [saveError, setSaveError] = useState<string | null>(null);
+  const [unlocked, setUnlocked] = useState(false);
+
+  const isLocked = (key: string) => !unlocked && ORG_LOCKED_FLAGS.includes(key);
 
   useEffect(() => {
     if (open && orgId) {
@@ -104,11 +117,7 @@ export function FeatureFlagsDialog({
   const jsonPreview =
     Object.keys(overrides).length === 0 ? "null" : JSON.stringify(overrides, null, 2);
 
-  const sortedFlagKeys = data
-    ? Object.keys(data.controlTypes)
-        .filter((key) => !HIDDEN_FLAGS.includes(key))
-        .sort()
-    : [];
+  const sortedFlagKeys = data ? Object.keys(data.controlTypes).sort() : [];
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -118,16 +127,57 @@ export function FeatureFlagsDialog({
           Org-level overrides. Unset flags inherit from global defaults.
         </DialogDescription>
 
+        {data && (
+          <div className={data.isManagedCloud ? "cursor-not-allowed" : undefined}>
+            <CheckboxWithLabel
+              variant="simple/small"
+              label={
+                data.isManagedCloud
+                  ? "Unlock read-only flags (only in unmanaged cloud)"
+                  : "Unlock read-only flags"
+              }
+              defaultChecked={unlocked}
+              onChange={setUnlocked}
+              disabled={data.isManagedCloud}
+              className={data.isManagedCloud ? "pointer-events-none" : undefined}
+            />
+          </div>
+        )}
+
         <div className="max-h-[60vh] overflow-y-auto">
           {isLoading ? (
             <div className="py-8 text-center text-sm text-text-dimmed">Loading flags...</div>
           ) : data ? (
             <div className="flex flex-col gap-1.5">
               {sortedFlagKeys.map((key) => {
                 const control = data.controlTypes[key];
-                const isOverridden = key in overrides;
+                const locked = isLocked(key);
                 const globalValue = data.globalFlags[key as keyof typeof data.globalFlags];
-                const globalDisplay = globalValue !== undefined ? String(globalValue) : "unset";
+                const isWorkerGroup = key === FEATURE_FLAG.defaultWorkerInstanceGroupId;
+                const globalDisplay =
+                  isWorkerGroup && data.workerGroupName && globalValue !== undefined
+                    ? `${data.workerGroupName} (${String(globalValue).slice(0, 8)}...)`
+                    : globalValue !== undefined
+                      ? String(globalValue)
+                      : "unset";
+
+                if (locked) {
+                  return (
+                    <div
+                      key={key}
+                      className="flex items-center justify-between rounded-md border border-transparent bg-charcoal-750 px-3 py-2.5"
+                      title="Global-level setting - not editable per org"
+                    >
+                      <div className="min-w-0 flex-1">
+                        <div className="truncate text-sm text-text-dimmed">{key}</div>
+                        <div className="text-xs text-charcoal-400">global: {globalDisplay}</div>
+                      </div>
+                      <LockClosedIcon className="size-4 text-charcoal-500" />
+                    </div>
+                  );
+                }
+
+                const isOverridden = key in overrides;
 
                 return (
                   <div
@@ -160,15 +210,26 @@ export function FeatureFlagsDialog({
                         unset
                       </Button>
 
-                      {control.type === "boolean" && (
+                      {isWorkerGroup && data.workerGroups ? (
+                        <WorkerGroupControl
+                          value={isOverridden ? (overrides[key] as string) : undefined}
+                          workerGroups={data.workerGroups as WorkerGroup[]}
+                          onChange={(val) => {
+                            if (val === UNSET_VALUE) {
+                              unsetFlag(key);
+                            } else {
+                              setFlagValue(key, val);
+                            }
+                          }}
+                          dimmed={!isOverridden}
+                        />
+                      ) : control.type === "boolean" ? (
                         <BooleanControl
                           value={isOverridden ? (overrides[key] as boolean) : undefined}
                           onChange={(val) => setFlagValue(key, val)}
                           dimmed={!isOverridden}
                         />
-                      )}
-
-                      {control.type === "enum" && (
+                      ) : control.type === "enum" ? (
                         <EnumControl
                           value={isOverridden ? (overrides[key] as string) : undefined}
                           options={control.options}
@@ -181,9 +242,7 @@ export function FeatureFlagsDialog({
                           }}
                           dimmed={!isOverridden}
                         />
-                      )}
-
-                      {control.type === "string" && (
+                      ) : control.type === "string" ? (
                         <StringControl
                           value={isOverridden ? (overrides[key] as string) : ""}
                           onChange={(val) => {
@@ -195,7 +254,7 @@ export function FeatureFlagsDialog({
                           }}
                           dimmed={!isOverridden}
                         />
-                      )}
+                      ) : null}
                     </div>
                   </div>
                 );

apps/webapp/app/components/admin/FlagControls.tsx

@@ -57,6 +57,48 @@ export function EnumControl({
   );
 }
 
+export type WorkerGroup = { id: string; name: string };
+
+export function WorkerGroupControl({
+  value,
+  workerGroups,
+  onChange,
+  dimmed,
+}: {
+  value: string | undefined;
+  workerGroups: WorkerGroup[];
+  onChange: (val: string) => void;
+  dimmed: boolean;
+}) {
+  const items = [UNSET_VALUE, ...workerGroups.map((wg) => wg.id)];
+
+  return (
+    <Select
+      variant="tertiary/small"
+      value={value ?? UNSET_VALUE}
+      setValue={onChange}
+      items={items}
+      text={(val) => {
+        if (val === UNSET_VALUE) return "unset";
+        const wg = workerGroups.find((w) => w.id === val);
+        return wg ? wg.name : val;
+      }}
+      className={cn(dimmed && "opacity-50")}
+    >
+      {(items) =>
+        items.map((item) => {
+          const wg = workerGroups.find((w) => w.id === item);
+          return (
+            <SelectItem key={item} value={item}>
+              {item === UNSET_VALUE ? "unset" : wg ? wg.name : item}
+            </SelectItem>
+          );
+        })
+      }
+    </Select>
+  );
+}
+
 export function StringControl({
   value,
   onChange,

apps/webapp/app/routes/admin.api.v2.orgs.$organizationId.feature-flags.ts

@@ -5,7 +5,8 @@ import { z } from "zod";
 import { prisma } from "~/db.server";
 import { requireUser } from "~/services/session.server";
 import { flags as getGlobalFlags } from "~/v3/featureFlags.server";
-import { validatePartialFeatureFlags, getAllFlagControlTypes } from "~/v3/featureFlags";
+import { FEATURE_FLAG, validatePartialFeatureFlags, getAllFlagControlTypes } from "~/v3/featureFlags";
+import { featuresForRequest } from "~/features.server";
 
 // Session-auth route for the admin feature flags dialog.
 // Uses replace semantics: the action writes the full flag set (or null to clear).
@@ -24,7 +25,7 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
 
   const { organizationId } = ParamsSchema.parse(params);
 
-  const [organization, globalFlags] = await Promise.all([
+  const [organization, globalFlags, workerGroups] = await Promise.all([
     prisma.organization.findFirst({
       where: { id: organizationId },
       select: {
@@ -35,6 +36,10 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
       },
     }),
     getGlobalFlags(),
+    prisma.workerInstanceGroup.findMany({
+      select: { id: true, name: true },
+      orderBy: { name: "asc" },
+    }),
   ]);
 
   if (!organization) {
@@ -48,6 +53,21 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
   const orgFlags = orgFlagsResult.success ? orgFlagsResult.data : {};
   const controlTypes = getAllFlagControlTypes();
 
+  // Resolve worker group name for display
+  const workerGroupId = (globalFlags as Record<string, unknown>)?.[
+    FEATURE_FLAG.defaultWorkerInstanceGroupId
+  ];
+  let workerGroupName: string | undefined;
+  if (typeof workerGroupId === "string") {
+    const wg = await prisma.workerInstanceGroup.findFirst({
+      where: { id: workerGroupId },
+      select: { name: true },
+    });
+    workerGroupName = wg?.name;
+  }
+
+  const { isManagedCloud } = featuresForRequest(request);
+
   return json({
     org: {
       id: organization.id,
@@ -57,6 +77,9 @@ export async function loader({ request, params }: LoaderFunctionArgs) {
     orgFlags,
     globalFlags,
     controlTypes,
+    workerGroupName,
+    workerGroups,
+    isManagedCloud,
   });
 }