`
+
+### Implementing Feature Flags (When Requested)
+
+Only use feature flags when explicitly requested by the user.
+
+- [ ] Create flag in Flagsmith (use `/feature-flag` command or MCP tools)
+- [ ] In render method or component, call `Utils.getFlagsmithHasFeature('flag_name')`
+- [ ] Store result in a variable (e.g., `const isEnabled = Utils.getFlagsmithHasFeature('flag_name')`)
+- [ ] Use conditional rendering: `{isEnabled &&
}`
+- [ ] Provide fallback when flag is disabled
+- [ ] Enable flag manually via Flagsmith UI at https://app.flagsmith.com
+
+## File Locations
+
+| Purpose | Location | Example |
+|---------|----------|---------|
+| API Services | `common/services/use*.ts` | `useEnvironment.ts`, `useFeature.ts` |
+| Request Types | `common/types/requests.ts` | API request interfaces |
+| Response Types | `common/types/responses.ts` | API response interfaces |
+| Table Components | `components/project/tables/` | User tables, data grids |
+| **Page Components** | **`web/components/pages/`** | **`FeaturesPage.js`, `ProjectSettingsPage.js`** |
+| Card Components | `components/project/cards/` | Summary cards, info cards |
+| Base UI Components | `components/base/` | Buttons, forms, inputs |
+| Feature Flags Context | `.claude/context/feature-flags/` | Flagsmith integration guide |
+| Backend API | `../api/` | Flagsmith backend API |
+
+## Common Components for Messages
+
+| Component | Location | Usage |
+|-----------|----------|-------|
+| InfoMessage | `components/InfoMessage` | Info alerts/messages |
+| ErrorMessage | `components/base/Messages` | Error states |
+| SuccessMessage | `components/base/Messages` | Success notifications |
+| Loader | `components/base/Loader` | Loading states |
+| Tooltip | `components/Tooltip` | Hover tooltips |
+| Button | `components/base/forms/Button` | Standard buttons |
+
+## Common Imports
+
+### RTK Query
+```typescript
+import { service } from 'common/service'
+import { Req } from 'common/types/requests'
+import { Res } from 'common/types/responses'
+```
+
+### UI Components
+```typescript
+import { Tabs } from 'components/base/forms/Tabs'
+import Loader from 'components/base/Loader'
+import { ErrorMessage } from 'components/base/Messages'
+```
+
+### Hooks
+```typescript
+import { useDefaultSubscription } from 'common/services/useDefaultSubscription'
+import { useState } from 'react'
+```
+
+### Utils
+```typescript
+import { Format } from 'common/utils/format'
+import dayjs from 'dayjs'
+```
+
+## Backend API Structure
+
+```
+../api/apps/
+├── projects/ # Projects and features
+├── environments/ # Environment management
+├── features/ # Feature flags
+├── segments/ # User segments
+├── users/ # User management
+├── organisations/ # Organization management
+├── permissions/ # Access control
+└── audit/ # Audit logs
+```
+
+## Common Backend Endpoints
+
+See `/backend` slash command to search the backend codebase for specific endpoints.
+
+## RTK Query Patterns
+
+> For comprehensive RTK Query patterns, examples, and service structure, see [api-integration.md](api-integration.md).
+
+**Quick reference:**
+- `builder.query` for GET requests with `providesTags`
+- `builder.mutation` for POST/PUT/DELETE with `invalidatesTags`
+- Use `{ skip: !id }` to conditionally skip queries
+
+## Component Patterns
+
+### Loading State
+```typescript
+if (isLoading) {
+ return (
+
+
+
+ )
+}
+```
+
+### Error State
+```typescript
+if (error) return
{error}
+```
+
+### Feature Flag Check
+```typescript
+const isFeatureEnabled = Utils.getFlagsmithHasFeature('flag_name')
+if (isFeatureEnabled) {
+ // Show new feature
+}
+```
+
+## Slash Commands
+
+| Command | Purpose |
+|---------|---------|
+| `/api` | Generate new API service |
+| `/backend
` | Search backend codebase |
+| `/feature-flag` | Create feature flag |
+| `/form` | Generate form with Yup + Formik |
+| `/check` | Run type checking and linting |
+| `/context` | Load specific context files |
+
+## Common Utilities
+
+### Date Formatting
+```typescript
+import dayjs from 'dayjs'
+dayjs(timestamp).format('DD MMM YY')
+```
+
+### Money Formatting
+```typescript
+import { Format } from 'common/utils/format'
+Format.money(amountInCents) // e.g., "$12.34"
+Format.camelCase('pending_payment') // e.g., "Pending Payment"
+```
+
+### Subscription Info
+```typescript
+const { defaultSubscriptionId, subscriptionDetail, hasPermission } =
+ useDefaultSubscription()
+
+const canManageBilling = hasPermission('MANAGE_BILLING')
+const companyId = subscriptionDetail?.company_id
+```
+
+## Bootstrap Classes Reference
+
+### Responsive Display
+- `d-none d-md-block` - Hide on mobile, show on desktop
+- `d-block d-md-none` - Show on mobile, hide on desktop
+- `d-none d-md-table-cell` - For table cells
+
+### Spacing
+- `mt-4` - Margin top
+- `mb-4` - Margin bottom
+- `pb-4` - Padding bottom
+- `mb-24` - Large margin bottom
+
+### Layout
+- `container-fluid` - Full-width container
+- `row` - Bootstrap row
+- `col-lg-6 col-md-12` - Responsive columns
+
+### Flexbox
+- `d-flex` - Display flex
+- `justify-content-center` - Center horizontally
+- `align-items-center` - Center vertically
+
+## Linting
+
+Always run linter after changes:
+```bash
+npx eslint --fix common/types/requests.ts
+npx eslint --fix common/services/useInvoice.ts
+npx eslint --fix components/project/tables/MyTable.tsx
+npx eslint --fix pages/my-page.tsx
+```
+
+Or use the check command:
+```bash
+/check
+```
+
+## Git Workflow
+
+Check backend branches:
+```bash
+cd ../api
+git fetch
+git log --oneline origin/feat/branch-name -n 10
+git show COMMIT_HASH:path/to/file.py
+```
+
+## Debugging Tips
+
+### Check if query is running
+```typescript
+const { data, error, isLoading, isFetching } = useGetEntityQuery(...)
+console.log({ data, error, isLoading, isFetching })
+```
+
+### Check feature flag value
+```typescript
+const isEnabled = Utils.getFlagsmithHasFeature('my_flag')
+console.log('Flag enabled:', isEnabled)
+```
+
+### Inspect Redux state
+```typescript
+import { getStore } from 'common/store'
+console.log(getStore().getState())
+```
+
+### Force refetch
+```typescript
+const { refetch } = useGetEntityQuery(...)
+refetch()
+```
diff --git a/frontend/.claude/context/ui-patterns.md b/frontend/.claude/context/ui-patterns.md
new file mode 100644
index 000000000000..13b8d70c575a
--- /dev/null
+++ b/frontend/.claude/context/ui-patterns.md
@@ -0,0 +1,171 @@
+# UI Patterns & Best Practices
+
+## Table Components
+
+### Pattern: Reusable Table Components
+
+**Location:** `components/project/tables/`
+
+Tables should be self-contained components that fetch their own data and handle loading/error states.
+
+**Example:** `InvoiceTable.tsx`
+
+```typescript
+import { useGetInvoicesQuery } from 'common/services/useInvoice'
+import { useDefaultSubscription } from 'common/services/useDefaultSubscription'
+import Loader from 'components/base/Loader'
+import { ErrorMessage } from 'components/base/Messages'
+import ContentContainer from './ContentContainer'
+
+const InvoiceTable: FC = () => {
+ const { defaultSubscriptionId } = useDefaultSubscription()
+ const { data: invoices, error, isLoading } = useGetInvoicesQuery({
+ subscription_id: `${defaultSubscriptionId}`,
+ })
+
+ if (isLoading) {
+ return (
+
+
+
+ )
+ }
+
+ if (error) return {error}
+
+ return (
+
+
+
+
+ | Invoice No. |
+ Description |
+ Total |
+
+
+
+ {invoices?.map((invoice) => (
+
+ | {invoice.id} |
+ {invoice.description} |
+ {invoice.total} |
+
+ ))}
+
+
+
+ )
+}
+```
+
+### Responsive Tables
+
+Use Bootstrap classes for responsive behavior:
+- `d-none d-md-table-cell` - Hide column on mobile
+- `d-block d-md-none` - Show on mobile only
+
+## Tabs Component
+
+**Location:** `components/base/forms/Tabs.tsx`
+
+### Basic Usage
+
+```typescript
+import { useState } from 'react'
+import { Tabs } from 'components/base/forms/Tabs'
+
+const MyPage = () => {
+ const [activeTab, setActiveTab] = useState(0)
+
+ return (
+
+ Tab 1 content
+ Tab 2 content
+ Tab 3 content
+
+ )
+}
+```
+
+### Tabs with Feature Flag (Optional)
+
+**Note:** Only use feature flags when explicitly requested. By default, implement features directly without flags.
+
+When specifically requested, this pattern shows tabs only when feature flag is enabled:
+
+```typescript
+import { useFlags } from 'flagsmith/react'
+import { Tabs } from 'components/base/forms/Tabs'
+import Utils from 'common/utils/utils'
+const MyPage = () => {
+ const my_feature_flag = Utils.getFlagsmithHasFeature('my_feature_flag')
+ const [activeTab, setActiveTab] = useState(0)
+
+ return (
+
+
My Section
+ {my_feature_flag? (
+
+
+
+
+ ) : (
+
+ )}
+
Tab 1 content
+ Tab 2 content
+
+```
+
+## Confirmation Dialogs
+
+**NEVER use `window.confirm`** - Always use the `openConfirm` function from `components/base/Modal`.
+
+### Correct Usage
+
+```typescript
+import { openConfirm } from 'components/base/Modal'
+
+// Signature: openConfirm(title, body, onYes, onNo?, challenge?)
+openConfirm({
+ body: 'Closing this will discard your unsaved changes.',
+ noText: 'Cancel',
+ onNo: () => resolve(false),
+ onYes: () => resolve(true),
+ title: 'Discard changes',
+ yesText: 'Ok',
+})
+```
+
+### Parameters
+- `title: string` - Dialog title
+- `body: ReactNode` - Dialog content (can be JSX)
+- `onYes: (closeModal: () => void) => void` - Callback when user confirms
+- `onNo?: () => void` - Optional callback when user cancels
+- `challenge?: string` - Optional challenge text user must type to confirm
+
+### Key Points
+- The `onYes` callback receives a `closeModal` function
+- Always call `closeModal()` when the action completes successfully
+- Can be async - use `async (closeModal) => { ... }`
diff --git a/frontend/.claude/scripts/sync-types-helper.py b/frontend/.claude/scripts/sync-types-helper.py
new file mode 100755
index 000000000000..c9e6794fb35d
--- /dev/null
+++ b/frontend/.claude/scripts/sync-types-helper.py
@@ -0,0 +1,231 @@
+#!/usr/bin/env python3
+"""
+Helper script for API type syncing operations.
+Minimizes token usage by batching cache operations.
+"""
+
+import json
+import sys
+from pathlib import Path
+from typing import Dict, List
+
+CACHE_FILE = Path(__file__).parent.parent / "api-type-map.json"
+
+
+def load_cache() -> Dict:
+ """Load the type cache from JSON file."""
+ if not CACHE_FILE.exists():
+ return {"_metadata": {}, "response_types": {}, "request_types": {}}
+ with open(CACHE_FILE, "r") as f:
+ cache = json.load(f)
+ # Migrate old format to new format if needed
+ if "types" in cache and "response_types" not in cache:
+ cache["response_types"] = cache.pop("types")
+ cache["request_types"] = {}
+ return cache
+
+
+def save_cache(cache: Dict) -> None:
+ """Save the type cache to JSON file."""
+ with open(CACHE_FILE, "w") as f:
+ json.dump(cache, f, indent=2)
+ f.write("\n")
+
+
+def get_changed_serializers(
+ old_commit: str, new_commit: str, api_path: str
+) -> List[str]:
+ """Get list of serializer files changed between commits."""
+ import subprocess
+
+ result = subprocess.run(
+ ["git", "diff", f"{old_commit}..{new_commit}", "--name-only"],
+ cwd=api_path,
+ capture_output=True,
+ text=True,
+ )
+
+ if result.returncode != 0:
+ return []
+
+ files = result.stdout.strip().split("\n")
+ return [f for f in files if "serializers.py" in f]
+
+
+def find_types_using_serializer(
+ cache: Dict, serializer_path: str, serializer_name: str
+) -> List[str]:
+ """Find all type keys that use a specific serializer."""
+ search_string = f"{serializer_path}:{serializer_name}"
+ types = []
+
+ for key, value in cache.items():
+ if key == "_metadata":
+ continue
+ if value.get("serializer", "").startswith(search_string.split(":")[0]):
+ if serializer_name in value.get("serializer", ""):
+ types.append(key)
+
+ return types
+
+
+def update_metadata(stats: Dict) -> None:
+ """Update cache metadata with sync statistics."""
+ cache = load_cache()
+
+ if "_metadata" not in cache:
+ cache["_metadata"] = {}
+
+ cache["_metadata"].update(stats)
+ save_cache(cache)
+
+
+def get_types_needing_sync(
+ serializer_files: List[str], api_path: str, type_category: str = "response"
+) -> List[Dict]:
+ """
+ Get list of types that need syncing based on changed serializer files.
+
+ Args:
+ serializer_files: List of changed serializer file paths
+ api_path: Path to backend API repository
+ type_category: Either "response" or "request"
+
+ Returns:
+ List of dicts with type info: {key, serializer_file, serializer_class, type_name}
+ """
+ cache = load_cache()
+ types_to_check = []
+
+ # Select the appropriate cache section
+ cache_key = f"{type_category}_types"
+ type_cache = cache.get(cache_key, {})
+
+ for file_path in serializer_files:
+ # Extract serializer classes from the file path in cache
+ for type_key, type_data in type_cache.items():
+ if type_key == "_metadata":
+ continue
+
+ serializer = type_data.get("serializer", "")
+ if file_path in serializer and ":" in serializer:
+ serializer_class = serializer.split(":")[-1].strip()
+ types_to_check.append(
+ {
+ "key": type_key,
+ "serializer_file": file_path,
+ "serializer_class": serializer_class,
+ "type_name": type_data.get("type", ""),
+ }
+ )
+
+ return types_to_check
+
+
+def filter_syncable_types(cache: Dict, type_category: str = "response") -> List[Dict]:
+ """
+ Filter cache to only include types with Django serializers (exclude custom/ChargeBee/empty).
+
+ Args:
+ cache: Full cache dict
+ type_category: Either "response" or "request"
+
+ Returns:
+ List of type info dicts
+ """
+ syncable = []
+ cache_key = f"{type_category}_types"
+ type_cache = cache.get(cache_key, {})
+
+ for type_key, type_data in type_cache.items():
+ if type_key == "_metadata":
+ continue
+
+ serializer = type_data.get("serializer", "")
+ note = type_data.get("note", "")
+
+ # Skip custom responses, ChargeBee, NOT_IMPLEMENTED, and view methods
+ if any(x in note.lower() for x in ["custom", "chargebee", "empty"]):
+ continue
+ if "NOT_IMPLEMENTED" in serializer:
+ continue
+ if "views.py:" in serializer and "(" in serializer:
+ continue
+
+ # Only include Django serializers
+ if "serializers.py:" in serializer and ":" in serializer:
+ parts = serializer.split(":")
+ if len(parts) == 2:
+ syncable.append(
+ {
+ "key": type_key,
+ "serializer_file": parts[0],
+ "serializer_class": parts[1].strip(),
+ "type_name": type_data.get("type", ""),
+ }
+ )
+
+ return syncable
+
+
+def get_last_commit() -> str:
+ """Get the last backend commit hash from cache metadata."""
+ cache = load_cache()
+ return cache.get("_metadata", {}).get("lastBackendCommit", "")
+
+
+if __name__ == "__main__":
+ # Command-line interface
+ command = sys.argv[1] if len(sys.argv) > 1 else "help"
+
+ if command == "changed-serializers":
+ # Usage: python sync-types-helper.py changed-serializers OLD_COMMIT NEW_COMMIT API_PATH
+ old_commit = sys.argv[2]
+ new_commit = sys.argv[3]
+ api_path = sys.argv[4]
+ changed = get_changed_serializers(old_commit, new_commit, api_path)
+ print("\n".join(changed))
+
+ elif command == "types-to-sync":
+ # Usage: python sync-types-helper.py types-to-sync [response|request] FILE1 FILE2 ... API_PATH
+ type_category = sys.argv[2] if len(sys.argv) > 2 else "response"
+ files = sys.argv[3:]
+ api_path = sys.argv[-1] if files else ""
+ types = get_types_needing_sync(files[:-1], api_path, type_category)
+ print(json.dumps(types, indent=2))
+
+ elif command == "update-metadata":
+ # Usage: echo '{"lastSync": "..."}' | python sync-types-helper.py update-metadata
+ stats = json.load(sys.stdin)
+ update_metadata(stats)
+ print("Metadata updated")
+
+ elif command == "syncable-types":
+ # Usage: python sync-types-helper.py syncable-types [response|request]
+ type_category = sys.argv[2] if len(sys.argv) > 2 else "response"
+ cache = load_cache()
+ types = filter_syncable_types(cache, type_category)
+ print(json.dumps(types, indent=2))
+
+ elif command == "get-last-commit":
+ # Usage: python sync-types-helper.py get-last-commit
+ commit = get_last_commit()
+ print(commit)
+
+ else:
+ print("Usage:")
+ print(
+ " changed-serializers OLD NEW PATH - Get changed serializer files"
+ )
+ print(
+ " types-to-sync [response|request] FILE... PATH - Get types needing sync"
+ )
+ print(
+ " update-metadata - Update metadata (JSON via stdin)"
+ )
+ print(
+ " syncable-types [response|request] - Get all syncable type info"
+ )
+ print(
+ " get-last-commit - Get last backend commit from cache"
+ )
diff --git a/frontend/.claude/settings.json b/frontend/.claude/settings.json
new file mode 100644
index 000000000000..9367039aa0cc
--- /dev/null
+++ b/frontend/.claude/settings.json
@@ -0,0 +1,71 @@
+{
+ "autoApprovalSettings": {
+ "enabled": true,
+ "rules": [
+ {
+ "tool": "Read",
+ "pattern": "**/*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run typecheck:*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run typecheck:staged"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "node:*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run lint:fix:*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run build:*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run lint*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run check:staged"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npm run test*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "git diff*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "git log*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "git status*"
+ },
+ {
+ "tool": "Bash",
+ "pattern": "npx ssg*"
+ },
+ {
+ "tool": "WebSearch",
+ "pattern": "*"
+ },
+ {
+ "tool": "Glob",
+ "pattern": "*"
+ },
+ {
+ "tool": "Grep",
+ "pattern": "*"
+ }
+ ]
+ }
+}
diff --git a/frontend/.env-example b/frontend/.env-example
new file mode 100644
index 000000000000..3c0d775e8bd0
--- /dev/null
+++ b/frontend/.env-example
@@ -0,0 +1,5 @@
+E2E_TEST_TOKEN_DEV=
+E2E_TEST_TOKEN_LOCAL=
+E2E_TEST_TOKEN_PROD=
+E2E_TEST_TOKEN_STAGING=
+MCP_RELEASE_MANAGER_ADMIN_API_API_KEY_AUTH=
diff --git a/frontend/AGENTS.md b/frontend/AGENTS.md
new file mode 100644
index 000000000000..a43d3624f4e8
--- /dev/null
+++ b/frontend/AGENTS.md
@@ -0,0 +1 @@
+Read @CLAUDE.md
diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
new file mode 100644
index 000000000000..49d43e6ea0d7
--- /dev/null
+++ b/frontend/CLAUDE.md
@@ -0,0 +1,39 @@
+# CLAUDE.md
+
+## Commands
+- `npm run dev` - Start dev server
+- `npm run typecheck` - Type checking
+
+## Structure
+- `/common` - Shared Redux/API (no web/mobile code)
+- `/web/components` - React components (includes `/web/components/pages/` for all page components)
+- `/web/components/pages/` - **All page components** (e.g., `FeaturesPage.js`, `ProjectSettingsPage.js`)
+- `/common/types/` - `requests.ts` and `responses.ts` for API types
+- Ignore: `ios/`, `android/`, `.net/`, `*.md.draft`
+
+## Rules
+1. **API Integration**: Use `npx ssg` CLI + check `../api` backend
+2. **Imports**: Use `common/`, `components/`, `project/` (NO relative imports)
+3. **State**: Redux Toolkit + RTK Query, store in `common/store.ts`
+4. **Feature Flags**: When user says "create a feature flag", you MUST: (1) Create it in Flagsmith using MCP tools (`mcp__flagsmith__create_feature`), (2) Implement code with `useFlags` hook. See `.claude/context/feature-flags/` for details
+5. **Linting**: ALWAYS run `npx eslint --fix ` on any files you modify
+6. **Type Enums**: Extract inline union types to named types (e.g., `type Status = 'A' | 'B'` instead of inline)
+7. **NO FETCH**: NEVER use `fetch()` directly - ALWAYS use RTK Query mutations/queries (inject endpoints into services in `common/services/`), see api-integration context
+
+## Key Files
+- Store: `common/store.ts`
+- Base service: `common/service.ts`
+
+## Context Files
+
+The `.claude/context/` directory contains **required patterns and standards** for this codebase. These are not optional suggestions - they document how things must be done in this project.
+
+For detailed guidance on specific topics:
+- **Quick Start**: `.claude/context/quick-reference.md` - Common tasks, commands, patterns
+- **API Integration**: `.claude/context/api-integration.md` - Adding endpoints, RTK Query (required reading for API work)
+- **Backend**: `.claude/context/backend-integration.md` - Finding endpoints, backend structure
+- **UI Patterns**: `.claude/context/ui-patterns.md` - Tables, tabs, modals, confirmations (required reading for UI work)
+- **Feature Flags**: `.claude/context/feature-flags/` - Using Flagsmith flags (optional, only when requested)
+- **Code Patterns**: `.claude/context/patterns/` - Complete examples, best practices
+
+**Tip:** Start with `quick-reference.md` for common tasks and checklists.
diff --git a/frontend/README.md b/frontend/README.md
index 8d23cbd8c842..69e9c308d3a6 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -1,3 +1,73 @@
## Flagsmith Frontend
-TODO
+### Docker-based development
+
+To bring up the API and database via Docker Compose:
+
+```bash
+curl -o docker-compose.yml https://raw.githubusercontent.com/Flagsmith/flagsmith/main/docker-compose.yml
+docker-compose -f docker-compose.yml up
+```
+
+The application will bootstrap an admin user, organisation, and project for you. You'll find a link to set your password in your Compose logs:
+
+```txt
+Superuser "admin@example.com" created successfully.
+Please go to the following page and choose a password: http://localhost:8000/password-reset/confirm/.../...
+```
+
+### Local development
+
+The project assumes the following tools installed:
+- [Node.js](https://nodejs.org/) version 22.x
+- [npm](https://www.npmjs.com/) version 10.x
+
+To install dependencies, run `npm install`.
+
+The API must be running on localhost:8000 (either via Docker or `make serve` in `../api`).
+
+To bring up a dev server, run `ENV=local npm run dev`.
+
+To run linters, run `npm run lint` (or `npm run lint:fix` to auto-fix).
+
+To run type checking, run `npm run typecheck`.
+
+### Environment configuration
+
+Environment configuration is defined in `project_*.js` files (`common/project.js` for defaults, `env/project_*.js` for staging/prod/selfhosted), selected at build time based on the target environment. All configs support runtime overrides via `globalThis.projectOverrides`, allowing deployment-time customisation without rebuilding.
+
+The `bin/env.js` script copies the appropriate `env/project_${ENV}.js` to `common/project.js`:
+- `npm run dev` → copies `project_dev.js` (staging API)
+- `ENV=local npm run dev` → copies `project_local.js` (localhost)
+- `ENV=prod npm run bundle` → copies `project_prod.js` (production)
+
+For a full list of frontend environment variables, see the [Flagsmith documentation](https://docs.flagsmith.com/deployment/hosting/locally-frontend#environment-variables).
+
+### Code guidelines
+
+#### Testing
+
+This codebase uses TestCafe for end-to-end testing. Tests are located in the `e2e/` directory.
+
+To run E2E tests (requires the API running on localhost:8000), run `npm run test`.
+
+#### Typing
+
+This codebase uses TypeScript. Run `npm run typecheck` to check for type errors.
+
+We encourage adding types to new code and improving types in existing code when working nearby.
+
+#### Design and architecture
+
+The frontend is organised into:
+- `common/` - Shared code (Redux store, RTK Query services, types, utilities)
+- `web/components/` - React components
+- `web/components/pages/` - Page-level components
+
+State management uses Redux Toolkit with RTK Query for API calls. Services are defined in `common/services/`.
+
+API types are centralised in:
+- `common/types/requests.ts` - Request types
+- `common/types/responses.ts` - Response types
+
+For AI-assisted development, see [CLAUDE.md](https://github.com/Flagsmith/flagsmith/blob/main/frontend/CLAUDE.md).
diff --git a/frontend/common/types/requests.ts b/frontend/common/types/requests.ts
index c0371f35abd7..2dc4770e8c91 100644
--- a/frontend/common/types/requests.ts
+++ b/frontend/common/types/requests.ts
@@ -190,9 +190,9 @@ export type Req = {
projectId?: number
environmentId?: string
billing_period?:
- | 'current_billing_period'
- | 'previous_billing_period'
- | '90_day_period'
+ | 'current_billing_period'
+ | 'previous_billing_period'
+ | '90_day_period'
}
getWebhooks: {
environmentId: string
diff --git a/frontend/common/types/responses.ts b/frontend/common/types/responses.ts
index de5a656f4504..7f3f5236c767 100644
--- a/frontend/common/types/responses.ts
+++ b/frontend/common/types/responses.ts
@@ -348,13 +348,13 @@ export type AuditLogItem = {
related_object_uuid?: number
related_feature_id?: number
related_object_type:
- | 'FEATURE'
- | 'FEATURE_STATE'
- | 'ENVIRONMENT'
- | 'CHANGE_REQUEST'
- | 'SEGMENT'
- | 'EF_VERSION'
- | 'EDGE_IDENTITY'
+ | 'FEATURE'
+ | 'FEATURE_STATE'
+ | 'ENVIRONMENT'
+ | 'CHANGE_REQUEST'
+ | 'SEGMENT'
+ | 'EF_VERSION'
+ | 'EDGE_IDENTITY'
is_system_event: boolean
}
diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
index 64ea7f53fdfb..d681d59e13a3 100644
--- a/frontend/web/components/SegmentOverrides.js
+++ b/frontend/web/components/SegmentOverrides.js
@@ -454,7 +454,9 @@ class TheComponent extends Component {
const { highlightSegmentId, projectId, value } = this.props
if (!highlightSegmentId) return
- const existingOverride = value?.find((v) => v.segment === highlightSegmentId)
+ const existingOverride = value?.find(
+ (v) => v.segment === highlightSegmentId,
+ )
if (existingOverride) {
return
}
@@ -613,7 +615,7 @@ class TheComponent extends Component {
= ({
segmentId={`${segment.id}`}
/>
)}
- {isEdit && !condensed ? (
+ {isEdit && !condensed && (
= ({
)}
- ) : metadataEnable && segmentContentType?.id ? (
+ )}
+ {!(isEdit && !condensed) && metadataEnable && segmentContentType?.id && (
setTab(tab)}>
= ({
{MetadataTab}
- ) : (
-
-
-
)}
+ {!(isEdit && !condensed) &&
+ !(metadataEnable && segmentContentType?.id) && (
+
+
+
+ )}
)
}
diff --git a/frontend/web/components/modals/FlagValueFooter.tsx b/frontend/web/components/modals/FlagValueFooter.tsx
index 71d16c1e990a..77b6323a12e0 100644
--- a/frontend/web/components/modals/FlagValueFooter.tsx
+++ b/frontend/web/components/modals/FlagValueFooter.tsx
@@ -138,13 +138,16 @@ const FlagValueFooter = ({
!savePermission
}
>
- {isSaving
- ? existingChangeRequest
- ? 'Updating Change Request'
- : 'Scheduling Update'
- : existingChangeRequest
- ? 'Update Change Request'
- : 'Schedule Update'}
+ {(() => {
+ if (isSaving) {
+ return existingChangeRequest
+ ? 'Updating Change Request'
+ : 'Scheduling Update'
+ }
+ return existingChangeRequest
+ ? 'Update Change Request'
+ : 'Schedule Update'
+ })()}
)}
- {isSaving
- ? is4Eyes
- ? existingChangeRequest
- ? 'Updating Change Request'
- : 'Creating Change Request'
- : 'Updating'
- : is4Eyes
- ? existingChangeRequest
- ? 'Update Change Request'
- : 'Create Change Request'
- : 'Update Feature Value'}
+ {(() => {
+ if (isSaving) {
+ if (is4Eyes) {
+ return existingChangeRequest
+ ? 'Updating Change Request'
+ : 'Creating Change Request'
+ }
+ return 'Updating'
+ }
+ if (is4Eyes) {
+ return existingChangeRequest
+ ? 'Update Change Request'
+ : 'Create Change Request'
+ }
+ return 'Update Feature Value'
+ })()}
,
)
diff --git a/frontend/web/components/mv/VariationOptions.tsx b/frontend/web/components/mv/VariationOptions.tsx
index f36ce21088b5..1a962c194c18 100644
--- a/frontend/web/components/mv/VariationOptions.tsx
+++ b/frontend/web/components/mv/VariationOptions.tsx
@@ -99,19 +99,26 @@ export const VariationOptions: React.FC = ({
)}
{multivariateOptions.map((theValue, i) => {
- const override = select
- ? variationOverrides &&
- variationOverrides[0] &&
+ let override: (typeof variationOverrides)[number] | false | undefined
+ if (select) {
+ const hasIndex =
+ variationOverrides?.[0] &&
typeof variationOverrides[0].multivariate_feature_option_index ===
'number'
- ? i === variationOverrides[0].multivariate_feature_option_index &&
+ if (hasIndex) {
+ override =
+ i === variationOverrides[0].multivariate_feature_option_index &&
variationOverrides[0]
- : variationOverrides &&
- variationOverrides.find(
- (v) => v.multivariate_feature_option === theValue.id,
- )
- : variationOverrides &&
- variationOverrides.find((v) => v.percentage_allocation === 100)
+ } else {
+ override = variationOverrides?.find(
+ (v) => v.multivariate_feature_option === theValue.id,
+ )
+ }
+ } else {
+ override = variationOverrides?.find(
+ (v) => v.percentage_allocation === 100,
+ )
+ }
return select ? (
@@ -150,7 +157,7 @@ export const VariationOptions: React.FC = ({
key={i}
index={i}
canCreateFeature={canCreateFeature}
- readOnly={readOnly}
+ readOnly={readOnly ?? false}
value={theValue}
onChange={(e) => {
updateVariation(i, e, variationOverrides)