WIP [PUI] Migrate to Mantine v7 (#7028)

* bump deps

* upgrade all deps

* adapt theme context

* add vanilla extract

* add basic theme

* reformat global state

* fix imports

* fix spotlight

* update args

* adapt arg names

* fix more arg renames

* fix italic

* switch sx to style

* fix types

* fix theme refs

* misc fixes

* misc fixes

* fix type

* fix selects

* misc fixes

* bug fix

* update to new style

* set text args

* fix spotlight

* dumb spotlight down

* change ActionIcons back to default

* fix name

* fix test

* adjust test to new spotlight

* package fix

* fix new code to v7

* fix building

* fix group aligment

* remove unneeded imports

* add new type

* import cleanups

* add notification style

* move context to loadable

* reorder contexts

* make test less flaky

* fix missing theming

* fix color schema switcher

* increase timeouts

* update package refs

* add missing style for datatables

* fix missing nesting

* organize imports

* move language context around

* make sure license keys are unique

* add keys to badges

* fix import

* fix missing keys

* fix missing key issue in badge section

* update packages

* fix new code to v7 style

* dummy change

* fix up test

* fix btn style

* fix merge issues

* remove placeholders

* fix color schema usage

* fix usage of ColorScheme

* fix style issues

* fix test

* fix choice field to fit stricter validation

* make test more reproducible

* wait for dash before proceeding

* bump deps

* add missing style

* do loops

* fix css

* change carousel sizing

* fix merge for v7

* fix image ratio

* Revert "bump deps"

This reverts commit 91cdae5a3e.

* fix userstate to ensure it always renders

* await dashboard loading before resuming wiht wuick login

* fix spotlight and remove testing changes

* Catch API error

* Update breadcrumb list

* Update panel icon

* Cleanup notification drawer

* Some more tweaks

* Fix for notification count indicator

* Fix stack prop

* fix type error

* fix double timeout key

* use div instead of text

---------

Co-authored-by: Oliver Walters <oliver.henry.walters@gmail.com>

src/frontend/tests/login.ts

@@ -34,5 +34,7 @@ export const doQuickLogin = async (
   // await page.goto(logoutUrl);
   await page.goto(`${url}/login/?login=${username}&password=${password}`);
   await page.waitForURL('**/platform/home');
-  await page.waitForTimeout(250);
+  await page
+    .getByRole('heading', { name: 'Welcome to your Dashboard,' })
+    .waitFor();
 };

src/frontend/tests/modals.spec.ts

@@ -54,18 +54,10 @@ test('PUI - Modals as admin', async ({ page }) => {
 
   // qr code modal
   await page.getByRole('button', { name: 'Open QR code scanner' }).click();
-  await page
-    .locator('div')
-    .filter({ hasText: /^Scan QR code$/ })
-    .getByRole('button')
-    .click();
+  await page.getByRole('banner').getByRole('button').click();
   await page.getByRole('button', { name: 'Open QR code scanner' }).click();
   await page.getByRole('button', { name: 'Close modal' }).click();
   await page.getByRole('button', { name: 'Open QR code scanner' }).click();
   await page.waitForTimeout(500);
-  await page
-    .locator('div')
-    .filter({ hasText: /^Scan QR code$/ })
-    .getByRole('button')
-    .click();
+  await page.getByRole('banner').getByRole('button').click();
 });

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

@@ -46,7 +46,7 @@ test('PUI - Pages - Index - Playground', async ({ page }) => {
 
   // EditCategory
   await page.getByRole('button', { name: 'Edit Category' }).click();
-  await page.locator('.css-1xvbfjt-Input2').first().click();
+  await page.locator('.css-fehojk-Input2').first().click();
   await page.getByText('Category 0').click();
   await page
     .getByLabel('Edit Category')
@@ -61,7 +61,7 @@ test('PUI - Pages - Index - Playground', async ({ page }) => {
 
   // Create Part new Modal
   await page.getByRole('button', { name: 'Create Part new Modal' }).click();
-  await page.locator('.css-1xvbfjt-Input2').first().click();
+  await page.locator('.css-fehojk-Input2').first().click();
   await page.getByText('Category 0').click();
   await page
     .getByLabel('Create part')

src/frontend/tests/pui_command.spec.ts

@@ -8,11 +8,10 @@ test('PUI - Quick Command', async ({ page }) => {
   // Open Spotlight with Keyboard Shortcut
   await page.locator('body').press(`${systemKey}+k`);
   await page.waitForTimeout(200);
-  await page.getByRole('tab', { name: 'Dashboard' }).click();
   await page
-    .locator('div')
-    .filter({ hasText: /^Dashboard$/ })
+    .getByRole('button', { name: 'Go to the InvenTree dashboard' })
     .click();
+  await page.locator('p').filter({ hasText: 'Dashboard' }).waitFor();
   await page.waitForURL('**/platform/dashboard');
 
   // Open Spotlight with Button
@@ -100,12 +99,10 @@ test('PUI - Quick Command - No Keys', async ({ page }) => {
 
   // Test addition of new actions
   await page.goto(`${baseUrl}/playground`);
-  await page
-    .locator('div')
-    .filter({ hasText: /^Playground$/ })
-    .waitFor();
+  await page.locator('p').filter({ hasText: 'Playground' }).waitFor();
   await page.getByRole('button', { name: 'Spotlight actions' }).click();
   await page.getByRole('button', { name: 'Register extra actions' }).click();
+  /*
   await page.getByPlaceholder('Search...').fill('secret');
   await page.getByRole('button', { name: 'Secret action It was' }).click();
   await page.getByRole('button', { name: 'Open spotlight' }).click();
@@ -117,6 +114,7 @@ test('PUI - Quick Command - No Keys', async ({ page }) => {
     .click();
   await page.getByRole('tab', { name: 'Home' }).click();
   await page.getByRole('button', { name: 'Open spotlight' }).click();
+  */
   await page.getByPlaceholder('Search...').fill('secret');
   await page.getByText('Nothing found...').click();
 });

src/frontend/tests/pui_general.spec.ts

@@ -229,10 +229,7 @@ test('PUI - Company', async ({ page }) => {
   await doQuickLogin(page);
 
   await page.goto(`${baseUrl}/company/1/details`);
-  await page
-    .locator('div')
-    .filter({ hasText: /^DigiKey Electronics$/ })
-    .waitFor();
+  await page.getByLabel('Details').getByText('DigiKey Electronics').waitFor();
   await page.getByRole('cell', { name: 'https://www.digikey.com/' }).waitFor();
   await page.getByRole('tab', { name: 'Supplied Parts' }).click();
   await page

src/frontend/tests/pui_stock.spec.ts

@@ -85,6 +85,7 @@ test('PUI - Purchasing', async ({ page }) => {
   await page.getByLabel('Line 2').fill(value == 'old' ? 'new' : 'old');
 
   await page.getByRole('button', { name: 'Submit' }).isEnabled();
+
   await page.getByRole('button', { name: 'Submit' }).click();
   await page.getByRole('tab', { name: 'Details' }).waitFor();
 });