fix(mosaic): let the last copy result decide the create API key copy error

Author: alexcarpenter

packages/mosaic/src/features/api-keys/__tests__/api-keys-table.feature.test.tsx

@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { describe, expect, it, vi } from 'vitest';
 
+import { deferred } from '../../../__tests__/async';
 import { openDialog } from '../../../__tests__/feature/dialog';
 import { type FakeFapiSeed, fapiUrl, holdRequests, serveFapi, worker } from '../../../__tests__/feature/fake-fapi';
 import {
@@ -501,6 +502,25 @@ describe('APIKeysTable', () => {
       expect(screen.getByRole('alertdialog', { name: 'Copy your API Key' })).toBeVisible();
     });
 
+    it('clears the copy error when an overlapping copy succeeds after one fails', async () => {
+      const { user } = await renderTable();
+      const dialog = await openCreate(user);
+      await fillCreate(user, dialog, 'Deploy', 'Never');
+      await user.click(within(dialog).getByRole('button', { name: 'Add API Key' }));
+      await within(dialog).findByRole('textbox', { name: 'API key' });
+      const first = deferred<void>();
+      const second = deferred<void>();
+      vi.spyOn(navigator.clipboard, 'writeText').mockReturnValueOnce(first.promise).mockReturnValueOnce(second.promise);
+
+      await user.click(within(dialog).getByRole('button', { name: 'Copy API key' }));
+      await user.click(within(dialog).getByRole('button', { name: 'Copy API key' }));
+      first.reject(new Error('blocked'));
+      await waitFor(() => expect(within(dialog).getByRole('alert')).toHaveTextContent('Could not copy'));
+      second.resolve();
+
+      await waitFor(() => expect(within(dialog).getByRole('alert')).not.toHaveTextContent('Could not copy'));
+    });
+
     it('closes the secret on Escape after a failed copy', async () => {
       const { user } = await renderTable();
       const dialog = await openCreate(user);

packages/mosaic/src/features/api-keys/create-api-key.controller.ts

@@ -45,6 +45,9 @@ type Event =
 
 const { createMachine, assign } = setup<Context, Event>();
 
+const copied = { target: 'attempted', actions: assign(() => ({ copyFailed: false })) };
+const failed = { target: 'attempted', actions: assign(() => ({ copyFailed: true })) };
+
 const machine = createMachine({
   id: 'createAPIKey',
   initial: 'closed',
@@ -63,13 +66,10 @@ const machine = createMachine({
       on: { COPY: 'copying' },
     },
     copying: {
-      on: {
-        COPIED: { target: 'attempted', actions: assign(() => ({ copyFailed: false })) },
-        COPY_FAILED: { target: 'attempted', actions: assign(() => ({ copyFailed: true })) },
-      },
+      on: { COPIED: copied, COPY_FAILED: failed },
     },
     attempted: {
-      on: { COPY: 'copying', CLOSE: 'closed' },
+      on: { COPY: 'copying', COPIED: copied, COPY_FAILED: failed, CLOSE: 'closed' },
     },
   },
 });