Fix tiny UI race after add SSH key in instance create form (#3177)

It's barely worth fixing, but codex flagged it in #3173 and it's real.
Watch the `select all` checkbox below when I submit the create SSH key
form. In the very short interval of time after the key is created and
but before list of keys refetches, the select all checkbox flashes
checked (all are selected) before flipping back to intermediate when the
list comes in. It's trivial and it's not worth keeping the e2e test I
used to prove and fix it (removed in
966aac1), but it is worth fixing now
that I know about.


https://github.com/user-attachments/assets/0bc9e5ff-ceb0-49b5-856d-8998a8971528

The checkbox showing the wrong thing is not actually the entire bug — if
the user toggles select all during this interval, the behavior is
slightly weird because the list of keys is out of sync, but it's nearly
impossible for a human user to move fast enough to run into the issue,
and the state after the request comes back will be up to date. The real
fix would be to make `onSuccess` wait until after the invalidate is
complete. But we don't have any other examples of `async onSuccess`, so
I don't want to rush that fix in.

```diff
   const handleDismiss = onDismiss ? onDismiss : () => navigate(pb.sshKeys())
 
   const createSshKey = useApiMutation(api.currentUserSshKeyCreate, {
-    onSuccess(sshKey) {
-      queryClient.invalidateEndpoint('currentUserSshKeyList')
+    async onSuccess(sshKey) {
+      await queryClient.invalidateEndpoint('currentUserSshKeyList')
       onSuccess?.(sshKey)
       handleDismiss()
       // prettier-ignore
```

Author: david-crespo

app/components/form/fields/SshKeysField.tsx

@@ -20,6 +20,7 @@ import { EmptyMessage } from '~/ui/lib/EmptyMessage'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { Message } from '~/ui/lib/Message'
 import { TextInputHint } from '~/ui/lib/TextInput'
+import { isSubset } from '~/util/array'
 
 import { CheckboxField } from './CheckboxField'
 import { ErrorMessage } from './ErrorMessage'
@@ -73,7 +74,16 @@ export function SshKeysField({
     },
   })
 
-  const allAreSelected = allKeys.length === selectedKeys.length
+  // do this with a subset instead of just counting the items because there's a
+  // weird window right after adding but before the invalidate has gone through
+  // where you can have the new one selected but it's not in the list of all
+  // keys, which can cause the counts to match even though the sets don't
+  const allAreSelected =
+    allKeys.length > 0 &&
+    isSubset(
+      allKeys.map((k) => k.id),
+      new Set(selectedKeys)
+    )
 
   return (
     <div className="max-w-lg">

app/util/array.spec.tsx

@@ -8,7 +8,14 @@
 import type { JSX, ReactElement } from 'react'
 import { expect, test } from 'vitest'
 
-import { groupBy, intersperse, isSetEqual, setDiff, setIntersection } from './array'
+import {
+  groupBy,
+  intersperse,
+  isSetEqual,
+  isSubset,
+  setDiff,
+  setIntersection,
+} from './array'
 
 test('groupBy', () => {
   expect(
@@ -73,6 +80,17 @@ test('isSetEqual', () => {
   expect(isSetEqual(new Set([{}]), new Set([{}]))).toBe(false)
 })
 
+test('isSubset', () => {
+  expect(isSubset(new Set(), new Set())).toBe(true)
+  expect(isSubset(new Set(), new Set(['a']))).toBe(true)
+  expect(isSubset(new Set(['a']), new Set(['a', 'b']))).toBe(true)
+  expect(isSubset(new Set(['a', 'b']), new Set(['a', 'b']))).toBe(true)
+
+  expect(isSubset(new Set(['a']), new Set())).toBe(false)
+  expect(isSubset(new Set(['a', 'b']), new Set(['a']))).toBe(false)
+  expect(isSubset(new Set(['c']), new Set(['a', 'b']))).toBe(false)
+})
+
 test('setDiff', () => {
   expect(setDiff(new Set(), new Set())).toEqual(new Set())
   expect(setDiff(new Set(['a']), new Set())).toEqual(new Set(['a']))

app/util/array.ts

@@ -49,6 +49,14 @@ export function isSetEqual<T>(a: Set<T>, b: Set<T>): boolean {
   return true
 }
 
+/** Is `a ⊆ b`? */
+export function isSubset<T>(a: Iterable<T>, b: ReadonlySet<T>): boolean {
+  for (const item of a) {
+    if (!b.has(item)) return false
+  }
+  return true
+}
+
 /** Set `a - b` */
 export function setDiff<T>(a: ReadonlySet<T>, b: ReadonlySet<T>): Set<T> {
   return new Set([...a].filter((x) => !b.has(x)))