[UI] Display all error table field error messages (#12456)

* Display all error table field error messages

* Adjust playwright test

src/frontend/src/components/forms/fields/TableField.tsx

@@ -68,7 +68,20 @@ function TableFieldRow({
     );
   }
 
-  const nonFieldErrors = rowErrors?.non_field_errors;
+  // Render every error associated with this row, regardless of whether
+  // the modelRenderer also displays it next to a specific field -
+  // this guarantees no backend error is ever silently dropped
+  const rowErrorMessages: { key: string; message: string }[] = [];
+
+  if (rowErrors && typeof rowErrors === 'object') {
+    for (const [key, value] of Object.entries<any>(rowErrors)) {
+      const message = value?.message ?? value;
+
+      if (message) {
+        rowErrorMessages.push({ key, message });
+      }
+    }
+  }
 
   return (
     <>
@@ -79,17 +92,25 @@ function TableFieldRow({
         changeFn: changeFn,
         removeFn: removeFn
       })}
-      {nonFieldErrors && (
+      {rowErrorMessages.length > 0 && (
-        <Table.Tr key={`table-row-${rowId}-non-field-errors`}>
+        <Table.Tr key={`table-row-${rowId}-errors`}>
           <Table.Td colSpan={columnCount}>
-            <Group gap='xs'>
+            <Stack gap={4}>
+              {rowErrorMessages.map(({ key, message }) => (
+                <Group
+                  gap='xs'
+                  wrap='nowrap'
+                  key={`table-row-${rowId}-error-${key}`}
+                >
                   <ActionIcon size='sm' variant='transparent' c='red'>
                     <IconCornerDownRight />
                   </ActionIcon>
                   <Text size='xs' c='red'>
-                {nonFieldErrors.message ?? nonFieldErrors}
+                    {message}
                   </Text>
                 </Group>
+              ))}
+            </Stack>
           </Table.Td>
         </Table.Tr>
       )}

src/frontend/tests/pages/pui_stock.spec.ts

@@ -486,8 +486,9 @@ test('Stock - Return Items', async ({ browser }) => {
   await page.getByRole('textbox', { name: 'number-field-quantity' }).fill('0');
   await page.getByRole('button', { name: 'Submit' }).click();
 
-  await page.getByText('Quantity must be greater than zero').waitFor();
+  await page.getByText('Errors exist for one or more form fields').waitFor();
-  await page.getByText('This field is required.').waitFor();
+  await page.getByText('Quantity must be greater than zero').first().waitFor();
+  await page.getByText('This field is required.').first().waitFor();
 });
 
 test('Stock - Tracking', async ({ browser }) => {