refactor: Modernize ProjectSettingsPage

[talissoncosta]

Thanks for submitting a PR! Please check the boxes below:

• I have added information to docs/ if required so people know about the feature!
• I have filled in the "Changes" section below?
• I have filled in the "How did you test this code" section below?
• I have used a Conventional Commit title for this Pull Request

Overview

Transformed the Project Settings page from a 673-line monolithic JavaScript class component into a modern, modular
TypeScript architecture with 19 focused components, establishing reusable patterns and improving maintainability.

Key Changes

1. Architecture Overhaul: From Monolith to Modular

Before: Single 673-line class component mixing all concerns After: 19 focused TypeScript components with clear
hierarchy

ProjectSettingsPage (154 lines)
├── GeneralTab
│   ├── ProjectInformation
│   ├── DeleteProject
│   ├── EdgeAPIMigration
│   └── AdditionalSettings
│       ├── ChangeRequestsApprovalsSetting
│       ├── PreventFlagDefaultsSetting
│       ├── CaseSensitivitySetting
│       └── FeatureNameValidation
├── SDKSettingsTab
├── PermissionsTab
├── CustomFieldsTab
└── ImportTab

Result: 253 fewer lines of code with better organization and functionality

2. TypeScript Migration & Type Safety

• Converted from JavaScript class component to TypeScript functional components
• Added comprehensive type definitions for all props, state, and API contracts
• Created UpdateProjectBody type for type-safe project mutations
• Full IntelliSense support and compile-time error prevention

3. Modern React Patterns

Functional Components with Hooks:

• Replaced class-based lifecycle methods with React hooks
• Each setting is a self-contained, testable functional component
• Cleaner code with clear data flow

Custom Hook Pattern:

• Created useUpdateProjectWithToast to eliminate boilerplate
• Provides consistent error handling and success notifications
• Used across all settings for uniform behavior

RTK Query Integration:

• Replaced legacy API calls with RTK Query
• Added optimistic updates for instant UI feedback
• Automatic error rollback without manual state management

4. Code Quality Improvements

• Removed 9 unnecessary useCallback wrappers
• Eliminated manual useEffect state syncing (handled by optimistic updates)
• Established clear separation of concerns
• Each component has a single, well-defined responsibility

Benefits

• Maintainability: 38% reduction in code size (-253 lines) with improved structure
• Type Safety: Full TypeScript coverage prevents runtime errors
• Developer Experience: Reusable patterns eliminate boilerplate for future settings
• Better UX: Optimistic updates provide instant feedback
• Testability: Functional components are easier to unit test
• Scalability: Clear patterns for adding new settings

Notes

• I believe we should standardise the page size, though this is more of a personal preference than a strict technical requirement. Since most of our pages use a full-screen layout, it seems consistent to follow the same pattern here.
• We have a Settings component that is reused across a few places, but it doesn’t have a proper wrapper. This makes it difficult to work with flex and gap-based layouts. We could address this in a follow-up PR with a small structural adjustment.
• I added a subtle transition to this component and would love to get your thoughts. Does it feel unnecessary, or does it help provide a smoother experience for the user?

How did you test this code?

Manual Testing Steps (for QA)

1. Login to the application
2. Select or create a test project
3. Navigate to Project Settings

Test 1: Project Name Update & Navbar Sync ⭐ (Critical - fixes E2E test)

1. Go to General tab
2. Note the current project name in the top navbar
3. Change the project name to "Test Project QA"
4. Click Update button
5. ✅ Expected Results:
   • Success toast appears: "Project Saved"
   • Project name in navbar updates immediately (no page refresh)
   • Button briefly shows "Updating" state
6. Refresh the page
7. ✅ Expected: New project name persists in both settings and navbar

Test 2: Stale Flag Detection (if available)

1. In General tab, locate "Stale Flag Detection" section
2. Change "Mark as stale after" value to 5 days
3. Click Update
4. ✅ Expected: Success toast appears and value persists after page reload

Test 3: Additional Settings Toggles

1. In General tab, scroll to Additional Settings section
2. Toggle "Prevent Flag Defaults" on
3. ✅ Expected: Toggle updates, success toast appears, persists on reload
4. Toggle "Force Lowercase Feature Names" on
5. ✅ Expected: Same behavior as step 3

Test 4: Change Request Approvals (Enterprise only)

1. Toggle "Segment Change Requests" on
2. Set "Minimum Approvals" to 2
3. Click Save
4. ✅ Expected: Success toast appears and setting persists

Test 5: SDK Settings

1. Go to SDK Settings tab
2. Toggle "Realtime Updates" on/off
3. ✅ Expected: Success toast appears immediately
4. Toggle "Hide Disabled Flags" on
5. ✅ Expected: Confirmation modal appears explaining the impact
6. Confirm the modal
7. ✅ Expected: Setting updates with success toast

Test 6: Optimistic Updates & Error Handling ⭐ (Important)

1. Ensure you're in General tab with the page fully loaded (online)
2. Note the current project name
3. Change the project name to "Offline Test"
4. Open DevTools → Network tab → Set to "Offline" mode
5. Click Update button
6. ✅ Expected Results:
   • Name updates immediately in the UI (optimistic update)
   • Error toast appears: "Failed to save project. Please try again."
   • Name reverts back to original value (automatic rollback)
   • No console errors
7. Set Network back to "Online" mode
8. Try the update again with a new name
9. ✅ Expected: Update succeeds normally with success toast

Test 7: Permissions Tab

1. Go to Permissions tab
2. ✅ Expected: Permissions list loads without errors

Test 8: Navigation Between Tabs

1. Navigate between all tabs: General → SDK Settings → Permissions → Custom Fields
2. ✅ Expected: All tabs load without errors, no data loss

QA Sign-off Checklist

• Project name updates navbar immediately without page refresh
• All setting toggles work and persist after reload
• Success/error toasts appear for all actions
• Optimistic updates rollback correctly on network errors
• No console errors during any operation
• All tabs load and navigate correctly
• E2E test passes

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview	Comment	Nov 21, 2025 0:50am
flagsmith-frontend-staging	Ready	Preview	Comment	Nov 21, 2025 0:50am

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ignored	Preview		Nov 21, 2025 0:50am

[cursor]

You have run out of free Bugbot PR reviews for this billing cycle. This will reset on December 10.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[github-actions]

Docker builds report

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-6302	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-6302	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api:pr-6302	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith:pr-6302	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-6302	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-6302	Finished ✅	Results ✅

[talissoncosta]

@Zaimwa9
I think we are in a good shape. Do you have any suggestions for testing it? I might be missing something, like testing with diff subscriptions, permissions...