- There is a prototype script in the rfd{' '}
-
- repository
-
- ,{' '}
-
- scripts/new.sh
-
- , that will create a new RFD when used like the code below.
-
-
-
- {newRfdNumber
- ? 'The snippet below automatically updates to ensure the new RFD number is correct.'
- : 'Replace the number below with the next free number'}
-
-
-
- $
- scripts/new.sh{' '}
- {newRfdNumber ? newRfdNumber.toString().padStart(4, '0') : '0042'} "My title
- here"
-
-
+ )}
+
+
+ )
+}
+
export default NewRfdButton
diff --git a/app/components/TextInput.tsx b/app/components/TextInput.tsx
new file mode 100644
index 0000000..bbd3d75
--- /dev/null
+++ b/app/components/TextInput.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 cn from 'classnames'
+import { forwardRef } from 'react'
+
+export type TextInputBaseProps = React.ComponentPropsWithRef<'input'> & {
+ disabled?: boolean
+ className?: string
+}
+
+export const TextInput = forwardRef(
+ ({ type = 'text', className, disabled, ...fieldProps }, ref) => {
+ return (
+
+
+
+ )
+ },
+)
diff --git a/app/components/rfd/index.css b/app/components/rfd/index.css
deleted file mode 100644
index 907797b..0000000
--- a/app/components/rfd/index.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/*
- * 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
- */
-
-.dialog {
- opacity: 0;
- transition-property: opacity, transform;
- transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
- transition-duration: 100ms;
- transform: translate3d(50%, 0px, 0px);
-}
-
-.dialog[data-enter] {
- opacity: 1;
- transition-duration: 100ms;
- transform: translate3d(0%, 0px, 0px);
-}
-
-.dialog[data-leave] {
- transition-duration: 50ms;
-}
-
-.spinner {
- --radius: 4;
- --PI: 3.14159265358979;
- --circumference: calc(var(--PI) * var(--radius) * 2px);
- animation: rotate 5s linear infinite;
-}
-
-.spinner .path {
- stroke-dasharray: var(--circumference);
- transform-origin: center;
- animation: dash 4s ease-in-out infinite;
- stroke: var(--content-accent);
-}
-
-@media (prefers-reduced-motion) {
- .spinner {
- animation: rotate 6s linear infinite;
- }
-
- .spinner .path {
- animation: none;
- stroke-dasharray: 20;
- stroke-dashoffset: 100;
- }
-
- .spinner-lg .path {
- stroke-dasharray: 50;
- }
-}
-
-.spinner .bg {
- stroke: var(--content-default);
-}
-
-@keyframes rotate {
- 100% {
- transform: rotate(360deg);
- }
-}
-
-@keyframes dash {
- from {
- stroke-dashoffset: var(--circumference);
- }
- to {
- stroke-dashoffset: calc(var(--circumference) * -1);
- }
-}
diff --git a/app/root.tsx b/app/root.tsx
index 401119d..c222d39 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -119,7 +119,6 @@ const Layout = ({ children, theme }: { children: React.ReactNode; theme?: string
-
{/* Use plausible analytics only on Vercel */}
{process.env.NODE_ENV === 'production' && (
diff --git a/app/routes/api.new-rfd.tsx b/app/routes/api.new-rfd.tsx
new file mode 100644
index 0000000..9fd8a54
--- /dev/null
+++ b/app/routes/api.new-rfd.tsx
@@ -0,0 +1,146 @@
+/*
+ * 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 { ActionFunctionArgs, data, redirect } from 'react-router'
+
+import { authenticate } from '../services/auth.server'
+
+interface CreateRfdPayload {
+ title: string
+ body: string
+}
+
+interface CreateRfdResponse {
+ number: string
+ error?: string
+}
+
+const RFD_API_BASE_URL = process.env.RFD_API
+const RFD_API_KEY = process.env.RFD_API_KEY
+
+const DEFAULT_HEADERS = {
+ Authorization: `Bearer ${RFD_API_KEY || ''}`,
+ 'Content-Type': 'application/json; charset=utf-8',
+}
+
+const RETRY_CONFIG = {
+ maxAttempts: 20,
+ initialDelay: 2000,
+ backoffMultiplier: 1.5,
+ backoffThreshold: 10,
+} as const
+
+export async function action({ request }: ActionFunctionArgs) {
+ try {
+ const user = await authenticate(request)
+ if (!RFD_API_KEY || !RFD_API_BASE_URL) {
+ throw new Response('RFD API config missing', { status: 500 })
+ }
+
+ if (!user) {
+ return data({ status: 'error', error: 'Unauthorized' }, { status: 401 })
+ }
+
+ const payload = await parseRequestPayload(request)
+ const rfdNumber = await createRfd(payload)
+ await waitForRfdAvailability(rfdNumber)
+
+ return redirect(`/rfd/${rfdNumber}`)
+ } catch (error) {
+ return handleError(error)
+ }
+}
+
+async function parseRequestPayload(request: Request): Promise {
+ try {
+ const { title, body } = await request.json()
+
+ if (!title || !body) {
+ throw new Response('Missing required fields: title and body', { status: 400 })
+ }
+
+ return { title, body }
+ } catch (error) {
+ if (error instanceof Response) throw error
+ throw new Response('Invalid JSON payload', { status: 400 })
+ }
+}
+
+async function createRfd({ title, body }: CreateRfdPayload): Promise {
+ const response = await fetch(`${RFD_API_BASE_URL}/rfd`, {
+ method: 'POST',
+ headers: DEFAULT_HEADERS,
+ body: JSON.stringify({ title, content: body }),
+ })
+
+ const result: CreateRfdResponse = await response.json()
+
+ if (!response.ok) {
+ const errorMessage = result.error || `HTTP ${response.status}: ${response.statusText}`
+ throw new Response(errorMessage, { status: response.status })
+ }
+
+ if (!result.number) {
+ throw new Response('Invalid response: missing RFD number', { status: 500 })
+ }
+
+ return result.number
+}
+
+async function waitForRfdAvailability(rfdNumber: string): Promise {
+ let attempt = 0
+ let delay = RETRY_CONFIG.initialDelay
+
+ while (attempt < RETRY_CONFIG.maxAttempts) {
+ try {
+ const response = await fetch(`${RFD_API_BASE_URL}/rfd/${rfdNumber}`, {
+ method: 'GET',
+ headers: DEFAULT_HEADERS,
+ })
+
+ if (response.ok) {
+ return // Success - RFD is available
+ }
+
+ if (response.status !== 404) {
+ // If it's not a 404, it's likely a different error we shouldn't retry
+ throw new Response(`Failed to verify RFD availability: ${response.status}`, {
+ status: response.status,
+ })
+ }
+ } catch {
+ // Network errors or other fetch failures
+ if (attempt >= RETRY_CONFIG.maxAttempts - 1) {
+ throw new Response('Failed to verify RFD creation', { status: 500 })
+ }
+ }
+
+ // Wait before next attempt
+ await sleep(delay)
+ attempt++
+
+ // Apply backoff after threshold
+ if (attempt > RETRY_CONFIG.backoffThreshold) {
+ delay *= RETRY_CONFIG.backoffMultiplier
+ }
+ }
+
+ throw new Response('RFD creation verification timeout', { status: 504 })
+}
+
+function sleep(ms: number): Promise {
+ return new Promise((resolve) => setTimeout(resolve, ms))
+}
+
+function handleError(error: unknown) {
+ if (error instanceof Response) {
+ return error
+ }
+
+ console.error('Unexpected error in RFD creation:', error)
+ return data({ status: 'error', error: 'An unexpected error occurred' }, { status: 500 })
+}
diff --git a/app/styles/index.css b/app/styles/index.css
index 27cabc4..2ee2906 100644
--- a/app/styles/index.css
+++ b/app/styles/index.css
@@ -159,3 +159,70 @@ table.inline-table {
}
}
}
+
+.dialog {
+ opacity: 0;
+ transition-property: opacity, transform;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 100ms;
+ transform: translate3d(50%, 0px, 0px);
+}
+
+.dialog[data-enter] {
+ opacity: 1;
+ transition-duration: 100ms;
+ transform: translate3d(0%, 0px, 0px);
+}
+
+.dialog[data-leave] {
+ transition-duration: 50ms;
+}
+
+.spinner {
+ --radius: 4;
+ --PI: 3.14159265358979;
+ --circumference: calc(var(--PI) * var(--radius) * 2px);
+ animation: rotate 5s linear infinite;
+}
+
+.spinner .path {
+ stroke-dasharray: var(--circumference);
+ transform-origin: center;
+ animation: dash 4s ease-in-out infinite;
+ stroke: var(--content-accent);
+}
+
+@media (prefers-reduced-motion) {
+ .spinner {
+ animation: rotate 6s linear infinite;
+ }
+
+ .spinner .path {
+ animation: none;
+ stroke-dasharray: 20;
+ stroke-dashoffset: 100;
+ }
+
+ .spinner-lg .path {
+ stroke-dasharray: 50;
+ }
+}
+
+.spinner .bg {
+ stroke: var(--content-default);
+}
+
+@keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+}
+
+@keyframes dash {
+ from {
+ stroke-dashoffset: var(--circumference);
+ }
+ to {
+ stroke-dashoffset: calc(var(--circumference) * -1);
+ }
+}