diff --git a/src/components/settings/__tests__/managed-integration-status.test.tsx b/src/components/settings/__tests__/managed-integration-status.test.tsx index f782d0d55..d7126b5dd 100644 --- a/src/components/settings/__tests__/managed-integration-status.test.tsx +++ b/src/components/settings/__tests__/managed-integration-status.test.tsx @@ -7,17 +7,19 @@ import { renderToStaticMarkup } from "react-dom/server"; import type { ConnectionHealth } from "@/lib/integrations/connection-health"; +const NAMED_RECORD = { + accountId: "record-1", + recordKind: "managed", + username: "managed-1", + displayName: "Managed record" as string | null, + fullName: null as string | null, +}; +let activeRecord = NAMED_RECORD; vi.mock("@/hooks/use-auth", () => ({ useAuth: () => ({ user: { id: "guardian", - accountAccess: { - active: { - accountId: "record-1", - recordKind: "managed", - displayName: "Managed record", - }, - }, + accountAccess: { active: activeRecord }, }, isAuthenticated: true, isLoading: false, @@ -78,6 +80,7 @@ describe("", () => { beforeEach(() => { payload = undefined; loading = false; + activeRecord = NAMED_RECORD; }); it("renders one shared card per provider from health, with controls on the OAuth ones", () => { @@ -140,6 +143,16 @@ describe("", () => { ); }); + it("names a profile without a display name by its username", () => { + activeRecord = { ...NAMED_RECORD, displayName: null }; + payload = withHealth({}); + const html = render(); + expect(html.match(/Connects for managed-1Connect for managed-1 { loading = true; const html = render(); diff --git a/src/components/settings/managed-integration-status.tsx b/src/components/settings/managed-integration-status.tsx index 4ce08a958..6f84aa551 100644 --- a/src/components/settings/managed-integration-status.tsx +++ b/src/components/settings/managed-integration-status.tsx @@ -28,6 +28,7 @@ import { queryKeys, } from "@/lib/query-keys"; import { assertRecordSettingsResponseForRecord } from "@/lib/record-settings/response"; +import { accountLabel } from "@/lib/sharing/account-access-view"; type ManagedIntegrationKey = keyof typeof INTEGRATION_DISPLAY_NAMES; @@ -90,7 +91,9 @@ export function ManagedIntegrationStatus() { enabled: activeRecord?.recordKind === "managed" && recordId !== null, }); - const recordName = activeRecord?.displayName ?? ""; + // Named the way the switcher and the banner name it: a profile created + // without a display name still has a name to connect for. + const recordName = activeRecord ? accountLabel(activeRecord) : ""; const invalidateStatus = () => queryClient.invalidateQueries({ @@ -248,10 +251,7 @@ export function ManagedIntegrationStatus() {