@startsimpli/ui 0.4.84 → 0.4.86

package/src/components/team/__tests__/member-provenance.test.tsx

@@ -0,0 +1,132 @@
+/**
+ * RED (startsim-768w.20.4.1): the members list cannot show two populations.
+ *
+ * Every row renders identically today, so an OPEN foundry's roster puts the
+ * three people who RUN the app and the two hundred who merely USE it in one
+ * undifferentiated table under the heading "N people can access and manage this
+ * foundry". Role does not separate them either — an invited viewer and a
+ * self-joined viewer are the same word.
+ *
+ * The provenance is DATA the backend records (768w.20.4.2). These tests fail
+ * until the shared list renders it and offers a way to ask for one population,
+ * because per rule 9 "how did this person get here" is a members-list concern,
+ * not a foundry-app one — /settings/team has the same two populations the
+ * moment any app opens its own door.
+ */
+
+import { render, screen, fireEvent } from '@testing-library/react'
+import { MembersTable, MembersSection } from '../index'
+import type { MemberRow } from '../types'
+
+const rows: MemberRow[] = [
+  {
+    id: 'm1',
+    userId: 'u1',
+    teamId: 'qafoundry',
+    role: 'owner',
+    joinedAt: '2026-01-01T00:00:00Z',
+    inviteStatus: 'active',
+    source: 'seed',
+    user: { id: 'u1', email: 'owner@ogmc.ai' },
+  },
+  {
+    id: 'm2',
+    userId: 'u2',
+    teamId: 'qafoundry',
+    role: 'admin',
+    joinedAt: '2026-02-01T00:00:00Z',
+    inviteStatus: 'active',
+    source: 'invited',
+    invitedByEmail: 'owner@ogmc.ai',
+    user: { id: 'u2', email: 'nordby@ogmc.ai' },
+  },
+  {
+    id: 'm3',
+    userId: 'u3',
+    teamId: 'qafoundry',
+    role: 'viewer',
+    joinedAt: '2026-07-01T00:00:00Z',
+    inviteStatus: 'active',
+    source: 'self_signup',
+    user: { id: 'u3', email: 'fan@example.com' },
+  },
+]
+
+describe('MembersTable shows how each person got here (768w.20.4.1)', () => {
+  it('renders a joined-how column when the rows carry provenance', () => {
+    render(<MembersTable members={rows} />)
+    expect(screen.getByRole('columnheader', { name: /how they joined/i })).toBeInTheDocument()
+  })
+
+  it('separates an operator from an end user at a glance', () => {
+    const { container } = render(<MembersTable members={rows} />)
+    const badges = Array.from(container.querySelectorAll('[data-member-source]'))
+    expect(badges.map((b) => b.getAttribute('data-member-source'))).toEqual([
+      'seed',
+      'invited',
+      'self_signup',
+    ])
+    // Product language, not the wire value — "self_signup" is not a thing a
+    // person reads.
+    expect(screen.getByText(/signed up/i)).toBeInTheDocument()
+    expect(screen.getByText(/invited/i)).toBeInTheDocument()
+  })
+
+  it('drops the column entirely for a backend that does not report it', () => {
+    const legacy = rows.map(({ source: _source, ...rest }) => rest)
+    render(<MembersTable members={legacy} />)
+    expect(screen.queryByRole('columnheader', { name: /how they joined/i })).toBeNull()
+  })
+})
+
+describe('MembersSection asks the SERVER for one population (768w.20.4.1)', () => {
+  it('offers a filter and reports the choice back to the host', () => {
+    const onSourceChange = jest.fn()
+    render(
+      <MembersSection
+        members={rows}
+        teamId="qafoundry"
+        sourceFilter={{ value: 'all', onChange: onSourceChange }}
+      />,
+    )
+    const select = screen.getByLabelText(/how they joined/i) as HTMLSelectElement
+    fireEvent.change(select, { target: { value: 'self_signup' } })
+    expect(onSourceChange).toHaveBeenCalledWith('self_signup')
+  })
+
+  it('offers exactly the three populations plus "everyone"', () => {
+    render(
+      <MembersSection
+        members={rows}
+        teamId="qafoundry"
+        sourceFilter={{ value: 'all', onChange: jest.fn() }}
+      />,
+    )
+    const select = screen.getByLabelText(/how they joined/i) as HTMLSelectElement
+    expect(Array.from(select.options).map((o) => o.value)).toEqual([
+      'all',
+      'invited',
+      'self_signup',
+      'seed',
+    ])
+  })
+
+  it('does not filter the rows itself — the list is paginated', () => {
+    // A browser-side filter over one PAGE shrinks pages and loses people off the
+    // end (repo rule 8). The composer renders exactly what it was handed.
+    render(
+      <MembersSection
+        members={rows}
+        teamId="qafoundry"
+        sourceFilter={{ value: 'self_signup', onChange: jest.fn() }}
+      />,
+    )
+    expect(screen.getByText('owner@ogmc.ai')).toBeInTheDocument()
+    expect(screen.getByText('fan@example.com')).toBeInTheDocument()
+  })
+
+  it('renders no filter at all when the host does not offer one', () => {
+    render(<MembersSection members={rows} teamId="qafoundry" />)
+    expect(screen.queryByLabelText(/how they joined/i)).toBeNull()
+  })
+})

package/src/components/team/index.ts

@@ -13,7 +13,9 @@ export type { MembersTableClassNames } from './members-table-default-class-names
 export { MEMBERS_TABLE_DEFAULTS } from './members-table-default-class-names'
 
 export { MembersSection } from './MembersSection'
-export type { MembersSectionProps } from './MembersSection'
+export type {
+  MembersSectionProps, MemberSourceFilter, MemberSourceFilterValue,
+} from './MembersSection'
 export type { MembersSectionClassNames } from './members-section-default-class-names'
 export { MEMBERS_SECTION_DEFAULTS } from './members-section-default-class-names'
 
@@ -57,6 +59,7 @@ export {
   type MemberUserLite,
   type MemberRow,
   type InviteStatus,
+  type MemberSource,
   type InvitationLite,
   type DomainVerificationMethod,
   type DomainClaimLite,

package/src/components/team/members-section-default-class-names.ts

@@ -12,6 +12,10 @@ export interface MembersSectionClassNames {
   body?: string
   errorText?: string
   helpText?: string
+  /** Row holding the list's narrowing controls (startsim-768w.20.4). */
+  filterBar?: string
+  filterLabel?: string
+  filterSelect?: string
   /** Forwarded to the nested primitives so an app still overrides one map. */
   table?: MembersTableClassNames
   inviteDialog?: InviteMemberDialogClassNames
@@ -28,4 +32,8 @@ export const MEMBERS_SECTION_DEFAULTS: Required<
   body: 'space-y-3',
   errorText: 'text-sm text-destructive',
   helpText: 'text-xs text-muted-foreground',
+  filterBar: 'flex flex-wrap items-center gap-2',
+  filterLabel: 'text-xs font-medium text-muted-foreground',
+  filterSelect:
+    'rounded-md border border-border bg-background px-2 py-1 text-xs text-foreground',
 }

package/src/components/team/members-table-default-class-names.ts

@@ -34,6 +34,13 @@ export interface MembersTableClassNames {
   lastActiveEmpty?: string
   /** "Invited by …" line under a member who hasn't activated yet. */
   invitedBy?: string
+  /** Shared shape of the "how they joined" pill (startsim-768w.20.4). */
+  sourceBadge?: string
+  /** Per-origin colour. The point of the column is that an operator and an
+   *  end user do not look the same, so these must not collapse to one class. */
+  sourceInvited?: string
+  sourceSelfSignup?: string
+  sourceSeed?: string
   /** Resend-invite action on a pending/expired row. */
   resendButton?: string
   /** Deactivate / Restore action — the soft exit next to the hard Remove. */
@@ -73,6 +80,12 @@ export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
   lastActive: 'text-muted-foreground',
   lastActiveEmpty: 'text-muted-foreground/70',
   invitedBy: 'text-xs text-muted-foreground/80',
+  sourceBadge:
+    'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium',
+  sourceInvited: 'border-border bg-muted text-muted-foreground',
+  // The population an operator most needs to pick out of a long list.
+  sourceSelfSignup: 'border-primary/30 bg-primary/10 text-primary',
+  sourceSeed: 'border-border bg-muted/60 text-muted-foreground',
   resendButton:
     'rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-primary/40 hover:bg-primary/10 hover:text-primary disabled:opacity-50',
   deactivateButton:

package/src/components/team/types.ts

@@ -44,6 +44,16 @@ export interface MemberUserLite {
  */
 export type InviteStatus = 'active' | 'pending' | 'expired'
 
+/**
+ * HOW someone came to be on this list (startsim-768w.20.4).
+ *
+ * The distinction `role` cannot make. Once a workspace can be joined without an
+ * invite, its member list carries two populations — the handful of people who
+ * RUN it and everyone who merely USES it — and an invited viewer reads exactly
+ * like a self-joined viewer.
+ */
+export type MemberSource = 'invited' | 'self_signup' | 'seed'
+
 export interface MemberRow {
   id: string
   userId: string
@@ -54,6 +64,9 @@ export interface MemberRow {
   user?: MemberUserLite
   /** Lifecycle state. Absent for backends that don't report it (older list APIs). */
   inviteStatus?: InviteStatus
+  /** How they got here. Absent for backends that don't record it — the table
+   *  then drops the column rather than rendering an empty one. */
+  source?: MemberSource
   /** Last sign-in, or null for someone who has never signed in. */
   lastLoginAt?: string | null
   /** When the outstanding invite link dies. Null once there is no live invite. */