use EmptyCell for zero routes, copy tweaks, sentence case

oxidecomputer · Dec 13, 2024 · c4b35fe · c4b35fe
1 parent 64a7bbe
commit c4b35fe
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx b/app/pages/project/vpcs/VpcPage/tabs/VpcGatewaysTab.tsx
@@ -51,7 +51,8 @@ const GatewayIpPoolCell = (gatewaySelector: PP.VpcInternetGateway) => {
 const GatewayRoutes = ({ project, vpc, gateway }: PP.VpcInternetGateway) => {
   const matchingRoutes = useGatewayRoutes({ project, vpc, gateway })
   const to = pb.vpcInternetGateway({ project, vpc, gateway })
-  return <LinkCell to={to}>{matchingRoutes?.length || 0}</LinkCell>
+  if (!matchingRoutes?.length) return <EmptyCell />
+  return <LinkCell to={to}>{matchingRoutes.length}</LinkCell>
 }
 
 const colHelper = createColumnHelper<InternetGateway>()

diff --git a/app/pages/project/vpcs/internet-gateway-edit.tsx b/app/pages/project/vpcs/internet-gateway-edit.tsx
@@ -104,9 +104,9 @@ export function EditInternetGatewayForm() {
 
   return (
     <SideModalForm
-      title="Internet Gateway"
+      title="Internet gateway"
       formType="edit"
-      resourceName="Internet Gateway"
+      resourceName="internet gateway"
       onDismiss={onDismiss}
       subtitle={
         <ResourceLabel>
@@ -145,7 +145,7 @@ export function EditInternetGatewayForm() {
       <FormDivider />
       <div className="flex flex-col gap-3">
         <SideModal.Heading>
-          Internet Gateway IP Address
+          Internet gateway IP address
           {gatewayIpAddresses && gatewayIpAddresses.length > 1 ? 'es' : ''}
         </SideModal.Heading>
         {gatewayIpAddresses && gatewayIpAddresses.length > 0 ? (
@@ -164,10 +164,10 @@ export function EditInternetGatewayForm() {
           ))
         ) : (
           <div className="mt-2">
-            {'This internet gateway does not have any specific IP addresses attached. '}
+            {'This internet gateway does not have any IP addresses attached. '}
             {hasAttachedPool
               ? 'It will use an address from the attached IP pool.'
-              : 'Use the CLI to attach an IP Pool or specify an IP address to use with this gateway.'}
+              : 'Use the CLI to attach an IP pool or IP address to this gateway.'}
           </div>
         )}
       </div>
@@ -176,7 +176,7 @@ export function EditInternetGatewayForm() {
 
       <div className="flex flex-col gap-3">
         <SideModal.Heading>
-          Internet Gateway IP Pool
+          Internet gateway IP pool
           {gatewayIpPools && gatewayIpPools.length > 1 ? 's' : ''}
         </SideModal.Heading>
         {hasAttachedPool ? (

diff --git a/test/e2e/vpcs.e2e.ts b/test/e2e/vpcs.e2e.ts
@@ -335,12 +335,14 @@ test('can view internet gateways', async ({ page }) => {
     description: 'internet gateway 1',
     'Attached IP Address': '123.4.56.3',
     'Attached IP Pool': 'ip-pool-1',
+    Routes: '1',
   })
   await expectRowVisible(table, {
     name: 'internet-gateway-2',
     description: 'internet gateway 2',
     'Attached IP Address': '—',
     'Attached IP Pool': 'ip-pool-2',
+    Routes: '—',
   })
 
   await page.getByRole('link', { name: 'internet-gateway-1' }).click()