Get rid of single tab on IP pools (#2154)

* get rid of single tab on IP pools

* comment is obsolete

Author: david-crespo

app/layouts/SystemLayout.tsx

@@ -66,7 +66,7 @@ export function SystemLayout() {
       { value: 'Silos', path: pb.silos() },
       { value: 'Utilization', path: pb.systemUtilization() },
       { value: 'Inventory', path: pb.inventory() },
-      { value: 'Networking', path: pb.ipPools() },
+      { value: 'IP Pools', path: pb.ipPools() },
     ]
       // filter out the entry for the path we're currently on
       .filter((i) => i.path !== pathname)
@@ -112,7 +112,7 @@ export function SystemLayout() {
             <Storage16Icon /> Inventory
           </NavLinkItem>
           <NavLinkItem to={pb.ipPools()}>
-            <Networking16Icon /> Networking
+            <Networking16Icon /> IP Pools
           </NavLinkItem>
         </Sidebar.Nav>
       </Sidebar>

app/pages/system/networking/IpPoolsTab.tsx renamed to app/pages/system/networking/IpPoolsPage.tsx

@@ -29,6 +29,8 @@ import { Columns } from '~/table/columns/common'
 import { useQueryTable } from '~/table/QueryTable'
 import { buttonStyle } from '~/ui/lib/Button'
 import { EmptyMessage } from '~/ui/lib/EmptyMessage'
+import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
+import { TableActions } from '~/ui/lib/Table'
 import { pb } from '~/util/path-builder'
 
 const EmptyState = () => (
@@ -60,12 +62,12 @@ const staticColumns = [
   colHelper.accessor('timeCreated', Columns.timeCreated),
 ]
 
-IpPoolsTab.loader = async function () {
+IpPoolsPage.loader = async function () {
   await apiQueryClient.prefetchQuery('ipPoolList', { query: { limit: 25 } })
   return null
 }
 
-export function IpPoolsTab() {
+export function IpPoolsPage() {
   const navigate = useNavigate()
   const { Table } = useQueryTable('ipPoolList', {})
   const { data: pools } = usePrefetchedApiQuery('ipPoolList', { query: { limit: 25 } })
@@ -119,11 +121,14 @@ export function IpPoolsTab() {
 
   return (
     <>
-      <div className="mb-3 flex justify-end space-x-2">
+      <PageHeader>
+        <PageTitle icon={<Networking24Icon />}>IP Pools</PageTitle>
+      </PageHeader>
+      <TableActions>
         <Link to={pb.ipPoolsNew()} className={buttonStyle({ size: 'sm' })}>
           New IP Pool
         </Link>
-      </div>
+      </TableActions>
       <Table columns={columns} emptyState={<EmptyState />} />
       <Outlet />
     </>

app/pages/system/networking/NetworkingPage.tsx

@@ -71,8 +71,7 @@ import { SledInstancesTab } from './pages/system/inventory/sled/SledInstancesTab
 import { SledPage } from './pages/system/inventory/sled/SledPage'
 import { SledsTab } from './pages/system/inventory/SledsTab'
 import { IpPoolPage } from './pages/system/networking/IpPoolPage'
-import { IpPoolsTab } from './pages/system/networking/IpPoolsTab'
-import { NetworkingPage } from './pages/system/networking/NetworkingPage'
+import { IpPoolsPage } from './pages/system/networking/IpPoolsPage'
 import { SiloImagesPage } from './pages/system/SiloImagesPage'
 import { SiloPage } from './pages/system/silos/SiloPage'
 import { SilosPage } from './pages/system/silos/SilosPage'
@@ -178,10 +177,11 @@ export const routes = createRoutesFromElements(
         </Route>
         <Route path="health" element={null} handle={{ crumb: 'Health' }} />
         <Route path="update" element={null} handle={{ crumb: 'Update' }} />
-        <Route path="networking" element={<NetworkingPage />}>
+        <Route path="networking">
+          <Route index element={<Navigate to="ip-pools" replace />} />
           <Route
-            element={<IpPoolsTab />}
-            loader={IpPoolsTab.loader}
+            element={<IpPoolsPage />}
+            loader={IpPoolsPage.loader}
             handle={{ crumb: 'IP pools' }}
           >
             <Route path="ip-pools" element={null} />

app/routes.tsx

@@ -83,8 +83,6 @@ export const pb = {
   systemUtilization: () => '/system/utilization',
   systemHealth: () => '/system/health',
 
-  // there is only one tab on networking and it's IP pools, so we just treat
-  // that as the networking route for now
   ipPools: () => '/system/networking/ip-pools',
   ipPoolsNew: () => '/system/networking/ip-pools-new',
   ipPool: (params: IpPool) => `${pb.ipPools()}/${params.pool}`,

app/util/path-builder.ts

@@ -15,8 +15,7 @@ test('IP pool list', async ({ page }) => {
 
   await expect(page).toHaveTitle('IP pools / Oxide Console')
 
-  await expect(page.getByRole('heading', { name: 'Networking' })).toBeVisible()
-  await expect(page.getByRole('tab', { name: 'IP pools' })).toBeVisible()
+  await expect(page.getByRole('heading', { name: 'IP Pools' })).toBeVisible()
 
   const table = page.getByRole('table')
 
@@ -199,7 +198,7 @@ test('IP range validation and add', async ({ page }) => {
   await expect(page.getByText('Capacity32')).toBeVisible()
 
   // go back to the pool and verify the utilization column changed
-  await page.getByRole('link', { name: 'Networking' }).click()
+  await page.getByRole('link', { name: 'IP Pools' }).click()
   await expectRowVisible(table, {
     name: 'ip-pool-2',
     Utilization: 'v4' + '0 / 1' + 'v6' + '0 / 32',
@@ -233,7 +232,7 @@ test('remove range', async ({ page }) => {
   await expect(page.getByText('Capacity21')).toBeVisible()
 
   // go back to the pool and verify the utilization column changed
-  await page.getByRole('link', { name: 'Networking' }).click()
+  await page.getByRole('link', { name: 'IP Pools' }).click()
   await expectRowVisible(table, {
     name: 'ip-pool-1',
     Utilization: '6 / 21',
@@ -256,7 +255,7 @@ test('deleting floating IP decrements utilization', async ({ page }) => {
   // now go back and it's 5. wow
   await page.getByLabel('Switch between system and silo').click()
   await page.getByRole('menuitem', { name: 'System' }).click()
-  await page.getByRole('link', { name: 'Networking' }).click()
+  await page.getByRole('link', { name: 'IP Pools' }).click()
   await expectRowVisible(table, { name: 'ip-pool-1', Utilization: '5 / 24' })
 })