[UI] Preview Drawer (#12117)

* Add <GlobalPreviewDrawer> component

* Allow plugins to interact

* provide either pk or instance data

* open preview drawer from calendar views

* Launch preview drawer directly from tables

* Add preview types

* Fix types

* CLear data on close

* Fix transition

* Allow caller to pass preview component

* AttributeGrid

* Use a table component

* Display info items

* Navigate to detail page from drawer

* Updates

* Refactor to use part detail view

* Display parameters

* Fix image caching

* Apply same to StockItem

* Remove old component

* Refactor details grid component

* Preview panel for PurchaseOrder model

* Implement for SalesOrder

* Support ReturnOrder

* SupplierPart and ManufacturerPart

* Support preview in parameteric tables

* support Company and BuildOrder

* Fix numbervalue

* BuildOrder and SalesOrderShipment

* location and category

* add user setting

* Fix typing

* Handle link clicks within preview drawer

* fixes

* Implement onClose callback

* Handle row click when panel preview is disabled

* Support custom detail links

* update playwright tests

* UI tweaks

* Add CHANGELOG entry

* docs

* define default API params per model type

* Split out more docs pages

* Simplify state ref

* Refactoring

* Simplify PreviewDrawer component

* observe user setting in calendar view

* Enable PreviewDrawer from RowViewAction

* Push render functions onto ModelInformation dict

* Fix lib compilation

* Refactor internal uses of RowViewAction

* typescript fixes

* Simplify PreviewDrawer component structure

* remove TODO placeholders

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

@@ -14,6 +14,9 @@ import {
   showParametricView,
   showTableView
 } from '../helpers';
+
+import { adminuser } from '../defaults';
+
 import { doCachedLogin } from '../login';
 import { setPluginState, setSettingState } from '../settings';
 
@@ -676,7 +679,10 @@ test('Parts - Allocations', async ({ browser }) => {
 
 test('Parts - Pricing (Nothing, BOM)', async ({ browser }) => {
   // Part with no history
-  const page = await doCachedLogin(browser, { url: 'part/82/pricing' });
+  const page = await doCachedLogin(browser, {
+    url: 'part/82/pricing',
+    user: adminuser
+  });
 
   await page.getByText('Small plastic enclosure, black').waitFor();
   await loadTab(page, 'Part Pricing');
@@ -713,6 +719,18 @@ test('Parts - Pricing (Nothing, BOM)', async ({ browser }) => {
   await page.getByRole('button', { name: 'Quantity Not sorted' }).waitFor();
   await page.getByRole('button', { name: 'Unit Price Not sorted' }).waitFor();
 
+  // View part details via detail drawer
+  await page
+    .getByRole('cell', { name: 'Thumbnail Blue Paint' })
+    .first()
+    .click();
+  await page.getByRole('link', { name: 'details-part-' }).first().waitFor();
+  await page.getByText('Allocated to Build Orders').waitFor();
+  await page.getByText('440[litres]').waitFor();
+
+  // Close the drawer with the escape key
+  await page.keyboard.press('Escape');
+
   // We expect some pricing data to be displayed
   await page
     .getByLabel('BOM Pricing')
@@ -726,6 +744,10 @@ test('Parts - Pricing (Nothing, BOM)', async ({ browser }) => {
     .getByRole('table')
     .getByText('Wood Screw')
     .click();
+
+  // We need to navigate via the preview drawer
+  await page.getByRole('link', { name: 'details-part-98' }).click();
+
   await page.waitForURL('**/part/98/**');
 });
 

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

@@ -179,7 +179,7 @@ test('Purchase Orders - General', async ({ browser }) => {
   await page.waitForURL('**/purchasing/index/**');
 
   await page.getByRole('cell', { name: 'PO0012' }).click();
-  await page.waitForTimeout(200);
+  await page.waitForLoadState('networkidle');
 
   await loadTab(page, 'Line Items');
   await loadTab(page, 'Received Stock');