SelectionList Updates (#12139)

* Adjust panel layout

* edit list on click

* Optionally fetch selection list items

* Display in DetailDrawer

* Fix component locations

* Refactor entry table

* Add new entry

* Disable if locked

* Only validate choices if provided via API

* Mark "choices" as read-only

* Prevent delete of locked items

* Add more API unit tests

* Bump API version

* Adjust unit tests

* Default include choices

* Updated playwright test

* Improve test robustness

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

@@ -77,6 +77,7 @@ test('Parts - Image Selection', async ({ browser }) => {
   await page
     .getByRole('tabpanel', { name: 'Part Details' })
     .locator('img')
+    .first()
     .hover();
   await page
     .getByRole('button', { name: 'action-button-select-from-' })
@@ -94,6 +95,7 @@ test('Parts - Image Selection', async ({ browser }) => {
   await page
     .getByRole('tabpanel', { name: 'Part Details' })
     .locator('img')
+    .first()
     .hover();
   await page
     .getByRole('button', { name: 'action-button-delete-image' })

src/frontend/tests/pui_settings.spec.ts

@@ -408,29 +408,8 @@ test('Settings - Admin - Parameter', async ({ browser }) => {
   await page.getByRole('button', { name: 'admin' }).click();
   await page.getByRole('menuitem', { name: 'Admin Center' }).click();
 
-  await loadTab(page, 'Parameters', true);
-
-  await page.waitForLoadState('networkidle');
-  await page.waitForTimeout(500);
-
-  // Clean old template data if exists
-  await page
-    .getByRole('cell', { name: 'my custom parameter', exact: true })
-    .waitFor({ timeout: 500 })
-    .then(async (cell) => {
-      await page
-        .getByRole('cell', { name: 'my custom parameter' })
-        .locator('..')
-        .getByLabel('row-action-menu-')
-        .click();
-      await page.getByRole('menuitem', { name: 'Delete' }).click();
-      await page.getByRole('button', { name: 'Delete' }).click();
-    })
-    .catch(() => {});
-
   // Allow time for the table to load
-  await page.getByRole('button', { name: 'Selection Lists' }).click();
-  await page.waitForLoadState('networkidle');
+  await loadTab(page, 'Selection Lists');
 
   // Check for expected entry
   await page.getByRole('cell', { name: 'Animals', exact: true }).waitFor();
@@ -456,38 +435,65 @@ test('Settings - Admin - Parameter', async ({ browser }) => {
   await page.getByLabel('action-button-add-selection-').click();
   await page.getByLabel('text-field-name').fill('some list');
   await page.getByLabel('text-field-description').fill('Listdescription');
+  await page.getByRole('button', { name: 'Submit' }).click();
+
+  // Select the new list to edit entries
+  await page.getByRole('cell', { name: 'some list' }).click();
+  await page.getByRole('button', { name: 'Selection List Entries' }).waitFor();
+  await page.getByRole('button', { name: 'Selection List Details' }).click();
 
   // Add an entry to the selection list
-  await page.getByRole('button', { name: 'action-button-add-new-row' }).click();
+  await page.getByRole('button', { name: 'action-button-add-entry' }).click();
   await page.getByRole('textbox', { name: 'text-field-value' }).fill('HW');
   await page
     .getByRole('textbox', { name: 'text-field-label' })
     .fill('Hardwood');
+
   await page
-    .getByRole('row', { name: 'boolean-field-active action-' })
-    .getByLabel('text-field-description')
+    .getByRole('textbox', { name: 'text-field-description' })
     .fill('Hardwood materials');
-  await page.getByRole('cell', { name: 'boolean-field-active' }).click();
-
+  await page.waitForTimeout(100);
   await page.getByRole('button', { name: 'Submit' }).click();
-  await page.getByRole('cell', { name: 'some list' }).waitFor();
 
-  await page.getByLabel('action-button-add-parameter').waitFor();
-  await page.getByLabel('action-button-add-parameter').click();
-  await page.getByLabel('text-field-name').fill('my custom parameter');
-  await page.getByLabel('text-field-description').fill('description');
+  await page.getByRole('cell', { name: 'HW' }).waitFor();
+
+  // Next, navigate to the "Parameters" tab
+  await navigate(page, 'settings/admin/parameters/');
+
+  await loadTab(page, 'Parameters', true);
+
+  await page.waitForLoadState('networkidle');
+  await page.waitForTimeout(500);
+
+  // Clean old template data if exists
   await page
-    .locator('div')
-    .filter({ hasText: /^Search\.\.\.$/ })
-    .nth(2)
+    .getByRole('cell', { name: 'my custom parameter', exact: true })
+    .waitFor({ timeout: 500 })
+    .then(async (cell) => {
+      await page
+        .getByRole('cell', { name: 'my custom parameter' })
+        .locator('..')
+        .getByLabel('row-action-menu-')
+        .click();
+      await page.getByRole('menuitem', { name: 'Delete' }).click();
+      await page.getByRole('button', { name: 'Delete' }).click();
+    })
+    .catch(() => {});
+
+  // Create a new parameter, using the "Hardwood" selection list entry as the value
+  await page
+    .getByRole('button', { name: 'action-button-add-parameter-' })
     .click();
   await page
-    .getByRole('option', { name: 'some list' })
-    .locator('div')
-    .first()
-    .click();
+    .getByRole('textbox', { name: 'text-field-name' })
+    .fill('my custom parameter');
+  await page
+    .getByRole('combobox', { name: 'related-field-selectionlist' })
+    .fill('some');
+  await page.getByRole('option', { name: 'some list' }).click();
+
   await page.getByRole('button', { name: 'Submit' }).click();
-  await page.getByRole('cell', { name: 'my custom parameter' }).click();
+  await page.waitForLoadState('networkidle');
 
   // Fill parameter
   await navigate(page, 'part/104/parameters/');