Skip to content

improvement(frontend): migrate org membership page to v3 components#5510

Merged
scott-ray-wilson merged 1 commit intomainfrom
users-membership-page-v3
Feb 18, 2026
Merged

improvement(frontend): migrate org membership page to v3 components#5510
scott-ray-wilson merged 1 commit intomainfrom
users-membership-page-v3

Conversation

@scott-ray-wilson
Copy link
Contributor

@scott-ray-wilson scott-ray-wilson commented Feb 18, 2026

Context

This PR migrates the org user page to v3 components and adjust v3 component styling

Screenshots

CleanShot 2026-02-18 at 10 24 04@2x

Steps to verify the change

  • verify all user management functionality is preserved (both org and sub-org)
  • verify styling adjustment between org and sub-org display (green vs blue primary)
  • verify responsive behavior of new components (long names, truncation, etc.)
  • verify loading state display
  • verify permission guards still enforced

Type

  • Fix
  • Feature
  • Improvement
  • Breaking
  • Docs
  • Chore

Checklist

  • Title follows the conventional commit format: type(scope): short description (scope is optional, e.g., fix: prevent crash on sync or fix(api): handle null response).
  • Tested locally
  • Updated docs (if needed)
  • Read the contributing guide

@maidul98
Copy link
Collaborator

Snyk checks have passed. No issues have been found so far.

Status Scanner Critical High Medium Low Total (0)
Open Source Security 0 0 0 0 0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

@greptile-apps
Copy link
Contributor

greptile-apps bot commented Feb 18, 2026

Greptile Summary

This PR migrates the organization membership page from v2 components (FontAwesome icons, v2 Table/Input/Select/Dropdown/Pagination/EmptyState) to their v3 counterparts (Lucide icons, UnstableTable, InputGroup, v3 Select, UnstableDropdownMenu, UnstablePagination, UnstableEmpty). It also wraps the section in v3 UnstableCard components for structural consistency.

  • Component migration: All v2 UI components in OrgMembersTable and OrgMembersSection are replaced with v3 equivalents while preserving existing business logic (permissions, SCIM checks, role changes, invite resend, bulk delete)
  • Icon migration: FontAwesome icons replaced with Lucide equivalents across OrgMembersTable, OrgMembersSection, and LastLoginSection
  • v3 shared component tweaks: Minor global styling adjustments to SelectTrigger (truncation behavior), InputGroupAddon (SVG accent color), UnstableTableHead (user-select none), and DocumentationLinkBadge (optional className prop)
  • Theme tokens: Hardcoded mineshaft-* color classes largely replaced with semantic tokens (bg-container, text-label, border-border, etc.), though a few remain in the delete confirmation modal

Confidence Score: 4/5

  • This PR is a safe UI migration with no logic changes; the main risk is visual regressions.
  • Score of 4 reflects that this is a pure frontend component migration with no business logic changes. All permission checks, SCIM guards, and data flows are preserved 1:1. The shared v3 component styling tweaks (Select, InputGroup, Table) are minimal and affect only a small number of consumers. The only risk is visual inconsistency from the few remaining hardcoded color classes.
  • Pay close attention to OrgMembersTable.tsx as it has the most extensive changes, and Select.tsx since the display model change from flex to block could affect other consumers (though current usage appears safe).

Important Files Changed

Filename Overview
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersTable.tsx Major migration from v2 to v3 components — icons (FontAwesome → Lucide), table, dropdown, input, select, pagination, and empty state components. Logic preserved correctly. Sort direction icon logic properly reimplemented with ChevronDownIcon rotation.
frontend/src/pages/organization/AccessManagementPage/components/OrgMembersTab/components/OrgMembersSection/OrgMembersSection.tsx Migrated to v3 Card layout components (UnstableCard, UnstableCardHeader, etc.) and v3 Button. Modals moved out of the card wrapper. Logic preserved, some hardcoded mineshaft colors remain in the delete confirmation modal.
frontend/src/components/v3/generic/Select/Select.tsx Changed SelectTrigger value display from flex/line-clamp-1 to block/truncate for better text overflow handling. Added [&>span]:truncate for direct span children.
frontend/src/components/v3/generic/InputGroup/InputGroup.tsx Added [&>svg]:text-accent to InputGroupAddon for consistent SVG icon accent coloring. Only affects 2 consumers.
frontend/src/components/v3/generic/Table/Table.tsx Added select-none to UnstableTableHead to prevent text selection when clicking sortable headers.
frontend/src/components/v3/platform/DocumentationLinkBadge/DocumentationLinkBadge.tsx Added optional className prop for external styling. Clean, minimal change.
frontend/src/components/organization/LastLoginSection/LastLoginSection.tsx Migrated from FontAwesome to Lucide icons, updated theme classes from hardcoded mineshaft colors to semantic tokens (bg-container, text-label, border-foreground/25).

Last reviewed commit: dc6c6e3

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

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

7 files reviewed, 1 comment

Edit Code Review Agent Settings | Greptile

Copy link
Contributor

@victorvhs017 victorvhs017 left a comment

Choose a reason for hiding this comment

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

Tested and everything is looking good!

@scott-ray-wilson scott-ray-wilson merged commit 381861e into main Feb 18, 2026
11 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants