minor: use the docLinks we already have to do the model docs links (#3050)

david-crespo · web-flow · commit 4c5e6b3ad7bf · 2026-02-06T17:35:53.000Z
use the docLinks we already have to do the model docs links
diff --git a/app/forms/disk-create.tsx b/app/forms/disk-create.tsx
@@ -36,12 +36,12 @@ import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { Radio } from '~/ui/lib/Radio'
 import { RadioGroup } from '~/ui/lib/RadioGroup'
 import { Slash } from '~/ui/lib/Slash'
 import { toLocaleDateString } from '~/util/date'
-import { links } from '~/util/links'
+import { docLinks } from '~/util/links'
 import { diskSizeNearest10 } from '~/util/math'
 import { bytesToGiB, GiB } from '~/util/units'
 
@@ -224,9 +224,7 @@ export function CreateDiskSideModalForm({
         areImagesLoading={areImagesLoading}
       />
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.disksDocs} label="Disks and Snapshots" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.disks]} />
     </SideModalForm>
   )
 }
diff --git a/app/forms/floating-ip-create.tsx b/app/forms/floating-ip-create.tsx
@@ -28,9 +28,9 @@ import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { ALL_ISH } from '~/util/consts'
-import { links } from '~/util/links'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const poolList = q(api.projectIpPoolList, { query: { limit: ALL_ISH } })
@@ -100,9 +100,7 @@ export default function CreateFloatingIpSideModalForm() {
       <DescriptionField name="description" control={form.control} />
       <IpPoolSelector control={form.control} poolFieldName="pool" pools={unicastPools} />
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.floatingIpsDocs} label="Floating IPs" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.floatingIps]} />
     </SideModalForm>
   )
 }
diff --git a/app/forms/ip-pool-create.tsx b/app/forms/ip-pool-create.tsx
@@ -20,8 +20,8 @@ import { titleCrumb } from '~/hooks/use-crumbs'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { Message } from '~/ui/lib/Message'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
-import { links } from '~/util/links'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 type IpPoolCreateForm = SetRequired<IpPoolCreate, 'poolType' | 'ipVersion'>
@@ -87,9 +87,7 @@ export default function CreateIpPoolSideModalForm() {
         ]}
       />
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.systemIpPoolsDocs} label="IP Pools" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.systemIpPools]} />
     </SideModalForm>
   )
 }
diff --git a/app/forms/ip-pool-range-add.tsx b/app/forms/ip-pool-range-add.tsx
@@ -26,9 +26,9 @@ import { useIpPoolSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { Message } from '~/ui/lib/Message'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { parseIp } from '~/util/ip'
-import { links } from '~/util/links'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const defaultValues: IpRange = {
@@ -141,9 +141,7 @@ export default function IpPoolAddRange() {
         required
       />
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.systemIpPoolsDocs} label="IP Pools" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.systemIpPools]} />
     </SideModalForm>
   )
 }
diff --git a/app/forms/vpc-create.tsx b/app/forms/vpc-create.tsx
@@ -19,8 +19,8 @@ import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
-import { links } from '~/util/links'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const defaultValues: VpcCreate = {
@@ -67,9 +67,7 @@ export default function CreateVpcSideModalForm() {
       <NameField name="dnsName" label="DNS name" control={form.control} />
       <TextField name="ipv6Prefix" label="IPV6 prefix" control={form.control} />
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.vpcsDocs} label="Networking" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.vpcs]} />
     </SideModalForm>
   )
 }
diff --git a/app/forms/vpc-router-create.tsx b/app/forms/vpc-router-create.tsx
@@ -18,8 +18,8 @@ import { titleCrumb } from '~/hooks/use-crumbs'
 import { useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
-import { links } from '~/util/links'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 const defaultValues: VpcRouterCreate = {
@@ -59,9 +59,7 @@ export default function RouterCreate() {
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.customRoutersDocs} label="Custom Routers" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.routers]} />
     </SideModalForm>
   )
 }
diff --git a/app/forms/vpc-router-route-common.tsx b/app/forms/vpc-router-route-common.tsx
@@ -26,10 +26,10 @@ import { TextField } from '~/components/form/fields/TextField'
 import { useVpcRouterSelector } from '~/hooks/use-params'
 import { toComboboxItems } from '~/ui/lib/Combobox'
 import { Message } from '~/ui/lib/Message'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { ALL_ISH } from '~/util/consts'
 import { validateIp, validateIpNet } from '~/util/ip'
-import { links } from '~/util/links'
+import { docLinks } from '~/util/links'
 
 export type RouteFormValues =
   | RouterRouteCreate
@@ -223,8 +223,5 @@ export const RouteFormFields = ({ form, disabled }: RouteFormFieldsProps) => {
 }
 
 export const RouteFormDocs = () => (
-  <ModalLinks heading="Relevant docs">
-    <ModalLink to={links.routesDocs} label="VPC Subnet Routing" />
-    <ModalLink to={links.gatewaysDocs} label="Internet Gateways" />
-  </ModalLinks>
+  <SideModalFormDocs docs={[docLinks.routes, docLinks.gateways]} />
 )
diff --git a/app/pages/project/disks/DiskDetailSideModal.tsx b/app/pages/project/disks/DiskDetailSideModal.tsx
@@ -16,10 +16,10 @@ import { DiskStateBadge, DiskTypeBadge } from '~/components/StateBadge'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getDiskSelector, useDiskSelector } from '~/hooks/use-params'
 import { FormDivider } from '~/ui/lib/Divider'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
-import { links } from '~/util/links'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 import { bytesToGiB } from '~/util/units'
@@ -96,9 +96,7 @@ export function DiskDetailSideModal({
         <PropertiesTable.DateRow label="Last Modified" date={disk.timeModified} />
       </PropertiesTable>
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.disksDocs} label="Disks and Snapshots" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.disks]} />
     </ReadOnlySideModalForm>
   )
 }
diff --git a/app/pages/project/vpcs/internet-gateway-edit.tsx b/app/pages/project/vpcs/internet-gateway-edit.tsx
@@ -19,11 +19,11 @@ import { IpPoolCell } from '~/table/cells/IpPoolCell'
 import { CopyableIp } from '~/ui/lib/CopyableIp'
 import { FormDivider } from '~/ui/lib/Divider'
 import { Message } from '~/ui/lib/Message'
-import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel, SideModal } from '~/ui/lib/SideModal'
 import { Table } from '~/ui/lib/Table'
-import { links } from '~/util/links'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 
@@ -202,9 +202,7 @@ export default function EditInternetGatewayForm() {
       </div>
 
       <FormDivider />
-      <ModalLinks heading="Relevant docs">
-        <ModalLink to={links.gatewaysDocs} label="Internet Gateways" />
-      </ModalLinks>
+      <SideModalFormDocs docs={[docLinks.gateways]} />
     </ReadOnlySideModalForm>
   )
 }
diff --git a/app/ui/lib/ModalLinks.tsx b/app/ui/lib/ModalLinks.tsx
@@ -36,3 +36,13 @@ export const ModalLink = ({ to, label }: { to: string; label: string }) => (
     </a>
   </li>
 )
+
+type DocLink = { href: string; linkText: string }
+
+export const SideModalFormDocs = ({ docs }: { docs: DocLink[] }) => (
+  <ModalLinks heading="Relevant docs">
+    {docs.map(({ href, linkText }) => (
+      <ModalLink key={href} to={href} label={linkText} />
+    ))}
+  </ModalLinks>
+)
