From f8b807af3c1cfa85914d0589254aed6843f0c1ba Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Fri, 2 Feb 2024 12:26:01 -0600
Subject: [PATCH] add IP pools to quick actions

---
 app/pages/system/networking/IpPoolsTab.tsx | 27 +++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/pages/system/networking/IpPoolsTab.tsx b/app/pages/system/networking/IpPoolsTab.tsx
index 523b6fd6cc..d15c5e491e 100644
--- a/app/pages/system/networking/IpPoolsTab.tsx
+++ b/app/pages/system/networking/IpPoolsTab.tsx
@@ -6,12 +6,19 @@
  * Copyright Oxide Computer Company
  */
 
+import { useMemo } from 'react'
 import { Link, Outlet, useNavigate } from 'react-router-dom'
 
-import { apiQueryClient, useApiMutation, type IpPool } from '@oxide/api'
+import {
+  apiQueryClient,
+  useApiMutation,
+  usePrefetchedApiQuery,
+  type IpPool,
+} from '@oxide/api'
 import { DateCell, linkCell, useQueryTable, type MenuAction } from '@oxide/table'
 import { buttonStyle, EmptyMessage, Networking24Icon } from '@oxide/ui'
 
+import { useQuickActions } from 'app/hooks'
 import { confirmDelete } from 'app/stores/confirm-delete'
 import { pb } from 'app/util/path-builder'
 
@@ -33,6 +40,7 @@ IpPoolsTab.loader = async function () {
 export function IpPoolsTab() {
   const navigate = useNavigate()
   const { Table, Column } = useQueryTable('ipPoolList', {})
+  const { data: pools } = usePrefetchedApiQuery('ipPoolList', { query: { limit: 25 } })
 
   const deletePool = useApiMutation('ipPoolDelete', {
     onSuccess() {
@@ -59,6 +67,23 @@ export function IpPoolsTab() {
     },
   ]
 
+  useQuickActions(
+    useMemo(
+      () => [
+        {
+          value: 'New IP pool',
+          onSelect: () => navigate(pb.projectNew()),
+        },
+        ...(pools.items || []).map((p) => ({
+          value: p.name,
+          onSelect: () => navigate(pb.ipPool({ pool: p.name })),
+          navGroup: 'Go to IP pool',
+        })),
+      ],
+      [navigate, pools]
+    )
+  )
+
   return (
     <>
       <div className="mb-3 flex justify-end space-x-2">