fix(mosaic): let account section controllers own row pending state

Connected accounts now disables account menus while a connection starts,
so removal can no longer begin mid-connect, and removal shares the
section lock. Enterprise accounts moves onto the shared pending action,
so a connect error clears when any connection starts.

Author: austincalvelage

.changeset/goofy-parents-trade.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/__tests__/user-profile-connected-accounts.connect.feature.test.tsx

@@ -158,6 +158,27 @@ describe('connected accounts', () => {
     request.fail();
   });
 
+  it('holds connected account menus while a connection starts', async () => {
+    await renderSection([google]);
+    const request = holdRequests('post', '/v1/me/external_accounts');
+    const user = userEvent.setup();
+
+    try {
+      await user.click(screen.getByRole('button', { name: 'Connect GitHub' }));
+      await waitFor(() => expect(request.requests).toHaveLength(1));
+      const manage = screen.getByRole('button', { name: 'Manage Google' });
+      expect(manage).toHaveAttribute('aria-disabled', 'true');
+      await user.click(manage);
+      expect(screen.queryByRole('menu')).toBeNull();
+    } finally {
+      request.fail();
+    }
+
+    await waitFor(() =>
+      expect(screen.getByRole('button', { name: 'Manage Google' })).not.toHaveAttribute('aria-disabled', 'true'),
+    );
+  });
+
   it('verifies the session before connecting a provider, then continues to it', async () => {
     serveFapi(signedIn([], { verification: { secrets: { password: 'hunter2' } } }));
     const view = await renderWithClerk(<UserProfileConnectedAccountsSection />);

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-account-row.view.tsx

@@ -19,13 +19,11 @@ import type {
 
 export function UserProfileConnectProviderRowView({
   provider,
-  isPending,
   isDisabled,
   onConnect,
   triggerRef,
 }: {
   provider: UserProfileConnectionProvider;
-  isPending: boolean;
   isDisabled: boolean;
   onConnect: (id: string) => void;
   triggerRef?: Ref<HTMLButtonElement>;
@@ -58,8 +56,8 @@ export function UserProfileConnectProviderRowView({
             variant='outline'
             color='neutral'
             aria-label={fill(m.connectLabel, { provider: provider.provider })}
-            isPending={isPending}
-            disabled={isDisabled && !isPending}
+            isPending={provider.isPending}
+            disabled={isDisabled && !provider.isPending}
             onClick={() => onConnect(provider.id)}
           >
             {m.connect}
@@ -91,7 +89,7 @@ export function UserProfileConnectedAccountRowView({
 }) {
   const m = useMessages('userProfile').connectedAccounts;
   const actions: ActionMenuAction[] = [];
-  if ((account.status === 'reconnect' || account.status === 'error') && onReconnect && !isDisabled) {
+  if ((account.status === 'reconnect' || account.status === 'error') && onReconnect) {
     actions.push({
       label: account.status === 'reconnect' ? m.reconnect : m.tryAgain,
       onClick: () => onReconnect(account.id),
@@ -131,6 +129,8 @@ export function UserProfileConnectedAccountRowView({
         {actions.length > 0 ? (
           <Section.Actions>
             <ActionMenu
+              disabled={isDisabled}
+              focusableWhenDisabled
               triggerRef={triggerRef}
               label={fill(m.manageLabel, { provider: account.provider })}
               actions={actions}

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.controller.ts

@@ -30,7 +30,7 @@ export interface UserProfileConnectedAccountsControllerOptions {
 export interface UserProfileConnectedAccountsController {
   accounts: UserProfileConnectedAccount[];
   availableProviders: UserProfileConnectionProvider[];
-  pendingId: string | undefined;
+  isDisabled: boolean;
   onConnect: (id: string) => void;
   onReconnect: (id: string) => void;
   sectionRef: Ref<HTMLDivElement>;
@@ -81,15 +81,17 @@ export function useUserProfileConnectedAccountsController({
     accounts: accounts.map(account =>
       actions.errorKey === account.id ? { ...account, reconnectError: actions.error } : account,
     ),
-    availableProviders: availableProviders.map(provider =>
-      actions.errorKey === provider.id ? { ...provider, connectError: actions.error } : provider,
-    ),
-    pendingId: actions.pendingKey,
+    availableProviders: availableProviders.map(provider => ({
+      ...provider,
+      isPending: actions.pendingKey === provider.id,
+      connectError: actions.errorKey === provider.id ? actions.error : undefined,
+    })),
+    isDisabled: actions.isPending,
     onConnect: id => run(id, onConnect),
     onReconnect: id => run(id, onReconnect),
     sectionRef,
     registerTrigger: removalFocus.registerTrigger,
-    remove: onRemove ? remove : undefined,
+    remove: onRemove ? actions.guard(remove) : undefined,
     finalFocus: removalFocus.finalFocus,
     reconnectReverification,
     reconnectFinalFocus: () => (actions.lastKey ? removalFocus.trigger(actions.lastKey) : null),

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.types.ts

@@ -16,6 +16,7 @@ export interface ConnectedAccountProviderDisplay {
 export interface UserProfileConnectionProvider extends ConnectedAccountProviderDisplay {
   id: string;
   connectError?: string;
+  isPending?: boolean;
 }
 
 export interface UserProfileConnectedAccount extends ConnectedAccountProviderDisplay {
@@ -30,7 +31,7 @@ export interface UserProfileConnectedAccountsSectionViewProps {
   accounts: UserProfileConnectedAccount[];
   sectionRef?: Ref<HTMLDivElement>;
   availableProviders?: UserProfileConnectionProvider[];
-  pendingId?: string;
+  isDisabled?: boolean;
   onConnect?: (id: string) => void;
   onReconnect?: (id: string) => void;
   registerTrigger: (id: string) => Ref<HTMLButtonElement>;

packages/mosaic/src/features/user-profile/user-profile-connected-accounts-section/user-profile-connected-accounts-section.view.tsx

@@ -18,7 +18,7 @@ export function UserProfileConnectedAccountsSectionView({
   accounts,
   sectionRef,
   availableProviders = [],
-  pendingId,
+  isDisabled = false,
   onConnect,
   onReconnect,
   registerTrigger,
@@ -31,7 +31,6 @@ export function UserProfileConnectedAccountsSectionView({
 }: UserProfileConnectedAccountsSectionViewProps) {
   const m = useMessages('userProfile').connectedAccounts;
   const hasRows = accounts.length > 0 || (availableProviders.length > 0 && Boolean(onConnect));
-  const isBusy = pendingId !== undefined;
 
   return (
     <>
@@ -52,7 +51,7 @@ export function UserProfileConnectedAccountsSectionView({
                   key={account.id}
                   account={account}
                   triggerRef={registerTrigger(account.id)}
-                  isDisabled={isBusy}
+                  isDisabled={isDisabled}
                   onReconnect={onReconnect}
                   onRemove={remove ? account => remove.open(account) : undefined}
                 />
@@ -63,8 +62,7 @@ export function UserProfileConnectedAccountsSectionView({
                       key={provider.id}
                       provider={provider}
                       triggerRef={registerTrigger(provider.id)}
-                      isPending={pendingId === provider.id}
-                      isDisabled={isBusy}
+                      isDisabled={isDisabled}
                       onConnect={onConnect}
                     />
                   ))

packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx

@@ -14,12 +14,10 @@ import type { UserProfileEnterpriseAccount } from './user-profile-enterprise-acc
 export function UserProfileEnterpriseAccountRowView({
   account,
   onConnect,
-  isPending,
   disabled,
 }: {
   account: UserProfileEnterpriseAccount;
   onConnect?: (id: string) => void;
-  isPending?: boolean;
   disabled?: boolean;
 }) {
   const m = useMessages('userProfile').enterpriseAccounts;
@@ -58,7 +56,7 @@ export function UserProfileEnterpriseAccountRowView({
               size='sm'
               variant='outline'
               aria-label={fill(m.connectProvider, { provider: account.name })}
-              isPending={isPending}
+              isPending={account.isPending}
               pendingLabel={m.connecting}
               disabled={disabled}
               onClick={() => onConnect(account.id)}

packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.controller.ts

@@ -18,7 +18,7 @@ export interface UserProfileEnterpriseAccountsControllerOptions {
 export interface UserProfileEnterpriseAccountsController {
   accounts: UserProfileEnterpriseAccount[];
   connections: UserProfileEnterpriseConnection[];
-  pendingId: string | undefined;
+  isDisabled: boolean;
   onConnect: (connectionId: string) => void;
   connectReverification: ReverificationController;
 }
@@ -34,10 +34,12 @@ export function useUserProfileEnterpriseAccountsController({
 
   return {
     accounts,
-    connections: connections.map(connection =>
-      actions.errorKey === connection.id ? { ...connection, connectError: actions.error } : connection,
-    ),
-    pendingId: actions.pendingKey,
+    connections: connections.map(connection => ({
+      ...connection,
+      isPending: actions.pendingKey === connection.id,
+      connectError: actions.errorKey === connection.id ? actions.error : undefined,
+    })),
+    isDisabled: actions.isPending,
     onConnect: id =>
       void actions.run(id, async () => {
         if ((await onConnect(id)) === 'redirecting') {

packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.types.ts

@@ -4,6 +4,7 @@ export interface UserProfileEnterpriseConnection {
   iconUrl?: string;
   monochromeIcon?: boolean;
   connectError?: string;
+  isPending?: boolean;
 }
 
 export interface UserProfileEnterpriseAccount extends UserProfileEnterpriseConnection {

packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-accounts-section.view.tsx

@@ -11,15 +11,15 @@ import type {
 export interface UserProfileEnterpriseAccountsSectionViewProps {
   accounts: UserProfileEnterpriseAccount[];
   connections?: UserProfileEnterpriseConnection[];
-  pendingId?: string;
+  isDisabled?: boolean;
   onConnect?: (id: string) => void;
   connectReverification?: ReverificationController;
 }
 
 export function UserProfileEnterpriseAccountsSectionView({
   accounts,
   connections = [],
-  pendingId,
+  isDisabled = false,
   onConnect,
   connectReverification,
 }: UserProfileEnterpriseAccountsSectionViewProps) {
@@ -49,8 +49,7 @@ export function UserProfileEnterpriseAccountsSectionView({
                     key={connection.id}
                     account={connection}
                     onConnect={onConnect}
-                    isPending={pendingId === connection.id}
-                    disabled={pendingId !== undefined}
+                    disabled={isDisabled}
                   />
                 ))
               : null}