[PUI] form error fix (#7689)

* Make initial data query wait until options query is complete

* Fix form error issues

- Form fields were being re-constructed

* Update playwright tests - check for form error message

* Prevent reconstruction of form fields

* Hide form elements until OPTIONS request is complete

* Fix for <ChoiceField />

- "value" must be stringified!

* Handle undefined choice values

* Add "batch code" to stock detail page

* Fix for initial focus

* Allow form field definition to change externally

* Force override of fetched data

* Update playwright tests

* Add backup value

* Cleanup initialdataquery

* Unit test updates

* Test updates

* Tweak API Form

* Adjust playwright test

src/frontend/tests/baseFixtures.ts

@@ -64,6 +64,8 @@ export const test = baseTest.extend({
           .indexOf(
             'Support for defaultProps will be removed from function components in a future major release'
           ) < 0 &&
+        msg.text() !=
+          'Failed to load resource: the server responded with a status of 400 (Bad Request)' &&
         url != 'http://localhost:8000/api/user/me/' &&
         url != 'http://localhost:8000/api/user/token/' &&
         url != 'http://localhost:8000/api/barcode/' &&

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

@@ -203,7 +203,7 @@ test('PUI - Pages - Part - Parameters', async ({ page }) => {
 
   // Select the "Color" parameter template (should create a "choice" field)
   await page.getByLabel('related-field-template').fill('Color');
-  await page.getByText('Part color').click();
+  await page.getByRole('option', { name: 'Color Part color' }).click();
   await page.getByLabel('choice-field-data').click();
   await page.getByRole('option', { name: 'Green' }).click();
 

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

@@ -128,5 +128,4 @@ test('PUI - Pages - Index - Scan (General)', async ({ page }) => {
   await page.getByRole('button', { name: 'Toggle Fullscreen' }).click();
   await page.waitForTimeout(1000);
   await page.getByRole('button', { name: 'Toggle Fullscreen' }).click();
-  await page.waitForTimeout(1000);
 });

src/frontend/tests/pui_general.spec.ts

@@ -195,4 +195,16 @@ test('PUI - Company', async ({ page }) => {
   await page.getByRole('cell', { name: 'Carla Tunnel' }).waitFor();
   await page.getByRole('tab', { name: 'Attachments' }).click();
   await page.getByRole('tab', { name: 'Notes' }).click();
+
+  // Let's edit the company details
+  await page.getByLabel('action-menu-company-actions').click();
+  await page.getByLabel('action-menu-company-actions-edit').click();
+
+  await page.getByLabel('text-field-name').fill('');
+  await page.getByLabel('text-field-website').fill('invalid-website');
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  await page.getByText('This field may not be blank.').waitFor();
+  await page.getByText('Enter a valid URL.').waitFor();
+  await page.getByRole('button', { name: 'Cancel' }).click();
 });

src/frontend/tests/pui_settings.spec.ts

@@ -1,4 +1,4 @@
-import { test } from './baseFixtures.js';
+import { expect, test } from './baseFixtures.js';
 import { baseUrl } from './defaults.js';
 import { doQuickLogin } from './login.js';
 
@@ -48,7 +48,42 @@ test('PUI - Admin', async ({ page }) => {
   await page.getByRole('tab', { name: 'Label Templates' }).click();
   await page.getByRole('tab', { name: 'Report Templates' }).click();
   await page.getByRole('tab', { name: 'Plugins' }).click();
-  await page.getByRole('tab', { name: 'Machines' }).click();
+
+  // Adjust some "location type" items
+  await page.getByRole('tab', { name: 'Location Types' }).click();
+
+  // Edit first item
+  await page.getByLabel('row-action-menu-0').click();
+  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await expect(page.getByLabel('text-field-name')).toHaveValue('Room');
+  await expect(page.getByLabel('text-field-description')).toHaveValue('A room');
+  await page.getByLabel('text-field-name').fill('Large Room');
+  await page.waitForTimeout(500);
+  await page.getByLabel('text-field-description').fill('A large room');
+  await page.waitForTimeout(500);
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // Edit second item
+  await page.getByLabel('row-action-menu-1').click();
+  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await expect(page.getByLabel('text-field-name')).toHaveValue('Box (Large)');
+  await expect(page.getByLabel('text-field-description')).toHaveValue(
+    'Large cardboard box'
+  );
+  await page.getByRole('button', { name: 'Cancel' }).click();
+
+  // Edit first item again (revert values)
+  await page.getByLabel('row-action-menu-0').click();
+  await page.getByRole('menuitem', { name: 'Edit' }).click();
+  await expect(page.getByLabel('text-field-name')).toHaveValue('Large Room');
+  await expect(page.getByLabel('text-field-description')).toHaveValue(
+    'A large room'
+  );
+  await page.getByLabel('text-field-name').fill('Room');
+  await page.waitForTimeout(500);
+  await page.getByLabel('text-field-description').fill('A room');
+  await page.waitForTimeout(500);
+  await page.getByRole('button', { name: 'Submit' }).click();
 });
 
 test('PUI - Admin - Unauthorized', async ({ page }) => {

src/frontend/tests/pui_tables.spec.ts

@@ -62,6 +62,4 @@ test('PUI - Tables - Columns', async ({ page }) => {
   // De-select some items
   await page.getByRole('menuitem', { name: 'Description' }).click();
   await page.getByRole('menuitem', { name: 'Stocktake' }).click();
-
-  await page.waitForTimeout(2500);
 });