refactor: modernize OrganisationSettingsPage

[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

Changes

Overview

Migrated OrganisationSettingsPage from a 466-line JavaScript class component to a modern TypeScript functional component architecture, replacing legacy Flux patterns with RTK Query and decomposing the monolithic component into well-structured, reusable modules.

Key Improvements

1. Migration to TypeScript

• Converted from JavaScript class component to TypeScript functional component
• Added proper type definitions for all props, state, and API responses
• Full type safety throughout the component tree
• Created UpdateOrganisationBody type in requests.ts
• Added OrganisationSettingsTab type for tab configuration

2. RTK Query Integration

• Replaced legacy stores: Eliminated AccountStore and OrganisationProvider dependencies
• Added new endpoints to useOrganisation.ts:
  • getOrganisation - Fetch single organisation with proper cache tags
  • updateOrganisation - Update organisation with optimistic updates
  • deleteOrganisation - Delete organisation with cache invalidation
• Optimistic updates: Organisation updates appear immediately in UI with automatic rollback on error
• Automatic cache invalidation: Changes propagate to all components using the same data

3. Custom Hooks for Reusable Logic

• useUpdateOrganisationWithToast: Encapsulates update logic with toast notifications and error handling
• useDeleteOrganisationWithToast: Handles organisation deletion with:
  • Automatic calculation of next available organisation for navigation
  • Legacy store synchronization via AppActions.refreshOrganisation() for backward compatibility
  • Toast notifications for success/error states
  • Loading state management

4. Component Decomposition

Broke down the monolithic 466-line component into focused, maintainable modules:

organisation-settings/
├── OrganisationSettingsPage.tsx (136 lines) - Main orchestrator
├── hooks/
│   ├── useUpdateOrganisationWithToast.ts - Update hook with toast
│   └── useDeleteOrganisationWithToast.ts - Delete hook with navigation
└── tabs/
    ├── general-tab/
    │   ├── index.tsx - GeneralTab orchestrator
    │   └── sections/
    │       ├── OrganisationInformation.tsx - Name update form
    │       ├── DeleteOrganisation.tsx - Deletion UI
    │       └── admin-settings/
    │           ├── Force2FASetting.tsx - 2FA toggle
    │           └── RestrictProjectCreationSetting.tsx - Project creation restriction
    ├── BillingTab.tsx - Billing & subscription management
    ├── LicensingTab.tsx - Enterprise licensing
    ├── CustomFieldsTab.tsx - Custom fields management
    ├── APIKeysTab.tsx - API keys management
    ├── WebhooksTab.tsx - Webhook configuration
    └── SAMLTab.tsx - SAML authentication

5. Modern React Patterns

• Hooks over HOCs: Removed withRouter and ConfigProvider HOCs
• useRouteContext: Replaced match.params with context-based routing
• useHistory: Direct hook usage instead of prop drilling
• Proper imports: Uses { FC, ReactNode } instead of React.FC
• Functional components: All components are now functional with hooks

6. Navigation Improvements

• Explicit navigation logic: After organisation deletion, explicitly calculates next organisation
• Smart routing:
  • If user has other orgs → navigate to /organisation/{nextOrgId}/projects
  • If no orgs remaining → navigate to /organisations (org list)
• No reliance on global state: Navigation based on RTK Query data, not AccountStore

7. Loading States & UX

• Delete button: Shows "Deleting..." text and disables during operation
• Update button: Shows "Updating" text and disables during save
• Page-level loading: Displays centered loader during initial data fetch
• Error states: Shows clear error messages for failed operations

8. Backward Compatibility

• Maintains AppActions.refreshOrganisation(): Ensures legacy components (navbar, permissions UI) stay in sync
• Dual sync strategy: RTK Query handles modern components, AppActions handles legacy components
• Gradual migration path: Allows incremental migration away from legacy stores

9. Tab Array Pattern

Implemented clean, declarative tab configuration matching ProjectSettingsPage:

const tabs: OrganisationSettingsTab[] = [
  {
    component: <GeneralTab organisation={organisation} />,
    isVisible: true,
    key: 'general',
    label: 'General',
  },
  // ... more tabs
].filter(({ isVisible }) => isVisible)

10. Permission Handling

• Direct API checks: Permission checks from organisation.role instead of AccountStore
• Feature flag integration: Uses Utils.getFlagsmithHasFeature() for conditional features
• Payment method checks: Billing tab visibility based on organisation.subscription.payment_method

---

How did you test this code?

Manual Testing Performed

✅ Organisation Information Updates

• Update organisation name → verified name updates in navbar
• Update with empty name → verified validation prevents submission
• Update with very long name → verified it saves correctly
• Cancel edit → verified changes are discarded
• Check loading state → "Updating" text appears during save

✅ Admin Settings

• Toggle "Force 2FA" setting → verified it persists after page reload
• Toggle "Restrict Project Creation" → verified setting saves correctly
• Verify settings persist across page reloads
• Check that non-admin users cannot access these settings

✅ Organisation Deletion

• Delete organisation with multiple orgs → navigates to next organisation's projects page
• Delete organisation (last one) → navigates to /organisations page
• Check confirmation modal appears before deletion
• Verify loading state during deletion ("Deleting..." text)
• Cancel deletion → modal closes without action
• Verify deleted org disappears from navbar immediately

✅ Tab Navigation

• Switch between all tabs → all tabs load correctly
• Billing tab visibility → hidden for AWS Marketplace customers
• Licensing tab visibility → only visible in enterprise installations
• Tab state persists in URL (?tab=billing)
• Direct URL access to specific tab works correctly

✅ Permission Checks

• Admin user → can access all settings
• Non-admin user → sees "You do not have permission" message
• Org not found → error message displays
• Network error → error message displays

✅ Loading States

• Initial page load → centered loader appears
• Organisation update → button shows "Updating"
• Organisation delete → button shows "Deleting..." and is disabled
• Tab switches → content updates immediately (no loader needed, already cached)

✅ Backward Compatibility

• Navbar organisation list updates after changes
• Legacy permissions UI components still function
• Organisation selector in other components reflects changes
• No console errors related to store updates

✅ Error Handling

• API error during load → error message displays
• API error during update → toast notification appears
• API error during delete → toast notification appears
• Network timeout → appropriate error handling

✅ Edge Cases

• Organisation ID not in URL → handled gracefully
• Invalid organisation ID → error message displays
• Multiple rapid clicks on save → prevents double submission
• Multiple rapid clicks on delete → prevents double submission
• Browser back/forward buttons → navigation works correctly

Closes #5779

[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:52am
flagsmith-frontend-staging	Ready	Preview	Comment	Nov 21, 2025 0:52am

1 Skipped Deployment

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

[github-actions]

Docker builds report

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