fix(ui): Handle logo upload failure in TaskChooseOrganization

.changeset/cyan-kids-jump.md

@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Fix `TaskChooseOrganization` to complete organization activation when logo upload fails

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/CreateOrganizationScreen.tsx

@@ -1,5 +1,9 @@
 import { useOrganizationList } from '@clerk/shared/react';
-import type { CreateOrganizationParams, OrganizationCreationDefaultsResource } from '@clerk/shared/types';
+import type {
+  CreateOrganizationParams,
+  OrganizationCreationDefaultsResource,
+  OrganizationResource,
+} from '@clerk/shared/types';
 import { useState } from 'react';
 
 import { useEnvironment } from '@/ui/contexts';
@@ -64,14 +68,9 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
 
       const organization = await createOrganization(createOrgParams);
 
-      if (file) {
-        await organization.setLogo({ file });
-      } else if (defaultLogoUrl) {
-        const response = await fetch(defaultLogoUrl);
-        const blob = await response.blob();
-        const logoFile = new File([blob], 'logo', { type: blob.type });
-        await organization.setLogo({ file: logoFile });
-      }
+      // If setting the logo fails, we still want to set the active organization
+      const uploadOrganizationLogoPromise = uploadOrganizationLogo(organization);
+      await Promise.allSettled([uploadOrganizationLogoPromise]);
 
       await setActive({
         organization,
@@ -84,6 +83,17 @@ export const CreateOrganizationScreen = (props: CreateOrganizationScreenProps) =
     }
   };
 
+  const uploadOrganizationLogo = async (organization: OrganizationResource) => {
+    if (file) {
+      await organization.setLogo({ file });
+    } else if (defaultLogoUrl) {
+      const response = await fetch(defaultLogoUrl);
+      const blob = await response.blob();
+      const logoFile = new File([blob], 'logo', { type: blob.type });
+      await organization.setLogo({ file: logoFile });
+    }
+  };
+
   const onChangeName = (event: React.ChangeEvent<HTMLInputElement>) => {
     nameField.setValue(event.target.value);
     updateSlugField(createSlug(event.target.value));

packages/ui/src/components/SessionTasks/tasks/TaskChooseOrganization/__tests__/TaskChooseOrganization.test.tsx

@@ -1,15 +1,66 @@
+import type { OrganizationResource } from '@clerk/shared/src/types';
+import { waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { beforeEach, describe, expect, it } from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 
-import { clearFetchCache } from '@/ui/hooks/useFetch';
 import { bindCreateFixtures } from '@/test/create-fixtures';
 import { render } from '@/test/utils';
 import {
   createFakeUserOrganizationMembership,
   createFakeUserOrganizationSuggestion,
 } from '@/ui/components/OrganizationSwitcher/__tests__/test-utils';
+import { clearFetchCache } from '@/ui/hooks/useFetch';
 
 import { TaskChooseOrganization } from '..';
+import type { FakeOrganizationParams } from '../../../../CreateOrganization/__tests__/CreateOrganization.test';
+
+type FakeOrganizationParams = {
+  id: string;
+  createdAt?: Date;
+  imageUrl?: string;
+  slug: string;
+  name: string;
+  membersCount: number;
+  pendingInvitationsCount: number;
+  adminDeleteEnabled: boolean;
+  maxAllowedMemberships: number;
+};
+
+const createFakeOrganization = (params: FakeOrganizationParams): OrganizationResource => {
+  return {
+    pathRoot: '',
+    id: params.id,
+    name: params.name,
+    slug: params.slug,
+    hasImage: !!params.imageUrl,
+    imageUrl: params.imageUrl || '',
+    membersCount: params.membersCount,
+    pendingInvitationsCount: params.pendingInvitationsCount,
+    publicMetadata: {},
+    adminDeleteEnabled: params.adminDeleteEnabled,
+    maxAllowedMemberships: params?.maxAllowedMemberships,
+    createdAt: params?.createdAt || new Date(),
+    updatedAt: new Date(),
+    update: vi.fn() as any,
+    getMemberships: vi.fn() as any,
+    getInvitations: vi.fn() as any,
+    getRoles: vi.fn() as any,
+    addMember: vi.fn() as any,
+    inviteMember: vi.fn() as any,
+    inviteMembers: vi.fn() as any,
+    updateMember: vi.fn() as any,
+    removeMember: vi.fn() as any,
+    createDomain: vi.fn() as any,
+    getDomain: vi.fn() as any,
+    getDomains: vi.fn() as any,
+    getMembershipRequests: vi.fn() as any,
+    destroy: vi.fn() as any,
+    setLogo: vi.fn() as any,
+    reload: vi.fn() as any,
+    __internal_toSnapshot: vi.fn() as any,
+    initializePaymentMethod: vi.fn() as any,
+  } as OrganizationResource;
+};
 
 const { createFixtures } = bindCreateFixtures('TaskChooseOrganization');
 
@@ -443,4 +494,49 @@ describe('TaskChooseOrganization', () => {
       });
     });
   });
+
+  describe('on create organization submit', () => {
+    it('calls setActive even when logo upload fails', async () => {
+      const { wrapper, fixtures } = await createFixtures(f => {
+        f.withOrganizations();
+        f.withForceOrganizationSelection();
+        f.withUser({
+          email_addresses: ['test@clerk.com'],
+          create_organization_enabled: true,
+          tasks: [{ key: 'choose-organization' }],
+        });
+      });
+
+      const createdOrg = createFakeOrganization({
+        id: '1',
+        adminDeleteEnabled: false,
+        maxAllowedMemberships: 1,
+        membersCount: 1,
+        name: 'new org',
+        pendingInvitationsCount: 0,
+        slug: 'new-org',
+      });
+
+      // Mock setLogo to reject with an error
+      createdOrg.setLogo = vi.fn().mockRejectedValue(new Error('Logo upload failed'));
+
+      fixtures.clerk.createOrganization.mockReturnValue(Promise.resolve(createdOrg));
+
+      const { findByRole, findByLabelText } = render(<TaskChooseOrganization />, { wrapper });
+
+      const nameInput = await findByLabelText(/name/i);
+      await userEvent.type(nameInput, 'new org');
+
+      const submitButton = await findByRole('button', { name: /continue/i });
+      await userEvent.click(submitButton);
+
+      await waitFor(() => {
+        expect(fixtures.clerk.setActive).toHaveBeenCalledWith(
+          expect.objectContaining({
+            organization: createdOrg,
+          }),
+        );
+      });
+    });
+  });
 });