Move logic into common file

Author: charliepark

app/forms/firewall-rules-common.tsx

@@ -6,7 +6,7 @@
  * Copyright Oxide Computer Company
  */
 
-import { useEffect, type ReactNode } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 import { useController, useForm, type Control } from 'react-hook-form'
 
 import {
@@ -40,9 +40,8 @@ import { KEYS } from '~/ui/util/keys'
 import { ALL_ISH } from '~/util/consts'
 import { validateIp, validateIpNet } from '~/util/ip'
 import { links } from '~/util/links'
-import { capitalize } from '~/util/str'
+import { capitalize, commaSeries } from '~/util/str'
 
-import { type ActiveSubforms } from './firewall-rules-create'
 import { type FirewallRuleValues } from './firewall-rules-util'
 
 /**
@@ -539,3 +538,33 @@ export const CommonFields = ({
     </>
   )
 }
+
+export type ActiveSubforms = { target: boolean; port: boolean; host: boolean }
+export const defaultActiveSubforms: ActiveSubforms = {
+  target: false,
+  port: false,
+  host: false,
+}
+
+export function useSubformStates(defaultActiveSubforms: ActiveSubforms) {
+  const [subformStates, setSubformStates] = useState(defaultActiveSubforms)
+  const updateSubformStates = (subform: keyof ActiveSubforms, value: boolean) => {
+    setSubformStates((prev) => ({ ...prev, [subform]: value }))
+  }
+  return { subformStates, updateSubformStates }
+}
+
+export const getActiveSubformList = (subformStates: ActiveSubforms) =>
+  commaSeries(
+    Object.keys(subformStates).filter((key) => subformStates[key as keyof ActiveSubforms]),
+    'and'
+  )
+    .replace('port', 'port filter')
+    .replace('host', 'host filter')
+
+export const submitDisabledMessage = (subformStates: ActiveSubforms) => {
+  const activeSubformList = getActiveSubformList(subformStates)
+  return activeSubformList.length > 0
+    ? `You have an unsaved ${activeSubformList} entry; save or clear ${activeSubformList.includes('and') ? 'them' : 'it'} to create this firewall rule`
+    : undefined
+}

app/forms/firewall-rules-create.tsx

@@ -5,7 +5,6 @@
  *
  * Copyright Oxide Computer Company
  */
-import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { useNavigate, useParams, type LoaderFunctionArgs } from 'react-router'
 
@@ -24,9 +23,13 @@ import { getVpcSelector, useVpcSelector } from '~/hooks/use-params'
 import { addToast } from '~/stores/toast'
 import { ALL_ISH } from '~/util/consts'
 import { pb } from '~/util/path-builder'
-import { commaSeries } from '~/util/str'
 
-import { CommonFields } from './firewall-rules-common'
+import {
+  CommonFields,
+  defaultActiveSubforms,
+  submitDisabledMessage,
+  useSubformStates,
+} from './firewall-rules-common'
 import { valuesToRuleUpdate, type FirewallRuleValues } from './firewall-rules-util'
 
 /** Empty form for when we're not creating from an existing rule */
@@ -71,23 +74,8 @@ CreateFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
   return null
 }
 
-export type ActiveSubforms = { target: boolean; port: boolean; host: boolean }
-const defaultActiveSubforms: ActiveSubforms = { target: false, port: false, host: false }
-
 export function CreateFirewallRuleForm() {
-  const [subformStates, setSubformStates] = useState(defaultActiveSubforms)
-  const updateSubformStates = (subform: keyof ActiveSubforms, value: boolean) => {
-    setSubformStates({
-      ...subformStates,
-      [subform]: value,
-    })
-  }
-  const activeSubformList = commaSeries(
-    Object.keys(subformStates).filter((key) => subformStates[key as keyof ActiveSubforms]),
-    'and'
-  )
-    .replace('port', 'port filter')
-    .replace('host', 'host filter')
+  const { subformStates, updateSubformStates } = useSubformStates(defaultActiveSubforms)
 
   const vpcSelector = useVpcSelector()
   const queryClient = useApiQueryClient()
@@ -139,11 +127,7 @@ export function CreateFirewallRuleForm() {
       loading={updateRules.isPending}
       submitError={updateRules.error}
       submitLabel="Add rule"
-      submitDisabled={
-        activeSubformList.length
-          ? `You have an unsaved ${activeSubformList} entry; save or clear ${activeSubformList.includes('and') ? 'them' : 'it'} to create this firewall rule`
-          : undefined
-      }
+      submitDisabled={submitDisabledMessage(subformStates)}
     >
       <CommonFields
         control={form.control}

app/forms/firewall-rules-edit.tsx

@@ -29,7 +29,12 @@ import { ALL_ISH } from '~/util/consts'
 import { invariant } from '~/util/invariant'
 import { pb } from '~/util/path-builder'
 
-import { CommonFields } from './firewall-rules-common'
+import {
+  CommonFields,
+  defaultActiveSubforms,
+  submitDisabledMessage,
+  useSubformStates,
+} from './firewall-rules-common'
 import { valuesToRuleUpdate, type FirewallRuleValues } from './firewall-rules-util'
 
 EditFirewallRuleForm.loader = async ({ params }: LoaderFunctionArgs) => {
@@ -55,6 +60,8 @@ export function EditFirewallRuleForm() {
   const vpcSelector = useVpcSelector()
   const queryClient = useApiQueryClient()
 
+  const { subformStates, updateSubformStates } = useSubformStates(defaultActiveSubforms)
+
   const { data: firewallRules } = usePrefetchedApiQuery('vpcFirewallRulesView', {
     query: { project, vpc },
   })
@@ -122,13 +129,15 @@ export function EditFirewallRuleForm() {
       // validationSchema={validationSchema}
       // validateOnBlur
       loading={updateRules.isPending}
+      submitDisabled={submitDisabledMessage(subformStates)}
       submitError={updateRules.error}
     >
       <CommonFields
         control={form.control}
         // error if name is being changed to something that conflicts with some other rule
         nameTaken={(name) => !!otherRules.find((r) => r.name === name)}
         error={updateRules.error}
+        updateSubformStates={updateSubformStates}
       />
     </SideModalForm>
   )