Add docs links to more forms (#3052)

* add docs links to more forms, roll formdivider into the component

* update relevant docs skill for component refactor

* more links. the user WILL BE EDUCATED

Author: david-crespo

.claude/skills/add-relevant-docs/SKILL.md

@@ -96,27 +96,32 @@ import { docLinks } from '~/util/links'
 </PageHeader>
 ```
 
-### 5. Add ModalLinks to side modal forms
+### 5. Add SideModalFormDocs to side modal forms
 
-Used at the bottom of `SideModalForm` and `ReadOnlySideModalForm` content, after a `FormDivider`.
+Used at the bottom of `SideModalForm` and `ReadOnlySideModalForm` content. The component renders a `FormDivider` automatically before the links.
 
 **File**: `app/ui/lib/ModalLinks.tsx`
 
 ```tsx
-import { FormDivider } from '~/ui/lib/Divider'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { docLinks } from '~/util/links'
+
+// Inside the form, after form fields:
+
+;<SideModalFormDocs docs={[docLinks.someLink]} />
+```
+
+For custom links not in `docLinks`, use `ModalLinks` and `ModalLink` directly:
+
+```tsx
 import { ModalLink, ModalLinks } from '~/ui/lib/ModalLinks'
 import { links } from '~/util/links'
 
-// Inside the form, after form fields:
-<FormDivider />
-<ModalLinks heading="Relevant docs">
+;<ModalLinks heading="Relevant docs">
   <ModalLink to={links.somePageDocs} label="Human-Readable Label" />
-  <ModalLink to={links.anotherPageDocs} label="Another Label" />
 </ModalLinks>
 ```
 
-Note: `ModalLink` uses `links.*` (raw URLs), not `docLinks.*` (which are `{href, linkText}` objects for DocsPopover).
-
 ### 6. Write good microcopy
 
 Guidelines:

app/forms/anti-affinity-group-create.tsx

@@ -18,6 +18,8 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 import { policyHelpText } from './affinity-util'
@@ -77,6 +79,7 @@ export default function CreateAntiAffinityGroupForm() {
           { value: 'fail', label: 'Fail' },
         ]}
       />
+      <SideModalFormDocs docs={[docLinks.affinity]} />
     </SideModalForm>
   )
 }

app/forms/anti-affinity-group-edit.tsx

@@ -27,6 +27,8 @@ import {
   useAntiAffinityGroupSelector,
 } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 import { antiAffinityGroupView } from './affinity-util'
@@ -81,6 +83,7 @@ export default function EditAntiAffintyGroupForm() {
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
+      <SideModalFormDocs docs={[docLinks.affinity]} />
     </SideModalForm>
   )
 }

app/forms/disk-create.tsx

@@ -34,7 +34,6 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
-import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { Radio } from '~/ui/lib/Radio'
@@ -223,7 +222,6 @@ export function CreateDiskSideModalForm({
         images={images}
         areImagesLoading={areImagesLoading}
       />
-      <FormDivider />
       <SideModalFormDocs docs={[docLinks.disks]} />
     </SideModalForm>
   )

app/forms/floating-ip-create.tsx

@@ -27,7 +27,6 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
-import { FormDivider } from '~/ui/lib/Divider'
 import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { ALL_ISH } from '~/util/consts'
 import { docLinks } from '~/util/links'
@@ -99,7 +98,6 @@ export default function CreateFloatingIpSideModalForm() {
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
       <IpPoolSelector control={form.control} poolFieldName="pool" pools={unicastPools} />
-      <FormDivider />
       <SideModalFormDocs docs={[docLinks.floatingIps]} />
     </SideModalForm>
   )

app/forms/floating-ip-edit.tsx

@@ -27,8 +27,10 @@ import { addToast } from '~/stores/toast'
 import { EmptyCell } from '~/table/cells/EmptyCell'
 import { IpPoolCell } from '~/table/cells/IpPoolCell'
 import { CopyableIp } from '~/ui/lib/CopyableIp'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ALL_ISH } from '~/util/consts'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 
@@ -115,6 +117,7 @@ export default function EditFloatingIpSideModalForm() {
       </PropertiesTable>
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />
+      <SideModalFormDocs docs={[docLinks.floatingIps]} />
     </SideModalForm>
   )
 }

app/forms/idp/edit.tsx

@@ -18,8 +18,10 @@ import { ReadOnlySideModalForm } from '~/components/form/ReadOnlySideModalForm'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getIdpSelector, useIdpSelector } from '~/hooks/use-params'
 import { FormDivider } from '~/ui/lib/Divider'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel, SideModal } from '~/ui/lib/SideModal'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 export async function clientLoader({ params }: LoaderFunctionArgs) {
@@ -115,6 +117,7 @@ export default function EditIdpSideModalForm() {
         control={form.control}
         disabled
       />
+      <SideModalFormDocs docs={[docLinks.identityProviders]} />
     </ReadOnlySideModalForm>
   )
 }

app/forms/image-edit.tsx

@@ -15,8 +15,10 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { ReadOnlySideModalForm } from '~/components/form/ReadOnlySideModalForm'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
+import { docLinks } from '~/util/links'
 import { capitalize } from '~/util/str'
 import { bytesToGiB } from '~/util/units'
 
@@ -58,6 +60,7 @@ export function EditImageSideModalForm({
       <DescriptionField name="description" control={form.control} required disabled />
       <TextField name="os" label="OS" control={form.control} required disabled />
       <TextField name="version" control={form.control} required disabled />
+      <SideModalFormDocs docs={[docLinks.images]} />
     </ReadOnlySideModalForm>
   )
 }

app/forms/image-from-snapshot.tsx

@@ -26,7 +26,9 @@ import { HL } from '~/components/HL'
 import { titleCrumb } from '~/hooks/use-crumbs'
 import { getProjectSnapshotSelector, useProjectSnapshotSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
+import { docLinks } from '~/util/links'
 import { pb } from '~/util/path-builder'
 import type * as PP from '~/util/path-params'
 
@@ -100,6 +102,7 @@ export default function CreateImageFromSnapshotSideModalForm() {
       <DescriptionField name="description" control={form.control} required />
       <TextField name="os" label="OS" control={form.control} required />
       <TextField name="version" control={form.control} required />
+      <SideModalFormDocs docs={[docLinks.images]} />
     </SideModalForm>
   )
 }

app/forms/image-upload.tsx

@@ -41,6 +41,7 @@ import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { Message } from '~/ui/lib/Message'
 import { Modal } from '~/ui/lib/Modal'
+import { SideModalFormDocs } from '~/ui/lib/ModalLinks'
 import { Progress } from '~/ui/lib/Progress'
 import { Spinner } from '~/ui/lib/Spinner'
 import { anySignal } from '~/util/abort'
@@ -570,18 +571,6 @@ export default function ImageCreate() {
       submitError={formError}
       submitLabel={allDone ? 'Done' : 'Upload image'}
     >
-      <Message
-        variant="info"
-        content={
-          <>
-            Read the{' '}
-            <a target="_blank" rel="noreferrer" href={docLinks.images.href}>
-              {docLinks.images.linkText}
-            </a>{' '}
-            guide to learn more about image requirements.
-          </>
-        }
-      />
       <NameField name="imageName" label="Name" control={form.control} />
       <DescriptionField
         name="imageDescription"
@@ -691,6 +680,7 @@ export default function ImageCreate() {
           />
         </Modal>
       )}
+      <SideModalFormDocs docs={[docLinks.images]} />
     </SideModalForm>
   )
 }