From a3d736b04977c43a6d673e3ae4977e6a606cff71 Mon Sep 17 00:00:00 2001 From: Charlie Park Date: Tue, 29 Oct 2024 15:58:47 -0500 Subject: [PATCH] eliminate HLs by using CSS instead --- app/components/AttachEphemeralIpModal.tsx | 4 ++-- app/components/AttachFloatingIpModal.tsx | 4 ++-- app/components/HL.tsx | 12 ++---------- app/forms/disk-create.tsx | 4 ++-- app/forms/firewall-rules-create.tsx | 4 ++-- app/forms/firewall-rules-edit.tsx | 4 ++-- app/forms/floating-ip-create.tsx | 4 ++-- app/forms/floating-ip-edit.tsx | 4 ++-- app/forms/idp/create.tsx | 4 ++-- app/forms/image-from-snapshot.tsx | 4 ++-- app/forms/instance-create.tsx | 4 ++-- app/forms/ip-pool-create.tsx | 4 ++-- app/forms/ip-pool-edit.tsx | 4 ++-- app/forms/network-interface-edit.tsx | 4 ++-- app/forms/project-create.tsx | 4 ++-- app/forms/project-edit.tsx | 4 ++-- app/forms/silo-create.tsx | 4 ++-- app/forms/snapshot-create.tsx | 4 ++-- app/forms/ssh-key-create.tsx | 4 ++-- app/forms/subnet-create.tsx | 4 ++-- app/forms/subnet-edit.tsx | 4 ++-- app/forms/vpc-create.tsx | 4 ++-- app/forms/vpc-edit.tsx | 4 ++-- app/forms/vpc-router-create.tsx | 4 ++-- app/forms/vpc-router-edit.tsx | 4 ++-- app/forms/vpc-router-route-create.tsx | 4 ++-- app/forms/vpc-router-route-edit.tsx | 4 ++-- app/pages/project/disks/DisksPage.tsx | 8 ++++---- .../project/floating-ips/FloatingIpsPage.tsx | 8 ++++---- app/pages/project/images/ImagesPage.tsx | 6 +++--- app/pages/project/instances/actions.tsx | 10 +++++----- .../instances/instance/tabs/NetworkingTab.tsx | 6 +++--- .../instances/instance/tabs/StorageTab.tsx | 6 +++--- app/pages/project/vpcs/VpcPage/VpcPage.tsx | 4 ++-- .../project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx | 4 ++-- app/pages/project/vpcs/VpcsPage.tsx | 4 ++-- app/pages/settings/SSHKeysPage.tsx | 4 ++-- app/pages/system/SiloImagesPage.tsx | 8 ++++---- app/pages/system/networking/IpPoolPage.tsx | 4 ++-- app/pages/system/networking/IpPoolsPage.tsx | 4 ++-- app/pages/system/silos/SilosPage.tsx | 4 ++-- app/ui/styles/components/highlight.css | 17 +++++++++++++++++ app/ui/styles/index.css | 1 + package-lock.json | 10 +++++----- 44 files changed, 117 insertions(+), 107 deletions(-) create mode 100644 app/ui/styles/components/highlight.css diff --git a/app/components/AttachEphemeralIpModal.tsx b/app/components/AttachEphemeralIpModal.tsx index 73b671f7cb..25177c0dde 100644 --- a/app/components/AttachEphemeralIpModal.tsx +++ b/app/components/AttachEphemeralIpModal.tsx @@ -11,7 +11,7 @@ import { useForm } from 'react-hook-form' import { useApiMutation, useApiQueryClient, usePrefetchedApiQuery } from '~/api' import { ListboxField } from '~/components/form/fields/ListboxField' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useInstanceSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { Modal } from '~/ui/lib/Modal' @@ -32,7 +32,7 @@ export const AttachEphemeralIpModal = ({ onDismiss }: { onDismiss: () => void }) const instanceEphemeralIpAttach = useApiMutation('instanceEphemeralIpAttach', { onSuccess(ephemeralIp) { queryClient.invalidateQueries('instanceExternalIpList') - addToast(<>IP {ephemeralIp.ip} attached) // prettier-ignore + addToast(<>IP {ephemeralIp.ip} attached) // prettier-ignore onDismiss() }, onError: (err) => { diff --git a/app/components/AttachFloatingIpModal.tsx b/app/components/AttachFloatingIpModal.tsx index e8baa92b7c..cc351bde18 100644 --- a/app/components/AttachFloatingIpModal.tsx +++ b/app/components/AttachFloatingIpModal.tsx @@ -10,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { addToast } from '~/stores/toast' import { Message } from '~/ui/lib/Message' import { Modal } from '~/ui/lib/Modal' @@ -49,7 +49,7 @@ export const AttachFloatingIpModal = ({ onSuccess(floatingIp) { queryClient.invalidateQueries('floatingIpList') queryClient.invalidateQueries('instanceExternalIpList') - addToast(<>IP {floatingIp.name} attached) // prettier-ignore + addToast(<>IP {floatingIp.name} attached) // prettier-ignore onDismiss() }, onError: (err) => { diff --git a/app/components/HL.tsx b/app/components/HL.tsx index 9af02404dc..da6659356d 100644 --- a/app/components/HL.tsx +++ b/app/components/HL.tsx @@ -7,13 +7,5 @@ */ import { classed } from '~/util/classed' -export const HL = classed.span`text-sans-md text-default` - -/** HL with "success"-colored text */ -export const HLs = classed.span`text-sans-md text-accent children:text-accent` - -// HL with "error"-colored text -export const HLe = classed.span`text-sans-md text-error children:text-error` - -// HL with "info"-colored text -export const HLi = classed.span`text-sans-md text-notice children:text-notice` +// ox-highlight needed for CSS ensuring the HL color matches the container +export const HL = classed.span`ox-highlight text-sans-md text-default` diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx index 12990cfb50..593056f4df 100644 --- a/app/forms/disk-create.tsx +++ b/app/forms/disk-create.tsx @@ -28,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useProjectSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { FormDivider } from '~/ui/lib/Divider' @@ -77,7 +77,7 @@ export function CreateDiskSideModalForm({ const createDisk = useApiMutation('diskCreate', { onSuccess(data) { queryClient.invalidateQueries('diskList') - addToast(<>Disk {data.name} created) // prettier-ignore + addToast(<>Disk {data.name} created) // prettier-ignore onSuccess?.(data) onDismiss(navigate) }, diff --git a/app/forms/firewall-rules-create.tsx b/app/forms/firewall-rules-create.tsx index 255645f2be..35aee97230 100644 --- a/app/forms/firewall-rules-create.tsx +++ b/app/forms/firewall-rules-create.tsx @@ -18,7 +18,7 @@ import { } from '@oxide/api' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getVpcSelector, useVpcSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { ALL_ISH } from '~/util/consts' @@ -78,7 +78,7 @@ export function CreateFirewallRuleForm() { onSuccess(updatedRules) { const newRule = updatedRules.rules[updatedRules.rules.length - 1] queryClient.invalidateQueries('vpcFirewallRulesView') - addToast(<>Firewall rule {newRule.name} created) // prettier-ignore + addToast(<>Firewall rule {newRule.name} created) // prettier-ignore navigate(pb.vpcFirewallRules(vpcSelector)) }, }) diff --git a/app/forms/firewall-rules-edit.tsx b/app/forms/firewall-rules-edit.tsx index afc7ae2a9b..bbea4f975e 100644 --- a/app/forms/firewall-rules-edit.tsx +++ b/app/forms/firewall-rules-edit.tsx @@ -18,7 +18,7 @@ import { import { trigger404 } from '~/components/ErrorBoundary' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getFirewallRuleSelector, useFirewallRuleSelector, @@ -74,7 +74,7 @@ export function EditFirewallRuleForm() { onDismiss() queryClient.invalidateQueries('vpcFirewallRulesView') const updatedRule = body.rules[body.rules.length - 1] - addToast(<>Firewall rule {updatedRule.name} updated) // prettier-ignore + addToast(<>Firewall rule {updatedRule.name} updated) // prettier-ignore }, }) diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx index 880189c8ba..cab5b694e6 100644 --- a/app/forms/floating-ip-create.tsx +++ b/app/forms/floating-ip-create.tsx @@ -23,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useProjectSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { Message } from '~/ui/lib/Message' @@ -49,7 +49,7 @@ export function CreateFloatingIpSideModalForm() { onSuccess(floatingIp) { queryClient.invalidateQueries('floatingIpList') queryClient.invalidateQueries('ipPoolUtilizationView') - addToast(<>Floating IP {floatingIp.name} created) // prettier-ignore + addToast(<>Floating IP {floatingIp.name} created) // prettier-ignore navigate(pb.floatingIps(projectSelector)) }, }) diff --git a/app/forms/floating-ip-edit.tsx b/app/forms/floating-ip-edit.tsx index 1e03e79721..26fe356f92 100644 --- a/app/forms/floating-ip-edit.tsx +++ b/app/forms/floating-ip-edit.tsx @@ -18,7 +18,7 @@ import { import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from 'app/util/path-builder' @@ -48,7 +48,7 @@ export function EditFloatingIpSideModalForm() { const editFloatingIp = useApiMutation('floatingIpUpdate', { onSuccess(_floatingIp) { queryClient.invalidateQueries('floatingIpList') - addToast(<>Floating IP {_floatingIp.name} updated) // prettier-ignore + addToast(<>Floating IP {_floatingIp.name} updated) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx index 7eeada64be..42004e88e1 100644 --- a/app/forms/idp/create.tsx +++ b/app/forms/idp/create.tsx @@ -15,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useSiloSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { readBlobAsBase64 } from '~/util/file' @@ -54,7 +54,7 @@ export function CreateIdpSideModalForm() { const createIdp = useApiMutation('samlIdentityProviderCreate', { onSuccess(idp) { queryClient.invalidateQueries('siloIdentityProviderList') - addToast(<>IdP {idp.name} created) // prettier-ignore + addToast(<>IdP {idp.name} created) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/image-from-snapshot.tsx b/app/forms/image-from-snapshot.tsx index adfd2d3f5c..c6a9ac1e20 100644 --- a/app/forms/image-from-snapshot.tsx +++ b/app/forms/image-from-snapshot.tsx @@ -21,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { PropertiesTable } from '~/ui/lib/PropertiesTable' @@ -57,7 +57,7 @@ export function CreateImageFromSnapshotSideModalForm() { const createImage = useApiMutation('imageCreate', { onSuccess(image) { queryClient.invalidateQueries('imageList') - addToast(<>Image {image.name} created) // prettier-ignore + addToast(<>Image {image.name} created) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx index 7e3568492b..8350ccf20a 100644 --- a/app/forms/instance-create.tsx +++ b/app/forms/instance-create.tsx @@ -56,7 +56,7 @@ import { SshKeysField } from '~/components/form/fields/SshKeysField' import { TextField } from '~/components/form/fields/TextField' import { Form } from '~/components/form/Form' import { FullPageForm } from '~/components/form/FullPageForm' -import { HL, HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { Button } from '~/ui/lib/Button' @@ -184,7 +184,7 @@ export function CreateInstanceForm() { { path: { instance: instance.name }, query: { project } }, instance ) - addToast(<>Instance {instance.name} created) // prettier-ignore + addToast(<>Instance {instance.name} created) // prettier-ignore navigate(pb.instance({ project, instance: instance.name })) }, }) diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx index cc443ce406..8afa803e9e 100644 --- a/app/forms/ip-pool-create.tsx +++ b/app/forms/ip-pool-create.tsx @@ -13,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { addToast } from '~/stores/toast' import { Message } from '~/ui/lib/Message' import { pb } from '~/util/path-builder' @@ -32,7 +32,7 @@ export function CreateIpPoolSideModalForm() { const createPool = useApiMutation('ipPoolCreate', { onSuccess(_pool) { queryClient.invalidateQueries('ipPoolList') - addToast(<>IP pool {_pool.name} created) // prettier-ignore + addToast(<>IP pool {_pool.name} created) // prettier-ignore navigate(pb.ipPools()) }, }) diff --git a/app/forms/ip-pool-edit.tsx b/app/forms/ip-pool-edit.tsx index d14d5db125..cbd0b7db7d 100644 --- a/app/forms/ip-pool-edit.tsx +++ b/app/forms/ip-pool-edit.tsx @@ -18,7 +18,7 @@ import { import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -44,7 +44,7 @@ export function EditIpPoolSideModalForm() { onSuccess(updatedPool) { queryClient.invalidateQueries('ipPoolList') navigate(pb.ipPool({ pool: updatedPool.name })) - addToast(<>IP pool {updatedPool.name} updated) // prettier-ignore + addToast(<>IP pool {updatedPool.name} 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 diff --git a/app/forms/network-interface-edit.tsx b/app/forms/network-interface-edit.tsx index d975888439..401403f900 100644 --- a/app/forms/network-interface-edit.tsx +++ b/app/forms/network-interface-edit.tsx @@ -20,7 +20,7 @@ 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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useInstanceSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { FormDivider } from '~/ui/lib/Divider' @@ -46,7 +46,7 @@ export function EditNetworkInterfaceForm({ const editNetworkInterface = useApiMutation('instanceNetworkInterfaceUpdate', { onSuccess(nic) { queryClient.invalidateQueries('instanceNetworkInterfaceList') - addToast(<>Network interface {nic.name} updated) // prettier-ignore + addToast(<>Network interface {nic.name} updated) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/project-create.tsx b/app/forms/project-create.tsx index 2a1c5cd79f..faaee13df7 100644 --- a/app/forms/project-create.tsx +++ b/app/forms/project-create.tsx @@ -13,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -34,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(<>Project {project.name} created) // prettier-ignore + addToast(<>Project {project.name} created) // prettier-ignore navigate(pb.project({ project: project.name })) }, }) diff --git a/app/forms/project-edit.tsx b/app/forms/project-edit.tsx index f962b10e4b..7af23a1723 100644 --- a/app/forms/project-edit.tsx +++ b/app/forms/project-edit.tsx @@ -18,7 +18,7 @@ import { import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -46,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(<>Project {project.name} updated) // prettier-ignore + addToast(<>Project {project.name} updated) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/silo-create.tsx b/app/forms/silo-create.tsx index e83d2639b1..ea6b82651e 100644 --- a/app/forms/silo-create.tsx +++ b/app/forms/silo-create.tsx @@ -19,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { addToast } from '~/stores/toast' import { FormDivider } from '~/ui/lib/Divider' import { FieldLabel } from '~/ui/lib/FieldLabel' @@ -58,7 +58,7 @@ export function CreateSiloSideModalForm() { onSuccess(silo) { queryClient.invalidateQueries('siloList') queryClient.setQueryData('siloView', { path: { silo: silo.name } }, silo) - addToast(<>Silo {silo.name} created) // prettier-ignore + addToast(<>Silo {silo.name} created) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/snapshot-create.tsx b/app/forms/snapshot-create.tsx index 5707de2ad4..25c7f90db8 100644 --- a/app/forms/snapshot-create.tsx +++ b/app/forms/snapshot-create.tsx @@ -22,7 +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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useProjectSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { toComboboxItems } from '~/ui/lib/Combobox' @@ -55,7 +55,7 @@ export function CreateSnapshotSideModalForm() { const createSnapshot = useApiMutation('snapshotCreate', { onSuccess(snapshot) { queryClient.invalidateQueries('snapshotList') - addToast(<>Snapshot {snapshot.name} created) // prettier-ignore + addToast(<>Snapshot {snapshot.name} created) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/ssh-key-create.tsx b/app/forms/ssh-key-create.tsx index 20b3f13896..82ba183e23 100644 --- a/app/forms/ssh-key-create.tsx +++ b/app/forms/ssh-key-create.tsx @@ -14,7 +14,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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -39,7 +39,7 @@ export function CreateSSHKeySideModalForm({ onDismiss, message }: Props) { onSuccess(sshKey) { queryClient.invalidateQueries('currentUserSshKeyList') handleDismiss() - addToast(<>SSH key {sshKey.name} created) // prettier-ignore + addToast(<>SSH key {sshKey.name} created) // prettier-ignore }, }) const form = useForm({ defaultValues }) diff --git a/app/forms/subnet-create.tsx b/app/forms/subnet-create.tsx index c619557474..e2bbb2666a 100644 --- a/app/forms/subnet-create.tsx +++ b/app/forms/subnet-create.tsx @@ -20,7 +20,7 @@ import { useCustomRouterItems, } from '~/components/form/fields/useItemsList' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useVpcSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { FormDivider } from '~/ui/lib/Divider' @@ -47,7 +47,7 @@ export function CreateSubnetForm() { onSuccess(subnet) { queryClient.invalidateQueries('vpcSubnetList') onDismiss() - addToast(<>Subnet {subnet.name} created) // prettier-ignore + addToast(<>Subnet {subnet.name} created) // prettier-ignore }, }) diff --git a/app/forms/subnet-edit.tsx b/app/forms/subnet-edit.tsx index 94d2ac4940..49ab973fbc 100644 --- a/app/forms/subnet-edit.tsx +++ b/app/forms/subnet-edit.tsx @@ -25,7 +25,7 @@ import { useCustomRouterItems, } from '~/components/form/fields/useItemsList' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getVpcSubnetSelector, useVpcSubnetSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { FormDivider } from '~/ui/lib/Divider' @@ -55,7 +55,7 @@ export function EditSubnetForm() { const updateSubnet = useApiMutation('vpcSubnetUpdate', { onSuccess(subnet) { queryClient.invalidateQueries('vpcSubnetList') - addToast(<>Subnet {subnet.name} updated) // prettier-ignore + addToast(<>Subnet {subnet.name} updated) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx index 04a510d622..43f8fa15a1 100644 --- a/app/forms/vpc-create.tsx +++ b/app/forms/vpc-create.tsx @@ -14,7 +14,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 { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useProjectSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -39,7 +39,7 @@ export function CreateVpcSideModalForm() { { path: { vpc: vpc.name }, query: projectSelector }, vpc ) - addToast(<>VPC {vpc.name} created) // prettier-ignore + addToast(<>VPC {vpc.name} created) // prettier-ignore navigate(pb.vpc({ vpc: vpc.name, ...projectSelector })) }, }) diff --git a/app/forms/vpc-edit.tsx b/app/forms/vpc-edit.tsx index dee65bb37b..0982d17f10 100644 --- a/app/forms/vpc-edit.tsx +++ b/app/forms/vpc-edit.tsx @@ -18,7 +18,7 @@ import { import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getVpcSelector, useVpcSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -43,7 +43,7 @@ export function EditVpcSideModalForm() { onSuccess(updatedVpc) { queryClient.invalidateQueries('vpcList') navigate(pb.vpc({ project, vpc: updatedVpc.name })) - addToast(<>VPC {updatedVpc.name} updated) // prettier-ignore + addToast(<>VPC {updatedVpc.name} updated) // prettier-ignore // Only invalidate if we're staying on the same page. If the name // _has_ changed, invalidating vpcView causes an error page to flash diff --git a/app/forms/vpc-router-create.tsx b/app/forms/vpc-router-create.tsx index 05eeda7ba7..3d08d456cc 100644 --- a/app/forms/vpc-router-create.tsx +++ b/app/forms/vpc-router-create.tsx @@ -13,7 +13,7 @@ import { useApiMutation, useApiQueryClient, type VpcRouterCreate } from '@oxide/ import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useVpcSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -33,7 +33,7 @@ export function CreateRouterSideModalForm() { const createRouter = useApiMutation('vpcRouterCreate', { onSuccess(router) { queryClient.invalidateQueries('vpcRouterList') - addToast(<>Router {router.name} created) // prettier-ignore + addToast(<>Router {router.name} created) // prettier-ignore onDismiss() }, }) diff --git a/app/forms/vpc-router-edit.tsx b/app/forms/vpc-router-edit.tsx index 1ee4153c03..134aadcf26 100644 --- a/app/forms/vpc-router-edit.tsx +++ b/app/forms/vpc-router-edit.tsx @@ -23,7 +23,7 @@ import { import { DescriptionField } from '~/components/form/fields/DescriptionField' import { NameField } from '~/components/form/fields/NameField' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' import { pb } from '~/util/path-builder' @@ -54,7 +54,7 @@ export function EditRouterSideModalForm() { const editRouter = useApiMutation('vpcRouterUpdate', { onSuccess(updatedRouter) { queryClient.invalidateQueries('vpcRouterList') - addToast(<>Router {updatedRouter.name} updated) // prettier-ignore + addToast(<>Router {updatedRouter.name} updated) // prettier-ignore navigate(pb.vpcRouters({ project, vpc })) }, }) diff --git a/app/forms/vpc-router-route-create.tsx b/app/forms/vpc-router-route-create.tsx index d4c4d158ac..8030b55dcd 100644 --- a/app/forms/vpc-router-route-create.tsx +++ b/app/forms/vpc-router-route-create.tsx @@ -11,7 +11,7 @@ import { useNavigate, type LoaderFunctionArgs } from 'react-router-dom' import { apiQueryClient, useApiMutation, useApiQueryClient } from '@oxide/api' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { RouteFormFields, type RouteFormValues } from '~/forms/vpc-router-route-common' import { getVpcRouterSelector, useVpcRouterSelector } from '~/hooks/use-params' import { addToast } from '~/stores/toast' @@ -47,7 +47,7 @@ export function CreateRouterRouteSideModalForm() { const createRouterRoute = useApiMutation('vpcRouterRouteCreate', { onSuccess(route) { queryClient.invalidateQueries('vpcRouterRouteList') - addToast(<>Route {route.name} created) // prettier-ignore + addToast(<>Route {route.name} created) // prettier-ignore navigate(pb.vpcRouter(routerSelector)) }, }) diff --git a/app/forms/vpc-router-route-edit.tsx b/app/forms/vpc-router-route-edit.tsx index 5c45b5a56e..da1c06338e 100644 --- a/app/forms/vpc-router-route-edit.tsx +++ b/app/forms/vpc-router-route-edit.tsx @@ -17,7 +17,7 @@ import { } from '@oxide/api' import { SideModalForm } from '~/components/form/SideModalForm' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { RouteFormFields, routeFormMessage, @@ -65,7 +65,7 @@ export function EditRouterRouteSideModalForm() { const updateRouterRoute = useApiMutation('vpcRouterRouteUpdate', { onSuccess(updatedRoute) { queryClient.invalidateQueries('vpcRouterRouteList') - addToast(<>Route {updatedRoute.name} updated) // prettier-ignore + addToast(<>Route {updatedRoute.name} updated) // prettier-ignore navigate(pb.vpcRouter(routerSelector)) }, }) diff --git a/app/pages/project/disks/DisksPage.tsx b/app/pages/project/disks/DisksPage.tsx index 255e5113ef..298e4af5f9 100644 --- a/app/pages/project/disks/DisksPage.tsx +++ b/app/pages/project/disks/DisksPage.tsx @@ -20,7 +20,7 @@ import { import { Storage16Icon, Storage24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { DiskStateBadge } from '~/components/StateBadge' import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' import { confirmDelete } from '~/stores/confirm-delete' @@ -102,14 +102,14 @@ export function DisksPage() { const { mutateAsync: deleteDisk } = useApiMutation('diskDelete', { onSuccess(_data, variables) { queryClient.invalidateQueries('diskList') - addToast(<>Disk {variables.path.disk} deleted) // prettier-ignore + addToast(<>Disk {variables.path.disk} deleted) // prettier-ignore }, }) const { mutate: createSnapshot } = useApiMutation('snapshotCreate', { onSuccess(_data, variables) { queryClient.invalidateQueries('snapshotList') - addToast(<>Snapshot {variables.body.name} created) // prettier-ignore + addToast(<>Snapshot {variables.body.name} created) // prettier-ignore }, onError(err) { addToast({ @@ -125,7 +125,7 @@ export function DisksPage() { { label: 'Snapshot', onActivate() { - addToast(<>Creating snapshot of disk {disk.name}) // prettier-ignore + addToast(<>Creating snapshot of disk {disk.name}) // prettier-ignore createSnapshot({ query: { project }, body: { diff --git a/app/pages/project/floating-ips/FloatingIpsPage.tsx b/app/pages/project/floating-ips/FloatingIpsPage.tsx index 11d54f6607..ae5b95b57c 100644 --- a/app/pages/project/floating-ips/FloatingIpsPage.tsx +++ b/app/pages/project/floating-ips/FloatingIpsPage.tsx @@ -22,7 +22,7 @@ import { IpGlobal16Icon, IpGlobal24Icon } from '@oxide/design-system/icons/react import { DocsPopover } from '~/components/DocsPopover' import { ListboxField } from '~/components/form/fields/ListboxField' -import { HL, HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' import { confirmAction } from '~/stores/confirm-action' import { confirmDelete } from '~/stores/confirm-delete' @@ -110,7 +110,7 @@ export function FloatingIpsPage() { const { mutateAsync: floatingIpDetach } = useApiMutation('floatingIpDetach', { onSuccess(floatingIp) { queryClient.invalidateQueries('floatingIpList') - addToast(<>Floating IP {floatingIp.name} detached) // prettier-ignore + addToast(<>Floating IP {floatingIp.name} detached) // prettier-ignore }, onError: (err) => { addToast({ title: 'Error', content: err.message, variant: 'error' }) @@ -120,7 +120,7 @@ export function FloatingIpsPage() { onSuccess(_data, variables) { queryClient.invalidateQueries('floatingIpList') queryClient.invalidateQueries('ipPoolUtilizationView') - addToast(<>Floating IP {variables.path.floatingIp} deleted) // prettier-ignore + addToast(<>Floating IP {variables.path.floatingIp} deleted) // prettier-ignore }, }) @@ -252,7 +252,7 @@ const AttachFloatingIpModal = ({ const floatingIpAttach = useApiMutation('floatingIpAttach', { onSuccess(floatingIp) { queryClient.invalidateQueries('floatingIpList') - addToast(<>Floating IP {floatingIp.name} attached) // prettier-ignore + addToast(<>Floating IP {floatingIp.name} attached) // prettier-ignore onDismiss() }, onError: (err) => { diff --git a/app/pages/project/images/ImagesPage.tsx b/app/pages/project/images/ImagesPage.tsx index c0e2792a09..cf5c43dee2 100644 --- a/app/pages/project/images/ImagesPage.tsx +++ b/app/pages/project/images/ImagesPage.tsx @@ -13,7 +13,7 @@ import { apiQueryClient, useApiMutation, useApiQueryClient, type Image } from '@ import { Images16Icon, Images24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' import { confirmDelete } from '~/stores/confirm-delete' import { addToast } from '~/stores/toast' @@ -59,7 +59,7 @@ export function ImagesPage() { const { mutateAsync: deleteImage } = useApiMutation('imageDelete', { onSuccess(_data, variables) { - addToast(<>Image {variables.path.image} deleted) // prettier-ignore + addToast(<>Image {variables.path.image} deleted) // prettier-ignore queryClient.invalidateQueries('imageList') }, }) @@ -134,7 +134,7 @@ const PromoteImageModal = ({ onDismiss, imageName }: PromoteModalProps) => { addToast({ content: ( <> - Image {data.name} promoted + Image {data.name} promoted ), cta: { diff --git a/app/pages/project/instances/actions.tsx b/app/pages/project/instances/actions.tsx index 1599db22bf..b18886dd9a 100644 --- a/app/pages/project/instances/actions.tsx +++ b/app/pages/project/instances/actions.tsx @@ -10,7 +10,7 @@ import { useNavigate } from 'react-router-dom' import { instanceCan, useApiMutation, type Instance } from '@oxide/api' -import { HL, HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { confirmAction } from '~/stores/confirm-action' import { confirmDelete } from '~/stores/confirm-delete' import { addToast } from '~/stores/toast' @@ -58,7 +58,7 @@ export const useMakeInstanceActions = ( label: 'Start', onActivate() { startInstance(instanceParams, { - onSuccess: () => addToast(<>Starting instance {instance.name}), // prettier-ignore + onSuccess: () => addToast(<>Starting instance {instance.name}), // prettier-ignore onError: (error) => addToast({ variant: 'error', @@ -79,7 +79,7 @@ export const useMakeInstanceActions = ( doAction: () => stopInstanceAsync(instanceParams, { onSuccess: () => - addToast(<>Stopping instance {instance.name}), // prettier-ignore + addToast(<>Stopping instance {instance.name}), // prettier-ignore }), modalTitle: 'Confirm stop instance', modalContent: ( @@ -105,7 +105,7 @@ export const useMakeInstanceActions = ( onActivate() { rebootInstance(instanceParams, { onSuccess: () => - addToast(<>Rebooting instance {instance.name}), // prettier-ignore + addToast(<>Rebooting instance {instance.name}), // prettier-ignore onError: (error) => addToast({ variant: 'error', @@ -130,7 +130,7 @@ export const useMakeInstanceActions = ( doDelete: () => deleteInstanceAsync(instanceParams, { onSuccess: () => - addToast(<>Deleting instance {instance.name}), // prettier-ignore + addToast(<>Deleting instance {instance.name}), // prettier-ignore }), label: instance.name, resourceKind: 'instance', diff --git a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx index e8da450771..d1d8c11431 100644 --- a/app/pages/project/instances/instance/tabs/NetworkingTab.tsx +++ b/app/pages/project/instances/instance/tabs/NetworkingTab.tsx @@ -24,7 +24,7 @@ import { IpGlobal24Icon, Networking24Icon } from '@oxide/design-system/icons/rea import { AttachEphemeralIpModal } from '~/components/AttachEphemeralIpModal' import { AttachFloatingIpModal } from '~/components/AttachFloatingIpModal' -import { HL, HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { ListPlusCell } from '~/components/ListPlusCell' import { CreateNetworkInterfaceForm } from '~/forms/network-interface-create' import { EditNetworkInterfaceForm } from '~/forms/network-interface-edit' @@ -204,7 +204,7 @@ export function NetworkingTab() { const { mutateAsync: deleteNic } = useApiMutation('instanceNetworkInterfaceDelete', { onSuccess(_data, variables) { queryClient.invalidateQueries('instanceNetworkInterfaceList') - addToast(<>Network interface {variables.path.interface} deleted) // prettier-ignore + addToast(<>Network interface {variables.path.interface} deleted) // prettier-ignore }, }) const { mutate: editNic } = useApiMutation('instanceNetworkInterfaceUpdate', { @@ -308,7 +308,7 @@ export function NetworkingTab() { onSuccess(_data, variables) { queryClient.invalidateQueries('floatingIpList') queryClient.invalidateQueries('instanceExternalIpList') - addToast(<>Floating IP {variables.path.floatingIp} detached) // prettier-ignore + addToast(<>Floating IP {variables.path.floatingIp} detached) // prettier-ignore }, onError: (err) => { addToast({ title: 'Error', content: err.message, variant: 'error' }) diff --git a/app/pages/project/instances/instance/tabs/StorageTab.tsx b/app/pages/project/instances/instance/tabs/StorageTab.tsx index 32bd1c84c7..2b7c24d126 100644 --- a/app/pages/project/instances/instance/tabs/StorageTab.tsx +++ b/app/pages/project/instances/instance/tabs/StorageTab.tsx @@ -23,7 +23,7 @@ import { } from '@oxide/api' import { Storage24Icon } from '@oxide/design-system/icons/react' -import { HL, HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { DiskStateBadge } from '~/components/StateBadge' import { AttachDiskSideModalForm } from '~/forms/disk-attach' import { CreateDiskSideModalForm } from '~/forms/disk-create' @@ -89,7 +89,7 @@ export function StorageTab() { const { mutate: detachDisk } = useApiMutation('instanceDiskDetach', { onSuccess(disk) { queryClient.invalidateQueries('instanceDiskList') - addToast(<>Disk {disk.name} detached) // prettier-ignore + addToast(<>Disk {disk.name} detached) // prettier-ignore }, onError(err) { addToast({ @@ -102,7 +102,7 @@ export function StorageTab() { const { mutate: createSnapshot } = useApiMutation('snapshotCreate', { onSuccess(snapshot) { queryClient.invalidateQueries('snapshotList') - addToast(<>Snapshot {snapshot.name} created) // prettier-ignore + addToast(<>Snapshot {snapshot.name} created) // prettier-ignore }, onError(err) { addToast({ diff --git a/app/pages/project/vpcs/VpcPage/VpcPage.tsx b/app/pages/project/vpcs/VpcPage/VpcPage.tsx index cbf7b1f0d5..97adda95eb 100644 --- a/app/pages/project/vpcs/VpcPage/VpcPage.tsx +++ b/app/pages/project/vpcs/VpcPage/VpcPage.tsx @@ -16,7 +16,7 @@ import { } from '@oxide/api' import { Networking24Icon } from '@oxide/design-system/icons/react' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { MoreActionsMenu } from '~/components/MoreActionsMenu' import { RouteTabs, Tab } from '~/components/RouteTabs' import { getVpcSelector, useVpcSelector } from '~/hooks/use-params' @@ -50,7 +50,7 @@ export function VpcPage() { onSuccess(_data, variables) { queryClient.invalidateQueries('vpcList') navigate(pb.vpcs({ project })) - addToast(<>VPC {variables.path.vpc} deleted) // prettier-ignore + addToast(<>VPC {variables.path.vpc} deleted) // prettier-ignore }, }) diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx index 26f26e5ac6..cd411c4c90 100644 --- a/app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx +++ b/app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx @@ -11,7 +11,7 @@ import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom' import { apiQueryClient, useApiMutation, type VpcRouter } from '@oxide/api' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { routeFormMessage } from '~/forms/vpc-router-route-common' import { getVpcSelector, useVpcSelector } from '~/hooks/use-params' import { confirmDelete } from '~/stores/confirm-delete' @@ -65,7 +65,7 @@ export function VpcRoutersTab() { const { mutateAsync: deleteRouter } = useApiMutation('vpcRouterDelete', { onSuccess(_data, variables) { apiQueryClient.invalidateQueries('vpcRouterList') - addToast(<>Router {variables.path.router} deleted) // prettier-ignore + addToast(<>Router {variables.path.router} deleted) // prettier-ignore }, }) diff --git a/app/pages/project/vpcs/VpcsPage.tsx b/app/pages/project/vpcs/VpcsPage.tsx index b9785ccb29..69df4371e3 100644 --- a/app/pages/project/vpcs/VpcsPage.tsx +++ b/app/pages/project/vpcs/VpcsPage.tsx @@ -20,7 +20,7 @@ import { import { Networking16Icon, Networking24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { getProjectSelector, useProjectSelector } from '~/hooks/use-params' import { useQuickActions } from '~/hooks/use-quick-actions' import { confirmDelete } from '~/stores/confirm-delete' @@ -86,7 +86,7 @@ export function VpcsPage() { const { mutateAsync: deleteVpc } = useApiMutation('vpcDelete', { onSuccess(_data, variables) { queryClient.invalidateQueries('vpcList') - addToast(<>VPC {variables.path.vpc} deleted) // prettier-ignore + addToast(<>VPC {variables.path.vpc} deleted) // prettier-ignore }, }) diff --git a/app/pages/settings/SSHKeysPage.tsx b/app/pages/settings/SSHKeysPage.tsx index 4d1d3f421d..3b2fd881c8 100644 --- a/app/pages/settings/SSHKeysPage.tsx +++ b/app/pages/settings/SSHKeysPage.tsx @@ -13,7 +13,7 @@ import { apiQueryClient, useApiMutation, useApiQueryClient, type SshKey } from ' import { Key16Icon, Key24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { confirmDelete } from '~/stores/confirm-delete' import { addToast } from '~/stores/toast' import { useColsWithActions, type MenuAction } from '~/table/columns/action-col' @@ -49,7 +49,7 @@ export function SSHKeysPage() { const { mutateAsync: deleteSshKey } = useApiMutation('currentUserSshKeyDelete', { onSuccess: (_data, variables) => { queryClient.invalidateQueries('currentUserSshKeyList') - addToast(<>SSH key {variables.path.sshKey} deleted) // prettier-ignore + addToast(<>SSH key {variables.path.sshKey} deleted) // prettier-ignore }, }) diff --git a/app/pages/system/SiloImagesPage.tsx b/app/pages/system/SiloImagesPage.tsx index 7a02c28b72..2346153936 100644 --- a/app/pages/system/SiloImagesPage.tsx +++ b/app/pages/system/SiloImagesPage.tsx @@ -23,7 +23,7 @@ import { DocsPopover } from '~/components/DocsPopover' import { ComboboxField } from '~/components/form/fields/ComboboxField' import { toImageComboboxItem } from '~/components/form/fields/ImageSelectField' import { ListboxField } from '~/components/form/fields/ListboxField' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { confirmDelete } from '~/stores/confirm-delete' import { addToast } from '~/stores/toast' import { makeLinkCell } from '~/table/cells/LinkCell' @@ -73,7 +73,7 @@ export function SiloImagesPage() { const queryClient = useApiQueryClient() const { mutateAsync: deleteImage } = useApiMutation('imageDelete', { onSuccess(_data, variables) { - addToast(<>Image {variables.path.image} deleted) // prettier-ignore + addToast(<>Image {variables.path.image} deleted) // prettier-ignore queryClient.invalidateQueries('imageList') }, }) @@ -132,7 +132,7 @@ const PromoteImageModal = ({ onDismiss }: { onDismiss: () => void }) => { const promoteImage = useApiMutation('imagePromote', { onSuccess(data) { - addToast(<>Image {data.name} promoted) // prettier-ignore + addToast(<>Image {data.name} promoted) // prettier-ignore queryClient.invalidateQueries('imageList') }, onError: (err) => { @@ -221,7 +221,7 @@ const DemoteImageModal = ({ addToast({ content: ( <> - Image {data.name} demoted + Image {data.name} demoted ), cta: selectedProject diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx index 70c19aa81c..a5c44487e7 100644 --- a/app/pages/system/networking/IpPoolPage.tsx +++ b/app/pages/system/networking/IpPoolPage.tsx @@ -26,7 +26,7 @@ import { IpGlobal16Icon, IpGlobal24Icon } from '@oxide/design-system/icons/react import { CapacityBar } from '~/components/CapacityBar' import { DocsPopover } from '~/components/DocsPopover' import { ComboboxField } from '~/components/form/fields/ComboboxField' -import { HL, HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { MoreActionsMenu } from '~/components/MoreActionsMenu' import { QueryParamTabs } from '~/components/QueryParamTabs' import { getIpPoolSelector, useIpPoolSelector } from '~/hooks/use-params' @@ -85,7 +85,7 @@ export function IpPoolPage() { onSuccess(_data, variables) { apiQueryClient.invalidateQueries('ipPoolList') navigate(pb.ipPools()) - addToast(<>Pool {variables.path.pool} deleted) // prettier-ignore + addToast(<>Pool {variables.path.pool} deleted) // prettier-ignore }, }) diff --git a/app/pages/system/networking/IpPoolsPage.tsx b/app/pages/system/networking/IpPoolsPage.tsx index 1cbb91ac79..eaa8fcf386 100644 --- a/app/pages/system/networking/IpPoolsPage.tsx +++ b/app/pages/system/networking/IpPoolsPage.tsx @@ -20,7 +20,7 @@ import { import { IpGlobal16Icon, IpGlobal24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { IpUtilCell } from '~/components/IpPoolUtilization' import { useQuickActions } from '~/hooks/use-quick-actions' import { confirmDelete } from '~/stores/confirm-delete' @@ -81,7 +81,7 @@ export function IpPoolsPage() { const { mutateAsync: deletePool } = useApiMutation('ipPoolDelete', { onSuccess(_data, variables) { apiQueryClient.invalidateQueries('ipPoolList') - addToast(<>Pool {variables.path.pool} deleted) // prettier-ignore + addToast(<>Pool {variables.path.pool} deleted) // prettier-ignore }, }) diff --git a/app/pages/system/silos/SilosPage.tsx b/app/pages/system/silos/SilosPage.tsx index ec7f0e473b..7f10b98449 100644 --- a/app/pages/system/silos/SilosPage.tsx +++ b/app/pages/system/silos/SilosPage.tsx @@ -19,7 +19,7 @@ import { import { Cloud16Icon, Cloud24Icon } from '@oxide/design-system/icons/react' import { DocsPopover } from '~/components/DocsPopover' -import { HLs } from '~/components/HL' +import { HL } from '~/components/HL' import { useQuickActions } from '~/hooks/use-quick-actions' import { confirmDelete } from '~/stores/confirm-delete' import { addToast } from '~/stores/toast' @@ -80,7 +80,7 @@ export function SilosPage() { const { mutateAsync: deleteSilo } = useApiMutation('siloDelete', { onSuccess(silo, { path }) { queryClient.invalidateQueries('siloList') - addToast(<>Silo {path.silo} deleted) // prettier-ignore + addToast(<>Silo {path.silo} deleted) // prettier-ignore }, }) diff --git a/app/ui/styles/components/highlight.css b/app/ui/styles/components/highlight.css new file mode 100644 index 0000000000..8991c03d60 --- /dev/null +++ b/app/ui/styles/components/highlight.css @@ -0,0 +1,17 @@ +/* + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, you can obtain one at https://mozilla.org/MPL/2.0/. + * + * Copyright Oxide Computer Company + */ + +.text-accent-secondary .ox-highlight { + @apply text-accent; +} +.text-error-secondary .ox-highlight { + @apply text-error; +} +.text-info-secondary .ox-highlight { + @apply text-info; +} diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css index 5746fa8af6..83cf57071b 100644 --- a/app/ui/styles/index.css +++ b/app/ui/styles/index.css @@ -30,6 +30,7 @@ @import './components/loading-bar.css'; @import './components/Tabs.css'; @import './components/form.css'; +@import './components/highlight.css'; @import './components/login-page.css'; @import './components/mini-table.css'; @import './components/properties-table.css'; diff --git a/package-lock.json b/package-lock.json index 240f30f43f..c5490f12b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6687,7 +6687,7 @@ "node_modules/astring": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz", - "integrity": "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==", + "integrity": "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHLV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==", "dev": true, "license": "MIT", "bin": { @@ -11856,7 +11856,7 @@ "node_modules/is-glob": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", - "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxHLnrwRr4elSSg==", "dev": true, "license": "MIT", "dependencies": { @@ -15382,7 +15382,7 @@ "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIHLLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "dev": true, "license": "MIT", "engines": { @@ -16001,7 +16001,7 @@ "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", - "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==", + "integrity": "sha512-E/ZsdU4HL/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==", "devOptional": true, "license": "MIT" }, @@ -17064,7 +17064,7 @@ "node_modules/saxes": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz", - "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==", + "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLaSSajf35bcYnA==", "devOptional": true, "license": "ISC", "dependencies": {