Fix full-form validation error keys

cypress/support/commands.js

@@ -82,8 +82,9 @@ Cypress.Commands.add('pageForbidden', url => {
 })
 
 Cypress.Commands.add('resetDatabase', () => {
-  cy.task('waitForDbHealthy')
-  cy.request(Cypress.env('databaseResetUrl')).its('status').should('eq', 200)
+  const dbWaitTimeoutMs = Number(Cypress.env('dbWaitTimeoutMs') ?? 30000)
+  cy.task('waitForDbHealthy', undefined, { timeout: dbWaitTimeoutMs })
+  cy.request({ url: Cypress.env('databaseResetUrl'), timeout: dbWaitTimeoutMs }).its('status').should('eq', 200)
 })
 
 // Optimized database reset that only resets once per test file
@@ -118,9 +119,14 @@ Cypress.Commands.add('loginWithSession', (username) => {
     })
   }, {
     validate: () => {
-      // Validate the session is still valid by checking for the username box
-      cy.visit('/')
-      cy.contains('.username-box', username, { timeout: 10000 }).should('be.visible')
+      cy.window().should(window => {
+        const storedUserState = window.localStorage.getItem('userState')
+        expect(storedUserState, 'stored user state').to.not.be.null
+
+        const parsedUserState = JSON.parse(storedUserState)
+        expect(parsedUserState?.username, 'stored username').to.eq(username)
+        expect(parsedUserState?.token, 'stored login token').to.be.a('string').and.not.be.empty
+      })
     },
   })
 })

frontend/src/components/DetailView/StagingView.tsx

@@ -51,7 +51,7 @@ const NewReferenceDialogContent = ({
     const nextFieldsWithErrors: FieldsWithErrorsType = {}
 
     for (const errorObject of validateReferenceFields(editData)) {
-      nextFieldsWithErrors[String(errorObject.name)] = errorObject
+      nextFieldsWithErrors[String(errorObject.field ?? errorObject.name)] = errorObject
     }
 
     setFieldsWithErrors(() => nextFieldsWithErrors)

frontend/src/components/DetailView/common/editingComponents.tsx

@@ -557,10 +557,8 @@ export const TimeBoundSelection = ({
 }) => {
   const { editData, setEditData, validator, fieldsWithErrors, setFieldsWithErrors } =
     useDetailContext<TimeUnitDetailsType>()
-  const errorObject = validator(
-    editData,
-    (targetField === 'up_bnd' ? 'up_bound' : 'low_bound') as keyof EditDataType<TimeUnitDetailsType>
-  )
+  const boundField = (targetField === 'up_bnd' ? 'up_bound' : 'low_bound') as keyof EditDataType<TimeUnitDetailsType>
+  const errorObject = validator(editData, boundField)
   const [open, setOpen] = useState(false)
 
   const selectorFn = (selected: TimeBoundDetailsType) => {
@@ -573,7 +571,7 @@ export const TimeBoundSelection = ({
   }
 
   useEffect(() => {
-    checkFieldErrors(String(targetField), errorObject, fieldsWithErrors, setFieldsWithErrors)
+    checkFieldErrors(String(boundField), errorObject, fieldsWithErrors, setFieldsWithErrors)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [errorObject])
 

frontend/src/components/DetailView/components.tsx

@@ -119,7 +119,7 @@ export const WriteButton = <T,>({
           }
 
           for (const errorObject of validationErrors) {
-            nextFieldsWithErrors[String(errorObject.name)] = errorObject
+            nextFieldsWithErrors[String(errorObject.field ?? errorObject.name)] = errorObject
           }
 
           return nextFieldsWithErrors

frontend/src/components/Reference/Tabs/ReferenceTab.tsx

@@ -34,7 +34,7 @@ export const ReferenceTab = () => {
           }
 
           for (const errorObject of validationErrors) {
-            nextFieldsWithErrors[String(errorObject.name)] = errorObject
+            nextFieldsWithErrors[String(errorObject.field ?? errorObject.name)] = errorObject
           }
 
           return nextFieldsWithErrors

frontend/src/components/TimeUnit/Tabs/TimeUnitTab.tsx

@@ -132,7 +132,7 @@ export const TimeUnitTab = () => {
       )}
       <ArrayFrame array={timeUnit} title="Time Unit" />
       <>
-        <Grouped title="Upper Bound" error={'up_bnd' in fieldsWithErrors}>
+        <Grouped title="Upper Bound" error={'up_bound' in fieldsWithErrors}>
           {!mode.read && (
             <Box display="flex" gap={1} marginBottom={'15px'}>
               <EditingForm<TimeBound, TimeUnitDetailsType>
@@ -158,7 +158,7 @@ export const TimeUnitTab = () => {
           )}
           <ArrayFrame array={upBound} title={'Selected Upper Bound'} />
         </Grouped>
-        <Grouped title="Lower Bound" error={'low_bnd' in fieldsWithErrors}>
+        <Grouped title="Lower Bound" error={'low_bound' in fieldsWithErrors}>
           {!mode.read && (
             <Box display="flex" gap={1} marginBottom={'15px'}>
               <EditingForm<TimeBound, TimeUnitDetailsType>

frontend/src/shared/validators/validator.ts

@@ -1,7 +1,7 @@
 import { Editable, Reference } from '../types'
 
 export type ValidationError = string | null | undefined
-export type ValidationObject = { name: string; error: ValidationError }
+export type ValidationObject = { name: string; error: ValidationError; field?: string }
 
 export type Validator = {
   name: string
@@ -18,6 +18,15 @@ export type Validator = {
 
 export type Validators<T> = { [field in keyof T]: Validator } & { [key: string]: Validator }
 
+const validationObject = (name: string, error: ValidationError, field: string): ValidationObject => {
+  const object: ValidationObject = { name, error }
+  Object.defineProperty(object, 'field', {
+    value: field,
+    enumerable: false,
+  })
+  return object
+}
+
 const validate: (validator: Validator, value: unknown) => ValidationError = (validator: Validator, value: unknown) => {
   const { required, minLength, maxLength, asNumber, asString, miscCheck, miscArray } = validator
 
@@ -80,11 +89,11 @@ export const validator = <T>(
   const fieldValidator = validators[fieldName]
 
   if (!fieldValidator || (fieldValidator.condition && !fieldValidator.condition(editData))) {
-    return { name: fieldName as string, error: null }
+    return validationObject(fieldName as string, null, fieldName as string)
   }
 
   const validationError = validate(fieldValidator, fieldValidator.useEditData ? editData : editData[fieldName])
-  return { name: fieldValidator.name, error: validationError }
+  return validationObject(fieldValidator.name, validationError, fieldName as string)
 }
 
 export const validateFields = <T>(