Instance create form: automatically select SSH key after creation (#3173)

After you create an SSH key in the instance create form, it should
automatically be checked to be injected into the instance. Otherwise why
would you be adding it? Actual fix is
9285551, second commit is a tiny bit of
code cleanup.

Did my favorite Claude thing and asked it whether we originally had a
reason to not auto-select the SSH key. Definitively, no:

> Ideally the new keys are pre-selected I suppose, though it might not
be worth the work.
#1867 (comment)


https://github.com/user-attachments/assets/899bb513-d809-41a1-8e9d-7cc79ff09bbf

Author: david-crespo

app/components/form/fields/SshKeysField.tsx

@@ -55,11 +55,11 @@ export function SshKeysField({
   control: Control<InstanceCreateInput>
   isSubmitting: boolean
 }) {
-  const keys = usePrefetchedQuery(q(api.currentUserSshKeyList, {})).data?.items || []
+  const allKeys = usePrefetchedQuery(q(api.currentUserSshKeyList, {})).data.items
   const [showAddSshKey, setShowAddSshKey] = useState(false)
 
   const {
-    field: { value, onChange },
+    field: { value: selectedKeys, onChange },
     fieldState: { error },
   } = useController({
     control,
@@ -73,6 +73,8 @@ export function SshKeysField({
     },
   })
 
+  const allAreSelected = allKeys.length === selectedKeys.length
+
   return (
     <div className="max-w-lg">
       <div className="mb-2">
@@ -81,11 +83,11 @@ export function SshKeysField({
           SSH keys can be added and removed in your user settings
         </TextInputHint>
       </div>
-      {keys.length > 0 ? (
+      {allKeys.length > 0 ? (
         <>
           <div className="space-y-2">
             <div className="flex flex-col space-y-2">
-              {keys.map((key) => (
+              {allKeys.map((key) => (
                 <CheckboxField
                   name="sshPublicKeys"
                   control={control}
@@ -102,12 +104,10 @@ export function SshKeysField({
 
             <Divider />
             <Checkbox
-              checked={value.length === keys.length}
-              indeterminate={value.length > 0 && value.length < keys.length}
+              checked={allAreSelected}
+              indeterminate={selectedKeys.length > 0 && !allAreSelected}
               // if fewer than all are checked, check all. if all are checked, check none
-              onChange={() =>
-                onChange(value.length < keys.length ? keys.map((key) => key.id) : [])
-              }
+              onChange={() => onChange(allAreSelected ? [] : allKeys.map((key) => key.id))}
               disabled={isSubmitting}
             >
               <span className="select-none">Select all</span>
@@ -140,6 +140,7 @@ export function SshKeysField({
       {showAddSshKey && (
         <SSHKeyCreate
           onDismiss={() => setShowAddSshKey(false)}
+          onSuccess={(sshKey) => onChange([...selectedKeys, sshKey.id])}
           message={
             <Message
               variant="info"

app/forms/ssh-key-create.tsx

@@ -8,7 +8,13 @@
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router'
 
-import { api, queryClient, useApiMutation, type SshKeyCreate } from '@oxide/api'
+import {
+  api,
+  queryClient,
+  useApiMutation,
+  type SshKey,
+  type SshKeyCreate,
+} from '@oxide/api'
 
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
@@ -28,17 +34,19 @@ const defaultValues: SshKeyCreate = {
 
 type Props = {
   onDismiss?: () => void
+  onSuccess?: (sshKey: SshKey) => void
   message?: React.ReactNode
 }
 
-export function SSHKeyCreate({ onDismiss, message }: Props) {
+export function SSHKeyCreate({ onDismiss, onSuccess, message }: Props) {
   const navigate = useNavigate()
 
   const handleDismiss = onDismiss ? onDismiss : () => navigate(pb.sshKeys())
 
   const createSshKey = useApiMutation(api.currentUserSshKeyCreate, {
     onSuccess(sshKey) {
       queryClient.invalidateEndpoint('currentUserSshKeyList')
+      onSuccess?.(sshKey)
       handleDismiss()
       // prettier-ignore
       addToast(<>SSH key <HL>{sshKey.name}</HL> created</>)

test/e2e/instance-create.e2e.ts

@@ -338,11 +338,15 @@ test('add ssh key from instance create form', async ({ page }) => {
   await dialog.getByRole('button', { name: 'Add SSH Key' }).click()
 
   await expect(newCheckbox).toBeVisible()
-  await expect(newCheckbox).not.toBeChecked()
+  await expect(newCheckbox).toBeChecked()
+
+  await closeToast(page)
 
   // pop over to the real SSH keys page and see it there, why not
   await page.getByLabel('User menu').click()
   await page.getByRole('menuitem', { name: 'Settings' }).click()
+  // the new key being auto-checked makes the form dirty, which triggers confirm leave
+  await page.getByRole('button', { name: 'Leave this page' }).click()
   await page.getByRole('link', { name: 'SSH Keys' }).click()
   await expectRowVisible(page.getByRole('table'), { name: newKey, description: 'hi' })
 })