feat(ui,localizations,shared): condense organization Security page SSO overview by iagodahlem · Pull Request #8915 · clerk/javascript

iagodahlem · 2026-06-18T18:01:52Z

Description

Condenses the <OrganizationProfile /> Security page SSO overview into a single summary row — a one-line description, the configured domains as chips, and the connection status badge — with all actions under the overflow ("…") menu. Removes the bordered detail card and the Provider, Single sign-on URL, Issuer, and Certificate rows, along with the secondary description line, and drops the now-unused ssoSection localization keys.

Implements ORGS-1651. Follow-up to the initial Security page overview (#8813), applying the design review from that PR.

Checklist

pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated — N/A
(If applicable) Documentation has been updated — N/A

Type of change

Summary by CodeRabbit

Improvements
- Redesigned the Organization Profile Security SSO section with a condensed, single-row overview layout.
- Updated the SSO summary to use a concise single-line description.
- Simplified the details view to focus on domains (as chips) and the status badge only.
- Removed provider/issuer/sign-on URL and other secondary SSO information from the overview/condensed layouts.
Tests
- Updated Security page expectations to match the new condensed SSO UI and copy.

vercel · 2026-06-18T18:01:58Z

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 18, 2026 6:37pm
swingset	Ready	Preview, Comment	Jun 18, 2026 6:37pm

changeset-bot · 2026-06-18T18:02:00Z

🦋 Changeset detected

Latest commit: c53fc37

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages

Name	Type
@clerk/localizations	Patch
@clerk/shared	Patch
@clerk/ui	Patch
@clerk/react	Patch
@clerk/astro	Patch
@clerk/backend	Patch
@clerk/chrome-extension	Patch
@clerk/clerk-js	Patch
@clerk/expo-passkeys	Patch
@clerk/expo	Patch
@clerk/express	Patch
@clerk/fastify	Patch
@clerk/headless	Patch
@clerk/hono	Patch
@clerk/msw	Patch
@clerk/nextjs	Patch
@clerk/nuxt	Patch
@clerk/react-router	Patch
@clerk/tanstack-react-start	Patch
@clerk/testing	Patch
@clerk/vue	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-06-18T18:02:10Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 4646c5dc-05fe-4a91-a463-e15193bddc6c

📥 Commits

Reviewing files that changed from the base of the PR and between a809f30 and c53fc37.

📒 Files selected for processing (2)

packages/localizations/src/en-US.ts
packages/ui/src/components/OrganizationProfile/SecuritySsoSection.tsx

🚧 Files skipped from review as they are similar to previous changes (2)

packages/localizations/src/en-US.ts
packages/ui/src/components/OrganizationProfile/SecuritySsoSection.tsx

📝 Walkthrough

Walkthrough

The PR condenses the OrganizationProfile Security page SSO section from a multi-row detail card (provider, sign-on URL, issuer, role-aware description) to a single summary row showing only domain chips and a one-line description. The localization type contract removes five keys, the en-US strings are updated, the UI component is refactored, all 48 non-English locale files drop the same keys, and tests are updated to match.

Changes

SSO Overview Condensation

Layer / File(s)	Summary
Localization type contract `packages/shared/src/types/localization.ts`	Removes `descriptionLine2`, `descriptionLine2__noRole`, `providerLabel`, `signOnUrlLabel`, and `issuerLabel` from `organizationProfile.securityPage.ssoSection` in `__internal_LocalizationResource`.
English canonical strings `packages/localizations/src/en-US.ts`	Rewrites `descriptionLine1` copy, renames `domainLabel` from "Domain" to "Domains:", and removes the five now-deleted keys from the `en-US` SSO section.
SecuritySsoSection UI refactor `packages/ui/src/components/OrganizationProfile/SecuritySsoSection.tsx`	Removes provider-icon/chip helpers, the multi-row detail container, and the role-aware `SsoDescription`. Replaces them with a `domains` array rendered as labeled chips. Adjusts `STATUS_BADGES` typing and cleans up imports.
Locale files bulk key removal `packages/localizations/src/{ar-SA,be-BY,bg-BG,bn-IN,ca-ES,cs-CZ,da-DK,de-DE,el-GR,en-GB,es-CR,es-ES,es-MX,es-UY,fa-IR,fi-FI,fr-FR,he-IL,hi-IN,hr-HR,hu-HU,id-ID,is-IS,it-IT,ja-JP,kk-KZ,ko-KR,mn-MN,ms-MY,nb-NO,nl-BE,nl-NL,pl-PL,pt-BR,pt-PT,ro-RO,ru-RU,sk-SK,sr-RS,sv-SE,ta-IN,te-IN,th-TH,tr-TR,uk-UA,vi-VN,zh-CN,zh-TW}.ts`	Removes the same five SSO label/description keys from every non-English locale; retains `domainLabel`, `menuAction__`, and `primaryButton__` keys (all `undefined` in community locales).
Tests and changeset `packages/ui/src/components/OrganizationProfile/__tests__/OrganizationSecurityPage.test.tsx`, `.changeset/clean-chairs-go.md`	Updates test constants and assertions to match domains-only layout; removes provider/issuer/sign-on assertions; replaces long-domain link check with chip `title` attribute validation; removes `enrollment role` describe block; records patch bumps for three packages.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

clerk/javascript#8813: Initially added the SSO overview UI strings and components (descriptionLine2, issuerLabel, providerLabel, signOnUrlLabel) that this PR removes from securityPage.ssoSection.
clerk/javascript#8866: Touches the same SecuritySsoSection component and SSO-related localization/types area, removing the certificate row and adjusting SSO section content in a closely related way.

Suggested reviewers

LauraBeatris

Poem

🐇 Hop hop, less is more today,
The SSO card has been swept away —
No issuer rows, no provider links,
Just domain chips and one clean line, methinks!
The rabbit cheers for tidy code,
Forty-eight locales share the load. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: condensing the SSO overview in the Organization Security page. It accurately reflects the primary objective across the three affected packages.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-06-18T18:05:39Z

API Changes Report

Generated by Break Check on 2026-06-18T18:39:50.507Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	2
🔴 Breaking changes	0
🟡 Non-breaking changes	2
🟢 Additions	0

🤖 This report was reviewed by claude-sonnet-4-6.

@clerk/shared

Current version: 4.19.0
Recommended bump: MINOR → 4.20.0

Subpath `./types`

🟡 Non-breaking Changes (1)

Modified: `__internal_LocalizationResource`

Diff (before: 1943 lines, after: 1957 lines). Click to expand.

// ... 1055 unchanged lines elided ...
          badge__active: LocalizationValue;
          badge__inactive: LocalizationValue;
          descriptionLine1: LocalizationValue;
-         descriptionLine2: LocalizationValue<'role'>;
-         descriptionLine2__noRole: LocalizationValue;
-         primaryButton__startConfiguration: LocalizationValue;
-         primaryButton__continueConfiguration: LocalizationValue;
-         providerLabel: LocalizationValue;
-         domainLabel: LocalizationValue;
-         signOnUrlLabel: LocalizationValue;
-         issuerLabel: LocalizationValue;
-         menuAction__edit: LocalizationValue;
-         menuAction__activate: LocalizationValue;
-         menuAction__deactivate: LocalizationValue;
-         menuAction__remove: LocalizationValue;
-       };
-     };
-     membersPage: {
-       detailsTitle__emptyRow: LocalizationValue;
-       action__invite: LocalizationValue;
-       action__search: LocalizationValue;
-       start: {
-         headerTitle__members: LocalizationValue;
-         headerTitle__invitations: LocalizationValue;
-         headerTitle__requests: LocalizationValue;
-       };
-       activeMembersTab: {
-         tableHeader__user: LocalizationValue;
-         tableHeader__joined: LocalizationValue;
-         tableHeader__role: LocalizationValue;
-         tableHeader__actions: LocalizationValue;
-         menuAction__remove: LocalizationValue;
-       };
// ... 669 more lines elided ...
-             };
-             rows: {
-               email: {
-                 attribute: LocalizationValue;
-                 claimName: LocalizationValue;
-                 value: LocalizationValue;
-               };
-               firstName: {
-                 attribute: LocalizationValue;
-                 claimName: LocalizationValue;
-                 value: LocalizationValue;
-               };
-               lastName: {
-                 attribute: LocalizationValue;
-                 claimName: LocalizationValue;
-                 value: LocalizationValue;
-               };
-             };
-           };
-         };
-       };
-     };
-     activate: {
-       title: LocalizationValue;
-       subtitle: LocalizationValue<'domain'>;
-       activateButton: LocalizationValue;
-       skipButton: LocalizationValue;
-       activeTitle: LocalizationValue;
-       activeSubtitle: LocalizationValue<'domain'>;
-       doneButton: LocalizationValue;
+         primaryButton__startConfiguration: LocalizationValue;
+         primaryButton__continueConfiguration: LocalizationValue;
+         domainLabel: LocalizationValue;
+         menuAction__edit: LocalizationValue;
+         menuAction__activate: LocalizationValue;
+         menuAction__deactivate: LocalizationValue;
+         menuAction__remove: LocalizationValue;
+       };
+     };
+     membersPage: {
+       detailsTitle__emptyRow: LocalizationValue;
+       action__invite: LocalizationValue;
+       action__search: LocalizationValue;
+       start: {
+         headerTitle__members: LocalizationValue;
+         headerTitle__invitations: LocalizationValue;
+         headerTitle__requests: LocalizationValue;
+       };
+       activeMembersTab: {
+         tableHeader__user: LocalizationValue;
+         tableHeader__joined: LocalizationValue;
+         tableHeader__role: LocalizationValue;
+         tableHeader__actions: LocalizationValue;
+         menuAction__remove: LocalizationValue;
+       };
+       invitedMembersTab: {
+         tableHeader__invited: LocalizationValue;
+         menuAction__revoke: LocalizationValue;
+       };
+       invitationsTab: {
// ... 683 more lines elided ...
+         };
+       };
+     };
+     confirmation: {
+       statusSection: {
+         title: LocalizationValue;
+         activeBadge: LocalizationValue;
+         inactiveBadge: LocalizationValue;
+       };
+       enableSection: {
+         title: LocalizationValue;
+       };
+       domainSection: {
+         title: LocalizationValue;
+       };
+       configurationSection: {
+         title: LocalizationValue;
+         ssoUrlLabel: LocalizationValue;
+         issuerLabel: LocalizationValue;
+         configureAgainLink: LocalizationValue;
+       };
+       resetSection: {
+         title: LocalizationValue;
+         warning: LocalizationValue;
+         confirmationFieldLabel: LocalizationValue<'name'>;
+         submitButton: LocalizationValue;
+       };
+       inactiveBanner: {
+         title: LocalizationValue;
+       };
      };
    };
    apiKeys: {
// ... 153 unchanged lines elided ...

Static analyzer: Breaking change in type alias __internal_LocalizationResource: Type changed: {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca… → {locale:string;maintenanceMode:import("@clerk/shared").LocalizationValue;roles:{[r:string]:import("@clerk/shared").Loca…

🤖 AI review (reclassified as non-breaking) (70%): The diff shows 14 additional elided lines in the after-snippet (1877 vs 1863), indicating new fields were added to __internal_LocalizationResource; since this type is used as the source for LocalizationResource which extends DeepPartial<DeepLocalizationWithoutObjects<__internal_LocalizationResource>>, consumers only read/use LocalizationResource (an output/extension type with all-optional fields via DeepPartial), so adding required fields to the internal source type does not break existing well-typed consumer code.

@clerk/ui

Current version: 1.18.0
Recommended bump: MINOR → 1.19.0

Subpath `./internal`

🟡 Non-breaking Changes (1)

Modified: `ElementsConfig`

// ... 523 unchanged lines elided ...
    configureSSOTestRunHowToFixDocsLink: WithOptions;
    configureSSOTestRunParsedUserInfo: WithOptions;
    configureSSOTestError: WithOptions;
-   configureSSOActivate: WithOptions;
-   configureSSOActivateIcon: WithOptions;
-   configureSSOActivateTitle: WithOptions;
-   configureSSOActivateSubtitle: WithOptions;
-   configureSSOActivateButton: WithOptions;
-   configureSSOActivateSkipButton: WithOptions;
+   configureSSOConfirmationStatusBadge: WithOptions<string>;
+   configureSSOConfirmationDomainLink: WithOptions;
+   configureSSOConfirmationConfigDetailsLabel: WithOptions;
+   configureSSOConfirmationConfigDetailsValue: WithOptions;
+   configureSSOConfirmationConfigDetailsLink: WithOptions;
+   configureSSOConfirmationInactiveBanner: WithOptions;
+   configureSSOConfirmationReconfigureButton: WithOptions;
+   configureSSOConfirmationResetButton: WithOptions;
    configureSSOResetConnectionDialog: WithOptions;
    configureSSOResetConnectionDialogCancelButton: WithOptions;
    configureSSOResetConnectionDialogConfirmationInput: WithOptions;
// ... 14 unchanged lines elided ...

Static analyzer: Breaking change in type alias ElementsConfig: Type changed: {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W… → {button:import("@clerk/ui").~WithOptions<string>;input:import("@clerk/ui").~WithOptions;checkbox:import("@clerk/ui").~W…

🤖 AI review (reclassified as non-breaking) (85%): The diff shows new keys being added to ElementsConfig (e.g. configureSSOConfirmationStatusBadge, configureSSOConfirmationDomainLink, etc.) with no existing keys removed or changed; adding properties to a type alias used only as an output/mapped-type source (consumed via Elements which iterates over its keys) is non-breaking for consumers who read Elements values and do not construct ElementsConfig directly.

Report generated by Break Check

_{Last ran on c53fc37.}

pkg-pr-new · 2026-06-18T18:06:37Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8915

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8915

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8915

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8915

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@8915

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8915

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8915

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8915

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8915

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8915

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8915

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8915

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8915

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8915

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8915

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8915

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8915

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8915

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8915

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8915

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8915

commit: c53fc37

…O overview

…omain row Replace the `ValueChip` wrapper with direct `Badge` rendering for SSO domains and restructure the detail row layout into nested Flex containers with consistent spacing. Move the trailing colon into the `domainLabel` localization string instead of applying it via a `::after` pseudo-element.

LauraBeatris · 2026-06-18T19:19:28Z

+      // Provider, sign-on URL, issuer, and certificate rows are no longer rendered.
+      expect(screen.queryByText('Provider')).not.toBeInTheDocument();
+      expect(screen.queryByText('Okta Workforce')).not.toBeInTheDocument();
+      expect(screen.queryByText('Sign on URL')).not.toBeInTheDocument();
+      expect(screen.queryByText('Issuer')).not.toBeInTheDocument();
+      expect(screen.queryByText('Certificate')).not.toBeInTheDocument();
+      expect(screen.queryByText('CERT')).not.toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: 'https://idp.example.com/sso' })).not.toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: 'https://idp.example.com/entity' })).not.toBeInTheDocument();


I believe it's fine if we drop those assertions here and keep only the assertion for Domains

vercel Bot deployed to Preview – clerk-js-sandbox June 18, 2026 18:02 View deployment

github-actions Bot added localizations ui labels Jun 18, 2026

vercel Bot deployed to Preview – swingset June 18, 2026 18:03 View deployment

feat(ui,localizations,shared): condense organization Security page SS…

a809f30

…O overview

iagodahlem force-pushed the iago/orgs-1651-security-page-overview branch from d6b0569 to a809f30 Compare June 18, 2026 18:13

vercel Bot deployed to Preview – clerk-js-sandbox June 18, 2026 18:14 View deployment

vercel Bot deployed to Preview – swingset June 18, 2026 18:15 View deployment

iagodahlem requested a review from LauraBeatris June 18, 2026 18:23

github-actions Bot added the clerk-js label Jun 18, 2026

iagodahlem force-pushed the iago/orgs-1651-security-page-overview branch from ee22fd1 to c53fc37 Compare June 18, 2026 18:36

vercel Bot deployed to Preview – clerk-js-sandbox June 18, 2026 18:36 View deployment

vercel Bot deployed to Preview – swingset June 18, 2026 18:37 View deployment

LauraBeatris reviewed Jun 18, 2026

View reviewed changes

LauraBeatris approved these changes Jun 18, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui,localizations,shared): condense organization Security page SSO overview#8915

feat(ui,localizations,shared): condense organization Security page SSO overview#8915
iagodahlem wants to merge 2 commits into
mainfrom
iago/orgs-1651-security-page-overview

iagodahlem commented Jun 18, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

github-actions Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Jun 18, 2026 •

edited

Loading

Uh oh!

LauraBeatris Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

iagodahlem commented Jun 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Summary by CodeRabbit

Uh oh!

vercel Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Uh oh!

github-actions Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

API Changes Report

Summary

@clerk/shared

Subpath ./types

🟡 Non-breaking Changes (1)

Modified: __internal_LocalizationResource

@clerk/ui

Subpath ./internal

🟡 Non-breaking Changes (1)

Modified: ElementsConfig

Uh oh!

pkg-pr-new Bot commented Jun 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

LauraBeatris Jun 18, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

iagodahlem commented Jun 18, 2026 •

edited by coderabbitai Bot

Loading

vercel Bot commented Jun 18, 2026 •

edited

Loading

changeset-bot Bot commented Jun 18, 2026 •

edited

Loading

coderabbitai Bot commented Jun 18, 2026 •

edited

Loading

github-actions Bot commented Jun 18, 2026 •

edited

Loading

Subpath `./types`

Modified: `__internal_LocalizationResource`

Subpath `./internal`

Modified: `ElementsConfig`

pkg-pr-new Bot commented Jun 18, 2026 •

edited

Loading