Merge main into breadcrumbs

Author: david-crespo

app/components/form/SideModalForm.tsx

@@ -41,9 +41,14 @@ type SideModalFormProps<TFieldValues extends FieldValues> = {
   resourceName: string
   /** Must be provided with a reason describing why it's disabled */
   submitDisabled?: string
+
+  // require loading and error so we can't forget to hook them up. there are a
+  // few forms that don't need them, so we'll use dummy values
+
   /** Error from the API call */
   submitError: ApiError | null
-  loading?: boolean
+  loading: boolean
+
   /** Only needed if you need to override the default title (Create/Edit ${resourceName}) */
   title?: string
   subtitle?: ReactNode

app/forms/disk-attach.tsx

@@ -35,7 +35,7 @@ export function AttachDiskSideModalForm({
   onSubmit,
   onDismiss,
   diskNamesToExclude = [],
-  loading,
+  loading = false,
   submitError = null,
 }: AttachDiskProps) {
   const { project } = useProjectSelector()

app/forms/idp/create.tsx

@@ -5,6 +5,7 @@
  *
  * Copyright Oxide Computer Company
  */
+import { useEffect, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate } from 'react-router-dom'
 
@@ -18,12 +19,16 @@ import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
 import { useSiloSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
+import { Checkbox } from '~/ui/lib/Checkbox'
 import { FormDivider } from '~/ui/lib/Divider'
+import { Message } from '~/ui/lib/Message'
 import { SideModal } from '~/ui/lib/SideModal'
 import { readBlobAsBase64 } from '~/util/file'
+import { links } from '~/util/links'
 import { pb } from '~/util/path-builder'
 
 import { MetadataSourceField, type IdpCreateFormValues } from './shared'
+import { getDelegatedDomain } from './util'
 
 const defaultValues: IdpCreateFormValues = {
   type: 'saml',
@@ -62,6 +67,23 @@ export function CreateIdpSideModalForm() {
   })
 
   const form = useForm({ defaultValues })
+  const name = form.watch('name')
+
+  const [generateUrl, setGenerateUrl] = useState(true)
+
+  useEffect(() => {
+    // When creating a SAML identity provider connection, the ACS URL that the user enters
+    // should always be of the form: http(s)://<silo>.sys.<suffix>/login/<silo>/saml/<name>
+    // where <silo> is the Silo name, <suffix> is the delegated domain assigned to the rack,
+    // and <name> is the name of the IdP connection
+    // The user can override this by unchecking the "Automatically generate ACS URL" checkbox
+    // and entering a custom ACS URL, though if they check the box again, we will regenerate
+    // the ACS URL.
+    const suffix = getDelegatedDomain(window.location)
+    if (generateUrl) {
+      form.setValue('acsUrl', `https://${silo}.sys.${suffix}/login/${silo}/saml/${name}`)
+    }
+  }, [form, name, silo, generateUrl])
 
   return (
     <SideModalForm
@@ -108,7 +130,35 @@ export function CreateIdpSideModalForm() {
       submitError={createIdp.error}
       submitLabel="Create provider"
     >
-      <NameField name="name" control={form.control} />
+      <Message
+        content={
+          <>
+            Read the{' '}
+            <a
+              href={links.identityProvidersDocs}
+              className="underline"
+              target="_blank"
+              rel="noreferrer"
+            >
+              Rack Configuration
+            </a>{' '}
+            guide to learn more about setting up an identity provider.
+          </>
+        }
+      />
+      <NameField
+        name="name"
+        control={form.control}
+        description={
+          <>
+            A short name for the provider in our system. Users will see it in the path to
+            the login page:{' '}
+            <code>
+              /login/{silo}/saml/{name.trim() || 'idp-name'}
+            </code>
+          </>
+        }
+      />
       <DescriptionField name="description" control={form.control} required />
       <TextField
         name="technicalContactEmail"
@@ -127,13 +177,30 @@ export function CreateIdpSideModalForm() {
         required
         control={form.control}
       />
-      <TextField
-        name="acsUrl"
-        label="ACS URL"
-        description="Service provider endpoint for the IdP to send the SAML response"
-        required
-        control={form.control}
-      />
+      <div className="flex flex-col gap-2">
+        <TextField
+          name="acsUrl"
+          label="ACS URL"
+          description={
+            <div className="children:inline-block">
+              <span>
+                Oxide endpoint for the identity provider to send the SAML response.{' '}
+              </span>
+              <span>
+                URL is generated from the current hostname, silo name, and provider name
+                according to a standard format.
+              </span>
+            </div>
+          }
+          required
+          control={form.control}
+          disabled={generateUrl}
+          copyable
+        />
+        <Checkbox checked={generateUrl} onChange={(e) => setGenerateUrl(e.target.checked)}>
+          Use standard ACS URL
+        </Checkbox>
+      </div>
       <TextField
         name="sloUrl"
         label="Single Logout (SLO) URL"
@@ -142,14 +209,17 @@ export function CreateIdpSideModalForm() {
         control={form.control}
       />
 
+      <FormDivider />
+
+      <SideModal.Heading>Request signing</SideModal.Heading>
       {/* We don't bother validating that you have both of these or neither even
           though the API requires that because we are going to change the API to
           always require both, at which point these become simple `required` fields */}
       <FileField
         id="public-cert-file-input"
         name="signingKeypair.publicCert"
         description="DER-encoded X.509 certificate"
-        label="Public cert"
+        label="Public certificate"
         control={form.control}
       />
       <FileField

app/forms/idp/edit.tsx

@@ -58,6 +58,7 @@ export function EditIdpSideModalForm() {
       }
       // TODO: pass actual error when this form is hooked up
       submitError={null}
+      loading={false}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="ID">
@@ -79,6 +80,7 @@ export function EditIdpSideModalForm() {
         required
         control={form.control}
         disabled
+        copyable
       />
 
       <FormDivider />

app/forms/idp/util.spec.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { describe, expect, it } from 'vitest'
+
+import { getDelegatedDomain } from './util'
+
+describe('getDomainSuffix', () => {
+  it('handles arbitrary URLs by falling back to placeholder', () => {
+    expect(getDelegatedDomain({ hostname: 'localhost' })).toBe('placeholder')
+    expect(getDelegatedDomain({ hostname: 'console-preview.oxide.computer' })).toBe(
+      'placeholder'
+    )
+  })
+
+  it('handles 1 subdomain after sys', () => {
+    const location = { hostname: 'oxide.sys.r3.oxide-preview.com' }
+    expect(getDelegatedDomain(location)).toBe('r3.oxide-preview.com')
+  })
+
+  it('handles 2 subdomains after sys', () => {
+    const location = { hostname: 'oxide.sys.rack2.eng.oxide.computer' }
+    expect(getDelegatedDomain(location)).toBe('rack2.eng.oxide.computer')
+  })
+})

app/forms/idp/util.ts

@@ -0,0 +1,17 @@
+/*
+ * 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
+ */
+
+// note: this lives in its own file for fast refresh reasons
+
+/**
+ * When given a full URL hostname for an Oxide silo, return the domain
+ * (everything after `<silo>.sys.`). Placeholder logic should only apply
+ * in local dev or Vercel previews.
+ */
+export const getDelegatedDomain = (location: { hostname: string }) =>
+  location.hostname.split('.sys.')[1] || 'placeholder'

app/forms/image-edit.tsx

@@ -86,6 +86,7 @@ export function EditImageSideModalForm({
       }
       // TODO: pass actual error when this form is hooked up
       submitError={null}
+      loading={false}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Shared with">{type}</PropertiesTable.Row>

app/forms/image-from-snapshot.tsx

@@ -84,6 +84,7 @@ export function CreateImageFromSnapshotSideModalForm() {
         })
       }
       submitError={createImage.error}
+      loading={createImage.isPending}
     >
       <PropertiesTable>
         <PropertiesTable.Row label="Snapshot">{data.name}</PropertiesTable.Row>

app/forms/network-interface-create.tsx

@@ -42,7 +42,7 @@ type CreateNetworkInterfaceFormProps = {
 export function CreateNetworkInterfaceForm({
   onSubmit,
   onDismiss,
-  loading,
+  loading = false,
   submitError = null,
 }: CreateNetworkInterfaceFormProps) {
   const projectSelector = useProjectSelector()

app/forms/snapshot-create.tsx

@@ -72,6 +72,7 @@ export function CreateSnapshotSideModalForm() {
         createSnapshot.mutate({ query: projectSelector, body: values })
       }}
       submitError={createSnapshot.error}
+      loading={createSnapshot.isPending}
     >
       <NameField name="name" control={form.control} />
       <DescriptionField name="description" control={form.control} />