Merge pull request 'Add a confirmation dialog before deleting a guest' (#284) from confirmation-dialog-remove-guest into main

Reviewed-on: #284

app/ui/guests/table.tsx

@@ -48,7 +48,12 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
           </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => {
+                if (window.confirm(`Are you sure you want to delete guest "${guest.name}"?`)) {
+                  api.destroy(serializer, guest, onUpdate)
+                }
+              }}
+              />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
             </div>
           </td>

tests/guests.spec.ts

@@ -70,6 +70,7 @@ test('should allow CRUD on guests', async ({ page }) => {
   await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
 
   // Delete John Fire
+  page.on('dialog', dialog => dialog.accept());
   await page.getByRole('row').nth(1).locator('svg').nth(0).click(); // Click delete icon
   await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
 });