Use renamed functions in place of raw useApiMutation object

app/pages/ProjectsPage.tsx

@@ -66,7 +66,7 @@ export function ProjectsPage() {
     query: { limit: PAGE_SIZE },
   })
 
-  const deleteProject = useApiMutation('projectDelete', {
+  const { mutateAsync: deleteProject } = useApiMutation('projectDelete', {
     onSuccess() {
       // TODO: figure out if this is invalidating as expected, can we leave out the query
       // altogether, etc. Look at whether limit param matters.
@@ -92,7 +92,7 @@ export function ProjectsPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () => deleteProject.mutateAsync({ path: { project: project.name } }),
+          doDelete: () => deleteProject({ path: { project: project.name } }),
           label: project.name,
         }),
       },

app/pages/SiloAccessPage.tsx

@@ -103,7 +103,7 @@ export function SiloAccessPage() {
   }, [siloRows])
 
   const queryClient = useApiQueryClient()
-  const updatePolicy = useApiMutation('policyUpdate', {
+  const { mutateAsync: updatePolicy } = useApiMutation('policyUpdate', {
     onSuccess: () => queryClient.invalidateQueries('policyView'),
     // TODO: handle 403
   })
@@ -137,7 +137,7 @@ export function SiloAccessPage() {
           label: 'Delete',
           onActivate: confirmDelete({
             doDelete: () =>
-              updatePolicy.mutateAsync({
+              updatePolicy({
                 // we know policy is there, otherwise there's no row to display
                 body: deleteRole(row.id, siloPolicy),
               }),

app/pages/project/access/ProjectAccessPage.tsx

@@ -118,7 +118,7 @@ export function ProjectAccessPage() {
   }, [siloRows, projectRows])
 
   const queryClient = useApiQueryClient()
-  const updatePolicy = useApiMutation('projectPolicyUpdate', {
+  const { mutateAsync: updatePolicy } = useApiMutation('projectPolicyUpdate', {
     onSuccess: () => queryClient.invalidateQueries('projectPolicyView'),
     // TODO: handle 403
   })
@@ -167,7 +167,7 @@ export function ProjectAccessPage() {
           label: 'Delete',
           onActivate: confirmDelete({
             doDelete: () =>
-              updatePolicy.mutateAsync({
+              updatePolicy({
                 path: { project },
                 // we know policy is there, otherwise there's no row to display
                 body: deleteRole(row.id, projectPolicy),

app/pages/project/disks/DisksPage.tsx

@@ -98,7 +98,7 @@ export function DisksPage() {
   const { project } = useProjectSelector()
   const { Table } = useQueryTable('diskList', { query: { project } })
 
-  const deleteDisk = useApiMutation('diskDelete', {
+  const { mutateAsync: deleteDisk } = useApiMutation('diskDelete', {
     onSuccess() {
       queryClient.invalidateQueries('diskList')
     },
@@ -142,8 +142,7 @@ export function DisksPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () =>
-            deleteDisk.mutateAsync({ path: { disk: disk.name }, query: { project } }),
+          doDelete: () => deleteDisk({ path: { disk: disk.name }, query: { project } }),
           label: disk.name,
         }),
         disabled:

app/pages/project/floating-ips/FloatingIpsPage.tsx

@@ -115,7 +115,7 @@ export function FloatingIpsPage() {
   })
   const navigate = useNavigate()
 
-  const floatingIpDetach = useApiMutation('floatingIpDetach', {
+  const { mutateAsync: floatingIpDetach } = useApiMutation('floatingIpDetach', {
     onSuccess() {
       queryClient.invalidateQueries('floatingIpList')
       addToast({ content: 'Your floating IP has been detached' })
@@ -124,7 +124,7 @@ export function FloatingIpsPage() {
       addToast({ title: 'Error', content: err.message, variant: 'error' })
     },
   })
-  const deleteFloatingIp = useApiMutation('floatingIpDelete', {
+  const { mutateAsync: deleteFloatingIp } = useApiMutation('floatingIpDelete', {
     onSuccess() {
       queryClient.invalidateQueries('floatingIpList')
       queryClient.invalidateQueries('ipPoolUtilizationView')
@@ -153,7 +153,7 @@ export function FloatingIpsPage() {
               confirmAction({
                 actionType: 'danger',
                 doAction: () =>
-                  floatingIpDetach.mutateAsync({
+                  floatingIpDetach({
                     path: { floatingIp: floatingIp.name },
                     query: { project },
                   }),
@@ -198,7 +198,7 @@ export function FloatingIpsPage() {
             : false,
           onActivate: confirmDelete({
             doDelete: () =>
-              deleteFloatingIp.mutateAsync({
+              deleteFloatingIp({
                 path: { floatingIp: floatingIp.name },
                 query: { project },
               }),

app/pages/project/images/ImagesPage.tsx

@@ -56,7 +56,7 @@ export function ImagesPage() {
 
   const [promoteImageName, setPromoteImageName] = useState<string | null>(null)
 
-  const deleteImage = useApiMutation('imageDelete', {
+  const { mutateAsync: deleteImage } = useApiMutation('imageDelete', {
     onSuccess(_data, variables) {
       addToast({ content: `${variables.path.image} has been deleted` })
       queryClient.invalidateQueries('imageList')
@@ -73,7 +73,7 @@ export function ImagesPage() {
         label: 'Delete',
         onActivate: confirmDelete({
           doDelete: () =>
-            deleteImage.mutateAsync({
+            deleteImage({
               path: { image: image.name },
               query: { project },
             }),

app/pages/project/snapshots/SnapshotsPage.tsx

@@ -103,7 +103,7 @@ export function SnapshotsPage() {
   const { Table } = useQueryTable('snapshotList', { query: { project } })
   const navigate = useNavigate()
 
-  const deleteSnapshot = useApiMutation('snapshotDelete', {
+  const { mutateAsync: deleteSnapshot } = useApiMutation('snapshotDelete', {
     onSuccess() {
       queryClient.invalidateQueries('snapshotList')
     },
@@ -121,7 +121,7 @@ export function SnapshotsPage() {
         label: 'Delete',
         onActivate: confirmDelete({
           doDelete: () =>
-            deleteSnapshot.mutateAsync({
+            deleteSnapshot({
               path: { snapshot: snapshot.name },
               query: { project },
             }),

app/pages/project/vpcs/RouterPage.tsx

@@ -87,7 +87,7 @@ export function RouterPage() {
     query: { project, vpc },
   })
 
-  const deleteRouterRoute = useApiMutation('vpcRouterRouteDelete', {
+  const { mutateAsync: deleteRouterRoute } = useApiMutation('vpcRouterRouteDelete', {
     onSuccess() {
       apiQueryClient.invalidateQueries('vpcRouterRouteList')
       addToast({ content: 'Your route has been deleted' })
@@ -158,8 +158,7 @@ export function RouterPage() {
         className: 'destructive',
         onActivate: () =>
           confirmAction({
-            doAction: () =>
-              deleteRouterRoute.mutateAsync({ path: { route: routerRoute.id } }),
+            doAction: () => deleteRouterRoute({ path: { route: routerRoute.id } }),
             errorTitle: 'Could not remove route',
             modalTitle: 'Confirm remove route',
             modalContent: (

app/pages/project/vpcs/VpcPage/tabs/VpcFirewallRulesTab.tsx

@@ -114,7 +114,7 @@ export function VpcFirewallRulesTab() {
 
   const navigate = useNavigate()
 
-  const updateRules = useApiMutation('vpcFirewallRulesUpdate', {
+  const { mutateAsync: updateRules } = useApiMutation('vpcFirewallRulesUpdate', {
     onSuccess() {
       queryClient.invalidateQueries('vpcFirewallRulesView')
     },
@@ -149,7 +149,7 @@ export function VpcFirewallRulesTab() {
           label: 'Delete',
           onActivate: confirmDelete({
             doDelete: () =>
-              updateRules.mutateAsync({
+              updateRules({
                 query: vpcSelector,
                 body: {
                   rules: rules.filter((r) => r.id !== rule.id),

app/pages/project/vpcs/VpcPage/tabs/VpcRoutersTab.tsx

@@ -61,7 +61,7 @@ export function VpcRoutersTab() {
     [vpcSelector]
   )
 
-  const deleteRouter = useApiMutation('vpcRouterDelete', {
+  const { mutateAsync: deleteRouter } = useApiMutation('vpcRouterDelete', {
     onSuccess() {
       apiQueryClient.invalidateQueries('vpcRouterList')
       addToast({ content: 'Your router has been deleted' })
@@ -88,7 +88,7 @@ export function VpcRoutersTab() {
         className: 'destructive',
         onActivate: confirmDelete({
           doDelete: () =>
-            deleteRouter.mutateAsync({
+            deleteRouter({
               path: { router: router.name },
               query: { project, vpc },
             }),

app/pages/project/vpcs/VpcPage/tabs/VpcSubnetsTab.tsx

@@ -44,7 +44,7 @@ export function VpcSubnetsTab() {
 
   const { Table } = useQueryTable('vpcSubnetList', { query: vpcSelector })
 
-  const deleteSubnet = useApiMutation('vpcSubnetDelete', {
+  const { mutateAsync: deleteSubnet } = useApiMutation('vpcSubnetDelete', {
     onSuccess() {
       queryClient.invalidateQueries('vpcSubnetList')
     },
@@ -63,7 +63,7 @@ export function VpcSubnetsTab() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () => deleteSubnet.mutateAsync({ path: { subnet: subnet.id } }),
+          doDelete: () => deleteSubnet({ path: { subnet: subnet.id } }),
           label: subnet.name,
         }),
       },

app/pages/project/vpcs/VpcsPage.tsx

@@ -80,7 +80,7 @@ export function VpcsPage() {
   })
   const navigate = useNavigate()
 
-  const deleteVpc = useApiMutation('vpcDelete', {
+  const { mutateAsync: deleteVpc } = useApiMutation('vpcDelete', {
     onSuccess() {
       queryClient.invalidateQueries('vpcList')
     },
@@ -102,8 +102,7 @@ export function VpcsPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () =>
-            deleteVpc.mutateAsync({ path: { vpc: vpc.name }, query: { project } }),
+          doDelete: () => deleteVpc({ path: { vpc: vpc.name }, query: { project } }),
           label: vpc.name,
         }),
       },

app/pages/settings/SSHKeysPage.tsx

@@ -45,7 +45,7 @@ export function SSHKeysPage() {
   const { Table } = useQueryTable('currentUserSshKeyList', {})
   const queryClient = useApiQueryClient()
 
-  const deleteSshKey = useApiMutation('currentUserSshKeyDelete', {
+  const { mutateAsync: deleteSshKey } = useApiMutation('currentUserSshKeyDelete', {
     onSuccess: () => {
       queryClient.invalidateQueries('currentUserSshKeyList')
       addToast({ content: 'Your SSH key has been deleted' })
@@ -57,7 +57,7 @@ export function SSHKeysPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () => deleteSshKey.mutateAsync({ path: { sshKey: sshKey.name } }),
+          doDelete: () => deleteSshKey({ path: { sshKey: sshKey.name } }),
           label: sshKey.name,
         }),
       },

app/pages/system/SiloImagesPage.tsx

@@ -70,7 +70,7 @@ export function SiloImagesPage() {
   const [demoteImage, setDemoteImage] = useState<Image | null>(null)
 
   const queryClient = useApiQueryClient()
-  const deleteImage = useApiMutation('imageDelete', {
+  const { mutateAsync: deleteImage } = useApiMutation('imageDelete', {
     onSuccess(_data, variables) {
       addToast({ content: `${variables.path.image} has been deleted` })
       queryClient.invalidateQueries('imageList')
@@ -86,7 +86,7 @@ export function SiloImagesPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () => deleteImage.mutateAsync({ path: { image: image.name } }),
+          doDelete: () => deleteImage({ path: { image: image.name } }),
           label: image.name,
         }),
       },

app/pages/system/networking/IpPoolPage.tsx

@@ -189,7 +189,7 @@ function IpRangesTable() {
   const { Table } = useQueryTable('ipPoolRangeList', { path: { pool } })
   const queryClient = useApiQueryClient()
 
-  const removeRange = useApiMutation('ipPoolRangeRemove', {
+  const { mutateAsync: removeRange } = useApiMutation('ipPoolRangeRemove', {
     onSuccess() {
       queryClient.invalidateQueries('ipPoolRangeList')
       queryClient.invalidateQueries('ipPoolUtilizationView')
@@ -213,7 +213,7 @@ function IpRangesTable() {
         onActivate: () =>
           confirmAction({
             doAction: () =>
-              removeRange.mutateAsync({
+              removeRange({
                 path: { pool },
                 body: range,
               }),
@@ -281,7 +281,7 @@ function LinkedSilosTable() {
   const queryClient = useApiQueryClient()
   const { Table } = useQueryTable('ipPoolSiloList', { path: poolSelector })
 
-  const unlinkSilo = useApiMutation('ipPoolSiloUnlink', {
+  const { mutateAsync: unlinkSilo } = useApiMutation('ipPoolSiloUnlink', {
     onSuccess() {
       queryClient.invalidateQueries('ipPoolSiloList')
     },
@@ -295,7 +295,7 @@ function LinkedSilosTable() {
         onActivate() {
           confirmAction({
             doAction: () =>
-              unlinkSilo.mutateAsync({ path: { silo: link.siloId, pool: link.ipPoolId } }),
+              unlinkSilo({ path: { silo: link.siloId, pool: link.ipPoolId } }),
             modalTitle: 'Confirm unlink silo',
             // Would be nice to reference the silo by name like we reference the
             // pool by name on unlink in the silo pools list, but it's a pain to

app/pages/system/networking/IpPoolsPage.tsx

@@ -77,7 +77,7 @@ export function IpPoolsPage() {
     query: { limit: PAGE_SIZE },
   })
 
-  const deletePool = useApiMutation('ipPoolDelete', {
+  const { mutateAsync: deletePool } = useApiMutation('ipPoolDelete', {
     onSuccess() {
       apiQueryClient.invalidateQueries('ipPoolList')
       addToast({ content: 'IP pool deleted' })
@@ -98,7 +98,7 @@ export function IpPoolsPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () => deletePool.mutateAsync({ path: { pool: pool.name } }),
+          doDelete: () => deletePool({ path: { pool: pool.name } }),
           label: pool.name,
         }),
       },

app/pages/system/silos/SiloIpPoolsTab.tsx

@@ -70,12 +70,12 @@ export function SiloIpPoolsTab() {
     [allPools]
   )
 
-  const updatePoolLink = useApiMutation('ipPoolSiloUpdate', {
+  const { mutateAsync: updatePoolLink } = useApiMutation('ipPoolSiloUpdate', {
     onSuccess() {
       queryClient.invalidateQueries('siloIpPoolList')
     },
   })
-  const unlinkPool = useApiMutation('ipPoolSiloUnlink', {
+  const { mutateAsync: unlinkPool } = useApiMutation('ipPoolSiloUnlink', {
     onSuccess() {
       queryClient.invalidateQueries('siloIpPoolList')
     },
@@ -91,7 +91,7 @@ export function SiloIpPoolsTab() {
           if (pool.isDefault) {
             confirmAction({
               doAction: () =>
-                updatePoolLink.mutateAsync({
+                updatePoolLink({
                   path: { silo, pool: pool.id },
                   body: { isDefault: false },
                 }),
@@ -121,7 +121,7 @@ export function SiloIpPoolsTab() {
             const verb = defaultPool ? 'change' : 'make'
             confirmAction({
               doAction: () =>
-                updatePoolLink.mutateAsync({
+                updatePoolLink({
                   path: { silo, pool: pool.id },
                   body: { isDefault: true },
                 }),
@@ -138,7 +138,7 @@ export function SiloIpPoolsTab() {
         className: 'destructive',
         onActivate() {
           confirmAction({
-            doAction: () => unlinkPool.mutateAsync({ path: { silo, pool: pool.id } }),
+            doAction: () => unlinkPool({ path: { silo, pool: pool.id } }),
             modalTitle: `Confirm unlink pool`,
             modalContent: (
               <p>

app/pages/system/silos/SilosPage.tsx

@@ -75,7 +75,7 @@ export function SilosPage() {
     query: { limit: PAGE_SIZE },
   })
 
-  const deleteSilo = useApiMutation('siloDelete', {
+  const { mutateAsync: deleteSilo } = useApiMutation('siloDelete', {
     onSuccess() {
       queryClient.invalidateQueries('siloList')
     },
@@ -86,7 +86,7 @@ export function SilosPage() {
       {
         label: 'Delete',
         onActivate: confirmDelete({
-          doDelete: () => deleteSilo.mutateAsync({ path: { silo: silo.name } }),
+          doDelete: () => deleteSilo({ path: { silo: silo.name } }),
           label: silo.name,
         }),
       },