Add success toasts for create and delete SSH key (#2188)

toasts for create and delete SSH key

Author: david-crespo

app/forms/ssh-key-create.tsx

@@ -14,6 +14,7 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useForm } from '~/hooks'
+import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
 const defaultValues: SshKeyCreate = {
@@ -22,13 +23,12 @@ const defaultValues: SshKeyCreate = {
   publicKey: '',
 }
 
-export function CreateSSHKeySideModalForm({
-  onDismiss,
-  message,
-}: {
+type Props = {
   onDismiss?: () => void
   message?: React.ReactNode
-}) {
+}
+
+export function CreateSSHKeySideModalForm({ onDismiss, message }: Props) {
   const queryClient = useApiQueryClient()
   const navigate = useNavigate()
 
@@ -38,6 +38,7 @@ export function CreateSSHKeySideModalForm({
     onSuccess() {
       queryClient.invalidateQueries('currentUserSshKeyList')
       handleDismiss()
+      addToast({ content: 'Your SSH key has been created' })
     },
   })
   const form = useForm({ defaultValues })

app/pages/settings/SSHKeysPage.tsx

@@ -13,6 +13,7 @@ import { apiQueryClient, useApiMutation, useApiQueryClient, type SshKey } from '
 import { Key16Icon, Key24Icon } from '@oxide/design-system/icons/react'
 
 import { confirmDelete } from '~/stores/confirm-delete'
+import { addToast } from '~/stores/toast'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
@@ -45,6 +46,7 @@ export function SSHKeysPage() {
   const deleteSshKey = useApiMutation('currentUserSshKeyDelete', {
     onSuccess: () => {
       queryClient.invalidateQueries('currentUserSshKeyList')
+      addToast({ content: 'Your SSH key has been deleted' })
     },
   })
 

test/e2e/ssh-keys.e2e.ts

@@ -7,7 +7,7 @@
  */
 import { test } from '@playwright/test'
 
-import { expectNotVisible, expectRowVisible, expectVisible } from './utils'
+import { clickRowAction, expectNotVisible, expectRowVisible, expectVisible } from './utils'
 
 test('SSH keys', async ({ page }) => {
   await page.goto('/settings/ssh-keys')
@@ -20,14 +20,12 @@ test('SSH keys', async ({ page }) => {
   ])
 
   // delete the two ssh keys
-  await page.click('role=button[name="Row actions"]')
-  await page.click('role=menuitem[name="Delete"]')
+  await clickRowAction(page, 'm1-macbook-pro', 'Delete')
   await page.getByRole('button', { name: 'Confirm' }).click()
 
   await expectNotVisible(page, ['role=cell[name="m1-macbook-pro"]'])
 
-  await page.click('role=button[name="Row actions"]')
-  await page.click('role=menuitem[name="Delete"]')
+  await clickRowAction(page, 'mac-mini', 'Delete')
   await page.getByRole('button', { name: 'Confirm' }).click()
 
   // should show empty state