Skip to content

refactor: modernise Server-side SDK Keys page#7003

Merged
talissoncosta merged 4 commits intomainfrom
refactor/server-side-sdk-keys-rtk-migration
Apr 7, 2026
Merged

refactor: modernise Server-side SDK Keys page#7003
talissoncosta merged 4 commits intomainfrom
refactor/server-side-sdk-keys-rtk-migration

Conversation

@talissoncosta
Copy link
Copy Markdown
Contributor

@talissoncosta talissoncosta commented Mar 20, 2026 •
edited
Loading

  • I have read the Contributing Guide.
  • 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.

Changes

Contributes to #7002

Migrate ServerSideSDKKeys.js from a Flux class component to functional components with RTK Query, behind a feature flag (rtk_server_side_sdk_keys).

Migration

  • Replace ProjectStore.getEnvironment() with useGetEnvironmentsQuery (fixes Sentry FLAGSMITH-FRONTEND-4FX)
  • Replace imperative getStore().dispatch() with RTK Query hooks
  • Full TypeScript with proper type definitions
  • Permission check via useHasPermission hook

Component structure

pages/sdk-keys/
├── SDKKeysPage.tsx                    # Page layout (client-side key + server-side keys)
├── index.ts                           # Barrel export
├── hooks/
│   └── useServerSideKeys.tsx          # Data fetching + CRUD handlers
└── components/
    ├── ServerSideSDKKeys.tsx           # UI — permission check, list rendering
    ├── CreateServerSideKeyModal.tsx    # Modal — uses React 19 useActionState
    ├── ServerSideKeyRow.tsx            # Individual key row
    └── index.ts                       # Barrel exports

Feature flag strategy

Old ServerSideSDKKeys.js preserved untouched — feature flag toggles at SDKKeysPage level:

if (Utils.getFlagsmithHasFeature('rtk_server_side_sdk_keys')) {
  return <SDKKeysPageRTK />
}
return <SDKKeysPageLegacy />
  • Flag off: legacy component renders, zero risk
  • Flag on: new RTK Query version renders
  • Rollback: disable the flag — instant, zero-deploy

React 19

CreateServerSideKeyModal uses useActionState to manage form submission — isPending and error state are handled automatically, replacing manual useState for isSaving.

Bug fixes

  • Cache invalidation: providesTags now matches invalidatesTags (LIST tag) so the keys list refreshes automatically after create/delete
  • Per-row delete loading: uses RTK originalArgs to track which row is being deleted — only the affected row fades out
  • Icon colours: removed hardcoded fill='#656D7B', icons use currentColor via text-body class

Cleanups

  • Fix copy-paste IDs: segments-page → sdk-keys-page, org-members-list → server-side-keys-list, remove-feature → remove-sdk-key
  • Fix target='__blank' → _blank
  • Simplify filterRow to use .includes()
  • Extract handleCreateKey from inline callback
  • Extract useServerSideKeys hook to separate data logic from UI
  • Add opacity-50 reusable utility class
  • Use EnvironmentPermission.ADMIN enum instead of raw string

Reviewer notes

  • New code only — no changes to legacy components, fully isolated
  • Feature flagged — zero impact when rtk_server_side_sdk_keys is off
  • The only change to existing code is useServersideEnvironmentKey.ts (cache tag fix) — this is a no-op for the legacy path since it manually refetches
  • Tested manually with flag on and off on staging
  • Safe to merge — the flag stays off until we're confident

How did you test this code?

  • TypeScript compiles with no errors (npm run typecheck)
  • ESLint passes on all modified files
  • Visual parity confirmed — new component renders identically to legacy
  • Manual testing with flag on: create, copy, delete keys all working
  • Manual testing with flag off: legacy component unchanged
  • Cache invalidation verified: list updates automatically after create/delete
  • Per-row delete loading verified: only the deleted row fades, others stay interactive

@vercel
Copy link
Copy Markdown

vercel bot commented Mar 20, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Apr 7, 2026 0:38am
flagsmith-frontend-staging Ready Ready Preview, Comment Apr 7, 2026 0:38am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Apr 7, 2026 0:38am

Request Review

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Mar 20, 2026
@talissoncosta talissoncosta changed the title Migrate ServerSideSDKKeys to functional component with RTK Query refactor: migrate ServerSideSDKKeys to functional component with RTK Query Mar 20, 2026
@talissoncosta talissoncosta changed the title refactor: migrate ServerSideSDKKeys to functional component with RTK Query refactor: migrate ServerSideSDKKeys to FC Mar 23, 2026
@talissoncosta talissoncosta force-pushed the refactor/server-side-sdk-keys-rtk-migration branch from ffb4bba to c4ade31 Compare April 2, 2026 22:49
@github-actions github-actions bot added refactor and removed refactor labels Apr 3, 2026
@github-actions github-actions bot added refactor and removed refactor labels Apr 3, 2026
@talissoncosta talissoncosta marked this pull request as ready for review April 3, 2026 00:53
@talissoncosta talissoncosta requested a review from a team as a code owner April 3, 2026 00:53
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team April 3, 2026 00:53
claude[bot]
claude bot reviewed Apr 3, 2026
View reviewed changes
Copy link
Copy Markdown

@claude claude bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.

Once credits are available, reopen this pull request to trigger a review.

@github-actions github-actions bot added refactor and removed refactor labels Apr 3, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 3, 2026 •
edited
Loading

Docker builds report

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

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 3, 2026 •
edited
Loading

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  23.9 seconds
commit  775d612
info  🔄 Run: #15676 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  50.5 seconds
commit  775d612
info  🔄 Run: #15676 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  48.3 seconds
commit  775d612
info  🔄 Run: #15676 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  59.7 seconds
commit  775d612
info  🔄 Run: #15676 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  38.4 seconds
commit  9885b0c
info  🔄 Run: #15703 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  52.9 seconds
commit  9885b0c
info  🔄 Run: #15703 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  57.5 seconds
commit  9885b0c
info  🔄 Run: #15703 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  47.5 seconds
commit  9885b0c
info  🔄 Run: #15703 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  41.3 seconds
commit  acba3be
info  🔄 Run: #15706 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  10 seconds
commit  acba3be
info  🔄 Run: #15706 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  48.7 seconds
commit  acba3be
info  🔄 Run: #15706 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  42.1 seconds
commit  5a1cd8d
info  🔄 Run: #15707 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 3 seconds
commit  acba3be
info  🔄 Run: #15706 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  30.7 seconds
commit  5a1cd8d
info  🔄 Run: #15707 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  55.6 seconds
commit  5a1cd8d
info  🔄 Run: #15707 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  49.4 seconds
commit  5a1cd8d
info  🔄 Run: #15707 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  9.3 seconds
commit  70ec260
info  🔄 Run: #15708 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  8.4 seconds
commit  70ec260
info  🔄 Run: #15708 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  1 minute
commit  70ec260
info  🔄 Run: #15708 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  58.9 seconds
commit  70ec260
info  🔄 Run: #15708 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  44.2 seconds
commit  a677608
info  🔄 Run: #15709 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  50.1 seconds
commit  a677608
info  🔄 Run: #15709 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  18.2 seconds
commit  a677608
info  🔄 Run: #15709 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  56.2 seconds
commit  a677608
info  🔄 Run: #15709 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  24.6 seconds
commit  9533d5e
info  🔄 Run: #15801 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  45.4 seconds
commit  9533d5e
info  🔄 Run: #15801 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  49.1 seconds
commit  9533d5e
info  🔄 Run: #15801 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  1 minute, 15 seconds
commit  9533d5e
info  🔄 Run: #15801 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  44.8 seconds
commit  d19370a
info  🔄 Run: #15821 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  30 seconds
commit  d19370a
info  🔄 Run: #15821 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  22.4 seconds
commit  0d22e96
info  🔄 Run: #15822 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  27.7 seconds
commit  0d22e96
info  🔄 Run: #15822 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  56.6 seconds
commit  d19370a
info  🔄 Run: #15821 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  56.1 seconds
commit  0d22e96
info  🔄 Run: #15822 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 14 seconds
commit  d19370a
info  🔄 Run: #15821 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 18 seconds
commit  0d22e96
info  🔄 Run: #15822 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  41.1 seconds
commit  bf5963d
info  🔄 Run: #15823 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  22.3 seconds
commit  bf5963d
info  🔄 Run: #15823 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 3 seconds
commit  bf5963d
info  🔄 Run: #15823 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 4 seconds
commit  bf5963d
info  🔄 Run: #15823 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  9.8 seconds
commit  af7c144
info  🔄 Run: #15824 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  50.4 seconds
commit  af7c144
info  🔄 Run: #15824 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  46.9 seconds
commit  af7c144
info  🔄 Run: #15824 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  1 minute, 2 seconds
commit  af7c144
info  🔄 Run: #15824 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  7.3 seconds
commit  7ed2d97
info  🔄 Run: #15825 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  11 passed

Details

stats  11 tests across 8 suites
duration  46.6 seconds
commit  7ed2d97
info  🔄 Run: #15825 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  3.8 seconds
commit  7ed2d97
info  🔄 Run: #15825 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  3 passed

Details

stats  3 tests across 3 suites
duration  1 minute, 4 seconds
commit  7ed2d97
info  🔄 Run: #15825 (attempt 1)

@talissoncosta talissoncosta linked an issue Apr 3, 2026 that may be closed by this pull request
Migrate ServerSideSDKKeys to functional component with RTK Query #7002
Closed
@talissoncosta talissoncosta requested a review from Zaimwa9 April 3, 2026 12:06
talissoncosta
talissoncosta commented Apr 3, 2026
View reviewed changes
Zaimwa9
Zaimwa9 requested changes Apr 6, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@Zaimwa9 Zaimwa9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice overall thanks. It would be preferable IMO to target the feature flag and get rid now of the previous SDKPage instead of duplicating it

@talissoncosta talissoncosta mentioned this pull request Apr 6, 2026
Open
4 tasks
@github-actions github-actions bot added refactor and removed refactor labels Apr 6, 2026
@talissoncosta talissoncosta requested a review from Zaimwa9 April 6, 2026 17:30
Zaimwa9
Zaimwa9 previously approved these changes Apr 7, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@Zaimwa9 Zaimwa9 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for making the changes but one question on your radar: Have the changes been made in the right duplicated page?
It looks like the one in pages/sdk-keys got removed while the one in components stayed?

@github-actions github-actions bot added refactor and removed refactor labels Apr 7, 2026
@talissoncosta @claude
refactor(sdk-keys): add RTK Query version of SDK Keys page
bc3828d 
New functional components with TypeScript, RTK Query hooks, and
React 19 useActionState for the Server-side SDK Keys page.

Component structure:
- pages/sdk-keys/SDKKeysPage.tsx — page layout with environment query
- pages/sdk-keys/components/ServerSideSDKKeys.tsx — permission check, list
- pages/sdk-keys/components/CreateServerSideKeyModal.tsx — useActionState form
- pages/sdk-keys/components/ServerSideKeyRow.tsx — per-row delete loading
- pages/sdk-keys/hooks/useServerSideKeys.tsx — data fetching + CRUD

Improvements over legacy:
- RTK Query replaces Flux store (fixes Sentry FLAGSMITH-FRONTEND-4FX)
- Per-row delete loading via originalArgs tracking
- Icons use currentColor instead of hardcoded fill
- Correct data-test IDs and target attributes
- opacity-50 utility class added

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the refactor/server-side-sdk-keys-rtk-migration branch from d19370a to 0d22e96 Compare April 7, 2026 11:07
@github-actions github-actions bot added refactor and removed refactor labels Apr 7, 2026
@talissoncosta @claude
feat(sdk-keys): gate new page behind rtk_server_side_sdk_keys flag
bf5963d 
Add SDKKeysGate component that switches between legacy and new page
based on the feature flag. Route points to the gate — legacy
SDKKeysPage.tsx is completely untouched.

When the flag is removed (#7140), delete the gate and legacy file,
update the route to point to SDKKeysPage directly.

Also fixes cache invalidation tags in useServersideEnvironmentKey.ts
so the keys list refreshes after create/delete.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@talissoncosta talissoncosta force-pushed the refactor/server-side-sdk-keys-rtk-migration branch from 0d22e96 to bf5963d Compare April 7, 2026 11:55
@github-actions github-actions bot added refactor and removed refactor labels Apr 7, 2026
talissoncosta and others added 2 commits April 7, 2026 09:35
@talissoncosta @claude
refactor(sdk-keys): rename Gate to SDKKeysPage, page to SDKEnvironmen…
dd6dcdb 
…tKeysSettings

Per review feedback — avoid short-lived Gate naming convention.
SDKKeysPage is now the route entry point with the flag switch,
SDKEnvironmentKeysSettings is the clean new page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@talissoncosta @claude
test(e2e): add SDK keys create and delete test
7ed2d97 
Covers the server-side SDK keys flow: navigate to SDK Keys page,
create a key, verify it appears in the list, delete it, verify
it's removed.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@flagsmithdev flagsmithdev mentioned this pull request Apr 7, 2026
Open
@talissoncosta talissoncosta mentioned this pull request Apr 7, 2026
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@claude claude[bot] claude[bot] left review comments

@Zaimwa9 Zaimwa9 Zaimwa9 approved these changes

@kyle-ssg kyle-ssg Awaiting requested review from kyle-ssg kyle-ssg is a code owner automatically assigned from Flagsmith/flagsmith-front-end

Assignees

@talissoncosta talissoncosta

Labels

front-end Issue related to the React Front End Dashboard refactor

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Migrate ServerSideSDKKeys to functional component with RTK Query

2 participants

@talissoncosta @Zaimwa9