chore: convert more routes to RR v7 format (#2712)

* convert a bunch more route modules

* convert silo and idp forms

* floating ips routes

Author: david-crespo

.eslintrc.cjs

@@ -104,7 +104,7 @@ module.exports = {
     {
       // default exports are needed in the route modules and the config files,
       // but we want to avoid them anywhere else
-      files: ['app/pages/**/*', 'app/layouts/**/*', '*.config.ts'],
+      files: ['app/pages/**/*', 'app/layouts/**/*', 'app/forms/**/*', '*.config.ts'],
       rules: { 'import/no-default-export': 'off' },
     },
     {

app/forms/firewall-rules-create.tsx

@@ -19,6 +19,7 @@ import {
 
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { ALL_ISH } from '~/util/consts'
@@ -27,6 +28,8 @@ import { pb } from '~/util/path-builder'
 import { CommonFields } from './firewall-rules-common'
 import { valuesToRuleUpdate, type FirewallRuleValues } from './firewall-rules-util'
 
+export const handle = titleCrumb('New Rule')
+
 /** Empty form for when we're not creating from an existing rule */
 const defaultValuesEmpty: FirewallRuleValues = {
   enabled: true,
@@ -55,7 +58,7 @@ const ruleToValues = (rule: VpcFirewallRule): FirewallRuleValues => ({
   hosts: rule.filters.hosts || [],
 })
 
-CreateFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, vpc } = getVpcSelector(params)
   await Promise.all([
     apiQueryClient.prefetchQuery('vpcFirewallRulesView', { query: { project, vpc } }),
@@ -69,7 +72,7 @@ CreateFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function CreateFirewallRuleForm() {
+export default function CreateFirewallRuleForm() {
   const vpcSelector = useVpcSelector()
   const queryClient = useApiQueryClient()
 

app/forms/firewall-rules-edit.tsx

@@ -19,6 +19,7 @@ import {
 import { trigger404 } from '~/components/ErrorBoundary'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import {
   getFirewallRuleSelector,
   useFirewallRuleSelector,
@@ -32,7 +33,9 @@ import { pb } from '~/util/path-builder'
 import { CommonFields } from './firewall-rules-common'
 import { valuesToRuleUpdate, type FirewallRuleValues } from './firewall-rules-util'
 
-EditFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export const handle = titleCrumb('Edit Rule')
+
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project, vpc, rule } = getFirewallRuleSelector(params)
 
   const [firewallRules] = await Promise.all([
@@ -50,7 +53,7 @@ EditFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function EditFirewallRuleForm() {
+export default function EditFirewallRuleForm() {
   const { project, vpc, rule } = useFirewallRuleSelector()
   const vpcSelector = useVpcSelector()
   const queryClient = useApiQueryClient()

app/forms/floating-ip-create.tsx

@@ -24,6 +24,7 @@ import { ListboxField } from '~/components/form/fields/ListboxField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { useProjectSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Message } from '~/ui/lib/Message'
@@ -36,7 +37,9 @@ const defaultValues: Omit<FloatingIpCreate, 'ip'> = {
   pool: undefined,
 }
 
-export function CreateFloatingIpSideModalForm() {
+export const handle = titleCrumb('New Floating IP')
+
+export default function CreateFloatingIpSideModalForm() {
   // Fetch 1000 to we can be sure to get them all. Don't bother prefetching
   // because the list is hidden under the Advanced accordion.
   const { data: allPools } = useApiQuery('projectIpPoolList', { query: { limit: ALL_ISH } })

app/forms/floating-ip-edit.tsx

@@ -20,6 +20,7 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { getFloatingIpSelector, useFloatingIpSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { EmptyCell } from '~/table/cells/EmptyCell'
@@ -35,7 +36,7 @@ const floatingIpView = ({ project, floatingIp }: PP.FloatingIp) =>
 const instanceList = (project: string) =>
   getListQFn('instanceList', { query: { project, limit: ALL_ISH } })
 
-EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const selector = getFloatingIpSelector(params)
   await Promise.all([
     queryClient.fetchQuery(floatingIpView(selector)),
@@ -44,7 +45,9 @@ EditFloatingIpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function EditFloatingIpSideModalForm() {
+export const handle = titleCrumb('Edit Floating IP')
+
+export default function EditFloatingIpSideModalForm() {
   const navigate = useNavigate()
 
   const floatingIpSelector = useFloatingIpSelector()

app/forms/idp/create.tsx

@@ -17,6 +17,7 @@ import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { useSiloSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { Checkbox } from '~/ui/lib/Checkbox'
@@ -50,7 +51,9 @@ const defaultValues: IdpCreateFormValues = {
   },
 }
 
-export function CreateIdpSideModalForm() {
+export const handle = titleCrumb('New Identity Provider')
+
+export default function CreateIdpSideModalForm() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
 

app/forms/idp/edit.tsx

@@ -15,13 +15,14 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { getIdpSelector, useIdpSelector } from '~/hooks/use-params'
 import { FormDivider } from '~/ui/lib/Divider'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel, SideModal } from '~/ui/lib/SideModal'
 import { pb } from '~/util/path-builder'
 
-EditIdpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { silo, provider } = getIdpSelector(params)
   await apiQueryClient.prefetchQuery('samlIdentityProviderView', {
     path: { provider },
@@ -30,7 +31,9 @@ EditIdpSideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function EditIdpSideModalForm() {
+export const handle = titleCrumb('Edit Identity Provider')
+
+export default function EditIdpSideModalForm() {
   const { silo, provider } = useIdpSelector()
   const { data: idp } = usePrefetchedApiQuery('samlIdentityProviderView', {
     path: { provider },

app/forms/instance-create.tsx

@@ -157,7 +157,7 @@ const baseDefaultValues: InstanceCreateInput = {
   externalIps: [{ type: 'ephemeral' }],
 }
 
-CreateInstanceForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { project } = getProjectSelector(params)
   await Promise.all([
     // fetch both project and silo images
@@ -173,7 +173,9 @@ CreateInstanceForm.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export function CreateInstanceForm() {
+export const handle = { crumb: 'New instance' }
+
+export default function CreateInstanceForm() {
   const [isSubmitting, setIsSubmitting] = useState(false)
   const queryClient = useApiQueryClient()
   const { project } = useProjectSelector()

app/forms/silo-create.tsx

@@ -20,6 +20,7 @@ import { TextField } from '~/components/form/fields/TextField'
 import { TlsCertsField } from '~/components/form/fields/TlsCertsField'
 import { SideModalForm } from '~/components/form/SideModalForm'
 import { HL } from '~/components/HL'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { addToast } from '~/stores/toast'
 import { FormDivider } from '~/ui/lib/Divider'
 import { FieldLabel } from '~/ui/lib/FieldLabel'
@@ -48,7 +49,9 @@ const defaultValues: SiloCreateFormValues = {
   },
 }
 
-export function CreateSiloSideModalForm() {
+export const handle = titleCrumb('New Silo')
+
+export default function CreateSiloSideModalForm() {
   const navigate = useNavigate()
   const queryClient = useApiQueryClient()
 

app/forms/ssh-key-edit.tsx

@@ -15,19 +15,22 @@ import { DescriptionField } from '~/components/form/fields/DescriptionField'
 import { NameField } from '~/components/form/fields/NameField'
 import { TextField } from '~/components/form/fields/TextField'
 import { SideModalForm } from '~/components/form/SideModalForm'
+import { titleCrumb } from '~/hooks/use-crumbs'
 import { getSshKeySelector, useSshKeySelector } from '~/hooks/use-params'
 import { CopyToClipboard } from '~/ui/lib/CopyToClipboard'
 import { PropertiesTable } from '~/ui/lib/PropertiesTable'
 import { ResourceLabel } from '~/ui/lib/SideModal'
 import { pb } from '~/util/path-builder'
 
-EditSSHKeySideModalForm.loader = async ({ params }: LoaderFunctionArgs) => {
+export async function clientLoader({ params }: LoaderFunctionArgs) {
   const { sshKey } = getSshKeySelector(params)
   await apiQueryClient.prefetchQuery('currentUserSshKeyView', { path: { sshKey } })
   return null
 }
 
-export function EditSSHKeySideModalForm() {
+export const handle = titleCrumb('View SSH Key')
+
+export default function EditSSHKeySideModalForm() {
   const navigate = useNavigate()
   const { sshKey } = useSshKeySelector()