Extract IpPoolCell so we can use it in other places (#2497)

Author: charliepark

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

@@ -13,7 +13,6 @@ import { Outlet, useNavigate, type LoaderFunctionArgs } from 'react-router-dom'
 import {
   apiQueryClient,
   useApiMutation,
-  useApiQuery,
   useApiQueryClient,
   usePrefetchedApiQuery,
   type FloatingIp,
@@ -28,8 +27,8 @@ import { getProjectSelector, useProjectSelector } from '~/hooks/use-params'
 import { confirmAction } from '~/stores/confirm-action'
 import { confirmDelete } from '~/stores/confirm-delete'
 import { addToast } from '~/stores/toast'
-import { EmptyCell } from '~/table/cells/EmptyCell'
 import { InstanceLinkCell } from '~/table/cells/InstanceLinkCell'
+import { IpPoolCell } from '~/table/cells/IpPoolCell'
 import { useColsWithActions, type MenuAction } from '~/table/columns/action-col'
 import { Columns } from '~/table/columns/common'
 import { PAGE_SIZE, useQueryTable } from '~/table/QueryTable'
@@ -39,7 +38,6 @@ import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
 import { PageHeader, PageTitle } from '~/ui/lib/PageHeader'
 import { TableActions } from '~/ui/lib/Table'
-import { Tooltip } from '~/ui/lib/Tooltip'
 import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
@@ -63,6 +61,9 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
     apiQueryClient.prefetchQuery('instanceList', {
       query: { project },
     }),
+    // fetch IP Pools and preload into RQ cache so fetches by ID in
+    // IpPoolCell can be mostly instant yet gracefully fall back to
+    // fetching individually if we don't fetch them all here
     apiQueryClient
       .fetchQuery('projectIpPoolList', { query: { limit: ALL_ISH } })
       .then((pools) => {
@@ -78,18 +79,6 @@ FloatingIpsPage.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-const IpPoolCell = ({ ipPoolId }: { ipPoolId: string }) => {
-  const pool = useApiQuery('projectIpPoolView', { path: { pool: ipPoolId } }).data
-  if (!pool) return <EmptyCell />
-  return pool.description ? (
-    <Tooltip content={pool.description} placement="right">
-      <span>{pool.name}</span>
-    </Tooltip>
-  ) : (
-    <>{pool.name}</>
-  )
-}
-
 const colHelper = createColumnHelper<FloatingIp>()
 const staticCols = [
   colHelper.accessor('name', {}),
@@ -98,12 +87,12 @@ const staticCols = [
     header: 'IP address',
   }),
   colHelper.accessor('ipPoolId', {
-    cell: (info) => <IpPoolCell ipPoolId={info.getValue()} />,
     header: 'IP pool',
+    cell: (info) => <IpPoolCell ipPoolId={info.getValue()} />,
   }),
   colHelper.accessor('instanceId', {
-    cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,
     header: 'Attached to instance',
+    cell: (info) => <InstanceLinkCell instanceId={info.getValue()} />,
   }),
 ]
 

app/table/cells/IpPoolCell.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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
+ */
+import { useApiQuery } from '~/api'
+import { Tooltip } from '~/ui/lib/Tooltip'
+
+import { EmptyCell } from './EmptyCell'
+
+export const IpPoolCell = ({ ipPoolId }: { ipPoolId: string }) => {
+  const pool = useApiQuery('projectIpPoolView', { path: { pool: ipPoolId } }).data
+  if (!pool) return <EmptyCell />
+  return (
+    <Tooltip content={pool.description} placement="right">
+      <span>{pool.name}</span>
+    </Tooltip>
+  )
+}

app/ui/lib/Tooltip.tsx

@@ -39,7 +39,7 @@ export interface TooltipProps {
   /** The target the tooltip hovers near; can not be a raw string. */
   children?: ReactElement
   /** The text to appear on hover/focus */
-  content: string | React.ReactNode
+  content?: string | React.ReactNode
   /**
    * `undefined` means automatic, which means the tooltip will be placed in the
    * best position based on the available space. When any other placement is
@@ -86,6 +86,8 @@ export const Tooltip = forwardRef(
 
     const zIndex = usePopoverZIndex()
 
+    if (!content) return child
+
     return (
       <>
         {child}