Add list value type for ABAC user attributes

Support array-of-strings attributes (max 100 elements) for use with
IN clauses in filter expressions. List attributes expand into multiple
comma-separated placeholders in mangle_vars(), with empty lists producing
a NULL sentinel. Includes full-stack changes: proxy validation, template
variable expansion, decision function context, admin UI with tag/chip
input and multi-select checkboxes, AttributeDefinitionForm extraction,
and PolicyForm validation improvements.

Author: jumpbetweenrows

admin-ui/CLAUDE.md

@@ -30,8 +30,9 @@ React 19, Vite 7, Tailwind 4, TanStack Query 5, react-router-dom 7, Vitest 4, @t
 - `src/api/attributeDefinitions.ts` — API client: `listAttributeDefinitions`, `getAttributeDefinition`, `createAttributeDefinition`, `updateAttributeDefinition`, `deleteAttributeDefinition`
 - `src/types/attributeDefinition.ts` — TypeScript interfaces (`AttributeDefinition`, `CreateAttributeDefinitionPayload`, `UpdateAttributeDefinitionPayload`, `ValueType`, `EntityType`)
 - `src/pages/AttributeDefinitionsPage.tsx` — List attribute definitions with entity type filter, force-delete support
-- `src/pages/AttributeDefinitionEditPage.tsx` — Create/edit attribute definitions (exports `AttributeDefinitionCreatePage` and `AttributeDefinitionEditPage`)
-- `src/components/UserAttributeEditor.tsx` — Inline editor for user attributes on UserEditPage. Loads attribute definitions to show type-appropriate inputs (text, number, boolean toggle, enum dropdown). Shows `{user.KEY}` syntax hint per attribute.
+- `src/pages/AttributeDefinitionEditPage.tsx` — Create/edit attribute definitions (exports `AttributeDefinitionCreatePage` and `AttributeDefinitionEditPage`). Uses `AttributeDefinitionForm` component with standard card wrapper + back button layout.
+- `src/components/AttributeDefinitionForm.tsx` — Reusable form for attribute definition create/edit (matches `RoleForm`/`DataSourceForm` pattern). Supports value types: string, integer, boolean, list.
+- `src/components/UserAttributeEditor.tsx` — Inline editor for user attributes on UserEditPage. Loads attribute definitions to show type-appropriate inputs (text, number, boolean toggle, enum dropdown, tag/chip input for lists, multi-select checkboxes for lists with allowed values). Shows `{user.KEY}` syntax hint per attribute.
 - `src/test/test-utils.tsx` — `renderWithProviders` (QueryClient + AuthProvider + MemoryRouter)
 - `src/test/factories.ts` — `makeUser`, `makeDataSource`, `makeDataSourceType`, `makeDiscoveredSchema/Table/Column`, `makeDecisionFunction`, `makePolicy`, `makePolicyAssignment`
 

admin-ui/src/components/AttributeDefinitionForm.tsx

@@ -0,0 +1,228 @@
+import { type FormEvent, useState, useEffect } from 'react'
+import type {
+  ValueType,
+  EntityType,
+  AttributeDefinition,
+} from '../types/attributeDefinition'
+
+export interface AttributeDefinitionFormValues {
+  key: string
+  entity_type: EntityType
+  display_name: string
+  value_type: ValueType
+  default_value: string
+  allowed_values: string[] | undefined
+  description: string
+}
+
+interface Props {
+  mode: 'create' | 'edit'
+  initial?: AttributeDefinition
+  onSubmit: (values: AttributeDefinitionFormValues) => Promise<void>
+  onCancel: () => void
+  submitLabel: string
+  isSubmitting: boolean
+  error?: string | null
+}
+
+const VALUE_TYPES: ValueType[] = ['string', 'integer', 'boolean', 'list']
+const ENTITY_TYPES: EntityType[] = ['user', 'table', 'column']
+
+const inputCls =
+  'w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+
+export function AttributeDefinitionForm({
+  mode,
+  initial,
+  onSubmit,
+  onCancel,
+  submitLabel,
+  isSubmitting,
+  error,
+}: Props) {
+  const [key, setKey] = useState('')
+  const [entityType, setEntityType] = useState<EntityType>('user')
+  const [displayName, setDisplayName] = useState('')
+  const [valueType, setValueType] = useState<ValueType>('string')
+  const [defaultValue, setDefaultValue] = useState('')
+  const [allowedValuesText, setAllowedValuesText] = useState('')
+  const [description, setDescription] = useState('')
+
+  useEffect(() => {
+    if (initial) {
+      setKey(initial.key)
+      setEntityType(initial.entity_type)
+      setDisplayName(initial.display_name)
+      setValueType(initial.value_type)
+      setDefaultValue(initial.default_value ?? '')
+      setAllowedValuesText(initial.allowed_values?.join(', ') ?? '')
+      setDescription(initial.description ?? '')
+    }
+  }, [initial])
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault()
+    const allowedValues = allowedValuesText.trim()
+      ? allowedValuesText
+          .split(',')
+          .map((v) => v.trim())
+          .filter(Boolean)
+      : undefined
+
+    await onSubmit({
+      key,
+      entity_type: entityType,
+      display_name: displayName,
+      value_type: valueType,
+      default_value: defaultValue,
+      allowed_values: allowedValues,
+      description,
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5 max-w-lg">
+      {mode === 'create' && (
+        <>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Key <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+              placeholder="e.g., region, clearance_level"
+              required
+              pattern="[a-zA-Z][a-zA-Z0-9_]*"
+              maxLength={64}
+              className={`${inputCls} font-mono`}
+            />
+            <p className="text-xs text-gray-400 mt-1">
+              Letters, digits, underscores. Used as {'{'}user.key{'}'} in expressions.
+            </p>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Entity type <span className="text-red-500">*</span>
+            </label>
+            <select
+              value={entityType}
+              onChange={(e) => setEntityType(e.target.value as EntityType)}
+              className={inputCls}
+            >
+              {ENTITY_TYPES.map((t) => (
+                <option key={t} value={t}>
+                  {t}
+                </option>
+              ))}
+            </select>
+          </div>
+        </>
+      )}
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Display name <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          value={displayName}
+          onChange={(e) => setDisplayName(e.target.value)}
+          placeholder="e.g., Region, Clearance Level"
+          required
+          className={inputCls}
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Value type <span className="text-red-500">*</span>
+        </label>
+        <select
+          value={valueType}
+          onChange={(e) => setValueType(e.target.value as ValueType)}
+          className={inputCls}
+        >
+          {VALUE_TYPES.map((t) => (
+            <option key={t} value={t}>
+              {t === 'list' ? 'list (multiple strings)' : t}
+            </option>
+          ))}
+        </select>
+        {valueType === 'list' && (
+          <p className="text-xs text-gray-400 mt-1">
+            List attributes store multiple string values. Use with <code className="bg-gray-100 px-1 rounded">IN {'{'}user.key{'}'}</code> in filter expressions.
+          </p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Allowed values
+        </label>
+        <input
+          type="text"
+          value={allowedValuesText}
+          onChange={(e) => setAllowedValuesText(e.target.value)}
+          placeholder="Comma-separated, e.g., us-east, eu-west, ap-south"
+          className={inputCls}
+        />
+        <p className="text-xs text-gray-400 mt-1">
+          {valueType === 'list'
+            ? 'Constrains which strings can appear as elements in the list.'
+            : 'Leave empty to allow any value of the selected type.'}
+        </p>
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Default value
+        </label>
+        <input
+          type="text"
+          value={defaultValue}
+          onChange={(e) => setDefaultValue(e.target.value)}
+          placeholder={valueType === 'list' ? 'JSON array, e.g., ["default"]' : 'Optional'}
+          className={inputCls}
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Description <span className="text-gray-400 font-normal">(optional)</span>
+        </label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Optional description"
+          rows={2}
+          className={inputCls}
+        />
+      </div>
+
+      {error && (
+        <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg px-4 py-3">
+          {error}
+        </div>
+      )}
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-blue-600 hover:bg-blue-700 disabled:opacity-60 text-white font-medium rounded-lg px-5 py-2 text-sm transition-colors"
+        >
+          {isSubmitting ? 'Saving...' : submitLabel}
+        </button>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="text-gray-600 hover:text-gray-900 font-medium text-sm px-3 py-2 transition-colors"
+        >
+          Cancel
+        </button>
+      </div>
+    </form>
+  )
+}

admin-ui/src/components/DecisionFunctionModal.test.tsx

@@ -22,6 +22,10 @@ const mockUpdateDecisionFunction = vi.fn()
 const mockTestDecisionFn = vi.fn()
 const mockGetDecisionFunction = vi.fn()
 
+vi.mock('../api/attributeDefinitions', () => ({
+  listAttributeDefinitions: vi.fn().mockResolvedValue({ data: [], total: 0, page: 1, page_size: 200 }),
+}))
+
 vi.mock('../api/decisionFunctions', () => ({
   createDecisionFunction: (...args: unknown[]) => mockCreateDecisionFunction(...args),
   updateDecisionFunction: (...args: unknown[]) => mockUpdateDecisionFunction(...args),
@@ -338,6 +342,40 @@ describe('DecisionFunctionModal — error handling', () => {
     })
   })
 
+  it('blocks save when config JSON is invalid', async () => {
+    renderModal()
+
+    const editors = screen.getAllByTestId('codemirror')
+    // Set valid code
+    fireEvent.change(editors[0], { target: { value: VALID_FN_TRUE } })
+    // Set invalid config JSON
+    fireEvent.change(editors[1], { target: { value: '{bad json' } })
+
+    await userEvent.click(screen.getByText('Create Function'))
+
+    await waitFor(() => {
+      expect(screen.getByText('Invalid JSON in Configuration')).toBeTruthy()
+    })
+    expect(mockCreateDecisionFunction).not.toHaveBeenCalled()
+  })
+
+  it('allows save when config is empty (defaults to {})', async () => {
+    const created = makeDecisionFunction()
+    mockCreateDecisionFunction.mockResolvedValue(created)
+    const onSaved = vi.fn()
+    renderModal({ onSaved })
+
+    const editors = screen.getAllByTestId('codemirror')
+    fireEvent.change(editors[0], { target: { value: VALID_FN_TRUE } })
+    // Leave config editor empty (default)
+
+    await userEvent.click(screen.getByText('Create Function'))
+
+    await waitFor(() => {
+      expect(mockCreateDecisionFunction).toHaveBeenCalledTimes(1)
+    })
+  })
+
   it('disables Save button while saving', async () => {
     mockCreateDecisionFunction.mockImplementation(() => new Promise(() => {})) // never resolves
     renderModal()