Make toast copy more consistent (#2504)

* Make toast copy more consistent

* Add confirmation for disk deletion

* Add highlighting to toast contents

* keep str test

* Fix tests; a few more ToastContents, but will hold here

* Move away from ToastContent

* Migrate other addToasts to new approach

* Add toast on a couple of onSuccess functions missing them

* Fix a few tests

* Missed a couple

* Formatting

* surely saying this was the last test to fix won't jinx it

* nope; it was not fully reading the previous CI report

* Add expectToast helper

* use a lighter weight font

* Close toasts at end of expectToast

* let addToast take the content directly, fix type errors, change one case

* a billion one-liner toasts with the magic of prettier-ignore

* eliminate HLs by using CSS instead

* actually..... do it in tailwind with group. yowza

* undo spurious changes to checksums in package-lock.json

---------

Co-authored-by: David Crespo <david.crespo@oxidecomputer.com>

Author: charliepark

.github/workflows/lintBuildTest.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           cache: 'npm'
       - name: Cache node_modules
         uses: actions/cache@v4

app/components/AttachEphemeralIpModal.tsx

@@ -11,6 +11,7 @@ import { useForm } from 'react-hook-form'
 
 import { useApiMutation, useApiQueryClient, usePrefetchedApiQuery } from '~/api'
 import { ListboxField } from '~/components/form/fields/ListboxField'
+import { HL } from '~/components/HL'
 import { useInstanceSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Modal } from '~/ui/lib/Modal'
@@ -29,9 +30,9 @@ export const AttachEphemeralIpModal = ({ onDismiss }: { onDismiss: () => void })
     [siloPools]
   )
   const instanceEphemeralIpAttach = useApiMutation('instanceEphemeralIpAttach', {
-    onSuccess() {
+    onSuccess(ephemeralIp) {
       queryClient.invalidateQueries('instanceExternalIpList')
-      addToast({ content: 'Your ephemeral IP has been attached' })
+      addToast(<>IP <HL>{ephemeralIp.ip}</HL> attached</>) // prettier-ignore
       onDismiss()
     },
     onError: (err) => {

app/components/AttachFloatingIpModal.tsx

@@ -10,6 +10,7 @@ import { useForm } from 'react-hook-form'
 
 import { useApiMutation, useApiQueryClient, type FloatingIp, type Instance } from '~/api'
 import { ListboxField } from '~/components/form/fields/ListboxField'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
@@ -45,10 +46,10 @@ export const AttachFloatingIpModal = ({
 }) => {
   const queryClient = useApiQueryClient()
   const floatingIpAttach = useApiMutation('floatingIpAttach', {
-    onSuccess() {
+    onSuccess(floatingIp) {
       queryClient.invalidateQueries('floatingIpList')
       queryClient.invalidateQueries('instanceExternalIpList')
-      addToast({ content: 'Your floating IP has been attached' })
+      addToast(<>IP <HL>{floatingIp.name}</HL> attached</>) // prettier-ignore
       onDismiss()
     },
     onError: (err) => {

app/components/HL.tsx

@@ -7,4 +7,11 @@
  */
 import { classed } from '~/util/classed'
 
-export const HL = classed.span`text-sans-semi-md text-default`
+// note parent with secondary text color must have 'group' on it for
+// this to work. see Toast for an example
+export const HL = classed.span`
+  text-sans-md text-default 
+  group-[.text-accent-secondary]:text-accent
+  group-[.text-error-secondary]:text-error
+  group-[.text-info-secondary]:text-info
+`

app/components/ToastStack.tsx

@@ -22,7 +22,10 @@ export function ToastStack() {
   })
 
   return (
-    <div className="pointer-events-auto fixed bottom-4 left-4 z-toast flex flex-col items-end space-y-2">
+    <div
+      className="pointer-events-auto fixed bottom-4 left-4 z-toast flex flex-col items-end space-y-2"
+      data-testid="Toasts"
+    >
       {transition((style, item) => (
         <animated.div
           style={{

app/forms/disk-create.tsx

@@ -28,6 +28,7 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { RadioField } from '~/components/form/fields/RadioField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
@@ -76,7 +77,7 @@ export function CreateDiskSideModalForm({
   const createDisk = useApiMutation('diskCreate', {
     onSuccess(data) {
       queryClient.invalidateQueries('diskList')
-      addToast({ content: 'Your disk has been created' })
+      addToast(<>Disk <HL>{data.name}</HL> created</>) // prettier-ignore
       onSuccess?.(data)
       onDismiss(navigate)
     },

app/forms/firewall-rules-create.tsx

@@ -18,6 +18,7 @@ import {
 } from '@oxide/api'
 
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { ALL_ISH } from '~/util/consts'
@@ -74,9 +75,10 @@ export function CreateFirewallRuleForm() {
   const onDismiss = () => navigate(pb.vpcFirewallRules(vpcSelector))
 
   const updateRules = useApiMutation('vpcFirewallRulesUpdate', {
-    onSuccess() {
+    onSuccess(updatedRules) {
+      const newRule = updatedRules.rules[updatedRules.rules.length - 1]
       queryClient.invalidateQueries('vpcFirewallRulesView')
-      addToast({ content: 'Your firewall rule has been created' })
+      addToast(<>Firewall rule <HL>{newRule.name}</HL> created</>) // prettier-ignore
       navigate(pb.vpcFirewallRules(vpcSelector))
     },
   })

app/forms/firewall-rules-edit.tsx

@@ -18,11 +18,13 @@ import {
 
 import { trigger404 } from '~/components/ErrorBoundary'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import {
   getFirewallRuleSelector,
   useFirewallRuleSelector,
   useVpcSelector,
 } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
 import { ALL_ISH } from '~/util/consts'
 import { invariant } from '~/util/invariant'
 import { pb } from '~/util/path-builder'
@@ -64,13 +66,15 @@ export function EditFirewallRuleForm() {
   const onDismiss = () => navigate(pb.vpcFirewallRules(vpcSelector))
 
   const updateRules = useApiMutation('vpcFirewallRulesUpdate', {
-    onSuccess() {
+    onSuccess(updatedRules, { body }) {
       // Nav before the invalidate because I once saw the above invariant fail
       // briefly after successful edit (error page flashed but then we land
       // on the rules list ok) and I think it was a race condition where the
       // invalidate managed to complete while the modal was still open.
       onDismiss()
       queryClient.invalidateQueries('vpcFirewallRulesView')
+      const updatedRule = body.rules[body.rules.length - 1]
+      addToast(<>Firewall rule <HL>{updatedRule.name}</HL> updated</>) // prettier-ignore
     },
   })
 

app/forms/floating-ip-create.tsx

@@ -23,6 +23,7 @@ import { toIpPoolItem } from '~/components/form/fields/ip-pool-item'
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
@@ -45,10 +46,10 @@ export function CreateFloatingIpSideModalForm() {
   const navigate = useNavigate()
 
   const createFloatingIp = useApiMutation('floatingIpCreate', {
-    onSuccess() {
+    onSuccess(floatingIp) {
       queryClient.invalidateQueries('floatingIpList')
       queryClient.invalidateQueries('ipPoolUtilizationView')
-      addToast({ content: 'Your Floating IP has been created' })
+      addToast(<>Floating IP <HL>{floatingIp.name}</HL> created</>) // prettier-ignore
       navigate(pb.floatingIps(projectSelector))
     },
   })

app/forms/floating-ip-edit.tsx

@@ -18,6 +18,7 @@ import {
 import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from 'app/util/path-builder'
@@ -47,7 +48,7 @@ export function EditFloatingIpSideModalForm() {
   const editFloatingIp = useApiMutation('floatingIpUpdate', {
     onSuccess(_floatingIp) {
       queryClient.invalidateQueries('floatingIpList')
-      addToast({ content: 'Your floating IP has been updated' })
+      addToast(<>Floating IP <HL>{_floatingIp.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })