diff --git a/src/frontend/src/components/teams/team-form-dialog.tsx b/src/frontend/src/components/teams/team-form-dialog.tsx
index ad8d6402..e85c049c 100644
--- a/src/frontend/src/components/teams/team-form-dialog.tsx
+++ b/src/frontend/src/components/teams/team-form-dialog.tsx
@@ -6,6 +6,8 @@ import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import TagSelector from '@/components/ui/tag-selector';
+import { PrincipalPicker } from '@/components/common/principal-picker';
+import { principalAcceptsForMemberType } from '@/lib/team-members';
import {
Dialog,
DialogContent,
@@ -416,18 +418,32 @@ export function TeamFormDialog({
(
-
- {t('teams:form.labels.identifier')}
-
-
-
-
-
- )}
+ render={({ field }) => {
+ // Picker accepts narrows to the chosen
+ // member_type so users only see users in
+ // the dropdown, groups only see groups.
+ const memberType = form.watch(`members.${index}.member_type`);
+ const accepts = principalAcceptsForMemberType(memberType);
+ return (
+
+ {t('teams:form.labels.identifier')}
+
+ field.onChange(next ?? '')}
+ placeholder={
+ memberType === 'group'
+ ? t('teams:form.placeholders.groupName')
+ : t('teams:form.placeholders.userEmail')
+ }
+ aria-label={t('teams:form.labels.identifier')}
+ />
+
+
+
+ );
+ }}
/>
{
+ it('returns ["user"] for "user"', () => {
+ expect(principalAcceptsForMemberType('user')).toEqual(['user']);
+ });
+
+ it('returns ["group"] for "group"', () => {
+ expect(principalAcceptsForMemberType('group')).toEqual(['group']);
+ });
+
+ it('defaults to ["user"] for null / undefined / unknown values', () => {
+ expect(principalAcceptsForMemberType(null)).toEqual(['user']);
+ expect(principalAcceptsForMemberType(undefined)).toEqual(['user']);
+ expect(principalAcceptsForMemberType('')).toEqual(['user']);
+ expect(principalAcceptsForMemberType('robot')).toEqual(['user']);
+ });
+});
+
+describe('buildContractTeamMember', () => {
+ it('populates both username and email with the picked principal id', () => {
+ expect(
+ buildContractTeamMember({
+ emailOrUsername: 'alice@example.com',
+ role: 'Data Owner',
+ name: 'Alice',
+ }),
+ ).toEqual({
+ username: 'alice@example.com',
+ email: 'alice@example.com',
+ role: 'Data Owner',
+ name: 'Alice',
+ });
+ });
+
+ it('trims surrounding whitespace on every field', () => {
+ expect(
+ buildContractTeamMember({
+ emailOrUsername: ' bob@x ',
+ role: ' Steward ',
+ name: ' Bob ',
+ }),
+ ).toEqual({
+ username: 'bob@x',
+ email: 'bob@x',
+ role: 'Steward',
+ name: 'Bob',
+ });
+ });
+
+ it('omits name entirely when blank / undefined', () => {
+ const m1 = buildContractTeamMember({
+ emailOrUsername: 'c@x',
+ role: 'r',
+ name: ' ',
+ });
+ expect(m1).toEqual({ username: 'c@x', email: 'c@x', role: 'r' });
+ expect('name' in m1).toBe(false);
+
+ const m2 = buildContractTeamMember({ emailOrUsername: 'd@x', role: 'r' });
+ expect(m2).toEqual({ username: 'd@x', email: 'd@x', role: 'r' });
+ expect('name' in m2).toBe(false);
+ });
+});
diff --git a/src/frontend/src/lib/team-members.ts b/src/frontend/src/lib/team-members.ts
new file mode 100644
index 00000000..954cab96
--- /dev/null
+++ b/src/frontend/src/lib/team-members.ts
@@ -0,0 +1,55 @@
+/**
+ * Helpers shared by the Teams form, Data-product team-member, and
+ * Data-contract team-member dialogs after their Phase 3 migration
+ * onto ``PrincipalPicker``.
+ *
+ * Kept as pure functions so the integration logic is unit-testable
+ * without mounting the Radix dialogs (which hang in jsdom in this
+ * repo -- see the skipped ``team-form-dialog.test.tsx`` for context).
+ */
+
+import type { PrincipalType } from '@/types/directory';
+
+/**
+ * Narrow the picker's ``accepts`` filter based on the Teams row's
+ * ``member_type``. ``user`` is the default; any value other than
+ * ``group`` falls back to it so unrecognised future values are
+ * handled gracefully.
+ */
+export function principalAcceptsForMemberType(
+ memberType: string | null | undefined,
+): Exclude[] {
+ return memberType === 'group' ? ['group'] : ['user'];
+}
+
+/**
+ * Construct the ODCS-compatible team-member payload from the
+ * data-contract dialog state. ODCS uses ``username``; the existing
+ * backend still inspects ``email`` for backward compatibility, so we
+ * populate both with the same picked principal id.
+ */
+export interface ContractTeamMemberInput {
+ emailOrUsername: string;
+ role: string;
+ name?: string | null;
+}
+
+export interface ContractTeamMember {
+ username: string;
+ email: string;
+ role: string;
+ name?: string;
+}
+
+export function buildContractTeamMember(
+ input: ContractTeamMemberInput,
+): ContractTeamMember {
+ const trimmed = input.emailOrUsername.trim();
+ const name = input.name?.trim();
+ return {
+ username: trimmed,
+ email: trimmed,
+ role: input.role.trim(),
+ ...(name ? { name } : {}),
+ };
+}