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 <[email protected]>

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()
     },
   })

app/forms/idp/create.tsx

@@ -15,6 +15,7 @@ import { FileField } from '~/components/form/fields/FileField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { useSiloSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { readBlobAsBase64 } from '~/util/file'
@@ -51,9 +52,9 @@ export function CreateIdpSideModalForm() {
   const onDismiss = () => navigate(pb.silo({ silo }))
 
   const createIdp = useApiMutation('samlIdentityProviderCreate', {
-    onSuccess() {
+    onSuccess(idp) {
       queryClient.invalidateQueries('siloIdentityProviderList')
-      addToast({ content: 'Your identity provider has been created' })
+      addToast(<>IdP <HL>{idp.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/image-from-snapshot.tsx

@@ -21,6 +21,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
@@ -54,9 +55,9 @@ export function CreateImageFromSnapshotSideModalForm() {
   const onDismiss = () => navigate(pb.snapshots({ project }))
 
   const createImage = useApiMutation('imageCreate', {
-    onSuccess() {
+    onSuccess(image) {
       queryClient.invalidateQueries('imageList')
-      addToast({ content: 'Your image has been created' })
+      addToast(<>Image <HL>{image.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/instance-create.tsx

@@ -184,7 +184,7 @@ export function CreateInstanceForm() {
         { path: { instance: instance.name }, query: { project } },
         instance
       )
-      addToast({ content: 'Your instance has been created' })
+      addToast(<>Instance <HL>{instance.name}</HL> created</>) // prettier-ignore
       navigate(pb.instance({ project, instance: instance.name }))
     },
   })

app/forms/ip-pool-create.tsx

@@ -13,6 +13,7 @@ import { useApiMutation, useApiQueryClient, type IpPoolCreate } from '@oxide/api
 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 { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
 import { pb } from '~/util/path-builder'
@@ -31,7 +32,7 @@ export function CreateIpPoolSideModalForm() {
   const createPool = useApiMutation('ipPoolCreate', {
     onSuccess(_pool) {
       queryClient.invalidateQueries('ipPoolList')
-      addToast({ content: 'Your IP pool has been created' })
+      addToast(<>IP pool <HL>{_pool.name}</HL> created</>) // prettier-ignore
       navigate(pb.ipPools())
     },
   })

app/forms/ip-pool-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 { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
@@ -43,7 +44,7 @@ export function EditIpPoolSideModalForm() {
     onSuccess(updatedPool) {
       queryClient.invalidateQueries('ipPoolList')
       navigate(pb.ipPool({ pool: updatedPool.name }))
-      addToast({ content: 'Your IP pool has been updated' })
+      addToast(<>IP pool <HL>{updatedPool.name}</HL> updated</>) // prettier-ignore
 
       // Only invalidate if we're staying on the same page. If the name
       // _has_ changed, invalidating ipPoolView causes an error page to flash

app/forms/network-interface-edit.tsx

@@ -20,7 +20,9 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextFieldInner } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { useInstanceSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import * as MiniTable from '~/ui/lib/MiniTable'
@@ -42,8 +44,9 @@ export function EditNetworkInterfaceForm({
   const instanceSelector = useInstanceSelector()
 
   const editNetworkInterface = useApiMutation('instanceNetworkInterfaceUpdate', {
-    onSuccess() {
+    onSuccess(nic) {
       queryClient.invalidateQueries('instanceNetworkInterfaceList')
+      addToast(<>Network interface <HL>{nic.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/project-access.tsx

@@ -17,6 +17,7 @@ import {
 import { ListboxField } from '~/components/form/fields/ListboxField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { useProjectSelector } from '~/hooks/use-params'
+import { addToast } from '~/stores/toast'
 
 import {
   actorToItem,
@@ -35,6 +36,8 @@ export function ProjectAccessAddUserSideModal({ onDismiss, policy }: AddRoleModa
   const updatePolicy = useApiMutation('projectPolicyUpdate', {
     onSuccess: () => {
       queryClient.invalidateQueries('projectPolicyView')
+      // We don't have the name of the user or group, so we'll just have a generic message
+      addToast({ content: 'Role assigned' })
       onDismiss()
     },
   })
@@ -97,6 +100,7 @@ export function ProjectAccessEditUserSideModal({
   const updatePolicy = useApiMutation('projectPolicyUpdate', {
     onSuccess: () => {
       queryClient.invalidateQueries('projectPolicyView')
+      addToast({ content: 'Role updated' })
       onDismiss()
     },
   })

app/forms/project-create.tsx

@@ -13,6 +13,7 @@ import { useApiMutation, useApiQueryClient, type ProjectCreate } from '@oxide/ap
 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 { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
 
@@ -33,7 +34,7 @@ export function CreateProjectSideModalForm() {
       queryClient.invalidateQueries('projectList')
       // avoid the project fetch when the project page loads since we have the data
       queryClient.setQueryData('projectView', { path: { project: project.name } }, project)
-      addToast({ content: 'Your project has been created' })
+      addToast(<>Project <HL>{project.name}</HL> created</>) // prettier-ignore
       navigate(pb.project({ project: project.name }))
     },
   })

app/forms/project-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 { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { pb } from '~/util/path-builder'
@@ -45,7 +46,7 @@ export function EditProjectSideModalForm() {
       queryClient.invalidateQueries('projectList')
       // avoid the project fetch when the project page loads since we have the data
       queryClient.setQueryData('projectView', { path: { project: project.name } }, project)
-      addToast({ content: 'Your project has been updated' })
+      addToast(<>Project <HL>{project.name}</HL> updated</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/silo-create.tsx

@@ -19,6 +19,7 @@ import { RadioField } from '~/components/form/fields/RadioField'
 import { TextField } from '~/components/form/fields/TextField'
 import { TlsCertsField } from '~/components/form/fields/TlsCertsField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { HL } from '~/components/HL'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
@@ -57,7 +58,7 @@ export function CreateSiloSideModalForm() {
     onSuccess(silo) {
       queryClient.invalidateQueries('siloList')
       queryClient.setQueryData('siloView', { path: { silo: silo.name } }, silo)
-      addToast({ content: 'Your silo has been created' })
+      addToast(<>Silo <HL>{silo.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })

app/forms/snapshot-create.tsx

@@ -22,6 +22,7 @@ import { ComboboxField } from '~/components/form/fields/ComboboxField'
 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 { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { toComboboxItems } from '~/ui/lib/Combobox'
@@ -52,9 +53,9 @@ export function CreateSnapshotSideModalForm() {
   const onDismiss = () => navigate(pb.snapshots(projectSelector))
 
   const createSnapshot = useApiMutation('snapshotCreate', {
-    onSuccess() {
+    onSuccess(snapshot) {
       queryClient.invalidateQueries('snapshotList')
-      addToast({ content: 'Your snapshot has been created' })
+      addToast(<>Snapshot <HL>{snapshot.name}</HL> created</>) // prettier-ignore
       onDismiss()
     },
   })