Migrate ServerSideSDKKeys to functional component with RTK Query

[talissoncosta]

Description

The ServerSideSDKKeys.js component is a class component using Flux stores (ProjectStore) that causes a crash when ProjectStore.getEnvironment() returns undefined (Sentry issue FLAGSMITH-FRONTEND-4FX). This blocks users from creating server-side keys.

Current state

• Class component (~250 lines)
• Uses ProjectStore.getEnvironment() for environment name lookup
• Uses imperative getStore().dispatch() for RTK Query operations
• Contains nested CreateServerSideKeyModal class component

Objectives

1. Migrate to functional components with TypeScript
2. Break into smaller, focused components (CreateServerSideKeyModal, ServerSideKeyRow)
3. Replace ProjectStore with RTK Query (useGetEnvironmentsQuery)
4. Use RTK Query hooks for server-side key CRUD operations
5. Feature flag (rtk_server_side_sdk_keys) to toggle between old and new

Structure

pages/sdk-keys/
├── SDKKeysPage.tsx
├── index.ts
└── components/
    ├── ServerSideSDKKeys.tsx
    ├── CreateServerSideKeyModal.tsx
    ├── ServerSideKeyRow.tsx
    └── index.ts

Related

• Sentry: FLAGSMITH-FRONTEND-4FX — TypeError: Cannot read properties of undefined (reading 'name') in CreateServerSideKeyModal.render